@lluc_llull/ui-lib 0.34.3 → 0.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/lluc_llull-ui-lib-content-asymmetric-media.mjs +10 -3
- package/fesm2022/lluc_llull-ui-lib-content-asymmetric-media.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-category-progress.mjs +18 -5
- package/fesm2022/lluc_llull-ui-lib-content-category-progress.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-columns-media-stacked.mjs +10 -3
- package/fesm2022/lluc_llull-ui-lib-content-columns-media-stacked.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-contact-minimal.mjs +18 -5
- package/fesm2022/lluc_llull-ui-lib-content-contact-minimal.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-hero-section.mjs +6 -13
- package/fesm2022/lluc_llull-ui-lib-content-hero-section.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-media-intro.mjs +10 -3
- package/fesm2022/lluc_llull-ui-lib-content-media-intro.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-media-split.mjs +34 -21
- package/fesm2022/lluc_llull-ui-lib-content-media-split.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-mosaic-grid.mjs +10 -3
- package/fesm2022/lluc_llull-ui-lib-content-mosaic-grid.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-section-intro.mjs +8 -1
- package/fesm2022/lluc_llull-ui-lib-content-section-intro.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-split-previewer.mjs +20 -7
- package/fesm2022/lluc_llull-ui-lib-content-split-previewer.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-split-showcase.mjs +12 -5
- package/fesm2022/lluc_llull-ui-lib-content-split-showcase.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-stacked-rows.mjs +18 -5
- package/fesm2022/lluc_llull-ui-lib-content-stacked-rows.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content.mjs +172 -74
- package/fesm2022/lluc_llull-ui-lib-content.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-directives.mjs +230 -11
- package/fesm2022/lluc_llull-ui-lib-directives.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-feedback-404.mjs +10 -4
- package/fesm2022/lluc_llull-ui-lib-feedback-404.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-feedback.mjs +10 -4
- package/fesm2022/lluc_llull-ui-lib-feedback.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-footers-columns-footer.mjs +39 -15
- package/fesm2022/lluc_llull-ui-lib-footers-columns-footer.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-footers-legal-footer.mjs +2 -2
- package/fesm2022/lluc_llull-ui-lib-footers-legal-footer.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-footers-social-footer.mjs +2 -2
- package/fesm2022/lluc_llull-ui-lib-footers-social-footer.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-footers-visual-footer.mjs +2 -2
- package/fesm2022/lluc_llull-ui-lib-footers-visual-footer.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-footers.mjs +44 -21
- package/fesm2022/lluc_llull-ui-lib-footers.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-headers-header-clear.mjs +4 -4
- package/fesm2022/lluc_llull-ui-lib-headers-header-clear.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-headers-header-mobile.mjs +2 -2
- package/fesm2022/lluc_llull-ui-lib-headers-header-mobile.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-headers.mjs +6 -6
- package/fesm2022/lluc_llull-ui-lib-headers.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-modals.mjs +4 -4
- package/fesm2022/lluc_llull-ui-lib-modals.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/styles/main.css +71 -1
- package/styles/main.css +71 -1
- package/types/lluc_llull-ui-lib-content-category-progress.d.ts +10 -0
- package/types/lluc_llull-ui-lib-content-contact-minimal.d.ts +10 -0
- package/types/lluc_llull-ui-lib-content-split-previewer.d.ts +10 -0
- package/types/lluc_llull-ui-lib-content.d.ts +30 -0
- package/types/lluc_llull-ui-lib-directives.d.ts +51 -2
- package/types/lluc_llull-ui-lib-feedback-404.d.ts +10 -0
- package/types/lluc_llull-ui-lib-feedback.d.ts +10 -0
- package/types/lluc_llull-ui-lib-footers-columns-footer.d.ts +1 -0
- package/types/lluc_llull-ui-lib-footers.d.ts +1 -0
|
@@ -26,7 +26,7 @@ var AsymmetricMediaComponent = class AsymmetricMediaComponent {
|
|
|
26
26
|
},
|
|
27
27
|
host: { styleAttribute: "display: contents" },
|
|
28
28
|
ngImport: i0,
|
|
29
|
-
template: "<div
|
|
29
|
+
template: "<div class=\"asymmetric-media main-grid col-span-full md:col-span-12 md:col-start-1\">\n @if(media && media.length > 0) {\n <div class=\"asymmetric-media__items main-grid col-span-full md:col-span-12 md:col-start-1\">\n @if(direction === 'left') {\n <div\n class=\"asymmetric-media__items--small col-span-full md:col-span-4 md:col-start-1\"\n scrollReveal\n from=\"bottom\"\n distance=\"64px\"\n duration=\"0.8s\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -25% 0px\"\n >\n @if (media[0]!.publicId) {\n <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n } @else {\n <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n }\n </div>\n <div\n class=\"asymmetric-media__items--big col-span-full md:col-span-8 md:col-start-5\"\n scrollReveal\n from=\"top\"\n distance=\"64px\"\n duration=\"0.8s\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -25% 0px\"\n >\n @if (media[1]!.publicId) {\n <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n } @else {\n <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n }\n </div>\n }\n @if(direction === 'right') {\n <div\n class=\"asymmetric-media__items--small col-span-full md:col-span-8 md:col-start-1\"\n scrollReveal\n from=\"bottom\"\n distance=\"64px\"\n duration=\"0.8s\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -25% 0px\"\n >\n @if (media[0]!.publicId) {\n <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n } @else {\n <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n }\n </div>\n <div\n class=\"asymmetric-media__items--big col-span-full md:col-span-4 md:col-start-9\"\n scrollReveal\n from=\"top\"\n distance=\"64px\"\n duration=\"0.8s\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -25% 0px\"\n >\n @if (media[1]!.publicId) {\n <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n } @else {\n <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n }\n </div>\n }\n </div>\n }\n</div>\n",
|
|
30
30
|
styles: [".asymmetric-media{background-color:var(--content-bg-dark);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);padding-block:10rem 1rem}.asymmetric-media__items{align-items:center}\n"],
|
|
31
31
|
dependencies: [
|
|
32
32
|
{
|
|
@@ -50,7 +50,14 @@ var AsymmetricMediaComponent = class AsymmetricMediaComponent {
|
|
|
50
50
|
kind: "directive",
|
|
51
51
|
type: ScrollRevealDirective,
|
|
52
52
|
selector: "[scrollReveal]",
|
|
53
|
-
inputs: [
|
|
53
|
+
inputs: [
|
|
54
|
+
"distance",
|
|
55
|
+
"duration",
|
|
56
|
+
"from",
|
|
57
|
+
"delay",
|
|
58
|
+
"threshold",
|
|
59
|
+
"rootMargin"
|
|
60
|
+
]
|
|
54
61
|
}
|
|
55
62
|
],
|
|
56
63
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
@@ -72,7 +79,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
72
79
|
],
|
|
73
80
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
74
81
|
host: { style: "display: contents" },
|
|
75
|
-
template: "<div
|
|
82
|
+
template: "<div class=\"asymmetric-media main-grid col-span-full md:col-span-12 md:col-start-1\">\n @if(media && media.length > 0) {\n <div class=\"asymmetric-media__items main-grid col-span-full md:col-span-12 md:col-start-1\">\n @if(direction === 'left') {\n <div\n class=\"asymmetric-media__items--small col-span-full md:col-span-4 md:col-start-1\"\n scrollReveal\n from=\"bottom\"\n distance=\"64px\"\n duration=\"0.8s\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -25% 0px\"\n >\n @if (media[0]!.publicId) {\n <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n } @else {\n <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n }\n </div>\n <div\n class=\"asymmetric-media__items--big col-span-full md:col-span-8 md:col-start-5\"\n scrollReveal\n from=\"top\"\n distance=\"64px\"\n duration=\"0.8s\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -25% 0px\"\n >\n @if (media[1]!.publicId) {\n <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n } @else {\n <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n }\n </div>\n }\n @if(direction === 'right') {\n <div\n class=\"asymmetric-media__items--small col-span-full md:col-span-8 md:col-start-1\"\n scrollReveal\n from=\"bottom\"\n distance=\"64px\"\n duration=\"0.8s\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -25% 0px\"\n >\n @if (media[0]!.publicId) {\n <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n } @else {\n <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n }\n </div>\n <div\n class=\"asymmetric-media__items--big col-span-full md:col-span-4 md:col-start-9\"\n scrollReveal\n from=\"top\"\n distance=\"64px\"\n duration=\"0.8s\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -25% 0px\"\n >\n @if (media[1]!.publicId) {\n <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n } @else {\n <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n }\n </div>\n }\n </div>\n }\n</div>\n",
|
|
76
83
|
styles: [".asymmetric-media{background-color:var(--content-bg-dark);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);padding-block:10rem 1rem}.asymmetric-media__items{align-items:center}\n"]
|
|
77
84
|
}]
|
|
78
85
|
}],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lluc_llull-ui-lib-content-asymmetric-media.mjs","names":[],"sources":["../../../projects/ui-lib/content/asymmetric-media/asymmetric-media.component.ts","../../../projects/ui-lib/content/asymmetric-media/asymmetric-media.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n selector: 'lib-asymmetric-media',\n imports: [CommonModule, UiImageComponent, ScrollRevealDirective],\n templateUrl: './asymmetric-media.component.html',\n styleUrl: './asymmetric-media.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n style: 'display: contents',\n },\n})\nexport class AsymmetricMediaComponent {\n @Input() media?: UiLibImageI[];\n @Input() direction: 'left' | 'right' = 'right';\n}\n","<div
|
|
1
|
+
{"version":3,"file":"lluc_llull-ui-lib-content-asymmetric-media.mjs","names":[],"sources":["../../../projects/ui-lib/content/asymmetric-media/asymmetric-media.component.ts","../../../projects/ui-lib/content/asymmetric-media/asymmetric-media.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n selector: 'lib-asymmetric-media',\n imports: [CommonModule, UiImageComponent, ScrollRevealDirective],\n templateUrl: './asymmetric-media.component.html',\n styleUrl: './asymmetric-media.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n style: 'display: contents',\n },\n})\nexport class AsymmetricMediaComponent {\n @Input() media?: UiLibImageI[];\n @Input() direction: 'left' | 'right' = 'right';\n}\n","<div class=\"asymmetric-media main-grid col-span-full md:col-span-12 md:col-start-1\">\n @if(media && media.length > 0) {\n <div class=\"asymmetric-media__items main-grid col-span-full md:col-span-12 md:col-start-1\">\n @if(direction === 'left') {\n <div\n class=\"asymmetric-media__items--small col-span-full md:col-span-4 md:col-start-1\"\n scrollReveal\n from=\"bottom\"\n distance=\"64px\"\n duration=\"0.8s\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -25% 0px\"\n >\n @if (media[0]!.publicId) {\n <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n } @else {\n <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n }\n </div>\n <div\n class=\"asymmetric-media__items--big col-span-full md:col-span-8 md:col-start-5\"\n scrollReveal\n from=\"top\"\n distance=\"64px\"\n duration=\"0.8s\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -25% 0px\"\n >\n @if (media[1]!.publicId) {\n <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n } @else {\n <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n }\n </div>\n }\n @if(direction === 'right') {\n <div\n class=\"asymmetric-media__items--small col-span-full md:col-span-8 md:col-start-1\"\n scrollReveal\n from=\"bottom\"\n distance=\"64px\"\n duration=\"0.8s\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -25% 0px\"\n >\n @if (media[0]!.publicId) {\n <ui-image [publicId]=\"media[0]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n } @else {\n <img [src]=\"media[0]!.url\" [alt]=\"media[0]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n }\n </div>\n <div\n class=\"asymmetric-media__items--big col-span-full md:col-span-4 md:col-start-9\"\n scrollReveal\n from=\"top\"\n distance=\"64px\"\n duration=\"0.8s\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -25% 0px\"\n >\n @if (media[1]!.publicId) {\n <ui-image [publicId]=\"media[1]!.publicId!\" [eager]=\"true\" class=\"asymmetric-media-img\"></ui-image>\n } @else {\n <img [src]=\"media[1]!.url\" [alt]=\"media[1]!.alt\" class=\"asymmetric-media-img\" loading=\"eager\" />\n }\n </div>\n }\n </div>\n }\n</div>\n"],"mappings":";;;;;AAgBA,IAAa,2BAAb,MAAa,yBAAwB;CAC1B;CACA,YAA8B;CAF5B,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAwB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAxB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAwB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;GAAA,WAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UChBrC;EAsEA,QAAA,CAAA,6PAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MD9DY;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQpD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAwB,YAAA,CAAA;EAVpC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAsB,SACvB;IAAC;IAAc;IAAkB;GAAqB;GAAC,iBAG/C,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,6PAAA;EAAA,CAAA;;;E,UAGA,MAAA,M;E,cACA,MAAA,M"}
|
|
@@ -6,6 +6,8 @@ var CategoryProgressComponent = class CategoryProgressComponent {
|
|
|
6
6
|
pretitle;
|
|
7
7
|
title;
|
|
8
8
|
categories;
|
|
9
|
+
highlightColor = "var(--content-highlight)";
|
|
10
|
+
highlightThickness = 30;
|
|
9
11
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
10
12
|
minVersion: "12.0.0",
|
|
11
13
|
version: "22.2.4",
|
|
@@ -23,11 +25,13 @@ var CategoryProgressComponent = class CategoryProgressComponent {
|
|
|
23
25
|
inputs: {
|
|
24
26
|
pretitle: "pretitle",
|
|
25
27
|
title: "title",
|
|
26
|
-
categories: "categories"
|
|
28
|
+
categories: "categories",
|
|
29
|
+
highlightColor: "highlightColor",
|
|
30
|
+
highlightThickness: "highlightThickness"
|
|
27
31
|
},
|
|
28
32
|
host: { styleAttribute: "display: contents" },
|
|
29
33
|
ngImport: i0,
|
|
30
|
-
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]=\"
|
|
34
|
+
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]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ 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",
|
|
31
35
|
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"],
|
|
32
36
|
dependencies: [
|
|
33
37
|
{
|
|
@@ -44,7 +48,14 @@ var CategoryProgressComponent = class CategoryProgressComponent {
|
|
|
44
48
|
kind: "directive",
|
|
45
49
|
type: ScrollRevealDirective,
|
|
46
50
|
selector: "[scrollReveal]",
|
|
47
|
-
inputs: [
|
|
51
|
+
inputs: [
|
|
52
|
+
"distance",
|
|
53
|
+
"duration",
|
|
54
|
+
"from",
|
|
55
|
+
"delay",
|
|
56
|
+
"threshold",
|
|
57
|
+
"rootMargin"
|
|
58
|
+
]
|
|
48
59
|
}
|
|
49
60
|
],
|
|
50
61
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
@@ -67,14 +78,16 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
67
78
|
],
|
|
68
79
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
69
80
|
host: { style: "display: contents" },
|
|
70
|
-
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]=\"
|
|
81
|
+
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]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ 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",
|
|
71
82
|
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"]
|
|
72
83
|
}]
|
|
73
84
|
}],
|
|
74
85
|
propDecorators: {
|
|
75
86
|
pretitle: [{ type: Input }],
|
|
76
87
|
title: [{ type: Input }],
|
|
77
|
-
categories: [{ type: Input }]
|
|
88
|
+
categories: [{ type: Input }],
|
|
89
|
+
highlightColor: [{ type: Input }],
|
|
90
|
+
highlightThickness: [{ type: Input }]
|
|
78
91
|
}
|
|
79
92
|
});
|
|
80
93
|
export { CategoryProgressComponent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lluc_llull-ui-lib-content-category-progress.mjs","names":[],"sources":["../../../projects/ui-lib/content/category-progress/category-progress.component.ts","../../../projects/ui-lib/content/category-progress/category-progress.component.html"],"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]=\"
|
|
1
|
+
{"version":3,"file":"lluc_llull-ui-lib-content-category-progress.mjs","names":[],"sources":["../../../projects/ui-lib/content/category-progress/category-progress.component.ts","../../../projects/ui-lib/content/category-progress/category-progress.component.html"],"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 @Input() highlightColor = 'var(--content-highlight)';\n @Input() highlightThickness = 30;\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]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ 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"],"mappings":";;;;AAeA,IAAa,4BAAb,MAAa,0BAAyB;CACzB;CACA;CACA;CACA,iBAAiB;CACjB,qBAAqB;CALrB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAyB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAzB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAyB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,UAAA;GAAA,OAAA;GAAA,YAAA;GAAA,gBAAA;GAAA,oBAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UCftC;EA4BA,QAAA,CAAA,8tBAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDrBc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAkB,UAAA;IAAA,QAAA,CAAA,aAAA,oBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQxD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAyB,YAAA,CAAA;EAXrC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAuB,YACrB;GAAI,SACP;IAAC;IAAc;IAAoB;GAAqB;GAAC,iBAGjD,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,8tBAAA;EAAA,CAAA;;;E,aAGA,MAAA,M;E,UACA,MAAA,M;E,eACA,MAAA,M;E,mBACA,MAAA,M;E,uBACA,MAAA,M"}
|
|
@@ -30,7 +30,7 @@ var ColumnsMediaStackedComponent = class ColumnsMediaStackedComponent {
|
|
|
30
30
|
},
|
|
31
31
|
host: { styleAttribute: "display: contents" },
|
|
32
32
|
ngImport: i0,
|
|
33
|
-
template: "<div class=\"columns-media-stacked main-grid col-span-full\"
|
|
33
|
+
template: "<div class=\"columns-media-stacked main-grid col-span-full\">\n <div class=\"columns-media-stacked__content main-grid col-span-full\">\n @if(leftColumn) {\n <p \n class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n [class.md:col-start-1]=\"direction === 'left'\"\n [class.md:col-start-5]=\"direction === 'right'\"\n [innerHTML]=\"leftColumn\"\n scrollReveal\n from=\"left\"\n distance=\"48px\"\n duration=\"0.7s\"\n [delay]=\"0\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n > \n </p>\n }\n @if(rightColumn) {\n <p \n class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n [class.md:col-start-5]=\"direction === 'left'\"\n [class.md:col-start-9]=\"direction === 'right'\"\n [innerHTML]=\"rightColumn\"\n scrollReveal\n from=\"right\"\n distance=\"48px\"\n duration=\"0.7s\"\n [delay]=\"120\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n > \n </p>\n }\n </div>\n @if(image) {\n <div \n class=\"columns-media-stacked__image col-span-full md:col-span-10\"\n [class.md:col-start-1]=\"direction === 'left'\"\n [class.md:col-start-3]=\"direction === 'right'\"\n scrollReveal\n from=\"bottom\"\n distance=\"64px\"\n duration=\"0.8s\"\n [delay]=\"180\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n >\n @if (image.publicId) {\n <ui-image [publicId]=\"image.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n } @else {\n <img [src]=\"image.url\" [alt]=\"image.alt\" class=\"media-intro-img\" loading=\"eager\" />\n }\n </div>\n }\n</div>\n",
|
|
34
34
|
styles: [""],
|
|
35
35
|
dependencies: [
|
|
36
36
|
{
|
|
@@ -41,7 +41,14 @@ var ColumnsMediaStackedComponent = class ColumnsMediaStackedComponent {
|
|
|
41
41
|
kind: "directive",
|
|
42
42
|
type: ScrollRevealDirective,
|
|
43
43
|
selector: "[scrollReveal]",
|
|
44
|
-
inputs: [
|
|
44
|
+
inputs: [
|
|
45
|
+
"distance",
|
|
46
|
+
"duration",
|
|
47
|
+
"from",
|
|
48
|
+
"delay",
|
|
49
|
+
"threshold",
|
|
50
|
+
"rootMargin"
|
|
51
|
+
]
|
|
45
52
|
},
|
|
46
53
|
{
|
|
47
54
|
kind: "component",
|
|
@@ -76,7 +83,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
76
83
|
],
|
|
77
84
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
78
85
|
host: { style: "display: contents" },
|
|
79
|
-
template: "<div class=\"columns-media-stacked main-grid col-span-full\"
|
|
86
|
+
template: "<div class=\"columns-media-stacked main-grid col-span-full\">\n <div class=\"columns-media-stacked__content main-grid col-span-full\">\n @if(leftColumn) {\n <p \n class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n [class.md:col-start-1]=\"direction === 'left'\"\n [class.md:col-start-5]=\"direction === 'right'\"\n [innerHTML]=\"leftColumn\"\n scrollReveal\n from=\"left\"\n distance=\"48px\"\n duration=\"0.7s\"\n [delay]=\"0\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n > \n </p>\n }\n @if(rightColumn) {\n <p \n class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n [class.md:col-start-5]=\"direction === 'left'\"\n [class.md:col-start-9]=\"direction === 'right'\"\n [innerHTML]=\"rightColumn\"\n scrollReveal\n from=\"right\"\n distance=\"48px\"\n duration=\"0.7s\"\n [delay]=\"120\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n > \n </p>\n }\n </div>\n @if(image) {\n <div \n class=\"columns-media-stacked__image col-span-full md:col-span-10\"\n [class.md:col-start-1]=\"direction === 'left'\"\n [class.md:col-start-3]=\"direction === 'right'\"\n scrollReveal\n from=\"bottom\"\n distance=\"64px\"\n duration=\"0.8s\"\n [delay]=\"180\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n >\n @if (image.publicId) {\n <ui-image [publicId]=\"image.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n } @else {\n <img [src]=\"image.url\" [alt]=\"image.alt\" class=\"media-intro-img\" loading=\"eager\" />\n }\n </div>\n }\n</div>\n"
|
|
80
87
|
}]
|
|
81
88
|
}],
|
|
82
89
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lluc_llull-ui-lib-content-columns-media-stacked.mjs","names":[],"sources":["../../../projects/ui-lib/content/columns-media-stacked/columns-media-stacked.component.ts","../../../projects/ui-lib/content/columns-media-stacked/columns-media-stacked.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n selector: 'lib-columns-media-stacked',\n imports: [CommonModule, ScrollRevealDirective, UiImageComponent],\n templateUrl: './columns-media-stacked.component.html',\n styleUrl: './columns-media-stacked.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n style: 'display: contents',\n },\n})\nexport class ColumnsMediaStackedComponent {\n @Input() leftColumn?: string;\n @Input() rightColumn?: string;\n @Input() direction: 'left' | 'right' = 'right';\n @Input() image?: UiLibImageI;\n}\n","<div class=\"columns-media-stacked main-grid col-span-full\"
|
|
1
|
+
{"version":3,"file":"lluc_llull-ui-lib-content-columns-media-stacked.mjs","names":[],"sources":["../../../projects/ui-lib/content/columns-media-stacked/columns-media-stacked.component.ts","../../../projects/ui-lib/content/columns-media-stacked/columns-media-stacked.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n selector: 'lib-columns-media-stacked',\n imports: [CommonModule, ScrollRevealDirective, UiImageComponent],\n templateUrl: './columns-media-stacked.component.html',\n styleUrl: './columns-media-stacked.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n style: 'display: contents',\n },\n})\nexport class ColumnsMediaStackedComponent {\n @Input() leftColumn?: string;\n @Input() rightColumn?: string;\n @Input() direction: 'left' | 'right' = 'right';\n @Input() image?: UiLibImageI;\n}\n","<div class=\"columns-media-stacked main-grid col-span-full\">\n <div class=\"columns-media-stacked__content main-grid col-span-full\">\n @if(leftColumn) {\n <p \n class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n [class.md:col-start-1]=\"direction === 'left'\"\n [class.md:col-start-5]=\"direction === 'right'\"\n [innerHTML]=\"leftColumn\"\n scrollReveal\n from=\"left\"\n distance=\"48px\"\n duration=\"0.7s\"\n [delay]=\"0\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n > \n </p>\n }\n @if(rightColumn) {\n <p \n class=\"columns-media-stacked__content-column col-span-full md:col-span-4\"\n [class.md:col-start-5]=\"direction === 'left'\"\n [class.md:col-start-9]=\"direction === 'right'\"\n [innerHTML]=\"rightColumn\"\n scrollReveal\n from=\"right\"\n distance=\"48px\"\n duration=\"0.7s\"\n [delay]=\"120\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n > \n </p>\n }\n </div>\n @if(image) {\n <div \n class=\"columns-media-stacked__image col-span-full md:col-span-10\"\n [class.md:col-start-1]=\"direction === 'left'\"\n [class.md:col-start-3]=\"direction === 'right'\"\n scrollReveal\n from=\"bottom\"\n distance=\"64px\"\n duration=\"0.8s\"\n [delay]=\"180\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n >\n @if (image.publicId) {\n <ui-image [publicId]=\"image.publicId\" [eager]=\"true\" class=\"media-intro-img\"></ui-image>\n } @else {\n <img [src]=\"image.url\" [alt]=\"image.alt\" class=\"media-intro-img\" loading=\"eager\" />\n }\n </div>\n }\n</div>\n"],"mappings":";;;;;AAgBA,IAAa,+BAAb,MAAa,6BAA4B;CAC9B;CACA;CACA,YAA8B;CAC9B;CAJE,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAA4B,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAA5B,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAA4B,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,YAAA;GAAA,aAAA;GAAA,WAAA;GAAA,OAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UChBzC;EAwDA,QAAA,CAAA,EAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDhDY;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQpD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAA4B,YAAA,CAAA;EAVxC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAA2B,SAC5B;IAAC;IAAc;IAAuB;GAAgB;GAAC,iBAG/C,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;EAAA,CAAA;;;E,eAGA,MAAA,M;E,gBACA,MAAA,M;E,cACA,MAAA,M;E,UACA,MAAA,M"}
|
|
@@ -9,6 +9,8 @@ var ContactMinimalComponent = class ContactMinimalComponent {
|
|
|
9
9
|
contacts;
|
|
10
10
|
socials;
|
|
11
11
|
img;
|
|
12
|
+
highlightColor = "var(--content-highlight)";
|
|
13
|
+
highlightThickness = 30;
|
|
12
14
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
13
15
|
minVersion: "12.0.0",
|
|
14
16
|
version: "22.2.4",
|
|
@@ -28,11 +30,13 @@ var ContactMinimalComponent = class ContactMinimalComponent {
|
|
|
28
30
|
socialsTitle: "socialsTitle",
|
|
29
31
|
contacts: "contacts",
|
|
30
32
|
socials: "socials",
|
|
31
|
-
img: "img"
|
|
33
|
+
img: "img",
|
|
34
|
+
highlightColor: "highlightColor",
|
|
35
|
+
highlightThickness: "highlightThickness"
|
|
32
36
|
},
|
|
33
37
|
host: { styleAttribute: "display: contents" },
|
|
34
38
|
ngImport: i0,
|
|
35
|
-
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]=\"
|
|
39
|
+
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]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ 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]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ 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",
|
|
36
40
|
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"],
|
|
37
41
|
dependencies: [
|
|
38
42
|
{
|
|
@@ -56,7 +60,14 @@ var ContactMinimalComponent = class ContactMinimalComponent {
|
|
|
56
60
|
kind: "directive",
|
|
57
61
|
type: ScrollRevealDirective,
|
|
58
62
|
selector: "[scrollReveal]",
|
|
59
|
-
inputs: [
|
|
63
|
+
inputs: [
|
|
64
|
+
"distance",
|
|
65
|
+
"duration",
|
|
66
|
+
"from",
|
|
67
|
+
"delay",
|
|
68
|
+
"threshold",
|
|
69
|
+
"rootMargin"
|
|
70
|
+
]
|
|
60
71
|
},
|
|
61
72
|
{
|
|
62
73
|
kind: "component",
|
|
@@ -93,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
93
104
|
],
|
|
94
105
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
95
106
|
host: { style: "display: contents" },
|
|
96
|
-
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]=\"
|
|
107
|
+
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]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ 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]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ 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",
|
|
97
108
|
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"]
|
|
98
109
|
}]
|
|
99
110
|
}],
|
|
@@ -102,7 +113,9 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
102
113
|
socialsTitle: [{ type: Input }],
|
|
103
114
|
contacts: [{ type: Input }],
|
|
104
115
|
socials: [{ type: Input }],
|
|
105
|
-
img: [{ type: Input }]
|
|
116
|
+
img: [{ type: Input }],
|
|
117
|
+
highlightColor: [{ type: Input }],
|
|
118
|
+
highlightThickness: [{ type: Input }]
|
|
106
119
|
}
|
|
107
120
|
});
|
|
108
121
|
export { ContactMinimalComponent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lluc_llull-ui-lib-content-contact-minimal.mjs","names":[],"sources":["../../../projects/ui-lib/content/contact-minimal/contact-minimal.component.ts","../../../projects/ui-lib/content/contact-minimal/contact-minimal.component.html"],"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]=\"
|
|
1
|
+
{"version":3,"file":"lluc_llull-ui-lib-content-contact-minimal.mjs","names":[],"sources":["../../../projects/ui-lib/content/contact-minimal/contact-minimal.component.ts","../../../projects/ui-lib/content/contact-minimal/contact-minimal.component.html"],"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 @Input() highlightColor = 'var(--content-highlight)';\n @Input() highlightThickness = 30;\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]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ 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]=\"highlightColor\" [highlightThickness]=\"highlightThickness\">{{ 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"],"mappings":";;;;;AAoBA,IAAa,0BAAb,MAAa,wBAAuB;CACvB;CACA;CACA;CACA;CACA;CACA,iBAAiB;CACjB,qBAAqB;CAPrB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAuB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAvB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAuB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,eAAA;GAAA,cAAA;GAAA,UAAA;GAAA,SAAA;GAAA,KAAA;GAAA,gBAAA;GAAA,oBAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UCpBpC;EAgDA,QAAA,CAAA,8uBAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDpCc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAkB,UAAA;IAAA,QAAA,CAAA,aAAA,oBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQ7F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAuB,YAAA,CAAA;EAVnC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAqB,SACtB;IAAC;IAAc;IAAoB;IAAmB;IAAuB;GAAgB;GAAC,iBAGtF,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,8uBAAA;EAAA,CAAA;;;E,kBAGA,MAAA,M;E,iBACA,MAAA,M;E,aACA,MAAA,M;E,YACA,MAAA,M;E,QACA,MAAA,M;E,mBACA,MAAA,M;E,uBACA,MAAA,M"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CommonModule, DOCUMENT } from "@angular/common";
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import { ChangeDetectionStrategy, Component, Inject, Input } from "@angular/core";
|
|
4
|
-
import { LinkTypeDirective
|
|
4
|
+
import { LinkTypeDirective } from "@lluc_llull/ui-lib/directives";
|
|
5
5
|
import { UiIconComponent, UiImageComponent } from "@lluc_llull/ui-lib/shared";
|
|
6
6
|
var HeroSectionComponent = class HeroSectionComponent {
|
|
7
7
|
document;
|
|
@@ -48,8 +48,8 @@ var HeroSectionComponent = class HeroSectionComponent {
|
|
|
48
48
|
},
|
|
49
49
|
host: { styleAttribute: "display: contents" },
|
|
50
50
|
ngImport: i0,
|
|
51
|
-
template: "<div\n class=\"hero-section col-span-full\"\n [class.hero-section--text]=\"variant === 'text'\"\n [class.hero-section--image]=\"variant === 'image'\"\n
|
|
52
|
-
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-base);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"],
|
|
51
|
+
template: "<div\n class=\"hero-section col-span-full\"\n [class.hero-section--text]=\"variant === 'text'\"\n [class.hero-section--image]=\"variant === 'image'\"\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",
|
|
52
|
+
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__content>*{animation:hero-content-fall 1.1s cubic-bezier(.22,1,.36,1) both}.hero-section__content>:nth-last-child(1){animation-delay:0ms}.hero-section__content>:nth-last-child(2){animation-delay:.18s}.hero-section__content>:nth-last-child(3){animation-delay:.36s}.hero-section__content>:nth-last-child(4){animation-delay:.54s}.hero-section__content>:nth-last-child(5){animation-delay:.72s}.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-base);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%}}@keyframes hero-content-fall{0%{opacity:0;transform:translateY(-6rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.hero-section__content>*{animation:none;opacity:1;transform:none}}\n"],
|
|
53
53
|
dependencies: [
|
|
54
54
|
{
|
|
55
55
|
kind: "ngmodule",
|
|
@@ -84,12 +84,6 @@ var HeroSectionComponent = class HeroSectionComponent {
|
|
|
84
84
|
"width",
|
|
85
85
|
"height"
|
|
86
86
|
]
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
kind: "directive",
|
|
90
|
-
type: ScrollRevealDirective,
|
|
91
|
-
selector: "[scrollReveal]",
|
|
92
|
-
inputs: ["distance", "duration"]
|
|
93
87
|
}
|
|
94
88
|
],
|
|
95
89
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
@@ -109,13 +103,12 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
109
103
|
CommonModule,
|
|
110
104
|
LinkTypeDirective,
|
|
111
105
|
UiIconComponent,
|
|
112
|
-
UiImageComponent
|
|
113
|
-
ScrollRevealDirective
|
|
106
|
+
UiImageComponent
|
|
114
107
|
],
|
|
115
108
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
116
109
|
host: { style: "display: contents" },
|
|
117
|
-
template: "<div\n class=\"hero-section col-span-full\"\n [class.hero-section--text]=\"variant === 'text'\"\n [class.hero-section--image]=\"variant === 'image'\"\n
|
|
118
|
-
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-base);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"]
|
|
110
|
+
template: "<div\n class=\"hero-section col-span-full\"\n [class.hero-section--text]=\"variant === 'text'\"\n [class.hero-section--image]=\"variant === 'image'\"\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",
|
|
111
|
+
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__content>*{animation:hero-content-fall 1.1s cubic-bezier(.22,1,.36,1) both}.hero-section__content>:nth-last-child(1){animation-delay:0ms}.hero-section__content>:nth-last-child(2){animation-delay:.18s}.hero-section__content>:nth-last-child(3){animation-delay:.36s}.hero-section__content>:nth-last-child(4){animation-delay:.54s}.hero-section__content>:nth-last-child(5){animation-delay:.72s}.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-base);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%}}@keyframes hero-content-fall{0%{opacity:0;transform:translateY(-6rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.hero-section__content>*{animation:none;opacity:1;transform:none}}\n"]
|
|
119
112
|
}]
|
|
120
113
|
}],
|
|
121
114
|
ctorParameters: () => [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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
|
|
1
|
+
{"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 } 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],\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>\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;EA+DA,QAAA,CAAA,kxHAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MD/Cc;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;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQnE,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;GAAgB;GAAC,iBAG5D,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,kxHAAA;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"}
|
|
@@ -30,7 +30,7 @@ var MediaIntroComponent = class MediaIntroComponent {
|
|
|
30
30
|
},
|
|
31
31
|
host: { styleAttribute: "display: contents" },
|
|
32
32
|
ngImport: i0,
|
|
33
|
-
template: "<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\"
|
|
33
|
+
template: "<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\">\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 scrollReveal\n [from]=\"direction === 'left' ? 'left' : 'right'\"\n distance=\"48px\"\n duration=\"0.7s\"\n [delay]=\"0\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\">\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 scrollReveal\n [from]=\"direction === 'left' ? 'right' : 'left'\"\n distance=\"48px\"\n duration=\"0.7s\"\n [delay]=\"120\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n ></p>\n </div>\n }\n </div>\n @if(media) {\n <div\n class=\"media-intro__media col-span-full md:col-span-12 md:col-start-1\"\n scrollReveal\n from=\"bottom\"\n distance=\"64px\"\n duration=\"0.8s\"\n [delay]=\"180\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n >\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",
|
|
34
34
|
styles: [".media-intro__content--left,.media-intro__content--right{padding-block:0!important}\n"],
|
|
35
35
|
dependencies: [
|
|
36
36
|
{
|
|
@@ -41,7 +41,14 @@ var MediaIntroComponent = class MediaIntroComponent {
|
|
|
41
41
|
kind: "directive",
|
|
42
42
|
type: ScrollRevealDirective,
|
|
43
43
|
selector: "[scrollReveal]",
|
|
44
|
-
inputs: [
|
|
44
|
+
inputs: [
|
|
45
|
+
"distance",
|
|
46
|
+
"duration",
|
|
47
|
+
"from",
|
|
48
|
+
"delay",
|
|
49
|
+
"threshold",
|
|
50
|
+
"rootMargin"
|
|
51
|
+
]
|
|
45
52
|
},
|
|
46
53
|
{
|
|
47
54
|
kind: "component",
|
|
@@ -76,7 +83,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
76
83
|
],
|
|
77
84
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
78
85
|
host: { style: "display: contents" },
|
|
79
|
-
template: "<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\"
|
|
86
|
+
template: "<div class=\"media-intro main-grid col-span-full md:col-span-12 md:col-start-1\">\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 scrollReveal\n [from]=\"direction === 'left' ? 'left' : 'right'\"\n distance=\"48px\"\n duration=\"0.7s\"\n [delay]=\"0\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\">\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 scrollReveal\n [from]=\"direction === 'left' ? 'right' : 'left'\"\n distance=\"48px\"\n duration=\"0.7s\"\n [delay]=\"120\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n ></p>\n </div>\n }\n </div>\n @if(media) {\n <div\n class=\"media-intro__media col-span-full md:col-span-12 md:col-start-1\"\n scrollReveal\n from=\"bottom\"\n distance=\"64px\"\n duration=\"0.8s\"\n [delay]=\"180\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n >\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",
|
|
80
87
|
styles: [".media-intro__content--left,.media-intro__content--right{padding-block:0!important}\n"]
|
|
81
88
|
}]
|
|
82
89
|
}],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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\"
|
|
1
|
+
{"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\">\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 scrollReveal\n [from]=\"direction === 'left' ? 'left' : 'right'\"\n distance=\"48px\"\n duration=\"0.7s\"\n [delay]=\"0\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\">\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 scrollReveal\n [from]=\"direction === 'left' ? 'right' : 'left'\"\n distance=\"48px\"\n duration=\"0.7s\"\n [delay]=\"120\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n ></p>\n </div>\n }\n </div>\n @if(media) {\n <div\n class=\"media-intro__media col-span-full md:col-span-12 md:col-start-1\"\n scrollReveal\n from=\"bottom\"\n distance=\"64px\"\n duration=\"0.8s\"\n [delay]=\"180\"\n [threshold]=\"0\"\n rootMargin=\"0px 0px -20% 0px\"\n >\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;EAsDA,QAAA,CAAA,uFAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MD9CY;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;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"}
|