@lluc_llull/ui-lib 0.34.3 → 0.35.0

package/fesm2022/lluc_llull-ui-lib-content-media-split.mjs

@@ -1,6 +1,7 @@
 import { CommonModule, isPlatformBrowser } from "@angular/common";
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, Inject, Input, PLATFORM_ID, computed, effect, signal } from "@angular/core";
+import { ScrollTextRevealDirective } from "@lluc_llull/ui-lib/directives";
 import { UiImageComponent } from "@lluc_llull/ui-lib/shared";
 var MediaSplitComponent = class MediaSplitComponent {
 	platformId;
@@ -63,24 +64,32 @@ var MediaSplitComponent = class MediaSplitComponent {
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div class=\"media-split main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"media-split__visual col-span-full md:col-span-7 md:col-start-1\">\n    @if (title) {\n      <h1 class=\"title\">{{ title }}</h1>\n    }\n\n    @if (images?.length) {\n      <div class=\"image-stack\" (mouseleave)=\"resetImage()\">\n        @if (currentImage().publicId) {\n          <ui-image\n            [publicId]=\"currentImage().publicId!\"\n            [eager]=\"true\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n          ></ui-image>\n        } @else {\n          <img\n            [src]=\"currentImage().url\"\n            [alt]=\"currentImage().alt\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n            loading=\"eager\"\n            fetchpriority=\"high\"\n          />\n        }\n\n        <div class=\"hover-grid\">\n          @for (image of images; track $index) {\n            <div class=\"hover-zone\" (mouseenter)=\"updateActiveImage($index)\"></div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"media-split__info col-span-full md:col-span-5 md:col-start-8\">\n    @if (text) {\n      <p class=\"text\" [innerHTML]=\"text\"></p>\n    }\n  </div>\n</div>\n",
-		styles: [".media-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:end;padding-block:0rem}.media-split__visual{display:flex;flex-direction:column;justify-content:flex-end}.media-split__visual .title{margin-bottom:1.5rem;text-transform:uppercase}.media-split__info{align-self:end;padding-bottom:.5rem}.img-responsive{width:100%;height:100%;display:block;object-fit:cover}.image-stack{position:relative;width:100%;aspect-ratio:14/9;overflow:hidden;cursor:ew-resize}.active-image{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .35s ease,transform .6s ease}.active-image.loaded{opacity:1;transform:scale(1)}.hover-grid{position:absolute;inset:0;display:flex;z-index:10;pointer-events:none}.hover-grid .hover-zone{flex:1;height:100%;cursor:inherit;pointer-events:auto}\n"],
-		dependencies: [{
-			kind: "ngmodule",
-			type: CommonModule
-		}, {
-			kind: "component",
-			type: UiImageComponent,
-			selector: "ui-image",
-			inputs: [
-				"publicId",
-				"cloudName",
-				"transformations",
-				"eager",
-				"width",
-				"height"
-			]
-		}],
+		template: "<div class=\"media-split main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"media-split__visual col-span-full md:col-span-7 md:col-start-1\">\n    @if (title) {\n      <h1 class=\"title\">{{ title }}</h1>\n    }\n\n    @if (images?.length) {\n      <div class=\"image-stack\" (mouseleave)=\"resetImage()\">\n        @if (currentImage().publicId) {\n          <ui-image\n            [publicId]=\"currentImage().publicId!\"\n            [eager]=\"true\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n          ></ui-image>\n        } @else {\n          <img\n            [src]=\"currentImage().url\"\n            [alt]=\"currentImage().alt\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n            loading=\"eager\"\n            fetchpriority=\"high\"\n          />\n        }\n\n        <div class=\"hover-grid\">\n          @for (image of images; track $index) {\n            <div class=\"hover-zone\" (mouseenter)=\"updateActiveImage($index)\"></div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"media-split__info col-span-full md:col-span-5 md:col-start-8\">\n    @if (text) {\n      <p class=\"text\" scrollTextReveal [innerHTML]=\"text\"></p>\n    }\n  </div>\n</div>\n",
+		styles: [".media-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:end;padding-block:0rem}.media-split__visual{display:flex;flex-direction:column;justify-content:flex-end}.media-split__visual .title{margin-bottom:1.5rem;text-transform:uppercase}.media-split__info{align-self:end;padding-bottom:.5rem}.media-split__info .text{color:var(--text-primary-60)}.img-responsive{width:100%;height:100%;display:block;object-fit:cover}.image-stack{position:relative;width:100%;aspect-ratio:14/9;overflow:hidden;cursor:ew-resize}.active-image{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .35s ease,transform .6s ease}.active-image.loaded{opacity:1;transform:scale(1)}.hover-grid{position:absolute;inset:0;display:flex;z-index:10;pointer-events:none}.hover-grid .hover-zone{flex:1;height:100%;cursor:inherit;pointer-events:auto}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "component",
+				type: UiImageComponent,
+				selector: "ui-image",
+				inputs: [
+					"publicId",
+					"cloudName",
+					"transformations",
+					"eager",
+					"width",
+					"height"
+				]
+			},
+			{
+				kind: "directive",
+				type: ScrollTextRevealDirective,
+				selector: "[scrollTextReveal]"
+			}
+		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -94,11 +103,15 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "lib-media-split",
 			standalone: true,
-			imports: [CommonModule, UiImageComponent],
+			imports: [
+				CommonModule,
+				UiImageComponent,
+				ScrollTextRevealDirective
+			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div class=\"media-split main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"media-split__visual col-span-full md:col-span-7 md:col-start-1\">\n    @if (title) {\n      <h1 class=\"title\">{{ title }}</h1>\n    }\n\n    @if (images?.length) {\n      <div class=\"image-stack\" (mouseleave)=\"resetImage()\">\n        @if (currentImage().publicId) {\n          <ui-image\n            [publicId]=\"currentImage().publicId!\"\n            [eager]=\"true\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n          ></ui-image>\n        } @else {\n          <img\n            [src]=\"currentImage().url\"\n            [alt]=\"currentImage().alt\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n            loading=\"eager\"\n            fetchpriority=\"high\"\n          />\n        }\n\n        <div class=\"hover-grid\">\n          @for (image of images; track $index) {\n            <div class=\"hover-zone\" (mouseenter)=\"updateActiveImage($index)\"></div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"media-split__info col-span-full md:col-span-5 md:col-start-8\">\n    @if (text) {\n      <p class=\"text\" [innerHTML]=\"text\"></p>\n    }\n  </div>\n</div>\n",
-			styles: [".media-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:end;padding-block:0rem}.media-split__visual{display:flex;flex-direction:column;justify-content:flex-end}.media-split__visual .title{margin-bottom:1.5rem;text-transform:uppercase}.media-split__info{align-self:end;padding-bottom:.5rem}.img-responsive{width:100%;height:100%;display:block;object-fit:cover}.image-stack{position:relative;width:100%;aspect-ratio:14/9;overflow:hidden;cursor:ew-resize}.active-image{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .35s ease,transform .6s ease}.active-image.loaded{opacity:1;transform:scale(1)}.hover-grid{position:absolute;inset:0;display:flex;z-index:10;pointer-events:none}.hover-grid .hover-zone{flex:1;height:100%;cursor:inherit;pointer-events:auto}\n"]
+			template: "<div class=\"media-split main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"media-split__visual col-span-full md:col-span-7 md:col-start-1\">\n    @if (title) {\n      <h1 class=\"title\">{{ title }}</h1>\n    }\n\n    @if (images?.length) {\n      <div class=\"image-stack\" (mouseleave)=\"resetImage()\">\n        @if (currentImage().publicId) {\n          <ui-image\n            [publicId]=\"currentImage().publicId!\"\n            [eager]=\"true\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n          ></ui-image>\n        } @else {\n          <img\n            [src]=\"currentImage().url\"\n            [alt]=\"currentImage().alt\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n            loading=\"eager\"\n            fetchpriority=\"high\"\n          />\n        }\n\n        <div class=\"hover-grid\">\n          @for (image of images; track $index) {\n            <div class=\"hover-zone\" (mouseenter)=\"updateActiveImage($index)\"></div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"media-split__info col-span-full md:col-span-5 md:col-start-8\">\n    @if (text) {\n      <p class=\"text\" scrollTextReveal [innerHTML]=\"text\"></p>\n    }\n  </div>\n</div>\n",
+			styles: [".media-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:end;padding-block:0rem}.media-split__visual{display:flex;flex-direction:column;justify-content:flex-end}.media-split__visual .title{margin-bottom:1.5rem;text-transform:uppercase}.media-split__info{align-self:end;padding-bottom:.5rem}.media-split__info .text{color:var(--text-primary-60)}.img-responsive{width:100%;height:100%;display:block;object-fit:cover}.image-stack{position:relative;width:100%;aspect-ratio:14/9;overflow:hidden;cursor:ew-resize}.active-image{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .35s ease,transform .6s ease}.active-image.loaded{opacity:1;transform:scale(1)}.hover-grid{position:absolute;inset:0;display:flex;z-index:10;pointer-events:none}.hover-grid .hover-zone{flex:1;height:100%;cursor:inherit;pointer-events:auto}\n"]
 		}]
 	}],
 	ctorParameters: () => [{

package/fesm2022/lluc_llull-ui-lib-content-media-split.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-content-media-split.mjs","names":[],"sources":["../../../projects/ui-lib/content/media-split/media-split.component.ts","../../../projects/ui-lib/content/media-split/media-split.component.html"],"sourcesContent":["import { CommonModule, isPlatformBrowser } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    effect,\n    Inject,\n    Input,\n    PLATFORM_ID,\n    signal,\n} from '@angular/core';\nimport { UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-media-split',\n    standalone: true,\n    imports: [CommonModule, UiImageComponent],\n    templateUrl: './media-split.component.html',\n    styleUrl: './media-split.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class MediaSplitComponent {\n    @Input() title?: string;\n    @Input() text?: string;\n    @Input() images?: UiLibImageI[];\n\n    activeImageIndex = signal(0);\n    imageLoaded = signal(false);\n\n    constructor(@Inject(PLATFORM_ID) private readonly platformId: Object) {\n        effect(() => {\n            this.activeImageIndex();\n\n            if (!isPlatformBrowser(this.platformId)) return;\n\n            this.imageLoaded.set(false);\n\n            requestAnimationFrame(() => {\n                this.imageLoaded.set(true);\n            });\n        });\n    }\n\n    currentImage = computed(() => {\n        const imgs = this.images ?? [];\n        return imgs[this.activeImageIndex()] ?? null;\n    });\n\n    updateActiveImage(index: number) {\n        this.activeImageIndex.set(index);\n    }\n\n    resetImage() {\n        this.activeImageIndex.set(0);\n    }\n\n    ngOnInit() {\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        if ('requestIdleCallback' in window) {\n            (window as any).requestIdleCallback(() => {\n                this.preloadImages();\n            });\n        } else {\n            setTimeout(() => this.preloadImages(), 2000);\n        }\n    }\n\n    private preloadImages() {\n        this.images?.slice(1).forEach((img) => {\n            const i = new Image();\n            i.src = img.url;\n        });\n    }\n}\n","<div class=\"media-split main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"media-split__visual col-span-full md:col-span-7 md:col-start-1\">\n    @if (title) {\n      <h1 class=\"title\">{{ title }}</h1>\n    }\n\n    @if (images?.length) {\n      <div class=\"image-stack\" (mouseleave)=\"resetImage()\">\n        @if (currentImage().publicId) {\n          <ui-image\n            [publicId]=\"currentImage().publicId!\"\n            [eager]=\"true\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n          ></ui-image>\n        } @else {\n          <img\n            [src]=\"currentImage().url\"\n            [alt]=\"currentImage().alt\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n            loading=\"eager\"\n            fetchpriority=\"high\"\n          />\n        }\n\n        <div class=\"hover-grid\">\n          @for (image of images; track $index) {\n            <div class=\"hover-zone\" (mouseenter)=\"updateActiveImage($index)\"></div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"media-split__info col-span-full md:col-span-5 md:col-start-8\">\n    @if (text) {\n      <p class=\"text\" [innerHTML]=\"text\"></p>\n    }\n  </div>\n</div>\n"],"mappings":";;;;AAyBA,IAAa,sBAAb,MAAa,oBAAmB;CAQsB;CAPzC;CACA;CACA;CAET,mBAAmB,OAAO,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAC5B,cAAc,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAE3B,YAAkD,YAAkB;EAAlB,KAAA,aAAA;EAC9C,aAAY;GACR,KAAK,iBAAgB;GAErB,IAAI,CAAC,kBAAkB,KAAK,UAAU,GAAG;GAEzC,KAAK,YAAY,IAAI,KAAK;GAE1B,4BAA2B;IACvB,KAAK,YAAY,IAAI,IAAI;GAC7B,CAAC;EACL,CAAC;CACL;CAEA,eAAe,eAAc;EAEzB,QADa,KAAK,UAAU,CAAA,EACrB,CAAK,KAAK,iBAAgB,MAAO;CAC5C,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEF,kBAAkB,OAAa;EAC3B,KAAK,iBAAiB,IAAI,KAAK;CACnC;CAEA,aAAU;EACN,KAAK,iBAAiB,IAAI,CAAC;CAC/B;CAEA,WAAQ;EACJ,IAAI,CAAC,kBAAkB,KAAK,UAAU,GAAG;EAEzC,IAAI,yBAAyB,QACxB,OAAe,0BAAyB;GACrC,KAAK,cAAa;EACtB,CAAC;OAED,iBAAiB,KAAK,cAAa,GAAI,GAAI;CAEnD;CAEQ,gBAAa;EACjB,KAAK,QAAQ,MAAM,CAAC,CAAC,CAAC,SAAS,QAAO;GAClC,MAAM,IAAI,IAAI,MAAK;GACnB,EAAE,MAAM,IAAI;EAChB,CAAC;CACL;CApDS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA,EAAA,OAQR,YAAW,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CARtB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;GAAA,MAAA;GAAA,QAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UCzBhC;EAyCA,QAAA,CAAA,i0BAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDxBc;EAAY,GAAA;GAAA,MAAA;GAAA,MAAE;GAAgB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQ/B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAX/B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAiB,YACf;GAAI,SACP,CAAC,cAAc,gBAAgB;GAAC,iBAGxB,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,i0BAAA;EAAA,CAAA;;;;;GAUY,MAAA;GAAO,MAAA,CAAA,WAAW;;;;E,UAP9B,MAAA,M;E,SACA,MAAA,M;E,WACA,MAAA,M"}
+{"version":3,"file":"lluc_llull-ui-lib-content-media-split.mjs","names":[],"sources":["../../../projects/ui-lib/content/media-split/media-split.component.ts","../../../projects/ui-lib/content/media-split/media-split.component.html"],"sourcesContent":["import { CommonModule, isPlatformBrowser } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    effect,\n    Inject,\n    Input,\n    PLATFORM_ID,\n    signal,\n} from '@angular/core';\nimport { ScrollTextRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-media-split',\n    standalone: true,\n    imports: [CommonModule, UiImageComponent, ScrollTextRevealDirective],\n    templateUrl: './media-split.component.html',\n    styleUrl: './media-split.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class MediaSplitComponent {\n    @Input() title?: string;\n    @Input() text?: string;\n    @Input() images?: UiLibImageI[];\n\n    activeImageIndex = signal(0);\n    imageLoaded = signal(false);\n\n    constructor(@Inject(PLATFORM_ID) private readonly platformId: Object) {\n        effect(() => {\n            this.activeImageIndex();\n\n            if (!isPlatformBrowser(this.platformId)) return;\n\n            this.imageLoaded.set(false);\n\n            requestAnimationFrame(() => {\n                this.imageLoaded.set(true);\n            });\n        });\n    }\n\n    currentImage = computed(() => {\n        const imgs = this.images ?? [];\n        return imgs[this.activeImageIndex()] ?? null;\n    });\n\n    updateActiveImage(index: number) {\n        this.activeImageIndex.set(index);\n    }\n\n    resetImage() {\n        this.activeImageIndex.set(0);\n    }\n\n    ngOnInit() {\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        if ('requestIdleCallback' in window) {\n            (window as any).requestIdleCallback(() => {\n                this.preloadImages();\n            });\n        } else {\n            setTimeout(() => this.preloadImages(), 2000);\n        }\n    }\n\n    private preloadImages() {\n        this.images?.slice(1).forEach((img) => {\n            const i = new Image();\n            i.src = img.url;\n        });\n    }\n}\n","<div class=\"media-split main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"media-split__visual col-span-full md:col-span-7 md:col-start-1\">\n    @if (title) {\n      <h1 class=\"title\">{{ title }}</h1>\n    }\n\n    @if (images?.length) {\n      <div class=\"image-stack\" (mouseleave)=\"resetImage()\">\n        @if (currentImage().publicId) {\n          <ui-image\n            [publicId]=\"currentImage().publicId!\"\n            [eager]=\"true\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n          ></ui-image>\n        } @else {\n          <img\n            [src]=\"currentImage().url\"\n            [alt]=\"currentImage().alt\"\n            class=\"img-responsive active-image\"\n            [class.loaded]=\"imageLoaded()\"\n            loading=\"eager\"\n            fetchpriority=\"high\"\n          />\n        }\n\n        <div class=\"hover-grid\">\n          @for (image of images; track $index) {\n            <div class=\"hover-zone\" (mouseenter)=\"updateActiveImage($index)\"></div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"media-split__info col-span-full md:col-span-5 md:col-start-8\">\n    @if (text) {\n      <p class=\"text\" scrollTextReveal [innerHTML]=\"text\"></p>\n    }\n  </div>\n</div>\n"],"mappings":";;;;;AA0BA,IAAa,sBAAb,MAAa,oBAAmB;CAQsB;CAPzC;CACA;CACA;CAET,mBAAmB,OAAO,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAC5B,cAAc,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAE3B,YAAkD,YAAkB;EAAlB,KAAA,aAAA;EAC9C,aAAY;GACR,KAAK,iBAAgB;GAErB,IAAI,CAAC,kBAAkB,KAAK,UAAU,GAAG;GAEzC,KAAK,YAAY,IAAI,KAAK;GAE1B,4BAA2B;IACvB,KAAK,YAAY,IAAI,IAAI;GAC7B,CAAC;EACL,CAAC;CACL;CAEA,eAAe,eAAc;EAEzB,QADa,KAAK,UAAU,CAAA,EACrB,CAAK,KAAK,iBAAgB,MAAO;CAC5C,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEF,kBAAkB,OAAa;EAC3B,KAAK,iBAAiB,IAAI,KAAK;CACnC;CAEA,aAAU;EACN,KAAK,iBAAiB,IAAI,CAAC;CAC/B;CAEA,WAAQ;EACJ,IAAI,CAAC,kBAAkB,KAAK,UAAU,GAAG;EAEzC,IAAI,yBAAyB,QACxB,OAAe,0BAAyB;GACrC,KAAK,cAAa;EACtB,CAAC;OAED,iBAAiB,KAAK,cAAa,GAAI,GAAI;CAEnD;CAEQ,gBAAa;EACjB,KAAK,QAAQ,MAAM,CAAC,CAAC,CAAC,SAAS,QAAO;GAClC,MAAM,IAAI,IAAI,MAAK;GACnB,EAAE,MAAM,IAAI;EAChB,CAAC;CACL;CApDS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA,EAAA,OAQR,YAAW,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CARtB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;GAAA,MAAA;GAAA,QAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UC1BhC;EAyCA,QAAA,CAAA,u3BAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDvBc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAyB,UAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQ1D,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAX/B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAiB,YACf;GAAI,SACP;IAAC;IAAc;IAAkB;GAAyB;GAAC,iBAGnD,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,u3BAAA;EAAA,CAAA;;;;;GAUY,MAAA;GAAO,MAAA,CAAA,WAAW;;;;E,UAP9B,MAAA,M;E,SACA,MAAA,M;E,WACA,MAAA,M"}

package/fesm2022/lluc_llull-ui-lib-content-mosaic-grid.mjs

@@ -40,7 +40,7 @@ var MosaicGridComponent = class MosaicGridComponent {
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div class=\"mosaic-grid main-grid\" scrollReveal>\n  @if (text) {\n    <p\n      class=\"mosaic-grid__text col-span-full md:col-span-6 md:col-start-7\"\n      [innerHTML]=\"text\"\n    ></p>\n  }\n\n  @for (group of imageGroups; track $index) {\n\n    <!-- row 1: 3 imágenes -->\n    <div class=\"mosaic-grid__images main-grid col-span-full\">\n      @for (img of group.row1; track $index) {\n        @if (img.publicId) {\n          <ui-image [publicId]=\"img.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"></ui-image>\n        } @else {\n          <img [src]=\"img.url\" [alt]=\"img.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\" />\n        }\n      }\n    </div>\n\n    <!-- row 2: 1 pequeña + 1 grande -->\n    @if (group.row2.length) {\n      <div class=\"mosaic-grid__images main-grid col-span-full\">\n        @if (group.row2[0]!.publicId) {\n          <ui-image [publicId]=\"group.row2[0]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"></ui-image>\n        } @else {\n          <img [src]=\"group.row2[0]!.url\" [alt]=\"group.row2[0]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\" />\n        }\n\n        @if (group.row2[1]) {\n          @if (group.row2[1]!.publicId) {\n            <ui-image [publicId]=\"group.row2[1]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"></ui-image>\n          } @else {\n            <img [src]=\"group.row2[1]!.url\" [alt]=\"group.row2[1]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\" />\n          }\n        }\n      </div>\n    }\n\n  }\n</div>\n",
+		template: "<div class=\"mosaic-grid main-grid\">\n  @if (text) {\n    <p\n      class=\"mosaic-grid__text col-span-full md:col-span-6 md:col-start-7\"\n      [innerHTML]=\"text\"\n      scrollReveal\n      from=\"right\"\n      distance=\"48px\"\n      duration=\"0.7s\"\n      [delay]=\"0\"\n      [threshold]=\"0\"\n      rootMargin=\"0px 0px -20% 0px\"\n    ></p>\n  }\n\n  @for (group of imageGroups; track $index) {\n\n    <!-- row 1: 3 imágenes -->\n    <div class=\"mosaic-grid__images main-grid col-span-full\">\n      @for (img of group.row1; track $index) {\n        @if (img.publicId) {\n          <ui-image [publicId]=\"img.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"$index * 90\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          ></ui-image>\n        } @else {\n          <img [src]=\"img.url\" [alt]=\"img.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"$index * 90\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          />\n        }\n      }\n    </div>\n\n    <!-- row 2: 1 pequeña + 1 grande -->\n    @if (group.row2.length) {\n      <div class=\"mosaic-grid__images main-grid col-span-full\">\n        @if (group.row2[0]!.publicId) {\n          <ui-image [publicId]=\"group.row2[0]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"0\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          ></ui-image>\n        } @else {\n          <img [src]=\"group.row2[0]!.url\" [alt]=\"group.row2[0]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"0\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          />\n        }\n\n        @if (group.row2[1]) {\n          @if (group.row2[1]!.publicId) {\n            <ui-image [publicId]=\"group.row2[1]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"\n              scrollReveal\n              from=\"bottom\"\n              distance=\"40px\"\n              duration=\"0.6s\"\n              [delay]=\"120\"\n              [threshold]=\"0\"\n              rootMargin=\"0px 0px -15% 0px\"\n            ></ui-image>\n          } @else {\n            <img [src]=\"group.row2[1]!.url\" [alt]=\"group.row2[1]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"\n              scrollReveal\n              from=\"bottom\"\n              distance=\"40px\"\n              duration=\"0.6s\"\n              [delay]=\"120\"\n              [threshold]=\"0\"\n              rootMargin=\"0px 0px -15% 0px\"\n            />\n          }\n        }\n      </div>\n    }\n\n  }\n</div>\n",
 		styles: ["ui-image{object-fit:cover}ui-image.image-half-height{height:50%!important}\n"],
 		dependencies: [
 			{
@@ -64,7 +64,14 @@ var MosaicGridComponent = class MosaicGridComponent {
 				kind: "directive",
 				type: ScrollRevealDirective,
 				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
+				inputs: [
+					"distance",
+					"duration",
+					"from",
+					"delay",
+					"threshold",
+					"rootMargin"
+				]
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -86,7 +93,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div class=\"mosaic-grid main-grid\" scrollReveal>\n  @if (text) {\n    <p\n      class=\"mosaic-grid__text col-span-full md:col-span-6 md:col-start-7\"\n      [innerHTML]=\"text\"\n    ></p>\n  }\n\n  @for (group of imageGroups; track $index) {\n\n    <!-- row 1: 3 imágenes -->\n    <div class=\"mosaic-grid__images main-grid col-span-full\">\n      @for (img of group.row1; track $index) {\n        @if (img.publicId) {\n          <ui-image [publicId]=\"img.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"></ui-image>\n        } @else {\n          <img [src]=\"img.url\" [alt]=\"img.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\" />\n        }\n      }\n    </div>\n\n    <!-- row 2: 1 pequeña + 1 grande -->\n    @if (group.row2.length) {\n      <div class=\"mosaic-grid__images main-grid col-span-full\">\n        @if (group.row2[0]!.publicId) {\n          <ui-image [publicId]=\"group.row2[0]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"></ui-image>\n        } @else {\n          <img [src]=\"group.row2[0]!.url\" [alt]=\"group.row2[0]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\" />\n        }\n\n        @if (group.row2[1]) {\n          @if (group.row2[1]!.publicId) {\n            <ui-image [publicId]=\"group.row2[1]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"></ui-image>\n          } @else {\n            <img [src]=\"group.row2[1]!.url\" [alt]=\"group.row2[1]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\" />\n          }\n        }\n      </div>\n    }\n\n  }\n</div>\n",
+			template: "<div class=\"mosaic-grid main-grid\">\n  @if (text) {\n    <p\n      class=\"mosaic-grid__text col-span-full md:col-span-6 md:col-start-7\"\n      [innerHTML]=\"text\"\n      scrollReveal\n      from=\"right\"\n      distance=\"48px\"\n      duration=\"0.7s\"\n      [delay]=\"0\"\n      [threshold]=\"0\"\n      rootMargin=\"0px 0px -20% 0px\"\n    ></p>\n  }\n\n  @for (group of imageGroups; track $index) {\n\n    <!-- row 1: 3 imágenes -->\n    <div class=\"mosaic-grid__images main-grid col-span-full\">\n      @for (img of group.row1; track $index) {\n        @if (img.publicId) {\n          <ui-image [publicId]=\"img.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"$index * 90\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          ></ui-image>\n        } @else {\n          <img [src]=\"img.url\" [alt]=\"img.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"$index * 90\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          />\n        }\n      }\n    </div>\n\n    <!-- row 2: 1 pequeña + 1 grande -->\n    @if (group.row2.length) {\n      <div class=\"mosaic-grid__images main-grid col-span-full\">\n        @if (group.row2[0]!.publicId) {\n          <ui-image [publicId]=\"group.row2[0]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"0\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          ></ui-image>\n        } @else {\n          <img [src]=\"group.row2[0]!.url\" [alt]=\"group.row2[0]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"0\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          />\n        }\n\n        @if (group.row2[1]) {\n          @if (group.row2[1]!.publicId) {\n            <ui-image [publicId]=\"group.row2[1]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"\n              scrollReveal\n              from=\"bottom\"\n              distance=\"40px\"\n              duration=\"0.6s\"\n              [delay]=\"120\"\n              [threshold]=\"0\"\n              rootMargin=\"0px 0px -15% 0px\"\n            ></ui-image>\n          } @else {\n            <img [src]=\"group.row2[1]!.url\" [alt]=\"group.row2[1]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"\n              scrollReveal\n              from=\"bottom\"\n              distance=\"40px\"\n              duration=\"0.6s\"\n              [delay]=\"120\"\n              [threshold]=\"0\"\n              rootMargin=\"0px 0px -15% 0px\"\n            />\n          }\n        }\n      </div>\n    }\n\n  }\n</div>\n",
 			styles: ["ui-image{object-fit:cover}ui-image.image-half-height{height:50%!important}\n"]
 		}]
 	}],

package/fesm2022/lluc_llull-ui-lib-content-mosaic-grid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-content-mosaic-grid.mjs","names":[],"sources":["../../../projects/ui-lib/content/mosaic-grid/mosaic-grid.component.ts","../../../projects/ui-lib/content/mosaic-grid/mosaic-grid.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';\nimport { ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n  selector: 'lib-mosaic-grid',\n  imports: [CommonModule, UiImageComponent, ScrollRevealDirective],\n  templateUrl: './mosaic-grid.component.html',\n  styleUrl: './mosaic-grid.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n      style: 'display: contents',\n  },\n})\nexport class MosaicGridComponent implements OnInit{\n  @Input() text?: string;\n  @Input() images?: UiLibImageI[];\n\n  imageGroups: { row1: UiLibImageI[], row2: UiLibImageI[] }[] = [];\n\n  ngOnInit(): void {\n    console.log('MosaicGridComponent initialized with images:', this.images);\n    if (!this.images?.length) {\n      this.imageGroups = [];\n      return;\n    }\n    const groups = [];\n    for (let i = 0; i < this.images.length; i += 5) {\n      groups.push({\n        row1: this.images.slice(i, i + 3),\n        row2: this.images.slice(i + 3, i + 5)\n      });\n    }\n    this.imageGroups = groups;\n  }\n}","<div class=\"mosaic-grid main-grid\" scrollReveal>\n  @if (text) {\n    <p\n      class=\"mosaic-grid__text col-span-full md:col-span-6 md:col-start-7\"\n      [innerHTML]=\"text\"\n    ></p>\n  }\n\n  @for (group of imageGroups; track $index) {\n\n    <!-- row 1: 3 imágenes -->\n    <div class=\"mosaic-grid__images main-grid col-span-full\">\n      @for (img of group.row1; track $index) {\n        @if (img.publicId) {\n          <ui-image [publicId]=\"img.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"></ui-image>\n        } @else {\n          <img [src]=\"img.url\" [alt]=\"img.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\" />\n        }\n      }\n    </div>\n\n    <!-- row 2: 1 pequeña + 1 grande -->\n    @if (group.row2.length) {\n      <div class=\"mosaic-grid__images main-grid col-span-full\">\n        @if (group.row2[0]!.publicId) {\n          <ui-image [publicId]=\"group.row2[0]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"></ui-image>\n        } @else {\n          <img [src]=\"group.row2[0]!.url\" [alt]=\"group.row2[0]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\" />\n        }\n\n        @if (group.row2[1]) {\n          @if (group.row2[1]!.publicId) {\n            <ui-image [publicId]=\"group.row2[1]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"></ui-image>\n          } @else {\n            <img [src]=\"group.row2[1]!.url\" [alt]=\"group.row2[1]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\" />\n          }\n        }\n      </div>\n    }\n\n  }\n</div>\n"],"mappings":";;;;;AAgBA,IAAa,sBAAb,MAAa,oBAAmB;CACrB;CACA;CAET,cAA8D,CAAA;CAE9D,WAAQ;EACN,QAAQ,IAAI,gDAAgD,KAAK,MAAM;EACvE,IAAI,CAAC,KAAK,QAAQ,QAAQ;GACxB,KAAK,cAAc,CAAA;GACnB;EACF;EACA,MAAM,SAAS,CAAA;EACf,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,OAAO,QAAQ,KAAK,GAC3C,OAAO,KAAK;GACV,MAAM,KAAK,OAAO,MAAM,GAAG,IAAI,CAAC;GAChC,MAAM,KAAK,OAAO,MAAM,IAAI,GAAG,IAAI,CAAC;EACrC,CAAA;EAEH,KAAK,cAAc;CACrB;CApBW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAnB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;GAAA,QAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UChBhC;EA0CA,QAAA,CAAA,8EAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDlCY;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,YAAA,UAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQpD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAV/B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,SAClB;IAAC;IAAc;IAAkB;GAAqB;GAAC,iBAG/C,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,8EAAA;EAAA,CAAA;;;E,SAGA,MAAA,M;E,WACA,MAAA,M"}
+{"version":3,"file":"lluc_llull-ui-lib-content-mosaic-grid.mjs","names":[],"sources":["../../../projects/ui-lib/content/mosaic-grid/mosaic-grid.component.ts","../../../projects/ui-lib/content/mosaic-grid/mosaic-grid.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';\nimport { ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n  selector: 'lib-mosaic-grid',\n  imports: [CommonModule, UiImageComponent, ScrollRevealDirective],\n  templateUrl: './mosaic-grid.component.html',\n  styleUrl: './mosaic-grid.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n      style: 'display: contents',\n  },\n})\nexport class MosaicGridComponent implements OnInit{\n  @Input() text?: string;\n  @Input() images?: UiLibImageI[];\n\n  imageGroups: { row1: UiLibImageI[], row2: UiLibImageI[] }[] = [];\n\n  ngOnInit(): void {\n    console.log('MosaicGridComponent initialized with images:', this.images);\n    if (!this.images?.length) {\n      this.imageGroups = [];\n      return;\n    }\n    const groups = [];\n    for (let i = 0; i < this.images.length; i += 5) {\n      groups.push({\n        row1: this.images.slice(i, i + 3),\n        row2: this.images.slice(i + 3, i + 5)\n      });\n    }\n    this.imageGroups = groups;\n  }\n}","<div class=\"mosaic-grid main-grid\">\n  @if (text) {\n    <p\n      class=\"mosaic-grid__text col-span-full md:col-span-6 md:col-start-7\"\n      [innerHTML]=\"text\"\n      scrollReveal\n      from=\"right\"\n      distance=\"48px\"\n      duration=\"0.7s\"\n      [delay]=\"0\"\n      [threshold]=\"0\"\n      rootMargin=\"0px 0px -20% 0px\"\n    ></p>\n  }\n\n  @for (group of imageGroups; track $index) {\n\n    <!-- row 1: 3 imágenes -->\n    <div class=\"mosaic-grid__images main-grid col-span-full\">\n      @for (img of group.row1; track $index) {\n        @if (img.publicId) {\n          <ui-image [publicId]=\"img.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"$index * 90\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          ></ui-image>\n        } @else {\n          <img [src]=\"img.url\" [alt]=\"img.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"$index * 90\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          />\n        }\n      }\n    </div>\n\n    <!-- row 2: 1 pequeña + 1 grande -->\n    @if (group.row2.length) {\n      <div class=\"mosaic-grid__images main-grid col-span-full\">\n        @if (group.row2[0]!.publicId) {\n          <ui-image [publicId]=\"group.row2[0]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"0\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          ></ui-image>\n        } @else {\n          <img [src]=\"group.row2[0]!.url\" [alt]=\"group.row2[0]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"\n            scrollReveal\n            from=\"bottom\"\n            distance=\"40px\"\n            duration=\"0.6s\"\n            [delay]=\"0\"\n            [threshold]=\"0\"\n            rootMargin=\"0px 0px -15% 0px\"\n          />\n        }\n\n        @if (group.row2[1]) {\n          @if (group.row2[1]!.publicId) {\n            <ui-image [publicId]=\"group.row2[1]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"\n              scrollReveal\n              from=\"bottom\"\n              distance=\"40px\"\n              duration=\"0.6s\"\n              [delay]=\"120\"\n              [threshold]=\"0\"\n              rootMargin=\"0px 0px -15% 0px\"\n            ></ui-image>\n          } @else {\n            <img [src]=\"group.row2[1]!.url\" [alt]=\"group.row2[1]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"\n              scrollReveal\n              from=\"bottom\"\n              distance=\"40px\"\n              duration=\"0.6s\"\n              [delay]=\"120\"\n              [threshold]=\"0\"\n              rootMargin=\"0px 0px -15% 0px\"\n            />\n          }\n        }\n      </div>\n    }\n\n  }\n</div>\n"],"mappings":";;;;;AAgBA,IAAa,sBAAb,MAAa,oBAAmB;CACrB;CACA;CAET,cAA8D,CAAA;CAE9D,WAAQ;EACN,QAAQ,IAAI,gDAAgD,KAAK,MAAM;EACvE,IAAI,CAAC,KAAK,QAAQ,QAAQ;GACxB,KAAK,cAAc,CAAA;GACnB;EACF;EACA,MAAM,SAAS,CAAA;EACf,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,OAAO,QAAQ,KAAK,GAC3C,OAAO,KAAK;GACV,MAAM,KAAK,OAAO,MAAM,GAAG,IAAI,CAAC;GAChC,MAAM,KAAK,OAAO,MAAM,IAAI,GAAG,IAAI,CAAC;EACrC,CAAA;EAEH,KAAK,cAAc;CACrB;CApBW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAnB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;GAAA,QAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UChBhC;EAiGA,QAAA,CAAA,8EAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDzFY;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQpD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAV/B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,SAClB;IAAC;IAAc;IAAkB;GAAqB;GAAC,iBAG/C,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,8EAAA;EAAA,CAAA;;;E,SAGA,MAAA,M;E,WACA,MAAA,M"}

package/fesm2022/lluc_llull-ui-lib-content-section-intro.mjs

@@ -60,7 +60,14 @@ var SectionIntroComponent = class SectionIntroComponent {
 				kind: "directive",
 				type: ScrollRevealDirective,
 				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
+				inputs: [
+					"distance",
+					"duration",
+					"from",
+					"delay",
+					"threshold",
+					"rootMargin"
+				]
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush

package/fesm2022/lluc_llull-ui-lib-content-section-intro.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-content-section-intro.mjs","names":[],"sources":["../../../projects/ui-lib/content/section-intro/section-intro.component.ts","../../../projects/ui-lib/content/section-intro/section-intro.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { LinkTypeDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibButtonI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-section-intro',\n    standalone: true,\n    imports: [CommonModule, LinkTypeDirective, UiIconComponent, ScrollRevealDirective],\n    templateUrl: './section-intro.component.html',\n    styleUrl: './section-intro.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class SectionIntroComponent {\n    @Input() pretitle?: string;\n    @Input() title?: string;\n    @Input() subtitle?: string;\n    @Input() text?: string;\n    @Input() button?: UiLibButtonI;\n}\n","<div class=\"section-intro col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  @if (pretitle) {\n    <h2 class=\"pretitle\">{{ pretitle }}</h2>\n  }\n  @if (title) {\n    <h1 class=\"title\">{{ title }}</h1>\n  }\n  @if (subtitle) {\n    <h2 class=\"subtitle\">{{ subtitle }}</h2>\n  }\n  @if (text) {\n    <p class=\"text\">{{ text }}</p>\n  }\n  @if (button) {\n    <div class=\"btn-group\">\n      <a [href]=\"button.url\" [linkType]=\"button.linkType\" class=\"btn btn-link\">\n        <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n        {{ button.label }}\n      </a>\n    </div>\n  }\n</div>\n"],"mappings":";;;;;AAiBA,IAAa,wBAAb,MAAa,sBAAqB;CACrB;CACA;CACA;CACA;CACA;CALA,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,UAAA;GAAA,OAAA;GAAA,UAAA;GAAA,MAAA;GAAA,QAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UCjBlC;EAsBA,QAAA,CAAA,gGAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDbc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,YAAA,UAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQxE,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EAXjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAmB,YACjB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAiB;GAAqB;GAAC,iBAGjE,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,gGAAA;EAAA,CAAA;;;E,aAGA,MAAA,M;E,UACA,MAAA,M;E,aACA,MAAA,M;E,SACA,MAAA,M;E,WACA,MAAA,M"}
+{"version":3,"file":"lluc_llull-ui-lib-content-section-intro.mjs","names":[],"sources":["../../../projects/ui-lib/content/section-intro/section-intro.component.ts","../../../projects/ui-lib/content/section-intro/section-intro.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { LinkTypeDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibButtonI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-section-intro',\n    standalone: true,\n    imports: [CommonModule, LinkTypeDirective, UiIconComponent, ScrollRevealDirective],\n    templateUrl: './section-intro.component.html',\n    styleUrl: './section-intro.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class SectionIntroComponent {\n    @Input() pretitle?: string;\n    @Input() title?: string;\n    @Input() subtitle?: string;\n    @Input() text?: string;\n    @Input() button?: UiLibButtonI;\n}\n","<div class=\"section-intro col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  @if (pretitle) {\n    <h2 class=\"pretitle\">{{ pretitle }}</h2>\n  }\n  @if (title) {\n    <h1 class=\"title\">{{ title }}</h1>\n  }\n  @if (subtitle) {\n    <h2 class=\"subtitle\">{{ subtitle }}</h2>\n  }\n  @if (text) {\n    <p class=\"text\">{{ text }}</p>\n  }\n  @if (button) {\n    <div class=\"btn-group\">\n      <a [href]=\"button.url\" [linkType]=\"button.linkType\" class=\"btn btn-link\">\n        <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n        {{ button.label }}\n      </a>\n    </div>\n  }\n</div>\n"],"mappings":";;;;;AAiBA,IAAa,wBAAb,MAAa,sBAAqB;CACrB;CACA;CACA;CACA;CACA;CALA,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,UAAA;GAAA,OAAA;GAAA,UAAA;GAAA,MAAA;GAAA,QAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UCjBlC;EAsBA,QAAA,CAAA,gGAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDbc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQxE,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EAXjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAmB,YACjB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAiB;GAAqB;GAAC,iBAGjE,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,gGAAA;EAAA,CAAA;;;E,aAGA,MAAA,M;E,UACA,MAAA,M;E,aACA,MAAA,M;E,SACA,MAAA,M;E,WACA,MAAA,M"}

package/fesm2022/lluc_llull-ui-lib-content-split-previewer.mjs

@@ -9,6 +9,8 @@ var SplitPreviewerComponent = class SplitPreviewerComponent {
 	items;
 	imageDefault;
 	direction = "right";
+	highlightColor = "var(--content-highlight)";
+	highlightThickness = 30;
 	activeImage = signal(void 0, ...ngDevMode ? [{ debugName: "activeImage" }] : /* istanbul ignore next */ []);
 	get count() {
 		return this.items?.length || 0;
@@ -46,12 +48,14 @@ var SplitPreviewerComponent = class SplitPreviewerComponent {
 			title: "title",
 			items: "items",
 			imageDefault: "imageDefault",
-			direction: "direction"
+			direction: "direction",
+			highlightColor: "highlightColor",
+			highlightThickness: "highlightThickness"
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div\n  class=\"split-previewer col-span-full md:col-span-12 md:col-start-1\"\n  [class]=\"'split-previewer--' + direction\"\n  scrollReveal\n>\n  <div class=\"split-previewer__text-column\">\n    <div class=\"split-previewer__header\">\n      @if (title) {\n        <h1 class=\"title\">{{ title }}</h1>\n      }\n      @if (count) {\n        <span class=\"count\">{{ count }}</span>\n      }\n    </div>\n\n    <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n      @for (item of items; track item.title) {\n        <a\n          [href]=\"item.link?.url\"\n          [linkType]=\"item.link?.linkType\"\n          (mouseenter)=\"activeImage.set(item.image)\"\n          class=\"split-previewer__item-link\"\n        >\n          <div class=\"split-previewer__item\">\n            <h2 class=\"split-previewer__item-title\" [highlight]=\"'#FFFFFF'\">{{ item.title }}</h2>\n            <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n            @if (item.tags?.length) {\n              <div class=\"split-previewer__item-tags\">\n                @for (tag of item.tags; track tag) {\n                  <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n                }\n              </div>\n            }\n          </div>\n        </a>\n      }\n    </div>\n  </div>\n\n  <div class=\"split-previewer__media\">\n    <div class=\"split-previewer__media-inner\">\n      @if ((activeImage() || imageDefault)?.publicId) {\n        <ui-image \n          [publicId]=\"(activeImage() || imageDefault)!.publicId!\" \n          [eager]=\"true\"\n          class=\"preview-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"(activeImage() || imageDefault)?.url\"\n          [alt]=\"(activeImage() || imageDefault)?.alt\"\n          class=\"preview-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  </div>\n</div>\n",
-		styles: [".split-previewer{display:flex;gap:5rem;min-width:0;padding-bottom:5rem}.split-previewer--left{flex-direction:row-reverse}.split-previewer--right{flex-direction:row}.split-previewer__text-column{flex:1;display:flex;flex-direction:column;min-width:0}.split-previewer__header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;min-width:0}.split-previewer__header .title{margin:0 0 1rem;text-transform:uppercase;min-width:0}.split-previewer__header .count{font-family:var(--font-base);font-size:1rem;font-weight:500;flex-shrink:0}.split-previewer__items{display:flex;flex-direction:column;min-width:0}.split-previewer__item-link{text-decoration:none;color:inherit;display:block;min-width:0}.split-previewer__item{transition:all .4s cubic-bezier(.25,.46,.45,.94);min-width:0}.split-previewer__item-title{margin-bottom:.5rem;display:inline-block;min-width:0}.split-previewer__item-text{line-height:1.6;max-width:min(1000px,100%);opacity:.8;overflow-wrap:break-word;font-size:1.2rem}.split-previewer__item-tags{display:flex;flex-wrap:wrap;gap:1rem;margin-block:1rem;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.split-previewer__item-tag{font-size:1rem;font-weight:600;letter-spacing:.05em;padding:.3rem .8rem;background-color:var(--tag-bg);color:var(--tag-color);border-radius:2px}.split-previewer__item-link:hover .split-previewer__item{padding-left:1rem}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:1;transform:translateY(0)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:1}.split-previewer__media{flex:1;min-width:0;position:relative}.split-previewer__media-inner{position:sticky;top:4rem;height:fit-content;display:flex;justify-content:center;align-items:center}.split-previewer__media .preview-img{display:block;width:100%;aspect-ratio:5/4;max-width:100%;height:auto;object-fit:contain;animation:fadeInMedia .5s ease-out;filter:contrast(1.1) grayscale(.2)}@media(max-width:1280px){.split-previewer{gap:3rem}}@media(max-width:1024px){.split-previewer{display:block;width:100%;min-width:0}.split-previewer--left,.split-previewer--right{flex-direction:unset}.split-previewer__media{display:none}.split-previewer__header{display:block}.split-previewer__header .title{margin-bottom:.75rem}.split-previewer__header .count{display:inline-block}.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:0;transform:translateY(10px)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:.8}.split-previewer__item-text{max-width:100%}.split-previewer__item-tags{display:none}}@media(hover:none)and (pointer:coarse){.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:0;transform:translateY(10px)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:.8}}@keyframes fadeInMedia{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}\n"],
+		template: "<div\n  class=\"split-previewer col-span-full md:col-span-12 md:col-start-1\"\n  [class]=\"'split-previewer--' + direction\"\n>\n  <div class=\"split-previewer__text-column\">\n    <div class=\"split-previewer__header\" scrollReveal from=\"left\" duration=\"1.2s\">\n      @if (title) {\n        <h1 class=\"title\">{{ title }}</h1>\n      }\n      @if (count) {\n        <span class=\"count\">{{ count }}</span>\n      }\n    </div>\n\n    <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n      @for (item of items; track item.title) {\n        <a\n          [href]=\"item.link?.url\"\n          [linkType]=\"item.link?.linkType\"\n          (mouseenter)=\"activeImage.set(item.image)\"\n          class=\"split-previewer__item-link\"\n          scrollReveal\n          from=\"left\"\n          duration=\"1.2s\"\n          [delay]=\"($index + 1) * 180\"\n        >\n          <div class=\"split-previewer__item\">\n            <h2 class=\"split-previewer__item-title\" [highlight]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ item.title }}</h2>\n            <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n            @if (item.tags?.length) {\n              <div class=\"split-previewer__item-tags\">\n                <div class=\"split-previewer__item-tags-inner\">\n                  @for (tag of item.tags; track tag) {\n                    <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </a>\n      }\n    </div>\n  </div>\n\n  <div class=\"split-previewer__media\">\n    <div class=\"split-previewer__media-inner\">\n      @if ((activeImage() || imageDefault)?.publicId) {\n        <ui-image \n          [publicId]=\"(activeImage() || imageDefault)!.publicId!\" \n          [eager]=\"true\"\n          class=\"preview-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"(activeImage() || imageDefault)?.url\"\n          [alt]=\"(activeImage() || imageDefault)?.alt\"\n          class=\"preview-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  </div>\n</div>\n",
+		styles: [".split-previewer{display:flex;gap:5rem;min-width:0;padding-bottom:5rem}.split-previewer--left{flex-direction:row-reverse}.split-previewer--right{flex-direction:row}.split-previewer__text-column{flex:1;display:flex;flex-direction:column;min-width:0}.split-previewer__header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;min-width:0}.split-previewer__header .title{margin:0 0 1rem;text-transform:uppercase;min-width:0}.split-previewer__header .count{font-family:var(--font-base);font-size:1rem;font-weight:500;flex-shrink:0}.split-previewer__items{display:flex;flex-direction:column;gap:2rem;min-width:0}.split-previewer__item-link{text-decoration:none;color:inherit;display:block;min-width:0}.split-previewer__item{transition:all .4s cubic-bezier(.25,.46,.45,.94);min-width:0}.split-previewer__item-title{margin-bottom:.5rem;display:inline-block;min-width:0;color:var(--text-primary-60);transition:color .3s ease}.split-previewer__item-text{line-height:1.6;max-width:min(1000px,100%);color:var(--text-primary-60);transition:color .3s ease;overflow-wrap:break-word;font-size:1.2rem}.split-previewer__item-tags{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;transition:grid-template-rows .45s ease,margin-top .45s ease,opacity .3s ease}.split-previewer__item-tags-inner{display:flex;flex-wrap:wrap;gap:1rem;min-height:0;overflow:hidden}.split-previewer__item-tag{font-size:1rem;font-weight:600;letter-spacing:.05em;padding:.3rem .8rem;background-color:var(--tag-bg);color:var(--tag-color);border:3px solid var(--tag-border)}.split-previewer__item-link:hover .split-previewer__item{padding-left:1rem}.split-previewer__item-link:hover .split-previewer__item-tags{grid-template-rows:1fr;margin-top:1rem;opacity:1}.split-previewer__item-link:hover .split-previewer__item-title,.split-previewer__item-link:hover .split-previewer__item-text{color:var(--text-primary)!important}.split-previewer__media{flex:1;min-width:0;position:relative}.split-previewer__media-inner{position:sticky;top:4rem;height:fit-content;display:flex;justify-content:center;align-items:center}.split-previewer__media .preview-img{display:block;width:100%;aspect-ratio:5/4;max-width:100%;height:auto;object-fit:contain;animation:fadeInMedia .5s ease-out;filter:contrast(1.1) grayscale(.2)}@media(max-width:1280px){.split-previewer{gap:3rem}}@media(max-width:1024px){.split-previewer{display:block;width:100%;min-width:0}.split-previewer--left,.split-previewer--right{flex-direction:unset}.split-previewer__media{display:none}.split-previewer__header{display:block}.split-previewer__header .title{margin-bottom:.75rem}.split-previewer__header .count{display:inline-block}.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-title,.split-previewer__item-link:hover .split-previewer__item-text{color:var(--text-primary-60)!important}.split-previewer__item-text{max-width:100%}.split-previewer__item-tags{display:none}}@media(hover:none)and (pointer:coarse){.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-tags{grid-template-rows:0fr;margin-top:0;opacity:0}.split-previewer__item-link:hover .split-previewer__item-title,.split-previewer__item-link:hover .split-previewer__item-text{color:var(--text-primary-60)!important}}@keyframes fadeInMedia{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -74,7 +78,14 @@ var SplitPreviewerComponent = class SplitPreviewerComponent {
 				kind: "directive",
 				type: ScrollRevealDirective,
 				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
+				inputs: [
+					"distance",
+					"duration",
+					"from",
+					"delay",
+					"threshold",
+					"rootMargin"
+				]
 			},
 			{
 				kind: "component",
@@ -111,8 +122,8 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div\n  class=\"split-previewer col-span-full md:col-span-12 md:col-start-1\"\n  [class]=\"'split-previewer--' + direction\"\n  scrollReveal\n>\n  <div class=\"split-previewer__text-column\">\n    <div class=\"split-previewer__header\">\n      @if (title) {\n        <h1 class=\"title\">{{ title }}</h1>\n      }\n      @if (count) {\n        <span class=\"count\">{{ count }}</span>\n      }\n    </div>\n\n    <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n      @for (item of items; track item.title) {\n        <a\n          [href]=\"item.link?.url\"\n          [linkType]=\"item.link?.linkType\"\n          (mouseenter)=\"activeImage.set(item.image)\"\n          class=\"split-previewer__item-link\"\n        >\n          <div class=\"split-previewer__item\">\n            <h2 class=\"split-previewer__item-title\" [highlight]=\"'#FFFFFF'\">{{ item.title }}</h2>\n            <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n            @if (item.tags?.length) {\n              <div class=\"split-previewer__item-tags\">\n                @for (tag of item.tags; track tag) {\n                  <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n                }\n              </div>\n            }\n          </div>\n        </a>\n      }\n    </div>\n  </div>\n\n  <div class=\"split-previewer__media\">\n    <div class=\"split-previewer__media-inner\">\n      @if ((activeImage() || imageDefault)?.publicId) {\n        <ui-image \n          [publicId]=\"(activeImage() || imageDefault)!.publicId!\" \n          [eager]=\"true\"\n          class=\"preview-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"(activeImage() || imageDefault)?.url\"\n          [alt]=\"(activeImage() || imageDefault)?.alt\"\n          class=\"preview-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  </div>\n</div>\n",
-			styles: [".split-previewer{display:flex;gap:5rem;min-width:0;padding-bottom:5rem}.split-previewer--left{flex-direction:row-reverse}.split-previewer--right{flex-direction:row}.split-previewer__text-column{flex:1;display:flex;flex-direction:column;min-width:0}.split-previewer__header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;min-width:0}.split-previewer__header .title{margin:0 0 1rem;text-transform:uppercase;min-width:0}.split-previewer__header .count{font-family:var(--font-base);font-size:1rem;font-weight:500;flex-shrink:0}.split-previewer__items{display:flex;flex-direction:column;min-width:0}.split-previewer__item-link{text-decoration:none;color:inherit;display:block;min-width:0}.split-previewer__item{transition:all .4s cubic-bezier(.25,.46,.45,.94);min-width:0}.split-previewer__item-title{margin-bottom:.5rem;display:inline-block;min-width:0}.split-previewer__item-text{line-height:1.6;max-width:min(1000px,100%);opacity:.8;overflow-wrap:break-word;font-size:1.2rem}.split-previewer__item-tags{display:flex;flex-wrap:wrap;gap:1rem;margin-block:1rem;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.split-previewer__item-tag{font-size:1rem;font-weight:600;letter-spacing:.05em;padding:.3rem .8rem;background-color:var(--tag-bg);color:var(--tag-color);border-radius:2px}.split-previewer__item-link:hover .split-previewer__item{padding-left:1rem}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:1;transform:translateY(0)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:1}.split-previewer__media{flex:1;min-width:0;position:relative}.split-previewer__media-inner{position:sticky;top:4rem;height:fit-content;display:flex;justify-content:center;align-items:center}.split-previewer__media .preview-img{display:block;width:100%;aspect-ratio:5/4;max-width:100%;height:auto;object-fit:contain;animation:fadeInMedia .5s ease-out;filter:contrast(1.1) grayscale(.2)}@media(max-width:1280px){.split-previewer{gap:3rem}}@media(max-width:1024px){.split-previewer{display:block;width:100%;min-width:0}.split-previewer--left,.split-previewer--right{flex-direction:unset}.split-previewer__media{display:none}.split-previewer__header{display:block}.split-previewer__header .title{margin-bottom:.75rem}.split-previewer__header .count{display:inline-block}.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:0;transform:translateY(10px)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:.8}.split-previewer__item-text{max-width:100%}.split-previewer__item-tags{display:none}}@media(hover:none)and (pointer:coarse){.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:0;transform:translateY(10px)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:.8}}@keyframes fadeInMedia{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}\n"]
+			template: "<div\n  class=\"split-previewer col-span-full md:col-span-12 md:col-start-1\"\n  [class]=\"'split-previewer--' + direction\"\n>\n  <div class=\"split-previewer__text-column\">\n    <div class=\"split-previewer__header\" scrollReveal from=\"left\" duration=\"1.2s\">\n      @if (title) {\n        <h1 class=\"title\">{{ title }}</h1>\n      }\n      @if (count) {\n        <span class=\"count\">{{ count }}</span>\n      }\n    </div>\n\n    <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n      @for (item of items; track item.title) {\n        <a\n          [href]=\"item.link?.url\"\n          [linkType]=\"item.link?.linkType\"\n          (mouseenter)=\"activeImage.set(item.image)\"\n          class=\"split-previewer__item-link\"\n          scrollReveal\n          from=\"left\"\n          duration=\"1.2s\"\n          [delay]=\"($index + 1) * 180\"\n        >\n          <div class=\"split-previewer__item\">\n            <h2 class=\"split-previewer__item-title\" [highlight]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ item.title }}</h2>\n            <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n            @if (item.tags?.length) {\n              <div class=\"split-previewer__item-tags\">\n                <div class=\"split-previewer__item-tags-inner\">\n                  @for (tag of item.tags; track tag) {\n                    <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </a>\n      }\n    </div>\n  </div>\n\n  <div class=\"split-previewer__media\">\n    <div class=\"split-previewer__media-inner\">\n      @if ((activeImage() || imageDefault)?.publicId) {\n        <ui-image \n          [publicId]=\"(activeImage() || imageDefault)!.publicId!\" \n          [eager]=\"true\"\n          class=\"preview-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"(activeImage() || imageDefault)?.url\"\n          [alt]=\"(activeImage() || imageDefault)?.alt\"\n          class=\"preview-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  </div>\n</div>\n",
+			styles: [".split-previewer{display:flex;gap:5rem;min-width:0;padding-bottom:5rem}.split-previewer--left{flex-direction:row-reverse}.split-previewer--right{flex-direction:row}.split-previewer__text-column{flex:1;display:flex;flex-direction:column;min-width:0}.split-previewer__header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;min-width:0}.split-previewer__header .title{margin:0 0 1rem;text-transform:uppercase;min-width:0}.split-previewer__header .count{font-family:var(--font-base);font-size:1rem;font-weight:500;flex-shrink:0}.split-previewer__items{display:flex;flex-direction:column;gap:2rem;min-width:0}.split-previewer__item-link{text-decoration:none;color:inherit;display:block;min-width:0}.split-previewer__item{transition:all .4s cubic-bezier(.25,.46,.45,.94);min-width:0}.split-previewer__item-title{margin-bottom:.5rem;display:inline-block;min-width:0;color:var(--text-primary-60);transition:color .3s ease}.split-previewer__item-text{line-height:1.6;max-width:min(1000px,100%);color:var(--text-primary-60);transition:color .3s ease;overflow-wrap:break-word;font-size:1.2rem}.split-previewer__item-tags{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;transition:grid-template-rows .45s ease,margin-top .45s ease,opacity .3s ease}.split-previewer__item-tags-inner{display:flex;flex-wrap:wrap;gap:1rem;min-height:0;overflow:hidden}.split-previewer__item-tag{font-size:1rem;font-weight:600;letter-spacing:.05em;padding:.3rem .8rem;background-color:var(--tag-bg);color:var(--tag-color);border:3px solid var(--tag-border)}.split-previewer__item-link:hover .split-previewer__item{padding-left:1rem}.split-previewer__item-link:hover .split-previewer__item-tags{grid-template-rows:1fr;margin-top:1rem;opacity:1}.split-previewer__item-link:hover .split-previewer__item-title,.split-previewer__item-link:hover .split-previewer__item-text{color:var(--text-primary)!important}.split-previewer__media{flex:1;min-width:0;position:relative}.split-previewer__media-inner{position:sticky;top:4rem;height:fit-content;display:flex;justify-content:center;align-items:center}.split-previewer__media .preview-img{display:block;width:100%;aspect-ratio:5/4;max-width:100%;height:auto;object-fit:contain;animation:fadeInMedia .5s ease-out;filter:contrast(1.1) grayscale(.2)}@media(max-width:1280px){.split-previewer{gap:3rem}}@media(max-width:1024px){.split-previewer{display:block;width:100%;min-width:0}.split-previewer--left,.split-previewer--right{flex-direction:unset}.split-previewer__media{display:none}.split-previewer__header{display:block}.split-previewer__header .title{margin-bottom:.75rem}.split-previewer__header .count{display:inline-block}.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-title,.split-previewer__item-link:hover .split-previewer__item-text{color:var(--text-primary-60)!important}.split-previewer__item-text{max-width:100%}.split-previewer__item-tags{display:none}}@media(hover:none)and (pointer:coarse){.split-previewer__item-link:hover .split-previewer__item{padding-left:0}.split-previewer__item-link:hover .split-previewer__item-tags{grid-template-rows:0fr;margin-top:0;opacity:0}.split-previewer__item-link:hover .split-previewer__item-title,.split-previewer__item-link:hover .split-previewer__item-text{color:var(--text-primary-60)!important}}@keyframes fadeInMedia{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}\n"]
 		}]
 	}],
 	ctorParameters: () => [{
@@ -126,7 +137,9 @@ i0.ɵɵngDeclareClassMetadata({
 		title: [{ type: Input }],
 		items: [{ type: Input }],
 		imageDefault: [{ type: Input }],
-		direction: [{ type: Input }]
+		direction: [{ type: Input }],
+		highlightColor: [{ type: Input }],
+		highlightThickness: [{ type: Input }]
 	}
 });
 export { SplitPreviewerComponent };

package/fesm2022/lluc_llull-ui-lib-content-split-previewer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-content-split-previewer.mjs","names":[],"sources":["../../../projects/ui-lib/content/split-previewer/split-previewer.component.ts","../../../projects/ui-lib/content/split-previewer/split-previewer.component.html"],"sourcesContent":["import { CommonModule, isPlatformBrowser } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Inject, Input, OnInit, PLATFORM_ID, signal } from '@angular/core';\nimport {\n    HighlightDirective,\n    LinkTypeDirective,\n    ScrollRevealDirective,\n} from '@lluc_llull/ui-lib/directives';\nimport { UiLibButtonI, UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-split-previewer',\n    imports: [CommonModule, LinkTypeDirective, HighlightDirective, ScrollRevealDirective, UiImageComponent],\n    templateUrl: './split-previewer.component.html',\n    styleUrl: './split-previewer.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class SplitPreviewerComponent implements OnInit {\n    @Input() title?: string;\n    @Input() items?: SplitPreviewerItemI[];\n    @Input() imageDefault?: UiLibImageI;\n    @Input() direction: 'left' | 'right' = 'right';\n\n    activeImage = signal<UiLibImageI | undefined>(undefined);\n\n    get count(): number {\n        return this.items?.length || 0;\n    }\n\n    constructor(@Inject(PLATFORM_ID) private readonly platformId: Object) {}\n\n    ngOnInit() {\n        if (!this.items) return;\n        if (!isPlatformBrowser(this.platformId)) return;\n        if ('requestIdleCallback' in window) {\n            (window as any).requestIdleCallback(() => {\n                this.items?.forEach((item) => {\n                    if (item.image?.url) {\n                        const img = new Image();\n                        img.src = item.image.url;\n                    }\n                });\n            });\n        }\n    }\n}\n\nexport interface SplitPreviewerItemI {\n    title?: string;\n    type?: string;\n    description?: string;\n    tags?: string[];\n    link?: UiLibButtonI;\n    image?: UiLibImageI;\n}\n","<div\n  class=\"split-previewer col-span-full md:col-span-12 md:col-start-1\"\n  [class]=\"'split-previewer--' + direction\"\n  scrollReveal\n>\n  <div class=\"split-previewer__text-column\">\n    <div class=\"split-previewer__header\">\n      @if (title) {\n        <h1 class=\"title\">{{ title }}</h1>\n      }\n      @if (count) {\n        <span class=\"count\">{{ count }}</span>\n      }\n    </div>\n\n    <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n      @for (item of items; track item.title) {\n        <a\n          [href]=\"item.link?.url\"\n          [linkType]=\"item.link?.linkType\"\n          (mouseenter)=\"activeImage.set(item.image)\"\n          class=\"split-previewer__item-link\"\n        >\n          <div class=\"split-previewer__item\">\n            <h2 class=\"split-previewer__item-title\" [highlight]=\"'#FFFFFF'\">{{ item.title }}</h2>\n            <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n            @if (item.tags?.length) {\n              <div class=\"split-previewer__item-tags\">\n                @for (tag of item.tags; track tag) {\n                  <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n                }\n              </div>\n            }\n          </div>\n        </a>\n      }\n    </div>\n  </div>\n\n  <div class=\"split-previewer__media\">\n    <div class=\"split-previewer__media-inner\">\n      @if ((activeImage() || imageDefault)?.publicId) {\n        <ui-image \n          [publicId]=\"(activeImage() || imageDefault)!.publicId!\" \n          [eager]=\"true\"\n          class=\"preview-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"(activeImage() || imageDefault)?.url\"\n          [alt]=\"(activeImage() || imageDefault)?.alt\"\n          class=\"preview-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  </div>\n</div>\n"],"mappings":";;;;;AAoBA,IAAa,0BAAb,MAAa,wBAAuB;CAYkB;CAXzC;CACA;CACA;CACA,YAA8B;CAEvC,cAAc,OAAgC,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAExD,IAAI,QAAK;EACL,OAAO,KAAK,OAAO,UAAU;CACjC;CAEA,YAAkD,YAAkB;EAAlB,KAAA,aAAA;CAAqB;CAEvE,WAAQ;EACJ,IAAI,CAAC,KAAK,OAAO;EACjB,IAAI,CAAC,kBAAkB,KAAK,UAAU,GAAG;EACzC,IAAI,yBAAyB,QACxB,OAAe,0BAAyB;GACrC,KAAK,OAAO,SAAS,SAAQ;IACzB,IAAI,KAAK,OAAO,KAAK;KACjB,MAAM,MAAM,IAAI,MAAK;KACrB,IAAI,MAAM,KAAK,MAAM;IACzB;GACJ,CAAC;EACL,CAAC;CAET;CA3BS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAuB,MAAA,CAAA,EAAA,OAYZ,YAAW,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAZtB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAuB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;GAAA,OAAA;GAAA,cAAA;GAAA,WAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UCpBpC;EA4DA,QAAA,CAAA,6+FAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDhDc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAkB,UAAA;IAAA,QAAA,CAAA,aAAA,oBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,YAAA,UAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQ7F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAuB,YAAA,CAAA;EAVnC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAqB,SACtB;IAAC;IAAc;IAAmB;IAAoB;IAAuB;GAAgB;GAAC,iBAGtF,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,6+FAAA;EAAA,CAAA;;;;;GAcY,MAAA;GAAO,MAAA,CAAA,WAAW;;;;E,UAX9B,MAAA,M;E,UACA,MAAA,M;E,iBACA,MAAA,M;E,cACA,MAAA,M"}
+{"version":3,"file":"lluc_llull-ui-lib-content-split-previewer.mjs","names":[],"sources":["../../../projects/ui-lib/content/split-previewer/split-previewer.component.ts","../../../projects/ui-lib/content/split-previewer/split-previewer.component.html"],"sourcesContent":["import { CommonModule, isPlatformBrowser } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Inject, Input, OnInit, PLATFORM_ID, signal } from '@angular/core';\nimport {\n    HighlightDirective,\n    LinkTypeDirective,\n    ScrollRevealDirective,\n} from '@lluc_llull/ui-lib/directives';\nimport { UiLibButtonI, UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-split-previewer',\n    imports: [CommonModule, LinkTypeDirective, HighlightDirective, ScrollRevealDirective, UiImageComponent],\n    templateUrl: './split-previewer.component.html',\n    styleUrl: './split-previewer.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class SplitPreviewerComponent implements OnInit {\n    @Input() title?: string;\n    @Input() items?: SplitPreviewerItemI[];\n    @Input() imageDefault?: UiLibImageI;\n    @Input() direction: 'left' | 'right' = 'right';\n    @Input() highlightColor = 'var(--content-highlight)';\n    @Input() highlightThickness = 30;\n\n    activeImage = signal<UiLibImageI | undefined>(undefined);\n\n    get count(): number {\n        return this.items?.length || 0;\n    }\n\n    constructor(@Inject(PLATFORM_ID) private readonly platformId: Object) {}\n\n    ngOnInit() {\n        if (!this.items) return;\n        if (!isPlatformBrowser(this.platformId)) return;\n        if ('requestIdleCallback' in window) {\n            (window as any).requestIdleCallback(() => {\n                this.items?.forEach((item) => {\n                    if (item.image?.url) {\n                        const img = new Image();\n                        img.src = item.image.url;\n                    }\n                });\n            });\n        }\n    }\n}\n\nexport interface SplitPreviewerItemI {\n    title?: string;\n    type?: string;\n    description?: string;\n    tags?: string[];\n    link?: UiLibButtonI;\n    image?: UiLibImageI;\n}\n","<div\n  class=\"split-previewer col-span-full md:col-span-12 md:col-start-1\"\n  [class]=\"'split-previewer--' + direction\"\n>\n  <div class=\"split-previewer__text-column\">\n    <div class=\"split-previewer__header\" scrollReveal from=\"left\" duration=\"1.2s\">\n      @if (title) {\n        <h1 class=\"title\">{{ title }}</h1>\n      }\n      @if (count) {\n        <span class=\"count\">{{ count }}</span>\n      }\n    </div>\n\n    <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n      @for (item of items; track item.title) {\n        <a\n          [href]=\"item.link?.url\"\n          [linkType]=\"item.link?.linkType\"\n          (mouseenter)=\"activeImage.set(item.image)\"\n          class=\"split-previewer__item-link\"\n          scrollReveal\n          from=\"left\"\n          duration=\"1.2s\"\n          [delay]=\"($index + 1) * 180\"\n        >\n          <div class=\"split-previewer__item\">\n            <h2 class=\"split-previewer__item-title\" [highlight]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ item.title }}</h2>\n            <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n            @if (item.tags?.length) {\n              <div class=\"split-previewer__item-tags\">\n                <div class=\"split-previewer__item-tags-inner\">\n                  @for (tag of item.tags; track tag) {\n                    <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </a>\n      }\n    </div>\n  </div>\n\n  <div class=\"split-previewer__media\">\n    <div class=\"split-previewer__media-inner\">\n      @if ((activeImage() || imageDefault)?.publicId) {\n        <ui-image \n          [publicId]=\"(activeImage() || imageDefault)!.publicId!\" \n          [eager]=\"true\"\n          class=\"preview-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"(activeImage() || imageDefault)?.url\"\n          [alt]=\"(activeImage() || imageDefault)?.alt\"\n          class=\"preview-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  </div>\n</div>\n"],"mappings":";;;;;AAoBA,IAAa,0BAAb,MAAa,wBAAuB;CAckB;CAbzC;CACA;CACA;CACA,YAA8B;CAC9B,iBAAiB;CACjB,qBAAqB;CAE9B,cAAc,OAAgC,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAExD,IAAI,QAAK;EACL,OAAO,KAAK,OAAO,UAAU;CACjC;CAEA,YAAkD,YAAkB;EAAlB,KAAA,aAAA;CAAqB;CAEvE,WAAQ;EACJ,IAAI,CAAC,KAAK,OAAO;EACjB,IAAI,CAAC,kBAAkB,KAAK,UAAU,GAAG;EACzC,IAAI,yBAAyB,QACxB,OAAe,0BAAyB;GACrC,KAAK,OAAO,SAAS,SAAQ;IACzB,IAAI,KAAK,OAAO,KAAK;KACjB,MAAM,MAAM,IAAI,MAAK;KACrB,IAAI,MAAM,KAAK,MAAM;IACzB;GACJ,CAAC;EACL,CAAC;CAET;CA7BS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAuB,MAAA,CAAA,EAAA,OAcZ,YAAW,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAdtB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAuB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;GAAA,OAAA;GAAA,cAAA;GAAA,WAAA;GAAA,gBAAA;GAAA,oBAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UCpBpC;EAiEA,QAAA,CAAA,g5GAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDrDc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAkB,UAAA;IAAA,QAAA,CAAA,aAAA,oBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQ7F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAuB,YAAA,CAAA;EAVnC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAqB,SACtB;IAAC;IAAc;IAAmB;IAAoB;IAAuB;GAAgB;GAAC,iBAGtF,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,g5GAAA;EAAA,CAAA;;;;;GAgBY,MAAA;GAAO,MAAA,CAAA,WAAW;;;;E,UAb9B,MAAA,M;E,UACA,MAAA,M;E,iBACA,MAAA,M;E,cACA,MAAA,M;E,mBACA,MAAA,M;E,uBACA,MAAA,M"}

package/fesm2022/lluc_llull-ui-lib-content-split-showcase.mjs

@@ -32,8 +32,8 @@ var SplitShowcaseComponent = class SplitShowcaseComponent {
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div\n  class=\"split-showcase main-grid col-span-full md:col-span-12 md:col-start-1\"\n  scrollReveal\n>\n    <div class=\"split-showcase__metas col-span-full md:col-span-5 md:col-start-1\">\n        <h2 class=\"split-showcase__metas--title\">{{ title }}</h2>\n        @if (buttons && buttons.length > 0) {\n            <div class=\"btn-group\">\n                @for (button of buttons; track $index) {\n                <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n                    <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n                    {{ button.label }}\n                </a>\n                }\n            </div>\n        }\n        <div class=\"split-showcase__metas--items\">\n            @for (meta of metas; track meta.label) {\n                <div class=\"split-showcase__metas--item\">\n                    <span class=\"split-showcase__metas--item-label\">{{ meta.label }}: </span>\n                    <span class=\"split-showcase__metas--item-value\">{{ meta.value }}</span> \n                </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"split-showcase__content col-span-full md:col-span-5 md:col-start-8\">\n        <h3 class=\"split-showcase__content--subtitle\">{{ subtitle }}</h3>\n        <p class=\"split-showcase__content--description\">{{ description }}</p>\n    </div>\n</div>",
-		styles: [".split-showcase__metas--title{font-size:3rem;font-weight:700}.split-showcase__metas--item:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:1rem}.split-showcase__metas--item:last-child:after{content:none}.split-showcase__metas .btn-group{margin-bottom:2rem}.split-showcase__metas .btn-group .btn-link{justify-content:start}.split-showcase__content--subtitle{font-size:2rem;padding-bottom:0}.split-showcase__content--subtitle:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:2rem}\n"],
+		template: "<div class=\"split-showcase main-grid col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"split-showcase__metas col-span-full md:col-span-5 md:col-start-1\">\n        <h2\n            class=\"split-showcase__metas--title\"\n            scrollReveal\n            from=\"left\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"0\"\n        >{{ title }}</h2>\n        @if (buttons && buttons.length > 0) {\n            <div class=\"btn-group\" scrollReveal from=\"left\" distance=\"48px\" duration=\"0.7s\" [delay]=\"200\">\n                @for (button of buttons; track $index) {\n                <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n                    <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n                    {{ button.label }}\n                </a>\n                }\n            </div>\n        }\n        <div class=\"split-showcase__metas--items\">\n            @for (meta of metas; track meta.label) {\n                <div\n                    class=\"split-showcase__metas--item\"\n                    scrollReveal\n                    from=\"left\"\n                    distance=\"48px\"\n                    duration=\"0.7s\"\n                    [delay]=\"200 + $index * 110\"\n                >\n                    <span class=\"split-showcase__metas--item-label\">{{ meta.label }}: </span>\n                    <span class=\"split-showcase__metas--item-value\">{{ meta.value }}</span> \n                </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"split-showcase__content col-span-full md:col-span-5 md:col-start-8\">\n        <h3\n            class=\"split-showcase__content--subtitle\"\n            scrollReveal\n            from=\"right\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"0\"\n        >{{ subtitle }}</h3>\n        <p\n            class=\"split-showcase__content--description\"\n            scrollReveal\n            from=\"right\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"200\"\n        >{{ description }}</p>\n    </div>\n</div>",
+		styles: [".split-showcase__metas--title{font-size:3rem;font-weight:700;font-family:var(--font-titles);background:var(--color-secondary);border:4px solid var(--border-primary);padding:1rem;width:fit-content}.split-showcase__metas--item:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:1rem}.split-showcase__metas--item:last-child:after{content:none}.split-showcase__metas .btn-group{margin-bottom:2rem}.split-showcase__metas .btn-group .btn-link{justify-content:start}.split-showcase__content--subtitle{font-size:2rem;padding-bottom:0}.split-showcase__content--subtitle:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:2rem}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -43,7 +43,14 @@ var SplitShowcaseComponent = class SplitShowcaseComponent {
 				kind: "directive",
 				type: ScrollRevealDirective,
 				selector: "[scrollReveal]",
-				inputs: ["distance", "duration"]
+				inputs: [
+					"distance",
+					"duration",
+					"from",
+					"delay",
+					"threshold",
+					"rootMargin"
+				]
 			},
 			{
 				kind: "directive",
@@ -83,8 +90,8 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div\n  class=\"split-showcase main-grid col-span-full md:col-span-12 md:col-start-1\"\n  scrollReveal\n>\n    <div class=\"split-showcase__metas col-span-full md:col-span-5 md:col-start-1\">\n        <h2 class=\"split-showcase__metas--title\">{{ title }}</h2>\n        @if (buttons && buttons.length > 0) {\n            <div class=\"btn-group\">\n                @for (button of buttons; track $index) {\n                <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n                    <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n                    {{ button.label }}\n                </a>\n                }\n            </div>\n        }\n        <div class=\"split-showcase__metas--items\">\n            @for (meta of metas; track meta.label) {\n                <div class=\"split-showcase__metas--item\">\n                    <span class=\"split-showcase__metas--item-label\">{{ meta.label }}: </span>\n                    <span class=\"split-showcase__metas--item-value\">{{ meta.value }}</span> \n                </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"split-showcase__content col-span-full md:col-span-5 md:col-start-8\">\n        <h3 class=\"split-showcase__content--subtitle\">{{ subtitle }}</h3>\n        <p class=\"split-showcase__content--description\">{{ description }}</p>\n    </div>\n</div>",
-			styles: [".split-showcase__metas--title{font-size:3rem;font-weight:700}.split-showcase__metas--item:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:1rem}.split-showcase__metas--item:last-child:after{content:none}.split-showcase__metas .btn-group{margin-bottom:2rem}.split-showcase__metas .btn-group .btn-link{justify-content:start}.split-showcase__content--subtitle{font-size:2rem;padding-bottom:0}.split-showcase__content--subtitle:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:2rem}\n"]
+			template: "<div class=\"split-showcase main-grid col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"split-showcase__metas col-span-full md:col-span-5 md:col-start-1\">\n        <h2\n            class=\"split-showcase__metas--title\"\n            scrollReveal\n            from=\"left\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"0\"\n        >{{ title }}</h2>\n        @if (buttons && buttons.length > 0) {\n            <div class=\"btn-group\" scrollReveal from=\"left\" distance=\"48px\" duration=\"0.7s\" [delay]=\"200\">\n                @for (button of buttons; track $index) {\n                <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n                    <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n                    {{ button.label }}\n                </a>\n                }\n            </div>\n        }\n        <div class=\"split-showcase__metas--items\">\n            @for (meta of metas; track meta.label) {\n                <div\n                    class=\"split-showcase__metas--item\"\n                    scrollReveal\n                    from=\"left\"\n                    distance=\"48px\"\n                    duration=\"0.7s\"\n                    [delay]=\"200 + $index * 110\"\n                >\n                    <span class=\"split-showcase__metas--item-label\">{{ meta.label }}: </span>\n                    <span class=\"split-showcase__metas--item-value\">{{ meta.value }}</span> \n                </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"split-showcase__content col-span-full md:col-span-5 md:col-start-8\">\n        <h3\n            class=\"split-showcase__content--subtitle\"\n            scrollReveal\n            from=\"right\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"0\"\n        >{{ subtitle }}</h3>\n        <p\n            class=\"split-showcase__content--description\"\n            scrollReveal\n            from=\"right\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"200\"\n        >{{ description }}</p>\n    </div>\n</div>",
+			styles: [".split-showcase__metas--title{font-size:3rem;font-weight:700;font-family:var(--font-titles);background:var(--color-secondary);border:4px solid var(--border-primary);padding:1rem;width:fit-content}.split-showcase__metas--item:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:1rem}.split-showcase__metas--item:last-child:after{content:none}.split-showcase__metas .btn-group{margin-bottom:2rem}.split-showcase__metas .btn-group .btn-link{justify-content:start}.split-showcase__content--subtitle{font-size:2rem;padding-bottom:0}.split-showcase__content--subtitle:after{content:\"\";display:block;height:1px;width:100%;background-color:var(--text-disabled);margin-block:2rem}\n"]
 		}]
 	}],
 	propDecorators: {

package/fesm2022/lluc_llull-ui-lib-content-split-showcase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-content-split-showcase.mjs","names":[],"sources":["../../../projects/ui-lib/content/split-showcase/split-showcase.component.ts","../../../projects/ui-lib/content/split-showcase/split-showcase.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { LinkTypeDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibButtonI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n  selector: 'lib-split-showcase',\n  imports: [CommonModule, ScrollRevealDirective, LinkTypeDirective, UiIconComponent],\n  templateUrl: './split-showcase.component.html',\n  styleUrl: './split-showcase.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n      style: 'display: contents',\n  },\n})\nexport class SplitShowcaseComponent {\n  @Input() title?: string;\n  @Input() subtitle?: string;\n  @Input() description?: string;\n  @Input() metas?: SplitShowcaseMetaItemI[];\n  @Input() buttons?: UiLibButtonI[];\n}\n\nexport interface SplitShowcaseMetaItemI {\n  label: string;\n  value: string;\n}","<div\n  class=\"split-showcase main-grid col-span-full md:col-span-12 md:col-start-1\"\n  scrollReveal\n>\n    <div class=\"split-showcase__metas col-span-full md:col-span-5 md:col-start-1\">\n        <h2 class=\"split-showcase__metas--title\">{{ title }}</h2>\n        @if (buttons && buttons.length > 0) {\n            <div class=\"btn-group\">\n                @for (button of buttons; track $index) {\n                <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n                    <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n                    {{ button.label }}\n                </a>\n                }\n            </div>\n        }\n        <div class=\"split-showcase__metas--items\">\n            @for (meta of metas; track meta.label) {\n                <div class=\"split-showcase__metas--item\">\n                    <span class=\"split-showcase__metas--item-label\">{{ meta.label }}: </span>\n                    <span class=\"split-showcase__metas--item-value\">{{ meta.value }}</span> \n                </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"split-showcase__content col-span-full md:col-span-5 md:col-start-8\">\n        <h3 class=\"split-showcase__content--subtitle\">{{ subtitle }}</h3>\n        <p class=\"split-showcase__content--description\">{{ description }}</p>\n    </div>\n</div>"],"mappings":";;;;;AAgBA,IAAa,yBAAb,MAAa,uBAAsB;CACxB;CACA;CACA;CACA;CACA;CALE,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAsB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAtB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAsB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;GAAA,UAAA;GAAA,aAAA;GAAA,OAAA;GAAA,SAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UChBnC;EA8BM,QAAA,CAAA,olBAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDtBM;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,YAAA,UAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQtE,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAsB,YAAA,CAAA;EAVlC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAoB,SACrB;IAAC;IAAc;IAAuB;IAAmB;GAAe;GAAC,iBAGjE,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,olBAAA;EAAA,CAAA;;;E,UAGA,MAAA,M;E,aACA,MAAA,M;E,gBACA,MAAA,M;E,UACA,MAAA,M;E,YACA,MAAA,M"}
+{"version":3,"file":"lluc_llull-ui-lib-content-split-showcase.mjs","names":[],"sources":["../../../projects/ui-lib/content/split-showcase/split-showcase.component.ts","../../../projects/ui-lib/content/split-showcase/split-showcase.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { LinkTypeDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibButtonI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n  selector: 'lib-split-showcase',\n  imports: [CommonModule, ScrollRevealDirective, LinkTypeDirective, UiIconComponent],\n  templateUrl: './split-showcase.component.html',\n  styleUrl: './split-showcase.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n      style: 'display: contents',\n  },\n})\nexport class SplitShowcaseComponent {\n  @Input() title?: string;\n  @Input() subtitle?: string;\n  @Input() description?: string;\n  @Input() metas?: SplitShowcaseMetaItemI[];\n  @Input() buttons?: UiLibButtonI[];\n}\n\nexport interface SplitShowcaseMetaItemI {\n  label: string;\n  value: string;\n}","<div class=\"split-showcase main-grid col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"split-showcase__metas col-span-full md:col-span-5 md:col-start-1\">\n        <h2\n            class=\"split-showcase__metas--title\"\n            scrollReveal\n            from=\"left\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"0\"\n        >{{ title }}</h2>\n        @if (buttons && buttons.length > 0) {\n            <div class=\"btn-group\" scrollReveal from=\"left\" distance=\"48px\" duration=\"0.7s\" [delay]=\"200\">\n                @for (button of buttons; track $index) {\n                <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n                    <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n                    {{ button.label }}\n                </a>\n                }\n            </div>\n        }\n        <div class=\"split-showcase__metas--items\">\n            @for (meta of metas; track meta.label) {\n                <div\n                    class=\"split-showcase__metas--item\"\n                    scrollReveal\n                    from=\"left\"\n                    distance=\"48px\"\n                    duration=\"0.7s\"\n                    [delay]=\"200 + $index * 110\"\n                >\n                    <span class=\"split-showcase__metas--item-label\">{{ meta.label }}: </span>\n                    <span class=\"split-showcase__metas--item-value\">{{ meta.value }}</span> \n                </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"split-showcase__content col-span-full md:col-span-5 md:col-start-8\">\n        <h3\n            class=\"split-showcase__content--subtitle\"\n            scrollReveal\n            from=\"right\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"0\"\n        >{{ subtitle }}</h3>\n        <p\n            class=\"split-showcase__content--description\"\n            scrollReveal\n            from=\"right\"\n            distance=\"48px\"\n            duration=\"0.7s\"\n            [delay]=\"200\"\n        >{{ description }}</p>\n    </div>\n</div>"],"mappings":";;;;;AAgBA,IAAa,yBAAb,MAAa,uBAAsB;CACxB;CACA;CACA;CACA;CACA;CALE,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAsB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAtB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAsB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;GAAA,UAAA;GAAA,aAAA;GAAA,OAAA;GAAA,SAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UChBnC;EAuDM,QAAA,CAAA,2tBAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MD/CM;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQtE,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAsB,YAAA,CAAA;EAVlC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAoB,SACrB;IAAC;IAAc;IAAuB;IAAmB;GAAe;GAAC,iBAGjE,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,2tBAAA;EAAA,CAAA;;;E,UAGA,MAAA,M;E,aACA,MAAA,M;E,gBACA,MAAA,M;E,UACA,MAAA,M;E,YACA,MAAA,M"}

package/fesm2022/lluc_llull-ui-lib-content-stacked-rows.mjs

@@ -1,6 +1,7 @@
 import { CommonModule } from "@angular/common";
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import { ScrollRevealDirective } from "@lluc_llull/ui-lib/directives";
 var StackedRowsComponent = class StackedRowsComponent {
 	title;
 	text;
@@ -26,11 +27,23 @@ var StackedRowsComponent = class StackedRowsComponent {
 		},
 		host: { styleAttribute: "display: contents" },
 		ngImport: i0,
-		template: "<div class=\"stacked-rows main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <!-- INTRO -->\n  <div class=\"stacked-rows__intro main-grid col-span-full\">\n    @if (title) {\n      <h1 class=\"subtitle col-span-full md:col-span-3 md:col-start-1\">\n        {{ title }}\n      </h1>\n    }\n\n    @if (text) {\n      <p class=\"text col-span-full md:col-span-9 md:col-start-4\">\n        {{ text }}\n      </p>\n    }\n  </div>\n\n  <!-- ITEMS -->\n  @if (items) {\n    <div class=\"stacked-rows__items col-span-full\">\n      @for (item of items; track $index) {\n        <div class=\"stacked-rows__items--item main-grid\">\n          <h2 class=\"stacked-rows__items--item_title col-span-full md:col-span-3 md:col-start-1\">\n            {{ item.title }}\n          </h2>\n\n          <p class=\"stacked-rows__items--item_text col-span-full md:col-span-7 md:col-start-6\">\n            {{ item.text }}\n          </p>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
-		styles: [".stacked-rows{background-color:var(--content-bg-dark);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);padding-block:10rem 1rem}.stacked-rows .subtitle,.stacked-rows .text{color:var(--text-secondary)}.stacked-rows__intro{border-bottom:1px solid var(--border-secondary);padding-block:0rem}.stacked-rows__intro .text{font-size:2.4rem;font-weight:600;margin-bottom:3rem}.stacked-rows__items--item{border-bottom:1px solid var(--border-secondary);padding-bottom:4.5rem}.stacked-rows__items--item:last-child{border-bottom:none}.stacked-rows__items--item_title{margin:0;font-size:2rem;color:var(--text-secondary);font-weight:100}.stacked-rows__items--item_text{margin:0;font-size:1.2rem;color:var(--text-secondary)}@media(max-width:1024px){.stacked-rows{padding-block:6rem 2rem}.stacked-rows__intro .text{font-size:1.6rem}.stacked-rows__items--item{padding-block:2rem}.stacked-rows__items--item_title{font-size:1.6rem}.stacked-rows__items--item_text{font-size:1.1rem;margin-top:0}}\n"],
+		template: "<div class=\"stacked-rows main-grid col-span-full md:col-span-12 md:col-start-1\">\n  <!-- INTRO -->\n  <div class=\"stacked-rows__intro main-grid col-span-full\" scrollReveal from=\"bottom\">\n    @if (title) {\n      <h1 class=\"subtitle col-span-full md:col-span-3 md:col-start-1\">\n        {{ title }}\n      </h1>\n    }\n\n    @if (text) {\n      <p class=\"text col-span-full md:col-span-9 md:col-start-4\">\n        {{ text }}\n      </p>\n    }\n  </div>\n\n  <!-- ITEMS -->\n  @if (items) {\n    <div class=\"stacked-rows__items col-span-full\">\n      @for (item of items; track $index) {\n        <div class=\"stacked-rows__items--item main-grid\" scrollReveal from=\"bottom\">\n          <h2 class=\"stacked-rows__items--item_title col-span-full md:col-span-3 md:col-start-1\">\n            {{ item.title }}\n          </h2>\n\n          <p class=\"stacked-rows__items--item_text col-span-full md:col-span-7 md:col-start-6\">\n            {{ item.text }}\n          </p>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
+		styles: [".stacked-rows{background-color:var(--content-bg-dark);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);padding-block:10rem 1rem}.stacked-rows .subtitle,.stacked-rows .text{color:var(--text-inverse)}.stacked-rows__intro{border-bottom:1px solid var(--border-secondary-20);padding-block:0rem}.stacked-rows__intro .subtitle{font-size:5rem}.stacked-rows__intro .text{font-size:2.4rem;font-weight:600;margin:4rem 0 3rem}.stacked-rows__items--item{border-bottom:1px solid var(--border-secondary-20);padding-bottom:4.5rem}.stacked-rows__items--item:last-child{border-bottom:none}.stacked-rows__items--item_title{margin:0;font-size:2rem;color:var(--text-inverse);font-weight:100}.stacked-rows__items--item_text{margin:0;font-size:1.2rem;color:var(--text-inverse)}@media(max-width:1024px){.stacked-rows{padding-block:6rem 2rem}.stacked-rows__intro .text{font-size:1.6rem}.stacked-rows__items--item{padding-block:2rem}.stacked-rows__items--item_title{font-size:1.6rem}.stacked-rows__items--item_text{font-size:1.1rem;margin-top:0}}\n"],
 		dependencies: [{
 			kind: "ngmodule",
 			type: CommonModule
+		}, {
+			kind: "directive",
+			type: ScrollRevealDirective,
+			selector: "[scrollReveal]",
+			inputs: [
+				"distance",
+				"duration",
+				"from",
+				"delay",
+				"threshold",
+				"rootMargin"
+			]
 		}],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
@@ -44,11 +57,11 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "lib-stacked-rows",
-			imports: [CommonModule],
+			imports: [CommonModule, ScrollRevealDirective],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { style: "display: contents" },
-			template: "<div class=\"stacked-rows main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <!-- INTRO -->\n  <div class=\"stacked-rows__intro main-grid col-span-full\">\n    @if (title) {\n      <h1 class=\"subtitle col-span-full md:col-span-3 md:col-start-1\">\n        {{ title }}\n      </h1>\n    }\n\n    @if (text) {\n      <p class=\"text col-span-full md:col-span-9 md:col-start-4\">\n        {{ text }}\n      </p>\n    }\n  </div>\n\n  <!-- ITEMS -->\n  @if (items) {\n    <div class=\"stacked-rows__items col-span-full\">\n      @for (item of items; track $index) {\n        <div class=\"stacked-rows__items--item main-grid\">\n          <h2 class=\"stacked-rows__items--item_title col-span-full md:col-span-3 md:col-start-1\">\n            {{ item.title }}\n          </h2>\n\n          <p class=\"stacked-rows__items--item_text col-span-full md:col-span-7 md:col-start-6\">\n            {{ item.text }}\n          </p>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
-			styles: [".stacked-rows{background-color:var(--content-bg-dark);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);padding-block:10rem 1rem}.stacked-rows .subtitle,.stacked-rows .text{color:var(--text-secondary)}.stacked-rows__intro{border-bottom:1px solid var(--border-secondary);padding-block:0rem}.stacked-rows__intro .text{font-size:2.4rem;font-weight:600;margin-bottom:3rem}.stacked-rows__items--item{border-bottom:1px solid var(--border-secondary);padding-bottom:4.5rem}.stacked-rows__items--item:last-child{border-bottom:none}.stacked-rows__items--item_title{margin:0;font-size:2rem;color:var(--text-secondary);font-weight:100}.stacked-rows__items--item_text{margin:0;font-size:1.2rem;color:var(--text-secondary)}@media(max-width:1024px){.stacked-rows{padding-block:6rem 2rem}.stacked-rows__intro .text{font-size:1.6rem}.stacked-rows__items--item{padding-block:2rem}.stacked-rows__items--item_title{font-size:1.6rem}.stacked-rows__items--item_text{font-size:1.1rem;margin-top:0}}\n"]
+			template: "<div class=\"stacked-rows main-grid col-span-full md:col-span-12 md:col-start-1\">\n  <!-- INTRO -->\n  <div class=\"stacked-rows__intro main-grid col-span-full\" scrollReveal from=\"bottom\">\n    @if (title) {\n      <h1 class=\"subtitle col-span-full md:col-span-3 md:col-start-1\">\n        {{ title }}\n      </h1>\n    }\n\n    @if (text) {\n      <p class=\"text col-span-full md:col-span-9 md:col-start-4\">\n        {{ text }}\n      </p>\n    }\n  </div>\n\n  <!-- ITEMS -->\n  @if (items) {\n    <div class=\"stacked-rows__items col-span-full\">\n      @for (item of items; track $index) {\n        <div class=\"stacked-rows__items--item main-grid\" scrollReveal from=\"bottom\">\n          <h2 class=\"stacked-rows__items--item_title col-span-full md:col-span-3 md:col-start-1\">\n            {{ item.title }}\n          </h2>\n\n          <p class=\"stacked-rows__items--item_text col-span-full md:col-span-7 md:col-start-6\">\n            {{ item.text }}\n          </p>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
+			styles: [".stacked-rows{background-color:var(--content-bg-dark);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);padding-block:10rem 1rem}.stacked-rows .subtitle,.stacked-rows .text{color:var(--text-inverse)}.stacked-rows__intro{border-bottom:1px solid var(--border-secondary-20);padding-block:0rem}.stacked-rows__intro .subtitle{font-size:5rem}.stacked-rows__intro .text{font-size:2.4rem;font-weight:600;margin:4rem 0 3rem}.stacked-rows__items--item{border-bottom:1px solid var(--border-secondary-20);padding-bottom:4.5rem}.stacked-rows__items--item:last-child{border-bottom:none}.stacked-rows__items--item_title{margin:0;font-size:2rem;color:var(--text-inverse);font-weight:100}.stacked-rows__items--item_text{margin:0;font-size:1.2rem;color:var(--text-inverse)}@media(max-width:1024px){.stacked-rows{padding-block:6rem 2rem}.stacked-rows__intro .text{font-size:1.6rem}.stacked-rows__items--item{padding-block:2rem}.stacked-rows__items--item_title{font-size:1.6rem}.stacked-rows__items--item_text{font-size:1.1rem;margin-top:0}}\n"]
 		}]
 	}],
 	propDecorators: {

package/fesm2022/lluc_llull-ui-lib-content-stacked-rows.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-content-stacked-rows.mjs","names":[],"sources":["../../../projects/ui-lib/content/stacked-rows/stacked-rows.component.ts","../../../projects/ui-lib/content/stacked-rows/stacked-rows.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n    selector: 'lib-stacked-rows',\n    imports: [CommonModule],\n    templateUrl: './stacked-rows.component.html',\n    styleUrl: './stacked-rows.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class StackedRowsComponent {\n    @Input() title?: string;\n    @Input() text?: string;\n    @Input() items?: StackedRowItemI[];\n}\n\nexport interface StackedRowItemI {\n    title: string;\n    text: string;\n}\n","<div class=\"stacked-rows main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <!-- INTRO -->\n  <div class=\"stacked-rows__intro main-grid col-span-full\">\n    @if (title) {\n      <h1 class=\"subtitle col-span-full md:col-span-3 md:col-start-1\">\n        {{ title }}\n      </h1>\n    }\n\n    @if (text) {\n      <p class=\"text col-span-full md:col-span-9 md:col-start-4\">\n        {{ text }}\n      </p>\n    }\n  </div>\n\n  <!-- ITEMS -->\n  @if (items) {\n    <div class=\"stacked-rows__items col-span-full\">\n      @for (item of items; track $index) {\n        <div class=\"stacked-rows__items--item main-grid\">\n          <h2 class=\"stacked-rows__items--item_title col-span-full md:col-span-3 md:col-start-1\">\n            {{ item.title }}\n          </h2>\n\n          <p class=\"stacked-rows__items--item_text col-span-full md:col-span-7 md:col-start-6\">\n            {{ item.text }}\n          </p>\n        </div>\n      }\n    </div>\n  }\n</div>\n"],"mappings":";;;AAaA,IAAa,uBAAb,MAAa,qBAAoB;CACpB;CACA;CACA;CAHA,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;GAAA,MAAA;GAAA,OAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UCbjC;EAiCA,QAAA,CAAA,2hCAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MD5Bc;EAAY,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQb,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EAVhC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAkB,SACnB,CAAC,YAAY;GAAC,iBAGN,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,2hCAAA;EAAA,CAAA;;;E,UAGA,MAAA,M;E,SACA,MAAA,M;E,UACA,MAAA,M"}
+{"version":3,"file":"lluc_llull-ui-lib-content-stacked-rows.mjs","names":[],"sources":["../../../projects/ui-lib/content/stacked-rows/stacked-rows.component.ts","../../../projects/ui-lib/content/stacked-rows/stacked-rows.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\n\n@Component({\n    selector: 'lib-stacked-rows',\n    imports: [CommonModule, ScrollRevealDirective],\n    templateUrl: './stacked-rows.component.html',\n    styleUrl: './stacked-rows.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class StackedRowsComponent {\n    @Input() title?: string;\n    @Input() text?: string;\n    @Input() items?: StackedRowItemI[];\n}\n\nexport interface StackedRowItemI {\n    title: string;\n    text: string;\n}\n","<div class=\"stacked-rows main-grid col-span-full md:col-span-12 md:col-start-1\">\n  <!-- INTRO -->\n  <div class=\"stacked-rows__intro main-grid col-span-full\" scrollReveal from=\"bottom\">\n    @if (title) {\n      <h1 class=\"subtitle col-span-full md:col-span-3 md:col-start-1\">\n        {{ title }}\n      </h1>\n    }\n\n    @if (text) {\n      <p class=\"text col-span-full md:col-span-9 md:col-start-4\">\n        {{ text }}\n      </p>\n    }\n  </div>\n\n  <!-- ITEMS -->\n  @if (items) {\n    <div class=\"stacked-rows__items col-span-full\">\n      @for (item of items; track $index) {\n        <div class=\"stacked-rows__items--item main-grid\" scrollReveal from=\"bottom\">\n          <h2 class=\"stacked-rows__items--item_title col-span-full md:col-span-3 md:col-start-1\">\n            {{ item.title }}\n          </h2>\n\n          <p class=\"stacked-rows__items--item_text col-span-full md:col-span-7 md:col-start-6\">\n            {{ item.text }}\n          </p>\n        </div>\n      }\n    </div>\n  }\n</div>\n"],"mappings":";;;;AAcA,IAAa,uBAAb,MAAa,qBAAoB;CACpB;CACA;CACA;CAHA,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;GAAA,MAAA;GAAA,OAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UCdjC;EAiCA,QAAA,CAAA,ykCAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MD3Bc;EAAY,GAAA;GAAA,MAAA;GAAA,MAAE;GAAqB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQpC,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EAVhC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAkB,SACnB,CAAC,cAAc,qBAAqB;GAAC,iBAG7B,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,ykCAAA;EAAA,CAAA;;;E,UAGA,MAAA,M;E,SACA,MAAA,M;E,UACA,MAAA,M"}