@lluc_llull/ui-lib 0.28.3 → 0.28.4

package/fesm2022/lluc_llull-ui-lib-content-category-progress.mjs

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { HighlightDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';
+
+class CategoryProgressComponent {
+    pretitle;
+    title;
+    categories;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CategoryProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: CategoryProgressComponent, isStandalone: true, selector: "lib-category-progress", inputs: { pretitle: "pretitle", title: "title", categories: "categories" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: "<div class=\"category-progress col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  @if (pretitle) {\n    <h3 class=\"pretitle\">{{ pretitle }}</h3>\n  }\n  @if (title) {\n    <h2 class=\"title\">{{ title }}</h2>\n  }\n  <div class=\"progress-grid\">\n    @for (category of categories; track $index) {\n      <div class=\"category\">\n        <h3 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ category.title }}</h3>\n\n        @for (item of category.items; track $index) {\n          <div class=\"item\">\n            <div class=\"item-info\">\n              <span class=\"label\">{{ item.label }}</span>\n              <span class=\"value\">{{ item.value }}%</span>\n            </div>\n\n            <div class=\"bar\">\n              <div class=\"fill\" [style.width.%]=\"item.value\"></div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".category-progress{text-align:start;align-items:start}.title{text-transform:uppercase}.progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.category{display:flex;flex-direction:column;gap:1.5rem}.category-title{font-weight:600;font-size:1.1rem}.subtitle{font-size:1.8rem;width:fit-content}.item{margin-bottom:0rem}.item .item-info{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}.item .label,.item .value{font-size:1.3rem;margin-bottom:0;display:inline-block}.item .bar{background-color:var(--progress-bg);height:2px;border-radius:3px;overflow:hidden}.item .bar .fill{background-color:var(--progress-color);height:100%;width:0;transition:width .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: HighlightDirective, selector: "[highlight]", inputs: ["highlight", "highlightThickness"] }, { kind: "directive", type: ScrollRevealDirective, selector: "[scrollReveal]", inputs: ["distance", "duration"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CategoryProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-category-progress', standalone: true, imports: [CommonModule, HighlightDirective, ScrollRevealDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        style: 'display: contents',
+                    }, template: "<div class=\"category-progress col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  @if (pretitle) {\n    <h3 class=\"pretitle\">{{ pretitle }}</h3>\n  }\n  @if (title) {\n    <h2 class=\"title\">{{ title }}</h2>\n  }\n  <div class=\"progress-grid\">\n    @for (category of categories; track $index) {\n      <div class=\"category\">\n        <h3 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ category.title }}</h3>\n\n        @for (item of category.items; track $index) {\n          <div class=\"item\">\n            <div class=\"item-info\">\n              <span class=\"label\">{{ item.label }}</span>\n              <span class=\"value\">{{ item.value }}%</span>\n            </div>\n\n            <div class=\"bar\">\n              <div class=\"fill\" [style.width.%]=\"item.value\"></div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".category-progress{text-align:start;align-items:start}.title{text-transform:uppercase}.progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.category{display:flex;flex-direction:column;gap:1.5rem}.category-title{font-weight:600;font-size:1.1rem}.subtitle{font-size:1.8rem;width:fit-content}.item{margin-bottom:0rem}.item .item-info{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}.item .label,.item .value{font-size:1.3rem;margin-bottom:0;display:inline-block}.item .bar{background-color:var(--progress-bg);height:2px;border-radius:3px;overflow:hidden}.item .bar .fill{background-color:var(--progress-color);height:100%;width:0;transition:width .3s ease}\n"] }]
+        }], propDecorators: { pretitle: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], categories: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CategoryProgressComponent };
+//# sourceMappingURL=lluc_llull-ui-lib-content-category-progress.mjs.map

package/fesm2022/lluc_llull-ui-lib-content-category-progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lluc_llull-ui-lib-content-category-progress.mjs","sources":["../../../projects/ui-lib/content/category-progress/category-progress.component.ts","../../../projects/ui-lib/content/category-progress/category-progress.component.html","../../../projects/ui-lib/content/category-progress/lluc_llull-ui-lib-content-category-progress.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { HighlightDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\n\n@Component({\n    selector: 'lib-category-progress',\n    standalone: true,\n    imports: [CommonModule, HighlightDirective, ScrollRevealDirective],\n    templateUrl: './category-progress.component.html',\n    styleUrl: './category-progress.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class CategoryProgressComponent {\n    @Input() pretitle?: string;\n    @Input() title?: string;\n    @Input() categories?: ProgressCategoryI[];\n}\n\nexport interface ProgressItemI {\n    label: string;\n    value: number;\n}\n\nexport interface ProgressCategoryI {\n    title: string;\n    items: ProgressItemI[];\n}\n","<div class=\"category-progress col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  @if (pretitle) {\n    <h3 class=\"pretitle\">{{ pretitle }}</h3>\n  }\n  @if (title) {\n    <h2 class=\"title\">{{ title }}</h2>\n  }\n  <div class=\"progress-grid\">\n    @for (category of categories; track $index) {\n      <div class=\"category\">\n        <h3 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ category.title }}</h3>\n\n        @for (item of category.items; track $index) {\n          <div class=\"item\">\n            <div class=\"item-info\">\n              <span class=\"label\">{{ item.label }}</span>\n              <span class=\"value\">{{ item.value }}%</span>\n            </div>\n\n            <div class=\"bar\">\n              <div class=\"fill\" [style.width.%]=\"item.value\"></div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAea,yBAAyB,CAAA;AACzB,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,UAAU;wGAHV,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAzB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,yBAAyB,4MCftC,k4BA4BA,EAAA,MAAA,EAAA,CAAA,8tBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDrBc,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,kBAAkB,qGAAE,qBAAqB,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAQxD,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAXrC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,EAAA,UAAA,EACrB,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,kBAAkB,EAAE,qBAAqB,CAAC,EAAA,eAAA,EAGjD,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACF,wBAAA,KAAK,EAAE,mBAAmB;AAC7B,qBAAA,EAAA,QAAA,EAAA,k4BAAA,EAAA,MAAA,EAAA,CAAA,8tBAAA,CAAA,EAAA;8BAGQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,UAAU,EAAA,CAAA;sBAAlB;;;AElBL;;AAEG;;;;"}

package/fesm2022/lluc_llull-ui-lib-content-contact-minimal.mjs

@@ -0,0 +1,38 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { HighlightDirective, LinkTypeDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';
+import { UiImageComponent } from '@lluc_llull/ui-lib/shared';
+
+class ContactMinimalComponent {
+    contactsTitle;
+    socialsTitle;
+    contacts;
+    socials;
+    img;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ContactMinimalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: ContactMinimalComponent, isStandalone: true, selector: "lib-contact-minimal", inputs: { contactsTitle: "contactsTitle", socialsTitle: "socialsTitle", contacts: "contacts", socials: "socials", img: "img" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: "<div class=\"contact-minimal main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"contact-minimal__content col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"contact-minimal__content--left col-span-6 col-start-1\">\n      @if (contactsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ contactsTitle }}</h2>\n      }\n      @if (contacts && contacts.length > 0) {\n        <div class=\"btn-group\">\n          @for (contact of contacts; track $index) {\n            <a [href]=\"contact?.url\" [linkType]=\"contact?.linkType\" class=\"btn btn-link\">\n              {{ contact?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"contact-minimal__content--right col-span-6 col-start-7\">\n      @if (socialsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ socialsTitle }}</h2>\n      }\n      @if (socials && socials.length > 0) {\n        <div class=\"btn-group\">\n          @for (social of socials; track $index) {\n            <a [href]=\"social?.url\" [linkType]=\"social?.linkType\" class=\"btn btn-link\">\n              {{ social?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (img) {\n    <div class=\"contact-minimal__content--media col-span-full md:col-span-12 md:col-start-1\">\n      @if (img.publicId) {\n        <ui-image [publicId]=\"img.publicId\"></ui-image>\n      } @else {\n        <img\n          [src]=\"img.url\"\n          [alt]=\"img.alt\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          [attr.width]=\"img.width || 800\"\n          [attr.height]=\"img.height || 600\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".contact-minimal__content{display:grid;grid-auto-flow:column}.contact-minimal__content--left .btn{justify-content:start;font-size:1.1rem}.contact-minimal__content--right{justify-self:end}.contact-minimal__content--right .btn-group{align-items:end}.contact-minimal__content--right .btn{justify-content:end;font-size:1.1rem}.contact-minimal__content--media{justify-self:center}.contact-minimal__content--media img,.contact-minimal__content--media ui-image{transform:rotate(45deg);width:50rem}@media (max-width: 768px){.contact-minimal__content--media{top:16rem}.contact-minimal__content--media img,.contact-minimal__content--media ui-image{width:15rem;height:auto}}.contact-minimal .btn-group{display:flex;flex-direction:column;margin-top:1rem;gap:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: HighlightDirective, selector: "[highlight]", inputs: ["highlight", "highlightThickness"] }, { kind: "directive", type: LinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href"], outputs: ["anchorClicked"] }, { kind: "directive", type: ScrollRevealDirective, selector: "[scrollReveal]", inputs: ["distance", "duration"] }, { kind: "component", type: UiImageComponent, selector: "ui-image", inputs: ["publicId", "cloudName", "transformations", "eager"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ContactMinimalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-contact-minimal', imports: [CommonModule, HighlightDirective, LinkTypeDirective, ScrollRevealDirective, UiImageComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        style: 'display: contents',
+                    }, template: "<div class=\"contact-minimal main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"contact-minimal__content col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"contact-minimal__content--left col-span-6 col-start-1\">\n      @if (contactsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ contactsTitle }}</h2>\n      }\n      @if (contacts && contacts.length > 0) {\n        <div class=\"btn-group\">\n          @for (contact of contacts; track $index) {\n            <a [href]=\"contact?.url\" [linkType]=\"contact?.linkType\" class=\"btn btn-link\">\n              {{ contact?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"contact-minimal__content--right col-span-6 col-start-7\">\n      @if (socialsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ socialsTitle }}</h2>\n      }\n      @if (socials && socials.length > 0) {\n        <div class=\"btn-group\">\n          @for (social of socials; track $index) {\n            <a [href]=\"social?.url\" [linkType]=\"social?.linkType\" class=\"btn btn-link\">\n              {{ social?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (img) {\n    <div class=\"contact-minimal__content--media col-span-full md:col-span-12 md:col-start-1\">\n      @if (img.publicId) {\n        <ui-image [publicId]=\"img.publicId\"></ui-image>\n      } @else {\n        <img\n          [src]=\"img.url\"\n          [alt]=\"img.alt\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          [attr.width]=\"img.width || 800\"\n          [attr.height]=\"img.height || 600\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".contact-minimal__content{display:grid;grid-auto-flow:column}.contact-minimal__content--left .btn{justify-content:start;font-size:1.1rem}.contact-minimal__content--right{justify-self:end}.contact-minimal__content--right .btn-group{align-items:end}.contact-minimal__content--right .btn{justify-content:end;font-size:1.1rem}.contact-minimal__content--media{justify-self:center}.contact-minimal__content--media img,.contact-minimal__content--media ui-image{transform:rotate(45deg);width:50rem}@media (max-width: 768px){.contact-minimal__content--media{top:16rem}.contact-minimal__content--media img,.contact-minimal__content--media ui-image{width:15rem;height:auto}}.contact-minimal .btn-group{display:flex;flex-direction:column;margin-top:1rem;gap:0}\n"] }]
+        }], propDecorators: { contactsTitle: [{
+                type: Input
+            }], socialsTitle: [{
+                type: Input
+            }], contacts: [{
+                type: Input
+            }], socials: [{
+                type: Input
+            }], img: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ContactMinimalComponent };
+//# sourceMappingURL=lluc_llull-ui-lib-content-contact-minimal.mjs.map

package/fesm2022/lluc_llull-ui-lib-content-contact-minimal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lluc_llull-ui-lib-content-contact-minimal.mjs","sources":["../../../projects/ui-lib/content/contact-minimal/contact-minimal.component.ts","../../../projects/ui-lib/content/contact-minimal/contact-minimal.component.html","../../../projects/ui-lib/content/contact-minimal/lluc_llull-ui-lib-content-contact-minimal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } 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-contact-minimal',\n    imports: [CommonModule, HighlightDirective, LinkTypeDirective, ScrollRevealDirective, UiImageComponent],\n    templateUrl: './contact-minimal.component.html',\n    styleUrl: './contact-minimal.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class ContactMinimalComponent {\n    @Input() contactsTitle?: string;\n    @Input() socialsTitle?: string;\n    @Input() contacts?: UiLibButtonI[];\n    @Input() socials?: UiLibButtonI[];\n    @Input() img?: UiLibImageI;\n}\n","<div class=\"contact-minimal main-grid col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n  <div class=\"contact-minimal__content col-span-full md:col-span-12 md:col-start-1\">\n    <div class=\"contact-minimal__content--left col-span-6 col-start-1\">\n      @if (contactsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ contactsTitle }}</h2>\n      }\n      @if (contacts && contacts.length > 0) {\n        <div class=\"btn-group\">\n          @for (contact of contacts; track $index) {\n            <a [href]=\"contact?.url\" [linkType]=\"contact?.linkType\" class=\"btn btn-link\">\n              {{ contact?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"contact-minimal__content--right col-span-6 col-start-7\">\n      @if (socialsTitle) {\n        <h2 class=\"subtitle\" [highlight]=\"'#FFFFFF'\">{{ socialsTitle }}</h2>\n      }\n      @if (socials && socials.length > 0) {\n        <div class=\"btn-group\">\n          @for (social of socials; track $index) {\n            <a [href]=\"social?.url\" [linkType]=\"social?.linkType\" class=\"btn btn-link\">\n              {{ social?.label }}\n            </a>\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (img) {\n    <div class=\"contact-minimal__content--media col-span-full md:col-span-12 md:col-start-1\">\n      @if (img.publicId) {\n        <ui-image [publicId]=\"img.publicId\"></ui-image>\n      } @else {\n        <img\n          [src]=\"img.url\"\n          [alt]=\"img.alt\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          [attr.width]=\"img.width || 800\"\n          [attr.height]=\"img.height || 600\"\n        />\n      }\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAoBa,uBAAuB,CAAA;AACvB,IAAA,aAAa;AACb,IAAA,YAAY;AACZ,IAAA,QAAQ;AACR,IAAA,OAAO;AACP,IAAA,GAAG;wGALH,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,YAAA,EAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,GAAA,EAAA,KAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpBpC,mtDAgDA,EAAA,MAAA,EAAA,CAAA,gvBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDpCc,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,iBAAiB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,qBAAqB,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAQ7F,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAVnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,WACtB,CAAC,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,gBAAgB,CAAC,EAAA,eAAA,EAGtF,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACF,wBAAA,KAAK,EAAE,mBAAmB;AAC7B,qBAAA,EAAA,QAAA,EAAA,mtDAAA,EAAA,MAAA,EAAA,CAAA,gvBAAA,CAAA,EAAA;8BAGQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,GAAG,EAAA,CAAA;sBAAX;;;AEzBL;;AAEG;;;;"}

package/fesm2022/lluc_llull-ui-lib-content-content-document.mjs

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class ContentDocumentComponent {
+    title;
+    items;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ContentDocumentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: ContentDocumentComponent, isStandalone: true, selector: "lib-content-document", inputs: { title: "title", items: "items" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: "<div class=\"content-document main-grid col-span-full sm:col-span-12 sm:col-start-1\" scrollReveal>\n  @if (title) {\n    <div class=\"content-document__title main-grid col-span-full\">\n      <h1 class=\"title col-span-full\">{{ title }}</h1>\n    </div>\n  }\n  @if (items) {\n    <div class=\"content-document__items col-span-full\">\n      @for (item of items; track $index) {\n        <div class=\"content-document__items--item main-grid\">\n          <h2 class=\"content-document__items--item_title col-span-full sm:col-span-12 sm:col-start-1\">\n            {{ item.title }}\n          </h2>\n          <p class=\"content-document__items--item_text col-span-full sm:col-span-4 sm:col-start-5\" [innerHTML]=\"item.text\"></p>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".content-document__title,.content-document__items--item_title{text-transform:uppercase}.main-grid{row-gap:0;padding-block:0}.content-document__items--item_title{margin-bottom:0;font-size:2rem}.content-document__items--item_text{font-size:1.3rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ContentDocumentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-content-document', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        style: 'display: contents',
+                    }, template: "<div class=\"content-document main-grid col-span-full sm:col-span-12 sm:col-start-1\" scrollReveal>\n  @if (title) {\n    <div class=\"content-document__title main-grid col-span-full\">\n      <h1 class=\"title col-span-full\">{{ title }}</h1>\n    </div>\n  }\n  @if (items) {\n    <div class=\"content-document__items col-span-full\">\n      @for (item of items; track $index) {\n        <div class=\"content-document__items--item main-grid\">\n          <h2 class=\"content-document__items--item_title col-span-full sm:col-span-12 sm:col-start-1\">\n            {{ item.title }}\n          </h2>\n          <p class=\"content-document__items--item_text col-span-full sm:col-span-4 sm:col-start-5\" [innerHTML]=\"item.text\"></p>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".content-document__title,.content-document__items--item_title{text-transform:uppercase}.main-grid{row-gap:0;padding-block:0}.content-document__items--item_title{margin-bottom:0;font-size:2rem}.content-document__items--item_text{font-size:1.3rem}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ContentDocumentComponent };
+//# sourceMappingURL=lluc_llull-ui-lib-content-content-document.mjs.map

package/fesm2022/lluc_llull-ui-lib-content-content-document.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lluc_llull-ui-lib-content-content-document.mjs","sources":["../../../projects/ui-lib/content/content-document/content-document.component.ts","../../../projects/ui-lib/content/content-document/content-document.component.html","../../../projects/ui-lib/content/content-document/lluc_llull-ui-lib-content-content-document.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n    selector: 'lib-content-document',\n    imports: [CommonModule],\n    templateUrl: './content-document.component.html',\n    styleUrl: './content-document.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class ContentDocumentComponent {\n  @Input() title?: string;\n  @Input() items?: ContentDocumentItemI[];\n}\n\nexport interface ContentDocumentItemI {\n  title: string;\n  text: string;\n}\n","<div class=\"content-document main-grid col-span-full sm:col-span-12 sm:col-start-1\" scrollReveal>\n  @if (title) {\n    <div class=\"content-document__title main-grid col-span-full\">\n      <h1 class=\"title col-span-full\">{{ title }}</h1>\n    </div>\n  }\n  @if (items) {\n    <div class=\"content-document__items col-span-full\">\n      @for (item of items; track $index) {\n        <div class=\"content-document__items--item main-grid\">\n          <h2 class=\"content-document__items--item_title col-span-full sm:col-span-12 sm:col-start-1\">\n            {{ item.title }}\n          </h2>\n          <p class=\"content-document__items--item_text col-span-full sm:col-span-4 sm:col-start-5\" [innerHTML]=\"item.text\"></p>\n        </div>\n      }\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAaa,wBAAwB,CAAA;AAC1B,IAAA,KAAK;AACL,IAAA,KAAK;wGAFH,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECbrC,ixBAmBA,EAAA,MAAA,EAAA,CAAA,yPAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDdc,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAQb,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAVpC,SAAS;+BACI,sBAAsB,EAAA,OAAA,EACvB,CAAC,YAAY,CAAC,mBAGN,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACF,wBAAA,KAAK,EAAE,mBAAmB;AAC7B,qBAAA,EAAA,QAAA,EAAA,ixBAAA,EAAA,MAAA,EAAA,CAAA,yPAAA,CAAA,EAAA;8BAGM,KAAK,EAAA,CAAA;sBAAb;gBACQ,KAAK,EAAA,CAAA;sBAAb;;;AEfH;;AAEG;;;;"}

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

@@ -0,0 +1,112 @@
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Input, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
+import { LinkTypeDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';
+import { UiIconComponent, UiImageComponent } from '@lluc_llull/ui-lib/shared';
+import { LinkType } from '@lluc_llull/ui-lib/enums';
+
+class HeroSectionComponent {
+    document;
+    variant = 'text';
+    pretitle;
+    title;
+    subtitle;
+    text;
+    buttons;
+    highlight;
+    image;
+    constructor(document) {
+        this.document = document;
+    }
+    ngOnInit() {
+        if (this.variant === 'image') {
+            this.document.body.classList.add('has-hero-image');
+        }
+    }
+    ngOnDestroy() {
+        this.document.body.classList.remove('has-hero-image');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: HeroSectionComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: HeroSectionComponent, isStandalone: true, selector: "lib-hero-section", inputs: { variant: "variant", pretitle: "pretitle", title: "title", subtitle: "subtitle", text: "text", buttons: "buttons", highlight: "highlight", image: "image" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: "<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", styles: ["@charset \"UTF-8\";.hero-section{position:relative;min-height:calc(100vh - 10rem);display:grid;grid-template-rows:1fr auto;text-align:center;overflow:hidden}.hero-section__content{position:relative;z-index:2}.hero-section__bg{position:absolute;inset:0;z-index:0;overflow:hidden}.hero-section__bg .hero-img,.hero-section__bg ui-image{width:100%;height:100%;object-fit:cover}.hero-section__bg:after{content:\"\";position:absolute;inset:0;background:linear-gradient(to bottom,#0003,#0009)}.text,.btn-link{font-size:1.3rem}@media (max-width: 768px){.text,.btn-link{font-size:1.1rem}}.hero-section--text{align-items:center;justify-items:center;align-content:center}.hero-section--text .hero-section__content{grid-row:1/-1}.hero-section--text .title{font-family:var(--font-title-home);font-weight:200;font-size:4rem;line-height:.85;display:flex;flex-direction:column;align-items:center}@media (max-width: 768px){.hero-section--text .title{font-size:3rem}}.hero-section--text .title .highlight-text{font-size:11.25rem;cursor:help;position:relative;z-index:2}@media (max-width: 768px){.hero-section--text .title .highlight-text{font-size:8.25rem}}.hero-section--text .title .highlight-text .wave-wrapper{position:absolute;top:85%;left:0;width:100%;height:50px;z-index:-1}@media (max-width: 768px){.hero-section--text .title .highlight-text .wave-wrapper{top:90%}}.hero-section--text .title .highlight-text .wave{position:absolute;background-image:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0A<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0A%09 viewBox=\"0 0 27.6 8.4\" style=\"enable-background:new 0 0 27.6 8.4;\" xml:space=\"preserve\">%0A<style type=\"text/css\">%0A%09.st0{fill:none;stroke:%23FFFFFF;stroke-width:2;stroke-miterlimit:10;}%0A<\\/style>%0A<path class=\"st0\" d=\"M0,1c2.7,0,5.2,1.2,6.9,3.2s4.2,3.2,6.9,3.2c2.7,0,5.2-1.2,6.9-3.2S24.9,1,27.6,1\"/>%0A</svg>%0A');background-repeat:repeat-x;top:-1.2rem;opacity:.5;width:100%;height:50%}@media (max-width: 768px){.hero-section--text .title .highlight-text .wave{width:70%;left:50%;transform:translate(-50%)}}.hero-section--text .title .highlight-text:hover .wave{animation:moveWave 5s infinite linear}.hero-section{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);height:100vh}.hero-section--image{align-items:end;justify-items:center}.hero-section--image .hero-section__content{grid-row:2;max-width:60rem;padding-bottom:5rem}.hero-section--image .title{font-family:var(--font-titles);font-weight:700;font-size:2.5rem;line-height:1.2;color:#fff}@media (max-width: 768px){.hero-section--image .title{font-size:2rem}}.hero-section--image .text{font-size:1rem;opacity:.85;color:#fff}.hero-section--image .btn-group--center{display:none}.hero-section--image .hero-section__bg img,.hero-section--image .hero-section__bg ui-image{filter:scale(1.05);transition:transform 6s ease}.hero-section--image .hero-section:hover .hero-img,.hero-section--image .hero-section:hover ui-image{transform:scale(1.1)}@keyframes moveWave{0%{background-position-x:0}to{background-position-x:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: LinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href"], outputs: ["anchorClicked"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: UiImageComponent, selector: "ui-image", inputs: ["publicId", "cloudName", "transformations", "eager"] }, { kind: "directive", type: ScrollRevealDirective, selector: "[scrollReveal]", inputs: ["distance", "duration"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: HeroSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-hero-section', standalone: true, imports: [CommonModule, LinkTypeDirective, UiIconComponent, UiImageComponent, ScrollRevealDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        style: 'display: contents',
+                    }, template: "<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", styles: ["@charset \"UTF-8\";.hero-section{position:relative;min-height:calc(100vh - 10rem);display:grid;grid-template-rows:1fr auto;text-align:center;overflow:hidden}.hero-section__content{position:relative;z-index:2}.hero-section__bg{position:absolute;inset:0;z-index:0;overflow:hidden}.hero-section__bg .hero-img,.hero-section__bg ui-image{width:100%;height:100%;object-fit:cover}.hero-section__bg:after{content:\"\";position:absolute;inset:0;background:linear-gradient(to bottom,#0003,#0009)}.text,.btn-link{font-size:1.3rem}@media (max-width: 768px){.text,.btn-link{font-size:1.1rem}}.hero-section--text{align-items:center;justify-items:center;align-content:center}.hero-section--text .hero-section__content{grid-row:1/-1}.hero-section--text .title{font-family:var(--font-title-home);font-weight:200;font-size:4rem;line-height:.85;display:flex;flex-direction:column;align-items:center}@media (max-width: 768px){.hero-section--text .title{font-size:3rem}}.hero-section--text .title .highlight-text{font-size:11.25rem;cursor:help;position:relative;z-index:2}@media (max-width: 768px){.hero-section--text .title .highlight-text{font-size:8.25rem}}.hero-section--text .title .highlight-text .wave-wrapper{position:absolute;top:85%;left:0;width:100%;height:50px;z-index:-1}@media (max-width: 768px){.hero-section--text .title .highlight-text .wave-wrapper{top:90%}}.hero-section--text .title .highlight-text .wave{position:absolute;background-image:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0A<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0A%09 viewBox=\"0 0 27.6 8.4\" style=\"enable-background:new 0 0 27.6 8.4;\" xml:space=\"preserve\">%0A<style type=\"text/css\">%0A%09.st0{fill:none;stroke:%23FFFFFF;stroke-width:2;stroke-miterlimit:10;}%0A<\\/style>%0A<path class=\"st0\" d=\"M0,1c2.7,0,5.2,1.2,6.9,3.2s4.2,3.2,6.9,3.2c2.7,0,5.2-1.2,6.9-3.2S24.9,1,27.6,1\"/>%0A</svg>%0A');background-repeat:repeat-x;top:-1.2rem;opacity:.5;width:100%;height:50%}@media (max-width: 768px){.hero-section--text .title .highlight-text .wave{width:70%;left:50%;transform:translate(-50%)}}.hero-section--text .title .highlight-text:hover .wave{animation:moveWave 5s infinite linear}.hero-section{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);height:100vh}.hero-section--image{align-items:end;justify-items:center}.hero-section--image .hero-section__content{grid-row:2;max-width:60rem;padding-bottom:5rem}.hero-section--image .title{font-family:var(--font-titles);font-weight:700;font-size:2.5rem;line-height:1.2;color:#fff}@media (max-width: 768px){.hero-section--image .title{font-size:2rem}}.hero-section--image .text{font-size:1rem;opacity:.85;color:#fff}.hero-section--image .btn-group--center{display:none}.hero-section--image .hero-section__bg img,.hero-section--image .hero-section__bg ui-image{filter:scale(1.05);transition:transform 6s ease}.hero-section--image .hero-section:hover .hero-img,.hero-section--image .hero-section:hover ui-image{transform:scale(1.1)}@keyframes moveWave{0%{background-position-x:0}to{background-position-x:100%}}\n"] }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { variant: [{
+                type: Input
+            }], pretitle: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], buttons: [{
+                type: Input
+            }], highlight: [{
+                type: Input
+            }], image: [{
+                type: Input
+            }] } });
+
+var heroSection_stories = {
+    title: 'Content/HeroSection',
+    component: HeroSectionComponent,
+    tags: ['autodocs'],
+    argTypes: {
+        variant: { control: 'radio', options: ['text', 'image'] },
+        pretitle: { control: 'text' },
+        title: { control: 'text' },
+        subtitle: { control: 'text' },
+        text: { control: 'text' },
+        highlight: { control: 'text' },
+        image: { control: 'object' },
+        buttons: { control: 'object' },
+    },
+};
+const Default = {
+    args: {
+        variant: 'text',
+        pretitle: 'Bienvenido a',
+        title: 'Nuestra Plataforma',
+        subtitle: 'Descubre el futuro del desarrollo web',
+        text: 'Texto descriptivo de ejemplo para el Hero Section.',
+        highlight: 'Innovación',
+        buttons: [
+            { label: 'Comenzar', url: 'https://www.google.com', linkType: LinkType.External },
+            {
+                label: 'Más información',
+                url: 'https://www.google.com',
+                linkType: LinkType.External,
+            },
+        ],
+    },
+};
+const ImageVariant = {
+    args: {
+        variant: 'image',
+        title: 'Proyecto Destacado',
+        subtitle: 'Un ejemplo impresionante',
+        text: 'Explora este increíble proyecto con diseño moderno y funcionalidades avanzadas.',
+        image: {
+            url: 'https://picsum.photos/seed/hero/1920/1080.jpg',
+            alt: 'Hero background image',
+        },
+        buttons: [
+            { label: 'Ver proyecto', url: 'https://www.google.com', linkType: LinkType.External },
+        ],
+    },
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Default, HeroSectionComponent, ImageVariant };
+//# sourceMappingURL=lluc_llull-ui-lib-content-hero-section.mjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,77 @@
+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.19", ngImport: i0, type: MediaSplitComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", 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:2rem}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", 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:2rem}.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.
+ */
+
+export { MediaSplitComponent };
+//# sourceMappingURL=lluc_llull-ui-lib-content-media-split.mjs.map

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

@@ -0,0 +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,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;;;;"}

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

@@ -0,0 +1,58 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { signal, PLATFORM_ID, ViewChild, Input, Inject, Component } from '@angular/core';
+import { UiImageComponent } from '@lluc_llull/ui-lib/shared';
+
+class MosaicParallaxComponent {
+    title;
+    text;
+    images;
+    mosaicSection;
+    isVisible = signal(false);
+    observer;
+    isBrowser;
+    constructor(platformId) {
+        this.isBrowser = isPlatformBrowser(platformId);
+    }
+    ngAfterViewInit() {
+        if (!this.isBrowser)
+            return;
+        this.observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting && !this.isVisible()) {
+                this.isVisible.set(true);
+                this.observer?.disconnect();
+            }
+        }, { threshold: 0.1 });
+        this.observer.observe(this.mosaicSection.nativeElement);
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: MosaicParallaxComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: MosaicParallaxComponent, isStandalone: true, selector: "app-mosaic-parallax", inputs: { title: "title", text: "text", images: "images" }, host: { styleAttribute: "display: contents" }, viewQueries: [{ propertyName: "mosaicSection", first: true, predicate: ["mosaicSection"], descendants: true }], ngImport: i0, template: "<div class=\"mosaic-parallax main-grid col-span-full\" #mosaicSection>\n\n  @if (title) {\n    <h2 class=\"subtitle md:col-span-3 md:col-start-1\">{{ title }}</h2>\n  }\n\n  @if (text) {\n    <p class=\"text col-span-full md:col-span-5 md:col-start-1\">\n      {{ text }}\n    </p>\n  }\n\n  @if (images && images.length > 0) {\n    <div class=\"mosaic-parallax__track col-span-full md:col-span-10 md:col-start-2\">\n      @for (item of images; track $index) {\n        <article\n          class=\"mosaic-item\"\n          [class.mosaic-item--visible]=\"isVisible()\"\n          [style.--item-index]=\"images.length - 1 - $index\"\n          [style.--anim-delay]=\"(images.length - 1 - $index) * 250 + 'ms'\"\n        >\n          <div class=\"mosaic-item__media\">\n            @if (item.publicId) {\n              <ui-image [publicId]=\"item.publicId\"></ui-image>\n            } @else {\n              <img [src]=\"item.url\" [alt]=\"item.alt\" loading=\"lazy\" />\n            }\n          </div>\n          @if (item.texts; as texts) {\n            <div class=\"mosaic-item__content\">\n              <p class=\"mosaic-item__description\">{{ texts.text }}</p>\n              <div class=\"mosaic-item__meta\">\n                <span class=\"mosaic-item__date\">{{ texts.title }}</span>\n                <span class=\"mosaic-item__index\">\n                  {{ ($index + 1).toString().padStart(2, '0') }}\n                </span>\n              </div>\n            </div>\n          }\n        </article>\n      }\n    </div>\n  }\n\n</div>", styles: ["@charset \"UTF-8\";.mosaic-parallax{position:relative;align-items:start;padding-block:4rem}.text{grid-row:2}.mosaic-parallax__track{grid-row:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));align-items:start;justify-content:center;gap:2.25rem;width:100%;overflow:hidden;padding-block:0 4rem}.mosaic-item{flex-shrink:0;width:95%;display:flex;flex-direction:column;border:2px solid var(--border-primary);overflow:hidden;background:var(--content-bg-light);margin-top:calc(var(--item-index) * 80px);transform:translateY(100px);transition:transform 1.4s cubic-bezier(.16,1,.3,1) var(--anim-delay),opacity .8s ease var(--anim-delay)}.mosaic-item--visible{transform:translateY(0);opacity:1}.mosaic-item__media{width:100%;aspect-ratio:4/3;overflow:hidden}.mosaic-item__media img,.mosaic-item__media ui-image{width:100%;height:100%;object-fit:cover;display:block}.mosaic-item__content{display:flex;flex-direction:column;justify-content:space-between;padding:1.2rem 1.5rem;min-height:11rem;background:var(--content-bg-dark);color:var(--text-inverse);border-top:2px solid var(--border-primary)}.mosaic-item:nth-child(2n) .mosaic-item__content{background:var(--content-bg-light);color:var(--text-primary)}.mosaic-item:nth-child(2n) .mosaic-item__index{background:var(--content-bg-dark);color:var(--text-inverse)}.mosaic-item__description{font-size:.9rem;line-height:1.4;margin:0 0 1rem}.mosaic-item__meta{display:flex;justify-content:space-between;align-items:flex-end}.mosaic-item__date{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}.mosaic-item__index{font-size:3rem;font-weight:900;line-height:1;background:#f2f2f2;color:var(--text-primary);padding:.5rem 1rem;border-left:2px solid var(--border-primary);margin:0 -1.5rem -1.2rem 0}@media (max-width: 1024px){.mosaic-parallax__track{flex-direction:column;align-items:center;justify-items:center;overflow:visible;grid-row:3}.mosaic-item{width:90%;height:90%;margin-top:0!important}}@media (max-width: 768px){.mosaic-item{width:85%;margin-top:0!important}}\n"], dependencies: [{ kind: "component", type: UiImageComponent, selector: "ui-image", inputs: ["publicId", "cloudName", "transformations", "eager"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: MosaicParallaxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-mosaic-parallax', standalone: true, imports: [UiImageComponent], host: {
+                        style: 'display: contents',
+                    }, template: "<div class=\"mosaic-parallax main-grid col-span-full\" #mosaicSection>\n\n  @if (title) {\n    <h2 class=\"subtitle md:col-span-3 md:col-start-1\">{{ title }}</h2>\n  }\n\n  @if (text) {\n    <p class=\"text col-span-full md:col-span-5 md:col-start-1\">\n      {{ text }}\n    </p>\n  }\n\n  @if (images && images.length > 0) {\n    <div class=\"mosaic-parallax__track col-span-full md:col-span-10 md:col-start-2\">\n      @for (item of images; track $index) {\n        <article\n          class=\"mosaic-item\"\n          [class.mosaic-item--visible]=\"isVisible()\"\n          [style.--item-index]=\"images.length - 1 - $index\"\n          [style.--anim-delay]=\"(images.length - 1 - $index) * 250 + 'ms'\"\n        >\n          <div class=\"mosaic-item__media\">\n            @if (item.publicId) {\n              <ui-image [publicId]=\"item.publicId\"></ui-image>\n            } @else {\n              <img [src]=\"item.url\" [alt]=\"item.alt\" loading=\"lazy\" />\n            }\n          </div>\n          @if (item.texts; as texts) {\n            <div class=\"mosaic-item__content\">\n              <p class=\"mosaic-item__description\">{{ texts.text }}</p>\n              <div class=\"mosaic-item__meta\">\n                <span class=\"mosaic-item__date\">{{ texts.title }}</span>\n                <span class=\"mosaic-item__index\">\n                  {{ ($index + 1).toString().padStart(2, '0') }}\n                </span>\n              </div>\n            </div>\n          }\n        </article>\n      }\n    </div>\n  }\n\n</div>", styles: ["@charset \"UTF-8\";.mosaic-parallax{position:relative;align-items:start;padding-block:4rem}.text{grid-row:2}.mosaic-parallax__track{grid-row:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));align-items:start;justify-content:center;gap:2.25rem;width:100%;overflow:hidden;padding-block:0 4rem}.mosaic-item{flex-shrink:0;width:95%;display:flex;flex-direction:column;border:2px solid var(--border-primary);overflow:hidden;background:var(--content-bg-light);margin-top:calc(var(--item-index) * 80px);transform:translateY(100px);transition:transform 1.4s cubic-bezier(.16,1,.3,1) var(--anim-delay),opacity .8s ease var(--anim-delay)}.mosaic-item--visible{transform:translateY(0);opacity:1}.mosaic-item__media{width:100%;aspect-ratio:4/3;overflow:hidden}.mosaic-item__media img,.mosaic-item__media ui-image{width:100%;height:100%;object-fit:cover;display:block}.mosaic-item__content{display:flex;flex-direction:column;justify-content:space-between;padding:1.2rem 1.5rem;min-height:11rem;background:var(--content-bg-dark);color:var(--text-inverse);border-top:2px solid var(--border-primary)}.mosaic-item:nth-child(2n) .mosaic-item__content{background:var(--content-bg-light);color:var(--text-primary)}.mosaic-item:nth-child(2n) .mosaic-item__index{background:var(--content-bg-dark);color:var(--text-inverse)}.mosaic-item__description{font-size:.9rem;line-height:1.4;margin:0 0 1rem}.mosaic-item__meta{display:flex;justify-content:space-between;align-items:flex-end}.mosaic-item__date{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}.mosaic-item__index{font-size:3rem;font-weight:900;line-height:1;background:#f2f2f2;color:var(--text-primary);padding:.5rem 1rem;border-left:2px solid var(--border-primary);margin:0 -1.5rem -1.2rem 0}@media (max-width: 1024px){.mosaic-parallax__track{flex-direction:column;align-items:center;justify-items:center;overflow:visible;grid-row:3}.mosaic-item{width:90%;height:90%;margin-top:0!important}}@media (max-width: 768px){.mosaic-item{width:85%;margin-top:0!important}}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { title: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], images: [{
+                type: Input
+            }], mosaicSection: [{
+                type: ViewChild,
+                args: ['mosaicSection']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MosaicParallaxComponent };
+//# sourceMappingURL=lluc_llull-ui-lib-content-mosaic-parallax.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lluc_llull-ui-lib-content-mosaic-parallax.mjs","sources":["../../../projects/ui-lib/content/mosaic-parallax/mosaic-parallax.component.ts","../../../projects/ui-lib/content/mosaic-parallax/mosaic-parallax.component.html","../../../projects/ui-lib/content/mosaic-parallax/lluc_llull-ui-lib-content-mosaic-parallax.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n    AfterViewInit,\n    Component,\n    ElementRef,\n    Inject,\n    Input,\n    OnDestroy,\n    PLATFORM_ID,\n    signal,\n    ViewChild,\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: 'app-mosaic-parallax',\n    standalone: true,\n    imports: [UiImageComponent],\n    templateUrl: './mosaic-parallax.component.html',\n    styleUrls: ['./mosaic-parallax.component.scss'],\n    host: {\n        style: 'display: contents',\n    },\n})\nexport class MosaicParallaxComponent implements AfterViewInit, OnDestroy {\n    @Input() title?: string;\n    @Input() text?: string;\n    @Input() images?: UiLibImageI[];\n\n    @ViewChild('mosaicSection') mosaicSection!: ElementRef<HTMLElement>;\n\n    isVisible = signal(false);\n    private observer?: IntersectionObserver;\n    private isBrowser: boolean;\n\n    constructor(@Inject(PLATFORM_ID) platformId: object) {\n        this.isBrowser = isPlatformBrowser(platformId);\n    }\n\n    ngAfterViewInit() {\n        if (!this.isBrowser) return;\n\n        this.observer = new IntersectionObserver(\n            ([entry]) => {\n                if (entry.isIntersecting && !this.isVisible()) {\n                    this.isVisible.set(true);\n                    this.observer?.disconnect();\n                }\n            },\n            { threshold: 0.1 },\n        );\n\n        this.observer.observe(this.mosaicSection.nativeElement);\n    }\n\n    ngOnDestroy() {\n        this.observer?.disconnect();\n    }\n}\n","<div class=\"mosaic-parallax main-grid col-span-full\" #mosaicSection>\n\n  @if (title) {\n    <h2 class=\"subtitle md:col-span-3 md:col-start-1\">{{ title }}</h2>\n  }\n\n  @if (text) {\n    <p class=\"text col-span-full md:col-span-5 md:col-start-1\">\n      {{ text }}\n    </p>\n  }\n\n  @if (images && images.length > 0) {\n    <div class=\"mosaic-parallax__track col-span-full md:col-span-10 md:col-start-2\">\n      @for (item of images; track $index) {\n        <article\n          class=\"mosaic-item\"\n          [class.mosaic-item--visible]=\"isVisible()\"\n          [style.--item-index]=\"images.length - 1 - $index\"\n          [style.--anim-delay]=\"(images.length - 1 - $index) * 250 + 'ms'\"\n        >\n          <div class=\"mosaic-item__media\">\n            @if (item.publicId) {\n              <ui-image [publicId]=\"item.publicId\"></ui-image>\n            } @else {\n              <img [src]=\"item.url\" [alt]=\"item.alt\" loading=\"lazy\" />\n            }\n          </div>\n          @if (item.texts; as texts) {\n            <div class=\"mosaic-item__content\">\n              <p class=\"mosaic-item__description\">{{ texts.text }}</p>\n              <div class=\"mosaic-item__meta\">\n                <span class=\"mosaic-item__date\">{{ texts.title }}</span>\n                <span class=\"mosaic-item__index\">\n                  {{ ($index + 1).toString().padStart(2, '0') }}\n                </span>\n              </div>\n            </div>\n          }\n        </article>\n      }\n    </div>\n  }\n\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAyBa,uBAAuB,CAAA;AACvB,IAAA,KAAK;AACL,IAAA,IAAI;AACJ,IAAA,MAAM;AAEa,IAAA,aAAa;AAEzC,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;AACjB,IAAA,QAAQ;AACR,IAAA,SAAS;AAEjB,IAAA,WAAA,CAAiC,UAAkB,EAAA;AAC/C,QAAA,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC,UAAU,CAAC;IAClD;IAEA,eAAe,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;QAErB,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CACpC,CAAC,CAAC,KAAK,CAAC,KAAI;YACR,IAAI,KAAK,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;AAC3C,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AACxB,gBAAA,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE;YAC/B;AACJ,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,GAAG,EAAE,CACrB;QAED,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC;IAC3D;IAEA,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE;IAC/B;AAjCS,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,kBAWZ,WAAW,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAXtB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,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,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,eAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,eAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECzBpC,0gDA4CM,EAAA,MAAA,EAAA,CAAA,+gEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED1BQ,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAOjB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAVnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,cACnB,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,CAAC,EAAA,IAAA,EAGrB;AACF,wBAAA,KAAK,EAAE,mBAAmB;AAC7B,qBAAA,EAAA,QAAA,EAAA,0gDAAA,EAAA,MAAA,EAAA,CAAA,+gEAAA,CAAA,EAAA;;0BAaY,MAAM;2BAAC,WAAW;yCAVtB,KAAK,EAAA,CAAA;sBAAb;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,MAAM,EAAA,CAAA;sBAAd;gBAE2B,aAAa,EAAA,CAAA;sBAAxC,SAAS;uBAAC,eAAe;;;AE9B9B;;AAEG;;;;"}

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

@@ -0,0 +1,38 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { LinkTypeDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';
+import { UiIconComponent } from '@lluc_llull/ui-lib/shared';
+
+class SectionIntroComponent {
+    pretitle;
+    title;
+    subtitle;
+    text;
+    button;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SectionIntroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SectionIntroComponent, isStandalone: true, selector: "lib-section-intro", inputs: { pretitle: "pretitle", title: "title", subtitle: "subtitle", text: "text", button: "button" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: "<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", styles: [".section-intro{text-align:start;align-items:start}.title,.subtitle{text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: LinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href"], outputs: ["anchorClicked"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: ScrollRevealDirective, selector: "[scrollReveal]", inputs: ["distance", "duration"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SectionIntroComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-section-intro', standalone: true, imports: [CommonModule, LinkTypeDirective, UiIconComponent, ScrollRevealDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        style: 'display: contents',
+                    }, template: "<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", styles: [".section-intro{text-align:start;align-items:start}.title,.subtitle{text-transform:uppercase}\n"] }]
+        }], propDecorators: { pretitle: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], button: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SectionIntroComponent };
+//# sourceMappingURL=lluc_llull-ui-lib-content-section-intro.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lluc_llull-ui-lib-content-section-intro.mjs","sources":["../../../projects/ui-lib/content/section-intro/section-intro.component.ts","../../../projects/ui-lib/content/section-intro/section-intro.component.html","../../../projects/ui-lib/content/section-intro/lluc_llull-ui-lib-content-section-intro.ts"],"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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAiBa,qBAAqB,CAAA;AACrB,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,QAAQ;AACR,IAAA,IAAI;AACJ,IAAA,MAAM;wGALN,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBlC,spBAsBA,EAAA,MAAA,EAAA,CAAA,gGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDbc,YAAY,+BAAE,iBAAiB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,qBAAqB,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAQxE,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAXjC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,cACjB,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,qBAAqB,CAAC,EAAA,eAAA,EAGjE,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACF,wBAAA,KAAK,EAAE,mBAAmB;AAC7B,qBAAA,EAAA,QAAA,EAAA,spBAAA,EAAA,MAAA,EAAA,CAAA,gGAAA,CAAA,EAAA;8BAGQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,MAAM,EAAA,CAAA;sBAAd;;;AEtBL;;AAEG;;;;"}