@vonage/vivid 5.16.0 → 5.17.0

package/unbundled/definition25.cjs

@@ -1,360 +1,75 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition.cjs");
-const require_definition$1 = require("./definition2.cjs");
+const require_definition = require("./definition2.cjs");
 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_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_char_count = require("./char-count.cjs");
-const require_mixins = require("./mixins.cjs");
-const require_text_field = require("./text-field.cjs");
-const require_definition$2 = require("./definition30.cjs");
+const require_definition$1 = require("./definition24.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
+//#region src/lib/contextual-help/contextual-help.ts
 /**
-* Text field sub-types
 * @public
+* @component contextual-help
+* @slot - Default slot.
+* @slot icon - Custom icon slot (optional).
 */
-var TextFieldType = {
-	email: "email",
-	password: "password",
-	tel: "tel",
-	text: "text",
-	url: "url"
-};
-var safariWorkaroundStyles = new _microsoft_fast_element.ElementStyles([`
-	._vvd-3-text-field-safari-workaround::placeholder {
-		opacity: 1 !important;
-		-webkit-text-fill-color: var(--_low-ink-color) !important;
+var ContextualHelp = class extends require_vivid_element.VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.placement = "right";
 	}
-`]);
-var installSafariWorkaroundStyleIfNeeded = (forElement) => {
-	const root = forElement.getRootNode();
-	if (!safariWorkaroundStyles.isAttachedTo(root)) safariWorkaroundStyles.addStylesTo(root);
 };
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], ContextualHelp.prototype, "placement", void 0);
+//#endregion
+//#region src/lib/contextual-help/contextual-help.template.ts
+var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
 /**
-* Base class for text-field
+* The template for the ContextualHelp component.
 *
+* @param context - element definition context
 * @public
-* @component text-field
-* @slot leading-action-items - Used to add action items to the start of the text-field.
-* @slot action-items - Used to add action items to the end of the text-field.
-* @slot helper-text - Describes how to use the text-field. Alternative to the `helper-text` attribute.
-* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value has changed
-* @vueModel modelValue value input `event.currentTarget.value`
-* @testAction fill fill #control
-* @testAction clear clear #control
-* @testAction blur blur #control
-* @testRef control light input[slot="_control"]
 */
-var TextField = class extends require_with_contextual_help.WithContextualHelp(require_mixins.WithLightDOMFeedback(require_char_count.WithCharCount(require_with_error_text.WithErrorText(require_with_success_text.WithSuccessText(require_form_element.FormElement(require_affix.AffixIcon(require_delegates_aria.DelegatesAria(require_form_associated.FormAssociated(require_vivid_element.VividElement))))))))) {
-	constructor(..._args) {
-		super(..._args);
-		this.proxy = document.createElement("input");
-		this.type = TextFieldType.text;
-	}
-	/**
-	* @internal
-	*/
-	readOnlyChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) {
-			this.proxy.readOnly = this.readOnly;
-			this.validate();
-		}
-	}
-	/**
-	* @internal
-	*/
-	autofocusChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) {
-			this.proxy.autofocus = this.autofocus;
-			this.validate();
-		}
-	}
-	/**
-	* @internal
-	*/
-	placeholderChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
-	}
-	/**
-	* @internal
-	*/
-	typeChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) {
-			this.proxy.type = this.type;
-			this.validate();
-		}
-	}
-	/**
-	* @internal
-	*/
-	listChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) {
-			this.proxy.setAttribute("list", this.list);
-			this.validate();
-		}
-	}
-	/**
-	* @internal
-	*/
-	maxlengthChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) {
-			this.proxy.maxLength = this.maxlength;
-			this.validate();
-		}
-	}
-	/**
-	* @internal
-	*/
-	minlengthChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) {
-			this.proxy.minLength = this.minlength;
-			this.validate();
-		}
-	}
-	/**
-	* @internal
-	*/
-	patternChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) {
-			this.proxy.pattern = this.pattern;
-			this.validate();
-		}
-	}
-	/**
-	* @internal
-	*/
-	sizeChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) this.proxy.size = this.size;
-	}
-	/**
-	* @internal
-	*/
-	spellcheckChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) this.proxy.spellcheck = this.spellcheck;
-	}
-	/**
-	* @internal
-	*/
-	valueChanged(previous, next) {
-		super.valueChanged(previous, next);
-		this._updateControlValueIfNeeded();
-		if (this.charCount && this.maxlength) this._updateCharCountRemaining();
-	}
-	/**
-	* Update the controls value only if it is actually different from the actual value.
-	* This is important as to not reset the browser's "dirtiness" flag on the input, which is used for min/maxlength
-	* constraints.
-	* @internal
-	*/
-	_updateControlValueIfNeeded() {
-		if (this.control && this.control.value !== this.value) this.control.value = this.value;
-	}
-	/**
-	* Selects all the text in the text field
-	*
-	* @public
-	*/
-	select() {
-		this.control.select();
-	}
-	/**
-	* Handles the internal control's `input` event
-	* @internal
-	*/
-	handleTextInput() {
-		this.value = this.control.value;
-	}
-	/**
-	* Change event handler for inner control.
-	* @remarks
-	* "Change" events are not `composable` so they will not
-	* permeate the shadow DOM boundary. This fn effectively proxies
-	* the change event, emitting a `change` event whenever the internal
-	* control emits a `change` event
-	* @internal
-	*/
-	handleChange() {
-		this.$emit("change");
-	}
-	/** {@inheritDoc (FormAssociated:interface).validate} */
-	validate() {
-		super.validate(this.control);
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.proxy.setAttribute("type", this.type);
-		this.validate();
-		if (this.autofocus) _microsoft_fast_element.Updates.enqueue(() => {
-			this.focus();
-		});
-		this._updateControlValueIfNeeded();
-		installSafariWorkaroundStyleIfNeeded(this);
-		this._renderCharCountRemaining();
-	}
-	focus() {
-		this.control?.focus();
-	}
-	#randomId = require_mixins.generateRandomId();
-	/**
-	* @internal
-	*/
-	get _uniqueId() {
-		return this.id || this.#randomId;
-	}
-};
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "readonly",
-	mode: "boolean"
-})], TextField.prototype, "readOnly", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], TextField.prototype, "autofocus", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "placeholder", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "type", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "list", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], TextField.prototype, "maxlength", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], TextField.prototype, "minlength", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "pattern", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], TextField.prototype, "size", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], TextField.prototype, "spellcheck", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "appearance", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "shape", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "autoComplete", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], TextField.prototype, "scale", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "inputmode" })], TextField.prototype, "inputMode", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], TextField.prototype, "actionItemsSlottedContent", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], TextField.prototype, "leadingActionItemsSlottedContent", void 0);
-//#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);
+var ContextualHelpTemplate = (context) => {
+	const toggletipTag = context.tagFor(require_definition$1.Toggletip);
+	const iconTag = context.tagFor(require_definition.Icon);
 	return _microsoft_fast_element.html`
-		<div class="base ${getStateClasses}">
-			${(0, _microsoft_fast_element.when)((x) => x.charCount && x.maxlength, (x) => x._getCharCountTemplate(context))}
-			<div
-				class="label-wrapper"
-				?hidden=${(x) => !x.label && !x._hasContextualHelp}
-			>
-				<slot class="label" name="_label"></slot>
-				<slot
-					name="contextual-help"
-					${(0, _microsoft_fast_element.slotted)("_contextualHelpSlottedContent")}
-				></slot>
-			</div>
-			${require_mixins.renderInLightDOM(_microsoft_fast_element.html`
-				${(0, _microsoft_fast_element.when)((x) => x.label, _microsoft_fast_element.html`
-						<label slot="_label" for="${(x) => getControlId(x._uniqueId)}">
-							${(x) => x.label}
-						</label>
-					`)}
-			`)}
-			<div class="fieldset">
-				<div class="leading-items-wrapper">
-					<slot
-						name="leading-action-items"
-						${(0, _microsoft_fast_element.slotted)("leadingActionItemsSlottedContent")}
-					></slot>
-					${(x) => affixIconTemplate(x.icon)}
-				</div>
-				<div class="wrapper">
-					<slot class="control" name="_control"></slot>
-					${require_mixins.renderInLightDOM(_microsoft_fast_element.html`<input
-							slot="_control"
-							id="${(x) => getControlId(x._uniqueId)}"
-							class="_vvd-3-text-field-safari-workaround"
-							@input="${(x) => x.handleTextInput()}"
-							@change="${(x) => x.handleChange()}"
-							@blur="${(x) => {
-		x.$emit("blur", void 0, { bubbles: false });
-	}}"
-							@focus="${(x) => {
-		x.$emit("focus", void 0, { bubbles: false });
-	}}"
-							?autofocus="${(x) => x.autofocus}"
-							?disabled="${(x) => x.disabled}"
-							?readonly="${(x) => x.readOnly}"
-							?required="${(x) => x.required}"
-							?spellcheck="${(x) => x.spellcheck}"
-							list="${(x) => x.list}"
-							maxlength="${(x) => x.maxlength}"
-							minlength="${(x) => x.minlength}"
-							pattern="${(x) => x.pattern}"
-							placeholder="${(x) => x.placeholder}"
-							size="${(x) => x.size}"
-							autocomplete="${(x) => x.autoComplete}"
-							type="${(x) => x.type}"
-							inputmode="${(x) => x.inputMode}"
-							aria-describedby="${(x) => x._feedbackDescribedBy} ${(x) => x.charCount && x.maxlength ? x._charCountDescribedBy : null}"
-							value="${(x) => x.initialValue}"
-							${require_delegates_aria.delegateAria()}
-							${(0, _microsoft_fast_element.ref)("control")}
-						/>`)}
-				</div>
-				<div class="action-items-wrapper">
-					<slot
-						name="action-items"
-						${(0, _microsoft_fast_element.slotted)("actionItemsSlottedContent")}
-					></slot>
-				</div>
-			</div>
-			${(x) => x._getFeedbackTemplate(context)}
-		</div>
+		<${toggletipTag} class="base" exportparts="vvd-theme-alternate">
+			<button class="${getClasses}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${iconTag} name="help-solid"></${iconTag}>
+        </slot>
+			</button>
+			<slot></slot>
+		</${toggletipTag}>
 	`;
 };
 //#endregion
-//#region src/lib/text-field/definition.ts
+//#region src/lib/contextual-help/definition.ts
 /**
 * @internal
 */
-var textFieldDefinition = require_vivid_element.defineVividComponent("text-field", TextField, TextfieldTemplate, [
-	require_definition$1.iconDefinition,
-	require_mixins.feedbackMessageDefinition,
-	require_definition.visuallyHiddenDefinition,
-	require_definition$2.contextualHelpDefinition
-], {
-	styles: require_text_field.text_field_default,
-	shadowOptions: { delegatesFocus: true }
-});
+var contextualHelpDefinition = require_vivid_element.defineVividComponent("contextual-help", ContextualHelp, ContextualHelpTemplate, [require_definition.iconDefinition, require_definition$1.toggletipDefinition], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" });
 /**
-* Registers the text-field elements with the design system.
+* Registers the contextual-help element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerTextField = require_vivid_element.createRegisterFunction(textFieldDefinition);
+var registerContextualHelp = require_vivid_element.createRegisterFunction(contextualHelpDefinition);
 //#endregion
-Object.defineProperty(exports, "TextField", {
+Object.defineProperty(exports, "ContextualHelp", {
 	enumerable: true,
 	get: function() {
-		return TextField;
+		return ContextualHelp;
 	}
 });
-Object.defineProperty(exports, "registerTextField", {
+Object.defineProperty(exports, "contextualHelpDefinition", {
 	enumerable: true,
 	get: function() {
-		return registerTextField;
+		return contextualHelpDefinition;
 	}
 });
-Object.defineProperty(exports, "textFieldDefinition", {
+Object.defineProperty(exports, "registerContextualHelp", {
 	enumerable: true,
 	get: function() {
-		return textFieldDefinition;
+		return registerContextualHelp;
 	}
 });