@truenas/ui-components 0.1.54 → 0.1.55
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.
|
@@ -2621,11 +2621,11 @@ class TnMenuComponent {
|
|
|
2621
2621
|
return item.id;
|
|
2622
2622
|
}
|
|
2623
2623
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2624
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnMenuComponent, isStandalone: true, selector: "tn-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick", menuOpen: "menuOpen", menuClose: "menuClose" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, isSignal: true }, { propertyName: "contextMenuTemplate", first: true, predicate: ["contextMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Context menu content slot -->\n@if (contextMenu()) {\n <div class=\"tn-menu-context-content\" (contextmenu)=\"onContextMenu($event)\">\n <ng-content />\n </div>\n}\n\n <!-- Context menu template for overlay -->\n <ng-template #contextMenuTemplate>\n <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n @for (item of items(); track trackByItemId($index, item)) {\n @if (item.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!item.children || item.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n (click)=\"onMenuItemClick(item)\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [cdkMenuTriggerFor]=\"nestedMenu\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #nestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n @if (nestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!nestedItem.children || nestedItem.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n (click)=\"onMenuItemClick(nestedItem)\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [cdkMenuTriggerFor]=\"deepNestedMenu\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #deepNestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n @if (deepNestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [disabled]=\"deepNestedItem.disabled\"\n [class.disabled]=\"deepNestedItem.disabled\"\n (click)=\"onMenuItemClick(deepNestedItem)\"\n >\n @if (deepNestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n @if (deepNestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n }\n </button>\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>\n\n <!-- Regular menu template -->\n <ng-template #menuTemplate>\n <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n @for (item of items(); track trackByItemId($index, item)) {\n @if (item.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!item.children || item.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n (click)=\"onMenuItemClick(item)\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [cdkMenuTriggerFor]=\"nestedMenu\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #nestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n @if (nestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!nestedItem.children || nestedItem.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n (click)=\"onMenuItemClick(nestedItem)\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [cdkMenuTriggerFor]=\"deepNestedMenu\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #deepNestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n @if (deepNestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [disabled]=\"deepNestedItem.disabled\"\n [class.disabled]=\"deepNestedItem.disabled\"\n (click)=\"onMenuItemClick(deepNestedItem)\"\n >\n @if (deepNestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n @if (deepNestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n }\n </button>\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>", styles: [".tn-menu-container{display:inline-block;position:relative}.tn-menu-container.tn-menu-container--context{display:block;width:100%;height:100%;cursor:context-menu}.tn-menu-trigger{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;transition:all .2s ease}.tn-menu-trigger:hover:not(.disabled){background:var(--tn-bg2, #f5f5f5);border-color:var(--tn-lines, #cccccc)}.tn-menu-trigger:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-menu-trigger.disabled{opacity:.5;cursor:not-allowed}.tn-menu-arrow{font-size:12px;transition:transform .2s ease}.tn-menu-arrow.tn-menu-arrow--up{transform:rotate(180deg)}.tn-menu{display:flex;flex-direction:column;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;min-width:160px;max-width:300px;padding:4px 0;z-index:1000}.tn-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;border:none;background:transparent;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;text-align:left;transition:background-color .2s ease}.tn-menu-item:hover:not(.disabled){background:var(--tn-alt-bg2, #e8f4fd)!important}.tn-menu-item:focus{outline:none;background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item[aria-selected=true]{background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item.disabled{opacity:.5;cursor:not-allowed}.tn-menu-item.disabled:hover{background:transparent!important}.tn-menu-item-icon{font-size:16px;width:16px;text-align:center}.tn-menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-menu-item-shortcut{font-size:12px;color:var(--tn-fg2, #666666);margin-left:auto;padding-left:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:400;opacity:.7}.tn-menu-item-arrow{font-size:10px;margin-left:8px;color:var(--tn-fg2, #666666);transition:transform .2s ease;flex-shrink:0}.tn-menu-item--nested{position:relative}.tn-menu-item--nested:hover .tn-menu-item-arrow{color:var(--tn-fg1, #333333)}.tn-menu-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:4px 0}.tn-menu--nested{margin-left:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;border-radius:4px}.tn-menu-context-content{width:100%;height:100%}.tn-menu-context-content:hover:before{content:\"\";position:absolute;inset:0;background:rgba(var(--tn-primary-rgb, 0, 123, 255),.05);pointer-events:none;border:1px dashed rgba(var(--tn-primary-rgb, 0, 123, 255),.3);border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "directive", type: TnMenuActivateHoverDirective, selector: "[tnMenuActivateHover]" }] });
|
|
2624
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnMenuComponent, isStandalone: true, selector: "tn-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick", menuOpen: "menuOpen", menuClose: "menuClose" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, isSignal: true }, { propertyName: "contextMenuTemplate", first: true, predicate: ["contextMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Context menu content slot -->\n@if (contextMenu()) {\n <div class=\"tn-menu-context-content\" (contextmenu)=\"onContextMenu($event)\">\n <ng-content />\n </div>\n}\n\n <!-- Context menu template for overlay -->\n <ng-template #contextMenuTemplate>\n <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n @for (item of items(); track trackByItemId($index, item)) {\n @if (item.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!item.children || item.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [attr.data-testid]=\"item.testId ?? 'menu-item-' + item.id\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n (click)=\"onMenuItemClick(item)\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [attr.data-testid]=\"item.testId ?? 'menu-item-' + item.id\"\n [cdkMenuTriggerFor]=\"nestedMenu\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #nestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n @if (nestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!nestedItem.children || nestedItem.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [attr.data-testid]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n (click)=\"onMenuItemClick(nestedItem)\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [attr.data-testid]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n [cdkMenuTriggerFor]=\"deepNestedMenu\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #deepNestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n @if (deepNestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [attr.data-testid]=\"deepNestedItem.testId ?? 'menu-item-' + deepNestedItem.id\"\n [disabled]=\"deepNestedItem.disabled\"\n [class.disabled]=\"deepNestedItem.disabled\"\n (click)=\"onMenuItemClick(deepNestedItem)\"\n >\n @if (deepNestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n @if (deepNestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n }\n </button>\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>\n\n <!-- Regular menu template -->\n <ng-template #menuTemplate>\n <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n @for (item of items(); track trackByItemId($index, item)) {\n @if (item.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!item.children || item.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [attr.data-testid]=\"item.testId ?? 'menu-item-' + item.id\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n (click)=\"onMenuItemClick(item)\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [attr.data-testid]=\"item.testId ?? 'menu-item-' + item.id\"\n [cdkMenuTriggerFor]=\"nestedMenu\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #nestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n @if (nestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!nestedItem.children || nestedItem.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [attr.data-testid]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n (click)=\"onMenuItemClick(nestedItem)\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [attr.data-testid]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n [cdkMenuTriggerFor]=\"deepNestedMenu\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #deepNestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n @if (deepNestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [attr.data-testid]=\"deepNestedItem.testId ?? 'menu-item-' + deepNestedItem.id\"\n [disabled]=\"deepNestedItem.disabled\"\n [class.disabled]=\"deepNestedItem.disabled\"\n (click)=\"onMenuItemClick(deepNestedItem)\"\n >\n @if (deepNestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n @if (deepNestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n }\n </button>\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>", styles: [".tn-menu-container{display:inline-block;position:relative}.tn-menu-container.tn-menu-container--context{display:block;width:100%;height:100%;cursor:context-menu}.tn-menu-trigger{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;transition:all .2s ease}.tn-menu-trigger:hover:not(.disabled){background:var(--tn-bg2, #f5f5f5);border-color:var(--tn-lines, #cccccc)}.tn-menu-trigger:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-menu-trigger.disabled{opacity:.5;cursor:not-allowed}.tn-menu-arrow{font-size:12px;transition:transform .2s ease}.tn-menu-arrow.tn-menu-arrow--up{transform:rotate(180deg)}.tn-menu{display:flex;flex-direction:column;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;min-width:160px;max-width:300px;padding:4px 0;z-index:1000}.tn-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;border:none;background:transparent;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;text-align:left;transition:background-color .2s ease}.tn-menu-item:hover:not(.disabled){background:var(--tn-alt-bg2, #e8f4fd)!important}.tn-menu-item:focus{outline:none;background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item[aria-selected=true]{background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item.disabled{opacity:.5;cursor:not-allowed}.tn-menu-item.disabled:hover{background:transparent!important}.tn-menu-item-icon{font-size:16px;width:16px;text-align:center}.tn-menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-menu-item-shortcut{font-size:12px;color:var(--tn-fg2, #666666);margin-left:auto;padding-left:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:400;opacity:.7}.tn-menu-item-arrow{font-size:10px;margin-left:8px;color:var(--tn-fg2, #666666);transition:transform .2s ease;flex-shrink:0}.tn-menu-item--nested{position:relative}.tn-menu-item--nested:hover .tn-menu-item-arrow{color:var(--tn-fg1, #333333)}.tn-menu-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:4px 0}.tn-menu--nested{margin-left:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;border-radius:4px}.tn-menu-context-content{width:100%;height:100%}.tn-menu-context-content:hover:before{content:\"\";position:absolute;inset:0;background:rgba(var(--tn-primary-rgb, 0, 123, 255),.05);pointer-events:none;border:1px dashed rgba(var(--tn-primary-rgb, 0, 123, 255),.3);border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "directive", type: TnMenuActivateHoverDirective, selector: "[tnMenuActivateHover]" }] });
|
|
2625
2625
|
}
|
|
2626
2626
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMenuComponent, decorators: [{
|
|
2627
2627
|
type: Component,
|
|
2628
|
-
args: [{ selector: 'tn-menu', standalone: true, imports: [CommonModule, CdkMenu, CdkMenuItem, CdkMenuTrigger, TnIconComponent, TnMenuActivateHoverDirective], template: "<!-- Context menu content slot -->\n@if (contextMenu()) {\n <div class=\"tn-menu-context-content\" (contextmenu)=\"onContextMenu($event)\">\n <ng-content />\n </div>\n}\n\n <!-- Context menu template for overlay -->\n <ng-template #contextMenuTemplate>\n <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n @for (item of items(); track trackByItemId($index, item)) {\n @if (item.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!item.children || item.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n (click)=\"onMenuItemClick(item)\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [cdkMenuTriggerFor]=\"nestedMenu\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #nestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n @if (nestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!nestedItem.children || nestedItem.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n (click)=\"onMenuItemClick(nestedItem)\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [cdkMenuTriggerFor]=\"deepNestedMenu\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #deepNestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n @if (deepNestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [disabled]=\"deepNestedItem.disabled\"\n [class.disabled]=\"deepNestedItem.disabled\"\n (click)=\"onMenuItemClick(deepNestedItem)\"\n >\n @if (deepNestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n @if (deepNestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n }\n </button>\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>\n\n <!-- Regular menu template -->\n <ng-template #menuTemplate>\n <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n @for (item of items(); track trackByItemId($index, item)) {\n @if (item.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!item.children || item.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n (click)=\"onMenuItemClick(item)\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [cdkMenuTriggerFor]=\"nestedMenu\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #nestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n @if (nestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!nestedItem.children || nestedItem.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n (click)=\"onMenuItemClick(nestedItem)\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [cdkMenuTriggerFor]=\"deepNestedMenu\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #deepNestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n @if (deepNestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [disabled]=\"deepNestedItem.disabled\"\n [class.disabled]=\"deepNestedItem.disabled\"\n (click)=\"onMenuItemClick(deepNestedItem)\"\n >\n @if (deepNestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n @if (deepNestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n }\n </button>\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>", styles: [".tn-menu-container{display:inline-block;position:relative}.tn-menu-container.tn-menu-container--context{display:block;width:100%;height:100%;cursor:context-menu}.tn-menu-trigger{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;transition:all .2s ease}.tn-menu-trigger:hover:not(.disabled){background:var(--tn-bg2, #f5f5f5);border-color:var(--tn-lines, #cccccc)}.tn-menu-trigger:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-menu-trigger.disabled{opacity:.5;cursor:not-allowed}.tn-menu-arrow{font-size:12px;transition:transform .2s ease}.tn-menu-arrow.tn-menu-arrow--up{transform:rotate(180deg)}.tn-menu{display:flex;flex-direction:column;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;min-width:160px;max-width:300px;padding:4px 0;z-index:1000}.tn-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;border:none;background:transparent;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;text-align:left;transition:background-color .2s ease}.tn-menu-item:hover:not(.disabled){background:var(--tn-alt-bg2, #e8f4fd)!important}.tn-menu-item:focus{outline:none;background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item[aria-selected=true]{background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item.disabled{opacity:.5;cursor:not-allowed}.tn-menu-item.disabled:hover{background:transparent!important}.tn-menu-item-icon{font-size:16px;width:16px;text-align:center}.tn-menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-menu-item-shortcut{font-size:12px;color:var(--tn-fg2, #666666);margin-left:auto;padding-left:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:400;opacity:.7}.tn-menu-item-arrow{font-size:10px;margin-left:8px;color:var(--tn-fg2, #666666);transition:transform .2s ease;flex-shrink:0}.tn-menu-item--nested{position:relative}.tn-menu-item--nested:hover .tn-menu-item-arrow{color:var(--tn-fg1, #333333)}.tn-menu-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:4px 0}.tn-menu--nested{margin-left:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;border-radius:4px}.tn-menu-context-content{width:100%;height:100%}.tn-menu-context-content:hover:before{content:\"\";position:absolute;inset:0;background:rgba(var(--tn-primary-rgb, 0, 123, 255),.05);pointer-events:none;border:1px dashed rgba(var(--tn-primary-rgb, 0, 123, 255),.3);border-radius:4px}\n"] }]
|
|
2628
|
+
args: [{ selector: 'tn-menu', standalone: true, imports: [CommonModule, CdkMenu, CdkMenuItem, CdkMenuTrigger, TnIconComponent, TnMenuActivateHoverDirective], template: "<!-- Context menu content slot -->\n@if (contextMenu()) {\n <div class=\"tn-menu-context-content\" (contextmenu)=\"onContextMenu($event)\">\n <ng-content />\n </div>\n}\n\n <!-- Context menu template for overlay -->\n <ng-template #contextMenuTemplate>\n <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n @for (item of items(); track trackByItemId($index, item)) {\n @if (item.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!item.children || item.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [attr.data-testid]=\"item.testId ?? 'menu-item-' + item.id\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n (click)=\"onMenuItemClick(item)\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [attr.data-testid]=\"item.testId ?? 'menu-item-' + item.id\"\n [cdkMenuTriggerFor]=\"nestedMenu\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #nestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n @if (nestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!nestedItem.children || nestedItem.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [attr.data-testid]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n (click)=\"onMenuItemClick(nestedItem)\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [attr.data-testid]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n [cdkMenuTriggerFor]=\"deepNestedMenu\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #deepNestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n @if (deepNestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [attr.data-testid]=\"deepNestedItem.testId ?? 'menu-item-' + deepNestedItem.id\"\n [disabled]=\"deepNestedItem.disabled\"\n [class.disabled]=\"deepNestedItem.disabled\"\n (click)=\"onMenuItemClick(deepNestedItem)\"\n >\n @if (deepNestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n @if (deepNestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n }\n </button>\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>\n\n <!-- Regular menu template -->\n <ng-template #menuTemplate>\n <div class=\"tn-menu\" cdkMenu tnMenuActivateHover>\n @for (item of items(); track trackByItemId($index, item)) {\n @if (item.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!item.children || item.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [attr.data-testid]=\"item.testId ?? 'menu-item-' + item.id\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n (click)=\"onMenuItemClick(item)\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [attr.data-testid]=\"item.testId ?? 'menu-item-' + item.id\"\n [cdkMenuTriggerFor]=\"nestedMenu\"\n [disabled]=\"item.disabled\"\n [class.disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"item.icon\" [library]=\"item.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ item.label }}</span>\n @if (item.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ item.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #nestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (nestedItem of item.children; track trackByItemId($index, nestedItem)) {\n @if (nestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n @if (!nestedItem.children || nestedItem.children.length === 0) {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [attr.data-testid]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n (click)=\"onMenuItemClick(nestedItem)\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n </button>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item tn-menu-item--nested\"\n type=\"button\"\n [attr.data-testid]=\"nestedItem.testId ?? 'menu-item-' + nestedItem.id\"\n [cdkMenuTriggerFor]=\"deepNestedMenu\"\n [disabled]=\"nestedItem.disabled\"\n [class.disabled]=\"nestedItem.disabled\"\n >\n @if (nestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"nestedItem.icon\" [library]=\"nestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ nestedItem.label }}</span>\n @if (nestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ nestedItem.shortcut }}</span>\n }\n <span class=\"tn-menu-item-arrow\">\u25B6</span>\n </button>\n\n <ng-template #deepNestedMenu>\n <div class=\"tn-menu tn-menu--nested\" cdkMenu>\n @for (deepNestedItem of nestedItem.children; track trackByItemId($index, deepNestedItem)) {\n @if (deepNestedItem.separator) {\n <div\n class=\"tn-menu-separator\"\n role=\"separator\"\n ></div>\n } @else {\n <button\n cdkMenuItem\n class=\"tn-menu-item\"\n type=\"button\"\n [attr.data-testid]=\"deepNestedItem.testId ?? 'menu-item-' + deepNestedItem.id\"\n [disabled]=\"deepNestedItem.disabled\"\n [class.disabled]=\"deepNestedItem.disabled\"\n (click)=\"onMenuItemClick(deepNestedItem)\"\n >\n @if (deepNestedItem.icon) {\n <tn-icon size=\"sm\" class=\"tn-menu-item-icon\" [name]=\"deepNestedItem.icon\" [library]=\"deepNestedItem.iconLibrary\" />\n }\n <span class=\"tn-menu-item-label\">{{ deepNestedItem.label }}</span>\n @if (deepNestedItem.shortcut) {\n <span class=\"tn-menu-item-shortcut\">{{ deepNestedItem.shortcut }}</span>\n }\n </button>\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>\n }\n }\n }\n </div>\n </ng-template>", styles: [".tn-menu-container{display:inline-block;position:relative}.tn-menu-container.tn-menu-container--context{display:block;width:100%;height:100%;cursor:context-menu}.tn-menu-trigger{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;transition:all .2s ease}.tn-menu-trigger:hover:not(.disabled){background:var(--tn-bg2, #f5f5f5);border-color:var(--tn-lines, #cccccc)}.tn-menu-trigger:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-menu-trigger.disabled{opacity:.5;cursor:not-allowed}.tn-menu-arrow{font-size:12px;transition:transform .2s ease}.tn-menu-arrow.tn-menu-arrow--up{transform:rotate(180deg)}.tn-menu{display:flex;flex-direction:column;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #e0e0e0);border-radius:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;min-width:160px;max-width:300px;padding:4px 0;z-index:1000}.tn-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;border:none;background:transparent;color:var(--tn-fg1, #333333);cursor:pointer;font-size:14px;text-align:left;transition:background-color .2s ease}.tn-menu-item:hover:not(.disabled){background:var(--tn-alt-bg2, #e8f4fd)!important}.tn-menu-item:focus{outline:none;background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item[aria-selected=true]{background:var(--tn-alt-bg2, #e8f4fd)}.tn-menu-item.disabled{opacity:.5;cursor:not-allowed}.tn-menu-item.disabled:hover{background:transparent!important}.tn-menu-item-icon{font-size:16px;width:16px;text-align:center}.tn-menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-menu-item-shortcut{font-size:12px;color:var(--tn-fg2, #666666);margin-left:auto;padding-left:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:400;opacity:.7}.tn-menu-item-arrow{font-size:10px;margin-left:8px;color:var(--tn-fg2, #666666);transition:transform .2s ease;flex-shrink:0}.tn-menu-item--nested{position:relative}.tn-menu-item--nested:hover .tn-menu-item-arrow{color:var(--tn-fg1, #333333)}.tn-menu-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:4px 0}.tn-menu--nested{margin-left:4px;box-shadow:0 8px 24px #00000026,0 4px 8px #0000001a;border-radius:4px}.tn-menu-context-content{width:100%;height:100%}.tn-menu-context-content:hover:before{content:\"\";position:absolute;inset:0;background:rgba(var(--tn-primary-rgb, 0, 123, 255),.05);pointer-events:none;border:1px dashed rgba(var(--tn-primary-rgb, 0, 123, 255),.3);border-radius:4px}\n"] }]
|
|
2629
2629
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], menuOpen: [{ type: i0.Output, args: ["menuOpen"] }], menuClose: [{ type: i0.Output, args: ["menuClose"] }], menuTemplate: [{ type: i0.ViewChild, args: ['menuTemplate', { isSignal: true }] }], contextMenuTemplate: [{ type: i0.ViewChild, args: ['contextMenuTemplate', { isSignal: true }] }] } });
|
|
2630
2630
|
|
|
2631
2631
|
class TnSlideToggleComponent {
|