nath-angular-ui 0.7.1 → 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.
|
@@ -1446,6 +1446,27 @@ function previousSibling(el, selector) {
|
|
|
1446
1446
|
return null;
|
|
1447
1447
|
}
|
|
1448
1448
|
|
|
1449
|
+
function getAncestorsMatchingSelector(element, selector) {
|
|
1450
|
+
if (!element)
|
|
1451
|
+
return [];
|
|
1452
|
+
const parents = [];
|
|
1453
|
+
let current = element.parentElement;
|
|
1454
|
+
while (current) {
|
|
1455
|
+
// Find the nearest ancestor matching the selector starting from the current parent
|
|
1456
|
+
const match = current.closest(selector);
|
|
1457
|
+
if (match) {
|
|
1458
|
+
parents.push(match);
|
|
1459
|
+
// Move past the matched element to continue searching up the tree
|
|
1460
|
+
current = match.parentElement;
|
|
1461
|
+
}
|
|
1462
|
+
else {
|
|
1463
|
+
// No more matches found higher up
|
|
1464
|
+
break;
|
|
1465
|
+
}
|
|
1466
|
+
}
|
|
1467
|
+
return parents;
|
|
1468
|
+
}
|
|
1469
|
+
|
|
1449
1470
|
const SUBMENU_ALIGNMENT_CONFIG = {
|
|
1450
1471
|
ESTIMATED_INITIAL_WIDTH_PX: 200,
|
|
1451
1472
|
VIEWPORT_COLLISION_PADDING_PX: 8,
|
|
@@ -1495,14 +1516,13 @@ class NathMenuList {
|
|
|
1495
1516
|
const items = Array.from(menuList.querySelectorAll(':scope > div > ul > .nath-menu-item'));
|
|
1496
1517
|
this.menuItemsElements.set(items);
|
|
1497
1518
|
setTimeout(() => {
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1519
|
+
if (getAncestorsMatchingSelector(this.elementRef.nativeElement, '.nath-menu-panel')[0]?.contains(document.activeElement)) {
|
|
1520
|
+
const first = this.menuItemsElements()[0];
|
|
1521
|
+
first?.focus();
|
|
1522
|
+
!!first && this.focusedIndex.set(0);
|
|
1523
|
+
}
|
|
1501
1524
|
});
|
|
1502
1525
|
}
|
|
1503
|
-
fromEvent(this.document, 'keydown')
|
|
1504
|
-
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
1505
|
-
.subscribe((event) => this.handleKeyDown(event));
|
|
1506
1526
|
}
|
|
1507
1527
|
// ────────────────────────────────────────────────────────────────────────────────
|
|
1508
1528
|
// METHODS
|
|
@@ -1589,81 +1609,27 @@ class NathMenuList {
|
|
|
1589
1609
|
handleKeyDown = this.debounce((event) => {
|
|
1590
1610
|
const items = this.menuItemsElements();
|
|
1591
1611
|
const currentIndex = this.focusedIndex();
|
|
1592
|
-
const currentItem = items[currentIndex];
|
|
1593
1612
|
const currentMenuItem = this.items().at(currentIndex);
|
|
1594
1613
|
let newIndex = currentIndex;
|
|
1595
1614
|
switch (event.key) {
|
|
1596
1615
|
case 'ArrowDown':
|
|
1597
|
-
|
|
1598
|
-
event.stopPropagation();
|
|
1599
|
-
if (currentIndex < items.length - 1) {
|
|
1600
|
-
const nextInteractiveItem = findSibling(items[currentIndex], '.nath-menu-item--interactive', 'next');
|
|
1601
|
-
if (nextInteractiveItem?.indexOffset) {
|
|
1602
|
-
newIndex = currentIndex + nextInteractiveItem.indexOffset;
|
|
1603
|
-
}
|
|
1604
|
-
}
|
|
1605
|
-
else {
|
|
1606
|
-
// We're at the last item, go back to the first
|
|
1607
|
-
newIndex = 0;
|
|
1608
|
-
}
|
|
1616
|
+
newIndex = this.handleArrowDown(event, items, currentIndex);
|
|
1609
1617
|
break;
|
|
1610
1618
|
case 'ArrowUp':
|
|
1611
|
-
|
|
1612
|
-
event.stopPropagation();
|
|
1613
|
-
if (currentIndex > 0) {
|
|
1614
|
-
const nextInteractiveItem = findSibling(items[currentIndex], '.nath-menu-item--interactive', 'previous');
|
|
1615
|
-
if (nextInteractiveItem?.indexOffset) {
|
|
1616
|
-
newIndex = currentIndex + nextInteractiveItem.indexOffset;
|
|
1617
|
-
}
|
|
1618
|
-
}
|
|
1619
|
-
else {
|
|
1620
|
-
// We're at the first item, go to the last
|
|
1621
|
-
for (let i = items.length - 1; i >= 0; i--) {
|
|
1622
|
-
if (items[i].classList.contains('nath-menu-item--interactive')) {
|
|
1623
|
-
newIndex = i;
|
|
1624
|
-
break;
|
|
1625
|
-
}
|
|
1626
|
-
}
|
|
1627
|
-
}
|
|
1619
|
+
newIndex = this.handleArrowUp(event, items, currentIndex);
|
|
1628
1620
|
break;
|
|
1629
1621
|
case 'ArrowRight':
|
|
1630
|
-
|
|
1631
|
-
event.preventDefault();
|
|
1632
|
-
event.stopPropagation();
|
|
1633
|
-
if (currentMenuItem?.items?.length && !currentMenuItem?.disabled) {
|
|
1634
|
-
items[currentIndex].dispatchEvent(new Event('mouseenter'));
|
|
1635
|
-
this.focusedIndex.set(-1);
|
|
1636
|
-
}
|
|
1622
|
+
this.handleArrowRight(event, currentMenuItem, items, currentIndex);
|
|
1637
1623
|
return;
|
|
1638
1624
|
case 'ArrowLeft':
|
|
1639
|
-
|
|
1640
|
-
if (currentMenuItem) {
|
|
1641
|
-
const thisList = this.elementRef.nativeElement;
|
|
1642
|
-
if (thisList.parentElement?.classList.contains('nath-menu-submenu-panel')) {
|
|
1643
|
-
const parentList = previousSibling(thisList.parentElement, '.nath-menu-list');
|
|
1644
|
-
parentList?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
|
|
1645
|
-
}
|
|
1646
|
-
}
|
|
1647
|
-
if (this.activeItem()?.items?.length) {
|
|
1648
|
-
newIndex = this.items().findIndex((item) => item.label && item.label === this.activeItem()?.label);
|
|
1649
|
-
this.activeItem.set(null);
|
|
1650
|
-
}
|
|
1625
|
+
newIndex = this.handleArrowLeft(currentMenuItem, currentIndex);
|
|
1651
1626
|
break;
|
|
1652
1627
|
case 'Escape':
|
|
1653
|
-
|
|
1654
|
-
const thisList = this.elementRef.nativeElement;
|
|
1655
|
-
if (thisList.parentElement?.classList.contains('nath-menu-submenu-panel')) {
|
|
1656
|
-
const parentList = previousSibling(thisList.parentElement, '.nath-menu-list');
|
|
1657
|
-
parentList?.parentElement?.dispatchEvent(new MouseEvent('mouseleave'));
|
|
1658
|
-
}
|
|
1628
|
+
this.handleEscape(event);
|
|
1659
1629
|
return;
|
|
1660
1630
|
case 'Enter':
|
|
1661
1631
|
case ' ':
|
|
1662
|
-
|
|
1663
|
-
if (currentIndex >= 0 && currentIndex < items.length) {
|
|
1664
|
-
const item = this.items()[currentIndex];
|
|
1665
|
-
this.onItemClick(item, currentIndex, event);
|
|
1666
|
-
}
|
|
1632
|
+
this.handleEnterOrSpace(event, items, currentIndex);
|
|
1667
1633
|
return;
|
|
1668
1634
|
default:
|
|
1669
1635
|
return;
|
|
@@ -1671,6 +1637,74 @@ class NathMenuList {
|
|
|
1671
1637
|
this.focusedIndex.set(newIndex);
|
|
1672
1638
|
setTimeout(() => items[newIndex]?.focus());
|
|
1673
1639
|
}, 100);
|
|
1640
|
+
handleArrowDown(event, items, currentIndex) {
|
|
1641
|
+
event.preventDefault();
|
|
1642
|
+
event.stopPropagation();
|
|
1643
|
+
if (currentIndex < items.length - 1) {
|
|
1644
|
+
const nextInteractiveItem = findSibling(items[currentIndex], '.nath-menu-item--interactive', 'next');
|
|
1645
|
+
if (nextInteractiveItem?.indexOffset) {
|
|
1646
|
+
return currentIndex + nextInteractiveItem.indexOffset;
|
|
1647
|
+
}
|
|
1648
|
+
}
|
|
1649
|
+
return 0;
|
|
1650
|
+
}
|
|
1651
|
+
handleArrowUp(event, items, currentIndex) {
|
|
1652
|
+
event.preventDefault();
|
|
1653
|
+
event.stopPropagation();
|
|
1654
|
+
if (currentIndex > 0) {
|
|
1655
|
+
const nextInteractiveItem = findSibling(items[currentIndex], '.nath-menu-item--interactive', 'previous');
|
|
1656
|
+
if (nextInteractiveItem?.indexOffset) {
|
|
1657
|
+
return currentIndex + nextInteractiveItem.indexOffset;
|
|
1658
|
+
}
|
|
1659
|
+
return currentIndex;
|
|
1660
|
+
}
|
|
1661
|
+
return this.findLastInteractiveItem(items);
|
|
1662
|
+
}
|
|
1663
|
+
findLastInteractiveItem(items) {
|
|
1664
|
+
for (let i = items.length - 1; i >= 0; i--) {
|
|
1665
|
+
if (items[i].classList.contains('nath-menu-item--interactive')) {
|
|
1666
|
+
return i;
|
|
1667
|
+
}
|
|
1668
|
+
}
|
|
1669
|
+
return 0;
|
|
1670
|
+
}
|
|
1671
|
+
handleArrowRight(event, currentMenuItem, items, currentIndex) {
|
|
1672
|
+
event.preventDefault();
|
|
1673
|
+
event.stopPropagation();
|
|
1674
|
+
if (currentMenuItem?.items?.length && !currentMenuItem?.disabled && items[currentIndex]) {
|
|
1675
|
+
items[currentIndex].dispatchEvent(new Event('mouseenter'));
|
|
1676
|
+
}
|
|
1677
|
+
}
|
|
1678
|
+
handleArrowLeft(currentMenuItem, currentIndex) {
|
|
1679
|
+
if (currentMenuItem) {
|
|
1680
|
+
const thisList = this.elementRef.nativeElement;
|
|
1681
|
+
if (thisList.parentElement?.classList.contains('nath-menu-submenu-panel')) {
|
|
1682
|
+
const parentList = previousSibling(thisList.parentElement, '.nath-menu-list');
|
|
1683
|
+
parentList?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
|
|
1684
|
+
}
|
|
1685
|
+
}
|
|
1686
|
+
if (this.activeItem()?.items?.length) {
|
|
1687
|
+
const newIndex = this.items().findIndex((item) => item.label && item.label === this.activeItem()?.label);
|
|
1688
|
+
this.activeItem.set(null);
|
|
1689
|
+
return newIndex;
|
|
1690
|
+
}
|
|
1691
|
+
return currentIndex;
|
|
1692
|
+
}
|
|
1693
|
+
handleEscape(event) {
|
|
1694
|
+
event.preventDefault();
|
|
1695
|
+
const thisList = this.elementRef.nativeElement;
|
|
1696
|
+
if (thisList.parentElement?.classList.contains('nath-menu-submenu-panel')) {
|
|
1697
|
+
const parentList = previousSibling(thisList.parentElement, '.nath-menu-list');
|
|
1698
|
+
parentList?.parentElement?.dispatchEvent(new MouseEvent('mouseleave'));
|
|
1699
|
+
}
|
|
1700
|
+
}
|
|
1701
|
+
handleEnterOrSpace(event, items, currentIndex) {
|
|
1702
|
+
event.preventDefault();
|
|
1703
|
+
if (currentIndex >= 0 && currentIndex < items.length) {
|
|
1704
|
+
const item = this.items()[currentIndex];
|
|
1705
|
+
this.onItemClick(item, currentIndex, event);
|
|
1706
|
+
}
|
|
1707
|
+
}
|
|
1674
1708
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathMenuList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1675
1709
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathMenuList, isStandalone: true, selector: "nath-menu-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { whenCommand: "whenCommand" }, viewQueries: [{ propertyName: "submenuContainers", predicate: ["submenuContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div (mouseleave)=\"onMouseLeave($event)\">\n <ul class=\"nath-menu-list-theme nath-menu-list nath-menu-custom-scrollbar\">\n @for (item of items(); track $index) {\n <li\n class=\"nath-menu-item\"\n [class.nath-menu-item--enabled]=\"!item.disabled\"\n [class.nath-menu-item--disabled]=\"item.disabled\"\n [class.nath-menu-item--padded]=\"!item.separator\"\n [class.nath-menu-item--separator]=\"item.separator\"\n [class.nath-menu-item--clickable]=\"item.routerLink || item.command || item.url\"\n [class.nath-menu-item--header]=\"!item.routerLink && !item.command && !item.url\"\n [class.nath-menu-item--interactive]=\"\n !item.disabled &&\n (item.routerLink || item.command || item.url || (item.items?.length && !flat()))\n \"\n [routerLink]=\"item.routerLink\"\n [queryParams]=\"item.queryParams\"\n routerLinkActive=\"nath-menu-item--active\"\n [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n [attr.tabindex]=\"-1\"\n [attr.title]=\"item.title\"\n (mouseenter)=\"!item.disabled && onItemHover(item, $event)\"\n (click)=\"onItemClick(item, $index, $event)\"\n (keydown)=\"$event.preventDefault(); handleKeyDown($event)\"\n (focus)=\"focusedIndex() < 0 && focusedIndex.set($index)\"\n >\n @if (!item.separator) {\n <span class=\"nath-menu-item-content\">\n @if (item.icon) {\n @if (isLucideIconComponent(item.icon)) {\n <svg [lucideIcon]=\"item.icon\" />\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 class=\"nath-menu-item-text-truncate\">{{ item.label }}</span>\n }\n </span>\n\n @if (item.items && item.items.length > 0 && !flat()) {\n <span class=\"nath-menu-item-arrow\">\u203A</span>\n }\n }\n </li>\n\n @if (flat() && item.items) {\n <nath-menu-list [items]=\"item.items\" (whenCommand)=\"whenCommand.emit($event)\" />\n }\n } @empty {\n <li class=\"nath-menu-item nath-menu-item--padded nath-menu-item--disabled\">\n No actions available\n </li>\n }\n </ul>\n\n @if (!flat()) {\n @if (activeItem()?.items?.length) {\n <div\n #submenuContainer\n class=\"nath-menu-list-theme nath-menu-submenu-panel\"\n [style.left.px]=\"submenuLeft()\"\n [style.top.px]=\"submenuTop()\"\n >\n <nath-menu-list\n [items]=\"activeItem()!.items!\"\n [direction]=\"nextSubmenuDirection()\"\n (whenCommand)=\"whenCommand.emit($event)\"\n />\n </div>\n }\n }\n</div>\n", styles: ["nath-menu-list,.nath-menu-list-theme{--nath-menu-list-text: var(--color-zinc-700, oklch(37.1% .021 264.444));--nath-menu-list-text-muted: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-menu-list-text-disabled: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-menu-list-hover-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-list-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-list-bg: #ffffff;--nath-menu-list-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--nath-menu-list-z-index: 10000}.dark nath-menu-list,.dark .nath-menu-list-theme{--nath-menu-list-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-list-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-menu-list-text-disabled: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-menu-list-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-menu-list-border: var(--color-zinc-700, oklch(37% .013 285.805));--nath-menu-list-bg: var(--color-zinc-900, oklch(21% .006 285.885))}.nath-menu-list{max-height:90vh;overflow-y:auto;overflow-x:hidden;list-style-type:none;margin:0;padding:0;width:100%}.nath-menu-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:background-color .15s,color .15s}.nath-menu-item--enabled{color:var(--nath-menu-list-text)}.nath-menu-item--interactive:hover,.nath-menu-item--interactive:focus,.nath-menu-item--interactive:focus-within{background-color:var(--nath-menu-list-hover-bg)}.nath-menu-item--padded{padding:.5rem 1rem}.nath-menu-item--separator{border-top:1px solid var(--nath-menu-list-border)}.nath-menu-item--clickable{cursor:pointer}.nath-menu-item--header{font-weight:700}.nath-menu-item--disabled{color:var(--nath-menu-list-text-disabled);cursor:default;opacity:.6;pointer-events:none}.nath-menu-item-content{display:flex;align-items:center;gap:.5rem;min-width:0;pointer-events:none}.nath-menu-item-text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nath-menu-item-arrow{font-size:1.5rem;color:var(--nath-menu-list-text-muted);flex-shrink:0;pointer-events:none}.nath-menu-submenu-panel{position:fixed;background-color:var(--nath-menu-list-bg);border:1px solid var(--nath-menu-list-border);border-radius:.5rem;box-shadow:var(--nath-menu-list-shadow);padding:.5rem 0;color:var(--nath-menu-list-text);z-index:var(--nath-menu-list-z-index);overflow:visible;visibility:hidden}.nath-menu-custom-scrollbar::-webkit-scrollbar{width:6px}.nath-menu-custom-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-zinc-300, oklch(87.1% .006 286.286));border-radius:3px}\n"], dependencies: [{ kind: "component", type: NathMenuList, selector: "nath-menu-list", inputs: ["items", "direction", "flat"], outputs: ["whenCommand"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1676
1710
|
}
|
|
@@ -1842,6 +1876,7 @@ class NathMenuBar {
|
|
|
1842
1876
|
document = inject(DOCUMENT);
|
|
1843
1877
|
sanitizer = inject(DomSanitizer);
|
|
1844
1878
|
destroyRef = inject(DestroyRef);
|
|
1879
|
+
elementRef = inject((ElementRef));
|
|
1845
1880
|
model = input([], /* @ts-ignore */
|
|
1846
1881
|
...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
|
|
1847
1882
|
styleClass = input('', /* @ts-ignore */
|
|
@@ -1867,9 +1902,6 @@ class NathMenuBar {
|
|
|
1867
1902
|
const items = Array.from(menuBar.querySelectorAll('.nath-menu-bar-item'));
|
|
1868
1903
|
this.menuItemsElements.set(items);
|
|
1869
1904
|
}
|
|
1870
|
-
fromEvent(this.document, 'keydown')
|
|
1871
|
-
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
1872
|
-
.subscribe((event) => this.handleKeyDown(event));
|
|
1873
1905
|
}
|
|
1874
1906
|
handleDocumentClick(event) {
|
|
1875
1907
|
const menuBar = this.menuBarElement()?.nativeElement;
|
|
@@ -1938,41 +1970,80 @@ class NathMenuBar {
|
|
|
1938
1970
|
this.isMobileMenuOpen.set(false);
|
|
1939
1971
|
}
|
|
1940
1972
|
handleKeyDown(event) {
|
|
1973
|
+
if (!this.elementRef.nativeElement.contains(document.activeElement)) {
|
|
1974
|
+
return;
|
|
1975
|
+
}
|
|
1941
1976
|
const items = this.menuItemsElements();
|
|
1942
1977
|
if (items.length === 0)
|
|
1943
1978
|
return;
|
|
1944
1979
|
const currentIndex = this.focusedIndex();
|
|
1945
|
-
|
|
1946
|
-
|
|
1980
|
+
const newIndex = this.handleKeyNavigation(event.key, currentIndex, items, event);
|
|
1981
|
+
if (newIndex !== null) {
|
|
1982
|
+
this.focusedIndex.set(newIndex);
|
|
1983
|
+
items[newIndex]?.focus();
|
|
1984
|
+
}
|
|
1985
|
+
}
|
|
1986
|
+
handleKeyNavigation(key, currentIndex, items, event) {
|
|
1987
|
+
switch (key) {
|
|
1947
1988
|
case 'ArrowRight':
|
|
1948
|
-
|
|
1949
|
-
newIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
|
|
1950
|
-
break;
|
|
1989
|
+
return this.handleArrowRight(currentIndex, items);
|
|
1951
1990
|
case 'ArrowLeft':
|
|
1952
1991
|
event.preventDefault();
|
|
1953
|
-
|
|
1954
|
-
break;
|
|
1992
|
+
return this.handleArrowLeft(currentIndex, items);
|
|
1955
1993
|
case 'ArrowDown':
|
|
1956
|
-
return;
|
|
1994
|
+
return null;
|
|
1957
1995
|
case 'Escape':
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
this.isMobileMenuOpen.set(false);
|
|
1961
|
-
this.focusedIndex.set(-1);
|
|
1962
|
-
return;
|
|
1996
|
+
this.handleEscape(event);
|
|
1997
|
+
return null;
|
|
1963
1998
|
case 'Enter':
|
|
1964
1999
|
case ' ':
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
const item = this.model()[currentIndex];
|
|
1968
|
-
this.handleItemClick(item, currentIndex, event);
|
|
1969
|
-
}
|
|
1970
|
-
return;
|
|
2000
|
+
this.handleEnterOrSpace(currentIndex, items, event);
|
|
2001
|
+
return null;
|
|
1971
2002
|
default:
|
|
1972
|
-
return;
|
|
2003
|
+
return null;
|
|
2004
|
+
}
|
|
2005
|
+
}
|
|
2006
|
+
handleArrowRight(currentIndex, items) {
|
|
2007
|
+
if (currentIndex < items.length - 1) {
|
|
2008
|
+
const nextInteractiveItem = findSibling(items[currentIndex], '.nath-menu-bar-item:not(.nath-menu-bar-item--disabled)', 'next');
|
|
2009
|
+
if (nextInteractiveItem?.indexOffset) {
|
|
2010
|
+
return currentIndex + nextInteractiveItem.indexOffset;
|
|
2011
|
+
}
|
|
2012
|
+
return currentIndex;
|
|
2013
|
+
}
|
|
2014
|
+
return 0;
|
|
2015
|
+
}
|
|
2016
|
+
handleArrowLeft(currentIndex, items) {
|
|
2017
|
+
if (currentIndex > 0) {
|
|
2018
|
+
const nextInteractiveItem = findSibling(items[currentIndex], '.nath-menu-bar-item:not(.nath-menu-bar-item--disabled)', 'previous');
|
|
2019
|
+
if (nextInteractiveItem?.indexOffset) {
|
|
2020
|
+
return currentIndex + nextInteractiveItem.indexOffset;
|
|
2021
|
+
}
|
|
2022
|
+
return currentIndex;
|
|
2023
|
+
}
|
|
2024
|
+
return this.findLastEnabledItem(items);
|
|
2025
|
+
}
|
|
2026
|
+
findLastEnabledItem(items) {
|
|
2027
|
+
for (let i = items.length - 1; i >= 0; i--) {
|
|
2028
|
+
if (items[i].classList.contains('nath-menu-bar-item') &&
|
|
2029
|
+
!items[i].classList.contains('nath-menu-bar-item--disabled')) {
|
|
2030
|
+
return i;
|
|
2031
|
+
}
|
|
2032
|
+
}
|
|
2033
|
+
return 0;
|
|
2034
|
+
}
|
|
2035
|
+
handleEscape(event) {
|
|
2036
|
+
event.preventDefault();
|
|
2037
|
+
this.closeAllMenus();
|
|
2038
|
+
this.isMobileMenuOpen.set(false);
|
|
2039
|
+
this.focusedIndex.set(-1);
|
|
2040
|
+
}
|
|
2041
|
+
handleEnterOrSpace(currentIndex, items, event) {
|
|
2042
|
+
event.preventDefault();
|
|
2043
|
+
if (currentIndex >= 0 && currentIndex < items.length) {
|
|
2044
|
+
const item = this.model()[currentIndex];
|
|
2045
|
+
this.handleItemClick(item, currentIndex, event);
|
|
1973
2046
|
}
|
|
1974
|
-
this.focusedIndex.set(newIndex);
|
|
1975
|
-
items[newIndex]?.focus();
|
|
1976
2047
|
}
|
|
1977
2048
|
handleSubmenuCommand(payload) {
|
|
1978
2049
|
this.executeItem(payload.item, payload.index, payload.event);
|
|
@@ -1989,7 +2060,7 @@ class NathMenuBar {
|
|
|
1989
2060
|
this.closeAllMenus();
|
|
1990
2061
|
}
|
|
1991
2062
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathMenuBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1992
|
-
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 (mouseenter)=\"handleItemHover(item, index, $event)\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown)=\"handleKeyDown($event)\"\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 });
|
|
1993
2064
|
}
|
|
1994
2065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathMenuBar, decorators: [{
|
|
1995
2066
|
type: Component,
|
|
@@ -2004,7 +2075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2004
2075
|
], host: {
|
|
2005
2076
|
'[class]': `styleClass()`,
|
|
2006
2077
|
'(document:click)': `handleDocumentClick($event)`,
|
|
2007
|
-
}, 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 (mouseenter)=\"handleItemHover(item, index, $event)\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown)=\"handleKeyDown($event)\"\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"] }]
|
|
2008
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 }] }] } });
|
|
2009
2080
|
|
|
2010
2081
|
let nextId$1 = 0;
|
|
@@ -5515,7 +5586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
5515
5586
|
`, changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, styles: ["app-theme-switch{display:inline-block}\n"] }]
|
|
5516
5587
|
}], propDecorators: { lightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightText", required: false }] }], darkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkText", required: false }] }], systemText: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemText", required: false }] }], switchTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "switchTooltip", required: false }] }] } });
|
|
5517
5588
|
|
|
5518
|
-
class
|
|
5589
|
+
class NathToastService {
|
|
5519
5590
|
// Read-only public signal, private writeable signal
|
|
5520
5591
|
toastsSignal = signal([], /* @ts-ignore */
|
|
5521
5592
|
...(ngDevMode ? [{ debugName: "toastsSignal" }] : /* istanbul ignore next */ []));
|
|
@@ -5535,16 +5606,16 @@ class ToastService {
|
|
|
5535
5606
|
dismiss(id) {
|
|
5536
5607
|
this.toastsSignal.update((current) => current.filter((t) => t.id !== id));
|
|
5537
5608
|
}
|
|
5538
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type:
|
|
5539
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type:
|
|
5609
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
5610
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathToastService, providedIn: 'root' });
|
|
5540
5611
|
}
|
|
5541
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type:
|
|
5612
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathToastService, decorators: [{
|
|
5542
5613
|
type: Injectable,
|
|
5543
5614
|
args: [{ providedIn: 'root' }]
|
|
5544
5615
|
}] });
|
|
5545
5616
|
|
|
5546
5617
|
class NathToastContainer {
|
|
5547
|
-
toastService = inject(
|
|
5618
|
+
toastService = inject(NathToastService);
|
|
5548
5619
|
sanitizer = inject(DomSanitizer);
|
|
5549
5620
|
position = input('bottom-center', /* @ts-ignore */
|
|
5550
5621
|
...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
@@ -5986,5 +6057,5 @@ function isSortOrderValid(order) {
|
|
|
5986
6057
|
* Generated bundle index. Do not edit.
|
|
5987
6058
|
*/
|
|
5988
6059
|
|
|
5989
|
-
export { DARK_THEME_CLASS, DIALOG_DATA, NathAutocomplete, NathBooleanControl, NathBreadcrumbService, NathBreadcrumbs, NathCodeViewer, NathConfirmationDialog, NathConfirmationService, NathDatepicker, NathDialogContainer, NathDialogRef, NathDialogService, NathDrawer, NathFileUpload, NathFloatingLabel, NathFormField, NathImagePreview, NathMenu, NathMenuBar, NathMenuList, NathMultiselect, NathPaginatedView, NathPaginator, NathPanel, NathPickList, NathProgressBar, NathProgressCircle, NathRadioButtonGroup, NathRatingHeart, NathRatingInput, NathSelect, NathShowErrors, NathSkeleton, NathSlider, NathSortIcon, NathSplitButton, NathTabs, NathTag, NathThemeSwitch, NathToastContainer, NathToc, NathTooltipContainer, NathTooltipDirective, ORDER, RATING_MAP, THEME_CONFIG, TabDirective, TabPanelDirective, ThemeService,
|
|
6060
|
+
export { DARK_THEME_CLASS, DIALOG_DATA, NathAutocomplete, NathBooleanControl, NathBreadcrumbService, NathBreadcrumbs, NathCodeViewer, NathConfirmationDialog, NathConfirmationService, NathDatepicker, NathDialogContainer, NathDialogRef, NathDialogService, NathDrawer, NathFileUpload, NathFloatingLabel, NathFormField, NathImagePreview, NathMenu, NathMenuBar, NathMenuList, NathMultiselect, NathPaginatedView, NathPaginator, NathPanel, NathPickList, NathProgressBar, NathProgressCircle, NathRadioButtonGroup, NathRatingHeart, NathRatingInput, NathSelect, NathShowErrors, NathSkeleton, NathSlider, NathSortIcon, NathSplitButton, NathTabs, NathTag, NathThemeSwitch, NathToastContainer, NathToastService, NathToc, NathTooltipContainer, NathTooltipDirective, ORDER, RATING_MAP, THEME_CONFIG, TabDirective, TabPanelDirective, ThemeService, getRatingColor, hasRequiredValidator, isRequired, isSortOrderValid, isTruthy, nextSibling, provideThemeConfig, rangeMinMax, rangeNotMinMax, validateAllFormFields };
|
|
5990
6061
|
//# sourceMappingURL=nath-angular-ui.mjs.map
|