@vonage/vivid 4.13.0 → 4.14.0

package/shared/radio.js

@@ -1,124 +0,0 @@
-import { C as CheckableFormAssociated } from './form-associated.js';
-import { F as FoundationElement, a as attr, o as observable } from './index.js';
-import { k as keySpace } from './key-codes.js';
-
-class _Radio extends FoundationElement {
-}
-class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Radio extends FormAssociatedRadio {
-  constructor() {
-    super();
-    this.ariaLabel = null;
-    /**
-     * The element's value to be included in form submission when checked.
-     * Default to "on" to reach parity with input[type="radio"]
-     *
-     * @internal
-     */
-    this.initialValue = "on";
-    this.defaultSlottedNodes = [];
-    /**
-     * @internal
-     */
-    this.keypressHandler = (e) => {
-      switch (e.key) {
-        case keySpace:
-          if (!this.checked && !this.readOnly) {
-            this.checked = true;
-          }
-          return;
-      }
-      return true;
-    };
-    this.proxy.setAttribute("type", "radio");
-  }
-  // Map to proxy element
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-    }
-  }
-  /**
-   * @internal
-   */
-  defaultCheckedChanged() {
-    if (this.$fastController.isConnected && !this.dirtyChecked) {
-      if (!this.isInsideRadioGroup()) {
-        this.checked = this.defaultChecked;
-        this.dirtyChecked = false;
-      }
-    }
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.validate();
-    if (this.parentElement.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
-      if (!this.disabled) {
-        this.setAttribute("tabindex", "0");
-      }
-    }
-    if (this.checkedAttribute) {
-      if (!this.dirtyChecked) {
-        if (!this.isInsideRadioGroup()) {
-          this.checked = this.defaultChecked;
-          this.dirtyChecked = false;
-        }
-      }
-    }
-  }
-  isInsideRadioGroup() {
-    const parent = this.closest(
-      "[role=radiogroup]"
-    );
-    return parent !== null;
-  }
-  /**
-   * @internal
-   */
-  clickHandler(_) {
-    if (!this.disabled && !this.readOnly && !this.checked) {
-      this.checked = true;
-    }
-  }
-}
-__decorateClass([
-  attr({ attribute: "aria-label" })
-], Radio.prototype, "ariaLabel");
-__decorateClass([
-  attr
-], Radio.prototype, "label");
-__decorateClass([
-  attr
-], Radio.prototype, "connotation");
-__decorateClass([
-  attr({ attribute: "readonly", mode: "boolean" })
-], Radio.prototype, "readOnly");
-__decorateClass([
-  observable
-], Radio.prototype, "name");
-__decorateClass([
-  observable
-], Radio.prototype, "defaultSlottedNodes");
-
-export { Radio as R };

package/shared/select.options.cjs

@@ -1,12 +0,0 @@
-'use strict';
-
-/**
- * Positioning directions for the listbox when a select is open.
- * @public
- */
-const SelectPosition = {
-    above: "above",
-    below: "below",
-};
-
-exports.SelectPosition = SelectPosition;

package/shared/select.options.js

@@ -1,10 +0,0 @@
-/**
- * Positioning directions for the listbox when a select is open.
- * @public
- */
-const SelectPosition = {
-    above: "above",
-    below: "below",
-};
-
-export { SelectPosition as S };

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 };

package/shared/{localization.cjs → direction.cjs}

@@ -1,5 +1,14 @@
 'use strict';
 
+/**
+ * Expose ltr and rtl strings
+ */
+exports.Direction = void 0;
+(function (Direction) {
+    Direction["ltr"] = "ltr";
+    Direction["rtl"] = "rtl";
+})(exports.Direction || (exports.Direction = {}));
+
 /**
  * Expose ltr and rtl strings
  */
@@ -19,13 +28,4 @@ const getDirection = (rootNode) => {
     return dirNode !== null && dirNode.dir === "rtl" ? Direction.rtl : Direction.ltr;
 };
 
-/**
- * Expose ltr and rtl strings
- */
-exports.Direction = void 0;
-(function (Direction) {
-    Direction["ltr"] = "ltr";
-    Direction["rtl"] = "rtl";
-})(exports.Direction || (exports.Direction = {}));
-
 exports.getDirection = getDirection;