nath-angular-ui 0.7.2 → 0.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2060,7 +2060,7 @@ class NathMenuBar {
|
|
|
2060
2060
|
this.closeAllMenus();
|
|
2061
2061
|
}
|
|
2062
2062
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathMenuBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2063
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathMenuBar, isStandalone: true, selector: "nath-menu-bar", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { whenCommand: "whenCommand" }, host: { listeners: { "document:click": "handleDocumentClick($event)" }, properties: { "class": "styleClass()" } }, viewQueries: [{ propertyName: "menuBarElement", first: true, predicate: ["menuBar"], descendants: true, isSignal: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav #menuBar class=\"nath-menu-bar-theme nath-menu-bar\" role=\"menubar\">\n <!-- Desktop Menu Bar -->\n <ul class=\"nath-menu-bar-list\">\n @for (item of model(); track item.label; let index = $index) {\n <li\n class=\"nath-menu-bar-item\"\n [class.nath-menu-bar-item--active]=\"activeItem() === item\"\n [class.nath-menu-bar-item--disabled]=\"item.disabled\"\n [class.nath-menu-bar-item--focused]=\"focusedIndex() === index\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [attr.role]=\"item.items && item.items.length > 0 ? 'menuitem' : 'menuitem'\"\n [attr.aria-haspopup]=\"item.items && item.items.length > 0 ? 'true' : 'false'\"\n [attr.aria-expanded]=\"activeItem() === item ? 'true' : 'false'\"\n [tabIndex]=\"-1\"\n (mouseenter)=\"handleItemHover(item, index, $event)\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"focusedIndex() < 0 && focusedIndex.set($index)\"\n >\n <span class=\"nath-menu-bar-item-content\">\n @if (item.icon) {\n @if (isLucideIconComponent(item.icon)) {\n <svg [lucideIcon]=\"item.icon\" [size]=\"16\" />\n } @else {\n <i [class]=\"item.icon\"></i>\n }\n }\n @if (item.escape === false) {\n <span [innerHTML]=\"getMenuLabel(item)\"></span>\n } @else {\n <span>{{ item.label }}</span>\n }\n @if (item.items && item.items.length > 0) {\n <svg lucideChevronDown [size]=\"14\" class=\"nath-menu-bar-arrow\" />\n }\n </span>\n\n @if (item.routerLink) {\n <a\n [routerLink]=\"item.routerLink\"\n [queryParams]=\"item.queryParams\"\n [fragment]=\"item.fragment\"\n [queryParamsHandling]=\"item.queryParamsHandling\"\n [preserveFragment]=\"item.preserveFragment\"\n [skipLocationChange]=\"item.skipLocationChange\"\n [replaceUrl]=\"item.replaceUrl\"\n [state]=\"item.state\"\n [attr.target]=\"item.target\"\n class=\"nath-menu-bar-link\"\n ><span></span\n ></a>\n } @else if (item.url) {\n <a [href]=\"item.url\" [attr.target]=\"item.target || '_blank'\" class=\"nath-menu-bar-link\"\n ><span></span\n ></a>\n }\n </li>\n }\n </ul>\n\n <!-- Mobile Menu Button -->\n <button\n class=\"nath-menu-bar-toggle\"\n [class.nath-menu-bar-toggle--active]=\"isMobileMenuOpen()\"\n (click)=\"toggleMobileMenu()\"\n [attr.aria-label]=\"isMobileMenuOpen() ? 'Close menu' : 'Open menu'\"\n [attr.aria-expanded]=\"isMobileMenuOpen()\"\n >\n @if (isMobileMenuOpen()) {\n <svg lucideX [size]=\"24\" />\n } @else {\n <svg lucideMenu [size]=\"24\" />\n }\n </button>\n</nav>\n\n<!-- Mobile Menu Overlay -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"nath-menu-bar-mobile-overlay\"\n (click)=\"toggleMobileMenu()\"\n (keydown.enter)=\"toggleMobileMenu()\"\n ></div>\n}\n\n<!-- Mobile Menu Panel -->\n@if (isMobileMenuOpen()) {\n <div class=\"nath-menu-bar-mobile-panel\">\n <ul class=\"nath-menu-bar-mobile-list\">\n @for (item of model(); track item.label; let index = $index) {\n <li\n class=\"nath-menu-bar-mobile-item\"\n [class.nath-menu-bar-mobile-item--disabled]=\"item.disabled\"\n [class.nath-menu-bar-mobile-item--expanded]=\"activeItem() === item\"\n >\n <div\n class=\"nath-menu-bar-mobile-item-content\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown.enter)=\"handleItemClick(item, index, $event)\"\n >\n <span class=\"nath-menu-bar-mobile-item-text\">\n @if (item.icon) {\n @if (isLucideIconComponent(item.icon)) {\n <svg [lucideIcon]=\"item.icon\" [size]=\"18\" />\n } @else {\n <i [class]=\"item.icon\"></i>\n }\n }\n <span>{{ item.label }}</span>\n </span>\n @if (item.items && item.items.length > 0) {\n <svg\n lucideChevronDown\n [size]=\"16\"\n class=\"nath-menu-bar-mobile-arrow\"\n [class.nath-menu-bar-mobile-arrow--rotated]=\"activeItem() === item\"\n />\n }\n </div>\n\n @if (item.items && item.items.length > 0 && activeItem() === item) {\n <ul class=\"nath-menu-bar-mobile-submenu\">\n @for (subItem of item.items; track subItem.label; let subIndex = $index) {\n <li\n class=\"nath-menu-bar-mobile-submenu-item\"\n [class.nath-menu-bar-mobile-submenu-item--disabled]=\"subItem.disabled\"\n (click)=\"handleItemClick(subItem, subIndex, $event)\"\n (keydown.enter)=\"handleItemClick(subItem, subIndex, $event)\"\n >\n <span class=\"nath-menu-bar-mobile-submenu-item-text\">\n @if (subItem.icon) {\n @if (isLucideIconComponent(subItem.icon)) {\n <svg [lucideIcon]=\"subItem.icon\" [size]=\"16\" />\n } @else {\n <i [class]=\"subItem.icon\"></i>\n }\n }\n <span>{{ subItem.label }}</span>\n </span>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </div>\n}\n<nath-menu\n #dropdownMenu\n [model]=\"activeItem()?.items ?? []\"\n [positionX]=\"'left'\"\n [positionY]=\"'bottom'\"\n panelStyleClass=\"nath-menu-bar-dropdown\"\n/>\n", styles: ["nath-menu-bar,.nath-menu-bar-theme{--nath-menu-bar-bg: #ffffff;--nath-menu-bar-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-bar-text: var(--color-gray-700, oklch(37.1% .021 264.444));--nath-menu-bar-hover-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-bar-active-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-bar-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--nath-menu-bar-font-size: .875rem;--nath-menu-bar-height: 3rem;--nath-menu-bar-z-index: 1000}.dark nath-menu-bar,.dark .nath-menu-bar-theme{--nath-menu-bar-bg: var(--color-zinc-900, oklch(21% .006 285.885));--nath-menu-bar-border: var(--color-zinc-700, oklch(37% .013 285.805));--nath-menu-bar-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-bar-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-menu-bar-active-bg: var(--color-zinc-800, oklch(27.4% .006 286.033))}.nath-menu-bar{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:var(--nath-menu-bar-bg);border-bottom:1px solid var(--nath-menu-bar-border);height:var(--nath-menu-bar-height);padding:0 1rem;font-size:var(--nath-menu-bar-font-size);color:var(--nath-menu-bar-text);z-index:var(--nath-menu-bar-z-index)}.nath-menu-bar-list{display:flex;list-style:none;margin:0;padding:0;gap:.5rem}.nath-menu-bar-item{position:relative;display:flex;align-items:center;padding:.5rem .75rem;border-radius:.375rem;cursor:pointer;transition:background-color .15s ease;outline:none}.nath-menu-bar-item:hover:not(.nath-menu-bar-item--disabled){background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-item--active{background-color:var(--nath-menu-bar-active-bg)}.nath-menu-bar-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.nath-menu-bar-item--focused{box-shadow:0 0 0 2px var(--color-blue-500, oklch(.5 .15 250))}.nath-menu-bar-item-content{display:flex;align-items:center;gap:.5rem;color:var(--nath-menu-bar-text);text-decoration:none}.nath-menu-bar-item-content svg{flex-shrink:0}.nath-menu-bar-arrow{margin-left:.25rem;color:var(--nath-menu-bar-text);opacity:.7;transition:transform .2s ease}.nath-menu-bar-item--active .nath-menu-bar-arrow{transform:rotate(180deg)}.nath-menu-bar-link{position:absolute;inset:0;text-decoration:none}.nath-menu-bar-toggle{display:none;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;background:transparent;border:none;border-radius:.375rem;cursor:pointer;color:var(--nath-menu-bar-text);transition:background-color .15s ease}.nath-menu-bar-toggle:hover{background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-toggle:focus{outline:none;box-shadow:0 0 0 2px var(--color-blue-500, oklch(.5 .15 250))}.nath-menu-bar-mobile-overlay{position:fixed;inset:0;background-color:#00000080;z-index:calc(var(--nath-menu-bar-z-index) - 1)}.nath-menu-bar-mobile-panel{position:fixed;top:var(--nath-menu-bar-height);left:0;right:0;bottom:0;background-color:var(--nath-menu-bar-bg);overflow-y:auto;z-index:var(--nath-menu-bar-z-index);padding:1rem}.nath-menu-bar-mobile-list{list-style:none;margin:0;padding:0}.nath-menu-bar-mobile-item{border-bottom:1px solid var(--nath-menu-bar-border)}.nath-menu-bar-mobile-item:last-child{border-bottom:none}.nath-menu-bar-mobile-item--disabled{opacity:.5;pointer-events:none}.nath-menu-bar-mobile-item-content{display:flex;align-items:center;justify-content:space-between;padding:1rem;cursor:pointer;transition:background-color .15s ease}.nath-menu-bar-mobile-item-content:hover{background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-mobile-item-text{display:flex;align-items:center;gap:.75rem;font-weight:500}.nath-menu-bar-mobile-arrow{transition:transform .2s ease}.nath-menu-bar-mobile-arrow--rotated{transform:rotate(180deg)}.nath-menu-bar-mobile-submenu{list-style:none;margin:0;padding:0 0 0 1.5rem;background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-mobile-submenu-item{padding:.75rem 1rem;cursor:pointer;transition:background-color .15s ease;border-bottom:1px solid var(--nath-menu-bar-border)}.nath-menu-bar-mobile-submenu-item:last-child{border-bottom:none}.nath-menu-bar-mobile-submenu-item:hover{background-color:var(--nath-menu-bar-active-bg)}.nath-menu-bar-mobile-submenu-item--disabled{opacity:.5;pointer-events:none}.nath-menu-bar-mobile-submenu-item-text{display:flex;align-items:center;gap:.75rem}@media(max-width:768px){.nath-menu-bar-list{display:none}.nath-menu-bar-toggle{display:flex}.nath-menu-bar-dropdown{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NathMenu, selector: "nath-menu", inputs: ["model", "styleClass", "panelStyleClass", "positionX", "positionY", "inline", "flat"], outputs: ["modelChange", "styleClassChange", "panelStyleClassChange", "whenHide"] }, { kind: "component", type: LucideMenu, selector: "svg[lucideMenu]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2063
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathMenuBar, isStandalone: true, selector: "nath-menu-bar", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { whenCommand: "whenCommand" }, host: { listeners: { "document:click": "handleDocumentClick($event)" }, properties: { "class": "styleClass()" } }, viewQueries: [{ propertyName: "menuBarElement", first: true, predicate: ["menuBar"], descendants: true, isSignal: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav #menuBar class=\"nath-menu-bar-theme nath-menu-bar\" role=\"menubar\">\n <!-- Desktop Menu Bar -->\n <ul class=\"nath-menu-bar-list\">\n @for (item of model(); track item.label; let index = $index) {\n <li\n class=\"nath-menu-bar-item\"\n [class.nath-menu-bar-item--active]=\"activeItem() === item\"\n [class.nath-menu-bar-item--disabled]=\"item.disabled\"\n [class.nath-menu-bar-item--focused]=\"focusedIndex() === index\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [attr.role]=\"item.items && item.items.length > 0 ? 'menuitem' : 'menuitem'\"\n [attr.aria-haspopup]=\"item.items && item.items.length > 0 ? 'true' : 'false'\"\n [attr.aria-expanded]=\"activeItem() === item ? 'true' : 'false'\"\n [tabIndex]=\"-1\"\n (mouseenter)=\"handleItemHover(item, index, $event)\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"focusedIndex() < 0 && focusedIndex.set($index)\"\n >\n <span class=\"nath-menu-bar-item-content\">\n @if (item.icon) {\n @if (isLucideIconComponent(item.icon)) {\n <svg [lucideIcon]=\"item.icon\" [size]=\"16\" />\n } @else {\n <i [class]=\"item.icon\"></i>\n }\n }\n @if (item.escape === false) {\n <span [innerHTML]=\"getMenuLabel(item)\"></span>\n } @else {\n <span>{{ item.label }}</span>\n }\n @if (item.items && item.items.length > 0) {\n <svg lucideChevronDown [size]=\"14\" class=\"nath-menu-bar-arrow\" />\n }\n </span>\n\n @if (item.routerLink) {\n <a\n [routerLink]=\"item.routerLink\"\n [queryParams]=\"item.queryParams\"\n [fragment]=\"item.fragment\"\n [queryParamsHandling]=\"item.queryParamsHandling\"\n [preserveFragment]=\"item.preserveFragment\"\n [skipLocationChange]=\"item.skipLocationChange\"\n [replaceUrl]=\"item.replaceUrl\"\n [state]=\"item.state\"\n [attr.target]=\"item.target\"\n class=\"nath-menu-bar-link\"\n ><span></span\n ></a>\n } @else if (item.url) {\n <a [href]=\"item.url\" [attr.target]=\"item.target || '_blank'\" class=\"nath-menu-bar-link\"\n ><span></span\n ></a>\n }\n </li>\n }\n </ul>\n\n <!-- Mobile Menu Button -->\n <button\n class=\"nath-menu-bar-toggle\"\n [class.nath-menu-bar-toggle--active]=\"isMobileMenuOpen()\"\n (click)=\"toggleMobileMenu()\"\n [attr.aria-label]=\"isMobileMenuOpen() ? 'Close menu' : 'Open menu'\"\n [attr.aria-expanded]=\"isMobileMenuOpen()\"\n >\n @if (isMobileMenuOpen()) {\n <svg lucideX [size]=\"24\" />\n } @else {\n <svg lucideMenu [size]=\"24\" />\n }\n </button>\n</nav>\n\n<!-- Mobile Menu Overlay -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"nath-menu-bar-mobile-overlay\"\n (click)=\"toggleMobileMenu()\"\n (keydown.enter)=\"toggleMobileMenu()\"\n ></div>\n}\n\n<!-- Mobile Menu Panel -->\n@if (isMobileMenuOpen()) {\n <div class=\"nath-menu-bar-mobile-panel\">\n <ul class=\"nath-menu-bar-mobile-list\">\n @for (item of model(); track item.label; let index = $index) {\n <li\n class=\"nath-menu-bar-mobile-item\"\n [class.nath-menu-bar-mobile-item--disabled]=\"item.disabled\"\n [class.nath-menu-bar-mobile-item--expanded]=\"activeItem() === item\"\n >\n <div\n class=\"nath-menu-bar-mobile-item-content\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown.enter)=\"handleItemClick(item, index, $event)\"\n >\n <span class=\"nath-menu-bar-mobile-item-text\">\n @if (item.icon) {\n @if (isLucideIconComponent(item.icon)) {\n <svg [lucideIcon]=\"item.icon\" [size]=\"18\" />\n } @else {\n <i [class]=\"item.icon\"></i>\n }\n }\n <span>{{ item.label }}</span>\n </span>\n @if (item.items && item.items.length > 0) {\n <svg\n lucideChevronDown\n [size]=\"16\"\n class=\"nath-menu-bar-mobile-arrow\"\n [class.nath-menu-bar-mobile-arrow--rotated]=\"activeItem() === item\"\n />\n }\n </div>\n\n @if (item.items && item.items.length > 0 && activeItem() === item) {\n <ul class=\"nath-menu-bar-mobile-submenu\">\n @for (subItem of item.items; track subItem.label; let subIndex = $index) {\n <li\n class=\"nath-menu-bar-mobile-submenu-item\"\n [class.nath-menu-bar-mobile-submenu-item--disabled]=\"subItem.disabled\"\n (click)=\"handleItemClick(subItem, subIndex, $event)\"\n (keydown.enter)=\"handleItemClick(subItem, subIndex, $event)\"\n >\n <span class=\"nath-menu-bar-mobile-submenu-item-text\">\n @if (subItem.icon) {\n @if (isLucideIconComponent(subItem.icon)) {\n <svg [lucideIcon]=\"subItem.icon\" [size]=\"16\" />\n } @else {\n <i [class]=\"subItem.icon\"></i>\n }\n }\n <span>{{ subItem.label }}</span>\n </span>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </div>\n}\n<nath-menu\n #dropdownMenu\n [model]=\"activeItem()?.items ?? []\"\n [positionX]=\"'left'\"\n [positionY]=\"'bottom'\"\n panelStyleClass=\"nath-menu-bar-dropdown\"\n/>\n", styles: ["nath-menu-bar,.nath-menu-bar-theme{--nath-menu-bar-bg: transparent;--nath-menu-bar-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-bar-text: var(--color-gray-700, oklch(37.1% .021 264.444));--nath-menu-bar-hover-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-bar-active-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-bar-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--nath-menu-bar-font-size: .875rem;--nath-menu-bar-height: 3rem;--nath-menu-bar-z-index: 1000;--nath-menu-bar-padding: 0}.dark nath-menu-bar,.dark .nath-menu-bar-theme{--nath-menu-bar-bg: transparent;--nath-menu-bar-border: var(--color-zinc-700, oklch(37% .013 285.805));--nath-menu-bar-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-bar-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-menu-bar-active-bg: var(--color-zinc-800, oklch(27.4% .006 286.033))}.nath-menu-bar{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:var(--nath-menu-bar-bg);border-bottom:1px solid var(--nath-menu-bar-border);height:var(--nath-menu-bar-height);padding:var(--nath-menu-bar-padding);font-size:var(--nath-menu-bar-font-size);color:var(--nath-menu-bar-text);z-index:var(--nath-menu-bar-z-index)}.nath-menu-bar-list{display:flex;list-style:none;margin:0;padding:0;gap:.5rem}.nath-menu-bar-item{position:relative;display:flex;align-items:center;padding:.5rem .75rem;border-radius:.375rem;cursor:pointer;transition:background-color .15s ease;outline:none}.nath-menu-bar-item:hover:not(.nath-menu-bar-item--disabled){background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-item--active{background-color:var(--nath-menu-bar-active-bg)}.nath-menu-bar-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.nath-menu-bar-item--focused{box-shadow:0 0 0 2px var(--color-blue-500, oklch(.5 .15 250))}.nath-menu-bar-item-content{display:flex;align-items:center;gap:.5rem;color:var(--nath-menu-bar-text);text-decoration:none}.nath-menu-bar-item-content svg{flex-shrink:0}.nath-menu-bar-arrow{margin-left:.25rem;color:var(--nath-menu-bar-text);opacity:.7;transition:transform .2s ease}.nath-menu-bar-item--active .nath-menu-bar-arrow{transform:rotate(180deg)}.nath-menu-bar-link{position:absolute;inset:0;text-decoration:none}.nath-menu-bar-toggle{display:none;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;background:transparent;border:none;border-radius:.375rem;cursor:pointer;color:var(--nath-menu-bar-text);transition:background-color .15s ease}.nath-menu-bar-toggle:hover{background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-toggle:focus{outline:none;box-shadow:0 0 0 2px var(--color-blue-500, oklch(.5 .15 250))}.nath-menu-bar-mobile-overlay{position:fixed;inset:0;background-color:#00000080;z-index:calc(var(--nath-menu-bar-z-index) - 1)}.nath-menu-bar-mobile-panel{position:fixed;top:var(--nath-menu-bar-height);left:0;right:0;bottom:0;background-color:var(--nath-menu-bar-bg);overflow-y:auto;z-index:var(--nath-menu-bar-z-index);padding:1rem}.nath-menu-bar-mobile-list{list-style:none;margin:0;padding:0}.nath-menu-bar-mobile-item{border-bottom:1px solid var(--nath-menu-bar-border)}.nath-menu-bar-mobile-item:last-child{border-bottom:none}.nath-menu-bar-mobile-item--disabled{opacity:.5;pointer-events:none}.nath-menu-bar-mobile-item-content{display:flex;align-items:center;justify-content:space-between;padding:1rem;cursor:pointer;transition:background-color .15s ease}.nath-menu-bar-mobile-item-content:hover{background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-mobile-item-text{display:flex;align-items:center;gap:.75rem;font-weight:500}.nath-menu-bar-mobile-arrow{transition:transform .2s ease}.nath-menu-bar-mobile-arrow--rotated{transform:rotate(180deg)}.nath-menu-bar-mobile-submenu{list-style:none;margin:0;padding:0 0 0 1.5rem;background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-mobile-submenu-item{padding:.75rem 1rem;cursor:pointer;transition:background-color .15s ease;border-bottom:1px solid var(--nath-menu-bar-border)}.nath-menu-bar-mobile-submenu-item:last-child{border-bottom:none}.nath-menu-bar-mobile-submenu-item:hover{background-color:var(--nath-menu-bar-active-bg)}.nath-menu-bar-mobile-submenu-item--disabled{opacity:.5;pointer-events:none}.nath-menu-bar-mobile-submenu-item-text{display:flex;align-items:center;gap:.75rem}@media(max-width:768px){.nath-menu-bar-list{display:none}.nath-menu-bar-toggle{display:flex}.nath-menu-bar-dropdown{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NathMenu, selector: "nath-menu", inputs: ["model", "styleClass", "panelStyleClass", "positionX", "positionY", "inline", "flat"], outputs: ["modelChange", "styleClassChange", "panelStyleClassChange", "whenHide"] }, { kind: "component", type: LucideMenu, selector: "svg[lucideMenu]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2064
2064
|
}
|
|
2065
2065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathMenuBar, decorators: [{
|
|
2066
2066
|
type: Component,
|
|
@@ -2075,7 +2075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2075
2075
|
], host: {
|
|
2076
2076
|
'[class]': `styleClass()`,
|
|
2077
2077
|
'(document:click)': `handleDocumentClick($event)`,
|
|
2078
|
-
}, encapsulation: ViewEncapsulation.None, template: "<nav #menuBar class=\"nath-menu-bar-theme nath-menu-bar\" role=\"menubar\">\n <!-- Desktop Menu Bar -->\n <ul class=\"nath-menu-bar-list\">\n @for (item of model(); track item.label; let index = $index) {\n <li\n class=\"nath-menu-bar-item\"\n [class.nath-menu-bar-item--active]=\"activeItem() === item\"\n [class.nath-menu-bar-item--disabled]=\"item.disabled\"\n [class.nath-menu-bar-item--focused]=\"focusedIndex() === index\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [attr.role]=\"item.items && item.items.length > 0 ? 'menuitem' : 'menuitem'\"\n [attr.aria-haspopup]=\"item.items && item.items.length > 0 ? 'true' : 'false'\"\n [attr.aria-expanded]=\"activeItem() === item ? 'true' : 'false'\"\n [tabIndex]=\"-1\"\n (mouseenter)=\"handleItemHover(item, index, $event)\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"focusedIndex() < 0 && focusedIndex.set($index)\"\n >\n <span class=\"nath-menu-bar-item-content\">\n @if (item.icon) {\n @if (isLucideIconComponent(item.icon)) {\n <svg [lucideIcon]=\"item.icon\" [size]=\"16\" />\n } @else {\n <i [class]=\"item.icon\"></i>\n }\n }\n @if (item.escape === false) {\n <span [innerHTML]=\"getMenuLabel(item)\"></span>\n } @else {\n <span>{{ item.label }}</span>\n }\n @if (item.items && item.items.length > 0) {\n <svg lucideChevronDown [size]=\"14\" class=\"nath-menu-bar-arrow\" />\n }\n </span>\n\n @if (item.routerLink) {\n <a\n [routerLink]=\"item.routerLink\"\n [queryParams]=\"item.queryParams\"\n [fragment]=\"item.fragment\"\n [queryParamsHandling]=\"item.queryParamsHandling\"\n [preserveFragment]=\"item.preserveFragment\"\n [skipLocationChange]=\"item.skipLocationChange\"\n [replaceUrl]=\"item.replaceUrl\"\n [state]=\"item.state\"\n [attr.target]=\"item.target\"\n class=\"nath-menu-bar-link\"\n ><span></span\n ></a>\n } @else if (item.url) {\n <a [href]=\"item.url\" [attr.target]=\"item.target || '_blank'\" class=\"nath-menu-bar-link\"\n ><span></span\n ></a>\n }\n </li>\n }\n </ul>\n\n <!-- Mobile Menu Button -->\n <button\n class=\"nath-menu-bar-toggle\"\n [class.nath-menu-bar-toggle--active]=\"isMobileMenuOpen()\"\n (click)=\"toggleMobileMenu()\"\n [attr.aria-label]=\"isMobileMenuOpen() ? 'Close menu' : 'Open menu'\"\n [attr.aria-expanded]=\"isMobileMenuOpen()\"\n >\n @if (isMobileMenuOpen()) {\n <svg lucideX [size]=\"24\" />\n } @else {\n <svg lucideMenu [size]=\"24\" />\n }\n </button>\n</nav>\n\n<!-- Mobile Menu Overlay -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"nath-menu-bar-mobile-overlay\"\n (click)=\"toggleMobileMenu()\"\n (keydown.enter)=\"toggleMobileMenu()\"\n ></div>\n}\n\n<!-- Mobile Menu Panel -->\n@if (isMobileMenuOpen()) {\n <div class=\"nath-menu-bar-mobile-panel\">\n <ul class=\"nath-menu-bar-mobile-list\">\n @for (item of model(); track item.label; let index = $index) {\n <li\n class=\"nath-menu-bar-mobile-item\"\n [class.nath-menu-bar-mobile-item--disabled]=\"item.disabled\"\n [class.nath-menu-bar-mobile-item--expanded]=\"activeItem() === item\"\n >\n <div\n class=\"nath-menu-bar-mobile-item-content\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown.enter)=\"handleItemClick(item, index, $event)\"\n >\n <span class=\"nath-menu-bar-mobile-item-text\">\n @if (item.icon) {\n @if (isLucideIconComponent(item.icon)) {\n <svg [lucideIcon]=\"item.icon\" [size]=\"18\" />\n } @else {\n <i [class]=\"item.icon\"></i>\n }\n }\n <span>{{ item.label }}</span>\n </span>\n @if (item.items && item.items.length > 0) {\n <svg\n lucideChevronDown\n [size]=\"16\"\n class=\"nath-menu-bar-mobile-arrow\"\n [class.nath-menu-bar-mobile-arrow--rotated]=\"activeItem() === item\"\n />\n }\n </div>\n\n @if (item.items && item.items.length > 0 && activeItem() === item) {\n <ul class=\"nath-menu-bar-mobile-submenu\">\n @for (subItem of item.items; track subItem.label; let subIndex = $index) {\n <li\n class=\"nath-menu-bar-mobile-submenu-item\"\n [class.nath-menu-bar-mobile-submenu-item--disabled]=\"subItem.disabled\"\n (click)=\"handleItemClick(subItem, subIndex, $event)\"\n (keydown.enter)=\"handleItemClick(subItem, subIndex, $event)\"\n >\n <span class=\"nath-menu-bar-mobile-submenu-item-text\">\n @if (subItem.icon) {\n @if (isLucideIconComponent(subItem.icon)) {\n <svg [lucideIcon]=\"subItem.icon\" [size]=\"16\" />\n } @else {\n <i [class]=\"subItem.icon\"></i>\n }\n }\n <span>{{ subItem.label }}</span>\n </span>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </div>\n}\n<nath-menu\n #dropdownMenu\n [model]=\"activeItem()?.items ?? []\"\n [positionX]=\"'left'\"\n [positionY]=\"'bottom'\"\n panelStyleClass=\"nath-menu-bar-dropdown\"\n/>\n", styles: ["nath-menu-bar,.nath-menu-bar-theme{--nath-menu-bar-bg: #ffffff;--nath-menu-bar-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-bar-text: var(--color-gray-700, oklch(37.1% .021 264.444));--nath-menu-bar-hover-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-bar-active-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-bar-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--nath-menu-bar-font-size: .875rem;--nath-menu-bar-height: 3rem;--nath-menu-bar-z-index: 1000}.dark nath-menu-bar,.dark .nath-menu-bar-theme{--nath-menu-bar-bg: var(--color-zinc-900, oklch(21% .006 285.885));--nath-menu-bar-border: var(--color-zinc-700, oklch(37% .013 285.805));--nath-menu-bar-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-bar-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-menu-bar-active-bg: var(--color-zinc-800, oklch(27.4% .006 286.033))}.nath-menu-bar{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:var(--nath-menu-bar-bg);border-bottom:1px solid var(--nath-menu-bar-border);height:var(--nath-menu-bar-height);padding:0 1rem;font-size:var(--nath-menu-bar-font-size);color:var(--nath-menu-bar-text);z-index:var(--nath-menu-bar-z-index)}.nath-menu-bar-list{display:flex;list-style:none;margin:0;padding:0;gap:.5rem}.nath-menu-bar-item{position:relative;display:flex;align-items:center;padding:.5rem .75rem;border-radius:.375rem;cursor:pointer;transition:background-color .15s ease;outline:none}.nath-menu-bar-item:hover:not(.nath-menu-bar-item--disabled){background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-item--active{background-color:var(--nath-menu-bar-active-bg)}.nath-menu-bar-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.nath-menu-bar-item--focused{box-shadow:0 0 0 2px var(--color-blue-500, oklch(.5 .15 250))}.nath-menu-bar-item-content{display:flex;align-items:center;gap:.5rem;color:var(--nath-menu-bar-text);text-decoration:none}.nath-menu-bar-item-content svg{flex-shrink:0}.nath-menu-bar-arrow{margin-left:.25rem;color:var(--nath-menu-bar-text);opacity:.7;transition:transform .2s ease}.nath-menu-bar-item--active .nath-menu-bar-arrow{transform:rotate(180deg)}.nath-menu-bar-link{position:absolute;inset:0;text-decoration:none}.nath-menu-bar-toggle{display:none;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;background:transparent;border:none;border-radius:.375rem;cursor:pointer;color:var(--nath-menu-bar-text);transition:background-color .15s ease}.nath-menu-bar-toggle:hover{background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-toggle:focus{outline:none;box-shadow:0 0 0 2px var(--color-blue-500, oklch(.5 .15 250))}.nath-menu-bar-mobile-overlay{position:fixed;inset:0;background-color:#00000080;z-index:calc(var(--nath-menu-bar-z-index) - 1)}.nath-menu-bar-mobile-panel{position:fixed;top:var(--nath-menu-bar-height);left:0;right:0;bottom:0;background-color:var(--nath-menu-bar-bg);overflow-y:auto;z-index:var(--nath-menu-bar-z-index);padding:1rem}.nath-menu-bar-mobile-list{list-style:none;margin:0;padding:0}.nath-menu-bar-mobile-item{border-bottom:1px solid var(--nath-menu-bar-border)}.nath-menu-bar-mobile-item:last-child{border-bottom:none}.nath-menu-bar-mobile-item--disabled{opacity:.5;pointer-events:none}.nath-menu-bar-mobile-item-content{display:flex;align-items:center;justify-content:space-between;padding:1rem;cursor:pointer;transition:background-color .15s ease}.nath-menu-bar-mobile-item-content:hover{background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-mobile-item-text{display:flex;align-items:center;gap:.75rem;font-weight:500}.nath-menu-bar-mobile-arrow{transition:transform .2s ease}.nath-menu-bar-mobile-arrow--rotated{transform:rotate(180deg)}.nath-menu-bar-mobile-submenu{list-style:none;margin:0;padding:0 0 0 1.5rem;background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-mobile-submenu-item{padding:.75rem 1rem;cursor:pointer;transition:background-color .15s ease;border-bottom:1px solid var(--nath-menu-bar-border)}.nath-menu-bar-mobile-submenu-item:last-child{border-bottom:none}.nath-menu-bar-mobile-submenu-item:hover{background-color:var(--nath-menu-bar-active-bg)}.nath-menu-bar-mobile-submenu-item--disabled{opacity:.5;pointer-events:none}.nath-menu-bar-mobile-submenu-item-text{display:flex;align-items:center;gap:.75rem}@media(max-width:768px){.nath-menu-bar-list{display:none}.nath-menu-bar-toggle{display:flex}.nath-menu-bar-dropdown{display:none}}\n"] }]
|
|
2078
|
+
}, encapsulation: ViewEncapsulation.None, template: "<nav #menuBar class=\"nath-menu-bar-theme nath-menu-bar\" role=\"menubar\">\n <!-- Desktop Menu Bar -->\n <ul class=\"nath-menu-bar-list\">\n @for (item of model(); track item.label; let index = $index) {\n <li\n class=\"nath-menu-bar-item\"\n [class.nath-menu-bar-item--active]=\"activeItem() === item\"\n [class.nath-menu-bar-item--disabled]=\"item.disabled\"\n [class.nath-menu-bar-item--focused]=\"focusedIndex() === index\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [attr.role]=\"item.items && item.items.length > 0 ? 'menuitem' : 'menuitem'\"\n [attr.aria-haspopup]=\"item.items && item.items.length > 0 ? 'true' : 'false'\"\n [attr.aria-expanded]=\"activeItem() === item ? 'true' : 'false'\"\n [tabIndex]=\"-1\"\n (mouseenter)=\"handleItemHover(item, index, $event)\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"focusedIndex() < 0 && focusedIndex.set($index)\"\n >\n <span class=\"nath-menu-bar-item-content\">\n @if (item.icon) {\n @if (isLucideIconComponent(item.icon)) {\n <svg [lucideIcon]=\"item.icon\" [size]=\"16\" />\n } @else {\n <i [class]=\"item.icon\"></i>\n }\n }\n @if (item.escape === false) {\n <span [innerHTML]=\"getMenuLabel(item)\"></span>\n } @else {\n <span>{{ item.label }}</span>\n }\n @if (item.items && item.items.length > 0) {\n <svg lucideChevronDown [size]=\"14\" class=\"nath-menu-bar-arrow\" />\n }\n </span>\n\n @if (item.routerLink) {\n <a\n [routerLink]=\"item.routerLink\"\n [queryParams]=\"item.queryParams\"\n [fragment]=\"item.fragment\"\n [queryParamsHandling]=\"item.queryParamsHandling\"\n [preserveFragment]=\"item.preserveFragment\"\n [skipLocationChange]=\"item.skipLocationChange\"\n [replaceUrl]=\"item.replaceUrl\"\n [state]=\"item.state\"\n [attr.target]=\"item.target\"\n class=\"nath-menu-bar-link\"\n ><span></span\n ></a>\n } @else if (item.url) {\n <a [href]=\"item.url\" [attr.target]=\"item.target || '_blank'\" class=\"nath-menu-bar-link\"\n ><span></span\n ></a>\n }\n </li>\n }\n </ul>\n\n <!-- Mobile Menu Button -->\n <button\n class=\"nath-menu-bar-toggle\"\n [class.nath-menu-bar-toggle--active]=\"isMobileMenuOpen()\"\n (click)=\"toggleMobileMenu()\"\n [attr.aria-label]=\"isMobileMenuOpen() ? 'Close menu' : 'Open menu'\"\n [attr.aria-expanded]=\"isMobileMenuOpen()\"\n >\n @if (isMobileMenuOpen()) {\n <svg lucideX [size]=\"24\" />\n } @else {\n <svg lucideMenu [size]=\"24\" />\n }\n </button>\n</nav>\n\n<!-- Mobile Menu Overlay -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"nath-menu-bar-mobile-overlay\"\n (click)=\"toggleMobileMenu()\"\n (keydown.enter)=\"toggleMobileMenu()\"\n ></div>\n}\n\n<!-- Mobile Menu Panel -->\n@if (isMobileMenuOpen()) {\n <div class=\"nath-menu-bar-mobile-panel\">\n <ul class=\"nath-menu-bar-mobile-list\">\n @for (item of model(); track item.label; let index = $index) {\n <li\n class=\"nath-menu-bar-mobile-item\"\n [class.nath-menu-bar-mobile-item--disabled]=\"item.disabled\"\n [class.nath-menu-bar-mobile-item--expanded]=\"activeItem() === item\"\n >\n <div\n class=\"nath-menu-bar-mobile-item-content\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown.enter)=\"handleItemClick(item, index, $event)\"\n >\n <span class=\"nath-menu-bar-mobile-item-text\">\n @if (item.icon) {\n @if (isLucideIconComponent(item.icon)) {\n <svg [lucideIcon]=\"item.icon\" [size]=\"18\" />\n } @else {\n <i [class]=\"item.icon\"></i>\n }\n }\n <span>{{ item.label }}</span>\n </span>\n @if (item.items && item.items.length > 0) {\n <svg\n lucideChevronDown\n [size]=\"16\"\n class=\"nath-menu-bar-mobile-arrow\"\n [class.nath-menu-bar-mobile-arrow--rotated]=\"activeItem() === item\"\n />\n }\n </div>\n\n @if (item.items && item.items.length > 0 && activeItem() === item) {\n <ul class=\"nath-menu-bar-mobile-submenu\">\n @for (subItem of item.items; track subItem.label; let subIndex = $index) {\n <li\n class=\"nath-menu-bar-mobile-submenu-item\"\n [class.nath-menu-bar-mobile-submenu-item--disabled]=\"subItem.disabled\"\n (click)=\"handleItemClick(subItem, subIndex, $event)\"\n (keydown.enter)=\"handleItemClick(subItem, subIndex, $event)\"\n >\n <span class=\"nath-menu-bar-mobile-submenu-item-text\">\n @if (subItem.icon) {\n @if (isLucideIconComponent(subItem.icon)) {\n <svg [lucideIcon]=\"subItem.icon\" [size]=\"16\" />\n } @else {\n <i [class]=\"subItem.icon\"></i>\n }\n }\n <span>{{ subItem.label }}</span>\n </span>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </div>\n}\n<nath-menu\n #dropdownMenu\n [model]=\"activeItem()?.items ?? []\"\n [positionX]=\"'left'\"\n [positionY]=\"'bottom'\"\n panelStyleClass=\"nath-menu-bar-dropdown\"\n/>\n", styles: ["nath-menu-bar,.nath-menu-bar-theme{--nath-menu-bar-bg: transparent;--nath-menu-bar-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-bar-text: var(--color-gray-700, oklch(37.1% .021 264.444));--nath-menu-bar-hover-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-bar-active-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-bar-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--nath-menu-bar-font-size: .875rem;--nath-menu-bar-height: 3rem;--nath-menu-bar-z-index: 1000;--nath-menu-bar-padding: 0}.dark nath-menu-bar,.dark .nath-menu-bar-theme{--nath-menu-bar-bg: transparent;--nath-menu-bar-border: var(--color-zinc-700, oklch(37% .013 285.805));--nath-menu-bar-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-bar-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-menu-bar-active-bg: var(--color-zinc-800, oklch(27.4% .006 286.033))}.nath-menu-bar{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:var(--nath-menu-bar-bg);border-bottom:1px solid var(--nath-menu-bar-border);height:var(--nath-menu-bar-height);padding:var(--nath-menu-bar-padding);font-size:var(--nath-menu-bar-font-size);color:var(--nath-menu-bar-text);z-index:var(--nath-menu-bar-z-index)}.nath-menu-bar-list{display:flex;list-style:none;margin:0;padding:0;gap:.5rem}.nath-menu-bar-item{position:relative;display:flex;align-items:center;padding:.5rem .75rem;border-radius:.375rem;cursor:pointer;transition:background-color .15s ease;outline:none}.nath-menu-bar-item:hover:not(.nath-menu-bar-item--disabled){background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-item--active{background-color:var(--nath-menu-bar-active-bg)}.nath-menu-bar-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.nath-menu-bar-item--focused{box-shadow:0 0 0 2px var(--color-blue-500, oklch(.5 .15 250))}.nath-menu-bar-item-content{display:flex;align-items:center;gap:.5rem;color:var(--nath-menu-bar-text);text-decoration:none}.nath-menu-bar-item-content svg{flex-shrink:0}.nath-menu-bar-arrow{margin-left:.25rem;color:var(--nath-menu-bar-text);opacity:.7;transition:transform .2s ease}.nath-menu-bar-item--active .nath-menu-bar-arrow{transform:rotate(180deg)}.nath-menu-bar-link{position:absolute;inset:0;text-decoration:none}.nath-menu-bar-toggle{display:none;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;background:transparent;border:none;border-radius:.375rem;cursor:pointer;color:var(--nath-menu-bar-text);transition:background-color .15s ease}.nath-menu-bar-toggle:hover{background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-toggle:focus{outline:none;box-shadow:0 0 0 2px var(--color-blue-500, oklch(.5 .15 250))}.nath-menu-bar-mobile-overlay{position:fixed;inset:0;background-color:#00000080;z-index:calc(var(--nath-menu-bar-z-index) - 1)}.nath-menu-bar-mobile-panel{position:fixed;top:var(--nath-menu-bar-height);left:0;right:0;bottom:0;background-color:var(--nath-menu-bar-bg);overflow-y:auto;z-index:var(--nath-menu-bar-z-index);padding:1rem}.nath-menu-bar-mobile-list{list-style:none;margin:0;padding:0}.nath-menu-bar-mobile-item{border-bottom:1px solid var(--nath-menu-bar-border)}.nath-menu-bar-mobile-item:last-child{border-bottom:none}.nath-menu-bar-mobile-item--disabled{opacity:.5;pointer-events:none}.nath-menu-bar-mobile-item-content{display:flex;align-items:center;justify-content:space-between;padding:1rem;cursor:pointer;transition:background-color .15s ease}.nath-menu-bar-mobile-item-content:hover{background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-mobile-item-text{display:flex;align-items:center;gap:.75rem;font-weight:500}.nath-menu-bar-mobile-arrow{transition:transform .2s ease}.nath-menu-bar-mobile-arrow--rotated{transform:rotate(180deg)}.nath-menu-bar-mobile-submenu{list-style:none;margin:0;padding:0 0 0 1.5rem;background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-mobile-submenu-item{padding:.75rem 1rem;cursor:pointer;transition:background-color .15s ease;border-bottom:1px solid var(--nath-menu-bar-border)}.nath-menu-bar-mobile-submenu-item:last-child{border-bottom:none}.nath-menu-bar-mobile-submenu-item:hover{background-color:var(--nath-menu-bar-active-bg)}.nath-menu-bar-mobile-submenu-item--disabled{opacity:.5;pointer-events:none}.nath-menu-bar-mobile-submenu-item-text{display:flex;align-items:center;gap:.75rem}@media(max-width:768px){.nath-menu-bar-list{display:none}.nath-menu-bar-toggle{display:flex}.nath-menu-bar-dropdown{display:none}}\n"] }]
|
|
2079
2079
|
}], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], whenCommand: [{ type: i0.Output, args: ["whenCommand"] }], menuBarElement: [{ type: i0.ViewChild, args: ['menuBar', { isSignal: true }] }], dropdownMenu: [{ type: i0.ViewChild, args: ['dropdownMenu', { isSignal: true }] }] } });
|
|
2080
2080
|
|
|
2081
2081
|
let nextId$1 = 0;
|