@lluc_llull/ui-lib 0.33.10 → 0.34.0

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

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-content-hero-section.mjs","sources":["../../../projects/ui-lib/content/hero-section/hero-section.component.ts","../../../projects/ui-lib/content/hero-section/hero-section.component.html","../../../projects/ui-lib/content/hero-section/hero-section.stories.ts","../../../projects/ui-lib/content/hero-section/lluc_llull-ui-lib-content-hero-section.ts"],"sourcesContent":["import { CommonModule, DOCUMENT } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    Inject,\n    Input,\n    OnDestroy,\n    OnInit,\n} from '@angular/core';\nimport { LinkTypeDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibButtonI, UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiIconComponent, UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-hero-section',\n    standalone: true,\n    imports: [CommonModule, LinkTypeDirective, UiIconComponent, UiImageComponent, ScrollRevealDirective],\n    templateUrl: './hero-section.component.html',\n    styleUrl: './hero-section.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class HeroSectionComponent implements OnInit, OnDestroy {\n    @Input() variant: 'text' | 'image' = 'text';\n    @Input() pretitle?: string;\n    @Input() title?: string;\n    @Input() subtitle?: string;\n    @Input() text?: string;\n    @Input() buttons?: UiLibButtonI[];\n    @Input() highlight?: string;\n    @Input() image?: UiLibImageI;\n\n    constructor(@Inject(DOCUMENT) private document: Document) {}\n\n    ngOnInit(): void {\n        if (this.variant === 'image') {\n            this.document.body.classList.add('has-hero-image');\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.document.body.classList.remove('has-hero-image');\n    }\n}\n","<div\n  class=\"hero-section col-span-full\"\n  [class.hero-section--text]=\"variant === 'text'\"\n  [class.hero-section--image]=\"variant === 'image'\"\n  scrollReveal\n>\n  @if (variant === 'image' && image) {\n    <div class=\"hero-section__bg\">\n      @if (image.publicId) {\n        <ui-image \n          [publicId]=\"image.publicId\" \n          [eager]=\"true\"\n          class=\"hero-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"image.url\"\n          [alt]=\"image.alt\"\n          class=\"hero-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  }\n\n  <div class=\"hero-section__content col-span-full\">\n    @if (pretitle) {\n      <h2 class=\"pretitle\">{{ pretitle }}</h2>\n    }\n    @if (title) {\n      <h1 class=\"title\">\n        @if (highlight && title.includes(highlight)) {\n          {{ title.replace(highlight, '') }}\n          <span class=\"highlight-text\">\n            {{ highlight }}\n            <div class=\"wave-wrapper\">\n              <div class=\"wave\"></div>\n            </div>\n          </span>\n        } @else {\n          {{ title }}\n        }\n      </h1>\n    }\n    @if (subtitle) {\n      <h2 class=\"subtitle\">{{ subtitle }}</h2>\n    }\n    @if (text) {\n      <p class=\"text\">{{ text }}</p>\n    }\n    @if (buttons && buttons.length > 0) {\n      <div class=\"btn-group--center\">\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>\n</div>\n","import { LinkType } from '@lluc_llull/ui-lib/enums';\nimport { Meta, StoryObj } from '@storybook/angular';\nimport { HeroSectionComponent } from './hero-section.component';\n\nexport default {\n    title: 'Content/HeroSection',\n    component: HeroSectionComponent,\n    tags: ['autodocs'],\n    argTypes: {\n        variant: { control: 'radio', options: ['text', 'image'] },\n        pretitle: { control: 'text' },\n        title: { control: 'text' },\n        subtitle: { control: 'text' },\n        text: { control: 'text' },\n        highlight: { control: 'text' },\n        image: { control: 'object' },\n        buttons: { control: 'object' },\n    },\n} as Meta<HeroSectionComponent>;\n\ntype Story = StoryObj<HeroSectionComponent>;\n\nexport const Default: Story = {\n    args: {\n        variant: 'text',\n        pretitle: 'Bienvenido a',\n        title: 'Nuestra Plataforma',\n        subtitle: 'Descubre el futuro del desarrollo web',\n        text: 'Texto descriptivo de ejemplo para el Hero Section.',\n        highlight: 'Innovación',\n        buttons: [\n            { label: 'Comenzar', url: 'https://www.google.com', linkType: LinkType.External },\n            {\n                label: 'Más información',\n                url: 'https://www.google.com',\n                linkType: LinkType.External,\n            },\n        ],\n    },\n};\n\nexport const ImageVariant: Story = {\n    args: {\n        variant: 'image',\n        title: 'Proyecto Destacado',\n        subtitle: 'Un ejemplo impresionante',\n        text: 'Explora este increíble proyecto con diseño moderno y funcionalidades avanzadas.',\n        image: {\n            url: 'https://picsum.photos/seed/hero/1920/1080.jpg',\n            alt: 'Hero background image',\n        },\n        buttons: [\n            { label: 'Ver proyecto', url: 'https://www.google.com', linkType: LinkType.External },\n        ],\n    },\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"lluc_llull-ui-lib-content-hero-section.mjs","names":[],"sources":["../../../projects/ui-lib/content/hero-section/hero-section.component.ts","../../../projects/ui-lib/content/hero-section/hero-section.component.html"],"sourcesContent":["import { CommonModule, DOCUMENT } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    Inject,\n    Input,\n    OnDestroy,\n    OnInit,\n} from '@angular/core';\nimport { LinkTypeDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibButtonI, UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiIconComponent, UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-hero-section',\n    standalone: true,\n    imports: [CommonModule, LinkTypeDirective, UiIconComponent, UiImageComponent, ScrollRevealDirective],\n    templateUrl: './hero-section.component.html',\n    styleUrl: './hero-section.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class HeroSectionComponent implements OnInit, OnDestroy {\n    @Input() variant: 'text' | 'image' = 'text';\n    @Input() pretitle?: string;\n    @Input() title?: string;\n    @Input() subtitle?: string;\n    @Input() text?: string;\n    @Input() buttons?: UiLibButtonI[];\n    @Input() highlight?: string;\n    @Input() image?: UiLibImageI;\n\n    constructor(@Inject(DOCUMENT) private document: Document) {}\n\n    ngOnInit(): void {\n        if (this.variant === 'image') {\n            this.document.body.classList.add('has-hero-image');\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.document.body.classList.remove('has-hero-image');\n    }\n}\n","<div\n  class=\"hero-section col-span-full\"\n  [class.hero-section--text]=\"variant === 'text'\"\n  [class.hero-section--image]=\"variant === 'image'\"\n  scrollReveal\n>\n  @if (variant === 'image' && image) {\n    <div class=\"hero-section__bg\">\n      @if (image.publicId) {\n        <ui-image \n          [publicId]=\"image.publicId\" \n          [eager]=\"true\"\n          class=\"hero-img\"\n        ></ui-image>\n      } @else {\n        <img\n          [src]=\"image.url\"\n          [alt]=\"image.alt\"\n          class=\"hero-img\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n        />\n      }\n    </div>\n  }\n\n  <div class=\"hero-section__content col-span-full\">\n    @if (pretitle) {\n      <h2 class=\"pretitle\">{{ pretitle }}</h2>\n    }\n    @if (title) {\n      <h1 class=\"title\">\n        @if (highlight && title.includes(highlight)) {\n          {{ title.replace(highlight, '') }}\n          <span class=\"highlight-text\">\n            {{ highlight }}\n            <div class=\"wave-wrapper\">\n              <div class=\"wave\"></div>\n            </div>\n          </span>\n        } @else {\n          {{ title }}\n        }\n      </h1>\n    }\n    @if (subtitle) {\n      <h2 class=\"subtitle\">{{ subtitle }}</h2>\n    }\n    @if (text) {\n      <p class=\"text\">{{ text }}</p>\n    }\n    @if (buttons && buttons.length > 0) {\n      <div class=\"btn-group--center\">\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>\n</div>\n"],"mappings":";;;;;AAwBA,IAAa,uBAAb,MAAa,qBAAoB;CAUS;CAT7B,UAA4B;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CAET,YAAsC,UAAkB;EAAlB,KAAA,WAAA;CAAqB;CAE3D,WAAQ;EACJ,IAAI,KAAK,YAAY,SACjB,KAAK,SAAS,KAAK,UAAU,IAAI,gBAAgB;CAEzD;CAEA,cAAW;EACP,KAAK,SAAS,KAAK,UAAU,OAAO,gBAAgB;CACxD;CApBS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA,EAAA,OAUT,SAAQ,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAVnB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;GAAA,UAAA;GAAA,OAAA;GAAA,UAAA;GAAA,MAAA;GAAA,SAAA;GAAA,WAAA;GAAA,OAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UCxBjC;EAgEA,QAAA,CAAA,2qGAAA;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;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;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;;AAQ1F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EAXhC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAkB,YAChB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAiB;IAAkB;GAAqB;GAAC,iBAGnF,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,2qGAAA;EAAA,CAAA;;;;;GAYY,MAAA;GAAO,MAAA,CAAA,QAAQ;;;;E,YAT3B,MAAA,M;E,aACA,MAAA,M;E,UACA,MAAA,M;E,aACA,MAAA,M;E,SACA,MAAA,M;E,YACA,MAAA,M;E,cACA,MAAA,M;E,UACA,MAAA,M"}

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

@@ -1,35 +1,92 @@
-import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';
-import { UiImageComponent } from '@lluc_llull/ui-lib/shared';
-
-class MediaIntroComponent {
-    highlightedText;
-    secondaryText;
-    direction = 'right';
-    media;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MediaIntroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MediaIntroComponent, isStandalone: true, selector: "lib-media-intro", inputs: { highlightedText: "highlightedText", secondaryText: "secondaryText", direction: "direction", media: "media" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: "<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n    <div class=\"media-intro__content main-grid col-span-full md:col-span-12 md:col-start-1\">\n        @if(highlightedText) {\n            <div class=\"media-intro__content--left main-grid col-span-full\">\n                <h2 class=\"media-intro__content--main-text col-span-full md:col-span-6\" \n                    [class.md:col-start-1]=\"direction === 'left'\"\n                    [class.md:col-start-7]=\"direction === 'right'\"\n                    [innerHTML]=\"highlightedText\">\n                </h2>\n            </div>\n        }\n        @if(secondaryText) {\n            <div class=\"media-intro__content--right main-grid col-span-full\">\n                <p class=\"media-intro__content--secondary-text col-span-full md:col-span-6\"\n                   [class.md:col-start-7]=\"direction === 'left'\"\n                   [class.md:col-start-1]=\"direction === 'right'\"\n                   [innerHTML]=\"secondaryText\"\n                ></p>\n            </div>\n        }\n    </div>\n    @if(media) {\n        <div class=\"media-intro__media col-span-full md:col-span-12 md:col-start-1\">\n            @if (media.publicId) {\n                <ui-image [publicId]=\"media.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n            } @else {\n                <img [src]=\"media.url\" [alt]=\"media.alt\" class=\"media-intro-img\" loading=\"eager\" />\n            }\n        </div>\n    }\n</div>\n", styles: [".media-intro__content--left,.media-intro__content--right{padding-block:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: ScrollRevealDirective, selector: "[scrollReveal]", inputs: ["distance", "duration"] }, { kind: "component", type: UiImageComponent, selector: "ui-image", inputs: ["publicId", "cloudName", "transformations", "eager", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MediaIntroComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-media-intro', imports: [CommonModule, ScrollRevealDirective, UiImageComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        style: 'display: contents',
-                    }, template: "<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n    <div class=\"media-intro__content main-grid col-span-full md:col-span-12 md:col-start-1\">\n        @if(highlightedText) {\n            <div class=\"media-intro__content--left main-grid col-span-full\">\n                <h2 class=\"media-intro__content--main-text col-span-full md:col-span-6\" \n                    [class.md:col-start-1]=\"direction === 'left'\"\n                    [class.md:col-start-7]=\"direction === 'right'\"\n                    [innerHTML]=\"highlightedText\">\n                </h2>\n            </div>\n        }\n        @if(secondaryText) {\n            <div class=\"media-intro__content--right main-grid col-span-full\">\n                <p class=\"media-intro__content--secondary-text col-span-full md:col-span-6\"\n                   [class.md:col-start-7]=\"direction === 'left'\"\n                   [class.md:col-start-1]=\"direction === 'right'\"\n                   [innerHTML]=\"secondaryText\"\n                ></p>\n            </div>\n        }\n    </div>\n    @if(media) {\n        <div class=\"media-intro__media col-span-full md:col-span-12 md:col-start-1\">\n            @if (media.publicId) {\n                <ui-image [publicId]=\"media.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n            } @else {\n                <img [src]=\"media.url\" [alt]=\"media.alt\" class=\"media-intro-img\" loading=\"eager\" />\n            }\n        </div>\n    }\n</div>\n", styles: [".media-intro__content--left,.media-intro__content--right{padding-block:0!important}\n"] }]
-        }], propDecorators: { highlightedText: [{
-                type: Input
-            }], secondaryText: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], media: [{
-                type: Input
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ScrollRevealDirective } from "@lluc_llull/ui-lib/directives";
+import { UiImageComponent } from "@lluc_llull/ui-lib/shared";
+var MediaIntroComponent = class MediaIntroComponent {
+	highlightedText;
+	secondaryText;
+	direction = "right";
+	media;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: MediaIntroComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: MediaIntroComponent,
+		isStandalone: true,
+		selector: "lib-media-intro",
+		inputs: {
+			highlightedText: "highlightedText",
+			secondaryText: "secondaryText",
+			direction: "direction",
+			media: "media"
+		},
+		host: { styleAttribute: "display: contents" },
+		ngImport: i0,
+		template: "<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n    <div class=\"media-intro__content main-grid col-span-full md:col-span-12 md:col-start-1\">\n        @if(highlightedText) {\n            <div class=\"media-intro__content--left main-grid col-span-full\">\n                <h2 class=\"media-intro__content--main-text col-span-full md:col-span-6\" \n                    [class.md:col-start-1]=\"direction === 'left'\"\n                    [class.md:col-start-7]=\"direction === 'right'\"\n                    [innerHTML]=\"highlightedText\">\n                </h2>\n            </div>\n        }\n        @if(secondaryText) {\n            <div class=\"media-intro__content--right main-grid col-span-full\">\n                <p class=\"media-intro__content--secondary-text col-span-full md:col-span-6\"\n                   [class.md:col-start-7]=\"direction === 'left'\"\n                   [class.md:col-start-1]=\"direction === 'right'\"\n                   [innerHTML]=\"secondaryText\"\n                ></p>\n            </div>\n        }\n    </div>\n    @if(media) {\n        <div class=\"media-intro__media col-span-full md:col-span-12 md:col-start-1\">\n            @if (media.publicId) {\n                <ui-image [publicId]=\"media.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n            } @else {\n                <img [src]=\"media.url\" [alt]=\"media.alt\" class=\"media-intro-img\" loading=\"eager\" />\n            }\n        </div>\n    }\n</div>\n",
+		styles: [".media-intro__content--left,.media-intro__content--right{padding-block:0!important}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: ScrollRevealDirective,
+				selector: "[scrollReveal]",
+				inputs: ["distance", "duration"]
+			},
+			{
+				kind: "component",
+				type: UiImageComponent,
+				selector: "ui-image",
+				inputs: [
+					"publicId",
+					"cloudName",
+					"transformations",
+					"eager",
+					"width",
+					"height"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: MediaIntroComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-media-intro",
+			imports: [
+				CommonModule,
+				ScrollRevealDirective,
+				UiImageComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { style: "display: contents" },
+			template: "<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n    <div class=\"media-intro__content main-grid col-span-full md:col-span-12 md:col-start-1\">\n        @if(highlightedText) {\n            <div class=\"media-intro__content--left main-grid col-span-full\">\n                <h2 class=\"media-intro__content--main-text col-span-full md:col-span-6\" \n                    [class.md:col-start-1]=\"direction === 'left'\"\n                    [class.md:col-start-7]=\"direction === 'right'\"\n                    [innerHTML]=\"highlightedText\">\n                </h2>\n            </div>\n        }\n        @if(secondaryText) {\n            <div class=\"media-intro__content--right main-grid col-span-full\">\n                <p class=\"media-intro__content--secondary-text col-span-full md:col-span-6\"\n                   [class.md:col-start-7]=\"direction === 'left'\"\n                   [class.md:col-start-1]=\"direction === 'right'\"\n                   [innerHTML]=\"secondaryText\"\n                ></p>\n            </div>\n        }\n    </div>\n    @if(media) {\n        <div class=\"media-intro__media col-span-full md:col-span-12 md:col-start-1\">\n            @if (media.publicId) {\n                <ui-image [publicId]=\"media.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n            } @else {\n                <img [src]=\"media.url\" [alt]=\"media.alt\" class=\"media-intro-img\" loading=\"eager\" />\n            }\n        </div>\n    }\n</div>\n",
+			styles: [".media-intro__content--left,.media-intro__content--right{padding-block:0!important}\n"]
+		}]
+	}],
+	propDecorators: {
+		highlightedText: [{ type: Input }],
+		secondaryText: [{ type: Input }],
+		direction: [{ type: Input }],
+		media: [{ type: Input }]
+	}
+});
 export { MediaIntroComponent };
-//# sourceMappingURL=lluc_llull-ui-lib-content-media-intro.mjs.map
+
+//# sourceMappingURL=lluc_llull-ui-lib-content-media-intro.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-content-media-intro.mjs","sources":["../../../projects/ui-lib/content/media-intro/media-intro.component.ts","../../../projects/ui-lib/content/media-intro/media-intro.component.html","../../../projects/ui-lib/content/media-intro/lluc_llull-ui-lib-content-media-intro.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({  \n  selector: 'lib-media-intro',\n  imports: [CommonModule, ScrollRevealDirective, UiImageComponent],\n  templateUrl: './media-intro.component.html',\n  styleUrl: './media-intro.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n      style: 'display: contents',\n  },\n})\nexport class MediaIntroComponent {\n  @Input() highlightedText?: string;\n  @Input() secondaryText?: string;\n  @Input() direction: 'left' | 'right' = 'right';\n  @Input() media?: UiLibImageI;\n}\n","<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n    <div class=\"media-intro__content main-grid col-span-full md:col-span-12 md:col-start-1\">\n        @if(highlightedText) {\n            <div class=\"media-intro__content--left main-grid col-span-full\">\n                <h2 class=\"media-intro__content--main-text col-span-full md:col-span-6\" \n                    [class.md:col-start-1]=\"direction === 'left'\"\n                    [class.md:col-start-7]=\"direction === 'right'\"\n                    [innerHTML]=\"highlightedText\">\n                </h2>\n            </div>\n        }\n        @if(secondaryText) {\n            <div class=\"media-intro__content--right main-grid col-span-full\">\n                <p class=\"media-intro__content--secondary-text col-span-full md:col-span-6\"\n                   [class.md:col-start-7]=\"direction === 'left'\"\n                   [class.md:col-start-1]=\"direction === 'right'\"\n                   [innerHTML]=\"secondaryText\"\n                ></p>\n            </div>\n        }\n    </div>\n    @if(media) {\n        <div class=\"media-intro__media col-span-full md:col-span-12 md:col-start-1\">\n            @if (media.publicId) {\n                <ui-image [publicId]=\"media.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n            } @else {\n                <img [src]=\"media.url\" [alt]=\"media.alt\" class=\"media-intro-img\" loading=\"eager\" />\n            }\n        </div>\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAgBa,mBAAmB,CAAA;AACrB,IAAA,eAAe;AACf,IAAA,aAAa;IACb,SAAS,GAAqB,OAAO;AACrC,IAAA,KAAK;wGAJH,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,kPChBhC,ggDA+BA,EAAA,MAAA,EAAA,CAAA,uFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDvBY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,qBAAqB,6FAAE,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,OAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAQpD,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAV/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,OAAA,EAClB,CAAC,YAAY,EAAE,qBAAqB,EAAE,gBAAgB,CAAC,EAAA,eAAA,EAG/C,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACF,wBAAA,KAAK,EAAE,mBAAmB;AAC7B,qBAAA,EAAA,QAAA,EAAA,ggDAAA,EAAA,MAAA,EAAA,CAAA,uFAAA,CAAA,EAAA;8BAGQ,eAAe,EAAA,CAAA;sBAAvB;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBACQ,KAAK,EAAA,CAAA;sBAAb;;;AEpBH;;AAEG;;;;"}
+{"version":3,"file":"lluc_llull-ui-lib-content-media-intro.mjs","names":[],"sources":["../../../projects/ui-lib/content/media-intro/media-intro.component.ts","../../../projects/ui-lib/content/media-intro/media-intro.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({  \n  selector: 'lib-media-intro',\n  imports: [CommonModule, ScrollRevealDirective, UiImageComponent],\n  templateUrl: './media-intro.component.html',\n  styleUrl: './media-intro.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n      style: 'display: contents',\n  },\n})\nexport class MediaIntroComponent {\n  @Input() highlightedText?: string;\n  @Input() secondaryText?: string;\n  @Input() direction: 'left' | 'right' = 'right';\n  @Input() media?: UiLibImageI;\n}\n","<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n    <div class=\"media-intro__content main-grid col-span-full md:col-span-12 md:col-start-1\">\n        @if(highlightedText) {\n            <div class=\"media-intro__content--left main-grid col-span-full\">\n                <h2 class=\"media-intro__content--main-text col-span-full md:col-span-6\" \n                    [class.md:col-start-1]=\"direction === 'left'\"\n                    [class.md:col-start-7]=\"direction === 'right'\"\n                    [innerHTML]=\"highlightedText\">\n                </h2>\n            </div>\n        }\n        @if(secondaryText) {\n            <div class=\"media-intro__content--right main-grid col-span-full\">\n                <p class=\"media-intro__content--secondary-text col-span-full md:col-span-6\"\n                   [class.md:col-start-7]=\"direction === 'left'\"\n                   [class.md:col-start-1]=\"direction === 'right'\"\n                   [innerHTML]=\"secondaryText\"\n                ></p>\n            </div>\n        }\n    </div>\n    @if(media) {\n        <div class=\"media-intro__media col-span-full md:col-span-12 md:col-start-1\">\n            @if (media.publicId) {\n                <ui-image [publicId]=\"media.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n            } @else {\n                <img [src]=\"media.url\" [alt]=\"media.alt\" class=\"media-intro-img\" loading=\"eager\" />\n            }\n        </div>\n    }\n</div>\n"],"mappings":";;;;;AAgBA,IAAa,sBAAb,MAAa,oBAAmB;CACrB;CACA;CACA,YAA8B;CAC9B;CAJE,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,iBAAA;GAAA,eAAA;GAAA,WAAA;GAAA,OAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UChBhC;EA+BA,QAAA,CAAA,uFAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDvBY;GAAY;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;;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;IAAuB;GAAgB;GAAC,iBAG/C,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,uFAAA;EAAA,CAAA;;;E,oBAGA,MAAA,M;E,kBACA,MAAA,M;E,cACA,MAAA,M;E,UACA,MAAA,M"}

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

@@ -1,77 +1,119 @@
-import { isPlatformBrowser, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { signal, effect, computed, PLATFORM_ID, Input, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
-import { UiImageComponent } from '@lluc_llull/ui-lib/shared';
-
-class MediaSplitComponent {
-    platformId;
-    title;
-    text;
-    images;
-    activeImageIndex = signal(0);
-    imageLoaded = signal(false);
-    constructor(platformId) {
-        this.platformId = platformId;
-        effect(() => {
-            this.activeImageIndex();
-            if (!isPlatformBrowser(this.platformId))
-                return;
-            this.imageLoaded.set(false);
-            requestAnimationFrame(() => {
-                this.imageLoaded.set(true);
-            });
-        });
-    }
-    currentImage = computed(() => {
-        const imgs = this.images ?? [];
-        return imgs[this.activeImageIndex()] ?? null;
-    });
-    updateActiveImage(index) {
-        this.activeImageIndex.set(index);
-    }
-    resetImage() {
-        this.activeImageIndex.set(0);
-    }
-    ngOnInit() {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        if ('requestIdleCallback' in window) {
-            window.requestIdleCallback(() => {
-                this.preloadImages();
-            });
-        }
-        else {
-            setTimeout(() => this.preloadImages(), 2000);
-        }
-    }
-    preloadImages() {
-        this.images?.slice(1).forEach((img) => {
-            const i = new Image();
-            i.src = img.url;
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MediaSplitComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MediaSplitComponent, isStandalone: true, selector: "lib-media-split", inputs: { title: "title", text: "text", images: "images" }, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MediaSplitComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-media-split', standalone: true, imports: [CommonModule, UiImageComponent], 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"] }]
-        }], ctorParameters: () => [{ type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }], propDecorators: { title: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], images: [{
-                type: Input
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+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 { UiImageComponent } from "@lluc_llull/ui-lib/shared";
+var MediaSplitComponent = class MediaSplitComponent {
+	platformId;
+	title;
+	text;
+	images;
+	activeImageIndex = signal(0, ...ngDevMode ? [{ debugName: "activeImageIndex" }] : /* istanbul ignore next */ []);
+	imageLoaded = signal(false, ...ngDevMode ? [{ debugName: "imageLoaded" }] : /* istanbul ignore next */ []);
+	constructor(platformId) {
+		this.platformId = platformId;
+		effect(() => {
+			this.activeImageIndex();
+			if (!isPlatformBrowser(this.platformId)) return;
+			this.imageLoaded.set(false);
+			requestAnimationFrame(() => {
+				this.imageLoaded.set(true);
+			});
+		});
+	}
+	currentImage = computed(() => {
+		return (this.images ?? [])[this.activeImageIndex()] ?? null;
+	}, ...ngDevMode ? [{ debugName: "currentImage" }] : /* istanbul ignore next */ []);
+	updateActiveImage(index) {
+		this.activeImageIndex.set(index);
+	}
+	resetImage() {
+		this.activeImageIndex.set(0);
+	}
+	ngOnInit() {
+		if (!isPlatformBrowser(this.platformId)) return;
+		if ("requestIdleCallback" in window) window.requestIdleCallback(() => {
+			this.preloadImages();
+		});
+		else setTimeout(() => this.preloadImages(), 2e3);
+	}
+	preloadImages() {
+		this.images?.slice(1).forEach((img) => {
+			const i = new Image();
+			i.src = img.url;
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: MediaSplitComponent,
+		deps: [{ token: PLATFORM_ID }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: MediaSplitComponent,
+		isStandalone: true,
+		selector: "lib-media-split",
+		inputs: {
+			title: "title",
+			text: "text",
+			images: "images"
+		},
+		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"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: MediaSplitComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-media-split",
+			standalone: true,
+			imports: [CommonModule, UiImageComponent],
+			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"]
+		}]
+	}],
+	ctorParameters: () => [{
+		type: Object,
+		decorators: [{
+			type: Inject,
+			args: [PLATFORM_ID]
+		}]
+	}],
+	propDecorators: {
+		title: [{ type: Input }],
+		text: [{ type: Input }],
+		images: [{ type: Input }]
+	}
+});
 export { MediaSplitComponent };
-//# sourceMappingURL=lluc_llull-ui-lib-content-media-split.mjs.map
+
+//# sourceMappingURL=lluc_llull-ui-lib-content-media-split.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-content-media-split.mjs","sources":["../../../projects/ui-lib/content/media-split/media-split.component.ts","../../../projects/ui-lib/content/media-split/media-split.component.html","../../../projects/ui-lib/content/media-split/lluc_llull-ui-lib-content-media-split.ts"],"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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAyBa,mBAAmB,CAAA;AAQsB,IAAA,UAAA;AAPzC,IAAA,KAAK;AACL,IAAA,IAAI;AACJ,IAAA,MAAM;AAEf,IAAA,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAAC;AAC5B,IAAA,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;AAE3B,IAAA,WAAA,CAAkD,UAAkB,EAAA;QAAlB,IAAA,CAAA,UAAU,GAAV,UAAU;QACxD,MAAM,CAAC,MAAK;YACR,IAAI,CAAC,gBAAgB,EAAE;AAEvB,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;gBAAE;AAEzC,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;YAE3B,qBAAqB,CAAC,MAAK;AACvB,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;AAC9B,YAAA,CAAC,CAAC;AACN,QAAA,CAAC,CAAC;IACN;AAEA,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AACzB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE;QAC9B,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,IAAI,IAAI;AAChD,IAAA,CAAC,CAAC;AAEF,IAAA,iBAAiB,CAAC,KAAa,EAAA;AAC3B,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC;IACpC;IAEA,UAAU,GAAA;AACN,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IAChC;IAEA,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;YAAE;AAEzC,QAAA,IAAI,qBAAqB,IAAI,MAAM,EAAE;AAChC,YAAA,MAAc,CAAC,mBAAmB,CAAC,MAAK;gBACrC,IAAI,CAAC,aAAa,EAAE;AACxB,YAAA,CAAC,CAAC;QACN;aAAO;YACH,UAAU,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,EAAE,IAAI,CAAC;QAChD;IACJ;IAEQ,aAAa,GAAA;AACjB,QAAA,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AAClC,YAAA,MAAM,CAAC,GAAG,IAAI,KAAK,EAAE;AACrB,YAAA,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG;AACnB,QAAA,CAAC,CAAC;IACN;AApDS,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,kBAQR,WAAW,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AARtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECzBhC,ozCAyCA,EAAA,MAAA,EAAA,CAAA,i0BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDxBc,YAAY,+BAAE,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,OAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAQ/B,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAX/B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAAA,eAAA,EAGxB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACF,wBAAA,KAAK,EAAE,mBAAmB;AAC7B,qBAAA,EAAA,QAAA,EAAA,ozCAAA,EAAA,MAAA,EAAA,CAAA,i0BAAA,CAAA,EAAA;;0BAUY,MAAM;2BAAC,WAAW;yCAPtB,KAAK,EAAA,CAAA;sBAAb;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,MAAM,EAAA,CAAA;sBAAd;;;AE5BL;;AAEG;;;;"}
+{"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"}