@vonage/vivid 5.23.1 → 5.25.0

package/unbundled/definition81.cjs

@@ -0,0 +1,221 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+const require_definition = require("./definition80.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/tree-view/tree-view.scss?inline
+var tree_view_default = ".control{flex-direction:column;gap:4px;display:flex;position:relative}";
+//#endregion
+//#region src/lib/tree-view/tree-view.ts
+function getDisplayedNodes(rootNode, selector) {
+	if ((0, _microsoft_fast_web_utilities.isHTMLElement)(rootNode)) return Array.from(rootNode.querySelectorAll(selector)).filter((node) => {
+		if (node.parentElement instanceof require_definition.TreeItem) {
+			if (node.parentElement.expanded) return true;
+		} else return true;
+		return false;
+	});
+	return [];
+}
+/**
+* @public
+* @component tree-view
+* @slot - Default slot.
+*/
+var TreeView = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.currentFocused = null;
+		this.handleFocus = (e) => {
+			if (this.slottedTreeItems.length > 0) {
+				if (e.target === this) {
+					/* v8 ignore else -- @preserve */
+					if (this.currentFocused !== null) require_definition.TreeItem.focusItem(this.currentFocused);
+					return;
+				}
+				/* v8 ignore else -- @preserve */
+				if (this.contains(e.target)) {
+					this.setAttribute("tabindex", "-1");
+					this.currentFocused = e.target;
+				}
+			}
+		};
+		this.handleBlur = (e) => {
+			if (e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget))) this.setAttribute("tabindex", "0");
+		};
+		this.handleKeyDown = (e) => {
+			if (this.slottedTreeItems.length < 1) return true;
+			/* v8 ignore else -- @preserve */
+			if (!e.defaultPrevented) {
+				const treeItems = this.getVisibleNodes();
+				switch (e.key) {
+					case _microsoft_fast_web_utilities.keyHome:
+						/* v8 ignore else -- @preserve */
+						if (treeItems.length) require_definition.TreeItem.focusItem(treeItems[0]);
+						return;
+					case _microsoft_fast_web_utilities.keyEnd:
+						/* v8 ignore else -- @preserve */
+						if (treeItems.length) require_definition.TreeItem.focusItem(treeItems[treeItems.length - 1]);
+						return;
+					case _microsoft_fast_web_utilities.keyArrowLeft:
+						/* v8 ignore else -- @preserve */
+						if (e.target && this.isFocusableElement(e.target)) {
+							const item = e.target;
+							/* v8 ignore else -- @preserve */
+							if (item instanceof require_definition.TreeItem && item.childItemLength() > 0 && item.expanded) item.expanded = false;
+							else if (item instanceof require_definition.TreeItem && item.parentElement instanceof require_definition.TreeItem) require_definition.TreeItem.focusItem(item.parentElement);
+						}
+						return false;
+					case _microsoft_fast_web_utilities.keyArrowRight:
+						/* v8 ignore else -- @preserve */
+						if (e.target && this.isFocusableElement(e.target)) {
+							const item = e.target;
+							/* v8 ignore else -- @preserve */
+							if (item instanceof require_definition.TreeItem && item.childItemLength() > 0 && !item.expanded) item.expanded = true;
+							else if (item instanceof require_definition.TreeItem && item.childItemLength() > 0) this.focusNextNode(1, e.target);
+						}
+						return;
+					case _microsoft_fast_web_utilities.keyArrowDown:
+						/* v8 ignore else -- @preserve */
+						if (e.target && this.isFocusableElement(e.target)) this.focusNextNode(1, e.target);
+						return;
+					case _microsoft_fast_web_utilities.keyArrowUp:
+						/* v8 ignore else -- @preserve */
+						if (e.target && this.isFocusableElement(e.target)) this.focusNextNode(-1, e.target);
+						return;
+					case _microsoft_fast_web_utilities.keyEnter:
+						this.handleClick(e);
+						return;
+				}
+			}
+			return true;
+		};
+		this.handleSelectedChange = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (!e.defaultPrevented) {
+				if (!(e.target instanceof Element) || !require_definition.isTreeItemElement(e.target)) return true;
+				const item = e.target;
+				/* v8 ignore else -- @preserve */
+				if (item.selected) {
+					if (this.currentSelected && this.currentSelected !== item) this.currentSelected.selected = false;
+					this.currentSelected = item;
+				} else if (!item.selected && this.currentSelected === item) this.currentSelected = null;
+			}
+		};
+		this.setItems = () => {
+			const selectedItem = this.treeView.querySelector("[selected]");
+			this.currentSelected = selectedItem;
+			if (this.currentFocused === null || !this.contains(this.currentFocused)) this.currentFocused = this.getValidFocusableItem();
+			this.nested = this.checkForNestedItems();
+			this.getVisibleNodes().forEach((node) => {
+				/* v8 ignore else -- @preserve */
+				if (require_definition.isTreeItemElement(node)) node.nested = this.nested;
+			});
+		};
+		this.isFocusableElement = (el) => {
+			return require_definition.isTreeItemElement(el);
+		};
+		this.isSelectedElement = (el) => {
+			return el.selected;
+		};
+	}
+	/** @internal */
+	slottedTreeItemsChanged() {
+		if (this.$fastController.isConnected) this.setItems();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("tabindex", "0");
+		_microsoft_fast_element.Updates.enqueue(() => {
+			this.setItems();
+		});
+	}
+	/**
+	* Handles click events bubbling up
+	*
+	*  @internal
+	*/
+	handleClick(e) {
+		if (!e.defaultPrevented) {
+			if (!(e.target instanceof Element) || !require_definition.isTreeItemElement(e.target)) return true;
+			const item = e.target;
+			if (!item.disabled) item.selected = !item.selected;
+		}
+	}
+	/** Move focus to a tree item based on its offset from the provided item */
+	focusNextNode(delta, item) {
+		const visibleNodes = this.getVisibleNodes();
+		/* v8 ignore else -- @preserve */
+		if (visibleNodes) {
+			const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
+			/* v8 ignore else -- @preserve */
+			if ((0, _microsoft_fast_web_utilities.isHTMLElement)(focusItem)) require_definition.TreeItem.focusItem(focusItem);
+		}
+	}
+	/** checks if there are any nested tree items */
+	getValidFocusableItem() {
+		const treeItems = this.getVisibleNodes();
+		let focusIndex = treeItems.findIndex(this.isSelectedElement);
+		if (focusIndex === -1) focusIndex = treeItems.findIndex(this.isFocusableElement);
+		if (focusIndex !== -1) return treeItems[focusIndex];
+		return null;
+	}
+	/** checks if there are any nested tree items */
+	checkForNestedItems() {
+		return this.slottedTreeItems.some((node) => {
+			return require_definition.isTreeItemElement(node) && node.querySelector("[data-vvd-component='tree-item']");
+		});
+	}
+	getVisibleNodes() {
+		return getDisplayedNodes(this, "[data-vvd-component='tree-item']");
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "render-collapsed-nodes" })], TreeView.prototype, "renderCollapsedNodes", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], TreeView.prototype, "currentSelected", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], TreeView.prototype, "slottedTreeItems", void 0);
+//#endregion
+//#region src/lib/tree-view/tree-view.template.ts
+var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
+var TreeViewTemplate = _microsoft_fast_element.html` <template
+	${(0, _microsoft_fast_element.ref)("treeView")}
+	${require_host_semantics.applyHostSemantics({ role: "tree" })}
+	@keydown="${(x, c) => x.handleKeyDown(c.event)}"
+	@focusin="${(x, c) => x.handleFocus(c.event)}"
+	@focusout="${(x, c) => x.handleBlur(c.event)}"
+	@click="${(x, c) => x.handleClick(c.event)}"
+	@selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
+>
+	<div class="${getClasses}">
+		<slot ${(0, _microsoft_fast_element.slotted)("slottedTreeItems")}></slot>
+	</div>
+</template>`;
+//#endregion
+//#region src/lib/tree-view/definition.ts
+/** @internal */
+var treeViewDefinition = require_vivid_element.defineVividComponent("tree-view", TreeView, TreeViewTemplate, [require_definition.treeItemDefinition], { styles: tree_view_default });
+/**
+* Registers the tree-view element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerTreeView = require_vivid_element.createRegisterFunction(treeViewDefinition);
+//#endregion
+Object.defineProperty(exports, "TreeView", {
+	enumerable: true,
+	get: function() {
+		return TreeView;
+	}
+});
+Object.defineProperty(exports, "registerTreeView", {
+	enumerable: true,
+	get: function() {
+		return registerTreeView;
+	}
+});
+Object.defineProperty(exports, "treeViewDefinition", {
+	enumerable: true,
+	get: function() {
+		return treeViewDefinition;
+	}
+});

package/unbundled/definition81.js

@@ -0,0 +1,202 @@
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
+import { i as isTreeItemElement, n as treeItemDefinition, r as TreeItem } from "./definition80.js";
+import { Updates, attr, html, observable, ref, slotted } from "@microsoft/fast-element";
+import { classNames, isHTMLElement, keyArrowDown, keyArrowLeft, keyArrowRight, keyArrowUp, keyEnd, keyEnter, keyHome } from "@microsoft/fast-web-utilities";
+//#region src/lib/tree-view/tree-view.scss?inline
+var tree_view_default = ".control{flex-direction:column;gap:4px;display:flex;position:relative}";
+//#endregion
+//#region src/lib/tree-view/tree-view.ts
+function getDisplayedNodes(rootNode, selector) {
+	if (isHTMLElement(rootNode)) return Array.from(rootNode.querySelectorAll(selector)).filter((node) => {
+		if (node.parentElement instanceof TreeItem) {
+			if (node.parentElement.expanded) return true;
+		} else return true;
+		return false;
+	});
+	return [];
+}
+/**
+* @public
+* @component tree-view
+* @slot - Default slot.
+*/
+var TreeView = class extends HostSemantics(VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.currentFocused = null;
+		this.handleFocus = (e) => {
+			if (this.slottedTreeItems.length > 0) {
+				if (e.target === this) {
+					/* v8 ignore else -- @preserve */
+					if (this.currentFocused !== null) TreeItem.focusItem(this.currentFocused);
+					return;
+				}
+				/* v8 ignore else -- @preserve */
+				if (this.contains(e.target)) {
+					this.setAttribute("tabindex", "-1");
+					this.currentFocused = e.target;
+				}
+			}
+		};
+		this.handleBlur = (e) => {
+			if (e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget))) this.setAttribute("tabindex", "0");
+		};
+		this.handleKeyDown = (e) => {
+			if (this.slottedTreeItems.length < 1) return true;
+			/* v8 ignore else -- @preserve */
+			if (!e.defaultPrevented) {
+				const treeItems = this.getVisibleNodes();
+				switch (e.key) {
+					case keyHome:
+						/* v8 ignore else -- @preserve */
+						if (treeItems.length) TreeItem.focusItem(treeItems[0]);
+						return;
+					case keyEnd:
+						/* v8 ignore else -- @preserve */
+						if (treeItems.length) TreeItem.focusItem(treeItems[treeItems.length - 1]);
+						return;
+					case keyArrowLeft:
+						/* v8 ignore else -- @preserve */
+						if (e.target && this.isFocusableElement(e.target)) {
+							const item = e.target;
+							/* v8 ignore else -- @preserve */
+							if (item instanceof TreeItem && item.childItemLength() > 0 && item.expanded) item.expanded = false;
+							else if (item instanceof TreeItem && item.parentElement instanceof TreeItem) TreeItem.focusItem(item.parentElement);
+						}
+						return false;
+					case keyArrowRight:
+						/* v8 ignore else -- @preserve */
+						if (e.target && this.isFocusableElement(e.target)) {
+							const item = e.target;
+							/* v8 ignore else -- @preserve */
+							if (item instanceof TreeItem && item.childItemLength() > 0 && !item.expanded) item.expanded = true;
+							else if (item instanceof TreeItem && item.childItemLength() > 0) this.focusNextNode(1, e.target);
+						}
+						return;
+					case keyArrowDown:
+						/* v8 ignore else -- @preserve */
+						if (e.target && this.isFocusableElement(e.target)) this.focusNextNode(1, e.target);
+						return;
+					case keyArrowUp:
+						/* v8 ignore else -- @preserve */
+						if (e.target && this.isFocusableElement(e.target)) this.focusNextNode(-1, e.target);
+						return;
+					case keyEnter:
+						this.handleClick(e);
+						return;
+				}
+			}
+			return true;
+		};
+		this.handleSelectedChange = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (!e.defaultPrevented) {
+				if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) return true;
+				const item = e.target;
+				/* v8 ignore else -- @preserve */
+				if (item.selected) {
+					if (this.currentSelected && this.currentSelected !== item) this.currentSelected.selected = false;
+					this.currentSelected = item;
+				} else if (!item.selected && this.currentSelected === item) this.currentSelected = null;
+			}
+		};
+		this.setItems = () => {
+			const selectedItem = this.treeView.querySelector("[selected]");
+			this.currentSelected = selectedItem;
+			if (this.currentFocused === null || !this.contains(this.currentFocused)) this.currentFocused = this.getValidFocusableItem();
+			this.nested = this.checkForNestedItems();
+			this.getVisibleNodes().forEach((node) => {
+				/* v8 ignore else -- @preserve */
+				if (isTreeItemElement(node)) node.nested = this.nested;
+			});
+		};
+		this.isFocusableElement = (el) => {
+			return isTreeItemElement(el);
+		};
+		this.isSelectedElement = (el) => {
+			return el.selected;
+		};
+	}
+	/** @internal */
+	slottedTreeItemsChanged() {
+		if (this.$fastController.isConnected) this.setItems();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("tabindex", "0");
+		Updates.enqueue(() => {
+			this.setItems();
+		});
+	}
+	/**
+	* Handles click events bubbling up
+	*
+	*  @internal
+	*/
+	handleClick(e) {
+		if (!e.defaultPrevented) {
+			if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) return true;
+			const item = e.target;
+			if (!item.disabled) item.selected = !item.selected;
+		}
+	}
+	/** Move focus to a tree item based on its offset from the provided item */
+	focusNextNode(delta, item) {
+		const visibleNodes = this.getVisibleNodes();
+		/* v8 ignore else -- @preserve */
+		if (visibleNodes) {
+			const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
+			/* v8 ignore else -- @preserve */
+			if (isHTMLElement(focusItem)) TreeItem.focusItem(focusItem);
+		}
+	}
+	/** checks if there are any nested tree items */
+	getValidFocusableItem() {
+		const treeItems = this.getVisibleNodes();
+		let focusIndex = treeItems.findIndex(this.isSelectedElement);
+		if (focusIndex === -1) focusIndex = treeItems.findIndex(this.isFocusableElement);
+		if (focusIndex !== -1) return treeItems[focusIndex];
+		return null;
+	}
+	/** checks if there are any nested tree items */
+	checkForNestedItems() {
+		return this.slottedTreeItems.some((node) => {
+			return isTreeItemElement(node) && node.querySelector("[data-vvd-component='tree-item']");
+		});
+	}
+	getVisibleNodes() {
+		return getDisplayedNodes(this, "[data-vvd-component='tree-item']");
+	}
+};
+__decorate([attr({ attribute: "render-collapsed-nodes" })], TreeView.prototype, "renderCollapsedNodes", void 0);
+__decorate([observable], TreeView.prototype, "currentSelected", void 0);
+__decorate([observable], TreeView.prototype, "slottedTreeItems", void 0);
+//#endregion
+//#region src/lib/tree-view/tree-view.template.ts
+var getClasses = (_) => classNames("control");
+//#endregion
+//#region src/lib/tree-view/definition.ts
+/** @internal */
+var treeViewDefinition = defineVividComponent("tree-view", TreeView, html` <template
+	${ref("treeView")}
+	${applyHostSemantics({ role: "tree" })}
+	@keydown="${(x, c) => x.handleKeyDown(c.event)}"
+	@focusin="${(x, c) => x.handleFocus(c.event)}"
+	@focusout="${(x, c) => x.handleBlur(c.event)}"
+	@click="${(x, c) => x.handleClick(c.event)}"
+	@selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
+>
+	<div class="${getClasses}">
+		<slot ${slotted("slottedTreeItems")}></slot>
+	</div>
+</template>`, [treeItemDefinition], { styles: tree_view_default });
+/**
+* Registers the tree-view element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerTreeView = createRegisterFunction(treeViewDefinition);
+//#endregion
+export { treeViewDefinition as n, TreeView as r, registerTreeView as t };