@truenas/ui-components 0.8.17 → 0.8.19

package/fesm2022/truenas-ui-components.mjs

@@ -541,7 +541,7 @@ function createTnOptionsDataSource(config) {
 		}
 	};
 }
-let nextId$6 = 0;
+let nextId$9 = 0;
 const TN_AUTOCOMPLETE_DEFAULT_LABELS = {
 	placeholder: "Type to search...",
 	loading: "Loading...",
@@ -555,7 +555,7 @@ var TnAutocompleteComponent = class TnAutocompleteComponent {
 	elementRef = inject(ElementRef);
 	overlay = inject(Overlay);
 	viewContainerRef = inject(ViewContainerRef);
-	uid = `tn-autocomplete-${nextId$6++}`;
+	uid = `tn-autocomplete-${nextId$9++}`;
 	options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
 	compareWith = input(void 0, ...ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []);
 	placeholder = input(void 0, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
@@ -5151,7 +5151,7 @@ function tnIconMarker(iconName, library) {
 function libIconMarker(iconName) {
 	return iconName;
 }
-let nextId$5 = 0;
+let nextId$8 = 0;
 var TnInputComponent = class TnInputComponent {
 	inputEl = viewChild.required("inputEl", ...ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []);
 	inputType = input(InputType.PlainText, ...ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []);
@@ -5206,7 +5206,7 @@ var TnInputComponent = class TnInputComponent {
 		const base = this.testId();
 		return ["toggle-password", ...Array.isArray(base) ? base : [base]];
 	}, ...ngDevMode ? [{ debugName: "passwordToggleTestId" }] : /* istanbul ignore next */ []);
-	id = `tn-input-${nextId$5++}`;
+	id = `tn-input-${nextId$8++}`;
 	value = signal("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
 	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
 	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
@@ -6544,11 +6544,11 @@ const TN_CHIP_INPUT_LABELS = new InjectionToken("TN_CHIP_INPUT_LABELS", {
 	providedIn: "root",
 	factory: () => TN_CHIP_INPUT_DEFAULT_LABELS
 });
-let nextId$4 = 0;
+let nextId$7 = 0;
 var TnChipInputComponent = class TnChipInputComponent {
 	overlay = inject(Overlay);
 	viewContainerRef = inject(ViewContainerRef);
-	uid = `tn-chip-input-${nextId$4++}`;
+	uid = `tn-chip-input-${nextId$7++}`;
 	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 	separatorKeys = input(["Enter", ","], ...ngDevMode ? [{ debugName: "separatorKeys" }] : /* istanbul ignore next */ []);
@@ -8352,6 +8352,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+let nextId$6 = 0;
 var TnSlideToggleComponent = class TnSlideToggleComponent {
 	toggleEl = viewChild.required("toggleEl", ...ngDevMode ? [{ debugName: "toggleEl" }] : /* istanbul ignore next */ []);
 	labelPosition = input("after", ...ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []);
@@ -8367,7 +8368,7 @@ var TnSlideToggleComponent = class TnSlideToggleComponent {
 	checked = input(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
 	change = output();
 	toggleChange = output();
-	id = `tn-slide-toggle-${Math.random().toString(36).substr(2, 9)}`;
+	id = `tn-slide-toggle-${nextId$6++}`;
 	internalChecked = signal(false, ...ngDevMode ? [{ debugName: "internalChecked" }] : /* istanbul ignore next */ []);
 	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
 	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
@@ -9645,6 +9646,7 @@ var TnExpansionPanelHarness = class TnExpansionPanelHarness extends ComponentHar
 		if (await this.isExpanded()) await this.toggle();
 	}
 };
+let nextId$5 = 0;
 var TnCheckboxLabelDirective = class TnCheckboxLabelDirective {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -9690,7 +9692,7 @@ var TnCheckboxComponent = class TnCheckboxComponent {
 	change = output();
 	labelContent = contentChildren(TnCheckboxLabelDirective, ...ngDevMode ? [{ debugName: "labelContent" }] : /* istanbul ignore next */ []);
 	hasProjectedLabel = computed(() => this.labelContent().length > 0, ...ngDevMode ? [{ debugName: "hasProjectedLabel" }] : /* istanbul ignore next */ []);
-	id = `tn-checkbox-${Math.random().toString(36).substr(2, 9)}`;
+	id = `tn-checkbox-${nextId$5++}`;
 	internalChecked = signal(false, ...ngDevMode ? [{ debugName: "internalChecked" }] : /* istanbul ignore next */ []);
 	cvaControlled = signal(false, ...ngDevMode ? [{ debugName: "cvaControlled" }] : /* istanbul ignore next */ []);
 	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
@@ -10019,7 +10021,7 @@ var TnCheckboxHarness = class TnCheckboxHarness extends ComponentHarness {
 		await (await this._label()).click();
 	}
 };
-let nextId$3 = 0;
+let nextId$4 = 0;
 var TnCheckboxGroupComponent = class TnCheckboxGroupComponent {
 	options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
 	inline = input(false, ...ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []);
@@ -10035,7 +10037,7 @@ var TnCheckboxGroupComponent = class TnCheckboxGroupComponent {
 	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
 	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
 	ariaRequired = computed(() => this.required() || this.fieldAria.required() === true, ...ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []);
-	requiredTextId = `tn-checkbox-group-required-${nextId$3++}`;
+	requiredTextId = `tn-checkbox-group-required-${nextId$4++}`;
 	resolvedAriaLabel = computed(() => {
 		const label = this.ariaLabel();
 		if (!label) return null;
@@ -10325,6 +10327,7 @@ var TnCheckboxGroupHarness = class TnCheckboxGroupHarness extends ComponentHarne
 	}
 };
 const TN_RADIO_GROUP = new InjectionToken("TN_RADIO_GROUP");
+let nextId$3 = 0;
 var TnRadioComponent = class TnRadioComponent {
 	radioEl = viewChild.required("radioEl", ...ngDevMode ? [{ debugName: "radioEl" }] : /* istanbul ignore next */ []);
 	label = input("Radio", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
@@ -10336,7 +10339,7 @@ var TnRadioComponent = class TnRadioComponent {
 	resolvedTestId = controlTestId(this.testId);
 	error = input(null, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
 	change = output();
-	id = `tn-radio-${Math.random().toString(36).substr(2, 9)}`;
+	id = `tn-radio-${nextId$3++}`;
 	group = inject(TN_RADIO_GROUP, { optional: true });
 	standaloneChecked = signal(false, ...ngDevMode ? [{ debugName: "standaloneChecked" }] : /* istanbul ignore next */ []);
 	checked = computed(() => this.group ? this.group.isSelected(this.value()) : this.standaloneChecked(), ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
@@ -11017,6 +11020,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 +11031,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 +11107,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 +11174,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 +11226,10 @@ i0.ɵɵngDeclareClassMetadata({
 		iconContent: [{
 			type: i0.ContentChild,
 			args: ["iconContent", { isSignal: true }]
+		}],
+		tabButton: [{
+			type: i0.ViewChild,
+			args: ["tabButton", { isSignal: true }]
 		}]
 	}
 });
@@ -11563,8 +11581,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"];