@vonage/vivid 5.23.1 → 5.25.0

package/unbundled/option.js

@@ -0,0 +1,164 @@
+import { t as VividElement } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { n as AffixIconWithTrailing } from "./affix.js";
+import { t as HostSemantics } from "./host-semantics.js";
+import { attr, observable, volatile } from "@microsoft/fast-element";
+import { isHTMLElement } from "@microsoft/fast-web-utilities";
+//#region src/lib/option/option.ts
+/**
+* Determines if the element is a {@link (ListboxOption:class)}
+*
+* @param element - the element to test.
+*/
+function isListboxOption(el) {
+	return isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement || el instanceof ListboxOption);
+}
+/**
+* Implements [ARIA option](https://www.w3.org/TR/wai-aria-1.1/#option).
+*
+* @public
+* @component option
+* @slot icon - The preferred way to add an icon to the component.
+* @slot tag-icon - Icon to be displayed in the tag when selected inside a Searchable Select.
+* @slot trailing-meta - For additional elements at the end of the Option.
+* @testAction click click #locator
+*/
+var ListboxOption = class extends HostSemantics(AffixIconWithTrailing(VividElement)) {
+	defaultSelectedChanged() {
+		if (!this.dirtySelected) {
+			this.selected = this.defaultSelected;
+			if (this.proxy instanceof HTMLOptionElement) this.proxy.selected = this.defaultSelected;
+		}
+		if (this.proxy instanceof HTMLOptionElement) this.proxy.defaultSelected = this.defaultSelected;
+	}
+	disabledChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLOptionElement) this.proxy.disabled = this.disabled;
+	}
+	/**
+	* Alias for `defaultSelected`, mirroring the option's initial selected state (the
+	* `selected` attribute). Distinct from `current-selected`, which reflects the
+	* option's live selected state.
+	* @deprecated Use `defaultSelected` instead.
+	*/
+	get selectedAttribute() {
+		return this.defaultSelected;
+	}
+	set selectedAttribute(value) {
+		this.defaultSelected = value;
+	}
+	selectedChanged() {
+		if (!this.dirtySelected) this.dirtySelected = true;
+		if (this.proxy instanceof HTMLOptionElement) this.proxy.selected = this.selected;
+	}
+	valueChanged() {
+		if (typeof this.value !== "string") {
+			this.value = "";
+			return;
+		}
+		if (this.proxy instanceof HTMLOptionElement) this.proxy.value = this.value;
+	}
+	get label() {
+		return this._label ?? this.text;
+	}
+	set label(value) {
+		this._label = value;
+	}
+	set text(value) {
+		this._text = value;
+	}
+	get text() {
+		return this._text ?? "";
+	}
+	/**
+	* Provides an accessible name for use by parent components.
+	* Note: Does not implement full accessible name computation, e.g. slotted content is missed.
+	* @internal
+	*/
+	_getAccessibleName() {
+		return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
+	}
+	get form() {
+		return null;
+	}
+	/** @internal */
+	get _hasMatchedText() {
+		return Boolean(this.matchedText ?? this._vvdSearchText);
+	}
+	/**
+	* From is inclusive, to is exclusive.
+	* @internal
+	*/
+	get _matchedRange() {
+		const matchedText = this.matchedText ?? this._vvdSearchText;
+		if (matchedText) {
+			const matchIndex = this.text.toLowerCase().indexOf(matchedText.toLowerCase());
+			return matchIndex === -1 ? {
+				from: 0,
+				to: 0
+			} : {
+				from: matchIndex,
+				to: matchIndex + matchedText.length
+			};
+		}
+		return {
+			from: 0,
+			to: 0
+		};
+	}
+	constructor(text, value, defaultSelected, selected) {
+		super();
+		this.defaultSelected = false;
+		this.dirtySelected = false;
+		this.value = "";
+		this._highlighted = false;
+		this._displayCheckmark = false;
+		this._vvdSearchText = "";
+		this._isNotMatching = false;
+		if (text) this.text = text;
+		if (value) this.value = value;
+		if (defaultSelected) this.defaultSelected = defaultSelected;
+		if (selected) this.selected = selected;
+		this.proxy = new Option(this.text, this.value, this.defaultSelected, this.selected);
+		this.proxy.disabled = this.disabled;
+	}
+	/** @internal */
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.dirtySelected) {
+			this.selected = this.defaultSelected;
+			this.dirtySelected = false;
+		}
+	}
+};
+__decorate([attr({ converter: {
+	fromView: (value) => {
+		if (value === true || value === "true") return true;
+		if (value === false || value === "false") return false;
+	},
+	toView: (value) => value
+} })], ListboxOption.prototype, "checked", void 0);
+__decorate([attr({
+	attribute: "selected",
+	mode: "boolean"
+})], ListboxOption.prototype, "defaultSelected", void 0);
+__decorate([attr({ mode: "boolean" })], ListboxOption.prototype, "disabled", void 0);
+__decorate([attr({
+	attribute: "current-selected",
+	mode: "boolean"
+})], ListboxOption.prototype, "selected", void 0);
+__decorate([attr({ attribute: "value" })], ListboxOption.prototype, "value", void 0);
+__decorate([attr({ attribute: "label" })], ListboxOption.prototype, "_label", void 0);
+__decorate([attr({ attribute: "text" })], ListboxOption.prototype, "_text", void 0);
+__decorate([attr({ attribute: "text-secondary" })], ListboxOption.prototype, "textSecondary", void 0);
+__decorate([observable], ListboxOption.prototype, "_highlighted", void 0);
+__decorate([observable], ListboxOption.prototype, "_displayCheckmark", void 0);
+__decorate([attr({ attribute: "matched-text" })], ListboxOption.prototype, "matchedText", void 0);
+__decorate([observable], ListboxOption.prototype, "_vvdSearchText", void 0);
+__decorate([volatile], ListboxOption.prototype, "_hasMatchedText", null);
+__decorate([observable], ListboxOption.prototype, "_isNotMatching", void 0);
+__decorate([volatile], ListboxOption.prototype, "_matchedRange", null);
+__decorate([attr], ListboxOption.prototype, "connotation", void 0);
+__decorate([attr({ attribute: "tag-connotation" })], ListboxOption.prototype, "tagConnotation", void 0);
+//#endregion
+export { isListboxOption as n, ListboxOption as t };

package/unbundled/time-selection-picker.template.cjs

@@ -452,7 +452,7 @@ var ValidTimeFilter = {
 /**
 * @public
 * @component time-picker
-* @slot helper-text - Describes how to use the time-picker. Alternative to the `helper-text` attribute.
+* @slot helper-text - Describes how to use the Time Picker. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Emitted when the time is changed by the user.
 * @event {CustomEvent<undefined>} change - Emitted when the time is changed by the user.
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`

package/unbundled/time-selection-picker.template.js

@@ -451,7 +451,7 @@ var ValidTimeFilter = {
 /**
 * @public
 * @component time-picker
-* @slot helper-text - Describes how to use the time-picker. Alternative to the `helper-text` attribute.
+* @slot helper-text - Describes how to use the Time Picker. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Emitted when the time is changed by the user.
 * @event {CustomEvent<undefined>} change - Emitted when the time is changed by the user.
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`

package/unbundled/vivid-element.cjs

@@ -287,7 +287,7 @@ var ReplacedPropHandling = (Base) => {
 */
 var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(_microsoft_fast_element.FASTElement))) {
 	static {
-		this.VIVID_VERSION = "5.23.1";
+		this.VIVID_VERSION = "5.25.0";
 	}
 	/**
 	* Add data-vvd-component attribute with component name globally,
@@ -298,6 +298,15 @@ var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControll
 		const name = this.constructor.componentName;
 		this.setAttribute("data-vvd-component", name);
 	}
+	/** @internal */
+	focus(...args) {
+		const controlEl = this.control;
+		if (this.$fastController.definition.shadowOptions?.delegatesFocus && controlEl) {
+			controlEl.focus(...args);
+			return;
+		}
+		super.focus(...args);
+	}
 };
 //#endregion
 Object.defineProperty(exports, "VividElement", {

package/unbundled/vivid-element.js

@@ -286,7 +286,7 @@ var ReplacedPropHandling = (Base) => {
 */
 var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(FASTElement))) {
 	static {
-		this.VIVID_VERSION = "5.23.1";
+		this.VIVID_VERSION = "5.25.0";
 	}
 	/**
 	* Add data-vvd-component attribute with component name globally,
@@ -297,6 +297,15 @@ var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControll
 		const name = this.constructor.componentName;
 		this.setAttribute("data-vvd-component", name);
 	}
+	/** @internal */
+	focus(...args) {
+		const controlEl = this.control;
+		if (this.$fastController.definition.shadowOptions?.delegatesFocus && controlEl) {
+			controlEl.focus(...args);
+			return;
+		}
+		super.focus(...args);
+	}
 };
 //#endregion
 export { ariaValueProperties as a, subscribeToAriaPropertyChanges as c, createRegisterFunction as d, ariaIdrefsProperties as i, unsubscribeFromAriaPropertyChanges as l, replaces as n, handleAriaPropertyChange as o, ariaAttributeName as r, publishAriaPropertyChange as s, VividElement as t, defineVividComponent as u };

package/video-player/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition80.cjs");
+const require_definition = require("../unbundled/definition82.cjs");
 exports.VwcVideoPlayerElement = require_definition.VideoPlayer;
 exports.registerVideoPlayer = require_definition.registerVideoPlayer;
 exports.videoPlayerDefinition = require_definition.videoPlayerDefinition;

package/video-player/definition.js

@@ -1,2 +1,2 @@
-import { n as videoPlayerDefinition, r as VideoPlayer, t as registerVideoPlayer } from "../unbundled/definition80.js";
+import { n as videoPlayerDefinition, r as VideoPlayer, t as registerVideoPlayer } from "../unbundled/definition82.js";
 export { VideoPlayer as VwcVideoPlayerElement, registerVideoPlayer, videoPlayerDefinition };