@vonage/vivid 3.51.0 → 3.52.0

package/shared/definition59.cjs

@@ -1,51 +1,309 @@
 'use strict';
 
 const index = require('./index.cjs');
+const treeItem = require('./tree-item.cjs');
+const dom = require('./dom.cjs');
+const keyCodes = require('./key-codes.cjs');
+const ref = require('./ref.cjs');
+const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
-  return result;
+/**
+ * A Tree view Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria-practices/#TreeView | ARIA TreeView }.
+ *
+ * @slot - The default slot for tree items
+ *
+ * @public
+ */
+let TreeView$1 = class TreeView extends index.FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The tree item that is designated to be in the tab queue.
+         *
+         * @internal
+         */
+        this.currentFocused = null;
+        /**
+         * Handle focus events
+         *
+         * @internal
+         */
+        this.handleFocus = (e) => {
+            if (this.slottedTreeItems.length < 1) {
+                // no child items, nothing to do
+                return;
+            }
+            if (e.target === this) {
+                if (this.currentFocused === null) {
+                    this.currentFocused = this.getValidFocusableItem();
+                }
+                if (this.currentFocused !== null) {
+                    treeItem.TreeItem.focusItem(this.currentFocused);
+                }
+                return;
+            }
+            if (this.contains(e.target)) {
+                this.setAttribute("tabindex", "-1");
+                this.currentFocused = e.target;
+            }
+        };
+        /**
+         * Handle blur events
+         *
+         * @internal
+         */
+        this.handleBlur = (e) => {
+            if (e.target instanceof HTMLElement &&
+                (e.relatedTarget === null || !this.contains(e.relatedTarget))) {
+                this.setAttribute("tabindex", "0");
+            }
+        };
+        /**
+         * KeyDown handler
+         *
+         *  @internal
+         */
+        this.handleKeyDown = (e) => {
+            if (e.defaultPrevented) {
+                return;
+            }
+            if (this.slottedTreeItems.length < 1) {
+                return true;
+            }
+            const treeItems = this.getVisibleNodes();
+            switch (e.key) {
+                case keyCodes.keyHome:
+                    if (treeItems.length) {
+                        treeItem.TreeItem.focusItem(treeItems[0]);
+                    }
+                    return;
+                case keyCodes.keyEnd:
+                    if (treeItems.length) {
+                        treeItem.TreeItem.focusItem(treeItems[treeItems.length - 1]);
+                    }
+                    return;
+                case keyCodes.keyArrowLeft:
+                    if (e.target && this.isFocusableElement(e.target)) {
+                        const item = e.target;
+                        if (item instanceof treeItem.TreeItem &&
+                            item.childItemLength() > 0 &&
+                            item.expanded) {
+                            item.expanded = false;
+                        }
+                        else if (item instanceof treeItem.TreeItem &&
+                            item.parentElement instanceof treeItem.TreeItem) {
+                            treeItem.TreeItem.focusItem(item.parentElement);
+                        }
+                    }
+                    return false;
+                case keyCodes.keyArrowRight:
+                    if (e.target && this.isFocusableElement(e.target)) {
+                        const item = e.target;
+                        if (item instanceof treeItem.TreeItem &&
+                            item.childItemLength() > 0 &&
+                            !item.expanded) {
+                            item.expanded = true;
+                        }
+                        else if (item instanceof treeItem.TreeItem && item.childItemLength() > 0) {
+                            this.focusNextNode(1, e.target);
+                        }
+                    }
+                    return;
+                case keyCodes.keyArrowDown:
+                    if (e.target && this.isFocusableElement(e.target)) {
+                        this.focusNextNode(1, e.target);
+                    }
+                    return;
+                case keyCodes.keyArrowUp:
+                    if (e.target && this.isFocusableElement(e.target)) {
+                        this.focusNextNode(-1, e.target);
+                    }
+                    return;
+                case keyCodes.keyEnter:
+                    // In single-select trees where selection does not follow focus (see note below),
+                    // the default action is typically to select the focused node.
+                    this.handleClick(e);
+                    return;
+            }
+            // don't prevent default if we took no action
+            return true;
+        };
+        /**
+         * Handles the selected-changed events bubbling up
+         * from child tree items
+         *
+         *  @internal
+         */
+        this.handleSelectedChange = (e) => {
+            if (e.defaultPrevented) {
+                return;
+            }
+            if (!(e.target instanceof Element) || !treeItem.isTreeItemElement(e.target)) {
+                return true;
+            }
+            const item = e.target;
+            if (item.selected) {
+                if (this.currentSelected && this.currentSelected !== item) {
+                    this.currentSelected.selected = false;
+                }
+                // new selected item
+                this.currentSelected = item;
+            }
+            else if (!item.selected && this.currentSelected === item) {
+                // selected item deselected
+                this.currentSelected = null;
+            }
+            return;
+        };
+        /**
+         * Updates the tree view when slottedTreeItems changes
+         */
+        this.setItems = () => {
+            // force single selection
+            // defaults to first one found
+            const selectedItem = this.treeView.querySelector("[aria-selected='true']");
+            this.currentSelected = selectedItem;
+            // invalidate the current focused item if it is no longer valid
+            if (this.currentFocused === null || !this.contains(this.currentFocused)) {
+                this.currentFocused = this.getValidFocusableItem();
+            }
+            // toggle properties on child elements
+            this.nested = this.checkForNestedItems();
+            const treeItems = this.getVisibleNodes();
+            treeItems.forEach(node => {
+                if (treeItem.isTreeItemElement(node)) {
+                    node.nested = this.nested;
+                }
+            });
+        };
+        /**
+         * check if the item is focusable
+         */
+        this.isFocusableElement = (el) => {
+            return treeItem.isTreeItemElement(el);
+        };
+        this.isSelectedElement = (el) => {
+            return el.selected;
+        };
+    }
+    slottedTreeItemsChanged() {
+        if (this.$fastController.isConnected) {
+            // update for slotted children change
+            this.setItems();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("tabindex", "0");
+        index.DOM.queueUpdate(() => {
+            this.setItems();
+        });
+    }
+    /**
+     * Handles click events bubbling up
+     *
+     *  @internal
+     */
+    handleClick(e) {
+        if (e.defaultPrevented) {
+            // handled, do nothing
+            return;
+        }
+        if (!(e.target instanceof Element) || !treeItem.isTreeItemElement(e.target)) {
+            // not a tree item, ignore
+            return true;
+        }
+        const item = e.target;
+        if (!item.disabled) {
+            item.selected = !item.selected;
+        }
+        return;
+    }
+    /**
+     * Move focus to a tree item based on its offset from the provided item
+     */
+    focusNextNode(delta, item) {
+        const visibleNodes = this.getVisibleNodes();
+        if (!visibleNodes) {
+            return;
+        }
+        const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
+        if (dom.isHTMLElement(focusItem)) {
+            treeItem.TreeItem.focusItem(focusItem);
+        }
+    }
+    /**
+     * checks if there are any nested tree items
+     */
+    getValidFocusableItem() {
+        const treeItems = this.getVisibleNodes();
+        // default to selected element if there is one
+        let focusIndex = treeItems.findIndex(this.isSelectedElement);
+        if (focusIndex === -1) {
+            // otherwise first focusable tree item
+            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 treeItem.isTreeItemElement(node) && node.querySelector("[role='treeitem']");
+        });
+    }
+    getVisibleNodes() {
+        return dom.getDisplayedNodes(this, "[role='treeitem']") || [];
+    }
 };
-class Elevation extends index.FoundationElement {
+index.__decorate([
+    index.attr({ attribute: "render-collapsed-nodes" })
+], TreeView$1.prototype, "renderCollapsedNodes", void 0);
+index.__decorate([
+    index.observable
+], TreeView$1.prototype, "currentSelected", void 0);
+index.__decorate([
+    index.observable
+], TreeView$1.prototype, "slottedTreeItems", void 0);
+
+const styles = ".control{position:relative;display:flex;flex-direction:column;gap:4px}\n";
+
+class TreeView extends TreeView$1 {
 }
-__decorateClass([
-  index.attr
-], Elevation.prototype, "dp", 2);
-__decorateClass([
-  index.attr({ attribute: "no-shadow", mode: "boolean" })
-], Elevation.prototype, "noShadow", 2);
 
-const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp)}.control.dp-4{--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp)}.control.dp-8{--_elevation-fill: var(--vvd-color-surface-8dp);--_elevation-shadow: var(--vvd-shadow-surface-8dp)}.control.dp-12{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control.dp-16{--_elevation-fill: var(--vvd-color-surface-16dp);--_elevation-shadow: var(--vvd-shadow-surface-16dp)}.control.dp-24{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--vvd-color-surface-2dp);--_elevation-shadow: var(--vvd-shadow-surface-2dp)}.control ::slotted(*){position:relative;isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;background:var(--_elevation-fill);block-size:100%;border-radius:inherit;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control.no-shadow ::slotted(*):before{filter:none}\n";
+const getClasses = (_) => classNames.classNames("control");
+const TreeViewTemplate = () => {
+  return index.html` <template
+		role="tree"
+		${ref.ref("treeView")}
+		@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.slotted("slottedTreeItems")}></slot>
+		</div>
+	</template>`;
+};
 
-const getClasses = ({
-  dp,
-  noShadow
-}) => classNames.classNames(
-  "control",
-  [`dp-${dp}`, Boolean(dp)],
-  ["no-shadow", Boolean(noShadow)]
+const treeViewDefinition = TreeView.compose(
+  {
+    baseName: "tree-view",
+    template: TreeViewTemplate,
+    styles
+  }
 );
-const elevationTemplate = () => index.html`
-        <div class="${getClasses}" part="base">
-			<slot></slot>
-		</div>`;
-
-const elevationDefinition = Elevation.compose({
-  baseName: "elevation",
-  template: elevationTemplate,
-  styles
-});
-const elevationRegistries = [elevationDefinition()];
-const registerElevation = index.registerFactory(elevationRegistries);
+const treeViewRegistries = [treeViewDefinition()];
+const registerTreeView = index.registerFactory(treeViewRegistries);
 
-exports.Elevation = Elevation;
-exports.elevationRegistries = elevationRegistries;
-exports.registerElevation = registerElevation;
+exports.registerTreeView = registerTreeView;
+exports.treeViewDefinition = treeViewDefinition;
+exports.treeViewRegistries = treeViewRegistries;