@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition26.cjs

@@ -5,43 +5,30 @@ const require_decorate = require("./decorate.cjs");
 const require_affix = require("./affix.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 const require_form_associated = require("./form-associated.cjs");
+const require_definition$1 = require("./definition22.cjs");
+const require_mixins = require("./mixins.cjs");
 const require_form_element = require("./form-element.cjs");
-const require_with_success_text = require("./with-success-text.cjs");
 const require_with_error_text = require("./with-error-text.cjs");
-const require_with_contextual_help = require("./with-contextual-help.cjs");
-const require_definition$1 = require("./definition6.cjs");
-const require_char_count = require("./char-count.cjs");
-const require_mixins = require("./mixins.cjs");
+const require_with_success_text = require("./with-success-text.cjs");
 const require_randomId = require("./randomId.cjs");
 const require_definition$2 = require("./definition25.cjs");
+const require_char_count = require("./char-count.cjs");
+const require_with_contextual_help = require("./with-contextual-help.cjs");
 const require_text_field = require("./text-field.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/text-field/text-field.ts
-/**
-* Text field sub-types
-* @public
-*/
+/** Text field sub-types */
 var TextFieldType = {
-	/**
-	* An email TextField
-	*/
+	/** An email TextField */
 	email: "email",
-	/**
-	* A password TextField
-	*/
+	/** A password TextField */
 	password: "password",
-	/**
-	* A telephone TextField
-	*/
+	/** A telephone TextField */
 	tel: "tel",
-	/**
-	* A text TextField
-	*/
+	/** A text TextField */
 	text: "text",
-	/**
-	* A URL TextField
-	*/
+	/** A URL TextField */
 	url: "url"
 };
 var safariWorkaroundStyles = new _microsoft_fast_element.ElementStyles([`
@@ -77,9 +64,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 		this.type = TextFieldType.text;
 		this.#randomId = require_randomId.generateRandomId();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	readOnlyChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -87,9 +72,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	autofocusChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -97,16 +80,12 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	placeholderChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	typeChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -114,9 +93,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	listChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -124,9 +101,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	maxlengthChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -134,9 +109,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	minlengthChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -144,9 +117,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	patternChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -154,23 +125,17 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	sizeChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.size = this.size;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	spellcheckChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.spellcheck = this.spellcheck;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	valueChanged(previous, next) {
 		super.valueChanged(previous, next);
 		this._updateControlValueIfNeeded();
@@ -185,11 +150,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 	_updateControlValueIfNeeded() {
 		if (this.control && this.control.value !== this.value) this.control.value = this.value;
 	}
-	/**
-	* Selects all the text in the text field
-	*
-	* @public
-	*/
+	/** Selects all the text in the text field */
 	select() {
 		this.control.select();
 	}
@@ -233,9 +194,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 		this.control?.focus();
 	}
 	#randomId;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _uniqueId() {
 		return this.id || this.#randomId;
 	}
@@ -263,11 +222,12 @@ require_decorate.__decorate([_microsoft_fast_element.observable], TextField.prot
 //#endregion
 //#region src/lib/text-field/text-field.template.ts
 var getControlId = (id) => `vvd-text-field-control-${id}`;
-var getStateClasses = ({ errorValidationMessage, disabled, value, readOnly, placeholder, appearance, shape, label, successText, actionItemsSlottedContent, leadingActionItemsSlottedContent, icon, scale }) => (0, _microsoft_fast_web_utilities.classNames)(["error", Boolean(errorValidationMessage)], ["disabled", disabled], ["has-value", Boolean(value)], ["readonly", readOnly], ["placeholder", Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ["no-label", !label], ["has-icon", !!icon], ["success", Boolean(successText)], ["action-items", !!actionItemsSlottedContent?.length], ["leading-action-items", !!leadingActionItemsSlottedContent?.length], ["no-leading", !(leadingActionItemsSlottedContent?.length || icon)], [`size-${scale}`, Boolean(scale)]);
 var TextfieldTemplate = (context) => {
 	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
 	return _microsoft_fast_element.html`
-		<div class="base ${getStateClasses}">
+		<div
+			class="base ${(x) => (0, _microsoft_fast_web_utilities.classNames)(["error", Boolean(x.errorValidationMessage)], ["disabled", x.disabled], ["has-value", Boolean(x.value)], ["readonly", x.readOnly], ["placeholder", Boolean(x.placeholder)], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], ["no-label", !x.label], ["has-icon", !!x.icon], ["success", Boolean(x.successText)], ["action-items", !!x.actionItemsSlottedContent?.length], ["leading-action-items", !!x.leadingActionItemsSlottedContent?.length], ["no-leading", !(x.leadingActionItemsSlottedContent?.length || x.icon)], [`size-${x.scale}`, Boolean(x.scale)])}"
+		>
 			${(0, _microsoft_fast_element.when)((x) => x.charCount && x.maxlength, (x) => x._getCharCountTemplate(context))}
 			<div
 				class="label-wrapper"
@@ -340,9 +300,7 @@ var TextfieldTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/text-field/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var textFieldDefinition = require_vivid_element.defineVividComponent("text-field", TextField, TextfieldTemplate, [
 	require_definition.iconDefinition,
 	require_mixins.feedbackMessageDefinition,

package/unbundled/definition26.js

@@ -4,43 +4,30 @@ import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, t as AffixIcon } from "./affix.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { n as FormAssociated } from "./form-associated.js";
+import { n as visuallyHiddenDefinition } from "./definition22.js";
+import { n as WithLightDOMFeedback, r as feedbackMessageDefinition } from "./mixins.js";
 import { t as FormElement } from "./form-element.js";
-import { t as WithSuccessText } from "./with-success-text.js";
 import { t as WithErrorText } from "./with-error-text.js";
-import { t as WithContextualHelp } from "./with-contextual-help.js";
-import { n as visuallyHiddenDefinition } from "./definition6.js";
-import { t as WithCharCount } from "./char-count.js";
-import { n as WithLightDOMFeedback, r as feedbackMessageDefinition } from "./mixins.js";
+import { t as WithSuccessText } from "./with-success-text.js";
 import { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
 import { t as contextualHelpDefinition } from "./definition25.js";
+import { t as WithCharCount } from "./char-count.js";
+import { t as WithContextualHelp } from "./with-contextual-help.js";
 import { t as text_field_default } from "./text-field.js";
 import { ElementStyles, Updates, attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/text-field/text-field.ts
-/**
-* Text field sub-types
-* @public
-*/
+/** Text field sub-types */
 var TextFieldType = {
-	/**
-	* An email TextField
-	*/
+	/** An email TextField */
 	email: "email",
-	/**
-	* A password TextField
-	*/
+	/** A password TextField */
 	password: "password",
-	/**
-	* A telephone TextField
-	*/
+	/** A telephone TextField */
 	tel: "tel",
-	/**
-	* A text TextField
-	*/
+	/** A text TextField */
 	text: "text",
-	/**
-	* A URL TextField
-	*/
+	/** A URL TextField */
 	url: "url"
 };
 var safariWorkaroundStyles = new ElementStyles([`
@@ -76,9 +63,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 		this.type = TextFieldType.text;
 		this.#randomId = generateRandomId();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	readOnlyChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -86,9 +71,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	autofocusChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -96,16 +79,12 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	placeholderChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	typeChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -113,9 +92,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	listChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -123,9 +100,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	maxlengthChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -133,9 +108,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	minlengthChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -143,9 +116,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	patternChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) {
@@ -153,23 +124,17 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 			this.validate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	sizeChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.size = this.size;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	spellcheckChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.spellcheck = this.spellcheck;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	valueChanged(previous, next) {
 		super.valueChanged(previous, next);
 		this._updateControlValueIfNeeded();
@@ -184,11 +149,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 	_updateControlValueIfNeeded() {
 		if (this.control && this.control.value !== this.value) this.control.value = this.value;
 	}
-	/**
-	* Selects all the text in the text field
-	*
-	* @public
-	*/
+	/** Selects all the text in the text field */
 	select() {
 		this.control.select();
 	}
@@ -232,9 +193,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 		this.control?.focus();
 	}
 	#randomId;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _uniqueId() {
 		return this.id || this.#randomId;
 	}
@@ -262,11 +221,12 @@ __decorate([observable], TextField.prototype, "leadingActionItemsSlottedContent"
 //#endregion
 //#region src/lib/text-field/text-field.template.ts
 var getControlId = (id) => `vvd-text-field-control-${id}`;
-var getStateClasses = ({ errorValidationMessage, disabled, value, readOnly, placeholder, appearance, shape, label, successText, actionItemsSlottedContent, leadingActionItemsSlottedContent, icon, scale }) => classNames(["error", Boolean(errorValidationMessage)], ["disabled", disabled], ["has-value", Boolean(value)], ["readonly", readOnly], ["placeholder", Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ["no-label", !label], ["has-icon", !!icon], ["success", Boolean(successText)], ["action-items", !!actionItemsSlottedContent?.length], ["leading-action-items", !!leadingActionItemsSlottedContent?.length], ["no-leading", !(leadingActionItemsSlottedContent?.length || icon)], [`size-${scale}`, Boolean(scale)]);
 var TextfieldTemplate = (context) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 	return html`
-		<div class="base ${getStateClasses}">
+		<div
+			class="base ${(x) => classNames(["error", Boolean(x.errorValidationMessage)], ["disabled", x.disabled], ["has-value", Boolean(x.value)], ["readonly", x.readOnly], ["placeholder", Boolean(x.placeholder)], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], ["no-label", !x.label], ["has-icon", !!x.icon], ["success", Boolean(x.successText)], ["action-items", !!x.actionItemsSlottedContent?.length], ["leading-action-items", !!x.leadingActionItemsSlottedContent?.length], ["no-leading", !(x.leadingActionItemsSlottedContent?.length || x.icon)], [`size-${x.scale}`, Boolean(x.scale)])}"
+		>
 			${when((x) => x.charCount && x.maxlength, (x) => x._getCharCountTemplate(context))}
 			<div
 				class="label-wrapper"
@@ -339,9 +299,7 @@ var TextfieldTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/text-field/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var textFieldDefinition = defineVividComponent("text-field", TextField, TextfieldTemplate, [
 	iconDefinition,
 	feedbackMessageDefinition,

package/unbundled/definition27.cjs

@@ -1,9 +1,9 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_kbd_shortcut = require("./kbd-shortcut.cjs");
 const require_dialog = require("./dialog.cjs");
-const require_definition = require("./definition10.cjs");
+const require_definition = require("./definition9.cjs");
+const require_kbd_shortcut = require("./kbd-shortcut.cjs");
 const require_anchored = require("./anchored.cjs");
 const require_randomId = require("./randomId.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
@@ -49,9 +49,7 @@ var Tooltip = class extends require_kbd_shortcut.WithKbdShortcut(require_anchore
 		super.disconnectedCallback();
 		this.#updateListeners();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_anchorElChanged(oldValue, newValue) {
 		if (oldValue) this.#cleanupAnchor(oldValue);
 		if (newValue) this.#setupAnchor(newValue);
@@ -83,9 +81,7 @@ var Tooltip = class extends require_kbd_shortcut.WithKbdShortcut(require_anchore
 		if (this.open && this.isConnected) document.addEventListener("keydown", this.#closeOnEscape);
 	}
 	#closeOnEscape;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	openChanged(oldValue) {
 		if (oldValue === void 0) return;
 		this.#updateListeners();
@@ -96,13 +92,12 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Tooltip.prototype, "open", void 0);
 //#endregion
 //#region src/lib/tooltip/tooltip.template.ts
-var getClasses = ({ open }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", open]);
 var TooltipTemplate = (context) => {
 	const popupTag = context.tagFor(require_definition.Popup);
 	return _microsoft_fast_element.html`
 ${require_anchored.anchorSlotTemplateFactory()}
 ${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<span slot="_description" id="${(x) => x._descriptionId}">${(x) => x.text}</span>`)}
-<${popupTag} class="${getClasses}" arrow alternate
+<${popupTag} class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", x.open])}" arrow alternate
 	:placement=${(x) => x.placement}
 	:anchor="${(x) => x._anchorEl}"
 	:open="${(x) => x.open}"
@@ -123,9 +118,7 @@ ${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<span slot="_de
 };
 //#endregion
 //#region src/lib/tooltip/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var tooltipDefinition = require_vivid_element.defineVividComponent("tooltip", Tooltip, TooltipTemplate, [require_definition.popupDefinition], { styles: tooltip_default });
 /**
 * Registers the tooltip elements with the design system.

package/unbundled/definition27.js

@@ -1,8 +1,8 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { t as WithKbdShortcut } from "./kbd-shortcut.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
-import { i as Popup, t as popupDefinition } from "./definition10.js";
+import { i as Popup, t as popupDefinition } from "./definition9.js";
+import { t as WithKbdShortcut } from "./kbd-shortcut.js";
 import { n as anchorSlotTemplateFactory, t as Anchored } from "./anchored.js";
 import { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
 import { DOM, attr, elements, html, slotted } from "@microsoft/fast-element";
@@ -48,9 +48,7 @@ var Tooltip = class extends WithKbdShortcut(Anchored(VividElement)) {
 		super.disconnectedCallback();
 		this.#updateListeners();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_anchorElChanged(oldValue, newValue) {
 		if (oldValue) this.#cleanupAnchor(oldValue);
 		if (newValue) this.#setupAnchor(newValue);
@@ -82,9 +80,7 @@ var Tooltip = class extends WithKbdShortcut(Anchored(VividElement)) {
 		if (this.open && this.isConnected) document.addEventListener("keydown", this.#closeOnEscape);
 	}
 	#closeOnEscape;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	openChanged(oldValue) {
 		if (oldValue === void 0) return;
 		this.#updateListeners();
@@ -95,13 +91,12 @@ __decorate([attr({ mode: "fromView" })], Tooltip.prototype, "placement", void 0)
 __decorate([attr({ mode: "boolean" })], Tooltip.prototype, "open", void 0);
 //#endregion
 //#region src/lib/tooltip/tooltip.template.ts
-var getClasses = ({ open }) => classNames("control", ["open", open]);
 var TooltipTemplate = (context) => {
 	const popupTag = context.tagFor(Popup);
 	return html`
 ${anchorSlotTemplateFactory()}
 ${renderInLightDOM(html`<span slot="_description" id="${(x) => x._descriptionId}">${(x) => x.text}</span>`)}
-<${popupTag} class="${getClasses}" arrow alternate
+<${popupTag} class="${(x) => classNames("control", ["open", x.open])}" arrow alternate
 	:placement=${(x) => x.placement}
 	:anchor="${(x) => x._anchorEl}"
 	:open="${(x) => x.open}"
@@ -122,9 +117,7 @@ ${renderInLightDOM(html`<span slot="_description" id="${(x) => x._descriptionId}
 };
 //#endregion
 //#region src/lib/tooltip/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var tooltipDefinition = defineVividComponent("tooltip", Tooltip, TooltipTemplate, [popupDefinition], { styles: tooltip_default });
 /**
 * Registers the tooltip elements with the design system.