nath-angular-ui 0.7.3 → 0.8.1
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, model, input, output, contentChild, TemplateRef, viewChild, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Service, Pipe, InjectionToken, Injector, EnvironmentInjector, ApplicationRef, createEnvironmentInjector, createComponent, Injectable, Renderer2, DestroyRef, viewChildren, SecurityContext, untracked, HostListener, ViewChild, booleanAttribute,
|
|
2
|
+
import { inject, ElementRef, model, input, output, contentChild, TemplateRef, viewChild, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Service, Directive, Pipe, InjectionToken, Injector, EnvironmentInjector, ApplicationRef, createEnvironmentInjector, createComponent, Injectable, Renderer2, DestroyRef, viewChildren, SecurityContext, untracked, HostListener, ViewChild, booleanAttribute, contentChildren, ViewContainerRef } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgTemplateOutlet, DOCUMENT, NgStyle, NgClass, KeyValuePipe } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/cdk/overlay';
|
|
@@ -385,6 +385,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
385
385
|
args: [{ selector: 'nath-breadcrumbs', imports: [RouterModule, LucideHouse], encapsulation: ViewEncapsulation.None, template: "@if (home() || breadcrumbs().length > 0) {\n <nav aria-label=\"breadcrumb\" class=\"nath-breadcrumb-container\">\n <ol class=\"nath-breadcrumb-list\">\n @let h = home();\n @if (h) {\n <li class=\"nath-breadcrumb-item\">\n @if (h.routerLink) {\n <a\n class=\"nath-breadcrumb-link\"\n [routerLink]=\"h.routerLink\"\n [queryParams]=\"h.queryParams\"\n [routerLinkActive]=\"h.routerLinkActive ?? []\"\n [routerLinkActiveOptions]=\"h.routerLinkActiveOptions ?? { exact: false }\"\n ><svg lucideHouse [size]=\"16\"\n /></a>\n } @else {\n <span class=\"nath-breadcrumb--current\" aria-current=\"page\"\n ><svg lucideHouse [size]=\"16\"\n /></span>\n }\n </li>\n }\n @for (crumb of breadcrumbs(); track crumb.label; let last = $last) {\n <li class=\"nath-breadcrumb-item\" [class.is-active]=\"last\">\n @if (crumb.routerLink && !last && !crumb.disabled) {\n <a\n class=\"nath-breadcrumb-link\"\n [routerLink]=\"crumb.routerLink\"\n [queryParams]=\"crumb.queryParams\"\n [routerLinkActive]=\"crumb.routerLinkActive ?? []\"\n [routerLinkActiveOptions]=\"crumb.routerLinkActiveOptions ?? { exact: false }\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span\n [class.nath-breadcrumb--current]=\"!crumb.disabled\"\n [class.nath-breadcrumb--disabled]=\"crumb.disabled\"\n aria-current=\"page\"\n >{{ crumb.label }}</span\n >\n }\n </li>\n }\n </ol>\n </nav>\n}\n", styles: ["nath-breadcrumbs,.nath-breadcrumbs-theme{--nath-breadcrumb-gap: .5rem;--nath-breadcrumb-padding-y: 1rem;--nath-breadcrumb-separator: \"/\";--nath-breadcrumb-separator-margin: .5rem;--nath-breadcrumb-separator-color: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-breadcrumb-link-color: var(--color-blue-500, oklch(62.3% .214 259.815));--nath-breadcrumb-link-hover-color: var(--color-blue-600, oklch(54.6% .245 262.881));--nath-breadcrumb-active-color: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-breadcrumb-active-font-weight: 500;--nath-breadcrumb-disabled-color: var(--color-zinc-400, oklch(70.5% .015 286.067))}.dark nath-breadcrumbs,.dark .nath-breadcrumbs-theme{--nath-breadcrumb-separator-color: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-breadcrumb-link-color: var(--color-blue-400, oklch(70.7% .165 254.624));--nath-breadcrumb-link-hover-color: var(--color-blue-300, oklch(80.9% .105 251.813));--nath-breadcrumb-active-color: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-breadcrumb-disabled-color: var(--color-zinc-400, oklch(70.5% .015 286.067))}.nath-breadcrumb-container{display:block}.nath-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nath-breadcrumb-gap);padding-top:var(--nath-breadcrumb-padding-y);padding-bottom:var(--nath-breadcrumb-padding-y);list-style:none;margin:0}.nath-breadcrumb-item{display:flex;align-items:center}.nath-breadcrumb-item:not(:last-child):after{content:var(--nath-breadcrumb-separator);margin-left:var(--nath-breadcrumb-separator-margin);color:var(--nath-breadcrumb-separator-color)}.nath-breadcrumb-link{color:var(--nath-breadcrumb-link-color);text-decoration:none;transition:color .2s ease-in-out}.nath-breadcrumb-link:hover{color:var(--nath-breadcrumb-link-hover-color);text-decoration:underline}.nath-breadcrumb--current{color:var(--nath-breadcrumb-active-color);font-weight:var(--nath-breadcrumb-active-font-weight)}.nath-breadcrumb--disabled{color:var(--nath-breadcrumb-disabled-color)}\n"] }]
|
|
386
386
|
}] });
|
|
387
387
|
|
|
388
|
+
class NathCardTitleDirective {
|
|
389
|
+
templateRef = inject(TemplateRef);
|
|
390
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
391
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: NathCardTitleDirective, isStandalone: true, selector: "[nathCardTitle]", ngImport: i0 });
|
|
392
|
+
}
|
|
393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathCardTitleDirective, decorators: [{
|
|
394
|
+
type: Directive,
|
|
395
|
+
args: [{
|
|
396
|
+
selector: '[nathCardTitle]',
|
|
397
|
+
}]
|
|
398
|
+
}] });
|
|
399
|
+
|
|
400
|
+
class NathCardHeaderDirective {
|
|
401
|
+
templateRef = inject(TemplateRef);
|
|
402
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
403
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: NathCardHeaderDirective, isStandalone: true, selector: "[nathCardHeader]", ngImport: i0 });
|
|
404
|
+
}
|
|
405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathCardHeaderDirective, decorators: [{
|
|
406
|
+
type: Directive,
|
|
407
|
+
args: [{
|
|
408
|
+
selector: '[nathCardHeader]',
|
|
409
|
+
}]
|
|
410
|
+
}] });
|
|
411
|
+
|
|
412
|
+
class NathCardFooterDirective {
|
|
413
|
+
templateRef = inject(TemplateRef);
|
|
414
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
415
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: NathCardFooterDirective, isStandalone: true, selector: "[nathCardFooter]", ngImport: i0 });
|
|
416
|
+
}
|
|
417
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathCardFooterDirective, decorators: [{
|
|
418
|
+
type: Directive,
|
|
419
|
+
args: [{
|
|
420
|
+
selector: '[nathCardFooter]',
|
|
421
|
+
}]
|
|
422
|
+
}] });
|
|
423
|
+
|
|
424
|
+
class NathCard {
|
|
425
|
+
title = input('', /* @ts-ignore */
|
|
426
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
427
|
+
titleTpl = contentChild(NathCardTitleDirective, /* @ts-ignore */
|
|
428
|
+
...(ngDevMode ? [{ debugName: "titleTpl" }] : /* istanbul ignore next */ []));
|
|
429
|
+
headerTpl = contentChild(NathCardHeaderDirective, /* @ts-ignore */
|
|
430
|
+
...(ngDevMode ? [{ debugName: "headerTpl" }] : /* istanbul ignore next */ []));
|
|
431
|
+
footerTpl = contentChild(NathCardFooterDirective, /* @ts-ignore */
|
|
432
|
+
...(ngDevMode ? [{ debugName: "footerTpl" }] : /* istanbul ignore next */ []));
|
|
433
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
434
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathCard, isStandalone: true, selector: "nath-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "titleTpl", first: true, predicate: NathCardTitleDirective, descendants: true, isSignal: true }, { propertyName: "headerTpl", first: true, predicate: NathCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: NathCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (headerTpl()) {\n <div class=\"nath-card-header\">\n <ng-container [ngTemplateOutlet]=\"headerTpl()!.templateRef\" />\n </div>\n}\n<div class=\"nath-card-body\">\n @if (title() || titleTpl()) {\n <div class=\"nath-card-title\">\n @if (title()) {\n {{ title() }}\n } @else if (titleTpl()) {\n <ng-container [ngTemplateOutlet]=\"titleTpl()!.templateRef\" />\n }\n </div>\n }\n <ng-content></ng-content>\n @if (footerTpl()) {\n <div class=\"nath-card-footer\">\n <ng-container [ngTemplateOutlet]=\"footerTpl()!.templateRef\" />\n </div>\n }\n</div>\n", styles: ["nath-card,.nath-card-theme{--nath-card-bg: #ffffff;--nath-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--nath-card-radius: .5rem;--nath-card-body-padding: 1rem;--nath-card-body-gap: .5rem;--nath-card-font-family: \"Titillium Web\", sans-serif;--nath-card-title-font-size: 1.25rem;--nath-card-title-font-weight: 500;--nath-card-title-color: var(--color-gray-700, oklch(.373 .034 259.733));--nath-card-title-padding: 0;display:flex;flex-direction:column;background:var(--nath-card-bg);box-shadow:var(--nath-card-shadow);border-radius:var(--nath-card-radius)}.dark nath-card,.dark .nath-card-theme{--nath-card-bg: var(--color-slate-900, oklch(.208 .042 265.755));--nath-card-title-color: var(--color-gray-300, oklch(.872 .01 258.338))}.nath-card-title{font-family:var(--nath-card-font-family),sans-serif;font-size:var(--nath-card-title-font-size);font-weight:var(--nath-card-title-font-weight);color:var(--nath-card-title-color);padding:var(--nath-card-title-padding)}.nath-card-body{padding:var(--nath-card-body-padding);display:flex;flex-direction:column;gap:var(--nath-card-body-gap)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
435
|
+
}
|
|
436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathCard, decorators: [{
|
|
437
|
+
type: Component,
|
|
438
|
+
args: [{ selector: 'nath-card', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "@if (headerTpl()) {\n <div class=\"nath-card-header\">\n <ng-container [ngTemplateOutlet]=\"headerTpl()!.templateRef\" />\n </div>\n}\n<div class=\"nath-card-body\">\n @if (title() || titleTpl()) {\n <div class=\"nath-card-title\">\n @if (title()) {\n {{ title() }}\n } @else if (titleTpl()) {\n <ng-container [ngTemplateOutlet]=\"titleTpl()!.templateRef\" />\n }\n </div>\n }\n <ng-content></ng-content>\n @if (footerTpl()) {\n <div class=\"nath-card-footer\">\n <ng-container [ngTemplateOutlet]=\"footerTpl()!.templateRef\" />\n </div>\n }\n</div>\n", styles: ["nath-card,.nath-card-theme{--nath-card-bg: #ffffff;--nath-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--nath-card-radius: .5rem;--nath-card-body-padding: 1rem;--nath-card-body-gap: .5rem;--nath-card-font-family: \"Titillium Web\", sans-serif;--nath-card-title-font-size: 1.25rem;--nath-card-title-font-weight: 500;--nath-card-title-color: var(--color-gray-700, oklch(.373 .034 259.733));--nath-card-title-padding: 0;display:flex;flex-direction:column;background:var(--nath-card-bg);box-shadow:var(--nath-card-shadow);border-radius:var(--nath-card-radius)}.dark nath-card,.dark .nath-card-theme{--nath-card-bg: var(--color-slate-900, oklch(.208 .042 265.755));--nath-card-title-color: var(--color-gray-300, oklch(.872 .01 258.338))}.nath-card-title{font-family:var(--nath-card-font-family),sans-serif;font-size:var(--nath-card-title-font-size);font-weight:var(--nath-card-title-font-weight);color:var(--nath-card-title-color);padding:var(--nath-card-title-padding)}.nath-card-body{padding:var(--nath-card-body-padding);display:flex;flex-direction:column;gap:var(--nath-card-body-gap)}\n"] }]
|
|
439
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NathCardTitleDirective), { isSignal: true }] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NathCardHeaderDirective), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NathCardFooterDirective), { isSignal: true }] }] } });
|
|
440
|
+
|
|
388
441
|
class CodeFileTabNamePipe {
|
|
389
442
|
transform(value, showFullPath) {
|
|
390
443
|
return showFullPath ? value : (value.split('/').at(-1) ?? '');
|
|
@@ -2060,7 +2113,7 @@ class NathMenuBar {
|
|
|
2060
2113
|
this.closeAllMenus();
|
|
2061
2114
|
}
|
|
2062
2115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathMenuBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2063
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathMenuBar, isStandalone: true, selector: "nath-menu-bar", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { whenCommand: "whenCommand" }, host: { listeners: { "document:click": "handleDocumentClick($event)" }, properties: { "class": "styleClass()" } }, viewQueries: [{ propertyName: "menuBarElement", first: true, predicate: ["menuBar"], descendants: true, isSignal: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav #menuBar class=\"nath-menu-bar-theme nath-menu-bar\" role=\"menubar\">\n <!-- Desktop Menu Bar -->\n <ul class=\"nath-menu-bar-list\">\n @for (item of model(); track item.label; let index = $index) {\n <li\n class=\"nath-menu-bar-item\"\n [class.nath-menu-bar-item--active]=\"activeItem() === item\"\n [class.nath-menu-bar-item--disabled]=\"item.disabled\"\n [class.nath-menu-bar-item--focused]=\"focusedIndex() === index\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [attr.role]=\"item.items && item.items.length > 0 ? 'menuitem' : 'menuitem'\"\n [attr.aria-haspopup]=\"item.items && item.items.length > 0 ? 'true' : 'false'\"\n [attr.aria-expanded]=\"activeItem() === item ? 'true' : 'false'\"\n [tabIndex]=\"-1\"\n (mouseenter)=\"handleItemHover(item, index, $event)\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"focusedIndex() < 0 && focusedIndex.set($index)\"\n >\n <span class=\"nath-menu-bar-item-content\">\n @if (item.icon) {\n @if (isLucideIconComponent(item.icon)) {\n <svg [lucideIcon]=\"item.icon\" [size]=\"16\" />\n } @else {\n <i [class]=\"item.icon\"></i>\n }\n }\n @if (item.escape === false) {\n <span [innerHTML]=\"getMenuLabel(item)\"></span>\n } @else {\n <span>{{ item.label }}</span>\n }\n @if (item.items && item.items.length > 0) {\n <svg lucideChevronDown [size]=\"14\" class=\"nath-menu-bar-arrow\" />\n }\n </span>\n\n @if (item.routerLink) {\n <a\n [routerLink]=\"item.routerLink\"\n [queryParams]=\"item.queryParams\"\n [fragment]=\"item.fragment\"\n [queryParamsHandling]=\"item.queryParamsHandling\"\n [preserveFragment]=\"item.preserveFragment\"\n [skipLocationChange]=\"item.skipLocationChange\"\n [replaceUrl]=\"item.replaceUrl\"\n [state]=\"item.state\"\n [attr.target]=\"item.target\"\n class=\"nath-menu-bar-link\"\n ><span></span\n ></a>\n } @else if (item.url) {\n <a [href]=\"item.url\" [attr.target]=\"item.target || '_blank'\" class=\"nath-menu-bar-link\"\n ><span></span\n ></a>\n }\n </li>\n }\n </ul>\n\n <!-- Mobile Menu Button -->\n <button\n class=\"nath-menu-bar-toggle\"\n [class.nath-menu-bar-toggle--active]=\"isMobileMenuOpen()\"\n (click)=\"toggleMobileMenu()\"\n [attr.aria-label]=\"isMobileMenuOpen() ? 'Close menu' : 'Open menu'\"\n [attr.aria-expanded]=\"isMobileMenuOpen()\"\n >\n @if (isMobileMenuOpen()) {\n <svg lucideX [size]=\"24\" />\n } @else {\n <svg lucideMenu [size]=\"24\" />\n }\n </button>\n</nav>\n\n<!-- Mobile Menu Overlay -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"nath-menu-bar-mobile-overlay\"\n (click)=\"toggleMobileMenu()\"\n (keydown.enter)=\"toggleMobileMenu()\"\n ></div>\n}\n\n<!-- Mobile Menu Panel -->\n@if (isMobileMenuOpen()) {\n <div class=\"nath-menu-bar-mobile-panel\">\n <ul class=\"nath-menu-bar-mobile-list\">\n @for (item of model(); track item.label; let index = $index) {\n <li\n class=\"nath-menu-bar-mobile-item\"\n [class.nath-menu-bar-mobile-item--disabled]=\"item.disabled\"\n [class.nath-menu-bar-mobile-item--expanded]=\"activeItem() === item\"\n >\n <div\n class=\"nath-menu-bar-mobile-item-content\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown.enter)=\"handleItemClick(item, index, $event)\"\n >\n <span class=\"nath-menu-bar-mobile-item-text\">\n @if (item.icon) {\n @if (isLucideIconComponent(item.icon)) {\n <svg [lucideIcon]=\"item.icon\" [size]=\"18\" />\n } @else {\n <i [class]=\"item.icon\"></i>\n }\n }\n <span>{{ item.label }}</span>\n </span>\n @if (item.items && item.items.length > 0) {\n <svg\n lucideChevronDown\n [size]=\"16\"\n class=\"nath-menu-bar-mobile-arrow\"\n [class.nath-menu-bar-mobile-arrow--rotated]=\"activeItem() === item\"\n />\n }\n </div>\n\n @if (item.items && item.items.length > 0 && activeItem() === item) {\n <ul class=\"nath-menu-bar-mobile-submenu\">\n @for (subItem of item.items; track subItem.label; let subIndex = $index) {\n <li\n class=\"nath-menu-bar-mobile-submenu-item\"\n [class.nath-menu-bar-mobile-submenu-item--disabled]=\"subItem.disabled\"\n (click)=\"handleItemClick(subItem, subIndex, $event)\"\n (keydown.enter)=\"handleItemClick(subItem, subIndex, $event)\"\n >\n <span class=\"nath-menu-bar-mobile-submenu-item-text\">\n @if (subItem.icon) {\n @if (isLucideIconComponent(subItem.icon)) {\n <svg [lucideIcon]=\"subItem.icon\" [size]=\"16\" />\n } @else {\n <i [class]=\"subItem.icon\"></i>\n }\n }\n <span>{{ subItem.label }}</span>\n </span>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </div>\n}\n<nath-menu\n #dropdownMenu\n [model]=\"activeItem()?.items ?? []\"\n [positionX]=\"'left'\"\n [positionY]=\"'bottom'\"\n panelStyleClass=\"nath-menu-bar-dropdown\"\n/>\n", styles: ["nath-menu-bar,.nath-menu-bar-theme{--nath-menu-bar-bg: 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 });
|
|
2116
|
+
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\">\r\n <!-- Desktop Menu Bar -->\r\n <ul class=\"nath-menu-bar-list\">\r\n @for (item of model(); track item.label; let index = $index) {\r\n <li\r\n class=\"nath-menu-bar-item\"\r\n [class.nath-menu-bar-item--active]=\"activeItem() === item\"\r\n [class.nath-menu-bar-item--disabled]=\"item.disabled\"\r\n [class.nath-menu-bar-item--focused]=\"focusedIndex() === index\"\r\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\r\n [attr.role]=\"item.items && item.items.length > 0 ? 'menuitem' : 'menuitem'\"\r\n [attr.aria-haspopup]=\"item.items && item.items.length > 0 ? 'true' : 'false'\"\r\n [attr.aria-expanded]=\"activeItem() === item ? 'true' : 'false'\"\r\n [tabIndex]=\"-1\"\r\n (mouseenter)=\"handleItemHover(item, index, $event)\"\r\n (click)=\"handleItemClick(item, index, $event)\"\r\n (keydown)=\"handleKeyDown($event)\"\r\n (focus)=\"focusedIndex() < 0 && focusedIndex.set($index)\"\r\n >\r\n <span class=\"nath-menu-bar-item-content\">\r\n @if (item.icon) {\r\n @if (isLucideIconComponent(item.icon)) {\r\n <svg [lucideIcon]=\"item.icon\" [size]=\"16\" />\r\n } @else {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n }\r\n @if (item.escape === false) {\r\n <span [innerHTML]=\"getMenuLabel(item)\"></span>\r\n } @else {\r\n <span>{{ item.label }}</span>\r\n }\r\n @if (item.items && item.items.length > 0) {\r\n <svg lucideChevronDown [size]=\"14\" class=\"nath-menu-bar-arrow\" />\r\n }\r\n </span>\r\n\r\n @if (item.routerLink) {\r\n <a\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [queryParamsHandling]=\"item.queryParamsHandling\"\r\n [preserveFragment]=\"item.preserveFragment\"\r\n [skipLocationChange]=\"item.skipLocationChange\"\r\n [replaceUrl]=\"item.replaceUrl\"\r\n [state]=\"item.state\"\r\n [attr.target]=\"item.target\"\r\n class=\"nath-menu-bar-link\"\r\n ><span></span\r\n ></a>\r\n } @else if (item.url) {\r\n <a [href]=\"item.url\" [attr.target]=\"item.target || '_blank'\" class=\"nath-menu-bar-link\"\r\n ><span></span\r\n ></a>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n\r\n <!-- Mobile Menu Button -->\r\n <button\r\n class=\"nath-menu-bar-toggle\"\r\n [class.nath-menu-bar-toggle--active]=\"isMobileMenuOpen()\"\r\n (click)=\"toggleMobileMenu()\"\r\n [attr.aria-label]=\"isMobileMenuOpen() ? 'Close menu' : 'Open menu'\"\r\n [attr.aria-expanded]=\"isMobileMenuOpen()\"\r\n >\r\n @if (isMobileMenuOpen()) {\r\n <svg lucideX [size]=\"24\" />\r\n } @else {\r\n <svg lucideMenu [size]=\"24\" />\r\n }\r\n </button>\r\n</nav>\r\n\r\n<!-- Mobile Menu Overlay -->\r\n@if (isMobileMenuOpen()) {\r\n <div\r\n class=\"nath-menu-bar-mobile-overlay\"\r\n (click)=\"toggleMobileMenu()\"\r\n (keydown.enter)=\"toggleMobileMenu()\"\r\n ></div>\r\n}\r\n\r\n<!-- Mobile Menu Panel -->\r\n@if (isMobileMenuOpen()) {\r\n <div class=\"nath-menu-bar-mobile-panel\">\r\n <ul class=\"nath-menu-bar-mobile-list\">\r\n @for (item of model(); track item.label; let index = $index) {\r\n <li\r\n class=\"nath-menu-bar-mobile-item\"\r\n [class.nath-menu-bar-mobile-item--disabled]=\"item.disabled\"\r\n [class.nath-menu-bar-mobile-item--expanded]=\"activeItem() === item\"\r\n >\r\n <div\r\n class=\"nath-menu-bar-mobile-item-content\"\r\n (click)=\"handleItemClick(item, index, $event)\"\r\n (keydown.enter)=\"handleItemClick(item, index, $event)\"\r\n >\r\n <span class=\"nath-menu-bar-mobile-item-text\">\r\n @if (item.icon) {\r\n @if (isLucideIconComponent(item.icon)) {\r\n <svg [lucideIcon]=\"item.icon\" [size]=\"18\" />\r\n } @else {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n }\r\n <span>{{ item.label }}</span>\r\n </span>\r\n @if (item.items && item.items.length > 0) {\r\n <svg\r\n lucideChevronDown\r\n [size]=\"16\"\r\n class=\"nath-menu-bar-mobile-arrow\"\r\n [class.nath-menu-bar-mobile-arrow--rotated]=\"activeItem() === item\"\r\n />\r\n }\r\n </div>\r\n\r\n @if (item.items && item.items.length > 0 && activeItem() === item) {\r\n <ul class=\"nath-menu-bar-mobile-submenu\">\r\n @for (subItem of item.items; track subItem.label; let subIndex = $index) {\r\n <li\r\n class=\"nath-menu-bar-mobile-submenu-item\"\r\n [class.nath-menu-bar-mobile-submenu-item--disabled]=\"subItem.disabled\"\r\n (click)=\"handleItemClick(subItem, subIndex, $event)\"\r\n (keydown.enter)=\"handleItemClick(subItem, subIndex, $event)\"\r\n >\r\n <span class=\"nath-menu-bar-mobile-submenu-item-text\">\r\n @if (subItem.icon) {\r\n @if (isLucideIconComponent(subItem.icon)) {\r\n <svg [lucideIcon]=\"subItem.icon\" [size]=\"16\" />\r\n } @else {\r\n <i [class]=\"subItem.icon\"></i>\r\n }\r\n }\r\n <span>{{ subItem.label }}</span>\r\n </span>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n}\r\n<nath-menu\r\n #dropdownMenu\r\n [model]=\"activeItem()?.items ?? []\"\r\n [positionX]=\"'left'\"\r\n [positionY]=\"'bottom'\"\r\n panelStyleClass=\"nath-menu-bar-dropdown\"\r\n/>\r\n", styles: ["nath-menu-bar,.nath-menu-bar-theme{--nath-menu-bar-bg: transparent;--nath-menu-bar-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-bar-text: var(--color-gray-700, oklch(37.1% .021 264.444));--nath-menu-bar-hover-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-bar-active-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-bar-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--nath-menu-bar-font-size: .875rem;--nath-menu-bar-height: 3rem;--nath-menu-bar-z-index: 1000;--nath-menu-bar-padding: 0}.dark nath-menu-bar,.dark .nath-menu-bar-theme{--nath-menu-bar-bg: transparent;--nath-menu-bar-border: var(--color-zinc-700, oklch(37% .013 285.805));--nath-menu-bar-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-bar-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-menu-bar-active-bg: var(--color-zinc-800, oklch(27.4% .006 286.033))}.nath-menu-bar{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:var(--nath-menu-bar-bg);border-bottom:1px solid var(--nath-menu-bar-border);height:var(--nath-menu-bar-height);padding:var(--nath-menu-bar-padding);font-size:var(--nath-menu-bar-font-size);color:var(--nath-menu-bar-text);z-index:var(--nath-menu-bar-z-index)}.nath-menu-bar-list{display:flex;list-style:none;margin:0;padding:0;gap:.5rem}.nath-menu-bar-item{position:relative;display:flex;align-items:center;padding:.5rem .75rem;border-radius:.375rem;cursor:pointer;transition:background-color .15s ease;outline:none}.nath-menu-bar-item:hover:not(.nath-menu-bar-item--disabled){background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-item--active{background-color:var(--nath-menu-bar-active-bg)}.nath-menu-bar-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.nath-menu-bar-item--focused{box-shadow:0 0 0 2px var(--color-blue-500, oklch(.5 .15 250))}.nath-menu-bar-item-content{display:flex;align-items:center;gap:.5rem;color:var(--nath-menu-bar-text);text-decoration:none}.nath-menu-bar-item-content svg{flex-shrink:0}.nath-menu-bar-arrow{margin-left:.25rem;color:var(--nath-menu-bar-text);opacity:.7;transition:transform .2s ease}.nath-menu-bar-item--active .nath-menu-bar-arrow{transform:rotate(180deg)}.nath-menu-bar-link{position:absolute;inset:0;text-decoration:none}.nath-menu-bar-toggle{display:none;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;background:transparent;border:none;border-radius:.375rem;cursor:pointer;color:var(--nath-menu-bar-text);transition:background-color .15s ease}.nath-menu-bar-toggle:hover{background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-toggle:focus{outline:none;box-shadow:0 0 0 2px var(--color-blue-500, oklch(.5 .15 250))}.nath-menu-bar-mobile-overlay{position:fixed;inset:0;background-color:#00000080;z-index:calc(var(--nath-menu-bar-z-index) - 1)}.nath-menu-bar-mobile-panel{position:fixed;top:var(--nath-menu-bar-height);left:0;right:0;bottom:0;background-color:var(--nath-menu-bar-bg);overflow-y:auto;z-index:var(--nath-menu-bar-z-index);padding:1rem}.nath-menu-bar-mobile-list{list-style:none;margin:0;padding:0}.nath-menu-bar-mobile-item{border-bottom:1px solid var(--nath-menu-bar-border)}.nath-menu-bar-mobile-item:last-child{border-bottom:none}.nath-menu-bar-mobile-item--disabled{opacity:.5;pointer-events:none}.nath-menu-bar-mobile-item-content{display:flex;align-items:center;justify-content:space-between;padding:1rem;cursor:pointer;transition:background-color .15s ease}.nath-menu-bar-mobile-item-content:hover{background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-mobile-item-text{display:flex;align-items:center;gap:.75rem;font-weight:500}.nath-menu-bar-mobile-arrow{transition:transform .2s ease}.nath-menu-bar-mobile-arrow--rotated{transform:rotate(180deg)}.nath-menu-bar-mobile-submenu{list-style:none;margin:0;padding:0 0 0 1.5rem;background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-mobile-submenu-item{padding:.75rem 1rem;cursor:pointer;transition:background-color .15s ease;border-bottom:1px solid var(--nath-menu-bar-border)}.nath-menu-bar-mobile-submenu-item:last-child{border-bottom:none}.nath-menu-bar-mobile-submenu-item:hover{background-color:var(--nath-menu-bar-active-bg)}.nath-menu-bar-mobile-submenu-item--disabled{opacity:.5;pointer-events:none}.nath-menu-bar-mobile-submenu-item-text{display:flex;align-items:center;gap:.75rem}@media(max-width:768px){.nath-menu-bar-list{display:none}.nath-menu-bar-toggle{display:flex}.nath-menu-bar-dropdown{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NathMenu, selector: "nath-menu", inputs: ["model", "styleClass", "panelStyleClass", "positionX", "positionY", "inline", "flat"], outputs: ["modelChange", "styleClassChange", "panelStyleClassChange", "whenHide"] }, { kind: "component", type: LucideMenu, selector: "svg[lucideMenu]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2064
2117
|
}
|
|
2065
2118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathMenuBar, decorators: [{
|
|
2066
2119
|
type: Component,
|
|
@@ -2075,7 +2128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2075
2128
|
], host: {
|
|
2076
2129
|
'[class]': `styleClass()`,
|
|
2077
2130
|
'(document:click)': `handleDocumentClick($event)`,
|
|
2078
|
-
}, encapsulation: ViewEncapsulation.None, template: "<nav #menuBar class=\"nath-menu-bar-theme nath-menu-bar\" role=\"menubar\">\n <!-- Desktop Menu Bar -->\n <ul class=\"nath-menu-bar-list\">\n @for (item of model(); track item.label; let index = $index) {\n <li\n class=\"nath-menu-bar-item\"\n [class.nath-menu-bar-item--active]=\"activeItem() === item\"\n [class.nath-menu-bar-item--disabled]=\"item.disabled\"\n [class.nath-menu-bar-item--focused]=\"focusedIndex() === index\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [attr.role]=\"item.items && item.items.length > 0 ? 'menuitem' : 'menuitem'\"\n [attr.aria-haspopup]=\"item.items && item.items.length > 0 ? 'true' : 'false'\"\n [attr.aria-expanded]=\"activeItem() === item ? 'true' : 'false'\"\n [tabIndex]=\"-1\"\n (mouseenter)=\"handleItemHover(item, index, $event)\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"focusedIndex() < 0 && focusedIndex.set($index)\"\n >\n <span class=\"nath-menu-bar-item-content\">\n @if (item.icon) {\n @if (isLucideIconComponent(item.icon)) {\n <svg [lucideIcon]=\"item.icon\" [size]=\"16\" />\n } @else {\n <i [class]=\"item.icon\"></i>\n }\n }\n @if (item.escape === false) {\n <span [innerHTML]=\"getMenuLabel(item)\"></span>\n } @else {\n <span>{{ item.label }}</span>\n }\n @if (item.items && item.items.length > 0) {\n <svg lucideChevronDown [size]=\"14\" class=\"nath-menu-bar-arrow\" />\n }\n </span>\n\n @if (item.routerLink) {\n <a\n [routerLink]=\"item.routerLink\"\n [queryParams]=\"item.queryParams\"\n [fragment]=\"item.fragment\"\n [queryParamsHandling]=\"item.queryParamsHandling\"\n [preserveFragment]=\"item.preserveFragment\"\n [skipLocationChange]=\"item.skipLocationChange\"\n [replaceUrl]=\"item.replaceUrl\"\n [state]=\"item.state\"\n [attr.target]=\"item.target\"\n class=\"nath-menu-bar-link\"\n ><span></span\n ></a>\n } @else if (item.url) {\n <a [href]=\"item.url\" [attr.target]=\"item.target || '_blank'\" class=\"nath-menu-bar-link\"\n ><span></span\n ></a>\n }\n </li>\n }\n </ul>\n\n <!-- Mobile Menu Button -->\n <button\n class=\"nath-menu-bar-toggle\"\n [class.nath-menu-bar-toggle--active]=\"isMobileMenuOpen()\"\n (click)=\"toggleMobileMenu()\"\n [attr.aria-label]=\"isMobileMenuOpen() ? 'Close menu' : 'Open menu'\"\n [attr.aria-expanded]=\"isMobileMenuOpen()\"\n >\n @if (isMobileMenuOpen()) {\n <svg lucideX [size]=\"24\" />\n } @else {\n <svg lucideMenu [size]=\"24\" />\n }\n </button>\n</nav>\n\n<!-- Mobile Menu Overlay -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"nath-menu-bar-mobile-overlay\"\n (click)=\"toggleMobileMenu()\"\n (keydown.enter)=\"toggleMobileMenu()\"\n ></div>\n}\n\n<!-- Mobile Menu Panel -->\n@if (isMobileMenuOpen()) {\n <div class=\"nath-menu-bar-mobile-panel\">\n <ul class=\"nath-menu-bar-mobile-list\">\n @for (item of model(); track item.label; let index = $index) {\n <li\n class=\"nath-menu-bar-mobile-item\"\n [class.nath-menu-bar-mobile-item--disabled]=\"item.disabled\"\n [class.nath-menu-bar-mobile-item--expanded]=\"activeItem() === item\"\n >\n <div\n class=\"nath-menu-bar-mobile-item-content\"\n (click)=\"handleItemClick(item, index, $event)\"\n (keydown.enter)=\"handleItemClick(item, index, $event)\"\n >\n <span class=\"nath-menu-bar-mobile-item-text\">\n @if (item.icon) {\n @if (isLucideIconComponent(item.icon)) {\n <svg [lucideIcon]=\"item.icon\" [size]=\"18\" />\n } @else {\n <i [class]=\"item.icon\"></i>\n }\n }\n <span>{{ item.label }}</span>\n </span>\n @if (item.items && item.items.length > 0) {\n <svg\n lucideChevronDown\n [size]=\"16\"\n class=\"nath-menu-bar-mobile-arrow\"\n [class.nath-menu-bar-mobile-arrow--rotated]=\"activeItem() === item\"\n />\n }\n </div>\n\n @if (item.items && item.items.length > 0 && activeItem() === item) {\n <ul class=\"nath-menu-bar-mobile-submenu\">\n @for (subItem of item.items; track subItem.label; let subIndex = $index) {\n <li\n class=\"nath-menu-bar-mobile-submenu-item\"\n [class.nath-menu-bar-mobile-submenu-item--disabled]=\"subItem.disabled\"\n (click)=\"handleItemClick(subItem, subIndex, $event)\"\n (keydown.enter)=\"handleItemClick(subItem, subIndex, $event)\"\n >\n <span class=\"nath-menu-bar-mobile-submenu-item-text\">\n @if (subItem.icon) {\n @if (isLucideIconComponent(subItem.icon)) {\n <svg [lucideIcon]=\"subItem.icon\" [size]=\"16\" />\n } @else {\n <i [class]=\"subItem.icon\"></i>\n }\n }\n <span>{{ subItem.label }}</span>\n </span>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </div>\n}\n<nath-menu\n #dropdownMenu\n [model]=\"activeItem()?.items ?? []\"\n [positionX]=\"'left'\"\n [positionY]=\"'bottom'\"\n panelStyleClass=\"nath-menu-bar-dropdown\"\n/>\n", styles: ["nath-menu-bar,.nath-menu-bar-theme{--nath-menu-bar-bg: 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"] }]
|
|
2131
|
+
}, encapsulation: ViewEncapsulation.None, template: "<nav #menuBar class=\"nath-menu-bar-theme nath-menu-bar\" role=\"menubar\">\r\n <!-- Desktop Menu Bar -->\r\n <ul class=\"nath-menu-bar-list\">\r\n @for (item of model(); track item.label; let index = $index) {\r\n <li\r\n class=\"nath-menu-bar-item\"\r\n [class.nath-menu-bar-item--active]=\"activeItem() === item\"\r\n [class.nath-menu-bar-item--disabled]=\"item.disabled\"\r\n [class.nath-menu-bar-item--focused]=\"focusedIndex() === index\"\r\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\r\n [attr.role]=\"item.items && item.items.length > 0 ? 'menuitem' : 'menuitem'\"\r\n [attr.aria-haspopup]=\"item.items && item.items.length > 0 ? 'true' : 'false'\"\r\n [attr.aria-expanded]=\"activeItem() === item ? 'true' : 'false'\"\r\n [tabIndex]=\"-1\"\r\n (mouseenter)=\"handleItemHover(item, index, $event)\"\r\n (click)=\"handleItemClick(item, index, $event)\"\r\n (keydown)=\"handleKeyDown($event)\"\r\n (focus)=\"focusedIndex() < 0 && focusedIndex.set($index)\"\r\n >\r\n <span class=\"nath-menu-bar-item-content\">\r\n @if (item.icon) {\r\n @if (isLucideIconComponent(item.icon)) {\r\n <svg [lucideIcon]=\"item.icon\" [size]=\"16\" />\r\n } @else {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n }\r\n @if (item.escape === false) {\r\n <span [innerHTML]=\"getMenuLabel(item)\"></span>\r\n } @else {\r\n <span>{{ item.label }}</span>\r\n }\r\n @if (item.items && item.items.length > 0) {\r\n <svg lucideChevronDown [size]=\"14\" class=\"nath-menu-bar-arrow\" />\r\n }\r\n </span>\r\n\r\n @if (item.routerLink) {\r\n <a\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [queryParamsHandling]=\"item.queryParamsHandling\"\r\n [preserveFragment]=\"item.preserveFragment\"\r\n [skipLocationChange]=\"item.skipLocationChange\"\r\n [replaceUrl]=\"item.replaceUrl\"\r\n [state]=\"item.state\"\r\n [attr.target]=\"item.target\"\r\n class=\"nath-menu-bar-link\"\r\n ><span></span\r\n ></a>\r\n } @else if (item.url) {\r\n <a [href]=\"item.url\" [attr.target]=\"item.target || '_blank'\" class=\"nath-menu-bar-link\"\r\n ><span></span\r\n ></a>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n\r\n <!-- Mobile Menu Button -->\r\n <button\r\n class=\"nath-menu-bar-toggle\"\r\n [class.nath-menu-bar-toggle--active]=\"isMobileMenuOpen()\"\r\n (click)=\"toggleMobileMenu()\"\r\n [attr.aria-label]=\"isMobileMenuOpen() ? 'Close menu' : 'Open menu'\"\r\n [attr.aria-expanded]=\"isMobileMenuOpen()\"\r\n >\r\n @if (isMobileMenuOpen()) {\r\n <svg lucideX [size]=\"24\" />\r\n } @else {\r\n <svg lucideMenu [size]=\"24\" />\r\n }\r\n </button>\r\n</nav>\r\n\r\n<!-- Mobile Menu Overlay -->\r\n@if (isMobileMenuOpen()) {\r\n <div\r\n class=\"nath-menu-bar-mobile-overlay\"\r\n (click)=\"toggleMobileMenu()\"\r\n (keydown.enter)=\"toggleMobileMenu()\"\r\n ></div>\r\n}\r\n\r\n<!-- Mobile Menu Panel -->\r\n@if (isMobileMenuOpen()) {\r\n <div class=\"nath-menu-bar-mobile-panel\">\r\n <ul class=\"nath-menu-bar-mobile-list\">\r\n @for (item of model(); track item.label; let index = $index) {\r\n <li\r\n class=\"nath-menu-bar-mobile-item\"\r\n [class.nath-menu-bar-mobile-item--disabled]=\"item.disabled\"\r\n [class.nath-menu-bar-mobile-item--expanded]=\"activeItem() === item\"\r\n >\r\n <div\r\n class=\"nath-menu-bar-mobile-item-content\"\r\n (click)=\"handleItemClick(item, index, $event)\"\r\n (keydown.enter)=\"handleItemClick(item, index, $event)\"\r\n >\r\n <span class=\"nath-menu-bar-mobile-item-text\">\r\n @if (item.icon) {\r\n @if (isLucideIconComponent(item.icon)) {\r\n <svg [lucideIcon]=\"item.icon\" [size]=\"18\" />\r\n } @else {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n }\r\n <span>{{ item.label }}</span>\r\n </span>\r\n @if (item.items && item.items.length > 0) {\r\n <svg\r\n lucideChevronDown\r\n [size]=\"16\"\r\n class=\"nath-menu-bar-mobile-arrow\"\r\n [class.nath-menu-bar-mobile-arrow--rotated]=\"activeItem() === item\"\r\n />\r\n }\r\n </div>\r\n\r\n @if (item.items && item.items.length > 0 && activeItem() === item) {\r\n <ul class=\"nath-menu-bar-mobile-submenu\">\r\n @for (subItem of item.items; track subItem.label; let subIndex = $index) {\r\n <li\r\n class=\"nath-menu-bar-mobile-submenu-item\"\r\n [class.nath-menu-bar-mobile-submenu-item--disabled]=\"subItem.disabled\"\r\n (click)=\"handleItemClick(subItem, subIndex, $event)\"\r\n (keydown.enter)=\"handleItemClick(subItem, subIndex, $event)\"\r\n >\r\n <span class=\"nath-menu-bar-mobile-submenu-item-text\">\r\n @if (subItem.icon) {\r\n @if (isLucideIconComponent(subItem.icon)) {\r\n <svg [lucideIcon]=\"subItem.icon\" [size]=\"16\" />\r\n } @else {\r\n <i [class]=\"subItem.icon\"></i>\r\n }\r\n }\r\n <span>{{ subItem.label }}</span>\r\n </span>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n}\r\n<nath-menu\r\n #dropdownMenu\r\n [model]=\"activeItem()?.items ?? []\"\r\n [positionX]=\"'left'\"\r\n [positionY]=\"'bottom'\"\r\n panelStyleClass=\"nath-menu-bar-dropdown\"\r\n/>\r\n", styles: ["nath-menu-bar,.nath-menu-bar-theme{--nath-menu-bar-bg: transparent;--nath-menu-bar-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-bar-text: var(--color-gray-700, oklch(37.1% .021 264.444));--nath-menu-bar-hover-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-bar-active-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-bar-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--nath-menu-bar-font-size: .875rem;--nath-menu-bar-height: 3rem;--nath-menu-bar-z-index: 1000;--nath-menu-bar-padding: 0}.dark nath-menu-bar,.dark .nath-menu-bar-theme{--nath-menu-bar-bg: transparent;--nath-menu-bar-border: var(--color-zinc-700, oklch(37% .013 285.805));--nath-menu-bar-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-bar-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-menu-bar-active-bg: var(--color-zinc-800, oklch(27.4% .006 286.033))}.nath-menu-bar{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:var(--nath-menu-bar-bg);border-bottom:1px solid var(--nath-menu-bar-border);height:var(--nath-menu-bar-height);padding:var(--nath-menu-bar-padding);font-size:var(--nath-menu-bar-font-size);color:var(--nath-menu-bar-text);z-index:var(--nath-menu-bar-z-index)}.nath-menu-bar-list{display:flex;list-style:none;margin:0;padding:0;gap:.5rem}.nath-menu-bar-item{position:relative;display:flex;align-items:center;padding:.5rem .75rem;border-radius:.375rem;cursor:pointer;transition:background-color .15s ease;outline:none}.nath-menu-bar-item:hover:not(.nath-menu-bar-item--disabled){background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-item--active{background-color:var(--nath-menu-bar-active-bg)}.nath-menu-bar-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.nath-menu-bar-item--focused{box-shadow:0 0 0 2px var(--color-blue-500, oklch(.5 .15 250))}.nath-menu-bar-item-content{display:flex;align-items:center;gap:.5rem;color:var(--nath-menu-bar-text);text-decoration:none}.nath-menu-bar-item-content svg{flex-shrink:0}.nath-menu-bar-arrow{margin-left:.25rem;color:var(--nath-menu-bar-text);opacity:.7;transition:transform .2s ease}.nath-menu-bar-item--active .nath-menu-bar-arrow{transform:rotate(180deg)}.nath-menu-bar-link{position:absolute;inset:0;text-decoration:none}.nath-menu-bar-toggle{display:none;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;background:transparent;border:none;border-radius:.375rem;cursor:pointer;color:var(--nath-menu-bar-text);transition:background-color .15s ease}.nath-menu-bar-toggle:hover{background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-toggle:focus{outline:none;box-shadow:0 0 0 2px var(--color-blue-500, oklch(.5 .15 250))}.nath-menu-bar-mobile-overlay{position:fixed;inset:0;background-color:#00000080;z-index:calc(var(--nath-menu-bar-z-index) - 1)}.nath-menu-bar-mobile-panel{position:fixed;top:var(--nath-menu-bar-height);left:0;right:0;bottom:0;background-color:var(--nath-menu-bar-bg);overflow-y:auto;z-index:var(--nath-menu-bar-z-index);padding:1rem}.nath-menu-bar-mobile-list{list-style:none;margin:0;padding:0}.nath-menu-bar-mobile-item{border-bottom:1px solid var(--nath-menu-bar-border)}.nath-menu-bar-mobile-item:last-child{border-bottom:none}.nath-menu-bar-mobile-item--disabled{opacity:.5;pointer-events:none}.nath-menu-bar-mobile-item-content{display:flex;align-items:center;justify-content:space-between;padding:1rem;cursor:pointer;transition:background-color .15s ease}.nath-menu-bar-mobile-item-content:hover{background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-mobile-item-text{display:flex;align-items:center;gap:.75rem;font-weight:500}.nath-menu-bar-mobile-arrow{transition:transform .2s ease}.nath-menu-bar-mobile-arrow--rotated{transform:rotate(180deg)}.nath-menu-bar-mobile-submenu{list-style:none;margin:0;padding:0 0 0 1.5rem;background-color:var(--nath-menu-bar-hover-bg)}.nath-menu-bar-mobile-submenu-item{padding:.75rem 1rem;cursor:pointer;transition:background-color .15s ease;border-bottom:1px solid var(--nath-menu-bar-border)}.nath-menu-bar-mobile-submenu-item:last-child{border-bottom:none}.nath-menu-bar-mobile-submenu-item:hover{background-color:var(--nath-menu-bar-active-bg)}.nath-menu-bar-mobile-submenu-item--disabled{opacity:.5;pointer-events:none}.nath-menu-bar-mobile-submenu-item-text{display:flex;align-items:center;gap:.75rem}@media(max-width:768px){.nath-menu-bar-list{display:none}.nath-menu-bar-toggle{display:flex}.nath-menu-bar-dropdown{display:none}}\n"] }]
|
|
2079
2132
|
}], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], whenCommand: [{ type: i0.Output, args: ["whenCommand"] }], menuBarElement: [{ type: i0.ViewChild, args: ['menuBar', { isSignal: true }] }], dropdownMenu: [{ type: i0.ViewChild, args: ['dropdownMenu', { isSignal: true }] }] } });
|
|
2080
2133
|
|
|
2081
2134
|
let nextId$1 = 0;
|
|
@@ -5262,27 +5315,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
5262
5315
|
`, encapsulation: ViewEncapsulation.None, styles: ["nath-split-button,.nath-split-button-theme{--nath-split-button-border: var(--color-zinc-300, oklch(83.1% .007 285.938));--nath-split-button-bg: var(--color-zinc-100, oklch(96.7% .003 286.375));--nath-split-button-text: var(--color-zinc-900, oklch(21% .006 285.885));--nath-split-button-hover-bg: var(--color-zinc-200, oklch(92% .004 286.32));--nath-split-button-active-bg: var(--color-zinc-300, oklch(83.1% .007 285.938));--nath-split-button-radius: .375rem}.dark nath-split-button,.dark .nath-split-button-theme{--nath-split-button-border: var(--color-zinc-700, oklch(37.1% .008 285.539));--nath-split-button-bg: var(--color-zinc-800, oklch(27.8% .006 285.923));--nath-split-button-text: var(--color-zinc-100, oklch(96.7% .003 286.375));--nath-split-button-hover-bg: var(--color-zinc-700, oklch(37.1% .008 285.539));--nath-split-button-active-bg: var(--color-zinc-600, oklch(44.6% .012 285.938))}nath-split-button{display:inline-block;vertical-align:middle}.nath-split-button-container{display:flex;align-items:stretch}.nath-split-button-main,.nath-split-button-trigger{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid var(--nath-split-button-border);background-color:var(--nath-split-button-bg);color:var(--nath-split-button-text);outline:none;white-space:nowrap}.nath-split-button-main{border-radius:var(--nath-split-button-radius) 0 0 var(--nath-split-button-radius);border-right:none}.nath-split-button-trigger{border-radius:0 var(--nath-split-button-radius) var(--nath-split-button-radius) 0}.nath-split-button-main:hover,.nath-split-button-trigger:hover{background-color:var(--nath-split-button-hover-bg)}.nath-split-button-main:active,.nath-split-button-trigger:active{background-color:var(--nath-split-button-active-bg)}.nath-split-button-main:focus-visible,.nath-split-button-trigger:focus-visible{z-index:10;outline:2px solid var(--nath-split-button-border);outline-offset:-2px}.nath-split-button-main:disabled,.nath-split-button-trigger:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}\n"] }]
|
|
5263
5316
|
}], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: true }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], positionX: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionX", required: false }] }], positionY: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionY", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], tieredMenuComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NathMenu), { isSignal: true }] }] } });
|
|
5264
5317
|
|
|
5265
|
-
class
|
|
5318
|
+
class NathTabDirective {
|
|
5266
5319
|
templateRef = inject(TemplateRef);
|
|
5267
5320
|
tabTitle = input.required({ ...(ngDevMode ? { debugName: "tabTitle" } : /* istanbul ignore next */ {}), alias: 'nathTab' });
|
|
5268
5321
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5269
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type:
|
|
5270
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type:
|
|
5322
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
5323
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NathTabDirective, isStandalone: true, selector: "[nathTab]", inputs: { tabTitle: { classPropertyName: "tabTitle", publicName: "nathTab", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
5271
5324
|
}
|
|
5272
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type:
|
|
5325
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTabDirective, decorators: [{
|
|
5273
5326
|
type: Directive,
|
|
5274
5327
|
args: [{
|
|
5275
5328
|
selector: '[nathTab]',
|
|
5276
5329
|
}]
|
|
5277
5330
|
}], propDecorators: { tabTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nathTab", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5278
5331
|
|
|
5279
|
-
class
|
|
5332
|
+
class NathTabPanelDirective {
|
|
5280
5333
|
templateRef = inject(TemplateRef);
|
|
5281
5334
|
tabTitle = input.required({ ...(ngDevMode ? { debugName: "tabTitle" } : /* istanbul ignore next */ {}), alias: 'nathTabPanel' });
|
|
5282
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type:
|
|
5283
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type:
|
|
5335
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTabPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
5336
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NathTabPanelDirective, isStandalone: true, selector: "[nathTabPanel]", inputs: { tabTitle: { classPropertyName: "tabTitle", publicName: "nathTabPanel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
5284
5337
|
}
|
|
5285
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type:
|
|
5338
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTabPanelDirective, decorators: [{
|
|
5286
5339
|
type: Directive,
|
|
5287
5340
|
args: [{
|
|
5288
5341
|
selector: '[nathTabPanel]',
|
|
@@ -5300,9 +5353,9 @@ class NathTabs {
|
|
|
5300
5353
|
...(ngDevMode ? [{ debugName: "tabPanelClass" }] : /* istanbul ignore next */ []));
|
|
5301
5354
|
slidingWindowClass = input('', /* @ts-ignore */
|
|
5302
5355
|
...(ngDevMode ? [{ debugName: "slidingWindowClass" }] : /* istanbul ignore next */ []));
|
|
5303
|
-
tabs = contentChildren(
|
|
5356
|
+
tabs = contentChildren(NathTabDirective, /* @ts-ignore */
|
|
5304
5357
|
...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
5305
|
-
tabPanels = contentChildren(
|
|
5358
|
+
tabPanels = contentChildren(NathTabPanelDirective, /* @ts-ignore */
|
|
5306
5359
|
...(ngDevMode ? [{ debugName: "tabPanels" }] : /* istanbul ignore next */ []));
|
|
5307
5360
|
activeTabIndex = computed(() => {
|
|
5308
5361
|
return this.tabs().findIndex((tab) => tab.tabTitle() === this.activeTab());
|
|
@@ -5311,7 +5364,7 @@ class NathTabs {
|
|
|
5311
5364
|
totalTabs = computed(() => this.tabs().length, /* @ts-ignore */
|
|
5312
5365
|
...(ngDevMode ? [{ debugName: "totalTabs" }] : /* istanbul ignore next */ []));
|
|
5313
5366
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5314
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathTabs, isStandalone: true, selector: "nath-tabs", inputs: { activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, tabClass: { classPropertyName: "tabClass", publicName: "tabClass", isSignal: true, isRequired: false, transformFunction: null }, tabPanelClass: { classPropertyName: "tabPanelClass", publicName: "tabPanelClass", isSignal: true, isRequired: false, transformFunction: null }, slidingWindowClass: { classPropertyName: "slidingWindowClass", publicName: "slidingWindowClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, queries: [{ propertyName: "tabs", predicate:
|
|
5367
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathTabs, isStandalone: true, selector: "nath-tabs", inputs: { activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, tabClass: { classPropertyName: "tabClass", publicName: "tabClass", isSignal: true, isRequired: false, transformFunction: null }, tabPanelClass: { classPropertyName: "tabPanelClass", publicName: "tabPanelClass", isSignal: true, isRequired: false, transformFunction: null }, slidingWindowClass: { classPropertyName: "slidingWindowClass", publicName: "slidingWindowClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, queries: [{ propertyName: "tabs", predicate: NathTabDirective, isSignal: true }, { propertyName: "tabPanels", predicate: NathTabPanelDirective, isSignal: true }], ngImport: i0, template: `
|
|
5315
5368
|
<div
|
|
5316
5369
|
ngTabs
|
|
5317
5370
|
[attr.aria-orientation]="orientation()"
|
|
@@ -5430,7 +5483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
5430
5483
|
</div>
|
|
5431
5484
|
</div>
|
|
5432
5485
|
`, encapsulation: ViewEncapsulation.None, styles: ["nath-tabs,.nath-tabs-theme{--nath-tabs-text-main: var(--color-zinc-700, oklch(44.2% .017 285.786));--nath-tabs-text-active: var(--color-blue-600, oklch(51.9% .21 259.429));--nath-tabs-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-tabs-active-border: var(--color-blue-600, oklch(51.9% .21 259.429));--nath-tabs-hover-bg: var(--color-zinc-100, oklch(96.7% .003 286.375));--nath-tabs-panel-bg: transparent;--nath-tabs-panel-text: var(--color-zinc-700, oklch(44.2% .017 285.786));--nath-tabs-radius: .5rem}.dark nath-tabs,.dark .nath-tabs-theme{--nath-tabs-text-main: var(--color-zinc-400, oklch(70.7% .009 285.918));--nath-tabs-text-active: var(--color-blue-400, oklch(70.7% .165 254.624));--nath-tabs-border: var(--color-zinc-700, oklch(37.1% .008 285.539));--nath-tabs-active-border: var(--color-blue-400, oklch(70.7% .165 254.624));--nath-tabs-hover-bg: var(--color-zinc-800, oklch(27.8% .006 285.923));--nath-tabs-panel-text: var(--color-zinc-300, oklch(83.1% .007 285.938))}nath-tabs{display:block;width:100%}.nath-tabs-container{display:flex;width:100%;overflow:hidden}.nath-tabs-container.horizontal{flex-direction:column}.nath-tabs-container.vertical{flex-direction:row}.nath-tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative}.nath-tabs-container.horizontal .nath-tabs-list{flex-direction:row;border-bottom:1px solid var(--nath-tabs-border)}.nath-tabs-container.vertical .nath-tabs-list{flex-direction:column;border-right:1px solid var(--nath-tabs-border)}.nath-tabs-tab{flex-grow:1;outline:none;padding:.75rem 1rem;text-align:center;color:var(--nath-tabs-text-main);cursor:pointer;position:relative;transition:all .2s ease-in-out}.nath-tabs-tab:disabled,.nath-tabs-tab[aria-disabled=true]{cursor:not-allowed;opacity:.5}.nath-tabs-tab:hover:not(:disabled):not([aria-selected=true]){background-color:var(--nath-tabs-hover-bg);color:var(--nath-tabs-text-active)}.nath-tabs-tab[aria-selected=true]{font-weight:600;color:var(--nath-tabs-text-active)}.nath-tabs-container.horizontal .nath-tabs-tab[aria-selected=true]{border-bottom:2px solid var(--nath-tabs-active-border)}.nath-tabs-container.vertical .nath-tabs-tab[aria-selected=true]{border-right:2px solid var(--nath-tabs-active-border)}.nath-tabs-tab:focus-visible{outline:2px solid var(--nath-tabs-active-border);outline-offset:-4px;border-radius:var(--nath-tabs-radius)}.nath-tabs-sliding-window{display:flex;overflow:hidden;width:calc(var(--total-tabs, 1) * 100%);transform:translate(calc(-100% / var(--total-tabs, 1) * var(--active-index, 0)));transition:transform .3s cubic-bezier(.4,0,.2,1)}.nath-tabs-panel{display:block;padding:1rem;width:calc(100% / var(--total-tabs, 1));box-sizing:border-box;background-color:var(--nath-tabs-panel-bg);color:var(--nath-tabs-panel-text)}.nath-tabs-panel:focus-visible{outline:2px solid var(--nath-tabs-active-border);outline-offset:-4px}\n"] }]
|
|
5433
|
-
}], propDecorators: { activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], tabClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabClass", required: false }] }], tabPanelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabPanelClass", required: false }] }], slidingWindowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidingWindowClass", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() =>
|
|
5486
|
+
}], propDecorators: { activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], tabClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabClass", required: false }] }], tabPanelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabPanelClass", required: false }] }], slidingWindowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidingWindowClass", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NathTabDirective), { isSignal: true }] }], tabPanels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NathTabPanelDirective), { isSignal: true }] }] } });
|
|
5434
5487
|
|
|
5435
5488
|
class NathTag {
|
|
5436
5489
|
value = input('', /* @ts-ignore */
|
|
@@ -6057,5 +6110,5 @@ function isSortOrderValid(order) {
|
|
|
6057
6110
|
* Generated bundle index. Do not edit.
|
|
6058
6111
|
*/
|
|
6059
6112
|
|
|
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,
|
|
6113
|
+
export { DARK_THEME_CLASS, DIALOG_DATA, NathAutocomplete, NathBooleanControl, NathBreadcrumbService, NathBreadcrumbs, NathCard, NathCardFooterDirective, NathCardHeaderDirective, NathCardTitleDirective, 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, NathTabDirective, NathTabPanelDirective, NathTabs, NathTag, NathThemeSwitch, NathToastContainer, NathToastService, NathToc, NathTooltipContainer, NathTooltipDirective, ORDER, RATING_MAP, THEME_CONFIG, ThemeService, getRatingColor, hasRequiredValidator, isRequired, isSortOrderValid, isTruthy, nextSibling, provideThemeConfig, rangeMinMax, rangeNotMinMax, validateAllFormFields };
|
|
6061
6114
|
//# sourceMappingURL=nath-angular-ui.mjs.map
|