@lluc_llull/ui-lib 0.20.0 → 0.22.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/directives/index.d.ts +1 -0
- package/directives/scroll-reveal.directive.d.ts +14 -0
- package/fesm2022/lluc_llull-ui-lib-content.mjs +11 -11
- package/fesm2022/lluc_llull-ui-lib-content.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-directives.mjs +46 -1
- package/fesm2022/lluc_llull-ui-lib-directives.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/styles/main.css +222 -8
- package/styles/main.css +222 -8
package/directives/index.d.ts
CHANGED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ElementRef, OnInit, Renderer2 } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class ScrollRevealDirective implements OnInit {
|
|
4
|
+
private el;
|
|
5
|
+
private renderer;
|
|
6
|
+
distance: string;
|
|
7
|
+
duration: string;
|
|
8
|
+
constructor(el: ElementRef, renderer: Renderer2);
|
|
9
|
+
ngOnInit(): void;
|
|
10
|
+
private setupInitialStyles;
|
|
11
|
+
private reveal;
|
|
12
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ScrollRevealDirective, never>;
|
|
13
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ScrollRevealDirective, "[scrollReveal]", never, { "distance": { "alias": "distance"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; }, {}, never, never, true, never>;
|
|
14
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { Input, ChangeDetectionStrategy, Component, signal } from '@angular/core';
|
|
4
|
-
import { HighlightDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';
|
|
4
|
+
import { HighlightDirective, ScrollRevealDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';
|
|
5
5
|
import { UiIconComponent } from '@lluc_llull/ui-lib/shared';
|
|
6
6
|
import { LinkType } from '@lluc_llull/ui-lib/enums';
|
|
7
7
|
|
|
@@ -10,11 +10,11 @@ class CategoryProgressComponent {
|
|
|
10
10
|
title;
|
|
11
11
|
categories;
|
|
12
12
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CategoryProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
-
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" }, ngImport: i0, template: "<div class=\"category-progress
|
|
13
|
+
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" }, ngImport: i0, template: "<div class=\"category-progress col-span-8 col-start-3\" 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: [":host{display:contents}.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 });
|
|
14
14
|
}
|
|
15
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CategoryProgressComponent, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
|
-
args: [{ selector: 'lib-category-progress', standalone: true, imports: [CommonModule, HighlightDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"category-progress
|
|
17
|
+
args: [{ selector: 'lib-category-progress', standalone: true, imports: [CommonModule, HighlightDirective, ScrollRevealDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"category-progress col-span-8 col-start-3\" 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: [":host{display:contents}.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"] }]
|
|
18
18
|
}], propDecorators: { pretitle: [{
|
|
19
19
|
type: Input
|
|
20
20
|
}], title: [{
|
|
@@ -31,11 +31,11 @@ class HeroSectionComponent {
|
|
|
31
31
|
buttons;
|
|
32
32
|
highlight;
|
|
33
33
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: HeroSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: HeroSectionComponent, isStandalone: true, selector: "lib-hero-section", inputs: { pretitle: "pretitle", title: "title", subtitle: "subtitle", text: "text", buttons: "buttons", highlight: "highlight" }, ngImport: i0, template: "<div class=\"hero-section\">\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", styles: [":host{display:
|
|
34
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: HeroSectionComponent, isStandalone: true, selector: "lib-hero-section", inputs: { pretitle: "pretitle", title: "title", subtitle: "subtitle", text: "text", buttons: "buttons", highlight: "highlight" }, ngImport: i0, template: "<div class=\"hero-section md:col-span-full\" scrollReveal>\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", styles: [":host{display:contents}.hero-section{align-items:center;text-align:center;padding:2rem;min-height:calc(100vh - 10rem);align-content:center}.text,.btn-link{font-size:1.3rem}@media (max-width: 768px){.text,.btn-link{font-size:1.1rem}}.title{font-size:4rem;font-family:var(--font-title-home);font-weight:200;display:flex;flex-direction:column;align-items:center;line-height:.85}@media (max-width: 768px){.title{font-size:3rem}}.title .highlight-text{font-size:11.25rem;cursor:help;display:block;position:relative;z-index:99;width:fit-content}@media (max-width: 768px){.title .highlight-text{font-size:8.25rem}}.title .highlight-text .wave-wrapper{position:absolute;top:85%;left:0;width:100%;height:50px;z-index:-1}@media (max-width: 768px){.title .highlight-text .wave-wrapper{top:90%}}.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;background-position-x:0;background-position-y:0;top:-1.2rem;opacity:.5;width:100%;height:50%}@media (max-width: 768px){.title .highlight-text .wave{width:70%;left:50%;transform:translate(-50%)}}.title .highlight-text:hover .wave{animation:moveWave 5s infinite linear}@media (max-width: 768px){.title .highlight-text{display:block;margin-top:.5rem}}@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: "directive", type: ScrollRevealDirective, selector: "[scrollReveal]", inputs: ["distance", "duration"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35
35
|
}
|
|
36
36
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: HeroSectionComponent, decorators: [{
|
|
37
37
|
type: Component,
|
|
38
|
-
args: [{ selector: 'lib-hero-section', standalone: true, imports: [CommonModule, LinkTypeDirective, UiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"hero-section\">\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", styles: [":host{display:
|
|
38
|
+
args: [{ selector: 'lib-hero-section', standalone: true, imports: [CommonModule, LinkTypeDirective, UiIconComponent, ScrollRevealDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"hero-section md:col-span-full\" scrollReveal>\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", styles: [":host{display:contents}.hero-section{align-items:center;text-align:center;padding:2rem;min-height:calc(100vh - 10rem);align-content:center}.text,.btn-link{font-size:1.3rem}@media (max-width: 768px){.text,.btn-link{font-size:1.1rem}}.title{font-size:4rem;font-family:var(--font-title-home);font-weight:200;display:flex;flex-direction:column;align-items:center;line-height:.85}@media (max-width: 768px){.title{font-size:3rem}}.title .highlight-text{font-size:11.25rem;cursor:help;display:block;position:relative;z-index:99;width:fit-content}@media (max-width: 768px){.title .highlight-text{font-size:8.25rem}}.title .highlight-text .wave-wrapper{position:absolute;top:85%;left:0;width:100%;height:50px;z-index:-1}@media (max-width: 768px){.title .highlight-text .wave-wrapper{top:90%}}.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;background-position-x:0;background-position-y:0;top:-1.2rem;opacity:.5;width:100%;height:50%}@media (max-width: 768px){.title .highlight-text .wave{width:70%;left:50%;transform:translate(-50%)}}.title .highlight-text:hover .wave{animation:moveWave 5s infinite linear}@media (max-width: 768px){.title .highlight-text{display:block;margin-top:.5rem}}@keyframes moveWave{0%{background-position-x:0}to{background-position-x:100%}}\n"] }]
|
|
39
39
|
}], propDecorators: { pretitle: [{
|
|
40
40
|
type: Input
|
|
41
41
|
}], title: [{
|
|
@@ -80,11 +80,11 @@ class SectionIntroComponent {
|
|
|
80
80
|
text;
|
|
81
81
|
button;
|
|
82
82
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SectionIntroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
83
|
-
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" }, ngImport: i0, template: "<div class=\"section-intro
|
|
83
|
+
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" }, ngImport: i0, template: "<div class=\"section-intro col-span-8 col-start-3\" 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: [":host{display:contents}.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 });
|
|
84
84
|
}
|
|
85
85
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SectionIntroComponent, decorators: [{
|
|
86
86
|
type: Component,
|
|
87
|
-
args: [{ selector: 'lib-section-intro', standalone: true, imports: [CommonModule, LinkTypeDirective, UiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"section-intro
|
|
87
|
+
args: [{ selector: 'lib-section-intro', standalone: true, imports: [CommonModule, LinkTypeDirective, UiIconComponent, ScrollRevealDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"section-intro col-span-8 col-start-3\" 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: [":host{display:contents}.section-intro{text-align:start;align-items:start}.title,.subtitle{text-transform:uppercase}\n"] }]
|
|
88
88
|
}], propDecorators: { pretitle: [{
|
|
89
89
|
type: Input
|
|
90
90
|
}], title: [{
|
|
@@ -107,11 +107,11 @@ class SplitPreviewerComponent {
|
|
|
107
107
|
return this.items?.length || 0;
|
|
108
108
|
}
|
|
109
109
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SplitPreviewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
110
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SplitPreviewerComponent, isStandalone: true, selector: "lib-split-previewer", inputs: { title: "title", items: "items", imageDefault: "imageDefault", direction: "direction" }, ngImport: i0, template: "<div class=\"split-previewer
|
|
110
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SplitPreviewerComponent, isStandalone: true, selector: "lib-split-previewer", inputs: { title: "title", items: "items", imageDefault: "imageDefault", direction: "direction" }, ngImport: i0, template: "<div class=\"split-previewer col-span-8 col-start-3\" [class]=\"'split-previewer--' + direction\" scrollReveal>\n <div class=\"split-previewer__text-column\">\n <div class=\"split-previewer__header\">\n @if (title) {\n <h1 class=\"title\">{{ title }}</h1>\n }\n @if (count) {\n <span class=\"count\">{{ count }}</span>\n }\n </div>\n\n <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n @for (item of items; track item.title) {\n <a\n [href]=\"item.link?.url\"\n (mouseenter)=\"activeImage.set(item.image?.url)\"\n class=\"split-previewer__item-link\"\n >\n <div class=\"split-previewer__item\">\n <h2 class=\"split-previewer__item-title\" [highlight]=\"'#FFFFFF'\">{{ item.title }}</h2>\n <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n @if (item.tags?.length) {\n <div class=\"split-previewer__item-tags\">\n @for (tag of item.tags; track tag) {\n <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n }\n </div>\n }\n </div>\n </a>\n }\n </div>\n </div>\n\n <div class=\"split-previewer__media\">\n <img [src]=\"activeImage() || imageDefault?.url\" alt=\"Preview\" class=\"preview-img\" />\n </div>\n</div>\n", styles: [":host{display:contents}.split-previewer{display:flex;gap:5rem;align-items:start}.split-previewer--left{flex-direction:row-reverse}.split-previewer--right{flex-direction:row}.split-previewer__text-column{flex:1;display:flex;flex-direction:column}.split-previewer__header{display:flex;justify-content:space-between;align-items:baseline}.split-previewer__header .title{margin:0 0 1rem;text-transform:uppercase}.split-previewer__header .count{font-family:var(--font-base);font-size:1rem;font-weight:500}.split-previewer__items{display:flex;flex-direction:column}.split-previewer__item-link{text-decoration:none;color:inherit;display:block}.split-previewer__item{transition:all .4s cubic-bezier(.25,.46,.45,.94)}.split-previewer__item-title{margin-bottom:.5rem;display:inline-block}.split-previewer__item-text{line-height:1.6;max-width:500px;opacity:.8}.split-previewer__item-tags{display:flex;gap:1rem;margin-block:1rem;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.split-previewer__item-tag{font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:.3rem .8rem;background-color:var(--tag-bg);color:var(--tag-color);border-radius:2px}.split-previewer__item-link:hover .split-previewer__item{padding-left:1rem}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:1;transform:translateY(0)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:1}.split-previewer__media{flex:1;position:sticky;top:4rem;height:fit-content;display:flex;justify-content:center;align-items:center;overflow:hidden}.split-previewer__media .preview-img{width:75%;height:auto;object-fit:contain;animation:fadeInMedia .5s ease-out;filter:contrast(1.1) grayscale(.2)}@media (max-width: 1280px){.split-previewer{gap:3rem}}@media (max-width: 1024px){.split-previewer__media{display:none}}@keyframes fadeInMedia{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: HighlightDirective, selector: "[highlight]", inputs: ["highlight", "highlightThickness"] }, { kind: "directive", type: ScrollRevealDirective, selector: "[scrollReveal]", inputs: ["distance", "duration"] }] });
|
|
111
111
|
}
|
|
112
112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SplitPreviewerComponent, decorators: [{
|
|
113
113
|
type: Component,
|
|
114
|
-
args: [{ selector: 'lib-split-previewer', imports: [CommonModule, LinkTypeDirective, HighlightDirective], template: "<div class=\"split-previewer
|
|
114
|
+
args: [{ selector: 'lib-split-previewer', imports: [CommonModule, LinkTypeDirective, HighlightDirective, ScrollRevealDirective], template: "<div class=\"split-previewer col-span-8 col-start-3\" [class]=\"'split-previewer--' + direction\" scrollReveal>\n <div class=\"split-previewer__text-column\">\n <div class=\"split-previewer__header\">\n @if (title) {\n <h1 class=\"title\">{{ title }}</h1>\n }\n @if (count) {\n <span class=\"count\">{{ count }}</span>\n }\n </div>\n\n <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n @for (item of items; track item.title) {\n <a\n [href]=\"item.link?.url\"\n (mouseenter)=\"activeImage.set(item.image?.url)\"\n class=\"split-previewer__item-link\"\n >\n <div class=\"split-previewer__item\">\n <h2 class=\"split-previewer__item-title\" [highlight]=\"'#FFFFFF'\">{{ item.title }}</h2>\n <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n @if (item.tags?.length) {\n <div class=\"split-previewer__item-tags\">\n @for (tag of item.tags; track tag) {\n <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n }\n </div>\n }\n </div>\n </a>\n }\n </div>\n </div>\n\n <div class=\"split-previewer__media\">\n <img [src]=\"activeImage() || imageDefault?.url\" alt=\"Preview\" class=\"preview-img\" />\n </div>\n</div>\n", styles: [":host{display:contents}.split-previewer{display:flex;gap:5rem;align-items:start}.split-previewer--left{flex-direction:row-reverse}.split-previewer--right{flex-direction:row}.split-previewer__text-column{flex:1;display:flex;flex-direction:column}.split-previewer__header{display:flex;justify-content:space-between;align-items:baseline}.split-previewer__header .title{margin:0 0 1rem;text-transform:uppercase}.split-previewer__header .count{font-family:var(--font-base);font-size:1rem;font-weight:500}.split-previewer__items{display:flex;flex-direction:column}.split-previewer__item-link{text-decoration:none;color:inherit;display:block}.split-previewer__item{transition:all .4s cubic-bezier(.25,.46,.45,.94)}.split-previewer__item-title{margin-bottom:.5rem;display:inline-block}.split-previewer__item-text{line-height:1.6;max-width:500px;opacity:.8}.split-previewer__item-tags{display:flex;gap:1rem;margin-block:1rem;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.split-previewer__item-tag{font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:.3rem .8rem;background-color:var(--tag-bg);color:var(--tag-color);border-radius:2px}.split-previewer__item-link:hover .split-previewer__item{padding-left:1rem}.split-previewer__item-link:hover .split-previewer__item-tags{opacity:1;transform:translateY(0)}.split-previewer__item-link:hover .split-previewer__item-text{opacity:1}.split-previewer__media{flex:1;position:sticky;top:4rem;height:fit-content;display:flex;justify-content:center;align-items:center;overflow:hidden}.split-previewer__media .preview-img{width:75%;height:auto;object-fit:contain;animation:fadeInMedia .5s ease-out;filter:contrast(1.1) grayscale(.2)}@media (max-width: 1280px){.split-previewer{gap:3rem}}@media (max-width: 1024px){.split-previewer__media{display:none}}@keyframes fadeInMedia{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}\n"] }]
|
|
115
115
|
}], propDecorators: { title: [{
|
|
116
116
|
type: Input
|
|
117
117
|
}], items: [{
|
|
@@ -129,11 +129,11 @@ class ContactMinimalComponent {
|
|
|
129
129
|
socials;
|
|
130
130
|
img;
|
|
131
131
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ContactMinimalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
132
|
-
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" }, ngImport: i0, template: "<div class=\"contact-minimal
|
|
132
|
+
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" }, ngImport: i0, template: "<div class=\"contact-minimal col-span-8 col-start-3\" scrollReveal>\n <div class=\"contact-minimal__content\">\n <div class=\"contact-minimal__content--left\">\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\">\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 @if (img) {\n <div class=\"contact-minimal__content--media\">\n <img [src]=\"img.url\" [alt]=\"img.alt\" />\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:contents}.contact-minimal__content{display:grid;grid-auto-flow:column;justify-content:space-between}.contact-minimal__content--media{width:10rem;height:auto;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width: 768px){.contact-minimal__content--media{width:8rem;top:70%}}.contact-minimal .btn-group{display:flex;flex-direction:column;margin-top:0;gap:0}.contact-minimal .btn{justify-content:start}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
133
133
|
}
|
|
134
134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ContactMinimalComponent, decorators: [{
|
|
135
135
|
type: Component,
|
|
136
|
-
args: [{ selector: 'lib-contact-minimal', imports: [CommonModule, HighlightDirective, LinkTypeDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contact-minimal
|
|
136
|
+
args: [{ selector: 'lib-contact-minimal', imports: [CommonModule, HighlightDirective, LinkTypeDirective, ScrollRevealDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contact-minimal col-span-8 col-start-3\" scrollReveal>\n <div class=\"contact-minimal__content\">\n <div class=\"contact-minimal__content--left\">\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\">\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 @if (img) {\n <div class=\"contact-minimal__content--media\">\n <img [src]=\"img.url\" [alt]=\"img.alt\" />\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:contents}.contact-minimal__content{display:grid;grid-auto-flow:column;justify-content:space-between}.contact-minimal__content--media{width:10rem;height:auto;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width: 768px){.contact-minimal__content--media{width:8rem;top:70%}}.contact-minimal .btn-group{display:flex;flex-direction:column;margin-top:0;gap:0}.contact-minimal .btn{justify-content:start}\n"] }]
|
|
137
137
|
}], propDecorators: { contactsTitle: [{
|
|
138
138
|
type: Input
|
|
139
139
|
}], socialsTitle: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lluc_llull-ui-lib-content.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/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/section-intro/section-intro.component.ts","../../../projects/ui-lib/content/section-intro/section-intro.component.html","../../../projects/ui-lib/content/split-previewer/split-previewer.component.ts","../../../projects/ui-lib/content/split-previewer/split-previewer.component.html","../../../projects/ui-lib/content/contact-minimal/contact-minimal.component.ts","../../../projects/ui-lib/content/contact-minimal/contact-minimal.component.html","../../../projects/ui-lib/content/lluc_llull-ui-lib-content.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { HighlightDirective } from '@lluc_llull/ui-lib/directives';\n\n@Component({\n selector: 'lib-category-progress',\n standalone: true,\n imports: [CommonModule, HighlightDirective],\n templateUrl: './category-progress.component.html',\n styleUrl: './category-progress.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\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 layout-padding\">\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","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { LinkTypeDirective } 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-hero-section',\n standalone: true,\n imports: [CommonModule, LinkTypeDirective, UiIconComponent],\n templateUrl: './hero-section.component.html',\n styleUrl: './hero-section.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeroSectionComponent {\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}\n","<div class=\"hero-section\">\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","import { Meta, StoryObj } from '@storybook/angular';\nimport { LinkType } from \"@lluc_llull/ui-lib/enums\";\nimport { HeroSectionComponent } from './hero-section.component';\n\nexport default {\n title: 'Core/Content/HeroSection',\n component: HeroSectionComponent,\n tags: ['autodocs'],\n argTypes: {\n title: { control: 'text' },\n subtitle: { control: 'text' },\n text: { control: 'text' },\n buttons: { control: 'object' },\n },\n} as Meta<HeroSectionComponent>;\n\ntype Story = StoryObj<HeroSectionComponent>;\n\nexport const Default: Story = {\n args: {\n title: 'Título de ejemplo',\n subtitle: 'Subtítulo de ejemplo',\n text: 'Texto descriptivo de ejemplo para el Hero Section.',\n buttons: [\n { label: 'Botón 1', url: 'https://www.google.com', linkType: LinkType.External },\n { label: 'Botón 2', url: 'https://www.google.com', linkType: LinkType.External },\n ],\n },\n};\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { LinkTypeDirective } 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],\n templateUrl: './section-intro.component.html',\n styleUrl: './section-intro.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\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 layout-padding\">\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","import { CommonModule } from '@angular/common';\nimport { Component, Input, signal } from '@angular/core';\nimport { HighlightDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibButtonI, UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\n\n@Component({\n selector: 'lib-split-previewer',\n imports: [CommonModule, LinkTypeDirective, HighlightDirective],\n templateUrl: './split-previewer.component.html',\n styleUrl: './split-previewer.component.scss',\n})\nexport class SplitPreviewerComponent {\n @Input() title?: string;\n @Input() items?: SplitPreviewerItemI[];\n @Input() imageDefault?: UiLibImageI;\n @Input() direction: 'left' | 'right' = 'right';\n\n activeImage = signal<string | undefined>(undefined);\n\n get count(): number {\n return this.items?.length || 0;\n }\n}\n\nexport interface SplitPreviewerItemI {\n title?: string;\n type?: string;\n description?: string;\n tags?: string[];\n link?: UiLibButtonI;\n image?: UiLibImageI;\n}\n","<div class=\"split-previewer layout-padding\" [class]=\"'split-previewer--' + direction\">\n <div class=\"split-previewer__text-column\">\n <div class=\"split-previewer__header\">\n @if (title) {\n <h1 class=\"title\">{{ title }}</h1>\n }\n @if (count) {\n <span class=\"count\">{{ count }}</span>\n }\n </div>\n\n <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n @for (item of items; track item.title) {\n <a\n [href]=\"item.link?.url\"\n (mouseenter)=\"activeImage.set(item.image?.url)\"\n class=\"split-previewer__item-link\"\n >\n <div class=\"split-previewer__item\">\n <h2 class=\"split-previewer__item-title\" [highlight]=\"'#FFFFFF'\">{{ item.title }}</h2>\n <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n @if (item.tags?.length) {\n <div class=\"split-previewer__item-tags\">\n @for (tag of item.tags; track tag) {\n <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n }\n </div>\n }\n </div>\n </a>\n }\n </div>\n </div>\n\n <div class=\"split-previewer__media\">\n <img [src]=\"activeImage() || imageDefault?.url\" alt=\"Preview\" class=\"preview-img\" />\n </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { UiLibButtonI, UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { HighlightDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\n\n@Component({\n selector: 'lib-contact-minimal',\n imports: [CommonModule, HighlightDirective, LinkTypeDirective],\n templateUrl: './contact-minimal.component.html',\n styleUrl: './contact-minimal.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\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\n","<div class=\"contact-minimal layout-padding\">\n <div class=\"contact-minimal__content\">\n <div class=\"contact-minimal__content--left\">\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\">\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 @if (img) {\n <div class=\"contact-minimal__content--media\">\n <img [src]=\"img.url\" [alt]=\"img.alt\" />\n </div>\n }\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lluc_llull-ui-lib-content.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/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/section-intro/section-intro.component.ts","../../../projects/ui-lib/content/section-intro/section-intro.component.html","../../../projects/ui-lib/content/split-previewer/split-previewer.component.ts","../../../projects/ui-lib/content/split-previewer/split-previewer.component.html","../../../projects/ui-lib/content/contact-minimal/contact-minimal.component.ts","../../../projects/ui-lib/content/contact-minimal/contact-minimal.component.html","../../../projects/ui-lib/content/lluc_llull-ui-lib-content.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})\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-8 col-start-3\" 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","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-hero-section',\n standalone: true,\n imports: [CommonModule, LinkTypeDirective, UiIconComponent, ScrollRevealDirective],\n templateUrl: './hero-section.component.html',\n styleUrl: './hero-section.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeroSectionComponent {\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}\n","<div class=\"hero-section md:col-span-full\" scrollReveal>\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","import { Meta, StoryObj } from '@storybook/angular';\nimport { LinkType } from \"@lluc_llull/ui-lib/enums\";\nimport { HeroSectionComponent } from './hero-section.component';\n\nexport default {\n title: 'Core/Content/HeroSection',\n component: HeroSectionComponent,\n tags: ['autodocs'],\n argTypes: {\n title: { control: 'text' },\n subtitle: { control: 'text' },\n text: { control: 'text' },\n buttons: { control: 'object' },\n },\n} as Meta<HeroSectionComponent>;\n\ntype Story = StoryObj<HeroSectionComponent>;\n\nexport const Default: Story = {\n args: {\n title: 'Título de ejemplo',\n subtitle: 'Subtítulo de ejemplo',\n text: 'Texto descriptivo de ejemplo para el Hero Section.',\n buttons: [\n { label: 'Botón 1', url: 'https://www.google.com', linkType: LinkType.External },\n { label: 'Botón 2', url: 'https://www.google.com', linkType: LinkType.External },\n ],\n },\n};\n","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})\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-8 col-start-3\" 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","import { CommonModule } from '@angular/common';\nimport { Component, Input, signal } from '@angular/core';\nimport { HighlightDirective, LinkTypeDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibButtonI, UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\n\n@Component({\n selector: 'lib-split-previewer',\n imports: [CommonModule, LinkTypeDirective, HighlightDirective, ScrollRevealDirective],\n templateUrl: './split-previewer.component.html',\n styleUrl: './split-previewer.component.scss',\n})\nexport class SplitPreviewerComponent {\n @Input() title?: string;\n @Input() items?: SplitPreviewerItemI[];\n @Input() imageDefault?: UiLibImageI;\n @Input() direction: 'left' | 'right' = 'right';\n\n activeImage = signal<string | undefined>(undefined);\n\n get count(): number {\n return this.items?.length || 0;\n }\n}\n\nexport interface SplitPreviewerItemI {\n title?: string;\n type?: string;\n description?: string;\n tags?: string[];\n link?: UiLibButtonI;\n image?: UiLibImageI;\n}\n","<div class=\"split-previewer col-span-8 col-start-3\" [class]=\"'split-previewer--' + direction\" scrollReveal>\n <div class=\"split-previewer__text-column\">\n <div class=\"split-previewer__header\">\n @if (title) {\n <h1 class=\"title\">{{ title }}</h1>\n }\n @if (count) {\n <span class=\"count\">{{ count }}</span>\n }\n </div>\n\n <div class=\"split-previewer__items\" (mouseleave)=\"activeImage.set(undefined)\">\n @for (item of items; track item.title) {\n <a\n [href]=\"item.link?.url\"\n (mouseenter)=\"activeImage.set(item.image?.url)\"\n class=\"split-previewer__item-link\"\n >\n <div class=\"split-previewer__item\">\n <h2 class=\"split-previewer__item-title\" [highlight]=\"'#FFFFFF'\">{{ item.title }}</h2>\n <p class=\"split-previewer__item-text\">{{ item.description }}</p>\n @if (item.tags?.length) {\n <div class=\"split-previewer__item-tags\">\n @for (tag of item.tags; track tag) {\n <span class=\"split-previewer__item-tag\">{{ tag }}</span>\n }\n </div>\n }\n </div>\n </a>\n }\n </div>\n </div>\n\n <div class=\"split-previewer__media\">\n <img [src]=\"activeImage() || imageDefault?.url\" alt=\"Preview\" class=\"preview-img\" />\n </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { UiLibButtonI, UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { HighlightDirective, LinkTypeDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\n\n@Component({\n selector: 'lib-contact-minimal',\n imports: [CommonModule, HighlightDirective, LinkTypeDirective, ScrollRevealDirective],\n templateUrl: './contact-minimal.component.html',\n styleUrl: './contact-minimal.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\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\n","<div class=\"contact-minimal col-span-8 col-start-3\" scrollReveal>\n <div class=\"contact-minimal__content\">\n <div class=\"contact-minimal__content--left\">\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\">\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 @if (img) {\n <div class=\"contact-minimal__content--media\">\n <img [src]=\"img.url\" [alt]=\"img.alt\" />\n </div>\n }\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -176,9 +176,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
176
176
|
args: ['style.-webkit-box-decoration-break']
|
|
177
177
|
}] } });
|
|
178
178
|
|
|
179
|
+
class ScrollRevealDirective {
|
|
180
|
+
el;
|
|
181
|
+
renderer;
|
|
182
|
+
distance = '30px';
|
|
183
|
+
duration = '0.8s';
|
|
184
|
+
constructor(el, renderer) {
|
|
185
|
+
this.el = el;
|
|
186
|
+
this.renderer = renderer;
|
|
187
|
+
}
|
|
188
|
+
ngOnInit() {
|
|
189
|
+
this.setupInitialStyles();
|
|
190
|
+
const observer = new IntersectionObserver((entries) => {
|
|
191
|
+
entries.forEach((entry) => {
|
|
192
|
+
if (entry.isIntersecting) {
|
|
193
|
+
this.reveal();
|
|
194
|
+
observer.unobserve(this.el.nativeElement);
|
|
195
|
+
}
|
|
196
|
+
});
|
|
197
|
+
}, { threshold: 0.1 }); // Se dispara cuando el 10% del componente es visible
|
|
198
|
+
observer.observe(this.el.nativeElement);
|
|
199
|
+
}
|
|
200
|
+
setupInitialStyles() {
|
|
201
|
+
this.renderer.setStyle(this.el.nativeElement, 'opacity', '0');
|
|
202
|
+
this.renderer.setStyle(this.el.nativeElement, 'transform', `translateY(-${this.distance})`);
|
|
203
|
+
this.renderer.setStyle(this.el.nativeElement, 'transition', `all ${this.duration} ease-out`);
|
|
204
|
+
}
|
|
205
|
+
reveal() {
|
|
206
|
+
this.renderer.setStyle(this.el.nativeElement, 'opacity', '1');
|
|
207
|
+
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateY(0)');
|
|
208
|
+
}
|
|
209
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ScrollRevealDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
210
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: ScrollRevealDirective, isStandalone: true, selector: "[scrollReveal]", inputs: { distance: "distance", duration: "duration" }, ngImport: i0 });
|
|
211
|
+
}
|
|
212
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ScrollRevealDirective, decorators: [{
|
|
213
|
+
type: Directive,
|
|
214
|
+
args: [{
|
|
215
|
+
selector: '[scrollReveal]',
|
|
216
|
+
standalone: true,
|
|
217
|
+
}]
|
|
218
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { distance: [{
|
|
219
|
+
type: Input
|
|
220
|
+
}], duration: [{
|
|
221
|
+
type: Input
|
|
222
|
+
}] } });
|
|
223
|
+
|
|
179
224
|
/**
|
|
180
225
|
* Generated bundle index. Do not edit.
|
|
181
226
|
*/
|
|
182
227
|
|
|
183
|
-
export { HighlightDirective, LinkTypeDirective };
|
|
228
|
+
export { HighlightDirective, LinkTypeDirective, ScrollRevealDirective };
|
|
184
229
|
//# sourceMappingURL=lluc_llull-ui-lib-directives.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lluc_llull-ui-lib-directives.mjs","sources":["../../../projects/ui-lib/directives/link-type.directive.ts","../../../projects/ui-lib/directives/highlight.directive.ts","../../../projects/ui-lib/directives/lluc_llull-ui-lib-directives.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n Directive,\n ElementRef,\n EventEmitter,\n HostListener,\n Inject,\n Input,\n OnInit,\n Output,\n PLATFORM_ID,\n} from '@angular/core';\nimport { Router } from '@angular/router';\nimport { LinkType } from '@lluc_llull/ui-lib/enums';\n\n@Directive({\n selector: '[linkType]',\n standalone: true,\n})\nexport class LinkTypeDirective implements OnInit {\n @Input() linkType?: LinkType;\n @Input() href?: string;\n @Output() anchorClicked = new EventEmitter<void>();\n\n constructor(\n private readonly router: Router,\n private readonly elRef: ElementRef<HTMLAnchorElement>,\n @Inject(PLATFORM_ID) private platformId: Object,\n ) {}\n\n get isBrowser(): boolean {\n return isPlatformBrowser(this.platformId);\n }\n\n ngOnInit(): void {\n this.setupAttributes();\n }\n\n @HostListener('click', ['$event'])\n onClick(event: Event): void {\n if (!this.linkType || !this.href) return;\n\n switch (this.linkType) {\n case 'internal':\n event.preventDefault();\n this.navigateInternal(this.href);\n break;\n\n case 'anchor':\n event.preventDefault();\n this.scrollToAnchor(this.href);\n break;\n\n case 'nolink':\n event.preventDefault();\n break;\n\n case 'external':\n case 'pdf':\n default:\n break;\n }\n }\n\n private setupAttributes(): void {\n const element = this.elRef.nativeElement;\n const resolvedHref = this.resolveHref();\n\n if (!resolvedHref) return;\n\n element.setAttribute('href', resolvedHref);\n\n if (this.linkType === 'external' || this.linkType === 'pdf') {\n element.setAttribute('target', '_blank');\n element.setAttribute('rel', 'noopener noreferrer nofollow');\n }\n }\n\n private resolveHref(): string {\n if (!this.href) return '';\n\n // si ya es absoluta, no tocarla\n if (this.href.startsWith('/')) {\n return this.href;\n }\n\n if (this.linkType === 'internal') {\n const lang = this.getCurrentLang();\n return `/${lang}/${this.href}`;\n }\n\n return this.href;\n }\n\n private navigateInternal(url: string): void {\n // si ya es absoluta, navega directamente\n if (url.startsWith('/')) {\n this.router.navigateByUrl(url);\n return;\n }\n\n const lang = this.getCurrentLang();\n\n this.anchorClicked.emit();\n this.router.navigate(['/', lang, url]);\n }\n\n private getCurrentLang(): string {\n const url = this.router.url || '';\n const firstSegment = url.split('?')[0].split('#')[0].split('/')[1];\n return firstSegment || 'es';\n }\n\n private scrollToAnchor(id: string): void {\n if (!this.isBrowser) return;\n\n const cleanId = id.replace(/^#/, '');\n const el = document.getElementById(cleanId);\n if (!el) return;\n\n const yOffset = -160;\n const y = el.getBoundingClientRect().top + window.scrollY + yOffset;\n\n window.scrollTo({\n top: y,\n behavior: 'smooth',\n });\n\n this.anchorClicked.emit();\n }\n}\n\nexport { LinkType };\n\n","import { Directive, HostBinding, Input } from '@angular/core';\n\n@Directive({\n selector: '[highlight]',\n standalone: true,\n})\nexport class HighlightDirective {\n @Input('highlight') highlightColor: string = '#FFFFFF';\n @Input() highlightThickness: number = 20;\n\n @HostBinding('style.background-image')\n get background() {\n const start = 65;\n const end = start + this.highlightThickness;\n\n return `linear-gradient(to bottom, \n transparent ${start}%, \n ${this.highlightColor} ${start}%, \n ${this.highlightColor} ${end}%, \n transparent ${end}%)`;\n }\n\n @HostBinding('style.background-size') size = '100% 100%';\n @HostBinding('style.display') display = 'inline';\n\n // desplazamiento\n @HostBinding('style.padding') padding = '0 10px';\n @HostBinding('style.margin') margin = '0 -10px'; // Compensa el padding para no mover el texto\n @HostBinding('style.box-decoration-break') break = 'clone';\n @HostBinding('style.-webkit-box-decoration-break') wBreak = 'clone';\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lluc_llull-ui-lib-directives.mjs","sources":["../../../projects/ui-lib/directives/link-type.directive.ts","../../../projects/ui-lib/directives/highlight.directive.ts","../../../projects/ui-lib/directives/scroll-reveal.directive.ts","../../../projects/ui-lib/directives/lluc_llull-ui-lib-directives.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n Directive,\n ElementRef,\n EventEmitter,\n HostListener,\n Inject,\n Input,\n OnInit,\n Output,\n PLATFORM_ID,\n} from '@angular/core';\nimport { Router } from '@angular/router';\nimport { LinkType } from '@lluc_llull/ui-lib/enums';\n\n@Directive({\n selector: '[linkType]',\n standalone: true,\n})\nexport class LinkTypeDirective implements OnInit {\n @Input() linkType?: LinkType;\n @Input() href?: string;\n @Output() anchorClicked = new EventEmitter<void>();\n\n constructor(\n private readonly router: Router,\n private readonly elRef: ElementRef<HTMLAnchorElement>,\n @Inject(PLATFORM_ID) private platformId: Object,\n ) {}\n\n get isBrowser(): boolean {\n return isPlatformBrowser(this.platformId);\n }\n\n ngOnInit(): void {\n this.setupAttributes();\n }\n\n @HostListener('click', ['$event'])\n onClick(event: Event): void {\n if (!this.linkType || !this.href) return;\n\n switch (this.linkType) {\n case 'internal':\n event.preventDefault();\n this.navigateInternal(this.href);\n break;\n\n case 'anchor':\n event.preventDefault();\n this.scrollToAnchor(this.href);\n break;\n\n case 'nolink':\n event.preventDefault();\n break;\n\n case 'external':\n case 'pdf':\n default:\n break;\n }\n }\n\n private setupAttributes(): void {\n const element = this.elRef.nativeElement;\n const resolvedHref = this.resolveHref();\n\n if (!resolvedHref) return;\n\n element.setAttribute('href', resolvedHref);\n\n if (this.linkType === 'external' || this.linkType === 'pdf') {\n element.setAttribute('target', '_blank');\n element.setAttribute('rel', 'noopener noreferrer nofollow');\n }\n }\n\n private resolveHref(): string {\n if (!this.href) return '';\n\n // si ya es absoluta, no tocarla\n if (this.href.startsWith('/')) {\n return this.href;\n }\n\n if (this.linkType === 'internal') {\n const lang = this.getCurrentLang();\n return `/${lang}/${this.href}`;\n }\n\n return this.href;\n }\n\n private navigateInternal(url: string): void {\n // si ya es absoluta, navega directamente\n if (url.startsWith('/')) {\n this.router.navigateByUrl(url);\n return;\n }\n\n const lang = this.getCurrentLang();\n\n this.anchorClicked.emit();\n this.router.navigate(['/', lang, url]);\n }\n\n private getCurrentLang(): string {\n const url = this.router.url || '';\n const firstSegment = url.split('?')[0].split('#')[0].split('/')[1];\n return firstSegment || 'es';\n }\n\n private scrollToAnchor(id: string): void {\n if (!this.isBrowser) return;\n\n const cleanId = id.replace(/^#/, '');\n const el = document.getElementById(cleanId);\n if (!el) return;\n\n const yOffset = -160;\n const y = el.getBoundingClientRect().top + window.scrollY + yOffset;\n\n window.scrollTo({\n top: y,\n behavior: 'smooth',\n });\n\n this.anchorClicked.emit();\n }\n}\n\nexport { LinkType };\n\n","import { Directive, HostBinding, Input } from '@angular/core';\n\n@Directive({\n selector: '[highlight]',\n standalone: true,\n})\nexport class HighlightDirective {\n @Input('highlight') highlightColor: string = '#FFFFFF';\n @Input() highlightThickness: number = 20;\n\n @HostBinding('style.background-image')\n get background() {\n const start = 65;\n const end = start + this.highlightThickness;\n\n return `linear-gradient(to bottom, \n transparent ${start}%, \n ${this.highlightColor} ${start}%, \n ${this.highlightColor} ${end}%, \n transparent ${end}%)`;\n }\n\n @HostBinding('style.background-size') size = '100% 100%';\n @HostBinding('style.display') display = 'inline';\n\n // desplazamiento\n @HostBinding('style.padding') padding = '0 10px';\n @HostBinding('style.margin') margin = '0 -10px'; // Compensa el padding para no mover el texto\n @HostBinding('style.box-decoration-break') break = 'clone';\n @HostBinding('style.-webkit-box-decoration-break') wBreak = 'clone';\n}\n","import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';\n\n@Directive({\n selector: '[scrollReveal]',\n standalone: true,\n})\nexport class ScrollRevealDirective implements OnInit {\n @Input() distance = '30px';\n @Input() duration = '0.8s';\n\n constructor(\n private el: ElementRef,\n private renderer: Renderer2,\n ) {}\n\n ngOnInit() {\n this.setupInitialStyles();\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n this.reveal();\n observer.unobserve(this.el.nativeElement);\n }\n });\n },\n { threshold: 0.1 },\n ); // Se dispara cuando el 10% del componente es visible\n\n observer.observe(this.el.nativeElement);\n }\n\n private setupInitialStyles() {\n this.renderer.setStyle(this.el.nativeElement, 'opacity', '0');\n this.renderer.setStyle(this.el.nativeElement, 'transform', `translateY(-${this.distance})`);\n this.renderer.setStyle(\n this.el.nativeElement,\n 'transition',\n `all ${this.duration} ease-out`,\n );\n }\n\n private reveal() {\n this.renderer.setStyle(this.el.nativeElement, 'opacity', '1');\n this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateY(0)');\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/lib/styles/main.css
CHANGED
|
@@ -136,33 +136,247 @@ a {
|
|
|
136
136
|
|
|
137
137
|
.layout-padding {
|
|
138
138
|
padding-block: 2rem;
|
|
139
|
-
padding-inline: 15rem;
|
|
140
139
|
}
|
|
141
|
-
@media (
|
|
140
|
+
@media (min-width: 1536px) {
|
|
141
|
+
.layout-padding {
|
|
142
|
+
padding-inline: 15rem;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
@media (min-width: 1280px) {
|
|
142
146
|
.layout-padding {
|
|
143
147
|
padding-inline: 10rem;
|
|
144
148
|
}
|
|
145
149
|
}
|
|
146
|
-
@media (
|
|
150
|
+
@media (min-width: 1024px) {
|
|
147
151
|
.layout-padding {
|
|
148
152
|
padding-inline: 6rem;
|
|
149
153
|
}
|
|
150
154
|
}
|
|
151
|
-
@media (
|
|
155
|
+
@media (min-width: 768px) {
|
|
152
156
|
.layout-padding {
|
|
153
157
|
padding-inline: 3rem;
|
|
154
158
|
}
|
|
155
159
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
padding-inline: 1.5rem;
|
|
159
|
-
}
|
|
160
|
+
.layout-padding {
|
|
161
|
+
padding-inline: 1.5rem;
|
|
160
162
|
}
|
|
161
163
|
|
|
162
164
|
.full-width {
|
|
163
165
|
padding: 0;
|
|
164
166
|
}
|
|
165
167
|
|
|
168
|
+
.debug-grid-overlay {
|
|
169
|
+
display: none;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
body.show-grid .debug-grid-overlay {
|
|
173
|
+
position: fixed !important;
|
|
174
|
+
inset-block: 0;
|
|
175
|
+
left: 50%;
|
|
176
|
+
transform: translateX(-50%);
|
|
177
|
+
width: calc(100vw - 2rem * 2);
|
|
178
|
+
max-width: 1920px;
|
|
179
|
+
z-index: 99999 !important;
|
|
180
|
+
pointer-events: none;
|
|
181
|
+
display: grid !important;
|
|
182
|
+
grid-template-columns: repeat(12, 1fr);
|
|
183
|
+
column-gap: 1.5rem;
|
|
184
|
+
}
|
|
185
|
+
body.show-grid .debug-grid-overlay div {
|
|
186
|
+
height: 100%;
|
|
187
|
+
background-color: rgba(255, 0, 0, 0.13);
|
|
188
|
+
border-left: 1px solid rgba(255, 0, 0, 0.315);
|
|
189
|
+
border-right: 1px solid rgba(255, 0, 0, 0.315);
|
|
190
|
+
}
|
|
191
|
+
body.show-grid .debug-grid-overlay {
|
|
192
|
+
display: grid !important;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.main-grid {
|
|
196
|
+
display: grid;
|
|
197
|
+
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
198
|
+
column-gap: 1.5rem;
|
|
199
|
+
row-gap: 1.5rem;
|
|
200
|
+
width: calc(100vw - 2rem * 2);
|
|
201
|
+
max-width: 1920px;
|
|
202
|
+
margin-inline: auto;
|
|
203
|
+
padding-block: 2rem;
|
|
204
|
+
position: relative;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.col-span-1 {
|
|
208
|
+
grid-column-end: span 1;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.col-span-2 {
|
|
212
|
+
grid-column-end: span 2;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.col-span-3 {
|
|
216
|
+
grid-column-end: span 3;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.col-span-4 {
|
|
220
|
+
grid-column-end: span 4;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.col-span-5 {
|
|
224
|
+
grid-column-end: span 5;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.col-span-6 {
|
|
228
|
+
grid-column-end: span 6;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.col-span-7 {
|
|
232
|
+
grid-column-end: span 7;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.col-span-8 {
|
|
236
|
+
grid-column-end: span 8;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.col-span-9 {
|
|
240
|
+
grid-column-end: span 9;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.col-span-10 {
|
|
244
|
+
grid-column-end: span 10;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.col-span-11 {
|
|
248
|
+
grid-column-end: span 11;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.col-span-12 {
|
|
252
|
+
grid-column-end: span 12;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.col-start-1 {
|
|
256
|
+
grid-column-start: 1;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.col-start-2 {
|
|
260
|
+
grid-column-start: 2;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.col-start-3 {
|
|
264
|
+
grid-column-start: 3;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.col-start-4 {
|
|
268
|
+
grid-column-start: 4;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.col-start-5 {
|
|
272
|
+
grid-column-start: 5;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.col-start-6 {
|
|
276
|
+
grid-column-start: 6;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.col-start-7 {
|
|
280
|
+
grid-column-start: 7;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.col-start-8 {
|
|
284
|
+
grid-column-start: 8;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.col-start-9 {
|
|
288
|
+
grid-column-start: 9;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.col-start-10 {
|
|
292
|
+
grid-column-start: 10;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.col-start-11 {
|
|
296
|
+
grid-column-start: 11;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.col-start-12 {
|
|
300
|
+
grid-column-start: 12;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
@media (min-width: 1024px) {
|
|
304
|
+
.md\:col-start-1 {
|
|
305
|
+
grid-column-start: 1;
|
|
306
|
+
}
|
|
307
|
+
.md\:col-span-1 {
|
|
308
|
+
grid-column-end: span 1;
|
|
309
|
+
}
|
|
310
|
+
.md\:col-start-2 {
|
|
311
|
+
grid-column-start: 2;
|
|
312
|
+
}
|
|
313
|
+
.md\:col-span-2 {
|
|
314
|
+
grid-column-end: span 2;
|
|
315
|
+
}
|
|
316
|
+
.md\:col-start-3 {
|
|
317
|
+
grid-column-start: 3;
|
|
318
|
+
}
|
|
319
|
+
.md\:col-span-3 {
|
|
320
|
+
grid-column-end: span 3;
|
|
321
|
+
}
|
|
322
|
+
.md\:col-start-4 {
|
|
323
|
+
grid-column-start: 4;
|
|
324
|
+
}
|
|
325
|
+
.md\:col-span-4 {
|
|
326
|
+
grid-column-end: span 4;
|
|
327
|
+
}
|
|
328
|
+
.md\:col-start-5 {
|
|
329
|
+
grid-column-start: 5;
|
|
330
|
+
}
|
|
331
|
+
.md\:col-span-5 {
|
|
332
|
+
grid-column-end: span 5;
|
|
333
|
+
}
|
|
334
|
+
.md\:col-start-6 {
|
|
335
|
+
grid-column-start: 6;
|
|
336
|
+
}
|
|
337
|
+
.md\:col-span-6 {
|
|
338
|
+
grid-column-end: span 6;
|
|
339
|
+
}
|
|
340
|
+
.md\:col-start-7 {
|
|
341
|
+
grid-column-start: 7;
|
|
342
|
+
}
|
|
343
|
+
.md\:col-span-7 {
|
|
344
|
+
grid-column-end: span 7;
|
|
345
|
+
}
|
|
346
|
+
.md\:col-start-8 {
|
|
347
|
+
grid-column-start: 8;
|
|
348
|
+
}
|
|
349
|
+
.md\:col-span-8 {
|
|
350
|
+
grid-column-end: span 8;
|
|
351
|
+
}
|
|
352
|
+
.md\:col-start-9 {
|
|
353
|
+
grid-column-start: 9;
|
|
354
|
+
}
|
|
355
|
+
.md\:col-span-9 {
|
|
356
|
+
grid-column-end: span 9;
|
|
357
|
+
}
|
|
358
|
+
.md\:col-start-10 {
|
|
359
|
+
grid-column-start: 10;
|
|
360
|
+
}
|
|
361
|
+
.md\:col-span-10 {
|
|
362
|
+
grid-column-end: span 10;
|
|
363
|
+
}
|
|
364
|
+
.md\:col-start-11 {
|
|
365
|
+
grid-column-start: 11;
|
|
366
|
+
}
|
|
367
|
+
.md\:col-span-11 {
|
|
368
|
+
grid-column-end: span 11;
|
|
369
|
+
}
|
|
370
|
+
.md\:col-start-12 {
|
|
371
|
+
grid-column-start: 12;
|
|
372
|
+
}
|
|
373
|
+
.md\:col-span-12 {
|
|
374
|
+
grid-column-end: span 12;
|
|
375
|
+
}
|
|
376
|
+
.md\:col-span-full {
|
|
377
|
+
grid-column: 1/-1;
|
|
378
|
+
}
|
|
379
|
+
}
|
|
166
380
|
.pretitle {
|
|
167
381
|
margin: 0 0 0.5rem 0;
|
|
168
382
|
font-size: 0.875rem;
|
package/styles/main.css
CHANGED
|
@@ -136,33 +136,247 @@ a {
|
|
|
136
136
|
|
|
137
137
|
.layout-padding {
|
|
138
138
|
padding-block: 2rem;
|
|
139
|
-
padding-inline: 15rem;
|
|
140
139
|
}
|
|
141
|
-
@media (
|
|
140
|
+
@media (min-width: 1536px) {
|
|
141
|
+
.layout-padding {
|
|
142
|
+
padding-inline: 15rem;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
@media (min-width: 1280px) {
|
|
142
146
|
.layout-padding {
|
|
143
147
|
padding-inline: 10rem;
|
|
144
148
|
}
|
|
145
149
|
}
|
|
146
|
-
@media (
|
|
150
|
+
@media (min-width: 1024px) {
|
|
147
151
|
.layout-padding {
|
|
148
152
|
padding-inline: 6rem;
|
|
149
153
|
}
|
|
150
154
|
}
|
|
151
|
-
@media (
|
|
155
|
+
@media (min-width: 768px) {
|
|
152
156
|
.layout-padding {
|
|
153
157
|
padding-inline: 3rem;
|
|
154
158
|
}
|
|
155
159
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
padding-inline: 1.5rem;
|
|
159
|
-
}
|
|
160
|
+
.layout-padding {
|
|
161
|
+
padding-inline: 1.5rem;
|
|
160
162
|
}
|
|
161
163
|
|
|
162
164
|
.full-width {
|
|
163
165
|
padding: 0;
|
|
164
166
|
}
|
|
165
167
|
|
|
168
|
+
.debug-grid-overlay {
|
|
169
|
+
display: none;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
body.show-grid .debug-grid-overlay {
|
|
173
|
+
position: fixed !important;
|
|
174
|
+
inset-block: 0;
|
|
175
|
+
left: 50%;
|
|
176
|
+
transform: translateX(-50%);
|
|
177
|
+
width: calc(100vw - 2rem * 2);
|
|
178
|
+
max-width: 1920px;
|
|
179
|
+
z-index: 99999 !important;
|
|
180
|
+
pointer-events: none;
|
|
181
|
+
display: grid !important;
|
|
182
|
+
grid-template-columns: repeat(12, 1fr);
|
|
183
|
+
column-gap: 1.5rem;
|
|
184
|
+
}
|
|
185
|
+
body.show-grid .debug-grid-overlay div {
|
|
186
|
+
height: 100%;
|
|
187
|
+
background-color: rgba(255, 0, 0, 0.13);
|
|
188
|
+
border-left: 1px solid rgba(255, 0, 0, 0.315);
|
|
189
|
+
border-right: 1px solid rgba(255, 0, 0, 0.315);
|
|
190
|
+
}
|
|
191
|
+
body.show-grid .debug-grid-overlay {
|
|
192
|
+
display: grid !important;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.main-grid {
|
|
196
|
+
display: grid;
|
|
197
|
+
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
198
|
+
column-gap: 1.5rem;
|
|
199
|
+
row-gap: 1.5rem;
|
|
200
|
+
width: calc(100vw - 2rem * 2);
|
|
201
|
+
max-width: 1920px;
|
|
202
|
+
margin-inline: auto;
|
|
203
|
+
padding-block: 2rem;
|
|
204
|
+
position: relative;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.col-span-1 {
|
|
208
|
+
grid-column-end: span 1;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.col-span-2 {
|
|
212
|
+
grid-column-end: span 2;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.col-span-3 {
|
|
216
|
+
grid-column-end: span 3;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.col-span-4 {
|
|
220
|
+
grid-column-end: span 4;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.col-span-5 {
|
|
224
|
+
grid-column-end: span 5;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.col-span-6 {
|
|
228
|
+
grid-column-end: span 6;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.col-span-7 {
|
|
232
|
+
grid-column-end: span 7;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.col-span-8 {
|
|
236
|
+
grid-column-end: span 8;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.col-span-9 {
|
|
240
|
+
grid-column-end: span 9;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.col-span-10 {
|
|
244
|
+
grid-column-end: span 10;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.col-span-11 {
|
|
248
|
+
grid-column-end: span 11;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.col-span-12 {
|
|
252
|
+
grid-column-end: span 12;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.col-start-1 {
|
|
256
|
+
grid-column-start: 1;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.col-start-2 {
|
|
260
|
+
grid-column-start: 2;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.col-start-3 {
|
|
264
|
+
grid-column-start: 3;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.col-start-4 {
|
|
268
|
+
grid-column-start: 4;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.col-start-5 {
|
|
272
|
+
grid-column-start: 5;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.col-start-6 {
|
|
276
|
+
grid-column-start: 6;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.col-start-7 {
|
|
280
|
+
grid-column-start: 7;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.col-start-8 {
|
|
284
|
+
grid-column-start: 8;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.col-start-9 {
|
|
288
|
+
grid-column-start: 9;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.col-start-10 {
|
|
292
|
+
grid-column-start: 10;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.col-start-11 {
|
|
296
|
+
grid-column-start: 11;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.col-start-12 {
|
|
300
|
+
grid-column-start: 12;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
@media (min-width: 1024px) {
|
|
304
|
+
.md\:col-start-1 {
|
|
305
|
+
grid-column-start: 1;
|
|
306
|
+
}
|
|
307
|
+
.md\:col-span-1 {
|
|
308
|
+
grid-column-end: span 1;
|
|
309
|
+
}
|
|
310
|
+
.md\:col-start-2 {
|
|
311
|
+
grid-column-start: 2;
|
|
312
|
+
}
|
|
313
|
+
.md\:col-span-2 {
|
|
314
|
+
grid-column-end: span 2;
|
|
315
|
+
}
|
|
316
|
+
.md\:col-start-3 {
|
|
317
|
+
grid-column-start: 3;
|
|
318
|
+
}
|
|
319
|
+
.md\:col-span-3 {
|
|
320
|
+
grid-column-end: span 3;
|
|
321
|
+
}
|
|
322
|
+
.md\:col-start-4 {
|
|
323
|
+
grid-column-start: 4;
|
|
324
|
+
}
|
|
325
|
+
.md\:col-span-4 {
|
|
326
|
+
grid-column-end: span 4;
|
|
327
|
+
}
|
|
328
|
+
.md\:col-start-5 {
|
|
329
|
+
grid-column-start: 5;
|
|
330
|
+
}
|
|
331
|
+
.md\:col-span-5 {
|
|
332
|
+
grid-column-end: span 5;
|
|
333
|
+
}
|
|
334
|
+
.md\:col-start-6 {
|
|
335
|
+
grid-column-start: 6;
|
|
336
|
+
}
|
|
337
|
+
.md\:col-span-6 {
|
|
338
|
+
grid-column-end: span 6;
|
|
339
|
+
}
|
|
340
|
+
.md\:col-start-7 {
|
|
341
|
+
grid-column-start: 7;
|
|
342
|
+
}
|
|
343
|
+
.md\:col-span-7 {
|
|
344
|
+
grid-column-end: span 7;
|
|
345
|
+
}
|
|
346
|
+
.md\:col-start-8 {
|
|
347
|
+
grid-column-start: 8;
|
|
348
|
+
}
|
|
349
|
+
.md\:col-span-8 {
|
|
350
|
+
grid-column-end: span 8;
|
|
351
|
+
}
|
|
352
|
+
.md\:col-start-9 {
|
|
353
|
+
grid-column-start: 9;
|
|
354
|
+
}
|
|
355
|
+
.md\:col-span-9 {
|
|
356
|
+
grid-column-end: span 9;
|
|
357
|
+
}
|
|
358
|
+
.md\:col-start-10 {
|
|
359
|
+
grid-column-start: 10;
|
|
360
|
+
}
|
|
361
|
+
.md\:col-span-10 {
|
|
362
|
+
grid-column-end: span 10;
|
|
363
|
+
}
|
|
364
|
+
.md\:col-start-11 {
|
|
365
|
+
grid-column-start: 11;
|
|
366
|
+
}
|
|
367
|
+
.md\:col-span-11 {
|
|
368
|
+
grid-column-end: span 11;
|
|
369
|
+
}
|
|
370
|
+
.md\:col-start-12 {
|
|
371
|
+
grid-column-start: 12;
|
|
372
|
+
}
|
|
373
|
+
.md\:col-span-12 {
|
|
374
|
+
grid-column-end: span 12;
|
|
375
|
+
}
|
|
376
|
+
.md\:col-span-full {
|
|
377
|
+
grid-column: 1/-1;
|
|
378
|
+
}
|
|
379
|
+
}
|
|
166
380
|
.pretitle {
|
|
167
381
|
margin: 0 0 0.5rem 0;
|
|
168
382
|
font-size: 0.875rem;
|