@truenas/ui-components 0.8.18 → 0.8.20

package/README.md

@@ -315,7 +315,7 @@ Available themes:
 ng build truenas-ui
 
 # Generate icon sprite for library development
-yarn icons
+yarn generate-sprite
 
 # Run Storybook
 yarn run sb

package/fesm2022/truenas-ui-components.mjs

@@ -541,7 +541,7 @@ function createTnOptionsDataSource(config) {
 		}
 	};
 }
-let nextId$6 = 0;
+let nextId$12 = 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$12++}`;
 	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 */ []);
@@ -3941,6 +3941,7 @@ const ARROW_HALF_WIDTH_PROPERTY = "--tn-tooltip-arrow-half-width";
 const PANEL_RADIUS_PROPERTY = "--tn-tooltip-radius";
 const FALLBACK_ARROW_HALF_WIDTH = 6;
 const FALLBACK_PANEL_RADIUS = 4;
+let nextId$11 = 0;
 var TnTooltipDirective = class TnTooltipDirective {
 	message = input("", {
 		...ngDevMode ? { debugName: "message" } : /* istanbul ignore next */ {},
@@ -3991,7 +3992,7 @@ var TnTooltipDirective = class TnTooltipDirective {
 	_outsideClickSub = null;
 	_dismissSub = null;
 	_focusSub = null;
-	_tooltipId = `tn-tooltip-${Math.random().toString(36).substr(2, 9)}`;
+	_tooltipId = `tn-tooltip-${nextId$11++}`;
 	_overlay = inject(Overlay);
 	_elementRef = inject(ElementRef);
 	_viewContainerRef = inject(ViewContainerRef);
@@ -5151,7 +5152,7 @@ function tnIconMarker(iconName, library) {
 function libIconMarker(iconName) {
 	return iconName;
 }
-let nextId$5 = 0;
+let nextId$10 = 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 +5207,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$10++}`;
 	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 +6545,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$9 = 0;
 var TnChipInputComponent = class TnChipInputComponent {
 	overlay = inject(Overlay);
 	viewContainerRef = inject(ViewContainerRef);
-	uid = `tn-chip-input-${nextId$4++}`;
+	uid = `tn-chip-input-${nextId$9++}`;
 	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 +8353,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+let nextId$8 = 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 +8369,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$8++}`;
 	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 */ []);
@@ -9359,6 +9361,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+let nextId$7 = 0;
 var TnExpansionPanelComponent = class TnExpansionPanelComponent {
 	title = input(void 0, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
 	elevation = input("medium", ...ngDevMode ? [{ debugName: "elevation" }] : /* istanbul ignore next */ []);
@@ -9377,7 +9380,7 @@ var TnExpansionPanelComponent = class TnExpansionPanelComponent {
 		const internal = this.internalExpanded();
 		return internal !== null ? internal : this.expanded();
 	}, ...ngDevMode ? [{ debugName: "effectiveExpanded" }] : /* istanbul ignore next */ []);
-	contentId = `tn-expansion-panel-content-${Math.random().toString(36).substr(2, 9)}`;
+	contentId = `tn-expansion-panel-content-${nextId$7++}`;
 	toggle() {
 		if (this.disabled()) return;
 		const newExpanded = !this.effectiveExpanded();
@@ -9645,6 +9648,7 @@ var TnExpansionPanelHarness = class TnExpansionPanelHarness extends ComponentHar
 		if (await this.isExpanded()) await this.toggle();
 	}
 };
+let nextId$6 = 0;
 var TnCheckboxLabelDirective = class TnCheckboxLabelDirective {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -9690,7 +9694,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$6++}`;
 	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 +10023,7 @@ var TnCheckboxHarness = class TnCheckboxHarness extends ComponentHarness {
 		await (await this._label()).click();
 	}
 };
-let nextId$3 = 0;
+let nextId$5 = 0;
 var TnCheckboxGroupComponent = class TnCheckboxGroupComponent {
 	options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
 	inline = input(false, ...ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []);
@@ -10035,7 +10039,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$5++}`;
 	resolvedAriaLabel = computed(() => {
 		const label = this.ariaLabel();
 		if (!label) return null;
@@ -10325,6 +10329,7 @@ var TnCheckboxGroupHarness = class TnCheckboxGroupHarness extends ComponentHarne
 	}
 };
 const TN_RADIO_GROUP = new InjectionToken("TN_RADIO_GROUP");
+let nextId$4 = 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 +10341,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$4++}`;
 	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 */ []);
@@ -12115,7 +12120,7 @@ function dismissibleErrorState(sources) {
 		resolvedDismissTooltip: computed(() => sources.dismissTooltip() ?? resolvedDismissAriaLabel())
 	};
 }
-let nextId$2 = 0;
+let nextId$3 = 0;
 const FOCUSABLE_SELECTOR = [
 	"input:not([disabled])",
 	"select:not([disabled])",
@@ -12125,7 +12130,7 @@ const FOCUSABLE_SELECTOR = [
 	"[tabindex]:not([tabindex=\"-1\"])"
 ].join(",");
 var TnFormFieldComponent = class TnFormFieldComponent {
-	uid = `tn-form-field-${nextId$2++}`;
+	uid = `tn-form-field-${nextId$3++}`;
 	errorId = `${this.uid}-error`;
 	hintId = `${this.uid}-hint`;
 	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
@@ -12641,7 +12646,7 @@ var TnFormFieldHarness = class TnFormFieldHarness extends ComponentHarness {
 		return await subscript.hasClass("tn-form-field-subscript-dynamic") ? "dynamic" : "fixed";
 	}
 };
-let nextId$1 = 0;
+let nextId$2 = 0;
 const EMPTY_STATE = {
 	invalid: false,
 	interacted: false,
@@ -12656,7 +12661,7 @@ var TnFormErrorsComponent = class TnFormErrorsComponent {
 	dismissAriaLabel = input(void 0, ...ngDevMode ? [{ debugName: "dismissAriaLabel" }] : /* istanbul ignore next */ []);
 	dismissTooltip = input(void 0, ...ngDevMode ? [{ debugName: "dismissTooltip" }] : /* istanbul ignore next */ []);
 	dismiss = output();
-	errorId = `tn-form-errors-${nextId$1++}`;
+	errorId = `tn-form-errors-${nextId$2++}`;
 	errorResolver = inject(TN_FORM_FIELD_ERRORS, { optional: true });
 	state = signal(EMPTY_STATE, ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
 	errorMessage = computed(() => {
@@ -15265,11 +15270,11 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-let nextId = 0;
+let nextId$1 = 0;
 var TnListSubheaderComponent = class TnListSubheaderComponent {
 	inset = input(false, ...ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []);
 	owner = ariaOwner();
-	textId = `tn-list-subheader-${nextId++}`;
+	textId = `tn-list-subheader-${nextId$1++}`;
 	ownerKind = computed(() => {
 		const role = this.owner.role();
 		return role === "list" || role === "listbox" ? role : "other";
@@ -25545,6 +25550,7 @@ const TN_SIDE_PANEL_CONTENT_LABEL = "Panel content";
 const TN_SIDE_PANEL_OVERFLOW_TOLERANCE_PX = 13;
 const TN_SIDE_PANEL_ATTACHED_CLASS = "tn-side-panel__overlay--attached";
 const TN_SIDE_PANEL_OPEN_CLASS = "tn-side-panel__overlay--open";
+let nextId = 0;
 var TnSidePanelActionDirective = class TnSidePanelActionDirective {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -25671,7 +25677,7 @@ var TnSidePanelComponent = class TnSidePanelComponent {
 	hasActions = computed(() => this.actionContent().length > 0, ...ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []);
 	titleSlotContent = contentChildren(TnSidePanelTitleDirective, ...ngDevMode ? [{ debugName: "titleSlotContent" }] : /* istanbul ignore next */ []);
 	hasTitleSlot = computed(() => this.titleSlotContent().length > 0, ...ngDevMode ? [{ debugName: "hasTitleSlot" }] : /* istanbul ignore next */ []);
-	panelId = `tn-side-panel-${Math.random().toString(36).substring(2, 9)}`;
+	panelId = `tn-side-panel-${nextId++}`;
 	titleId = `${this.panelId}-title`;
 	hasTitle = computed(() => this.title().trim() !== "", ...ngDevMode ? [{ debugName: "hasTitle" }] : /* istanbul ignore next */ []);
 	resolvedAriaLabelledby = computed(() => this.hasTitle() ? this.titleId : this.ariaLabelledby(), ...ngDevMode ? [{ debugName: "resolvedAriaLabelledby" }] : /* istanbul ignore next */ []);