@lluc_llull/ui-lib 0.5.0 → 0.5.2
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 +5 -3
- package/esm2022/lib/components/core/header-clear/header-clear.interface.mjs +1 -1
- package/esm2022/lib/components/core/header-mobile/header-mobile.component.mjs +5 -3
- 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/mapper/component-mappers/header-clear.mapper.mjs +4 -2
- package/esm2022/lib/services/mapper/component-mappers/nav-modal.mapper.mjs +43 -24
- package/fesm2022/lluc_llull-ui-lib.mjs +62 -37
- package/fesm2022/lluc_llull-ui-lib.mjs.map +1 -1
- package/lib/components/core/header-clear/header-clear.component.d.ts +3 -2
- package/lib/components/core/header-clear/header-clear.interface.d.ts +2 -1
- package/lib/components/core/header-mobile/header-mobile.component.d.ts +3 -2
- package/lib/components/core/header-mobile/header-mobile.interface.d.ts +2 -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/mapper/component-mappers/nav-modal.mapper.d.ts +4 -10
- package/package.json +1 -1
- package/src/lib/styles/main.css +13 -2
- package/styles/main.css +13 -2
|
@@ -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{--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) \". \"}
|
|
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{--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) \". \"}
|
|
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{--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) \". \"}.
|
|
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{--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) \". \"}.
|
|
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: [{
|
|
@@ -321,11 +321,11 @@ class HeaderClearComponent {
|
|
|
321
321
|
return this.currentTheme === 'light' ? '🌙' : '☀️';
|
|
322
322
|
}
|
|
323
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", 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 (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 }); }
|
|
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 }); }
|
|
325
325
|
}
|
|
326
326
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderClearComponent, decorators: [{
|
|
327
327
|
type: Component,
|
|
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 (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"] }]
|
|
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
329
|
}], ctorParameters: () => [{ type: ThemeService }], propDecorators: { logo: [{
|
|
330
330
|
type: Input
|
|
331
331
|
}], logoDark: [{
|
|
@@ -334,6 +334,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
334
334
|
type: Input
|
|
335
335
|
}], navItems: [{
|
|
336
336
|
type: Input
|
|
337
|
+
}], socialItems: [{
|
|
338
|
+
type: Input
|
|
337
339
|
}], homeLink: [{
|
|
338
340
|
type: Input
|
|
339
341
|
}], langModal: [{
|
|
@@ -372,11 +374,11 @@ class HeaderMobileComponent {
|
|
|
372
374
|
return this.currentTheme === 'light' ? '🌙' : '☀️';
|
|
373
375
|
}
|
|
374
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 }); }
|
|
375
|
-
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", 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 (close)=\"isMenuOpen = false\"\n ></lib-nav-modal>\n}\n\n", styles: [":root{--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 }); }
|
|
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 }); }
|
|
376
378
|
}
|
|
377
379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderMobileComponent, decorators: [{
|
|
378
380
|
type: Component,
|
|
379
|
-
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 (close)=\"isMenuOpen = false\"\n ></lib-nav-modal>\n}\n\n", styles: [":root{--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"] }]
|
|
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"] }]
|
|
380
382
|
}], ctorParameters: () => [{ type: ThemeService }], propDecorators: { logo: [{
|
|
381
383
|
type: Input
|
|
382
384
|
}], logoDark: [{
|
|
@@ -385,6 +387,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
385
387
|
type: Input
|
|
386
388
|
}], navItems: [{
|
|
387
389
|
type: Input
|
|
390
|
+
}], socialItems: [{
|
|
391
|
+
type: Input
|
|
388
392
|
}], homeLink: [{
|
|
389
393
|
type: Input
|
|
390
394
|
}], langModal: [{
|
|
@@ -395,11 +399,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
395
399
|
|
|
396
400
|
class SectionIntroComponent {
|
|
397
401
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionIntroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
398
|
-
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-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 }); }
|
|
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 }); }
|
|
399
403
|
}
|
|
400
404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionIntroComponent, decorators: [{
|
|
401
405
|
type: Component,
|
|
402
|
-
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-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"] }]
|
|
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"] }]
|
|
403
407
|
}], propDecorators: { pretitle: [{
|
|
404
408
|
type: Input
|
|
405
409
|
}], title: [{
|
|
@@ -414,11 +418,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
414
418
|
|
|
415
419
|
class CategoryProgressComponent {
|
|
416
420
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CategoryProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
417
|
-
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-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 }); }
|
|
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 }); }
|
|
418
422
|
}
|
|
419
423
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CategoryProgressComponent, decorators: [{
|
|
420
424
|
type: Component,
|
|
421
|
-
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-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"] }]
|
|
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"] }]
|
|
422
426
|
}], propDecorators: { pretitle: [{
|
|
423
427
|
type: Input
|
|
424
428
|
}], title: [{
|
|
@@ -477,33 +481,52 @@ function mapImageOrGallery(data) {
|
|
|
477
481
|
return single ? [single] : [];
|
|
478
482
|
}
|
|
479
483
|
|
|
480
|
-
|
|
481
|
-
|
|
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))
|
|
482
490
|
return [];
|
|
483
|
-
return props
|
|
484
|
-
|
|
485
|
-
const
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
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[]
|
|
493
502
|
};
|
|
494
|
-
|
|
503
|
+
if (!mapped.label || !mapped.url)
|
|
504
|
+
return null;
|
|
505
|
+
return mapped;
|
|
506
|
+
})
|
|
507
|
+
.filter((x) => !!x);
|
|
495
508
|
};
|
|
496
|
-
const
|
|
497
|
-
if (!
|
|
509
|
+
const mapSocialLinks = (props) => {
|
|
510
|
+
if (!isArray(props))
|
|
498
511
|
return [];
|
|
499
|
-
return props
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
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);
|
|
507
530
|
};
|
|
508
531
|
|
|
509
532
|
const mapHeaderClear = (props) => {
|
|
@@ -511,11 +534,13 @@ const mapHeaderClear = (props) => {
|
|
|
511
534
|
const currentLang = props?.lang || 'es';
|
|
512
535
|
// Mapear solo los navLinks del nav-modal con el idioma correcto
|
|
513
536
|
const navItems = mapNavModalWithLang(props?.['nav-modal']?.navLinks || [], currentLang);
|
|
537
|
+
const socialItems = mapSocialLinks(props?.['nav-modal']?.socialLinks || []);
|
|
514
538
|
return {
|
|
515
539
|
logo: mapImage(props?.logo),
|
|
516
540
|
logoDark: mapImage(props?.logoDark),
|
|
517
541
|
lang: currentLang,
|
|
518
542
|
navItems: navItems,
|
|
543
|
+
socialItems: socialItems,
|
|
519
544
|
homeLink: navItems[0]
|
|
520
545
|
};
|
|
521
546
|
};
|