nath-angular-ui 0.8.13 → 0.8.14
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.
|
@@ -1761,11 +1761,11 @@ class NathMenuList {
|
|
|
1761
1761
|
}
|
|
1762
1762
|
}
|
|
1763
1763
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathMenuList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1764
|
-
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 });
|
|
1764
|
+
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.badge) {\n <span class=\"nath-menu-item-badge\" [class]=\"item.badgeStyleClass\">{{ item.badge }}</span>\n }\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;--nath-menu-list-badge-bg: var(--color-blue-600, oklch(45% .15 250));--nath-menu-list-badge-text: #ffffff}.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-badge-bg: var(--color-blue-500, oklch(50% .15 250));--nath-menu-list-badge-text: #ffffff}.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-item-badge{display:inline-flex;align-items:center;justify-content:center;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:9999px;background-color:var(--nath-menu-list-badge-bg);color:var(--nath-menu-list-badge-text);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 });
|
|
1765
1765
|
}
|
|
1766
1766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathMenuList, decorators: [{
|
|
1767
1767
|
type: Component,
|
|
1768
|
-
args: [{ selector: 'nath-menu-list', imports: [RouterLink, RouterLinkActive, LucideDynamicIcon], host: {}, encapsulation: ViewEncapsulation.None, 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"] }]
|
|
1768
|
+
args: [{ selector: 'nath-menu-list', imports: [RouterLink, RouterLinkActive, LucideDynamicIcon], host: {}, encapsulation: ViewEncapsulation.None, 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.badge) {\n <span class=\"nath-menu-item-badge\" [class]=\"item.badgeStyleClass\">{{ item.badge }}</span>\n }\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;--nath-menu-list-badge-bg: var(--color-blue-600, oklch(45% .15 250));--nath-menu-list-badge-text: #ffffff}.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-badge-bg: var(--color-blue-500, oklch(50% .15 250));--nath-menu-list-badge-text: #ffffff}.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-item-badge{display:inline-flex;align-items:center;justify-content:center;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:9999px;background-color:var(--nath-menu-list-badge-bg);color:var(--nath-menu-list-badge-text);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"] }]
|
|
1769
1769
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], flat: [{ type: i0.Input, args: [{ isSignal: true, alias: "flat", required: false }] }], whenCommand: [{ type: i0.Output, args: ["whenCommand"] }], submenuContainers: [{ type: i0.ViewChildren, args: ['submenuContainer', { isSignal: true }] }] } });
|
|
1770
1770
|
|
|
1771
1771
|
const TIERED_MENU_LAYOUT_CONFIG = {
|