@lluc_llull/ui-lib 0.4.5 → 0.5.1
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/esm2022/lib/components/core/category-progress/category-progress.component.mjs +3 -3
- package/esm2022/lib/components/core/header-clear/header-clear.component.mjs +26 -7
- package/esm2022/lib/components/core/header-clear/header-clear.interface.mjs +1 -1
- package/esm2022/lib/components/core/header-mobile/header-mobile.component.mjs +26 -7
- package/esm2022/lib/components/core/header-mobile/header-mobile.interface.mjs +1 -1
- package/esm2022/lib/components/core/hero-section/hero-section.component.mjs +3 -3
- package/esm2022/lib/components/core/lang-modal/lang-modal.component.mjs +3 -3
- package/esm2022/lib/components/core/nav-modal/nav-modal.component.mjs +3 -3
- package/esm2022/lib/components/core/section-intro/section-intro.component.mjs +3 -3
- package/esm2022/lib/interfaces/ui-lib-nav-items.interface.mjs +1 -1
- package/esm2022/lib/services/index.mjs +2 -1
- package/esm2022/lib/services/mapper/component-mappers/header-clear.mapper.mjs +5 -2
- package/esm2022/lib/services/mapper/component-mappers/nav-modal.mapper.mjs +43 -24
- package/esm2022/lib/services/theme/index.mjs +2 -0
- package/esm2022/lib/services/theme/theme.service.mjs +73 -0
- package/fesm2022/lluc_llull-ui-lib.mjs +172 -45
- package/fesm2022/lluc_llull-ui-lib.mjs.map +1 -1
- package/lib/components/core/header-clear/header-clear.component.d.ts +15 -5
- package/lib/components/core/header-clear/header-clear.interface.d.ts +3 -1
- package/lib/components/core/header-mobile/header-mobile.component.d.ts +15 -5
- package/lib/components/core/header-mobile/header-mobile.interface.d.ts +3 -1
- package/lib/components/core/nav-modal/nav-modal.component.d.ts +2 -2
- package/lib/interfaces/ui-lib-nav-items.interface.d.ts +7 -0
- package/lib/services/index.d.ts +1 -0
- package/lib/services/mapper/component-mappers/nav-modal.mapper.d.ts +4 -10
- package/lib/services/theme/index.d.ts +1 -0
- package/lib/services/theme/theme.service.d.ts +16 -0
- package/package.json +1 -1
- package/src/lib/styles/main.css +64 -19
- package/styles/main.css +64 -19
|
@@ -4,7 +4,7 @@ import { EventEmitter, inject, PLATFORM_ID, HostListener, Output, Input, Directi
|
|
|
4
4
|
import * as i1 from '@angular/router';
|
|
5
5
|
import * as i1$1 from '@angular/material/dialog';
|
|
6
6
|
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
|
|
7
|
-
import { fromEvent } from 'rxjs';
|
|
7
|
+
import { BehaviorSubject, fromEvent } from 'rxjs';
|
|
8
8
|
import { debounceTime, map, distinctUntilChanged, startWith } from 'rxjs/operators';
|
|
9
9
|
|
|
10
10
|
var LinkType;
|
|
@@ -118,11 +118,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
118
118
|
|
|
119
119
|
class HeroSectionComponent {
|
|
120
120
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeroSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
121
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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=\"buttons\">\n @for (button of buttons; track $index) {\n <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n <span>{{ button.icon }}</span>{{ button.label }}\n </a>\n }\n </div>\n }\n</div>\n", styles: [":host{display:flex;flex:1 1 auto;height:100%}.hero-section{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem}.buttons{display:flex;flex-wrap:wrap;justify-content:center}.title{text-transform:uppercase}.title .highlight-text{cursor:help;display:inline;position:relative;z-index:99}.title .highlight-text .wave-wrapper{position:absolute;top:
|
|
121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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=\"buttons\">\n @for (button of buttons; track $index) {\n <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n <span>{{ button.icon }}</span>{{ button.label }}\n </a>\n }\n </div>\n }\n</div>\n", styles: [":host{display:flex;flex:1 1 auto;height:100%}.hero-section{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem}.buttons{display:flex;flex-wrap:wrap;justify-content:center}.title{text-transform:uppercase;font-size:4.5rem}.title .highlight-text{cursor:help;display:inline;position:relative;z-index:99}.title .highlight-text .wave-wrapper{position:absolute;top:90%;left:0;width:100%;height:30px;z-index:-1}.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%}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
122
122
|
}
|
|
123
123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeroSectionComponent, decorators: [{
|
|
124
124
|
type: Component,
|
|
125
|
-
args: [{ selector: 'lib-hero-section', standalone: true, imports: [CommonModule, LinkTypeDirective], 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=\"buttons\">\n @for (button of buttons; track $index) {\n <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n <span>{{ button.icon }}</span>{{ button.label }}\n </a>\n }\n </div>\n }\n</div>\n", styles: [":host{display:flex;flex:1 1 auto;height:100%}.hero-section{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem}.buttons{display:flex;flex-wrap:wrap;justify-content:center}.title{text-transform:uppercase}.title .highlight-text{cursor:help;display:inline;position:relative;z-index:99}.title .highlight-text .wave-wrapper{position:absolute;top:
|
|
125
|
+
args: [{ selector: 'lib-hero-section', standalone: true, imports: [CommonModule, LinkTypeDirective], 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=\"buttons\">\n @for (button of buttons; track $index) {\n <a class=\"btn btn-link\" [href]=\"button.url\" [linkType]=\"button.linkType\">\n <span>{{ button.icon }}</span>{{ button.label }}\n </a>\n }\n </div>\n }\n</div>\n", styles: [":host{display:flex;flex:1 1 auto;height:100%}.hero-section{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem}.buttons{display:flex;flex-wrap:wrap;justify-content:center}.title{text-transform:uppercase;font-size:4.5rem}.title .highlight-text{cursor:help;display:inline;position:relative;z-index:99}.title .highlight-text .wave-wrapper{position:absolute;top:90%;left:0;width:100%;height:30px;z-index:-1}.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%}.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"] }]
|
|
126
126
|
}], propDecorators: { pretitle: [{
|
|
127
127
|
type: Input
|
|
128
128
|
}], title: [{
|
|
@@ -187,11 +187,11 @@ class LangModalComponent {
|
|
|
187
187
|
this.dialogRef?.close();
|
|
188
188
|
}
|
|
189
189
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangModalComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
190
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LangModalComponent, isStandalone: true, selector: "lib-lang-modal", ngImport: i0, template: "<div class=\"modal-content\">\n <button (click)=\"closeModal()\" class=\"close-btn\">\u2715</button>\n @if (langs && langs.length > 0) {\n <ol>\n @for (lang of langs; track $index) {\n <li (click)=\"selectLang(lang)\">\n <span class=\"item\">{{ lang.label }}</span>\n </li>\n }\n </ol>\n }\n</div>\n", styles: [":root{--
|
|
190
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LangModalComponent, isStandalone: true, selector: "lib-lang-modal", ngImport: i0, template: "<div class=\"modal-content\">\n <button (click)=\"closeModal()\" class=\"close-btn\">\u2715</button>\n @if (langs && langs.length > 0) {\n <ol>\n @for (lang of langs; track $index) {\n <li (click)=\"selectLang(lang)\">\n <span class=\"modal-item\">{{ lang.label }}</span>\n </li>\n }\n </ol>\n }\n</div>\n", styles: [":root{--font-titles: \"Bebas Neue\", system-ui, sans-serif;--font-base: \"Inter\", system-ui, sans-serif;--font-size-base: 16px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem}:host{position:fixed;inset:0;width:100vw;height:100vh;background:var(--modal-bg);z-index:1000;display:flex;align-items:center;justify-content:center}.close-btn{position:absolute;top:1rem;right:2rem;background:none;border:none;color:var(--close-btn);font-size:1.5rem;font-weight:700;cursor:pointer;z-index:1001}ol{padding:0;margin:0;text-align:center;width:100%;max-width:400px;list-style:none;counter-reset:item}li{cursor:pointer;text-align:start;text-transform:uppercase;counter-increment:item}li:before{content:counter(item,decimal-leading-zero) \". \"}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
191
191
|
}
|
|
192
192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangModalComponent, decorators: [{
|
|
193
193
|
type: Component,
|
|
194
|
-
args: [{ selector: 'lib-lang-modal', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-content\">\n <button (click)=\"closeModal()\" class=\"close-btn\">\u2715</button>\n @if (langs && langs.length > 0) {\n <ol>\n @for (lang of langs; track $index) {\n <li (click)=\"selectLang(lang)\">\n <span class=\"item\">{{ lang.label }}</span>\n </li>\n }\n </ol>\n }\n</div>\n", styles: [":root{--
|
|
194
|
+
args: [{ selector: 'lib-lang-modal', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-content\">\n <button (click)=\"closeModal()\" class=\"close-btn\">\u2715</button>\n @if (langs && langs.length > 0) {\n <ol>\n @for (lang of langs; track $index) {\n <li (click)=\"selectLang(lang)\">\n <span class=\"modal-item\">{{ lang.label }}</span>\n </li>\n }\n </ol>\n }\n</div>\n", styles: [":root{--font-titles: \"Bebas Neue\", system-ui, sans-serif;--font-base: \"Inter\", system-ui, sans-serif;--font-size-base: 16px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem}:host{position:fixed;inset:0;width:100vw;height:100vh;background:var(--modal-bg);z-index:1000;display:flex;align-items:center;justify-content:center}.close-btn{position:absolute;top:1rem;right:2rem;background:none;border:none;color:var(--close-btn);font-size:1.5rem;font-weight:700;cursor:pointer;z-index:1001}ol{padding:0;margin:0;text-align:center;width:100%;max-width:400px;list-style:none;counter-reset:item}li{cursor:pointer;text-align:start;text-transform:uppercase;counter-increment:item}li:before{content:counter(item,decimal-leading-zero) \". \"}\n"] }]
|
|
195
195
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
196
196
|
type: Optional
|
|
197
197
|
}, {
|
|
@@ -209,11 +209,11 @@ class NavModalComponent {
|
|
|
209
209
|
this.close.emit();
|
|
210
210
|
}
|
|
211
211
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
212
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NavModalComponent, isStandalone: true, selector: "lib-nav-modal", inputs: { navItems: "navItems", socialItems: "socialItems" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-content\">\n <button (click)=\"closeModal()\" class=\"close-btn\">\u2715</button>\n @if (navItems && navItems.length > 0) {\n <ol>\n @for (item of navItems; track $index) {\n <a [href]=\"item.url\" [linkType]=\"item.linkType\" (click)=\"closeModal()\">\n <li>\n <span class=\"item\">{{ item.label }}</span>\n </li>\n </a>\n }\n </ol>\n }\n</div>\n", styles: [":root{--
|
|
212
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NavModalComponent, isStandalone: true, selector: "lib-nav-modal", inputs: { navItems: "navItems", socialItems: "socialItems" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-content\">\n <button (click)=\"closeModal()\" class=\"close-btn\">\u2715</button>\n @if (navItems && navItems.length > 0) {\n <ol>\n @for (item of navItems; track $index) {\n <a \n [href]=\"item.url\" \n [linkType]=\"item.linkType\" \n (click)=\"closeModal()\"\n >\n <li>\n <span class=\"modal-item\">{{ item.label }}</span>\n </li>\n </a>\n }\n </ol>\n }\n @if (socialItems) {\n <div class=\"buttons\">\n @for (social of socialItems; track $index) {\n <a\n class=\"btn btn-link\"\n [href]=\"social.url\"\n [linkType]=\"social.linkType\"\n >\n <span>{{ social.icon }}</span\n >{{ social.label }}\n </a>\n }\n </div>\n }\n</div>\n", styles: [":root{--font-titles: \"Bebas Neue\", system-ui, sans-serif;--font-base: \"Inter\", system-ui, sans-serif;--font-size-base: 16px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem}:host{position:fixed;inset:0;width:100vw;height:100vh;background:var(--modal-bg);z-index:1000;display:flex;align-items:center;justify-content:center}.close-btn{position:absolute;top:1rem;right:2rem;background:none;border:none;color:var(--close-btn);font-size:1.5rem;font-weight:700;cursor:pointer;z-index:1001}ol{padding:0;margin:0;text-align:center;width:100%;max-width:400px;list-style:none;counter-reset:item}li{cursor:pointer;text-align:start;counter-increment:item}a{text-decoration:none;text-transform:uppercase;color:var(--item-color)}li:before{content:counter(item,decimal-leading-zero) \". \"}.buttons{display:flex;flex-wrap:wrap;justify-content:center}.buttons a{text-transform:lowercase}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: LinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href"], outputs: ["anchorClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
213
213
|
}
|
|
214
214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavModalComponent, decorators: [{
|
|
215
215
|
type: Component,
|
|
216
|
-
args: [{ selector: 'lib-nav-modal', standalone: true, imports: [CommonModule, LinkTypeDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-content\">\n <button (click)=\"closeModal()\" class=\"close-btn\">\u2715</button>\n @if (navItems && navItems.length > 0) {\n <ol>\n @for (item of navItems; track $index) {\n <a [href]=\"item.url\" [linkType]=\"item.linkType\" (click)=\"closeModal()\">\n <li>\n <span class=\"item\">{{ item.label }}</span>\n </li>\n </a>\n }\n </ol>\n }\n</div>\n", styles: [":root{--
|
|
216
|
+
args: [{ selector: 'lib-nav-modal', standalone: true, imports: [CommonModule, LinkTypeDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-content\">\n <button (click)=\"closeModal()\" class=\"close-btn\">\u2715</button>\n @if (navItems && navItems.length > 0) {\n <ol>\n @for (item of navItems; track $index) {\n <a \n [href]=\"item.url\" \n [linkType]=\"item.linkType\" \n (click)=\"closeModal()\"\n >\n <li>\n <span class=\"modal-item\">{{ item.label }}</span>\n </li>\n </a>\n }\n </ol>\n }\n @if (socialItems) {\n <div class=\"buttons\">\n @for (social of socialItems; track $index) {\n <a\n class=\"btn btn-link\"\n [href]=\"social.url\"\n [linkType]=\"social.linkType\"\n >\n <span>{{ social.icon }}</span\n >{{ social.label }}\n </a>\n }\n </div>\n }\n</div>\n", styles: [":root{--font-titles: \"Bebas Neue\", system-ui, sans-serif;--font-base: \"Inter\", system-ui, sans-serif;--font-size-base: 16px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem}:host{position:fixed;inset:0;width:100vw;height:100vh;background:var(--modal-bg);z-index:1000;display:flex;align-items:center;justify-content:center}.close-btn{position:absolute;top:1rem;right:2rem;background:none;border:none;color:var(--close-btn);font-size:1.5rem;font-weight:700;cursor:pointer;z-index:1001}ol{padding:0;margin:0;text-align:center;width:100%;max-width:400px;list-style:none;counter-reset:item}li{cursor:pointer;text-align:start;counter-increment:item}a{text-decoration:none;text-transform:uppercase;color:var(--item-color)}li:before{content:counter(item,decimal-leading-zero) \". \"}.buttons{display:flex;flex-wrap:wrap;justify-content:center}.buttons a{text-transform:lowercase}\n"] }]
|
|
217
217
|
}], propDecorators: { navItems: [{
|
|
218
218
|
type: Input
|
|
219
219
|
}], socialItems: [{
|
|
@@ -222,33 +222,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
222
222
|
type: Output
|
|
223
223
|
}] } });
|
|
224
224
|
|
|
225
|
+
class ThemeService {
|
|
226
|
+
constructor(platformId) {
|
|
227
|
+
this.platformId = platformId;
|
|
228
|
+
this.currentThemeSubject = new BehaviorSubject('light');
|
|
229
|
+
this.currentTheme$ = this.currentThemeSubject.asObservable();
|
|
230
|
+
// Aplicar tema por defecto al inicio
|
|
231
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
232
|
+
this.applyTheme('light');
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
getCurrentTheme() {
|
|
236
|
+
return this.currentThemeSubject.value;
|
|
237
|
+
}
|
|
238
|
+
setTheme(theme) {
|
|
239
|
+
this.currentThemeSubject.next(theme);
|
|
240
|
+
this.applyTheme(theme);
|
|
241
|
+
// NO guardar automáticamente en localStorage - solo cuando el usuario hace toggle
|
|
242
|
+
}
|
|
243
|
+
toggleTheme() {
|
|
244
|
+
const currentTheme = this.getCurrentTheme();
|
|
245
|
+
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
246
|
+
// Guardar en localStorage solo cuando el usuario hace toggle
|
|
247
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
248
|
+
localStorage.setItem('theme', newTheme);
|
|
249
|
+
}
|
|
250
|
+
this.setTheme(newTheme);
|
|
251
|
+
}
|
|
252
|
+
resetTheme() {
|
|
253
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
254
|
+
localStorage.removeItem('theme');
|
|
255
|
+
this.currentThemeSubject.next('light');
|
|
256
|
+
this.applyTheme('light');
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
// Método para cargar el tema guardado (opcional)
|
|
260
|
+
loadSavedTheme() {
|
|
261
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
262
|
+
const savedTheme = localStorage.getItem('theme');
|
|
263
|
+
if (savedTheme) {
|
|
264
|
+
this.setTheme(savedTheme);
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
applyTheme(theme) {
|
|
269
|
+
// Solo aplicar en el navegador
|
|
270
|
+
if (!isPlatformBrowser(this.platformId)) {
|
|
271
|
+
return;
|
|
272
|
+
}
|
|
273
|
+
const root = document.documentElement;
|
|
274
|
+
if (theme === 'dark') {
|
|
275
|
+
root.setAttribute('data-theme', 'dark');
|
|
276
|
+
}
|
|
277
|
+
else {
|
|
278
|
+
root.setAttribute('data-theme', 'light');
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
282
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
|
|
283
|
+
}
|
|
284
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, decorators: [{
|
|
285
|
+
type: Injectable,
|
|
286
|
+
args: [{
|
|
287
|
+
providedIn: 'root'
|
|
288
|
+
}]
|
|
289
|
+
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
290
|
+
type: Inject,
|
|
291
|
+
args: [PLATFORM_ID]
|
|
292
|
+
}] }] });
|
|
293
|
+
|
|
225
294
|
class HeaderClearComponent {
|
|
226
|
-
constructor() {
|
|
295
|
+
constructor(themeService) {
|
|
296
|
+
this.themeService = themeService;
|
|
227
297
|
this.isMenuOpen = false;
|
|
298
|
+
this.currentTheme = 'light';
|
|
228
299
|
this.langModal = new EventEmitter();
|
|
229
300
|
this.theme = new EventEmitter();
|
|
230
301
|
}
|
|
302
|
+
ngOnInit() {
|
|
303
|
+
this.themeSubscription = this.themeService.currentTheme$.subscribe(theme => {
|
|
304
|
+
this.currentTheme = theme;
|
|
305
|
+
});
|
|
306
|
+
}
|
|
307
|
+
ngOnDestroy() {
|
|
308
|
+
this.themeSubscription?.unsubscribe();
|
|
309
|
+
}
|
|
231
310
|
openLanguagesModal() {
|
|
232
311
|
this.langModal.emit();
|
|
233
312
|
}
|
|
234
313
|
toggleTheme() {
|
|
314
|
+
this.themeService.toggleTheme();
|
|
235
315
|
this.theme.emit();
|
|
236
316
|
}
|
|
237
317
|
toggleMenu() {
|
|
238
318
|
this.isMenuOpen = !this.isMenuOpen;
|
|
239
319
|
}
|
|
240
|
-
|
|
241
|
-
|
|
320
|
+
getThemeIcon() {
|
|
321
|
+
return this.currentTheme === 'light' ? '🌙' : '☀️';
|
|
322
|
+
}
|
|
323
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderClearComponent, deps: [{ token: ThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
324
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: HeaderClearComponent, isStandalone: true, selector: "lib-header-clear", inputs: { logo: "logo", logoDark: "logoDark", lang: "lang", navItems: "navItems", socialItems: "socialItems", homeLink: "homeLink" }, outputs: { langModal: "langModal", theme: "theme" }, ngImport: i0, template: "<header class=\"header-clear\">\n <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n <div class=\"header-logo\">\n <!-- Logo -->\n <img [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\" [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\" />\n <span>LLUC LLULL</span>\n </div>\n </a>\n\n <div class=\"header-actions\">\n <!-- Idioma -->\n <button class=\"btn btn-primary\" (click)=\"openLanguagesModal()\">\n <span class=\"lang\">{{lang}}</span>\n </button>\n\n <!-- Icono de tema -->\n <button class=\"btn btn-primary\" (click)=\"toggleTheme()\">\n <span>{{getThemeIcon()}}</span>\n </button>\n\n <!-- Icono de men\u00FA -->\n <button class=\"btn btn-primary\" (click)=\"toggleMenu()\">\n <span>\u2630</span>\n </button>\n </div>\n</header>\n\n@if(isMenuOpen && navItems && navItems.length > 0) {\n <lib-nav-modal\n [navItems]=\"navItems\"\n [socialItems]=\"socialItems\"\n (close)=\"isMenuOpen = false\"\n ></lib-nav-modal>\n}\n", styles: [".header-clear{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-radius:0;position:sticky;top:0;z-index:100}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:36px;height:36px;object-fit:contain;object-position:center}.header-actions{display:flex;align-items:center;gap:1rem}.lang{text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NavModalComponent, selector: "lib-nav-modal", inputs: ["navItems", "socialItems"], outputs: ["close"] }, { kind: "directive", type: LinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href"], outputs: ["anchorClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
242
325
|
}
|
|
243
326
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderClearComponent, decorators: [{
|
|
244
327
|
type: Component,
|
|
245
|
-
args: [{ selector: 'lib-header-clear', standalone: true, imports: [CommonModule, LangModalComponent, NavModalComponent, LinkTypeDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"header-clear\">\n <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n <div class=\"header-logo\">\n <!-- Logo -->\n <img [src]=\"logo?.url\" [alt]=\"logo?.alt\" />\n <span>LLUC LLULL</span>\n </div>\n </a>\n\n <div class=\"header-actions\">\n <!-- Idioma -->\n <button class=\"btn btn-primary\" (click)=\"openLanguagesModal()\">\n <span class=\"lang\">{{lang}}</span>\n </button>\n\n <!-- Icono de
|
|
246
|
-
}], propDecorators: { logo: [{
|
|
328
|
+
args: [{ selector: 'lib-header-clear', standalone: true, imports: [CommonModule, LangModalComponent, NavModalComponent, LinkTypeDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"header-clear\">\n <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n <div class=\"header-logo\">\n <!-- Logo -->\n <img [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\" [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\" />\n <span>LLUC LLULL</span>\n </div>\n </a>\n\n <div class=\"header-actions\">\n <!-- Idioma -->\n <button class=\"btn btn-primary\" (click)=\"openLanguagesModal()\">\n <span class=\"lang\">{{lang}}</span>\n </button>\n\n <!-- Icono de tema -->\n <button class=\"btn btn-primary\" (click)=\"toggleTheme()\">\n <span>{{getThemeIcon()}}</span>\n </button>\n\n <!-- Icono de men\u00FA -->\n <button class=\"btn btn-primary\" (click)=\"toggleMenu()\">\n <span>\u2630</span>\n </button>\n </div>\n</header>\n\n@if(isMenuOpen && navItems && navItems.length > 0) {\n <lib-nav-modal\n [navItems]=\"navItems\"\n [socialItems]=\"socialItems\"\n (close)=\"isMenuOpen = false\"\n ></lib-nav-modal>\n}\n", styles: [".header-clear{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-radius:0;position:sticky;top:0;z-index:100}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:36px;height:36px;object-fit:contain;object-position:center}.header-actions{display:flex;align-items:center;gap:1rem}.lang{text-transform:uppercase}\n"] }]
|
|
329
|
+
}], ctorParameters: () => [{ type: ThemeService }], propDecorators: { logo: [{
|
|
330
|
+
type: Input
|
|
331
|
+
}], logoDark: [{
|
|
247
332
|
type: Input
|
|
248
333
|
}], lang: [{
|
|
249
334
|
type: Input
|
|
250
335
|
}], navItems: [{
|
|
251
336
|
type: Input
|
|
337
|
+
}], socialItems: [{
|
|
338
|
+
type: Input
|
|
252
339
|
}], homeLink: [{
|
|
253
340
|
type: Input
|
|
254
341
|
}], langModal: [{
|
|
@@ -258,32 +345,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
258
345
|
}] } });
|
|
259
346
|
|
|
260
347
|
class HeaderMobileComponent {
|
|
261
|
-
constructor() {
|
|
348
|
+
constructor(themeService) {
|
|
349
|
+
this.themeService = themeService;
|
|
262
350
|
this.isMenuOpen = false;
|
|
351
|
+
this.currentTheme = 'light';
|
|
263
352
|
this.langModal = new EventEmitter();
|
|
264
353
|
this.theme = new EventEmitter();
|
|
265
354
|
}
|
|
355
|
+
ngOnInit() {
|
|
356
|
+
this.themeSubscription = this.themeService.currentTheme$.subscribe(theme => {
|
|
357
|
+
this.currentTheme = theme;
|
|
358
|
+
});
|
|
359
|
+
}
|
|
360
|
+
ngOnDestroy() {
|
|
361
|
+
this.themeSubscription?.unsubscribe();
|
|
362
|
+
}
|
|
266
363
|
openLanguagesModal() {
|
|
267
364
|
this.langModal.emit();
|
|
268
365
|
}
|
|
269
366
|
toggleTheme() {
|
|
367
|
+
this.themeService.toggleTheme();
|
|
270
368
|
this.theme.emit();
|
|
271
369
|
}
|
|
272
370
|
toggleMenu() {
|
|
273
371
|
this.isMenuOpen = !this.isMenuOpen;
|
|
274
372
|
}
|
|
275
|
-
|
|
276
|
-
|
|
373
|
+
getThemeIcon() {
|
|
374
|
+
return this.currentTheme === 'light' ? '🌙' : '☀️';
|
|
375
|
+
}
|
|
376
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderMobileComponent, deps: [{ token: ThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
377
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: HeaderMobileComponent, isStandalone: true, selector: "lib-header-mobile", inputs: { logo: "logo", logoDark: "logoDark", lang: "lang", navItems: "navItems", socialItems: "socialItems", homeLink: "homeLink" }, outputs: { langModal: "langModal", theme: "theme" }, ngImport: i0, template: "<header class=\"header-mobile\">\n <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n <div class=\"header-logo\">\n <!-- Logo -->\n <img [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\" [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\" />\n <span>LLUC LLULL</span>\n </div>\n </a>\n</header>\n\n<div class=\"header-actions\">\n <!-- Idioma -->\n <div class=\"left\">\n <button class=\"btn btn-primary\" (click)=\"openLanguagesModal()\">\n <span class=\"lang\">{{ lang }}</span>\n </button>\n </div>\n\n <!-- Icono de tema -->\n <div class=\"center\">\n <button class=\"btn btn-primary\" (click)=\"toggleTheme()\">\n <span>{{getThemeIcon()}}</span>\n </button>\n </div>\n\n <!-- Icono de men\u00FA -->\n <div class=\"right\">\n <button class=\"btn btn-primary\" (click)=\"toggleMenu()\">\n <span>\u2630</span>\n </button>\n </div>\n</div>\n\n\n@if(isMenuOpen && navItems && navItems.length > 0) {\n <lib-nav-modal\n [navItems]=\"navItems\"\n [socialItems]=\"socialItems\"\n (close)=\"isMenuOpen = false\"\n ></lib-nav-modal>\n}\n\n", styles: [":root{--font-titles: \"Bebas Neue\", system-ui, sans-serif;--font-base: \"Inter\", system-ui, sans-serif;--font-size-base: 16px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem}.header-mobile{display:flex;justify-content:center;align-items:center;padding:1rem 0;border-radius:0;position:fixed;top:0;z-index:100;background-color:var(--header-mobile-bg);width:100vw}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:36px;height:36px;object-fit:contain;object-position:center}.header-actions{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background-color:var(--header-mobile-bg);z-index:100;box-sizing:border-box}.header-actions .center{margin:0 auto}.lang{text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NavModalComponent, selector: "lib-nav-modal", inputs: ["navItems", "socialItems"], outputs: ["close"] }, { kind: "directive", type: LinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href"], outputs: ["anchorClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
277
378
|
}
|
|
278
379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderMobileComponent, decorators: [{
|
|
279
380
|
type: Component,
|
|
280
|
-
args: [{ selector: 'lib-header-mobile', standalone: true, imports: [CommonModule, LangModalComponent, NavModalComponent, LinkTypeDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"header-mobile\">\n <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n <div class=\"header-logo\">\n <!-- Logo -->\n <img [src]=\"logo?.url\" [alt]=\"logo?.alt\" />\n <span>LLUC LLULL</span>\n </div>\n </a>\n</header>\n\n<div class=\"header-actions\">\n <!-- Idioma -->\n <div class=\"left\">\n <button class=\"btn btn-primary\" (click)=\"openLanguagesModal()\">\n <span class=\"lang\">{{ lang }}</span>\n </button>\n </div>\n\n <!-- Icono de
|
|
281
|
-
}], propDecorators: { logo: [{
|
|
381
|
+
args: [{ selector: 'lib-header-mobile', standalone: true, imports: [CommonModule, LangModalComponent, NavModalComponent, LinkTypeDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"header-mobile\">\n <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n <div class=\"header-logo\">\n <!-- Logo -->\n <img [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\" [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\" />\n <span>LLUC LLULL</span>\n </div>\n </a>\n</header>\n\n<div class=\"header-actions\">\n <!-- Idioma -->\n <div class=\"left\">\n <button class=\"btn btn-primary\" (click)=\"openLanguagesModal()\">\n <span class=\"lang\">{{ lang }}</span>\n </button>\n </div>\n\n <!-- Icono de tema -->\n <div class=\"center\">\n <button class=\"btn btn-primary\" (click)=\"toggleTheme()\">\n <span>{{getThemeIcon()}}</span>\n </button>\n </div>\n\n <!-- Icono de men\u00FA -->\n <div class=\"right\">\n <button class=\"btn btn-primary\" (click)=\"toggleMenu()\">\n <span>\u2630</span>\n </button>\n </div>\n</div>\n\n\n@if(isMenuOpen && navItems && navItems.length > 0) {\n <lib-nav-modal\n [navItems]=\"navItems\"\n [socialItems]=\"socialItems\"\n (close)=\"isMenuOpen = false\"\n ></lib-nav-modal>\n}\n\n", styles: [":root{--font-titles: \"Bebas Neue\", system-ui, sans-serif;--font-base: \"Inter\", system-ui, sans-serif;--font-size-base: 16px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem}.header-mobile{display:flex;justify-content:center;align-items:center;padding:1rem 0;border-radius:0;position:fixed;top:0;z-index:100;background-color:var(--header-mobile-bg);width:100vw}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:36px;height:36px;object-fit:contain;object-position:center}.header-actions{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background-color:var(--header-mobile-bg);z-index:100;box-sizing:border-box}.header-actions .center{margin:0 auto}.lang{text-transform:uppercase}\n"] }]
|
|
382
|
+
}], ctorParameters: () => [{ type: ThemeService }], propDecorators: { logo: [{
|
|
383
|
+
type: Input
|
|
384
|
+
}], logoDark: [{
|
|
282
385
|
type: Input
|
|
283
386
|
}], lang: [{
|
|
284
387
|
type: Input
|
|
285
388
|
}], navItems: [{
|
|
286
389
|
type: Input
|
|
390
|
+
}], socialItems: [{
|
|
391
|
+
type: Input
|
|
287
392
|
}], homeLink: [{
|
|
288
393
|
type: Input
|
|
289
394
|
}], langModal: [{
|
|
@@ -294,11 +399,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
294
399
|
|
|
295
400
|
class SectionIntroComponent {
|
|
296
401
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionIntroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
297
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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\">\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 <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn btn-link\"\n >\n {{button.label}} \n </a>\n }\n</div>\n", styles: [":root{--
|
|
402
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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\">\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 <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn btn-link\"\n >\n {{button.label}} \n </a>\n }\n</div>\n", styles: [":root{--font-titles: \"Bebas Neue\", system-ui, sans-serif;--font-base: \"Inter\", system-ui, sans-serif;--font-size-base: 16px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem}.section-intro{text-align:start;padding:2rem 10rem;align-items:start}@media (max-width: 768px){.section-intro{padding:2rem 4rem}}.title,.subtitle{text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: LinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href"], outputs: ["anchorClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
298
403
|
}
|
|
299
404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionIntroComponent, decorators: [{
|
|
300
405
|
type: Component,
|
|
301
|
-
args: [{ selector: 'lib-section-intro', standalone: true, imports: [CommonModule, LinkTypeDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"section-intro\">\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 <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn btn-link\"\n >\n {{button.label}} \n </a>\n }\n</div>\n", styles: [":root{--
|
|
406
|
+
args: [{ selector: 'lib-section-intro', standalone: true, imports: [CommonModule, LinkTypeDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"section-intro\">\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 <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn btn-link\"\n >\n {{button.label}} \n </a>\n }\n</div>\n", styles: [":root{--font-titles: \"Bebas Neue\", system-ui, sans-serif;--font-base: \"Inter\", system-ui, sans-serif;--font-size-base: 16px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem}.section-intro{text-align:start;padding:2rem 10rem;align-items:start}@media (max-width: 768px){.section-intro{padding:2rem 4rem}}.title,.subtitle{text-transform:uppercase}\n"] }]
|
|
302
407
|
}], propDecorators: { pretitle: [{
|
|
303
408
|
type: Input
|
|
304
409
|
}], title: [{
|
|
@@ -313,11 +418,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
313
418
|
|
|
314
419
|
class CategoryProgressComponent {
|
|
315
420
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CategoryProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
316
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CategoryProgressComponent, isStandalone: true, selector: "lib-category-progress", inputs: { pretitle: "pretitle", title: "title", categories: "categories" }, ngImport: i0, template: "<div class=\"category-progress\">\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\">{{ category.title }}</h3>\n \n @for (item of category.items; track $index){\n <div class=\"item\">\n <span class=\"label\">{{ item.label }}</span>\n <div class=\"bar\">\n <div class=\"fill\" [style.width.%]=\"item.value\"></div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n \n</div>\n", styles: [":root{--
|
|
421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CategoryProgressComponent, isStandalone: true, selector: "lib-category-progress", inputs: { pretitle: "pretitle", title: "title", categories: "categories" }, ngImport: i0, template: "<div class=\"category-progress\">\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\">{{ category.title }}</h3>\n \n @for (item of category.items; track $index){\n <div class=\"item\">\n <span class=\"label\">{{ item.label }}</span>\n <div class=\"bar\">\n <div class=\"fill\" [style.width.%]=\"item.value\"></div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n \n</div>\n", styles: [":root{--font-titles: \"Bebas Neue\", system-ui, sans-serif;--font-base: \"Inter\", system-ui, sans-serif;--font-size-base: 16px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem}.category-progress{text-align:start;padding:2rem 10rem;align-items:start}@media (max-width: 768px){.category-progress{padding:2rem 4rem}}.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}.item .label{font-size:.9rem;margin-bottom:.3rem;display:block}.item .bar{background-color:var(--progress-bg);height:6px;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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
317
422
|
}
|
|
318
423
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CategoryProgressComponent, decorators: [{
|
|
319
424
|
type: Component,
|
|
320
|
-
args: [{ selector: 'lib-category-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"category-progress\">\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\">{{ category.title }}</h3>\n \n @for (item of category.items; track $index){\n <div class=\"item\">\n <span class=\"label\">{{ item.label }}</span>\n <div class=\"bar\">\n <div class=\"fill\" [style.width.%]=\"item.value\"></div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n \n</div>\n", styles: [":root{--
|
|
425
|
+
args: [{ selector: 'lib-category-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"category-progress\">\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\">{{ category.title }}</h3>\n \n @for (item of category.items; track $index){\n <div class=\"item\">\n <span class=\"label\">{{ item.label }}</span>\n <div class=\"bar\">\n <div class=\"fill\" [style.width.%]=\"item.value\"></div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n \n</div>\n", styles: [":root{--font-titles: \"Bebas Neue\", system-ui, sans-serif;--font-base: \"Inter\", system-ui, sans-serif;--font-size-base: 16px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem}.category-progress{text-align:start;padding:2rem 10rem;align-items:start}@media (max-width: 768px){.category-progress{padding:2rem 4rem}}.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}.item .label{font-size:.9rem;margin-bottom:.3rem;display:block}.item .bar{background-color:var(--progress-bg);height:6px;border-radius:3px;overflow:hidden}.item .bar .fill{background-color:var(--progress-color);height:100%;width:0;transition:width .3s ease}\n"] }]
|
|
321
426
|
}], propDecorators: { pretitle: [{
|
|
322
427
|
type: Input
|
|
323
428
|
}], title: [{
|
|
@@ -376,33 +481,52 @@ function mapImageOrGallery(data) {
|
|
|
376
481
|
return single ? [single] : [];
|
|
377
482
|
}
|
|
378
483
|
|
|
379
|
-
|
|
380
|
-
|
|
484
|
+
// helpers
|
|
485
|
+
const isArray = Array.isArray;
|
|
486
|
+
const isHttp = (u) => !!u && /^https?:\/\//i.test(u ?? '');
|
|
487
|
+
const mapNavModalWithLang = (props, _langCode) => mapNavModal(props);
|
|
488
|
+
const mapNavModal = (props) => {
|
|
489
|
+
if (!isArray(props))
|
|
381
490
|
return [];
|
|
382
|
-
return props
|
|
383
|
-
|
|
384
|
-
const
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
491
|
+
return props
|
|
492
|
+
.map((item) => {
|
|
493
|
+
const link = item?.nav_link ?? {};
|
|
494
|
+
const url = link.url ?? link.external_url ?? undefined;
|
|
495
|
+
const mapped = {
|
|
496
|
+
label: item?.label ?? link?.name ?? '',
|
|
497
|
+
url,
|
|
498
|
+
linkType: link?.linktype,
|
|
499
|
+
name: link?.name,
|
|
500
|
+
active: link?.active ?? true,
|
|
501
|
+
children: isArray(link?.children) ? link.children : [], // UiLibButtonI[]
|
|
392
502
|
};
|
|
393
|
-
|
|
503
|
+
if (!mapped.label || !mapped.url)
|
|
504
|
+
return null;
|
|
505
|
+
return mapped;
|
|
506
|
+
})
|
|
507
|
+
.filter((x) => !!x);
|
|
394
508
|
};
|
|
395
|
-
const
|
|
396
|
-
if (!
|
|
509
|
+
const mapSocialLinks = (props) => {
|
|
510
|
+
if (!isArray(props))
|
|
397
511
|
return [];
|
|
398
|
-
return props
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
512
|
+
return props
|
|
513
|
+
.map((item) => {
|
|
514
|
+
const link = item?.nav_link ?? item ?? {};
|
|
515
|
+
const url = link.url ?? link.external_url ?? undefined;
|
|
516
|
+
const mapped = {
|
|
517
|
+
label: item?.label ?? link?.name ?? '',
|
|
518
|
+
url: url ?? '',
|
|
519
|
+
linkType: link?.linktype ?? (isHttp(url) ? 'external' : 'internal'),
|
|
520
|
+
icon: (item?.icon ?? link?.icon ?? ''),
|
|
521
|
+
order: item?.order ?? link?.order,
|
|
522
|
+
};
|
|
523
|
+
if (!mapped.label || !mapped.url)
|
|
524
|
+
return null;
|
|
525
|
+
if (mapped.icon == null)
|
|
526
|
+
mapped.icon = '';
|
|
527
|
+
return mapped;
|
|
528
|
+
})
|
|
529
|
+
.filter((x) => !!x);
|
|
406
530
|
};
|
|
407
531
|
|
|
408
532
|
const mapHeaderClear = (props) => {
|
|
@@ -410,10 +534,13 @@ const mapHeaderClear = (props) => {
|
|
|
410
534
|
const currentLang = props?.lang || 'es';
|
|
411
535
|
// Mapear solo los navLinks del nav-modal con el idioma correcto
|
|
412
536
|
const navItems = mapNavModalWithLang(props?.['nav-modal']?.navLinks || [], currentLang);
|
|
537
|
+
const socialItems = mapSocialLinks(props?.['nav-modal']?.socialLinks || []);
|
|
413
538
|
return {
|
|
414
539
|
logo: mapImage(props?.logo),
|
|
540
|
+
logoDark: mapImage(props?.logoDark),
|
|
415
541
|
lang: currentLang,
|
|
416
542
|
navItems: navItems,
|
|
543
|
+
socialItems: socialItems,
|
|
417
544
|
homeLink: navItems[0]
|
|
418
545
|
};
|
|
419
546
|
};
|
|
@@ -557,5 +684,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
557
684
|
* Generated bundle index. Do not edit.
|
|
558
685
|
*/
|
|
559
686
|
|
|
560
|
-
export { CategoryProgressComponent, Default, HeaderClearComponent, HeaderMobileComponent, HeroSectionComponent, LangModalComponent, LinkType, LinkTypeDirective, MapperService, NavModalComponent, ScreenSizerService, SectionIntroComponent, componentMappers, mapButtons, mapImage, mapImageOrGallery };
|
|
687
|
+
export { CategoryProgressComponent, Default, HeaderClearComponent, HeaderMobileComponent, HeroSectionComponent, LangModalComponent, LinkType, LinkTypeDirective, MapperService, NavModalComponent, ScreenSizerService, SectionIntroComponent, ThemeService, componentMappers, mapButtons, mapImage, mapImageOrGallery };
|
|
561
688
|
//# sourceMappingURL=lluc_llull-ui-lib.mjs.map
|