@vonage/vivid 5.24.0 → 5.27.0

package/unbundled/option.cjs

@@ -0,0 +1,183 @@
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_affix = require("./affix.cjs");
+const require_component_enum = require("./component-enum.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/option/option.ts
+var optionConnotation = require_component_enum.componentEnum(["accent", "cta"], "accent");
+/**
+* Determines if the element is a {@link (ListboxOption:class)}
+*
+* @param element - the element to test.
+*/
+function isListboxOption(el) {
+	return (0, _microsoft_fast_web_utilities.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 require_host_semantics.HostSemantics(require_affix.AffixIconWithTrailing(require_vivid_element.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;
+		}
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.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);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "selected",
+	mode: "boolean"
+})], ListboxOption.prototype, "defaultSelected", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], ListboxOption.prototype, "disabled", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "current-selected",
+	mode: "boolean"
+})], ListboxOption.prototype, "selected", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "value" })], ListboxOption.prototype, "value", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "label" })], ListboxOption.prototype, "_label", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "text" })], ListboxOption.prototype, "_text", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "text-secondary" })], ListboxOption.prototype, "textSecondary", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_highlighted", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_displayCheckmark", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "matched-text" })], ListboxOption.prototype, "matchedText", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_vvdSearchText", void 0);
+require_decorate.__decorate([_microsoft_fast_element.volatile], ListboxOption.prototype, "_hasMatchedText", null);
+require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_isNotMatching", void 0);
+require_decorate.__decorate([_microsoft_fast_element.volatile], ListboxOption.prototype, "_matchedRange", null);
+require_decorate.__decorate([_microsoft_fast_element.attr], ListboxOption.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "tag-connotation" })], ListboxOption.prototype, "tagConnotation", void 0);
+//#endregion
+Object.defineProperty(exports, "ListboxOption", {
+	enumerable: true,
+	get: function() {
+		return ListboxOption;
+	}
+});
+Object.defineProperty(exports, "isListboxOption", {
+	enumerable: true,
+	get: function() {
+		return isListboxOption;
+	}
+});
+Object.defineProperty(exports, "optionConnotation", {
+	enumerable: true,
+	get: function() {
+		return optionConnotation;
+	}
+});

package/unbundled/option.js

@@ -0,0 +1,166 @@
+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 componentEnum } from "./component-enum.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
+var optionConnotation = componentEnum(["accent", "cta"], "accent");
+/**
+* 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, optionConnotation as r, ListboxOption as t };

package/unbundled/picker-field.template.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_form_associated = require("./form-associated.cjs");
@@ -6,9 +5,9 @@ const require_localized = require("./localized.cjs");
 const require_definition = require("./definition6.cjs");
 const require_dialog = require("./dialog.cjs");
 const require_definition$1 = require("./definition9.cjs");
-const require_mixins = require("./mixins.cjs");
 const require_form_element = require("./form-element.cjs");
 const require_with_error_text = require("./with-error-text.cjs");
+const require_mixins = require("./mixins.cjs");
 const require_with_contextual_help = require("./with-contextual-help.cjs");
 const require_definition$2 = require("./definition26.cjs");
 const require_trapped_focus = require("./trapped-focus.cjs");

package/unbundled/picker-field.template.js

@@ -5,9 +5,9 @@ import { t as Localized } from "./localized.js";
 import { i as Button } from "./definition6.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
 import { i as Popup } from "./definition9.js";
-import { t as WithFeedback } from "./mixins.js";
 import { t as FormElement } from "./form-element.js";
 import { t as WithErrorText } from "./with-error-text.js";
+import { t as WithFeedback } from "./mixins.js";
 import { t as WithContextualHelp } from "./with-contextual-help.js";
 import { r as TextField } from "./definition26.js";
 import { t as TrappedFocus } from "./trapped-focus.js";

package/unbundled/randomId.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let uuid = require("uuid");
 //#region src/shared/templating/render-in-light-dom.ts

package/unbundled/{chunk.cjs → rolldown-runtime.cjs}

@@ -24,7 +24,7 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
 	value: mod,
 	enumerable: true
 }) : target, mod));

package/unbundled/scrollIntoView.cjs

@@ -8,7 +8,6 @@ function scrollIntoView(element, parent, position) {
 		case "nearest":
 			if (offsetTop < parent.scrollTop) parent.scrollTop = offsetTop;
 			if (offsetTop + element.offsetHeight > parent.scrollTop + parent.offsetHeight) parent.scrollTop = offsetTop + element.offsetHeight - parent.offsetHeight;
-			break;
 	}
 }
 function flatTreeOffsetTop(element) {

package/unbundled/scrollIntoView.js

@@ -8,7 +8,6 @@ function scrollIntoView(element, parent, position) {
 		case "nearest":
 			if (offsetTop < parent.scrollTop) parent.scrollTop = offsetTop;
 			if (offsetTop + element.offsetHeight > parent.scrollTop + parent.offsetHeight) parent.scrollTop = offsetTop + element.offsetHeight - parent.offsetHeight;
-			break;
 	}
 }
 function flatTreeOffsetTop(element) {