@lluc_llull/ui-lib 0.33.10 → 0.34.0

package/fesm2022/lluc_llull-ui-lib-directives.mjs

@@ -1,267 +1,388 @@
-import { isPlatformBrowser } from '@angular/common';
-import * as i0 from '@angular/core';
-import { EventEmitter, PLATFORM_ID, HostListener, Output, Input, Inject, Directive, HostBinding } from '@angular/core';
-export { LinkType } from '@lluc_llull/ui-lib/enums';
-import * as i1 from '@angular/router';
-
-class LinkTypeDirective {
-    router;
-    elRef;
-    platformId;
-    _linkType;
-    _href;
-    set linkType(value) {
-        this._linkType = value;
-        this.updateElementAttributes();
-    }
-    get linkType() { return this._linkType; }
-    set href(value) {
-        this._href = value;
-        this.updateElementAttributes();
-    }
-    get href() { return this._href ?? ''; }
-    anchorClicked = new EventEmitter();
-    constructor(router, elRef, platformId) {
-        this.router = router;
-        this.elRef = elRef;
-        this.platformId = platformId;
-    }
-    get isBrowser() {
-        return isPlatformBrowser(this.platformId);
-    }
-    onClick(event) {
-        if (!this.linkType || !this.href)
-            return;
-        switch (this.linkType) {
-            case 'internal':
-                event.preventDefault();
-                const targetUrl = this.elRef.nativeElement.getAttribute('href') ?? this.href;
-                this.router.navigateByUrl(targetUrl);
-                this.anchorClicked.emit();
-                break;
-            case 'anchor':
-                event.preventDefault();
-                this.scrollToAnchor(this.href);
-                break;
-            case 'nolink':
-                event.preventDefault();
-                break;
-            case 'external':
-            case 'pdf':
-            default:
-                break;
-        }
-    }
-    updateElementAttributes() {
-        const element = this.elRef.nativeElement;
-        if (!this.href) {
-            element.removeAttribute('href');
-            return;
-        }
-        const resolvedHref = this.resolveHref();
-        element.setAttribute('href', resolvedHref);
-        if (this.linkType === 'external' || this.linkType === 'pdf') {
-            element.setAttribute('target', '_blank');
-            element.setAttribute('rel', 'noopener noreferrer nofollow');
-        }
-        else {
-            element.removeAttribute('target');
-            element.removeAttribute('rel');
-        }
-    }
-    resolveHref() {
-        if (this.href.startsWith('/') || this.href.startsWith('http') || this.href.startsWith('#')) {
-            return this.href;
-        }
-        if (this.linkType === 'internal') {
-            const lang = this.getCurrentLang();
-            return `/${lang}/${this.href}`;
-        }
-        return this.href;
-    }
-    getCurrentLang() {
-        const url = this.router.url || '';
-        const firstSegment = url.split('?')[0].split('#')[0].split('/')[1];
-        return firstSegment || 'es';
-    }
-    scrollToAnchor(id) {
-        if (!this.isBrowser)
-            return;
-        const cleanId = id.replace(/^#/, '');
-        const el = document.getElementById(cleanId);
-        if (!el)
-            return;
-        const yOffset = -160;
-        const y = el.getBoundingClientRect().top + window.scrollY + yOffset;
-        window.scrollTo({
-            top: y,
-            behavior: 'smooth',
-        });
-        this.anchorClicked.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LinkTypeDirective, deps: [{ token: i1.Router }, { token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: LinkTypeDirective, isStandalone: true, selector: "[linkType]", inputs: { linkType: "linkType", href: "href" }, outputs: { anchorClicked: "anchorClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LinkTypeDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[linkType]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i1.Router }, { type: i0.ElementRef }, { type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }], propDecorators: { linkType: [{
-                type: Input
-            }], href: [{
-                type: Input
-            }], anchorClicked: [{
-                type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-class HighlightDirective {
-    highlightColor = '#FFFFFF';
-    highlightThickness = 20;
-    get background() {
-        const start = 65;
-        const end = start + this.highlightThickness;
-        return `linear-gradient(to bottom, 
+import { isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Directive, EventEmitter, HostBinding, HostListener, Inject, Input, Output, PLATFORM_ID } from "@angular/core";
+import { LinkType } from "@lluc_llull/ui-lib/enums";
+import * as i1 from "@angular/router";
+var LinkTypeDirective = class LinkTypeDirective {
+	router;
+	elRef;
+	platformId;
+	_linkType;
+	_href;
+	set linkType(value) {
+		this._linkType = value;
+		this.updateElementAttributes();
+	}
+	get linkType() {
+		return this._linkType;
+	}
+	set href(value) {
+		this._href = value;
+		this.updateElementAttributes();
+	}
+	get href() {
+		return this._href ?? "";
+	}
+	anchorClicked = new EventEmitter();
+	constructor(router, elRef, platformId) {
+		this.router = router;
+		this.elRef = elRef;
+		this.platformId = platformId;
+	}
+	get isBrowser() {
+		return isPlatformBrowser(this.platformId);
+	}
+	onClick(event) {
+		if (!this.linkType || !this.href) return;
+		switch (this.linkType) {
+			case "internal":
+				event.preventDefault();
+				const targetUrl = this.elRef.nativeElement.getAttribute("href") ?? this.href;
+				this.router.navigateByUrl(targetUrl);
+				this.anchorClicked.emit();
+				break;
+			case "anchor":
+				event.preventDefault();
+				this.scrollToAnchor(this.href);
+				break;
+			case "nolink": event.preventDefault();
+		}
+	}
+	updateElementAttributes() {
+		const element = this.elRef.nativeElement;
+		if (!this.href) {
+			element.removeAttribute("href");
+			return;
+		}
+		const resolvedHref = this.resolveHref();
+		element.setAttribute("href", resolvedHref);
+		if (this.linkType === "external" || this.linkType === "pdf") {
+			element.setAttribute("target", "_blank");
+			element.setAttribute("rel", "noopener noreferrer nofollow");
+		} else {
+			element.removeAttribute("target");
+			element.removeAttribute("rel");
+		}
+	}
+	resolveHref() {
+		if (this.href.startsWith("/") || this.href.startsWith("http") || this.href.startsWith("#")) return this.href;
+		if (this.linkType === "internal") return `/${this.getCurrentLang()}/${this.href}`;
+		return this.href;
+	}
+	getCurrentLang() {
+		return (this.router.url || "").split("?")[0].split("#")[0].split("/")[1] || "es";
+	}
+	scrollToAnchor(id) {
+		if (!this.isBrowser) return;
+		const cleanId = id.replace(/^#/, "");
+		const el = document.getElementById(cleanId);
+		if (!el) return;
+		const y = el.getBoundingClientRect().top + window.scrollY + -160;
+		window.scrollTo({
+			top: y,
+			behavior: "smooth"
+		});
+		this.anchorClicked.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: LinkTypeDirective,
+		deps: [
+			{ token: i1.Router },
+			{ token: i0.ElementRef },
+			{ token: PLATFORM_ID }
+		],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		type: LinkTypeDirective,
+		isStandalone: true,
+		selector: "[linkType]",
+		inputs: {
+			linkType: "linkType",
+			href: "href"
+		},
+		outputs: { anchorClicked: "anchorClicked" },
+		host: { listeners: { "click": "onClick($event)" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: LinkTypeDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[linkType]",
+			standalone: true
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i1.Router },
+		{ type: i0.ElementRef },
+		{
+			type: Object,
+			decorators: [{
+				type: Inject,
+				args: [PLATFORM_ID]
+			}]
+		}
+	],
+	propDecorators: {
+		linkType: [{ type: Input }],
+		href: [{ type: Input }],
+		anchorClicked: [{ type: Output }],
+		onClick: [{
+			type: HostListener,
+			args: ["click", ["$event"]]
+		}]
+	}
+});
+var HighlightDirective = class HighlightDirective {
+	highlightColor = "#FFFFFF";
+	highlightThickness = 20;
+	get background() {
+		const start = 65;
+		const end = start + this.highlightThickness;
+		return `linear-gradient(to bottom, 
       transparent ${start}%, 
       ${this.highlightColor} ${start}%, 
       ${this.highlightColor} ${end}%, 
       transparent ${end}%)`;
-    }
-    size = '100% 100%';
-    display = 'inline';
-    // desplazamiento
-    padding = '0 10px';
-    margin = '0 -10px'; // Compensa el padding para no mover el texto
-    break = 'clone';
-    wBreak = 'clone';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: HighlightDirective, isStandalone: true, selector: "[highlight]", inputs: { highlightColor: ["highlight", "highlightColor"], highlightThickness: "highlightThickness" }, host: { properties: { "style.background-image": "this.background", "style.background-size": "this.size", "style.display": "this.display", "style.padding": "this.padding", "style.margin": "this.margin", "style.box-decoration-break": "this.break", "style.-webkit-box-decoration-break": "this.wBreak" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HighlightDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[highlight]',
-                    standalone: true,
-                }]
-        }], propDecorators: { highlightColor: [{
-                type: Input,
-                args: ['highlight']
-            }], highlightThickness: [{
-                type: Input
-            }], background: [{
-                type: HostBinding,
-                args: ['style.background-image']
-            }], size: [{
-                type: HostBinding,
-                args: ['style.background-size']
-            }], display: [{
-                type: HostBinding,
-                args: ['style.display']
-            }], padding: [{
-                type: HostBinding,
-                args: ['style.padding']
-            }], margin: [{
-                type: HostBinding,
-                args: ['style.margin']
-            }], break: [{
-                type: HostBinding,
-                args: ['style.box-decoration-break']
-            }], wBreak: [{
-                type: HostBinding,
-                args: ['style.-webkit-box-decoration-break']
-            }] } });
-
-class ScrollRevealDirective {
-    el;
-    renderer;
-    platformId;
-    distance = '30px';
-    duration = '0.8s';
-    constructor(el, renderer, platformId) {
-        this.el = el;
-        this.renderer = renderer;
-        this.platformId = platformId;
-    }
-    ngOnInit() {
-        this.setupInitialStyles();
-        const isBrowser = isPlatformBrowser(this.platformId);
-        const hasIntersectionObserver = typeof globalThis !== 'undefined' && 'IntersectionObserver' in globalThis;
-        if (!isBrowser || !hasIntersectionObserver) {
-            this.reveal();
-            return;
-        }
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    this.reveal();
-                    observer.unobserve(this.el.nativeElement);
-                }
-            });
-        }, { threshold: 0.1 }); // Se dispara cuando el 10% del componente es visible
-        observer.observe(this.el.nativeElement);
-    }
-    setupInitialStyles() {
-        this.renderer.setStyle(this.el.nativeElement, 'opacity', '0');
-        this.renderer.setStyle(this.el.nativeElement, 'transform', `translateY(-${this.distance})`);
-        this.renderer.setStyle(this.el.nativeElement, 'transition', `all ${this.duration} ease-out`);
-    }
-    reveal() {
-        this.renderer.setStyle(this.el.nativeElement, 'opacity', '1');
-        this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateY(0)');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollRevealDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: ScrollRevealDirective, isStandalone: true, selector: "[scrollReveal]", inputs: { distance: "distance", duration: "duration" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollRevealDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scrollReveal]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }], propDecorators: { distance: [{
-                type: Input
-            }], duration: [{
-                type: Input
-            }] } });
-
-class HeaderScrollDirective {
-    scrollThreshold = 60;
-    isScrolled = false;
-    onScroll() {
-        this.isScrolled = window.scrollY > this.scrollThreshold;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HeaderScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: HeaderScrollDirective, isStandalone: true, selector: "[headerScroll]", inputs: { scrollThreshold: "scrollThreshold" }, host: { listeners: { "window:scroll": "onScroll()" }, properties: { "class.is-scrolled": "this.isScrolled" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HeaderScrollDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[headerScroll]',
-                    standalone: true,
-                }]
-        }], propDecorators: { scrollThreshold: [{
-                type: Input
-            }], isScrolled: [{
-                type: HostBinding,
-                args: ['class.is-scrolled']
-            }], onScroll: [{
-                type: HostListener,
-                args: ['window:scroll', []]
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
+	}
+	size = "100% 100%";
+	display = "inline";
+	padding = "0 10px";
+	margin = "0 -10px";
+	break = "clone";
+	wBreak = "clone";
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: HighlightDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		type: HighlightDirective,
+		isStandalone: true,
+		selector: "[highlight]",
+		inputs: {
+			highlightColor: ["highlight", "highlightColor"],
+			highlightThickness: "highlightThickness"
+		},
+		host: { properties: {
+			"style.background-image": "this.background",
+			"style.background-size": "this.size",
+			"style.display": "this.display",
+			"style.padding": "this.padding",
+			"style.margin": "this.margin",
+			"style.box-decoration-break": "this.break",
+			"style.-webkit-box-decoration-break": "this.wBreak"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: HighlightDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[highlight]",
+			standalone: true
+		}]
+	}],
+	propDecorators: {
+		highlightColor: [{
+			type: Input,
+			args: ["highlight"]
+		}],
+		highlightThickness: [{ type: Input }],
+		background: [{
+			type: HostBinding,
+			args: ["style.background-image"]
+		}],
+		size: [{
+			type: HostBinding,
+			args: ["style.background-size"]
+		}],
+		display: [{
+			type: HostBinding,
+			args: ["style.display"]
+		}],
+		padding: [{
+			type: HostBinding,
+			args: ["style.padding"]
+		}],
+		margin: [{
+			type: HostBinding,
+			args: ["style.margin"]
+		}],
+		break: [{
+			type: HostBinding,
+			args: ["style.box-decoration-break"]
+		}],
+		wBreak: [{
+			type: HostBinding,
+			args: ["style.-webkit-box-decoration-break"]
+		}]
+	}
+});
+var ScrollRevealDirective = class ScrollRevealDirective {
+	el;
+	renderer;
+	platformId;
+	distance = "30px";
+	duration = "0.8s";
+	constructor(el, renderer, platformId) {
+		this.el = el;
+		this.renderer = renderer;
+		this.platformId = platformId;
+	}
+	ngOnInit() {
+		this.setupInitialStyles();
+		const isBrowser = isPlatformBrowser(this.platformId);
+		const hasIntersectionObserver = typeof globalThis !== "undefined" && "IntersectionObserver" in globalThis;
+		if (!isBrowser || !hasIntersectionObserver) {
+			this.reveal();
+			return;
+		}
+		const observer = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) {
+					this.reveal();
+					observer.unobserve(this.el.nativeElement);
+				}
+			});
+		}, { threshold: .1 });
+		observer.observe(this.el.nativeElement);
+	}
+	setupInitialStyles() {
+		this.renderer.setStyle(this.el.nativeElement, "opacity", "0");
+		this.renderer.setStyle(this.el.nativeElement, "transform", `translateY(-${this.distance})`);
+		this.renderer.setStyle(this.el.nativeElement, "transition", `all ${this.duration} ease-out`);
+	}
+	reveal() {
+		this.renderer.setStyle(this.el.nativeElement, "opacity", "1");
+		this.renderer.setStyle(this.el.nativeElement, "transform", "translateY(0)");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ScrollRevealDirective,
+		deps: [
+			{ token: i0.ElementRef },
+			{ token: i0.Renderer2 },
+			{ token: PLATFORM_ID }
+		],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		type: ScrollRevealDirective,
+		isStandalone: true,
+		selector: "[scrollReveal]",
+		inputs: {
+			distance: "distance",
+			duration: "duration"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ScrollRevealDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[scrollReveal]",
+			standalone: true
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ElementRef },
+		{ type: i0.Renderer2 },
+		{
+			type: Object,
+			decorators: [{
+				type: Inject,
+				args: [PLATFORM_ID]
+			}]
+		}
+	],
+	propDecorators: {
+		distance: [{ type: Input }],
+		duration: [{ type: Input }]
+	}
+});
+var HeaderScrollDirective = class HeaderScrollDirective {
+	scrollThreshold = 60;
+	isScrolled = false;
+	onScroll() {
+		this.isScrolled = window.scrollY > this.scrollThreshold;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: HeaderScrollDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		type: HeaderScrollDirective,
+		isStandalone: true,
+		selector: "[headerScroll]",
+		inputs: { scrollThreshold: "scrollThreshold" },
+		host: {
+			listeners: { "window:scroll": "onScroll()" },
+			properties: { "class.is-scrolled": "this.isScrolled" }
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: HeaderScrollDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[headerScroll]",
+			standalone: true
+		}]
+	}],
+	propDecorators: {
+		scrollThreshold: [{ type: Input }],
+		isScrolled: [{
+			type: HostBinding,
+			args: ["class.is-scrolled"]
+		}],
+		onScroll: [{
+			type: HostListener,
+			args: ["window:scroll", []]
+		}]
+	}
+});
+export { HeaderScrollDirective, HighlightDirective, LinkType, LinkTypeDirective, ScrollRevealDirective };
 
-export { HeaderScrollDirective, HighlightDirective, LinkTypeDirective, ScrollRevealDirective };
-//# sourceMappingURL=lluc_llull-ui-lib-directives.mjs.map
+//# sourceMappingURL=lluc_llull-ui-lib-directives.mjs.map