@vonage/vivid 3.48.0 → 3.49.0-preview.0

package/shared/direction.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+/**
+ * Expose ltr and rtl strings
+ */
+exports.Direction = void 0;
+(function (Direction) {
+    Direction["ltr"] = "ltr";
+    Direction["rtl"] = "rtl";
+})(exports.Direction || (exports.Direction = {}));
+
+/**
+ * a method to determine the current localization direction of the view
+ * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
+ * @public
+ */
+const getDirection = (rootNode) => {
+    const dirNode = rootNode.closest("[dir]");
+    return dirNode !== null && dirNode.dir === "rtl" ? exports.Direction.rtl : exports.Direction.ltr;
+};
+
+exports.getDirection = getDirection;

package/shared/dom.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+/**
+ * A test that ensures that all arguments are HTML Elements
+ */
+function isHTMLElement(...args) {
+    return args.every((arg) => arg instanceof HTMLElement);
+}
+/**
+ * Returns all displayed elements inside of a root node that match a provided selector
+ */
+function getDisplayedNodes(rootNode, selector) {
+    if (!rootNode || !selector || !isHTMLElement(rootNode)) {
+        return;
+    }
+    const nodes = Array.from(rootNode.querySelectorAll(selector));
+    // offsetParent will be null if the element isn't currently displayed,
+    // so this will allow us to operate only on visible nodes
+    return nodes.filter((node) => node.offsetParent !== null);
+}
+
+exports.getDisplayedNodes = getDisplayedNodes;
+exports.isHTMLElement = isHTMLElement;

package/shared/enums.cjs

@@ -0,0 +1,87 @@
+'use strict';
+
+var Connotation = /* @__PURE__ */ ((Connotation2) => {
+  Connotation2["Accent"] = "accent";
+  Connotation2["CTA"] = "cta";
+  Connotation2["Success"] = "success";
+  Connotation2["Alert"] = "alert";
+  Connotation2["Warning"] = "warning";
+  Connotation2["Information"] = "information";
+  Connotation2["Announcement"] = "announcement";
+  return Connotation2;
+})(Connotation || {});
+var ConnotationDecorative = /* @__PURE__ */ ((ConnotationDecorative2) => {
+  ConnotationDecorative2["Pacific"] = "pacific";
+  return ConnotationDecorative2;
+})(ConnotationDecorative || {});
+var Shape = /* @__PURE__ */ ((Shape2) => {
+  Shape2["Rounded"] = "rounded";
+  Shape2["Pill"] = "pill";
+  Shape2["Circled"] = "circled";
+  Shape2["Sharp"] = "sharp";
+  return Shape2;
+})(Shape || {});
+var Appearance = /* @__PURE__ */ ((Appearance2) => {
+  Appearance2["Filled"] = "filled";
+  Appearance2["Outlined"] = "outlined";
+  Appearance2["Duotone"] = "duotone";
+  Appearance2["Fieldset"] = "fieldset";
+  Appearance2["Subtle"] = "subtle";
+  Appearance2["Ghost"] = "ghost";
+  Appearance2["Listitem"] = "listitem";
+  Appearance2["Elevated"] = "elevated";
+  return Appearance2;
+})(Appearance || {});
+var Size = /* @__PURE__ */ ((Size2) => {
+  Size2["UltraCondensed"] = "ultra-condensed";
+  Size2["SuperCondensed"] = "super-condensed";
+  Size2["ExtraCondensed"] = "extra-condensed";
+  Size2["SemiCondensed"] = "semi-condensed";
+  Size2["Condensed"] = "condensed";
+  Size2["Normal"] = "normal";
+  Size2["SemiExpanded"] = "semi-expanded";
+  Size2["Expanded"] = "expanded";
+  Size2["ExtraExpanded"] = "extra-expanded";
+  Size2["SuperExpanded"] = "super-expanded";
+  Size2["UltraExpanded"] = "ultra-expanded";
+  return Size2;
+})(Size || {});
+var LayoutSize = /* @__PURE__ */ ((LayoutSize2) => {
+  LayoutSize2["Small"] = "small";
+  LayoutSize2["Medium"] = "medium";
+  LayoutSize2["Large"] = "large";
+  return LayoutSize2;
+})(LayoutSize || {});
+var TabsSize = /* @__PURE__ */ ((TabsSize2) => {
+  TabsSize2["Small"] = "small";
+  return TabsSize2;
+})(TabsSize || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["Top"] = "TOP";
+  Position2["Bottom"] = "BOTTOM";
+  Position2["Start"] = "START";
+  Position2["Center"] = "CENTER";
+  Position2["End"] = "END";
+  return Position2;
+})(Position || {});
+var Role = /* @__PURE__ */ ((Role2) => {
+  Role2["Status"] = "status";
+  Role2["Alert"] = "alert";
+  return Role2;
+})(Role || {});
+var AriaLive = /* @__PURE__ */ ((AriaLive2) => {
+  AriaLive2["Polite"] = "polite";
+  AriaLive2["Assertive"] = "assertive";
+  return AriaLive2;
+})(AriaLive || {});
+
+exports.Appearance = Appearance;
+exports.AriaLive = AriaLive;
+exports.Connotation = Connotation;
+exports.ConnotationDecorative = ConnotationDecorative;
+exports.LayoutSize = LayoutSize;
+exports.Position = Position;
+exports.Role = Role;
+exports.Shape = Shape;
+exports.Size = Size;
+exports.TabsSize = TabsSize;

package/shared/focus.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+const index = require('./index.cjs');
+
+class Focus extends index.FoundationElement {
+}
+
+exports.Focus = Focus;

package/shared/focus2.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const focus = require('./focus.cjs');
+const index = require('./index.cjs');
+
+const focusTemplateFactory = (context) => {
+  const focusTag = context.tagFor(focus.Focus);
+  return index.html`<${focusTag} class="focus-indicator"></${focusTag}>`;
+};
+
+exports.focusTemplateFactory = focusTemplateFactory;

package/shared/form-associated.cjs

@@ -0,0 +1,470 @@
+'use strict';
+
+const index = require('./index.cjs');
+const keyCodes = require('./key-codes.cjs');
+
+const proxySlotName = "form-associated-proxy";
+const ElementInternalsKey = "ElementInternals";
+/**
+ * @alpha
+ */
+const supportsElementInternals = ElementInternalsKey in window &&
+    "setFormValue" in window[ElementInternalsKey].prototype;
+const InternalsMap = new WeakMap();
+/**
+ * Base function for providing Custom Element Form Association.
+ *
+ * @alpha
+ */
+function FormAssociated(BaseCtor) {
+    const C = class extends BaseCtor {
+        constructor(...args) {
+            super(...args);
+            /**
+             * Track whether the value has been changed from the initial value
+             */
+            this.dirtyValue = false;
+            /**
+             * Sets the element's disabled state. A disabled element will not be included during form submission.
+             *
+             * @remarks
+             * HTML Attribute: disabled
+             */
+            this.disabled = false;
+            /**
+             * These are events that are still fired by the proxy
+             * element based on user / programmatic interaction.
+             *
+             * The proxy implementation should be transparent to
+             * the app author, so block these events from emitting.
+             */
+            this.proxyEventsToBlock = ["change", "click"];
+            this.proxyInitialized = false;
+            this.required = false;
+            this.initialValue = this.initialValue || "";
+            if (!this.elementInternals) {
+                // When elementInternals is not supported, formResetCallback is
+                // bound to an event listener, so ensure the handler's `this`
+                // context is correct.
+                this.formResetCallback = this.formResetCallback.bind(this);
+            }
+        }
+        /**
+         * Must evaluate to true to enable elementInternals.
+         * Feature detects API support and resolve respectively
+         *
+         * @internal
+         */
+        static get formAssociated() {
+            return supportsElementInternals;
+        }
+        /**
+         * Returns the validity state of the element
+         *
+         * @alpha
+         */
+        get validity() {
+            return this.elementInternals
+                ? this.elementInternals.validity
+                : this.proxy.validity;
+        }
+        /**
+         * Retrieve a reference to the associated form.
+         * Returns null if not associated to any form.
+         *
+         * @alpha
+         */
+        get form() {
+            return this.elementInternals ? this.elementInternals.form : this.proxy.form;
+        }
+        /**
+         * Retrieve the localized validation message,
+         * or custom validation message if set.
+         *
+         * @alpha
+         */
+        get validationMessage() {
+            return this.elementInternals
+                ? this.elementInternals.validationMessage
+                : this.proxy.validationMessage;
+        }
+        /**
+         * Whether the element will be validated when the
+         * form is submitted
+         */
+        get willValidate() {
+            return this.elementInternals
+                ? this.elementInternals.willValidate
+                : this.proxy.willValidate;
+        }
+        /**
+         * A reference to all associated label elements
+         */
+        get labels() {
+            if (this.elementInternals) {
+                return Object.freeze(Array.from(this.elementInternals.labels));
+            }
+            else if (this.proxy instanceof HTMLElement &&
+                this.proxy.ownerDocument &&
+                this.id) {
+                // Labels associated by wrapping the element: <label><custom-element></custom-element></label>
+                const parentLabels = this.proxy.labels;
+                // Labels associated using the `for` attribute
+                const forLabels = Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));
+                const labels = parentLabels
+                    ? forLabels.concat(Array.from(parentLabels))
+                    : forLabels;
+                return Object.freeze(labels);
+            }
+            else {
+                return index.emptyArray;
+            }
+        }
+        /**
+         * Invoked when the `value` property changes
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `valueChanged` method
+         * They must be sure to invoke `super.valueChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        valueChanged(previous, next) {
+            this.dirtyValue = true;
+            if (this.proxy instanceof HTMLElement) {
+                this.proxy.value = this.value;
+            }
+            this.currentValue = this.value;
+            this.setFormValue(this.value);
+            this.validate();
+        }
+        currentValueChanged() {
+            this.value = this.currentValue;
+        }
+        /**
+         * Invoked when the `initialValue` property changes
+         *
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `initialValueChanged` method
+         * They must be sure to invoke `super.initialValueChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        initialValueChanged(previous, next) {
+            // If the value is clean and the component is connected to the DOM
+            // then set value equal to the attribute value.
+            if (!this.dirtyValue) {
+                this.value = this.initialValue;
+                this.dirtyValue = false;
+            }
+        }
+        /**
+         * Invoked when the `disabled` property changes
+         *
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `disabledChanged` method
+         * They must be sure to invoke `super.disabledChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        disabledChanged(previous, next) {
+            if (this.proxy instanceof HTMLElement) {
+                this.proxy.disabled = this.disabled;
+            }
+            index.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
+        }
+        /**
+         * Invoked when the `name` property changes
+         *
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `nameChanged` method
+         * They must be sure to invoke `super.nameChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        nameChanged(previous, next) {
+            if (this.proxy instanceof HTMLElement) {
+                this.proxy.name = this.name;
+            }
+        }
+        /**
+         * Invoked when the `required` property changes
+         *
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `requiredChanged` method
+         * They must be sure to invoke `super.requiredChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        requiredChanged(prev, next) {
+            if (this.proxy instanceof HTMLElement) {
+                this.proxy.required = this.required;
+            }
+            index.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
+            this.validate();
+        }
+        /**
+         * The element internals object. Will only exist
+         * in browsers supporting the attachInternals API
+         */
+        get elementInternals() {
+            if (!supportsElementInternals) {
+                return null;
+            }
+            let internals = InternalsMap.get(this);
+            if (!internals) {
+                internals = this.attachInternals();
+                InternalsMap.set(this, internals);
+            }
+            return internals;
+        }
+        /**
+         * @internal
+         */
+        connectedCallback() {
+            super.connectedCallback();
+            this.addEventListener("keypress", this._keypressHandler);
+            if (!this.value) {
+                this.value = this.initialValue;
+                this.dirtyValue = false;
+            }
+            if (!this.elementInternals) {
+                this.attachProxy();
+                if (this.form) {
+                    this.form.addEventListener("reset", this.formResetCallback);
+                }
+            }
+        }
+        /**
+         * @internal
+         */
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
+            if (!this.elementInternals && this.form) {
+                this.form.removeEventListener("reset", this.formResetCallback);
+            }
+        }
+        /**
+         * Return the current validity of the element.
+         */
+        checkValidity() {
+            return this.elementInternals
+                ? this.elementInternals.checkValidity()
+                : this.proxy.checkValidity();
+        }
+        /**
+         * Return the current validity of the element.
+         * If false, fires an invalid event at the element.
+         */
+        reportValidity() {
+            return this.elementInternals
+                ? this.elementInternals.reportValidity()
+                : this.proxy.reportValidity();
+        }
+        /**
+         * Set the validity of the control. In cases when the elementInternals object is not
+         * available (and the proxy element is used to report validity), this function will
+         * do nothing unless a message is provided, at which point the setCustomValidity method
+         * of the proxy element will be invoked with the provided message.
+         * @param flags - Validity flags
+         * @param message - Optional message to supply
+         * @param anchor - Optional element used by UA to display an interactive validation UI
+         */
+        setValidity(flags, message, anchor) {
+            if (this.elementInternals) {
+                this.elementInternals.setValidity(flags, message, anchor);
+            }
+            else if (typeof message === "string") {
+                this.proxy.setCustomValidity(message);
+            }
+        }
+        /**
+         * Invoked when a connected component's form or fieldset has its disabled
+         * state changed.
+         * @param disabled - the disabled value of the form / fieldset
+         */
+        formDisabledCallback(disabled) {
+            this.disabled = disabled;
+        }
+        formResetCallback() {
+            this.value = this.initialValue;
+            this.dirtyValue = false;
+        }
+        /**
+         * Attach the proxy element to the DOM
+         */
+        attachProxy() {
+            var _a;
+            if (!this.proxyInitialized) {
+                this.proxyInitialized = true;
+                this.proxy.style.display = "none";
+                this.proxyEventsToBlock.forEach(name => this.proxy.addEventListener(name, this.stopPropagation));
+                // These are typically mapped to the proxy during
+                // property change callbacks, but during initialization
+                // on the initial call of the callback, the proxy is
+                // still undefined. We should find a better way to address this.
+                this.proxy.disabled = this.disabled;
+                this.proxy.required = this.required;
+                if (typeof this.name === "string") {
+                    this.proxy.name = this.name;
+                }
+                if (typeof this.value === "string") {
+                    this.proxy.value = this.value;
+                }
+                this.proxy.setAttribute("slot", proxySlotName);
+                this.proxySlot = document.createElement("slot");
+                this.proxySlot.setAttribute("name", proxySlotName);
+            }
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(this.proxySlot);
+            this.appendChild(this.proxy);
+        }
+        /**
+         * Detach the proxy element from the DOM
+         */
+        detachProxy() {
+            var _a;
+            this.removeChild(this.proxy);
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeChild(this.proxySlot);
+        }
+        /** {@inheritDoc (FormAssociated:interface).validate} */
+        validate(anchor) {
+            if (this.proxy instanceof HTMLElement) {
+                this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);
+            }
+        }
+        /**
+         * Associates the provided value (and optional state) with the parent form.
+         * @param value - The value to set
+         * @param state - The state object provided to during session restores and when autofilling.
+         */
+        setFormValue(value, state) {
+            if (this.elementInternals) {
+                this.elementInternals.setFormValue(value, state || value);
+            }
+        }
+        _keypressHandler(e) {
+            switch (e.key) {
+                case keyCodes.keyEnter:
+                    if (this.form instanceof HTMLFormElement) {
+                        // Implicit submission
+                        const defaultButton = this.form.querySelector("[type=submit]");
+                        defaultButton === null || defaultButton === void 0 ? void 0 : defaultButton.click();
+                    }
+                    break;
+            }
+        }
+        /**
+         * Used to stop propagation of proxy element events
+         * @param e - Event object
+         */
+        stopPropagation(e) {
+            e.stopPropagation();
+        }
+    };
+    index.attr({ mode: "boolean" })(C.prototype, "disabled");
+    index.attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
+    index.attr({ attribute: "current-value" })(C.prototype, "currentValue");
+    index.attr(C.prototype, "name");
+    index.attr({ mode: "boolean" })(C.prototype, "required");
+    index.observable(C.prototype, "value");
+    return C;
+}
+/**
+ * @alpha
+ */
+function CheckableFormAssociated(BaseCtor) {
+    class C extends FormAssociated(BaseCtor) {
+    }
+    class D extends C {
+        constructor(...args) {
+            super(args);
+            /**
+             * Tracks whether the "checked" property has been changed.
+             * This is necessary to provide consistent behavior with
+             * normal input checkboxes
+             */
+            this.dirtyChecked = false;
+            /**
+             * Provides the default checkedness of the input element
+             * Passed down to proxy
+             *
+             * @public
+             * @remarks
+             * HTML Attribute: checked
+             */
+            this.checkedAttribute = false;
+            /**
+             * The checked state of the control.
+             *
+             * @public
+             */
+            this.checked = false;
+            // Re-initialize dirtyChecked because initialization of other values
+            // causes it to become true
+            this.dirtyChecked = false;
+        }
+        checkedAttributeChanged() {
+            this.defaultChecked = this.checkedAttribute;
+        }
+        /**
+         * @internal
+         */
+        defaultCheckedChanged() {
+            if (!this.dirtyChecked) {
+                // Setting this.checked will cause us to enter a dirty state,
+                // but if we are clean when defaultChecked is changed, we want to stay
+                // in a clean state, so reset this.dirtyChecked
+                this.checked = this.defaultChecked;
+                this.dirtyChecked = false;
+            }
+        }
+        checkedChanged(prev, next) {
+            if (!this.dirtyChecked) {
+                this.dirtyChecked = true;
+            }
+            this.currentChecked = this.checked;
+            this.updateForm();
+            if (this.proxy instanceof HTMLInputElement) {
+                this.proxy.checked = this.checked;
+            }
+            if (prev !== undefined) {
+                this.$emit("change");
+            }
+            this.validate();
+        }
+        currentCheckedChanged(prev, next) {
+            this.checked = this.currentChecked;
+        }
+        updateForm() {
+            const value = this.checked ? this.value : null;
+            this.setFormValue(value, value);
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.updateForm();
+        }
+        formResetCallback() {
+            super.formResetCallback();
+            this.checked = !!this.checkedAttribute;
+            this.dirtyChecked = false;
+        }
+    }
+    index.attr({ attribute: "checked", mode: "boolean" })(D.prototype, "checkedAttribute");
+    index.attr({ attribute: "current-checked", converter: index.booleanConverter })(D.prototype, "currentChecked");
+    index.observable(D.prototype, "defaultChecked");
+    index.observable(D.prototype, "checked");
+    return D;
+}
+
+exports.CheckableFormAssociated = CheckableFormAssociated;
+exports.FormAssociated = FormAssociated;