@lluc_llull/ui-lib 0.34.0 → 0.34.2

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":"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"}

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/fesm2022/lluc_llull-ui-lib-shared.mjs

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
 import { Component, HostBinding, Inject, Input, Optional } from "@angular/core";
 import * as simpleIcons from "simple-icons";
 import * as i1$1 from "lucide-angular";
-import { LucideAngularModule } from "lucide-angular";
+import { ArrowLeft, ArrowRight, Home, LUCIDE_ICONS, LucideAngularModule, LucideIconProvider, Moon, MoveRight, Sun } from "lucide-angular";
 import * as i1 from "@cloudinary/ng";
 import { CloudinaryModule, lazyload, responsive } from "@cloudinary/ng";
 import { CloudinaryImage } from "@cloudinary/url-gen";
@@ -53,6 +53,18 @@ var UiIconComponent = class UiIconComponent {
 			size: "size",
 			color: "color"
 		},
+		providers: [{
+			provide: LUCIDE_ICONS,
+			multi: true,
+			useValue: new LucideIconProvider({
+				ArrowLeft,
+				ArrowRight,
+				Home,
+				Moon,
+				MoveRight,
+				Sun
+			})
+		}],
 		usesOnChanges: true,
 		ngImport: i0,
 		template: "@if (isBrandIcon) {\n  <svg\n    class=\"ui-icon ui-icon--brand\"\n    [attr.width]=\"size\"\n    [attr.height]=\"size\"\n    [attr.fill]=\"color\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path [attr.d]=\"brandIcon?.path\"></path>\n  </svg>\n} @else {\n  <lucide-icon\n    class=\"ui-icon ui-icon--lucide\"\n    [name]=\"name\"\n    [size]=\"size\"\n    [color]=\"color\"\n  ></lucide-icon>\n}\n",
@@ -94,6 +106,18 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-icon",
 			standalone: true,
 			imports: [CommonModule, LucideAngularModule],
+			providers: [{
+				provide: LUCIDE_ICONS,
+				multi: true,
+				useValue: new LucideIconProvider({
+					ArrowLeft,
+					ArrowRight,
+					Home,
+					Moon,
+					MoveRight,
+					Sun
+				})
+			}],
 			template: "@if (isBrandIcon) {\n  <svg\n    class=\"ui-icon ui-icon--brand\"\n    [attr.width]=\"size\"\n    [attr.height]=\"size\"\n    [attr.fill]=\"color\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path [attr.d]=\"brandIcon?.path\"></path>\n  </svg>\n} @else {\n  <lucide-icon\n    class=\"ui-icon ui-icon--lucide\"\n    [name]=\"name\"\n    [size]=\"size\"\n    [color]=\"color\"\n  ></lucide-icon>\n}\n",
 			styles: [".ui-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}.ui-icon--brand svg{display:block;width:100%!important;height:100%!important}.ui-icon--lucide{display:inline-flex}.ui-icon--lucide svg{display:block;width:100%!important;height:100%!important;min-width:1em;min-height:1em}\n"]
 		}]

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

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-shared.mjs","names":["i1","qAuto"],"sources":["../../../projects/ui-lib/shared/ui-icon/ui-icon.component.ts","../../../projects/ui-lib/shared/ui-icon/ui-icon.component.html","../../../projects/ui-lib/shared/ui-icon/ui-icon.mock.ts","../../../projects/ui-lib/shared/ui-image/ui-image.component.ts","../../../projects/ui-lib/shared/ui-image/ui-image.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, Input, OnChanges } from '@angular/core';\nimport type { SimpleIcon } from 'simple-icons';\nimport * as simpleIcons from 'simple-icons';\nimport { LucideAngularModule } from 'lucide-angular';\n\n@Component({\n    selector: 'ui-icon',\n    standalone: true,\n    imports: [CommonModule, LucideAngularModule],\n    templateUrl: './ui-icon.component.html',\n    styleUrls: ['./ui-icon.component.scss'],\n})\nexport class UiIconComponent implements OnChanges {\n    @Input() name!: string;\n    @Input() size = 24;\n    @Input() color = 'currentColor';\n\n    private icon?: SimpleIcon | null;\n\n    ngOnChanges() {\n        this.resolveBrandIcon();\n    }\n\n    get isBrandIcon(): boolean {\n        return !!this.icon;\n    }\n\n    get brandIcon(): SimpleIcon | null {\n        return this.icon ?? null;\n    }\n\n    private resolveBrandIcon(): void {\n        if (!this.name) {\n            this.icon = null;\n            return;\n        }\n\n        const key =\n            'si' + this.name.replace(/[^a-z0-9]/gi, '').replace(/^\\w/, (c) => c.toUpperCase());\n\n        this.icon = (simpleIcons as any)[key] ?? null;\n    }\n}\n","@if (isBrandIcon) {\n  <svg\n    class=\"ui-icon ui-icon--brand\"\n    [attr.width]=\"size\"\n    [attr.height]=\"size\"\n    [attr.fill]=\"color\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path [attr.d]=\"brandIcon?.path\"></path>\n  </svg>\n} @else {\n  <lucide-icon\n    class=\"ui-icon ui-icon--lucide\"\n    [name]=\"name\"\n    [size]=\"size\"\n    [color]=\"color\"\n  ></lucide-icon>\n}\n","import { Component, Input } from '@angular/core';\n\n@Component({\n    selector: 'ui-icon',\n    standalone: true,\n    template: '',\n})\nexport class MockUiIconComponent {\n    @Input() name!: string;\n    @Input() size = 24;\n    @Input() color = 'currentColor';\n}","import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, Inject, Input, OnChanges, OnInit, Optional } from '@angular/core';\nimport { CloudinaryModule, lazyload, responsive } from '@cloudinary/ng';\nimport { CloudinaryImage } from '@cloudinary/url-gen';\nimport { format, quality } from '@cloudinary/url-gen/actions/delivery';\nimport { limitFit } from '@cloudinary/url-gen/actions/resize';\nimport { auto } from '@cloudinary/url-gen/qualifiers/format';\nimport { auto as qAuto } from '@cloudinary/url-gen/qualifiers/quality';\nimport { CLOUDINARY_CLOUD_NAME } from '@lluc_llull/ui-lib/mapper';\n\n@Component({\n    selector: 'ui-image',\n    standalone: true,\n    imports: [CommonModule, CloudinaryModule],\n    templateUrl: './ui-image.component.html',\n    styleUrl: './ui-image.component.scss',\n})\nexport class UiImageComponent implements OnChanges, OnInit {\n    @Input({ required: true }) publicId!: string;\n    @Input() cloudName?: string;\n    @Input() transformations?: any;\n    @Input() eager: boolean = false;\n    @Input() width?: number | null;\n    @Input() height?: number | null;\n\n    img!: CloudinaryImage;\n    plugins: any[] = [];\n\n    constructor(@Optional() @Inject(CLOUDINARY_CLOUD_NAME) private globalCloudName?: string) {}\n\n    ngOnInit(): void {\n        this.initImage();\n    }\n\n    ngOnChanges(): void {\n        this.initImage();\n    }\n\n    @HostBinding('style.--ui-image-ratio')\n    get aspectRatioStyle(): string | null {\n        if (this.width && this.height) {\n            return `${this.width} / ${this.height}`;\n        }\n        return null;\n    }\n\n    private initImage(): void {\n        const activeCloudName = this.cloudName || this.globalCloudName;\n\n        if (this.publicId && activeCloudName) {\n            this.img = new CloudinaryImage(this.publicId, { cloudName: activeCloudName })\n                .delivery(format(auto()))\n                .delivery(quality(qAuto()))\n                .resize(limitFit().width(1920));\n\n            this.plugins = [responsive({ steps: 200 })];\n\n            if (!this.eager) {\n                this.plugins.push(lazyload());\n            }\n        } else if (!activeCloudName) {\n            console.warn(\n                '[UiImageComponent]: No cloudName provided. Please provide it via @Input() or the CLOUDINARY_CLOUD_NAME InjectionToken.',\n            );\n        }\n    }\n}\n","@if (img) {\n  @if (eager) {\n    <img [src]=\"img.toURL()\" fetchpriority=\"high\" loading=\"eager\" alt=\"\"\n         [attr.width]=\"width ?? null\" [attr.height]=\"height ?? null\" />\n  } @else {\n    <advanced-image [cldImg]=\"img\" [plugins]=\"plugins\"></advanced-image>\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"lluc_llull-ui-lib-shared.mjs","names":["i1","qAuto"],"sources":["../../../projects/ui-lib/shared/ui-icon/ui-icon.component.ts","../../../projects/ui-lib/shared/ui-icon/ui-icon.component.html","../../../projects/ui-lib/shared/ui-icon/ui-icon.mock.ts","../../../projects/ui-lib/shared/ui-image/ui-image.component.ts","../../../projects/ui-lib/shared/ui-image/ui-image.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, Input, OnChanges } from '@angular/core';\nimport type { SimpleIcon } from 'simple-icons';\nimport * as simpleIcons from 'simple-icons';\nimport {\n    ArrowLeft,\n    ArrowRight,\n    Home,\n    LucideAngularModule,\n    LucideIconProvider,\n    LUCIDE_ICONS,\n    Moon,\n    MoveRight,\n    Sun,\n} from 'lucide-angular';\n\n@Component({\n    selector: 'ui-icon',\n    standalone: true,\n    imports: [\n        CommonModule,\n        LucideAngularModule,\n    ],\n    providers: [\n        {\n            provide: LUCIDE_ICONS,\n            multi: true,\n            useValue: new LucideIconProvider({ ArrowLeft, ArrowRight, Home, Moon, MoveRight, Sun }),\n        },\n    ],\n    templateUrl: './ui-icon.component.html',\n    styleUrls: ['./ui-icon.component.scss'],\n})\nexport class UiIconComponent implements OnChanges {\n    @Input() name!: string;\n    @Input() size = 24;\n    @Input() color = 'currentColor';\n\n    private icon?: SimpleIcon | null;\n\n    ngOnChanges() {\n        this.resolveBrandIcon();\n    }\n\n    get isBrandIcon(): boolean {\n        return !!this.icon;\n    }\n\n    get brandIcon(): SimpleIcon | null {\n        return this.icon ?? null;\n    }\n\n    private resolveBrandIcon(): void {\n        if (!this.name) {\n            this.icon = null;\n            return;\n        }\n\n        const key =\n            'si' + this.name.replace(/[^a-z0-9]/gi, '').replace(/^\\w/, (c) => c.toUpperCase());\n\n        this.icon = (simpleIcons as any)[key] ?? null;\n    }\n}\n","@if (isBrandIcon) {\n  <svg\n    class=\"ui-icon ui-icon--brand\"\n    [attr.width]=\"size\"\n    [attr.height]=\"size\"\n    [attr.fill]=\"color\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path [attr.d]=\"brandIcon?.path\"></path>\n  </svg>\n} @else {\n  <lucide-icon\n    class=\"ui-icon ui-icon--lucide\"\n    [name]=\"name\"\n    [size]=\"size\"\n    [color]=\"color\"\n  ></lucide-icon>\n}\n","import { Component, Input } from '@angular/core';\n\n@Component({\n    selector: 'ui-icon',\n    standalone: true,\n    template: '',\n})\nexport class MockUiIconComponent {\n    @Input() name!: string;\n    @Input() size = 24;\n    @Input() color = 'currentColor';\n}","import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, Inject, Input, OnChanges, OnInit, Optional } from '@angular/core';\nimport { CloudinaryModule, lazyload, responsive } from '@cloudinary/ng';\nimport { CloudinaryImage } from '@cloudinary/url-gen';\nimport { format, quality } from '@cloudinary/url-gen/actions/delivery';\nimport { limitFit } from '@cloudinary/url-gen/actions/resize';\nimport { auto } from '@cloudinary/url-gen/qualifiers/format';\nimport { auto as qAuto } from '@cloudinary/url-gen/qualifiers/quality';\nimport { CLOUDINARY_CLOUD_NAME } from '@lluc_llull/ui-lib/mapper';\n\n@Component({\n    selector: 'ui-image',\n    standalone: true,\n    imports: [CommonModule, CloudinaryModule],\n    templateUrl: './ui-image.component.html',\n    styleUrl: './ui-image.component.scss',\n})\nexport class UiImageComponent implements OnChanges, OnInit {\n    @Input({ required: true }) publicId!: string;\n    @Input() cloudName?: string;\n    @Input() transformations?: any;\n    @Input() eager: boolean = false;\n    @Input() width?: number | null;\n    @Input() height?: number | null;\n\n    img!: CloudinaryImage;\n    plugins: any[] = [];\n\n    constructor(@Optional() @Inject(CLOUDINARY_CLOUD_NAME) private globalCloudName?: string) {}\n\n    ngOnInit(): void {\n        this.initImage();\n    }\n\n    ngOnChanges(): void {\n        this.initImage();\n    }\n\n    @HostBinding('style.--ui-image-ratio')\n    get aspectRatioStyle(): string | null {\n        if (this.width && this.height) {\n            return `${this.width} / ${this.height}`;\n        }\n        return null;\n    }\n\n    private initImage(): void {\n        const activeCloudName = this.cloudName || this.globalCloudName;\n\n        if (this.publicId && activeCloudName) {\n            this.img = new CloudinaryImage(this.publicId, { cloudName: activeCloudName })\n                .delivery(format(auto()))\n                .delivery(quality(qAuto()))\n                .resize(limitFit().width(1920));\n\n            this.plugins = [responsive({ steps: 200 })];\n\n            if (!this.eager) {\n                this.plugins.push(lazyload());\n            }\n        } else if (!activeCloudName) {\n            console.warn(\n                '[UiImageComponent]: No cloudName provided. Please provide it via @Input() or the CLOUDINARY_CLOUD_NAME InjectionToken.',\n            );\n        }\n    }\n}\n","@if (img) {\n  @if (eager) {\n    <img [src]=\"img.toURL()\" fetchpriority=\"high\" loading=\"eager\" alt=\"\"\n         [attr.width]=\"width ?? null\" [attr.height]=\"height ?? null\" />\n  } @else {\n    <advanced-image [cldImg]=\"img\" [plugins]=\"plugins\"></advanced-image>\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lluc_llull/ui-lib",
-  "version": "0.34.0",
+  "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": {