@lluc_llull/ui-lib 0.34.1 → 0.34.2

package/fesm2022/lluc_llull-ui-lib-headers-header-clear.mjs

@@ -9,6 +9,7 @@ import * as i1 from "@lluc_llull/ui-lib/theme";
 var HeaderClearComponent = class HeaderClearComponent {
 	themeService;
 	isMenuOpen = false;
+	isMenuClosing = false;
 	currentTheme = "light";
 	themeSubscription;
 	logo;
@@ -42,7 +43,22 @@ var HeaderClearComponent = class HeaderClearComponent {
 		this.theme.emit();
 	}
 	toggleMenu() {
-		this.isMenuOpen = !this.isMenuOpen;
+		if (this.isMenuOpen) {
+			this.closeMenu();
+			return;
+		}
+		this.isMenuClosing = false;
+		this.isMenuOpen = true;
+	}
+	closeMenu() {
+		if (!this.isMenuOpen && !this.isMenuClosing) return;
+		this.isMenuClosing = true;
+		this.isMenuOpen = false;
+	}
+	finishMenuClose(event) {
+		if (!this.isMenuClosing || event.propertyName !== "visibility") return;
+		if (!(event.target instanceof HTMLElement) || !event.target.classList.contains("modal-content")) return;
+		this.isMenuClosing = false;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -73,7 +89,7 @@ var HeaderClearComponent = class HeaderClearComponent {
 		},
 		usesOnChanges: true,
 		ngImport: i0,
-		template: "<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</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",
+		template: "<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</header>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
 		styles: [".header-clear{border-radius:0;position:sticky;top:0;z-index:100;padding-block:0;margin-top:1rem;transition:background .3s ease,box-shadow .3s ease;background:var(--header-bg)}.header-clear.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014}.header-clear.is-scrolled .header-logo a{padding-inline:1.5rem}.header-clear.is-scrolled .header-logo span{color:var(--header-logo-text-dark)}.header-clear.is-scrolled .header-actions{padding-inline:1.5rem}.header-clear.is-scrolled .header-actions .btn-header{background:var(--header-bg-fixed-light)}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;object-fit:contain;object-position:left}.header-logo span{display:flex;min-width:10rem}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:1rem}.lang{text-transform:uppercase}\n"],
 		dependencies: [
 			{
@@ -84,7 +100,11 @@ var HeaderClearComponent = class HeaderClearComponent {
 				kind: "component",
 				type: NavModalComponent,
 				selector: "lib-nav-modal",
-				inputs: ["navItems", "socialItems"],
+				inputs: [
+					"navItems",
+					"socialItems",
+					"closing"
+				],
 				outputs: ["close"]
 			},
 			{
@@ -132,7 +152,7 @@ i0.ɵɵngDeclareClassMetadata({
 				HeaderScrollDirective
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</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",
+			template: "<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</header>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
 			styles: [".header-clear{border-radius:0;position:sticky;top:0;z-index:100;padding-block:0;margin-top:1rem;transition:background .3s ease,box-shadow .3s ease;background:var(--header-bg)}.header-clear.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014}.header-clear.is-scrolled .header-logo a{padding-inline:1.5rem}.header-clear.is-scrolled .header-logo span{color:var(--header-logo-text-dark)}.header-clear.is-scrolled .header-actions{padding-inline:1.5rem}.header-clear.is-scrolled .header-actions .btn-header{background:var(--header-bg-fixed-light)}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;object-fit:contain;object-position:left}.header-logo span{display:flex;min-width:10rem}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:1rem}.lang{text-transform:uppercase}\n"]
 		}]
 	}],

package/fesm2022/lluc_llull-ui-lib-headers-header-clear.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-headers-header-clear.mjs","names":[],"sources":["../../../projects/ui-lib/headers/header-clear/header-clear.component.ts","../../../projects/ui-lib/headers/header-clear/header-clear.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n} from '@angular/core';\nimport { HeaderScrollDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport {\n    UiLibButtonI,\n    UiLibImageI,\n    UiLibNavItemsI,\n    UiLibSocialItemsI,\n} from '@lluc_llull/ui-lib/interfaces';\nimport { Theme, ThemeService } from '@lluc_llull/ui-lib/theme';\nimport { Subscription } from 'rxjs';\nimport { mapNavModal } from '@lluc_llull/ui-lib/mapper';\nimport { NavModalComponent } from '@lluc_llull/ui-lib/modals';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-header-clear',\n    standalone: true,\n    imports: [CommonModule, NavModalComponent, LinkTypeDirective, UiIconComponent, HeaderScrollDirective],\n    templateUrl: './header-clear.component.html',\n    styleUrl: './header-clear.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderClearComponent implements OnInit, OnDestroy, OnChanges {\n    isMenuOpen = false;\n    currentTheme: Theme = 'light';\n    private themeSubscription?: Subscription;\n\n    @Input() logo?: UiLibImageI;\n    @Input() logoDark?: UiLibImageI;\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n    @Input() homeLink?: UiLibButtonI;\n    @Input() navigation: any;\n    @Input() lang: string = 'es';\n\n    @Output() langModal = new EventEmitter<void>();\n    @Output() theme = new EventEmitter<void>();\n\n    constructor(private themeService: ThemeService) {}\n\n    ngOnInit(): void {\n        this.themeSubscription = this.themeService.currentTheme$.subscribe((theme) => {\n            this.currentTheme = theme;\n        });\n    }\n\n    ngOnChanges() {\n        this.navItems = mapNavModal(this.navigation, this.lang);\n    }\n\n    ngOnDestroy(): void {\n        this.themeSubscription?.unsubscribe();\n    }\n\n    openLanguagesModal(): void {\n        this.langModal.emit();\n    }\n\n    toggleTheme(): void {\n        this.themeService.toggleTheme();\n        this.theme.emit();\n    }\n\n    toggleMenu(): void {\n        this.isMenuOpen = !this.isMenuOpen;\n    }\n}\n","<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</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"],"mappings":";;;;;;;;AAgCA,IAAa,uBAAb,MAAa,qBAAoB;CAgBT;CAfpB,aAAa;CACb,eAAsB;CACd;CAEC;CACA;CACA;CACA;CACA;CACA;CACA,OAAe;CAEd,YAAY,IAAI,aAAY;CAC5B,QAAQ,IAAI,aAAY;CAElC,YAAoB,cAA0B;EAA1B,KAAA,eAAA;CAA6B;CAEjD,WAAQ;EACJ,KAAK,oBAAoB,KAAK,aAAa,cAAc,WAAW,UAAS;GACzE,KAAK,eAAe;EACxB,CAAC;CACL;CAEA,cAAW;EACP,KAAK,WAAW,YAAY,KAAK,YAAY,KAAK,IAAI;CAC1D;CAEA,cAAW;EACP,KAAK,mBAAmB,YAAW;CACvC;CAEA,qBAAkB;EACd,KAAK,UAAU,KAAI;CACvB;CAEA,cAAW;EACP,KAAK,aAAa,YAAW;EAC7B,KAAK,MAAM,KAAI;CACnB;CAEA,aAAU;EACN,KAAK,aAAa,CAAC,KAAK;CAC5B;CA3CS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA,EAAA,OAAA,GAAA,aAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;GAAA,UAAA;GAAA,UAAA;GAAA,aAAA;GAAA,UAAA;GAAA,YAAA;GAAA,MAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,OAAA;EAAA;EAAA,eAAA;EAAA,UAAA;EAAA,UChCjC;EAyCA,QAAA,CAAA,q4BAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDdc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,aAAA;IAAA,SAAA,CAAA,OAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,iBAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK3F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EARhC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAkB,YAChB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAmB;IAAiB;GAAqB;GAAC,iBAGpF,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,q4BAAA;EAAA,CAAA;;;;E,SAO9C,MAAA,M;E,aACA,MAAA,M;E,aACA,MAAA,M;E,gBACA,MAAA,M;E,aACA,MAAA,M;E,eACA,MAAA,M;E,SACA,MAAA,M;E,cAEA,MAAA,O;E,UACA,MAAA,O"}
+{"version":3,"file":"lluc_llull-ui-lib-headers-header-clear.mjs","names":[],"sources":["../../../projects/ui-lib/headers/header-clear/header-clear.component.ts","../../../projects/ui-lib/headers/header-clear/header-clear.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n} from '@angular/core';\nimport { HeaderScrollDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport {\n    UiLibButtonI,\n    UiLibImageI,\n    UiLibNavItemsI,\n    UiLibSocialItemsI,\n} from '@lluc_llull/ui-lib/interfaces';\nimport { Theme, ThemeService } from '@lluc_llull/ui-lib/theme';\nimport { Subscription } from 'rxjs';\nimport { mapNavModal } from '@lluc_llull/ui-lib/mapper';\nimport { NavModalComponent } from '@lluc_llull/ui-lib/modals';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-header-clear',\n    standalone: true,\n    imports: [CommonModule, NavModalComponent, LinkTypeDirective, UiIconComponent, HeaderScrollDirective],\n    templateUrl: './header-clear.component.html',\n    styleUrl: './header-clear.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderClearComponent implements OnInit, OnDestroy, OnChanges {\n    isMenuOpen = false;\n    isMenuClosing = false;\n    currentTheme: Theme = 'light';\n    private themeSubscription?: Subscription;\n\n    @Input() logo?: UiLibImageI;\n    @Input() logoDark?: UiLibImageI;\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n    @Input() homeLink?: UiLibButtonI;\n    @Input() navigation: any;\n    @Input() lang: string = 'es';\n\n    @Output() langModal = new EventEmitter<void>();\n    @Output() theme = new EventEmitter<void>();\n\n    constructor(private themeService: ThemeService) {}\n\n    ngOnInit(): void {\n        this.themeSubscription = this.themeService.currentTheme$.subscribe((theme) => {\n            this.currentTheme = theme;\n        });\n    }\n\n    ngOnChanges() {\n        this.navItems = mapNavModal(this.navigation, this.lang);\n    }\n\n    ngOnDestroy(): void {\n        this.themeSubscription?.unsubscribe();\n    }\n\n    openLanguagesModal(): void {\n        this.langModal.emit();\n    }\n\n    toggleTheme(): void {\n        this.themeService.toggleTheme();\n        this.theme.emit();\n    }\n\n    toggleMenu(): void {\n        if (this.isMenuOpen) {\n            this.closeMenu();\n            return;\n        }\n\n        this.isMenuClosing = false;\n        this.isMenuOpen = true;\n    }\n\n    closeMenu(): void {\n        if (!this.isMenuOpen && !this.isMenuClosing) return;\n\n        this.isMenuClosing = true;\n        this.isMenuOpen = false;\n    }\n\n    finishMenuClose(event: TransitionEvent): void {\n        if (!this.isMenuClosing || event.propertyName !== 'visibility') return;\n        if (!(event.target instanceof HTMLElement) || !event.target.classList.contains('modal-content')) return;\n\n        this.isMenuClosing = false;\n    }\n}\n","<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</header>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n"],"mappings":";;;;;;;;AAgCA,IAAa,uBAAb,MAAa,qBAAoB;CAiBT;CAhBpB,aAAa;CACb,gBAAgB;CAChB,eAAsB;CACd;CAEC;CACA;CACA;CACA;CACA;CACA;CACA,OAAe;CAEd,YAAY,IAAI,aAAY;CAC5B,QAAQ,IAAI,aAAY;CAElC,YAAoB,cAA0B;EAA1B,KAAA,eAAA;CAA6B;CAEjD,WAAQ;EACJ,KAAK,oBAAoB,KAAK,aAAa,cAAc,WAAW,UAAS;GACzE,KAAK,eAAe;EACxB,CAAC;CACL;CAEA,cAAW;EACP,KAAK,WAAW,YAAY,KAAK,YAAY,KAAK,IAAI;CAC1D;CAEA,cAAW;EACP,KAAK,mBAAmB,YAAW;CACvC;CAEA,qBAAkB;EACd,KAAK,UAAU,KAAI;CACvB;CAEA,cAAW;EACP,KAAK,aAAa,YAAW;EAC7B,KAAK,MAAM,KAAI;CACnB;CAEA,aAAU;EACN,IAAI,KAAK,YAAY;GACjB,KAAK,UAAS;GACd;EACJ;EAEA,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,YAAS;EACL,IAAI,CAAC,KAAK,cAAc,CAAC,KAAK,eAAe;EAE7C,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,gBAAgB,OAAsB;EAClC,IAAI,CAAC,KAAK,iBAAiB,MAAM,iBAAiB,cAAc;EAChE,IAAI,EAAE,MAAM,kBAAkB,gBAAgB,CAAC,MAAM,OAAO,UAAU,SAAS,eAAe,GAAG;EAEjG,KAAK,gBAAgB;CACzB;CAhES,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA,EAAA,OAAA,GAAA,aAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;GAAA,UAAA;GAAA,UAAA;GAAA,aAAA;GAAA,UAAA;GAAA,YAAA;GAAA,MAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,OAAA;EAAA;EAAA,eAAA;EAAA,UAAA;EAAA,UChCjC;EA2CA,QAAA,CAAA,q4BAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDhBc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,OAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,iBAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK3F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EARhC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAkB,YAChB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAmB;IAAiB;GAAqB;GAAC,iBAGpF,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,q4BAAA;EAAA,CAAA;;;;E,SAQ9C,MAAA,M;E,aACA,MAAA,M;E,aACA,MAAA,M;E,gBACA,MAAA,M;E,aACA,MAAA,M;E,eACA,MAAA,M;E,SACA,MAAA,M;E,cAEA,MAAA,O;E,UACA,MAAA,O"}

package/fesm2022/lluc_llull-ui-lib-headers-header-mobile.mjs

@@ -9,6 +9,7 @@ import * as i1 from "@lluc_llull/ui-lib/theme";
 var HeaderMobileComponent = class HeaderMobileComponent {
 	themeService;
 	isMenuOpen = false;
+	isMenuClosing = false;
 	currentTheme = "light";
 	themeSubscription;
 	logo;
@@ -42,7 +43,22 @@ var HeaderMobileComponent = class HeaderMobileComponent {
 		this.theme.emit();
 	}
 	toggleMenu() {
-		this.isMenuOpen = !this.isMenuOpen;
+		if (this.isMenuOpen) {
+			this.closeMenu();
+			return;
+		}
+		this.isMenuClosing = false;
+		this.isMenuOpen = true;
+	}
+	closeMenu() {
+		if (!this.isMenuOpen && !this.isMenuClosing) return;
+		this.isMenuClosing = true;
+		this.isMenuOpen = false;
+	}
+	finishMenuClose(event) {
+		if (!this.isMenuClosing || event.propertyName !== "visibility") return;
+		if (!(event.target instanceof HTMLElement) || !event.target.classList.contains("modal-content")) return;
+		this.isMenuClosing = false;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -73,7 +89,7 @@ var HeaderMobileComponent = class HeaderMobileComponent {
 		},
 		usesOnChanges: true,
 		ngImport: i0,
-		template: "<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (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-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\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",
+		template: "<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (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-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
 		styles: [".header-mobile{display:flex;justify-content:center;align-items:center;padding:1rem 0;border-radius:0;position:fixed;top:0;z-index:100;width:100vw;background:var(--header-bg);transition:background .3s ease,box-shadow .3s ease}.header-mobile.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;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: [
 			{
@@ -84,7 +100,11 @@ var HeaderMobileComponent = class HeaderMobileComponent {
 				kind: "component",
 				type: NavModalComponent,
 				selector: "lib-nav-modal",
-				inputs: ["navItems", "socialItems"],
+				inputs: [
+					"navItems",
+					"socialItems",
+					"closing"
+				],
 				outputs: ["close"]
 			},
 			{
@@ -132,7 +152,7 @@ i0.ɵɵngDeclareClassMetadata({
 				UiIconComponent
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (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-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\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",
+			template: "<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (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-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
 			styles: [".header-mobile{display:flex;justify-content:center;align-items:center;padding:1rem 0;border-radius:0;position:fixed;top:0;z-index:100;width:100vw;background:var(--header-bg);transition:background .3s ease,box-shadow .3s ease}.header-mobile.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;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"]
 		}]
 	}],

package/fesm2022/lluc_llull-ui-lib-headers-header-mobile.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-headers-header-mobile.mjs","names":[],"sources":["../../../projects/ui-lib/headers/header-mobile/header-mobile.component.ts","../../../projects/ui-lib/headers/header-mobile/header-mobile.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n} from '@angular/core';\nimport { HeaderScrollDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport {\n    UiLibButtonI,\n    UiLibImageI,\n    UiLibNavItemsI,\n    UiLibSocialItemsI,\n} from '@lluc_llull/ui-lib/interfaces';\nimport { Theme, ThemeService } from '@lluc_llull/ui-lib/theme';\nimport { Subscription } from 'rxjs';\nimport { mapNavModal } from '@lluc_llull/ui-lib/mapper';\nimport { NavModalComponent } from '@lluc_llull/ui-lib/modals';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-header-mobile',\n    standalone: true,\n    imports: [CommonModule, NavModalComponent, HeaderScrollDirective, LinkTypeDirective, UiIconComponent],\n    templateUrl: './header-mobile.component.html',\n    styleUrl: './header-mobile.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderMobileComponent implements OnInit, OnChanges, OnDestroy {\n    isMenuOpen = false;\n    currentTheme: Theme = 'light';\n    private themeSubscription?: Subscription;\n\n    @Input() logo?: UiLibImageI;\n    @Input() logoDark?: UiLibImageI;\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n    @Input() homeLink?: UiLibButtonI;\n    @Input() navigation: any;\n    @Input() lang: string = 'es';\n\n    @Output() langModal = new EventEmitter<void>();\n    @Output() theme = new EventEmitter<void>();\n\n    constructor(private themeService: ThemeService) {}\n\n    ngOnInit(): void {\n        this.themeSubscription = this.themeService.currentTheme$.subscribe((theme) => {\n            this.currentTheme = theme;\n        });\n    }\n\n    ngOnChanges() {\n        this.navItems = mapNavModal(this.navigation, this.lang);\n    }\n\n    ngOnDestroy(): void {\n        this.themeSubscription?.unsubscribe();\n    }\n\n    openLanguagesModal(): void {\n        this.langModal.emit();\n    }\n\n    toggleTheme(): void {\n        this.themeService.toggleTheme();\n        this.theme.emit();\n    }\n\n    toggleMenu(): void {\n        this.isMenuOpen = !this.isMenuOpen;\n    }\n}\n","<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (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-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\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"],"mappings":";;;;;;;;AAgCA,IAAa,wBAAb,MAAa,sBAAqB;CAgBV;CAfpB,aAAa;CACb,eAAsB;CACd;CAEC;CACA;CACA;CACA;CACA;CACA;CACA,OAAe;CAEd,YAAY,IAAI,aAAY;CAC5B,QAAQ,IAAI,aAAY;CAElC,YAAoB,cAA0B;EAA1B,KAAA,eAAA;CAA6B;CAEjD,WAAQ;EACJ,KAAK,oBAAoB,KAAK,aAAa,cAAc,WAAW,UAAS;GACzE,KAAK,eAAe;EACxB,CAAC;CACL;CAEA,cAAW;EACP,KAAK,WAAW,YAAY,KAAK,YAAY,KAAK,IAAI;CAC1D;CAEA,cAAW;EACP,KAAK,mBAAmB,YAAW;CACvC;CAEA,qBAAkB;EACd,KAAK,UAAU,KAAI;CACvB;CAEA,cAAW;EACP,KAAK,aAAa,YAAW;EAC7B,KAAK,MAAM,KAAI;CACnB;CAEA,aAAU;EACN,KAAK,aAAa,CAAC,KAAK;CAC5B;CA3CS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA,EAAA,OAAA,GAAA,aAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;GAAA,UAAA;GAAA,UAAA;GAAA,aAAA;GAAA,UAAA;GAAA,YAAA;GAAA,MAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,OAAA;EAAA;EAAA,eAAA;EAAA,UAAA;EAAA,UChClC;EA8CA,QAAA,CAAA,swBAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDnBc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,aAAA;IAAA,SAAA,CAAA,OAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,iBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK3F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EARjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAmB,YACjB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAuB;IAAmB;GAAe;GAAC,iBAGpF,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,swBAAA;EAAA,CAAA;;;;E,SAO9C,MAAA,M;E,aACA,MAAA,M;E,aACA,MAAA,M;E,gBACA,MAAA,M;E,aACA,MAAA,M;E,eACA,MAAA,M;E,SACA,MAAA,M;E,cAEA,MAAA,O;E,UACA,MAAA,O"}
+{"version":3,"file":"lluc_llull-ui-lib-headers-header-mobile.mjs","names":[],"sources":["../../../projects/ui-lib/headers/header-mobile/header-mobile.component.ts","../../../projects/ui-lib/headers/header-mobile/header-mobile.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n} from '@angular/core';\nimport { HeaderScrollDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport {\n    UiLibButtonI,\n    UiLibImageI,\n    UiLibNavItemsI,\n    UiLibSocialItemsI,\n} from '@lluc_llull/ui-lib/interfaces';\nimport { Theme, ThemeService } from '@lluc_llull/ui-lib/theme';\nimport { Subscription } from 'rxjs';\nimport { mapNavModal } from '@lluc_llull/ui-lib/mapper';\nimport { NavModalComponent } from '@lluc_llull/ui-lib/modals';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-header-mobile',\n    standalone: true,\n    imports: [CommonModule, NavModalComponent, HeaderScrollDirective, LinkTypeDirective, UiIconComponent],\n    templateUrl: './header-mobile.component.html',\n    styleUrl: './header-mobile.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderMobileComponent implements OnInit, OnChanges, OnDestroy {\n    isMenuOpen = false;\n    isMenuClosing = false;\n    currentTheme: Theme = 'light';\n    private themeSubscription?: Subscription;\n\n    @Input() logo?: UiLibImageI;\n    @Input() logoDark?: UiLibImageI;\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n    @Input() homeLink?: UiLibButtonI;\n    @Input() navigation: any;\n    @Input() lang: string = 'es';\n\n    @Output() langModal = new EventEmitter<void>();\n    @Output() theme = new EventEmitter<void>();\n\n    constructor(private themeService: ThemeService) {}\n\n    ngOnInit(): void {\n        this.themeSubscription = this.themeService.currentTheme$.subscribe((theme) => {\n            this.currentTheme = theme;\n        });\n    }\n\n    ngOnChanges() {\n        this.navItems = mapNavModal(this.navigation, this.lang);\n    }\n\n    ngOnDestroy(): void {\n        this.themeSubscription?.unsubscribe();\n    }\n\n    openLanguagesModal(): void {\n        this.langModal.emit();\n    }\n\n    toggleTheme(): void {\n        this.themeService.toggleTheme();\n        this.theme.emit();\n    }\n\n    toggleMenu(): void {\n        if (this.isMenuOpen) {\n            this.closeMenu();\n            return;\n        }\n\n        this.isMenuClosing = false;\n        this.isMenuOpen = true;\n    }\n\n    closeMenu(): void {\n        if (!this.isMenuOpen && !this.isMenuClosing) return;\n\n        this.isMenuClosing = true;\n        this.isMenuOpen = false;\n    }\n\n    finishMenuClose(event: TransitionEvent): void {\n        if (!this.isMenuClosing || event.propertyName !== 'visibility') return;\n        if (!(event.target instanceof HTMLElement) || !event.target.classList.contains('modal-content')) return;\n\n        this.isMenuClosing = false;\n    }\n}\n","<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (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-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n"],"mappings":";;;;;;;;AAgCA,IAAa,wBAAb,MAAa,sBAAqB;CAiBV;CAhBpB,aAAa;CACb,gBAAgB;CAChB,eAAsB;CACd;CAEC;CACA;CACA;CACA;CACA;CACA;CACA,OAAe;CAEd,YAAY,IAAI,aAAY;CAC5B,QAAQ,IAAI,aAAY;CAElC,YAAoB,cAA0B;EAA1B,KAAA,eAAA;CAA6B;CAEjD,WAAQ;EACJ,KAAK,oBAAoB,KAAK,aAAa,cAAc,WAAW,UAAS;GACzE,KAAK,eAAe;EACxB,CAAC;CACL;CAEA,cAAW;EACP,KAAK,WAAW,YAAY,KAAK,YAAY,KAAK,IAAI;CAC1D;CAEA,cAAW;EACP,KAAK,mBAAmB,YAAW;CACvC;CAEA,qBAAkB;EACd,KAAK,UAAU,KAAI;CACvB;CAEA,cAAW;EACP,KAAK,aAAa,YAAW;EAC7B,KAAK,MAAM,KAAI;CACnB;CAEA,aAAU;EACN,IAAI,KAAK,YAAY;GACjB,KAAK,UAAS;GACd;EACJ;EAEA,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,YAAS;EACL,IAAI,CAAC,KAAK,cAAc,CAAC,KAAK,eAAe;EAE7C,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,gBAAgB,OAAsB;EAClC,IAAI,CAAC,KAAK,iBAAiB,MAAM,iBAAiB,cAAc;EAChE,IAAI,EAAE,MAAM,kBAAkB,gBAAgB,CAAC,MAAM,OAAO,UAAU,SAAS,eAAe,GAAG;EAEjG,KAAK,gBAAgB;CACzB;CAhES,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA,EAAA,OAAA,GAAA,aAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;GAAA,UAAA;GAAA,UAAA;GAAA,aAAA;GAAA,UAAA;GAAA,YAAA;GAAA,MAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,OAAA;EAAA;EAAA,eAAA;EAAA,UAAA;EAAA,UChClC;EAgDA,QAAA,CAAA,swBAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDrBc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,OAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,iBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK3F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EARjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAmB,YACjB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAuB;IAAmB;GAAe;GAAC,iBAGpF,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,swBAAA;EAAA,CAAA;;;;E,SAQ9C,MAAA,M;E,aACA,MAAA,M;E,aACA,MAAA,M;E,gBACA,MAAA,M;E,aACA,MAAA,M;E,eACA,MAAA,M;E,SACA,MAAA,M;E,cAEA,MAAA,O;E,UACA,MAAA,O"}

package/fesm2022/lluc_llull-ui-lib-headers.mjs

@@ -9,6 +9,7 @@ import * as i1 from "@lluc_llull/ui-lib/theme";
 var HeaderClearComponent = class HeaderClearComponent {
 	themeService;
 	isMenuOpen = false;
+	isMenuClosing = false;
 	currentTheme = "light";
 	themeSubscription;
 	logo;
@@ -42,7 +43,22 @@ var HeaderClearComponent = class HeaderClearComponent {
 		this.theme.emit();
 	}
 	toggleMenu() {
-		this.isMenuOpen = !this.isMenuOpen;
+		if (this.isMenuOpen) {
+			this.closeMenu();
+			return;
+		}
+		this.isMenuClosing = false;
+		this.isMenuOpen = true;
+	}
+	closeMenu() {
+		if (!this.isMenuOpen && !this.isMenuClosing) return;
+		this.isMenuClosing = true;
+		this.isMenuOpen = false;
+	}
+	finishMenuClose(event) {
+		if (!this.isMenuClosing || event.propertyName !== "visibility") return;
+		if (!(event.target instanceof HTMLElement) || !event.target.classList.contains("modal-content")) return;
+		this.isMenuClosing = false;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -73,7 +89,7 @@ var HeaderClearComponent = class HeaderClearComponent {
 		},
 		usesOnChanges: true,
 		ngImport: i0,
-		template: "<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</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",
+		template: "<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</header>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
 		styles: [".header-clear{border-radius:0;position:sticky;top:0;z-index:100;padding-block:0;margin-top:1rem;transition:background .3s ease,box-shadow .3s ease;background:var(--header-bg)}.header-clear.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014}.header-clear.is-scrolled .header-logo a{padding-inline:1.5rem}.header-clear.is-scrolled .header-logo span{color:var(--header-logo-text-dark)}.header-clear.is-scrolled .header-actions{padding-inline:1.5rem}.header-clear.is-scrolled .header-actions .btn-header{background:var(--header-bg-fixed-light)}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;object-fit:contain;object-position:left}.header-logo span{display:flex;min-width:10rem}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:1rem}.lang{text-transform:uppercase}\n"],
 		dependencies: [
 			{
@@ -84,7 +100,11 @@ var HeaderClearComponent = class HeaderClearComponent {
 				kind: "component",
 				type: NavModalComponent,
 				selector: "lib-nav-modal",
-				inputs: ["navItems", "socialItems"],
+				inputs: [
+					"navItems",
+					"socialItems",
+					"closing"
+				],
 				outputs: ["close"]
 			},
 			{
@@ -132,7 +152,7 @@ i0.ɵɵngDeclareClassMetadata({
 				HeaderScrollDirective
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</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",
+			template: "<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</header>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
 			styles: [".header-clear{border-radius:0;position:sticky;top:0;z-index:100;padding-block:0;margin-top:1rem;transition:background .3s ease,box-shadow .3s ease;background:var(--header-bg)}.header-clear.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014}.header-clear.is-scrolled .header-logo a{padding-inline:1.5rem}.header-clear.is-scrolled .header-logo span{color:var(--header-logo-text-dark)}.header-clear.is-scrolled .header-actions{padding-inline:1.5rem}.header-clear.is-scrolled .header-actions .btn-header{background:var(--header-bg-fixed-light)}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;object-fit:contain;object-position:left}.header-logo span{display:flex;min-width:10rem}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:1rem}.lang{text-transform:uppercase}\n"]
 		}]
 	}],
@@ -152,6 +172,7 @@ i0.ɵɵngDeclareClassMetadata({
 var HeaderMobileComponent = class HeaderMobileComponent {
 	themeService;
 	isMenuOpen = false;
+	isMenuClosing = false;
 	currentTheme = "light";
 	themeSubscription;
 	logo;
@@ -185,7 +206,22 @@ var HeaderMobileComponent = class HeaderMobileComponent {
 		this.theme.emit();
 	}
 	toggleMenu() {
-		this.isMenuOpen = !this.isMenuOpen;
+		if (this.isMenuOpen) {
+			this.closeMenu();
+			return;
+		}
+		this.isMenuClosing = false;
+		this.isMenuOpen = true;
+	}
+	closeMenu() {
+		if (!this.isMenuOpen && !this.isMenuClosing) return;
+		this.isMenuClosing = true;
+		this.isMenuOpen = false;
+	}
+	finishMenuClose(event) {
+		if (!this.isMenuClosing || event.propertyName !== "visibility") return;
+		if (!(event.target instanceof HTMLElement) || !event.target.classList.contains("modal-content")) return;
+		this.isMenuClosing = false;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -216,7 +252,7 @@ var HeaderMobileComponent = class HeaderMobileComponent {
 		},
 		usesOnChanges: true,
 		ngImport: i0,
-		template: "<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (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-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\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",
+		template: "<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (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-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
 		styles: [".header-mobile{display:flex;justify-content:center;align-items:center;padding:1rem 0;border-radius:0;position:fixed;top:0;z-index:100;width:100vw;background:var(--header-bg);transition:background .3s ease,box-shadow .3s ease}.header-mobile.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;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: [
 			{
@@ -227,7 +263,11 @@ var HeaderMobileComponent = class HeaderMobileComponent {
 				kind: "component",
 				type: NavModalComponent,
 				selector: "lib-nav-modal",
-				inputs: ["navItems", "socialItems"],
+				inputs: [
+					"navItems",
+					"socialItems",
+					"closing"
+				],
 				outputs: ["close"]
 			},
 			{
@@ -275,7 +315,7 @@ i0.ɵɵngDeclareClassMetadata({
 				UiIconComponent
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (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-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\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",
+			template: "<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (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-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
 			styles: [".header-mobile{display:flex;justify-content:center;align-items:center;padding:1rem 0;border-radius:0;position:fixed;top:0;z-index:100;width:100vw;background:var(--header-bg);transition:background .3s ease,box-shadow .3s ease}.header-mobile.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;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"]
 		}]
 	}],

package/fesm2022/lluc_llull-ui-lib-headers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-headers.mjs","names":[],"sources":["../../../projects/ui-lib/headers/header-clear/header-clear.component.ts","../../../projects/ui-lib/headers/header-clear/header-clear.component.html","../../../projects/ui-lib/headers/header-mobile/header-mobile.component.ts","../../../projects/ui-lib/headers/header-mobile/header-mobile.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n} from '@angular/core';\nimport { HeaderScrollDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport {\n    UiLibButtonI,\n    UiLibImageI,\n    UiLibNavItemsI,\n    UiLibSocialItemsI,\n} from '@lluc_llull/ui-lib/interfaces';\nimport { Theme, ThemeService } from '@lluc_llull/ui-lib/theme';\nimport { Subscription } from 'rxjs';\nimport { mapNavModal } from '@lluc_llull/ui-lib/mapper';\nimport { NavModalComponent } from '@lluc_llull/ui-lib/modals';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-header-clear',\n    standalone: true,\n    imports: [CommonModule, NavModalComponent, LinkTypeDirective, UiIconComponent, HeaderScrollDirective],\n    templateUrl: './header-clear.component.html',\n    styleUrl: './header-clear.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderClearComponent implements OnInit, OnDestroy, OnChanges {\n    isMenuOpen = false;\n    currentTheme: Theme = 'light';\n    private themeSubscription?: Subscription;\n\n    @Input() logo?: UiLibImageI;\n    @Input() logoDark?: UiLibImageI;\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n    @Input() homeLink?: UiLibButtonI;\n    @Input() navigation: any;\n    @Input() lang: string = 'es';\n\n    @Output() langModal = new EventEmitter<void>();\n    @Output() theme = new EventEmitter<void>();\n\n    constructor(private themeService: ThemeService) {}\n\n    ngOnInit(): void {\n        this.themeSubscription = this.themeService.currentTheme$.subscribe((theme) => {\n            this.currentTheme = theme;\n        });\n    }\n\n    ngOnChanges() {\n        this.navItems = mapNavModal(this.navigation, this.lang);\n    }\n\n    ngOnDestroy(): void {\n        this.themeSubscription?.unsubscribe();\n    }\n\n    openLanguagesModal(): void {\n        this.langModal.emit();\n    }\n\n    toggleTheme(): void {\n        this.themeService.toggleTheme();\n        this.theme.emit();\n    }\n\n    toggleMenu(): void {\n        this.isMenuOpen = !this.isMenuOpen;\n    }\n}\n","<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</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","import { CommonModule } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n} from '@angular/core';\nimport { HeaderScrollDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport {\n    UiLibButtonI,\n    UiLibImageI,\n    UiLibNavItemsI,\n    UiLibSocialItemsI,\n} from '@lluc_llull/ui-lib/interfaces';\nimport { Theme, ThemeService } from '@lluc_llull/ui-lib/theme';\nimport { Subscription } from 'rxjs';\nimport { mapNavModal } from '@lluc_llull/ui-lib/mapper';\nimport { NavModalComponent } from '@lluc_llull/ui-lib/modals';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-header-mobile',\n    standalone: true,\n    imports: [CommonModule, NavModalComponent, HeaderScrollDirective, LinkTypeDirective, UiIconComponent],\n    templateUrl: './header-mobile.component.html',\n    styleUrl: './header-mobile.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderMobileComponent implements OnInit, OnChanges, OnDestroy {\n    isMenuOpen = false;\n    currentTheme: Theme = 'light';\n    private themeSubscription?: Subscription;\n\n    @Input() logo?: UiLibImageI;\n    @Input() logoDark?: UiLibImageI;\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n    @Input() homeLink?: UiLibButtonI;\n    @Input() navigation: any;\n    @Input() lang: string = 'es';\n\n    @Output() langModal = new EventEmitter<void>();\n    @Output() theme = new EventEmitter<void>();\n\n    constructor(private themeService: ThemeService) {}\n\n    ngOnInit(): void {\n        this.themeSubscription = this.themeService.currentTheme$.subscribe((theme) => {\n            this.currentTheme = theme;\n        });\n    }\n\n    ngOnChanges() {\n        this.navItems = mapNavModal(this.navigation, this.lang);\n    }\n\n    ngOnDestroy(): void {\n        this.themeSubscription?.unsubscribe();\n    }\n\n    openLanguagesModal(): void {\n        this.langModal.emit();\n    }\n\n    toggleTheme(): void {\n        this.themeService.toggleTheme();\n        this.theme.emit();\n    }\n\n    toggleMenu(): void {\n        this.isMenuOpen = !this.isMenuOpen;\n    }\n}\n","<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (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-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\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"],"mappings":"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"}
+{"version":3,"file":"lluc_llull-ui-lib-headers.mjs","names":[],"sources":["../../../projects/ui-lib/headers/header-clear/header-clear.component.ts","../../../projects/ui-lib/headers/header-clear/header-clear.component.html","../../../projects/ui-lib/headers/header-mobile/header-mobile.component.ts","../../../projects/ui-lib/headers/header-mobile/header-mobile.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n} from '@angular/core';\nimport { HeaderScrollDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport {\n    UiLibButtonI,\n    UiLibImageI,\n    UiLibNavItemsI,\n    UiLibSocialItemsI,\n} from '@lluc_llull/ui-lib/interfaces';\nimport { Theme, ThemeService } from '@lluc_llull/ui-lib/theme';\nimport { Subscription } from 'rxjs';\nimport { mapNavModal } from '@lluc_llull/ui-lib/mapper';\nimport { NavModalComponent } from '@lluc_llull/ui-lib/modals';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-header-clear',\n    standalone: true,\n    imports: [CommonModule, NavModalComponent, LinkTypeDirective, UiIconComponent, HeaderScrollDirective],\n    templateUrl: './header-clear.component.html',\n    styleUrl: './header-clear.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderClearComponent implements OnInit, OnDestroy, OnChanges {\n    isMenuOpen = false;\n    isMenuClosing = false;\n    currentTheme: Theme = 'light';\n    private themeSubscription?: Subscription;\n\n    @Input() logo?: UiLibImageI;\n    @Input() logoDark?: UiLibImageI;\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n    @Input() homeLink?: UiLibButtonI;\n    @Input() navigation: any;\n    @Input() lang: string = 'es';\n\n    @Output() langModal = new EventEmitter<void>();\n    @Output() theme = new EventEmitter<void>();\n\n    constructor(private themeService: ThemeService) {}\n\n    ngOnInit(): void {\n        this.themeSubscription = this.themeService.currentTheme$.subscribe((theme) => {\n            this.currentTheme = theme;\n        });\n    }\n\n    ngOnChanges() {\n        this.navItems = mapNavModal(this.navigation, this.lang);\n    }\n\n    ngOnDestroy(): void {\n        this.themeSubscription?.unsubscribe();\n    }\n\n    openLanguagesModal(): void {\n        this.langModal.emit();\n    }\n\n    toggleTheme(): void {\n        this.themeService.toggleTheme();\n        this.theme.emit();\n    }\n\n    toggleMenu(): void {\n        if (this.isMenuOpen) {\n            this.closeMenu();\n            return;\n        }\n\n        this.isMenuClosing = false;\n        this.isMenuOpen = true;\n    }\n\n    closeMenu(): void {\n        if (!this.isMenuOpen && !this.isMenuClosing) return;\n\n        this.isMenuClosing = true;\n        this.isMenuOpen = false;\n    }\n\n    finishMenuClose(event: TransitionEvent): void {\n        if (!this.isMenuClosing || event.propertyName !== 'visibility') return;\n        if (!(event.target instanceof HTMLElement) || !event.target.classList.contains('modal-content')) return;\n\n        this.isMenuClosing = false;\n    }\n}\n","<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</header>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n","import { CommonModule } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n} from '@angular/core';\nimport { HeaderScrollDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport {\n    UiLibButtonI,\n    UiLibImageI,\n    UiLibNavItemsI,\n    UiLibSocialItemsI,\n} from '@lluc_llull/ui-lib/interfaces';\nimport { Theme, ThemeService } from '@lluc_llull/ui-lib/theme';\nimport { Subscription } from 'rxjs';\nimport { mapNavModal } from '@lluc_llull/ui-lib/mapper';\nimport { NavModalComponent } from '@lluc_llull/ui-lib/modals';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-header-mobile',\n    standalone: true,\n    imports: [CommonModule, NavModalComponent, HeaderScrollDirective, LinkTypeDirective, UiIconComponent],\n    templateUrl: './header-mobile.component.html',\n    styleUrl: './header-mobile.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderMobileComponent implements OnInit, OnChanges, OnDestroy {\n    isMenuOpen = false;\n    isMenuClosing = false;\n    currentTheme: Theme = 'light';\n    private themeSubscription?: Subscription;\n\n    @Input() logo?: UiLibImageI;\n    @Input() logoDark?: UiLibImageI;\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n    @Input() homeLink?: UiLibButtonI;\n    @Input() navigation: any;\n    @Input() lang: string = 'es';\n\n    @Output() langModal = new EventEmitter<void>();\n    @Output() theme = new EventEmitter<void>();\n\n    constructor(private themeService: ThemeService) {}\n\n    ngOnInit(): void {\n        this.themeSubscription = this.themeService.currentTheme$.subscribe((theme) => {\n            this.currentTheme = theme;\n        });\n    }\n\n    ngOnChanges() {\n        this.navItems = mapNavModal(this.navigation, this.lang);\n    }\n\n    ngOnDestroy(): void {\n        this.themeSubscription?.unsubscribe();\n    }\n\n    openLanguagesModal(): void {\n        this.langModal.emit();\n    }\n\n    toggleTheme(): void {\n        this.themeService.toggleTheme();\n        this.theme.emit();\n    }\n\n    toggleMenu(): void {\n        if (this.isMenuOpen) {\n            this.closeMenu();\n            return;\n        }\n\n        this.isMenuClosing = false;\n        this.isMenuOpen = true;\n    }\n\n    closeMenu(): void {\n        if (!this.isMenuOpen && !this.isMenuClosing) return;\n\n        this.isMenuClosing = true;\n        this.isMenuOpen = false;\n    }\n\n    finishMenuClose(event: TransitionEvent): void {\n        if (!this.isMenuClosing || event.propertyName !== 'visibility') return;\n        if (!(event.target instanceof HTMLElement) || !event.target.classList.contains('modal-content')) return;\n\n        this.isMenuClosing = false;\n    }\n}\n","<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (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-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n"],"mappings":";;;;;;;;AAgCA,IAAa,uBAAb,MAAa,qBAAoB;CAiBT;CAhBpB,aAAa;CACb,gBAAgB;CAChB,eAAsB;CACd;CAEC;CACA;CACA;CACA;CACA;CACA;CACA,OAAe;CAEd,YAAY,IAAI,aAAY;CAC5B,QAAQ,IAAI,aAAY;CAElC,YAAoB,cAA0B;EAA1B,KAAA,eAAA;CAA6B;CAEjD,WAAQ;EACJ,KAAK,oBAAoB,KAAK,aAAa,cAAc,WAAW,UAAS;GACzE,KAAK,eAAe;EACxB,CAAC;CACL;CAEA,cAAW;EACP,KAAK,WAAW,YAAY,KAAK,YAAY,KAAK,IAAI;CAC1D;CAEA,cAAW;EACP,KAAK,mBAAmB,YAAW;CACvC;CAEA,qBAAkB;EACd,KAAK,UAAU,KAAI;CACvB;CAEA,cAAW;EACP,KAAK,aAAa,YAAW;EAC7B,KAAK,MAAM,KAAI;CACnB;CAEA,aAAU;EACN,IAAI,KAAK,YAAY;GACjB,KAAK,UAAS;GACd;EACJ;EAEA,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,YAAS;EACL,IAAI,CAAC,KAAK,cAAc,CAAC,KAAK,eAAe;EAE7C,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,gBAAgB,OAAsB;EAClC,IAAI,CAAC,KAAK,iBAAiB,MAAM,iBAAiB,cAAc;EAChE,IAAI,EAAE,MAAM,kBAAkB,gBAAgB,CAAC,MAAM,OAAO,UAAU,SAAS,eAAe,GAAG;EAEjG,KAAK,gBAAgB;CACzB;CAhES,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA,EAAA,OAAA,GAAA,aAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;GAAA,UAAA;GAAA,UAAA;GAAA,aAAA;GAAA,UAAA;GAAA,YAAA;GAAA,MAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,OAAA;EAAA;EAAA,eAAA;EAAA,UAAA;EAAA,UChCjC;EA2CA,QAAA,CAAA,q4BAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDhBc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,OAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,iBAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK3F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EARhC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAkB,YAChB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAmB;IAAiB;GAAqB;GAAC,iBAGpF,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,q4BAAA;EAAA,CAAA;;;;E,SAQ9C,MAAA,M;E,aACA,MAAA,M;E,aACA,MAAA,M;E,gBACA,MAAA,M;E,aACA,MAAA,M;E,eACA,MAAA,M;E,SACA,MAAA,M;E,cAEA,MAAA,O;E,UACA,MAAA,O;;;AEfL,IAAa,wBAAb,MAAa,sBAAqB;CAiBV;CAhBpB,aAAa;CACb,gBAAgB;CAChB,eAAsB;CACd;CAEC;CACA;CACA;CACA;CACA;CACA;CACA,OAAe;CAEd,YAAY,IAAI,aAAY;CAC5B,QAAQ,IAAI,aAAY;CAElC,YAAoB,cAA0B;EAA1B,KAAA,eAAA;CAA6B;CAEjD,WAAQ;EACJ,KAAK,oBAAoB,KAAK,aAAa,cAAc,WAAW,UAAS;GACzE,KAAK,eAAe;EACxB,CAAC;CACL;CAEA,cAAW;EACP,KAAK,WAAW,YAAY,KAAK,YAAY,KAAK,IAAI;CAC1D;CAEA,cAAW;EACP,KAAK,mBAAmB,YAAW;CACvC;CAEA,qBAAkB;EACd,KAAK,UAAU,KAAI;CACvB;CAEA,cAAW;EACP,KAAK,aAAa,YAAW;EAC7B,KAAK,MAAM,KAAI;CACnB;CAEA,aAAU;EACN,IAAI,KAAK,YAAY;GACjB,KAAK,UAAS;GACd;EACJ;EAEA,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,YAAS;EACL,IAAI,CAAC,KAAK,cAAc,CAAC,KAAK,eAAe;EAE7C,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,gBAAgB,OAAsB;EAClC,IAAI,CAAC,KAAK,iBAAiB,MAAM,iBAAiB,cAAc;EAChE,IAAI,EAAE,MAAM,kBAAkB,gBAAgB,CAAC,MAAM,OAAO,UAAU,SAAS,eAAe,GAAG;EAEjG,KAAK,gBAAgB;CACzB;CAhES,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA,EAAA,OAAA,GAAA,aAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;GAAA,UAAA;GAAA,UAAA;GAAA,aAAA;GAAA,UAAA;GAAA,YAAA;GAAA,MAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,OAAA;EAAA;EAAA,eAAA;EAAA,UAAA;EAAA,UChClC;EAgDA,QAAA,CAAA,swBAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDrBc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,OAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,iBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK3F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EARjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAmB,YACjB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAuB;IAAmB;GAAe;GAAC,iBAGpF,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,swBAAA;EAAA,CAAA;;;;E,SAQ9C,MAAA,M;E,aACA,MAAA,M;E,aACA,MAAA,M;E,gBACA,MAAA,M;E,aACA,MAAA,M;E,eACA,MAAA,M;E,SACA,MAAA,M;E,cAEA,MAAA,O;E,UACA,MAAA,O"}

package/fesm2022/lluc_llull-ui-lib-modals.mjs

@@ -1,38 +1,25 @@
 import { CommonModule } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Optional, Output } from "@angular/core";
-import * as i1 from "@angular/material/dialog";
-import { MAT_DIALOG_DATA } from "@angular/material/dialog";
-import { mapLangModal } from "@lluc_llull/ui-lib/mapper";
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from "@angular/core";
 import { LinkTypeDirective } from "@lluc_llull/ui-lib/directives";
 import { UiIconComponent } from "@lluc_llull/ui-lib/shared";
 var LangModalComponent = class LangModalComponent {
-	data;
-	dialogRef;
-	langs;
-	constructor(data, dialogRef) {
-		this.data = data;
-		this.dialogRef = dialogRef;
-		this.langs = mapLangModal(data.langs, data.currentLang);
-	}
+	langs = [];
+	closing = false;
+	close = new EventEmitter();
+	select = new EventEmitter();
 	selectLang(lang) {
-		this.dialogRef?.close(lang);
+		this.select.emit(lang);
 	}
 	closeModal() {
-		this.dialogRef?.close();
+		this.close.emit();
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.4",
 		ngImport: i0,
 		type: LangModalComponent,
-		deps: [{
-			token: MAT_DIALOG_DATA,
-			optional: true
-		}, {
-			token: i1.MatDialogRef,
-			optional: true
-		}],
+		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
@@ -41,9 +28,18 @@ var LangModalComponent = class LangModalComponent {
 		type: LangModalComponent,
 		isStandalone: true,
 		selector: "lib-lang-modal",
+		inputs: {
+			langs: "langs",
+			closing: "closing"
+		},
+		outputs: {
+			close: "close",
+			select: "select"
+		},
+		host: { properties: { "class.is-closing": "closing" } },
 		ngImport: i0,
-		template: "<div class=\"modal-content\">\n  <button (click)=\"closeModal()\" class=\"close-btn\">✕</button>\n  @if (langs && langs.length > 0) {\n    <ol>\n      @for (lang of langs; track lang.id) {\n        <li (click)=\"selectLang(lang)\">\n          <span class=\"modal-item\">{{ lang.label }}</span>\n        </li>\n      }\n    </ol>\n  }\n</div>\n",
-		styles: [":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:450px;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) \". \"}.modal-item{font-size:3.5rem}@media(max-width:768px){.modal-item{font-size:3rem}}\n"],
+		template: "<button\n  (click)=\"closeModal()\"\n  class=\"close-btn\"\n  [class.is-closing]=\"closing\"\n  type=\"button\"\n  aria-label=\"Close modal\"\n>\n  ✕\n</button>\n<div class=\"modal-content\" [class.is-closing]=\"closing\">\n  @if (langs && langs.length > 0) {\n    <ol>\n      @for (lang of langs; track lang.id) {\n        <li (click)=\"selectLang(lang)\">\n          <span class=\"modal-item\">{{ lang.label }}</span>\n        </li>\n      }\n    </ol>\n  }\n</div>\n",
+		styles: [":host{position:fixed;inset:0;width:100vw;height:100vh;background:transparent;isolation:isolate;z-index:1000;display:flex;align-items:center;justify-content:center}:host:before{content:\"\";position:absolute;inset:0;z-index:0;background:var(--modal-bg);opacity:1;transform:scaleY(1);transform-origin:top center;transition:transform .36s cubic-bezier(.22,1,.36,1),opacity .36s cubic-bezier(.22,1,.36,1)}@starting-style{:host:before{opacity:0;transform:scaleY(0)}}:host.is-closing:before{transform-origin:top center;opacity:0;transform:scaleY(0);transition-delay:.42s}.modal-content{position:relative;z-index:1;opacity:1;transform:translateY(0) scale(1);transform-origin:center;transition:opacity .26s cubic-bezier(.22,1,.36,1) .18s}@starting-style{.modal-content{opacity:0}}.modal-content.is-closing{opacity:0;visibility:hidden;transition:opacity .26s cubic-bezier(.22,1,.36,1) .34s,visibility 1ms linear 779ms}.close-btn.is-closing{opacity:0;pointer-events:none}@media(prefers-reduced-motion:reduce){.modal-content,.modal-content.is-closing{transform:none;transition-duration:1ms}:host:before,:host.is-closing:before{opacity:0;transform:scaleY(0);transition-delay:0ms;transition-duration:1ms}}.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;transition:opacity .18s cubic-bezier(.22,1,.36,1)}ol{padding:0;margin:0;text-align:center;width:100%;max-width:450px;list-style:none;counter-reset:item}ol>li{opacity:1;transform:translateY(0);transition:opacity .42s cubic-bezier(.22,1,.36,1) .36s,transform .42s cubic-bezier(.22,1,.36,1) .36s}@starting-style{ol>li{opacity:0;transform:translateY(16px)}}@media(prefers-reduced-motion:reduce){ol>li{transform:none;transition-duration:1ms;transition-delay:0ms}}li{cursor:pointer;text-align:start;text-transform:uppercase;counter-increment:item}li:before{content:counter(item,decimal-leading-zero) \". \"}.modal-item{font-size:3.5rem}@media(max-width:768px){.modal-item{font-size:3rem}}\n"],
 		dependencies: [{
 			kind: "ngmodule",
 			type: CommonModule
@@ -62,25 +58,23 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "lib-lang-modal",
 			standalone: true,
 			imports: [CommonModule],
+			host: { "[class.is-closing]": "closing" },
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<div class=\"modal-content\">\n  <button (click)=\"closeModal()\" class=\"close-btn\">✕</button>\n  @if (langs && langs.length > 0) {\n    <ol>\n      @for (lang of langs; track lang.id) {\n        <li (click)=\"selectLang(lang)\">\n          <span class=\"modal-item\">{{ lang.label }}</span>\n        </li>\n      }\n    </ol>\n  }\n</div>\n",
-			styles: [":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:450px;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) \". \"}.modal-item{font-size:3.5rem}@media(max-width:768px){.modal-item{font-size:3rem}}\n"]
+			template: "<button\n  (click)=\"closeModal()\"\n  class=\"close-btn\"\n  [class.is-closing]=\"closing\"\n  type=\"button\"\n  aria-label=\"Close modal\"\n>\n  ✕\n</button>\n<div class=\"modal-content\" [class.is-closing]=\"closing\">\n  @if (langs && langs.length > 0) {\n    <ol>\n      @for (lang of langs; track lang.id) {\n        <li (click)=\"selectLang(lang)\">\n          <span class=\"modal-item\">{{ lang.label }}</span>\n        </li>\n      }\n    </ol>\n  }\n</div>\n",
+			styles: [":host{position:fixed;inset:0;width:100vw;height:100vh;background:transparent;isolation:isolate;z-index:1000;display:flex;align-items:center;justify-content:center}:host:before{content:\"\";position:absolute;inset:0;z-index:0;background:var(--modal-bg);opacity:1;transform:scaleY(1);transform-origin:top center;transition:transform .36s cubic-bezier(.22,1,.36,1),opacity .36s cubic-bezier(.22,1,.36,1)}@starting-style{:host:before{opacity:0;transform:scaleY(0)}}:host.is-closing:before{transform-origin:top center;opacity:0;transform:scaleY(0);transition-delay:.42s}.modal-content{position:relative;z-index:1;opacity:1;transform:translateY(0) scale(1);transform-origin:center;transition:opacity .26s cubic-bezier(.22,1,.36,1) .18s}@starting-style{.modal-content{opacity:0}}.modal-content.is-closing{opacity:0;visibility:hidden;transition:opacity .26s cubic-bezier(.22,1,.36,1) .34s,visibility 1ms linear 779ms}.close-btn.is-closing{opacity:0;pointer-events:none}@media(prefers-reduced-motion:reduce){.modal-content,.modal-content.is-closing{transform:none;transition-duration:1ms}:host:before,:host.is-closing:before{opacity:0;transform:scaleY(0);transition-delay:0ms;transition-duration:1ms}}.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;transition:opacity .18s cubic-bezier(.22,1,.36,1)}ol{padding:0;margin:0;text-align:center;width:100%;max-width:450px;list-style:none;counter-reset:item}ol>li{opacity:1;transform:translateY(0);transition:opacity .42s cubic-bezier(.22,1,.36,1) .36s,transform .42s cubic-bezier(.22,1,.36,1) .36s}@starting-style{ol>li{opacity:0;transform:translateY(16px)}}@media(prefers-reduced-motion:reduce){ol>li{transform:none;transition-duration:1ms;transition-delay:0ms}}li{cursor:pointer;text-align:start;text-transform:uppercase;counter-increment:item}li:before{content:counter(item,decimal-leading-zero) \". \"}.modal-item{font-size:3.5rem}@media(max-width:768px){.modal-item{font-size:3rem}}\n"]
 		}]
 	}],
-	ctorParameters: () => [{
-		type: void 0,
-		decorators: [{ type: Optional }, {
-			type: Inject,
-			args: [MAT_DIALOG_DATA]
-		}]
-	}, {
-		type: i1.MatDialogRef,
-		decorators: [{ type: Optional }]
-	}]
+	propDecorators: {
+		langs: [{ type: Input }],
+		closing: [{ type: Input }],
+		close: [{ type: Output }],
+		select: [{ type: Output }]
+	}
 });
 var NavModalComponent = class NavModalComponent {
 	navItems;
 	socialItems;
+	closing = false;
 	close = new EventEmitter();
 	closeModal() {
 		this.close.emit();
@@ -101,12 +95,14 @@ var NavModalComponent = class NavModalComponent {
 		selector: "lib-nav-modal",
 		inputs: {
 			navItems: "navItems",
-			socialItems: "socialItems"
+			socialItems: "socialItems",
+			closing: "closing"
 		},
 		outputs: { close: "close" },
+		host: { properties: { "class.is-closing": "closing" } },
 		ngImport: i0,
-		template: "<div class=\"modal-content\">\n  <button (click)=\"closeModal()\" class=\"close-btn\">✕</button>\n\n  @if (navItems?.length) {\n    <ol>\n      @for (item of navItems; track item.name) {\n        <a [href]=\"item.url\" [linkType]=\"item.linkType\" (click)=\"closeModal()\">\n          <li>\n            <span class=\"modal-item\">{{ item.label }}</span>\n          </li>\n        </a>\n      }\n    </ol>\n  }\n\n  @if (socialItems?.length) {\n    <div class=\"btn-group\">\n      @for (social of socialItems; track social.label) {\n        <a class=\"btn btn-link\" [href]=\"social.url\" [linkType]=\"social.linkType\">\n          <ui-icon [name]=\"social.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n          {{ social.label }}\n        </a>\n      }\n    </div>\n  }\n</div>\n",
-		styles: [":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:450px;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) \". \"}.btn-link{text-transform:none}.btn-group{margin-top:0}@media(max-width:768px){.modal-item{font-size:2.5rem}}\n"],
+		template: "<button (click)=\"closeModal()\" class=\"close-btn\" [class.is-closing]=\"closing\" type=\"button\" aria-label=\"Close menu\">✕</button>\n<div class=\"modal-content\" [class.is-closing]=\"closing\">\n\n  @if (navItems?.length) {\n    <ol>\n      @for (item of navItems; track item.name) {\n        <a [href]=\"item.url\" [linkType]=\"item.linkType\" (click)=\"closeModal()\">\n          <li>\n            <span class=\"modal-item\">{{ item.label }}</span>\n          </li>\n        </a>\n      }\n    </ol>\n  }\n\n  @if (socialItems?.length) {\n    <div class=\"btn-group\">\n      @for (social of socialItems; track social.label) {\n        <a class=\"btn btn-link\" [href]=\"social.url\" [linkType]=\"social.linkType\">\n          <ui-icon [name]=\"social.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n          {{ social.label }}\n        </a>\n      }\n    </div>\n  }\n</div>\n",
+		styles: [":host{position:fixed;inset:0;width:100vw;height:100vh;background:transparent;isolation:isolate;z-index:1000;display:flex;align-items:center;justify-content:center}:host:before{content:\"\";position:absolute;inset:0;z-index:0;background:var(--modal-bg);opacity:1;transform:scaleY(1);transform-origin:top center;transition:transform .36s cubic-bezier(.22,1,.36,1),opacity .36s cubic-bezier(.22,1,.36,1)}@starting-style{:host:before{opacity:0;transform:scaleY(0)}}:host.is-closing:before{transform-origin:top center;opacity:0;transform:scaleY(0);transition-delay:.66s}.modal-content{position:relative;z-index:1;opacity:1;transform:translateY(0) scale(1);transform-origin:center;transition:opacity .26s cubic-bezier(.22,1,.36,1) .18s}@starting-style{.modal-content{opacity:0}}.modal-content.is-closing{opacity:0;visibility:hidden;transition:opacity .26s cubic-bezier(.22,1,.36,1) .58s,visibility 1ms linear 1019ms}.modal-content.is-closing ol>a{opacity:0;transform:translateY(16px);transition-delay:.24s;transition-duration:.42s}.modal-content.is-closing .btn-group{opacity:0;transform:translateY(12px);transition-delay:0ms;transition-duration:.22s}@media(prefers-reduced-motion:reduce){.modal-content,.modal-content.is-closing,ol>a,.btn-group{transform:none;transition-duration:1ms;transition-delay:0ms}:host:before,:host.is-closing:before{opacity:0;transform:scaleY(0);transition-delay:0ms;transition-duration:1ms}}.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;transition:opacity .18s cubic-bezier(.22,1,.36,1)}.close-btn.is-closing{opacity:0;pointer-events:none;transition-duration:.22s}ol{padding:0;margin:0;text-align:center;width:100%;max-width:450px;list-style:none;counter-reset:item}ol>a{display:block;opacity:1;transform:translateY(0);transition:opacity .42s cubic-bezier(.22,1,.36,1) .36s,transform .42s cubic-bezier(.22,1,.36,1) .36s}@starting-style{ol>a{opacity:0;transform:translateY(16px)}}.btn-group{margin-top:0;opacity:1;transform:translateY(0);transition:opacity .22s cubic-bezier(.22,1,.36,1) .8s,transform .22s cubic-bezier(.22,1,.36,1) .8s}@starting-style{.btn-group{opacity:0;transform:translateY(12px)}}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) \". \"}.btn-link{text-transform:none}@media(max-width:768px){.modal-item{font-size:2.5rem}}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -148,14 +144,16 @@ i0.ɵɵngDeclareClassMetadata({
 				LinkTypeDirective,
 				UiIconComponent
 			],
+			host: { "[class.is-closing]": "closing" },
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<div class=\"modal-content\">\n  <button (click)=\"closeModal()\" class=\"close-btn\">✕</button>\n\n  @if (navItems?.length) {\n    <ol>\n      @for (item of navItems; track item.name) {\n        <a [href]=\"item.url\" [linkType]=\"item.linkType\" (click)=\"closeModal()\">\n          <li>\n            <span class=\"modal-item\">{{ item.label }}</span>\n          </li>\n        </a>\n      }\n    </ol>\n  }\n\n  @if (socialItems?.length) {\n    <div class=\"btn-group\">\n      @for (social of socialItems; track social.label) {\n        <a class=\"btn btn-link\" [href]=\"social.url\" [linkType]=\"social.linkType\">\n          <ui-icon [name]=\"social.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n          {{ social.label }}\n        </a>\n      }\n    </div>\n  }\n</div>\n",
-			styles: [":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:450px;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) \". \"}.btn-link{text-transform:none}.btn-group{margin-top:0}@media(max-width:768px){.modal-item{font-size:2.5rem}}\n"]
+			template: "<button (click)=\"closeModal()\" class=\"close-btn\" [class.is-closing]=\"closing\" type=\"button\" aria-label=\"Close menu\">✕</button>\n<div class=\"modal-content\" [class.is-closing]=\"closing\">\n\n  @if (navItems?.length) {\n    <ol>\n      @for (item of navItems; track item.name) {\n        <a [href]=\"item.url\" [linkType]=\"item.linkType\" (click)=\"closeModal()\">\n          <li>\n            <span class=\"modal-item\">{{ item.label }}</span>\n          </li>\n        </a>\n      }\n    </ol>\n  }\n\n  @if (socialItems?.length) {\n    <div class=\"btn-group\">\n      @for (social of socialItems; track social.label) {\n        <a class=\"btn btn-link\" [href]=\"social.url\" [linkType]=\"social.linkType\">\n          <ui-icon [name]=\"social.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n          {{ social.label }}\n        </a>\n      }\n    </div>\n  }\n</div>\n",
+			styles: [":host{position:fixed;inset:0;width:100vw;height:100vh;background:transparent;isolation:isolate;z-index:1000;display:flex;align-items:center;justify-content:center}:host:before{content:\"\";position:absolute;inset:0;z-index:0;background:var(--modal-bg);opacity:1;transform:scaleY(1);transform-origin:top center;transition:transform .36s cubic-bezier(.22,1,.36,1),opacity .36s cubic-bezier(.22,1,.36,1)}@starting-style{:host:before{opacity:0;transform:scaleY(0)}}:host.is-closing:before{transform-origin:top center;opacity:0;transform:scaleY(0);transition-delay:.66s}.modal-content{position:relative;z-index:1;opacity:1;transform:translateY(0) scale(1);transform-origin:center;transition:opacity .26s cubic-bezier(.22,1,.36,1) .18s}@starting-style{.modal-content{opacity:0}}.modal-content.is-closing{opacity:0;visibility:hidden;transition:opacity .26s cubic-bezier(.22,1,.36,1) .58s,visibility 1ms linear 1019ms}.modal-content.is-closing ol>a{opacity:0;transform:translateY(16px);transition-delay:.24s;transition-duration:.42s}.modal-content.is-closing .btn-group{opacity:0;transform:translateY(12px);transition-delay:0ms;transition-duration:.22s}@media(prefers-reduced-motion:reduce){.modal-content,.modal-content.is-closing,ol>a,.btn-group{transform:none;transition-duration:1ms;transition-delay:0ms}:host:before,:host.is-closing:before{opacity:0;transform:scaleY(0);transition-delay:0ms;transition-duration:1ms}}.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;transition:opacity .18s cubic-bezier(.22,1,.36,1)}.close-btn.is-closing{opacity:0;pointer-events:none;transition-duration:.22s}ol{padding:0;margin:0;text-align:center;width:100%;max-width:450px;list-style:none;counter-reset:item}ol>a{display:block;opacity:1;transform:translateY(0);transition:opacity .42s cubic-bezier(.22,1,.36,1) .36s,transform .42s cubic-bezier(.22,1,.36,1) .36s}@starting-style{ol>a{opacity:0;transform:translateY(16px)}}.btn-group{margin-top:0;opacity:1;transform:translateY(0);transition:opacity .22s cubic-bezier(.22,1,.36,1) .8s,transform .22s cubic-bezier(.22,1,.36,1) .8s}@starting-style{.btn-group{opacity:0;transform:translateY(12px)}}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) \". \"}.btn-link{text-transform:none}@media(max-width:768px){.modal-item{font-size:2.5rem}}\n"]
 		}]
 	}],
 	propDecorators: {
 		navItems: [{ type: Input }],
 		socialItems: [{ type: Input }],
+		closing: [{ type: Input }],
 		close: [{ type: Output }]
 	}
 });

package/fesm2022/lluc_llull-ui-lib-modals.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-modals.mjs","names":[],"sources":["../../../projects/ui-lib/modals/lang-modal/lang-modal.component.ts","../../../projects/ui-lib/modals/lang-modal/lang-modal.component.html","../../../projects/ui-lib/modals/nav-modal/nav-modal.component.ts","../../../projects/ui-lib/modals/nav-modal/nav-modal.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Inject, Optional } from '@angular/core';\nimport { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';\nimport { UiLibLangItemI } from '@lluc_llull/ui-lib/interfaces';\nimport { mapLangModal } from '@lluc_llull/ui-lib/mapper';\n\ninterface LangModalData {\n    langs: any[];\n    currentLang: string;\n}\n\n@Component({\n    selector: 'lib-lang-modal',\n    standalone: true,\n    imports: [CommonModule],\n    templateUrl: './lang-modal.component.html',\n    styleUrl: './lang-modal.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LangModalComponent {\n    langs!: UiLibLangItemI[];\n\n    constructor(\n        @Optional() @Inject(MAT_DIALOG_DATA) public data: LangModalData,\n        @Optional() public dialogRef?: MatDialogRef<LangModalComponent>,\n    ) {\n        this.langs = mapLangModal(data.langs, data.currentLang);\n    }\n\n    selectLang(lang: UiLibLangItemI) {\n        this.dialogRef?.close(lang);\n    }\n\n    closeModal() {\n        this.dialogRef?.close();\n    }\n}\n","<div class=\"modal-content\">\n  <button (click)=\"closeModal()\" class=\"close-btn\">✕</button>\n  @if (langs && langs.length > 0) {\n    <ol>\n      @for (lang of langs; track lang.id) {\n        <li (click)=\"selectLang(lang)\">\n          <span class=\"modal-item\">{{ lang.label }}</span>\n        </li>\n      }\n    </ol>\n  }\n</div>\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibNavItemsI, UiLibSocialItemsI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-nav-modal',\n    standalone: true,\n    imports: [CommonModule, LinkTypeDirective, UiIconComponent],\n    templateUrl: './nav-modal.component.html',\n    styleUrl: './nav-modal.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NavModalComponent {\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n\n    @Output() close = new EventEmitter<void>();\n\n    closeModal() {\n        this.close.emit();\n    }\n}\n","<div class=\"modal-content\">\n  <button (click)=\"closeModal()\" class=\"close-btn\">✕</button>\n\n  @if (navItems?.length) {\n    <ol>\n      @for (item of navItems; track item.name) {\n        <a [href]=\"item.url\" [linkType]=\"item.linkType\" (click)=\"closeModal()\">\n          <li>\n            <span class=\"modal-item\">{{ item.label }}</span>\n          </li>\n        </a>\n      }\n    </ol>\n  }\n\n  @if (socialItems?.length) {\n    <div class=\"btn-group\">\n      @for (social of socialItems; track social.label) {\n        <a class=\"btn btn-link\" [href]=\"social.url\" [linkType]=\"social.linkType\">\n          <ui-icon [name]=\"social.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n          {{ social.label }}\n        </a>\n      }\n    </div>\n  }\n</div>\n"],"mappings":";;;;;;;;AAmBA,IAAa,qBAAb,MAAa,mBAAkB;CAIqB;CACzB;CAJvB;CAEA,YACgD,MACzB,WAA4C;EADnB,KAAA,OAAA;EACzB,KAAA,YAAA;EAEnB,KAAK,QAAQ,aAAa,KAAK,OAAO,KAAK,WAAW;CAC1D;CAEA,WAAW,MAAoB;EAC3B,KAAK,WAAW,MAAM,IAAI;CAC9B;CAEA,aAAU;EACN,KAAK,WAAW,MAAK;CACzB;CAhBS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;GAAA,OAIH;GAAe,UAAA;EAAA,GAAA;GAAA,OAAA,GAAA;GAAA,UAAA;EAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAJ9B,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,UAAA;EAAA,UCnB/B;EAYA,QAAA,CAAA,goBAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDEc;EAAY,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKb,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAR9B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAgB,YACd;GAAI,SACP,CAAC,YAAY;GAAC,iBAGN,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,goBAAA;EAAA,CAAA;;;;E,eAM1C,MAAA,S;GAAY,MAAA;GAAO,MAAA,CAAA,eAAe;;;;E,eAClC,MAAA,S;;;AEVT,IAAa,oBAAb,MAAa,kBAAiB;CACjB;CACA;CAEC,QAAQ,IAAI,aAAY;CAElC,aAAU;EACN,KAAK,MAAM,KAAI;CACnB;CARS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAiB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAjB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAiB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,UAAA;GAAA,aAAA;EAAA;EAAA,SAAA,EAAA,OAAA,QAAA;EAAA,UAAA;EAAA,UCd9B;EA0BA,QAAA,CAAA,0sBAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDjBc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKjD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAR7B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAe,YACb;GAAI,SACP;IAAC;IAAc;IAAmB;GAAe;GAAC,iBAG1C,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,0sBAAA;EAAA,CAAA;;;E,aAG9C,MAAA,M;E,gBACA,MAAA,M;E,UAEA,MAAA,O"}
+{"version":3,"file":"lluc_llull-ui-lib-modals.mjs","names":[],"sources":["../../../projects/ui-lib/modals/lang-modal/lang-modal.component.ts","../../../projects/ui-lib/modals/lang-modal/lang-modal.component.html","../../../projects/ui-lib/modals/nav-modal/nav-modal.component.ts","../../../projects/ui-lib/modals/nav-modal/nav-modal.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { UiLibLangItemI } from '@lluc_llull/ui-lib/interfaces';\n\n@Component({\n    selector: 'lib-lang-modal',\n    standalone: true,\n    imports: [CommonModule],\n    templateUrl: './lang-modal.component.html',\n    styleUrl: './lang-modal.component.scss',\n    host: {\n        '[class.is-closing]': 'closing',\n    },\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LangModalComponent {\n    @Input() langs: UiLibLangItemI[] = [];\n    @Input() closing = false;\n\n    @Output() close = new EventEmitter<void>();\n    @Output() select = new EventEmitter<UiLibLangItemI>();\n\n    selectLang(lang: UiLibLangItemI) {\n        this.select.emit(lang);\n    }\n\n    closeModal() {\n        this.close.emit();\n    }\n}\n","<button\n  (click)=\"closeModal()\"\n  class=\"close-btn\"\n  [class.is-closing]=\"closing\"\n  type=\"button\"\n  aria-label=\"Close modal\"\n>\n  ✕\n</button>\n<div class=\"modal-content\" [class.is-closing]=\"closing\">\n  @if (langs && langs.length > 0) {\n    <ol>\n      @for (lang of langs; track lang.id) {\n        <li (click)=\"selectLang(lang)\">\n          <span class=\"modal-item\">{{ lang.label }}</span>\n        </li>\n      }\n    </ol>\n  }\n</div>\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibNavItemsI, UiLibSocialItemsI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-nav-modal',\n    standalone: true,\n    imports: [CommonModule, LinkTypeDirective, UiIconComponent],\n    templateUrl: './nav-modal.component.html',\n    styleUrl: './nav-modal.component.scss',\n    host: {\n        '[class.is-closing]': 'closing',\n    },\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NavModalComponent {\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n    @Input() closing = false;\n\n    @Output() close = new EventEmitter<void>();\n\n    closeModal() {\n        this.close.emit();\n    }\n}\n","<button (click)=\"closeModal()\" class=\"close-btn\" [class.is-closing]=\"closing\" type=\"button\" aria-label=\"Close menu\">✕</button>\n<div class=\"modal-content\" [class.is-closing]=\"closing\">\n\n  @if (navItems?.length) {\n    <ol>\n      @for (item of navItems; track item.name) {\n        <a [href]=\"item.url\" [linkType]=\"item.linkType\" (click)=\"closeModal()\">\n          <li>\n            <span class=\"modal-item\">{{ item.label }}</span>\n          </li>\n        </a>\n      }\n    </ol>\n  }\n\n  @if (socialItems?.length) {\n    <div class=\"btn-group\">\n      @for (social of socialItems; track social.label) {\n        <a class=\"btn btn-link\" [href]=\"social.url\" [linkType]=\"social.linkType\">\n          <ui-icon [name]=\"social.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n          {{ social.label }}\n        </a>\n      }\n    </div>\n  }\n</div>\n"],"mappings":";;;;;AAeA,IAAa,qBAAb,MAAa,mBAAkB;CAClB,QAA0B,CAAA;CAC1B,UAAU;CAET,QAAQ,IAAI,aAAY;CACxB,SAAS,IAAI,aAAY;CAEnC,WAAW,MAAoB;EAC3B,KAAK,OAAO,KAAK,IAAI;CACzB;CAEA,aAAU;EACN,KAAK,MAAM,KAAI;CACnB;CAbS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;GAAA,SAAA;EAAA;EAAA,SAAA;GAAA,OAAA;GAAA,QAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,oBAAA,UAAA,EAAA;EAAA,UAAA;EAAA,UCf/B;EAoBA,QAAA,CAAA,u/DAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDbc;EAAY,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQb,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAX9B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAgB,YACd;GAAI,SACP,CAAC,YAAY;GAAC,MAGjB,EACF,sBAAsB,UACzB;GAAA,iBACgB,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,u/DAAA;EAAA,CAAA;;;E,UAG9C,MAAA,M;E,YACA,MAAA,M;E,UAEA,MAAA,O;E,WACA,MAAA,O;;;AEHL,IAAa,oBAAb,MAAa,kBAAiB;CACjB;CACA;CACA,UAAU;CAET,QAAQ,IAAI,aAAY;CAElC,aAAU;EACN,KAAK,MAAM,KAAI;CACnB;CATS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAiB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAjB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAiB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,UAAA;GAAA,aAAA;GAAA,SAAA;EAAA;EAAA,SAAA,EAAA,OAAA,QAAA;EAAA,MAAA,EAAA,YAAA,EAAA,oBAAA,UAAA,EAAA;EAAA,UAAA;EAAA,UCjB9B;EA0BA,QAAA,CAAA,o9EAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDjBc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQjD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAX7B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAe,YACb;GAAI,SACP;IAAC;IAAc;IAAmB;GAAe;GAAC,MAGrD,EACF,sBAAsB,UACzB;GAAA,iBACgB,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,o9EAAA;EAAA,CAAA;;;E,aAG9C,MAAA,M;E,gBACA,MAAA,M;E,YACA,MAAA,M;E,UAEA,MAAA,O"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lluc_llull/ui-lib",
-  "version": "0.34.1",
+  "version": "0.34.2",
   "description": "Angular UI component library",
   "author": "lluc_llull",
   "license": "MIT",

package/src/lib/styles/main.css

@@ -3,7 +3,7 @@
   border-radius: 6px;
   font-weight: 600;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
   border: none;
   display: inline-flex;
   align-items: center;
@@ -131,6 +131,21 @@ body {
   background-color: var(--content-bg);
 }
 
+/* Shared motion primitives for Angular Material dialogs. */
+.cdk-overlay-backdrop {
+  opacity: 0;
+  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cdk-overlay-backdrop {
+    transition-duration: 1ms;
+  }
+}
 a {
   text-decoration: none;
 }

package/styles/main.css

@@ -3,7 +3,7 @@
   border-radius: 6px;
   font-weight: 600;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
   border: none;
   display: inline-flex;
   align-items: center;
@@ -131,6 +131,21 @@ body {
   background-color: var(--content-bg);
 }
 
+/* Shared motion primitives for Angular Material dialogs. */
+.cdk-overlay-backdrop {
+  opacity: 0;
+  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cdk-overlay-backdrop {
+    transition-duration: 1ms;
+  }
+}
 a {
   text-decoration: none;
 }

package/types/lluc_llull-ui-lib-headers-header-clear.d.ts

@@ -5,6 +5,7 @@ import { Theme, ThemeService } from "@lluc_llull/ui-lib/theme";
 export declare class HeaderClearComponent implements OnInit, OnDestroy, OnChanges {
   private themeService;
   isMenuOpen: boolean;
+  isMenuClosing: boolean;
   currentTheme: Theme;
   private themeSubscription?;
   logo?: UiLibImageI;
@@ -23,6 +24,8 @@ export declare class HeaderClearComponent implements OnInit, OnDestroy, OnChange
   openLanguagesModal(): void;
   toggleTheme(): void;
   toggleMenu(): void;
+  closeMenu(): void;
+  finishMenuClose(event: TransitionEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<HeaderClearComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<HeaderClearComponent, "lib-header-clear", never, {
     "logo": {

package/types/lluc_llull-ui-lib-headers-header-mobile.d.ts

@@ -5,6 +5,7 @@ import { Theme, ThemeService } from "@lluc_llull/ui-lib/theme";
 export declare class HeaderMobileComponent implements OnInit, OnChanges, OnDestroy {
   private themeService;
   isMenuOpen: boolean;
+  isMenuClosing: boolean;
   currentTheme: Theme;
   private themeSubscription?;
   logo?: UiLibImageI;
@@ -23,6 +24,8 @@ export declare class HeaderMobileComponent implements OnInit, OnChanges, OnDestr
   openLanguagesModal(): void;
   toggleTheme(): void;
   toggleMenu(): void;
+  closeMenu(): void;
+  finishMenuClose(event: TransitionEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<HeaderMobileComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<HeaderMobileComponent, "lib-header-mobile", never, {
     "logo": {

package/types/lluc_llull-ui-lib-headers.d.ts

@@ -5,6 +5,7 @@ import { Theme, ThemeService } from "@lluc_llull/ui-lib/theme";
 export declare class HeaderClearComponent implements OnInit, OnDestroy, OnChanges {
   private themeService;
   isMenuOpen: boolean;
+  isMenuClosing: boolean;
   currentTheme: Theme;
   private themeSubscription?;
   logo?: UiLibImageI;
@@ -23,6 +24,8 @@ export declare class HeaderClearComponent implements OnInit, OnDestroy, OnChange
   openLanguagesModal(): void;
   toggleTheme(): void;
   toggleMenu(): void;
+  closeMenu(): void;
+  finishMenuClose(event: TransitionEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<HeaderClearComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<HeaderClearComponent, "lib-header-clear", never, {
     "logo": {
@@ -69,6 +72,7 @@ export interface HeaderClearI {
 export declare class HeaderMobileComponent implements OnInit, OnChanges, OnDestroy {
   private themeService;
   isMenuOpen: boolean;
+  isMenuClosing: boolean;
   currentTheme: Theme;
   private themeSubscription?;
   logo?: UiLibImageI;
@@ -87,6 +91,8 @@ export declare class HeaderMobileComponent implements OnInit, OnChanges, OnDestr
   openLanguagesModal(): void;
   toggleTheme(): void;
   toggleMenu(): void;
+  closeMenu(): void;
+  finishMenuClose(event: TransitionEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<HeaderMobileComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<HeaderMobileComponent, "lib-header-mobile", never, {
     "logo": {

package/types/lluc_llull-ui-lib-modals.d.ts

@@ -1,29 +1,33 @@
-import { MatDialogRef } from "@angular/material/dialog";
-import { UiLibLangItemI, UiLibNavItemsI, UiLibSocialItemsI } from "@lluc_llull/ui-lib/interfaces";
 import * as i0 from "@angular/core";
 import { EventEmitter } from "@angular/core";
-interface LangModalData {
-  langs: any[];
-  currentLang: string;
-}
+import { UiLibLangItemI, UiLibNavItemsI, UiLibSocialItemsI } from "@lluc_llull/ui-lib/interfaces";
 export declare class LangModalComponent {
-  data: LangModalData;
-  dialogRef?: MatDialogRef<LangModalComponent> | undefined;
   langs: UiLibLangItemI[];
-  constructor(data: LangModalData, dialogRef?: MatDialogRef<LangModalComponent> | undefined);
+  closing: boolean;
+  close: EventEmitter<void>;
+  select: EventEmitter<UiLibLangItemI>;
   selectLang(lang: UiLibLangItemI): void;
   closeModal(): void;
-  static ɵfac: i0.ɵɵFactoryDeclaration<LangModalComponent, [{
-    optional: true;
+  static ɵfac: i0.ɵɵFactoryDeclaration<LangModalComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<LangModalComponent, "lib-lang-modal", never, {
+    "langs": {
+      "alias": "langs";
+      "required": false;
+    };
+    "closing": {
+      "alias": "closing";
+      "required": false;
+    };
   }, {
-    optional: true;
-  }]>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<LangModalComponent, "lib-lang-modal", never, {}, {}, never, never, true, never>;
+    "close": "close";
+    "select": "select";
+  }, never, never, true, never>;
 }
 export interface LangModalI {}
 export declare class NavModalComponent {
   navItems?: UiLibNavItemsI[];
   socialItems?: UiLibSocialItemsI[];
+  closing: boolean;
   close: EventEmitter<void>;
   closeModal(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<NavModalComponent, never>;
@@ -36,6 +40,10 @@ export declare class NavModalComponent {
       "alias": "socialItems";
       "required": false;
     };
+    "closing": {
+      "alias": "closing";
+      "required": false;
+    };
   }, {
     "close": "close";
   }, never, never, true, never>;
@@ -43,5 +51,4 @@ export declare class NavModalComponent {
 export interface NavModalI {
   navItems?: UiLibNavItemsI[];
   socialItems?: UiLibNavItemsI[];
-}
-export {};
+}