@truenas/ui-components 0.8.17 → 0.8.18

package/fesm2022/truenas-ui-components.mjs

@@ -11017,6 +11017,7 @@ var TnTabComponent = class TnTabComponent {
 	isActive = signal(false, ...ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []);
 	tabsComponent;
 	elementRef = inject(ElementRef);
+	tabButton = viewChild.required("tabButton", ...ngDevMode ? [{ debugName: "tabButton" }] : /* istanbul ignore next */ []);
 	hasIconContent = signal(false, ...ngDevMode ? [{ debugName: "hasIconContent" }] : /* istanbul ignore next */ []);
 	ngAfterContentInit() {
 		this.hasIconContent.set(!!this.iconContent());
@@ -11027,6 +11028,9 @@ var TnTabComponent = class TnTabComponent {
 	onKeydown(event) {
 		if (this.tabsComponent) this.tabsComponent.onKeydown(event, this.index());
 	}
+	focus() {
+		this.tabButton().nativeElement.focus();
+	}
 	classes = computed(() => {
 		const classes = ["tn-tab"];
 		if (this.isActive()) classes.push("tn-tab--active");
@@ -11100,8 +11104,15 @@ var TnTabComponent = class TnTabComponent {
 			descendants: true,
 			isSignal: true
 		}],
+		viewQueries: [{
+			propertyName: "tabButton",
+			first: true,
+			predicate: ["tabButton"],
+			descendants: true,
+			isSignal: true
+		}],
 		ngImport: i0,
-		template: "<button\n  role=\"tab\"\n  type=\"button\"\n  tnTestIdType=\"tab\"\n  [ngClass]=\"classes()\"\n  [tnTestId]=\"testId()\"\n  [attr.id]=\"tabId()\"\n  [attr.aria-controls]=\"hasPanel() ? panelId() : null\"\n  [attr.aria-selected]=\"isActive()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onClick()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (hasIcon()) {\n    <span class=\"tn-tab__icon\">\n      @if (iconContent()) {\n        <ng-container *ngTemplateOutlet=\"iconContent()\" />\n      } @else if (iconTemplate()) {\n        <ng-container *ngTemplateOutlet=\"iconTemplate()\" />\n      } @else {\n        <span [innerHTML]=\"icon()\"></span>\n      }\n    </span>\n  }\n  <span class=\"tn-tab__label\">\n    <span [innerHTML]=\"label() | tnLabelMarkup\"></span>\n    <ng-content />\n  </span>\n</button>",
+		template: "<button\n  #tabButton\n  role=\"tab\"\n  type=\"button\"\n  tnTestIdType=\"tab\"\n  [ngClass]=\"classes()\"\n  [tnTestId]=\"testId()\"\n  [attr.id]=\"tabId()\"\n  [attr.aria-controls]=\"hasPanel() ? panelId() : null\"\n  [attr.aria-selected]=\"isActive()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onClick()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (hasIcon()) {\n    <span class=\"tn-tab__icon\">\n      @if (iconContent()) {\n        <ng-container *ngTemplateOutlet=\"iconContent()\" />\n      } @else if (iconTemplate()) {\n        <ng-container *ngTemplateOutlet=\"iconTemplate()\" />\n      } @else {\n        <span [innerHTML]=\"icon()\"></span>\n      }\n    </span>\n  }\n  <span class=\"tn-tab__label\">\n    <span [innerHTML]=\"label() | tnLabelMarkup\"></span>\n    <ng-content />\n  </span>\n</button>",
 		styles: [".tn-tab{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));--tn-primary-text: var(--tn-fg1, #222222);display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:12px 16px;border:none;border-bottom:none;background:transparent;color:var(--tn-fg2, #666);font-family:var(--tn-font-family-body, \"Inter\", sans-serif);font-size:14px;font-weight:500;line-height:1.5;cursor:pointer;white-space:nowrap;min-width:0;flex-shrink:0}.tn-tab:hover:not(.tn-tab--disabled):not(.tn-tab--active){background-color:var(--tn-alt-bg1, #f5f5f5);color:var(--tn-fg1, #333)}.tn-tab:focus-visible{outline:2px solid var(--tn-primary, #0095d5);outline-offset:-2px;border-radius:4px}.tn-tab--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tn-tab__icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}.tn-tab__label ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-tab__label{display:flex;align-items:center;min-width:0;text-overflow:ellipsis;overflow:hidden}@media(prefers-contrast:high){.tn-tab{border-width:3px}.tn-tab:focus-visible{outline-width:3px}}:host-context(.tn-tabs--vertical){width:100%}:host-context(.tn-tabs--vertical) .tn-tab{width:100%}\n"],
 		dependencies: [
 			{
@@ -11160,7 +11171,7 @@ i0.ɵɵngDeclareClassMetadata({
 				LabelMarkupPipe
 			],
 			changeDetection: ChangeDetectionStrategy.Eager,
-			template: "<button\n  role=\"tab\"\n  type=\"button\"\n  tnTestIdType=\"tab\"\n  [ngClass]=\"classes()\"\n  [tnTestId]=\"testId()\"\n  [attr.id]=\"tabId()\"\n  [attr.aria-controls]=\"hasPanel() ? panelId() : null\"\n  [attr.aria-selected]=\"isActive()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onClick()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (hasIcon()) {\n    <span class=\"tn-tab__icon\">\n      @if (iconContent()) {\n        <ng-container *ngTemplateOutlet=\"iconContent()\" />\n      } @else if (iconTemplate()) {\n        <ng-container *ngTemplateOutlet=\"iconTemplate()\" />\n      } @else {\n        <span [innerHTML]=\"icon()\"></span>\n      }\n    </span>\n  }\n  <span class=\"tn-tab__label\">\n    <span [innerHTML]=\"label() | tnLabelMarkup\"></span>\n    <ng-content />\n  </span>\n</button>",
+			template: "<button\n  #tabButton\n  role=\"tab\"\n  type=\"button\"\n  tnTestIdType=\"tab\"\n  [ngClass]=\"classes()\"\n  [tnTestId]=\"testId()\"\n  [attr.id]=\"tabId()\"\n  [attr.aria-controls]=\"hasPanel() ? panelId() : null\"\n  [attr.aria-selected]=\"isActive()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onClick()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (hasIcon()) {\n    <span class=\"tn-tab__icon\">\n      @if (iconContent()) {\n        <ng-container *ngTemplateOutlet=\"iconContent()\" />\n      } @else if (iconTemplate()) {\n        <ng-container *ngTemplateOutlet=\"iconTemplate()\" />\n      } @else {\n        <span [innerHTML]=\"icon()\"></span>\n      }\n    </span>\n  }\n  <span class=\"tn-tab__label\">\n    <span [innerHTML]=\"label() | tnLabelMarkup\"></span>\n    <ng-content />\n  </span>\n</button>",
 			styles: [".tn-tab{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));--tn-primary-text: var(--tn-fg1, #222222);display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:12px 16px;border:none;border-bottom:none;background:transparent;color:var(--tn-fg2, #666);font-family:var(--tn-font-family-body, \"Inter\", sans-serif);font-size:14px;font-weight:500;line-height:1.5;cursor:pointer;white-space:nowrap;min-width:0;flex-shrink:0}.tn-tab:hover:not(.tn-tab--disabled):not(.tn-tab--active){background-color:var(--tn-alt-bg1, #f5f5f5);color:var(--tn-fg1, #333)}.tn-tab:focus-visible{outline:2px solid var(--tn-primary, #0095d5);outline-offset:-2px;border-radius:4px}.tn-tab--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tn-tab__icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}.tn-tab__label ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-tab__label{display:flex;align-items:center;min-width:0;text-overflow:ellipsis;overflow:hidden}@media(prefers-contrast:high){.tn-tab{border-width:3px}.tn-tab:focus-visible{outline-width:3px}}:host-context(.tn-tabs--vertical){width:100%}:host-context(.tn-tabs--vertical) .tn-tab{width:100%}\n"]
 		}]
 	}],
@@ -11212,6 +11223,10 @@ i0.ɵɵngDeclareClassMetadata({
 		iconContent: [{
 			type: i0.ContentChild,
 			args: ["iconContent", { isSignal: true }]
+		}],
+		tabButton: [{
+			type: i0.ViewChild,
+			args: ["tabButton", { isSignal: true }]
 		}]
 	}
 });
@@ -11563,8 +11578,7 @@ var TnTabsComponent = class TnTabsComponent {
 		return tabs.length - 1;
 	}
 	focusTab(index) {
-		const tab = this.tabs()[index];
-		if (tab && tab.elementRef) tab.elementRef.nativeElement.focus();
+		this.tabs()[index]?.focus();
 	}
 	classes = computed(() => {
 		const classes = ["tn-tabs"];