@lluc_llull/ui-lib 0.4.5 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/core/category-progress/category-progress.component.mjs +3 -3
- package/esm2022/lib/components/core/header-clear/header-clear.component.mjs +24 -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 +24 -7
- package/esm2022/lib/components/core/header-mobile/header-mobile.interface.mjs +1 -1
- 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/services/index.mjs +2 -1
- package/esm2022/lib/services/mapper/component-mappers/header-clear.mapper.mjs +2 -1
- 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 +122 -20
- package/fesm2022/lluc_llull-ui-lib.mjs.map +1 -1
- package/lib/components/core/header-clear/header-clear.component.d.ts +13 -4
- package/lib/components/core/header-clear/header-clear.interface.d.ts +1 -0
- package/lib/components/core/header-mobile/header-mobile.component.d.ts +14 -5
- package/lib/components/core/header-mobile/header-mobile.interface.d.ts +1 -0
- package/lib/services/index.d.ts +1 -0
- 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 +53 -19
- package/styles/main.css +53 -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;
|
|
@@ -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=\"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) \". \"}.item{font-size:3.5rem}\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=\"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) \". \"}.item{font-size:3.5rem}\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 [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) \". \"}.item{font-size:3.5rem}\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 [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) \". \"}.item{font-size:3.5rem}\n"] }]
|
|
217
217
|
}], propDecorators: { navItems: [{
|
|
218
218
|
type: Input
|
|
219
219
|
}], socialItems: [{
|
|
@@ -222,28 +222,113 @@ 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", 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 }); }
|
|
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 (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
|
|
@@ -258,27 +343,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
258
343
|
}] } });
|
|
259
344
|
|
|
260
345
|
class HeaderMobileComponent {
|
|
261
|
-
constructor() {
|
|
346
|
+
constructor(themeService) {
|
|
347
|
+
this.themeService = themeService;
|
|
262
348
|
this.isMenuOpen = false;
|
|
349
|
+
this.currentTheme = 'light';
|
|
263
350
|
this.langModal = new EventEmitter();
|
|
264
351
|
this.theme = new EventEmitter();
|
|
265
352
|
}
|
|
353
|
+
ngOnInit() {
|
|
354
|
+
this.themeSubscription = this.themeService.currentTheme$.subscribe(theme => {
|
|
355
|
+
this.currentTheme = theme;
|
|
356
|
+
});
|
|
357
|
+
}
|
|
358
|
+
ngOnDestroy() {
|
|
359
|
+
this.themeSubscription?.unsubscribe();
|
|
360
|
+
}
|
|
266
361
|
openLanguagesModal() {
|
|
267
362
|
this.langModal.emit();
|
|
268
363
|
}
|
|
269
364
|
toggleTheme() {
|
|
365
|
+
this.themeService.toggleTheme();
|
|
270
366
|
this.theme.emit();
|
|
271
367
|
}
|
|
272
368
|
toggleMenu() {
|
|
273
369
|
this.isMenuOpen = !this.isMenuOpen;
|
|
274
370
|
}
|
|
275
|
-
|
|
276
|
-
|
|
371
|
+
getThemeIcon() {
|
|
372
|
+
return this.currentTheme === 'light' ? '🌙' : '☀️';
|
|
373
|
+
}
|
|
374
|
+
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 }); }
|
|
277
376
|
}
|
|
278
377
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderMobileComponent, decorators: [{
|
|
279
378
|
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: [{
|
|
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"] }]
|
|
380
|
+
}], ctorParameters: () => [{ type: ThemeService }], propDecorators: { logo: [{
|
|
381
|
+
type: Input
|
|
382
|
+
}], logoDark: [{
|
|
282
383
|
type: Input
|
|
283
384
|
}], lang: [{
|
|
284
385
|
type: Input
|
|
@@ -294,11 +395,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
294
395
|
|
|
295
396
|
class SectionIntroComponent {
|
|
296
397
|
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{--
|
|
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 }); }
|
|
298
399
|
}
|
|
299
400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionIntroComponent, decorators: [{
|
|
300
401
|
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{--
|
|
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"] }]
|
|
302
403
|
}], propDecorators: { pretitle: [{
|
|
303
404
|
type: Input
|
|
304
405
|
}], title: [{
|
|
@@ -313,11 +414,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
313
414
|
|
|
314
415
|
class CategoryProgressComponent {
|
|
315
416
|
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{--
|
|
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 }); }
|
|
317
418
|
}
|
|
318
419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CategoryProgressComponent, decorators: [{
|
|
319
420
|
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{--
|
|
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"] }]
|
|
321
422
|
}], propDecorators: { pretitle: [{
|
|
322
423
|
type: Input
|
|
323
424
|
}], title: [{
|
|
@@ -412,6 +513,7 @@ const mapHeaderClear = (props) => {
|
|
|
412
513
|
const navItems = mapNavModalWithLang(props?.['nav-modal']?.navLinks || [], currentLang);
|
|
413
514
|
return {
|
|
414
515
|
logo: mapImage(props?.logo),
|
|
516
|
+
logoDark: mapImage(props?.logoDark),
|
|
415
517
|
lang: currentLang,
|
|
416
518
|
navItems: navItems,
|
|
417
519
|
homeLink: navItems[0]
|
|
@@ -557,5 +659,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
557
659
|
* Generated bundle index. Do not edit.
|
|
558
660
|
*/
|
|
559
661
|
|
|
560
|
-
export { CategoryProgressComponent, Default, HeaderClearComponent, HeaderMobileComponent, HeroSectionComponent, LangModalComponent, LinkType, LinkTypeDirective, MapperService, NavModalComponent, ScreenSizerService, SectionIntroComponent, componentMappers, mapButtons, mapImage, mapImageOrGallery };
|
|
662
|
+
export { CategoryProgressComponent, Default, HeaderClearComponent, HeaderMobileComponent, HeroSectionComponent, LangModalComponent, LinkType, LinkTypeDirective, MapperService, NavModalComponent, ScreenSizerService, SectionIntroComponent, ThemeService, componentMappers, mapButtons, mapImage, mapImageOrGallery };
|
|
561
663
|
//# sourceMappingURL=lluc_llull-ui-lib.mjs.map
|