@vonage/vivid 4.12.1 → 4.14.0

package/shared/start-end.cjs

@@ -1,52 +0,0 @@
-'use strict';
-
-const index = require('./index.cjs');
-const ref = require('./ref.cjs');
-
-/**
- * A mixin class implementing start and end elements.
- * These are generally used to decorate text elements with icons or other visual indicators.
- * @public
- */
-class StartEnd {
-    handleStartContentChange() {
-        this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
-    }
-    handleEndContentChange() {
-        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
-    }
-}
-/**
- * The template for the end element.
- * For use with {@link StartEnd}
- *
- * @public
- * @deprecated - use endSlotTemplate
- */
-index.html `
-    <span part="end" ${ref.ref("endContainer")}>
-        <slot
-            name="end"
-            ${ref.ref("end")}
-            @slotchange="${x => x.handleEndContentChange()}"
-        ></slot>
-    </span>
-`;
-/**
- * The template for the start element.
- * For use with {@link StartEnd}
- *
- * @public
- * @deprecated - use startSlotTemplate
- */
-index.html `
-    <span part="start" ${ref.ref("startContainer")}>
-        <slot
-            name="start"
-            ${ref.ref("start")}
-            @slotchange="${x => x.handleStartContentChange()}"
-        ></slot>
-    </span>
-`;
-
-exports.StartEnd = StartEnd;

package/shared/start-end.js

@@ -1,50 +0,0 @@
-import { h as html } from './index.js';
-import { r as ref } from './ref.js';
-
-/**
- * A mixin class implementing start and end elements.
- * These are generally used to decorate text elements with icons or other visual indicators.
- * @public
- */
-class StartEnd {
-    handleStartContentChange() {
-        this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
-    }
-    handleEndContentChange() {
-        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
-    }
-}
-/**
- * The template for the end element.
- * For use with {@link StartEnd}
- *
- * @public
- * @deprecated - use endSlotTemplate
- */
-html `
-    <span part="end" ${ref("endContainer")}>
-        <slot
-            name="end"
-            ${ref("end")}
-            @slotchange="${x => x.handleEndContentChange()}"
-        ></slot>
-    </span>
-`;
-/**
- * The template for the start element.
- * For use with {@link StartEnd}
- *
- * @public
- * @deprecated - use startSlotTemplate
- */
-html `
-    <span part="start" ${ref("startContainer")}>
-        <slot
-            name="start"
-            ${ref("start")}
-            @slotchange="${x => x.handleStartContentChange()}"
-        ></slot>
-    </span>
-`;
-
-export { StartEnd as S };

package/shared/tree-item.cjs

@@ -1,154 +0,0 @@
-'use strict';
-
-const index = require('./index.cjs');
-const startEnd = require('./start-end.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const dom = require('./dom.cjs');
-
-/**
- * check if the item is a tree item
- * @public
- * @remarks
- * determines if element is an HTMLElement and if it has the role treeitem
- */
-function isTreeItemElement(el) {
-    return dom.isHTMLElement(el) && el.getAttribute("role") === "treeitem";
-}
-/**
- * A Tree item Custom HTML Element.
- *
- * @slot start - Content which can be provided before the tree item content
- * @slot end - Content which can be provided after the tree item content
- * @slot - The default slot for tree item text content
- * @slot item - The slot for tree items (fast tree items manage this assignment themselves)
- * @slot expand-collapse-button - The expand/collapse button
- * @csspart positioning-region - The element used to position the tree item content with exception of any child nodes
- * @csspart content-region - The element containing the expand/collapse, start, and end slots
- * @csspart items - The element wrapping any child items
- * @csspart expand-collapse-button - The expand/collapse button
- * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
- * @fires selected-change - Fires a custom 'selected-change' event when the selected state changes
- *
- * @public
- */
-let TreeItem$1 = class TreeItem extends index.FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * When true, the control will be appear expanded by user interaction.
-         * @public
-         * @remarks
-         * HTML Attribute: expanded
-         */
-        this.expanded = false;
-        /**
-         * Whether the item is focusable
-         *
-         * @internal
-         */
-        this.focusable = false;
-        /**
-         * Whether the tree is nested
-         *
-         * @public
-         */
-        this.isNestedItem = () => {
-            return isTreeItemElement(this.parentElement);
-        };
-        /**
-         * Handle expand button click
-         *
-         * @internal
-         */
-        this.handleExpandCollapseButtonClick = (e) => {
-            if (!this.disabled && !e.defaultPrevented) {
-                this.expanded = !this.expanded;
-            }
-        };
-        /**
-         * Handle focus events
-         *
-         * @internal
-         */
-        this.handleFocus = (e) => {
-            this.setAttribute("tabindex", "0");
-        };
-        /**
-         * Handle blur events
-         *
-         * @internal
-         */
-        this.handleBlur = (e) => {
-            this.setAttribute("tabindex", "-1");
-        };
-    }
-    expandedChanged() {
-        if (this.$fastController.isConnected) {
-            this.$emit("expanded-change", this);
-        }
-    }
-    selectedChanged() {
-        if (this.$fastController.isConnected) {
-            this.$emit("selected-change", this);
-        }
-    }
-    itemsChanged(oldValue, newValue) {
-        if (this.$fastController.isConnected) {
-            this.items.forEach((node) => {
-                if (isTreeItemElement(node)) {
-                    // TODO: maybe not require it to be a TreeItem?
-                    node.nested = true;
-                }
-            });
-        }
-    }
-    /**
-     * Places document focus on a tree item
-     *
-     * @public
-     * @param el - the element to focus
-     */
-    static focusItem(el) {
-        el.focusable = true;
-        el.focus();
-    }
-    /**
-     * Gets number of children
-     *
-     * @internal
-     */
-    childItemLength() {
-        const treeChildren = this.childItems.filter((item) => {
-            return isTreeItemElement(item);
-        });
-        return treeChildren ? treeChildren.length : 0;
-    }
-};
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], TreeItem$1.prototype, "expanded", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], TreeItem$1.prototype, "selected", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], TreeItem$1.prototype, "disabled", void 0);
-index.__decorate([
-    index.observable
-], TreeItem$1.prototype, "focusable", void 0);
-index.__decorate([
-    index.observable
-], TreeItem$1.prototype, "childItems", void 0);
-index.__decorate([
-    index.observable
-], TreeItem$1.prototype, "items", void 0);
-index.__decorate([
-    index.observable
-], TreeItem$1.prototype, "nested", void 0);
-index.__decorate([
-    index.observable
-], TreeItem$1.prototype, "renderCollapsedChildren", void 0);
-applyMixins.applyMixins(TreeItem$1, startEnd.StartEnd);
-
-exports.TreeItem = TreeItem$1;
-exports.isTreeItemElement = isTreeItemElement;

package/shared/tree-item.js

@@ -1,151 +0,0 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
-import { S as StartEnd } from './start-end.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { i as isHTMLElement } from './dom.js';
-
-/**
- * check if the item is a tree item
- * @public
- * @remarks
- * determines if element is an HTMLElement and if it has the role treeitem
- */
-function isTreeItemElement(el) {
-    return isHTMLElement(el) && el.getAttribute("role") === "treeitem";
-}
-/**
- * A Tree item Custom HTML Element.
- *
- * @slot start - Content which can be provided before the tree item content
- * @slot end - Content which can be provided after the tree item content
- * @slot - The default slot for tree item text content
- * @slot item - The slot for tree items (fast tree items manage this assignment themselves)
- * @slot expand-collapse-button - The expand/collapse button
- * @csspart positioning-region - The element used to position the tree item content with exception of any child nodes
- * @csspart content-region - The element containing the expand/collapse, start, and end slots
- * @csspart items - The element wrapping any child items
- * @csspart expand-collapse-button - The expand/collapse button
- * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
- * @fires selected-change - Fires a custom 'selected-change' event when the selected state changes
- *
- * @public
- */
-let TreeItem$1 = class TreeItem extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * When true, the control will be appear expanded by user interaction.
-         * @public
-         * @remarks
-         * HTML Attribute: expanded
-         */
-        this.expanded = false;
-        /**
-         * Whether the item is focusable
-         *
-         * @internal
-         */
-        this.focusable = false;
-        /**
-         * Whether the tree is nested
-         *
-         * @public
-         */
-        this.isNestedItem = () => {
-            return isTreeItemElement(this.parentElement);
-        };
-        /**
-         * Handle expand button click
-         *
-         * @internal
-         */
-        this.handleExpandCollapseButtonClick = (e) => {
-            if (!this.disabled && !e.defaultPrevented) {
-                this.expanded = !this.expanded;
-            }
-        };
-        /**
-         * Handle focus events
-         *
-         * @internal
-         */
-        this.handleFocus = (e) => {
-            this.setAttribute("tabindex", "0");
-        };
-        /**
-         * Handle blur events
-         *
-         * @internal
-         */
-        this.handleBlur = (e) => {
-            this.setAttribute("tabindex", "-1");
-        };
-    }
-    expandedChanged() {
-        if (this.$fastController.isConnected) {
-            this.$emit("expanded-change", this);
-        }
-    }
-    selectedChanged() {
-        if (this.$fastController.isConnected) {
-            this.$emit("selected-change", this);
-        }
-    }
-    itemsChanged(oldValue, newValue) {
-        if (this.$fastController.isConnected) {
-            this.items.forEach((node) => {
-                if (isTreeItemElement(node)) {
-                    // TODO: maybe not require it to be a TreeItem?
-                    node.nested = true;
-                }
-            });
-        }
-    }
-    /**
-     * Places document focus on a tree item
-     *
-     * @public
-     * @param el - the element to focus
-     */
-    static focusItem(el) {
-        el.focusable = true;
-        el.focus();
-    }
-    /**
-     * Gets number of children
-     *
-     * @internal
-     */
-    childItemLength() {
-        const treeChildren = this.childItems.filter((item) => {
-            return isTreeItemElement(item);
-        });
-        return treeChildren ? treeChildren.length : 0;
-    }
-};
-__decorate([
-    attr({ mode: "boolean" })
-], TreeItem$1.prototype, "expanded", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], TreeItem$1.prototype, "selected", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], TreeItem$1.prototype, "disabled", void 0);
-__decorate([
-    observable
-], TreeItem$1.prototype, "focusable", void 0);
-__decorate([
-    observable
-], TreeItem$1.prototype, "childItems", void 0);
-__decorate([
-    observable
-], TreeItem$1.prototype, "items", void 0);
-__decorate([
-    observable
-], TreeItem$1.prototype, "nested", void 0);
-__decorate([
-    observable
-], TreeItem$1.prototype, "renderCollapsedChildren", void 0);
-applyMixins(TreeItem$1, StartEnd);
-
-export { TreeItem$1 as T, isTreeItemElement as i };