@vonage/vivid 3.0.0-next.5 → 3.0.0-next.52

package/shared/focus.js

@@ -0,0 +1,5 @@
+import { F as FoundationElement } from './index.js';
+
+class Focus extends FoundationElement {}
+
+export { Focus as F };

package/shared/focus2.js

@@ -0,0 +1,11 @@
+import { F as Focus } from './focus.js';
+import { h as html } from './index.js';
+
+let _ = t => t,
+    _t;
+const focusTemplateFactory = context => {
+  const focusTag = context.tagFor(Focus);
+  return html(_t || (_t = _`<${0} class="focus-indicator"></${0}>`), focusTag, focusTag);
+};
+
+export { focusTemplateFactory as f };

package/shared/form-associated.js

@@ -0,0 +1,557 @@
+import { e as emptyArray, D as DOM, a as attr, o as observable, f as booleanConverter } from './index.js';
+
+/**
+ * Key Code values
+ * @deprecated - KeyCodes are deprecated, use individual string key exports
+ */
+var KeyCodes;
+(function (KeyCodes) {
+    KeyCodes[KeyCodes["alt"] = 18] = "alt";
+    KeyCodes[KeyCodes["arrowDown"] = 40] = "arrowDown";
+    KeyCodes[KeyCodes["arrowLeft"] = 37] = "arrowLeft";
+    KeyCodes[KeyCodes["arrowRight"] = 39] = "arrowRight";
+    KeyCodes[KeyCodes["arrowUp"] = 38] = "arrowUp";
+    KeyCodes[KeyCodes["back"] = 8] = "back";
+    KeyCodes[KeyCodes["backSlash"] = 220] = "backSlash";
+    KeyCodes[KeyCodes["break"] = 19] = "break";
+    KeyCodes[KeyCodes["capsLock"] = 20] = "capsLock";
+    KeyCodes[KeyCodes["closeBracket"] = 221] = "closeBracket";
+    KeyCodes[KeyCodes["colon"] = 186] = "colon";
+    KeyCodes[KeyCodes["colon2"] = 59] = "colon2";
+    KeyCodes[KeyCodes["comma"] = 188] = "comma";
+    KeyCodes[KeyCodes["ctrl"] = 17] = "ctrl";
+    KeyCodes[KeyCodes["delete"] = 46] = "delete";
+    KeyCodes[KeyCodes["end"] = 35] = "end";
+    KeyCodes[KeyCodes["enter"] = 13] = "enter";
+    KeyCodes[KeyCodes["equals"] = 187] = "equals";
+    KeyCodes[KeyCodes["equals2"] = 61] = "equals2";
+    KeyCodes[KeyCodes["equals3"] = 107] = "equals3";
+    KeyCodes[KeyCodes["escape"] = 27] = "escape";
+    KeyCodes[KeyCodes["forwardSlash"] = 191] = "forwardSlash";
+    KeyCodes[KeyCodes["function1"] = 112] = "function1";
+    KeyCodes[KeyCodes["function10"] = 121] = "function10";
+    KeyCodes[KeyCodes["function11"] = 122] = "function11";
+    KeyCodes[KeyCodes["function12"] = 123] = "function12";
+    KeyCodes[KeyCodes["function2"] = 113] = "function2";
+    KeyCodes[KeyCodes["function3"] = 114] = "function3";
+    KeyCodes[KeyCodes["function4"] = 115] = "function4";
+    KeyCodes[KeyCodes["function5"] = 116] = "function5";
+    KeyCodes[KeyCodes["function6"] = 117] = "function6";
+    KeyCodes[KeyCodes["function7"] = 118] = "function7";
+    KeyCodes[KeyCodes["function8"] = 119] = "function8";
+    KeyCodes[KeyCodes["function9"] = 120] = "function9";
+    KeyCodes[KeyCodes["home"] = 36] = "home";
+    KeyCodes[KeyCodes["insert"] = 45] = "insert";
+    KeyCodes[KeyCodes["menu"] = 93] = "menu";
+    KeyCodes[KeyCodes["minus"] = 189] = "minus";
+    KeyCodes[KeyCodes["minus2"] = 109] = "minus2";
+    KeyCodes[KeyCodes["numLock"] = 144] = "numLock";
+    KeyCodes[KeyCodes["numPad0"] = 96] = "numPad0";
+    KeyCodes[KeyCodes["numPad1"] = 97] = "numPad1";
+    KeyCodes[KeyCodes["numPad2"] = 98] = "numPad2";
+    KeyCodes[KeyCodes["numPad3"] = 99] = "numPad3";
+    KeyCodes[KeyCodes["numPad4"] = 100] = "numPad4";
+    KeyCodes[KeyCodes["numPad5"] = 101] = "numPad5";
+    KeyCodes[KeyCodes["numPad6"] = 102] = "numPad6";
+    KeyCodes[KeyCodes["numPad7"] = 103] = "numPad7";
+    KeyCodes[KeyCodes["numPad8"] = 104] = "numPad8";
+    KeyCodes[KeyCodes["numPad9"] = 105] = "numPad9";
+    KeyCodes[KeyCodes["numPadDivide"] = 111] = "numPadDivide";
+    KeyCodes[KeyCodes["numPadDot"] = 110] = "numPadDot";
+    KeyCodes[KeyCodes["numPadMinus"] = 109] = "numPadMinus";
+    KeyCodes[KeyCodes["numPadMultiply"] = 106] = "numPadMultiply";
+    KeyCodes[KeyCodes["numPadPlus"] = 107] = "numPadPlus";
+    KeyCodes[KeyCodes["openBracket"] = 219] = "openBracket";
+    KeyCodes[KeyCodes["pageDown"] = 34] = "pageDown";
+    KeyCodes[KeyCodes["pageUp"] = 33] = "pageUp";
+    KeyCodes[KeyCodes["period"] = 190] = "period";
+    KeyCodes[KeyCodes["print"] = 44] = "print";
+    KeyCodes[KeyCodes["quote"] = 222] = "quote";
+    KeyCodes[KeyCodes["scrollLock"] = 145] = "scrollLock";
+    KeyCodes[KeyCodes["shift"] = 16] = "shift";
+    KeyCodes[KeyCodes["space"] = 32] = "space";
+    KeyCodes[KeyCodes["tab"] = 9] = "tab";
+    KeyCodes[KeyCodes["tilde"] = 192] = "tilde";
+    KeyCodes[KeyCodes["windowsLeft"] = 91] = "windowsLeft";
+    KeyCodes[KeyCodes["windowsOpera"] = 219] = "windowsOpera";
+    KeyCodes[KeyCodes["windowsRight"] = 92] = "windowsRight";
+})(KeyCodes || (KeyCodes = {}));
+/**
+ * String values for use with KeyboardEvent.key
+ */
+const keyArrowDown = "ArrowDown";
+const keyArrowLeft = "ArrowLeft";
+const keyArrowRight = "ArrowRight";
+const keyArrowUp = "ArrowUp";
+const keyEnter = "Enter";
+const keyEscape = "Escape";
+const keyHome = "Home";
+const keyEnd = "End";
+const keySpace = " ";
+
+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 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;
+            }
+            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;
+            }
+            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() {
+            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);
+        }
+        /**
+         * Sets the validity of the custom element. By default this uses the proxy element to determine
+         * validity, but this can be extended or replaced in implementation.
+         */
+        validate() {
+            if (this.proxy instanceof HTMLElement) {
+                this.setValidity(this.proxy.validity, this.proxy.validationMessage);
+            }
+        }
+        /**
+         * 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 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();
+        }
+    };
+    attr({ mode: "boolean" })(C.prototype, "disabled");
+    attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
+    attr({ attribute: "current-value" })(C.prototype, "currentValue");
+    attr(C.prototype, "name");
+    attr({ mode: "boolean" })(C.prototype, "required");
+    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;
+        }
+    }
+    attr({ attribute: "checked", mode: "boolean" })(D.prototype, "checkedAttribute");
+    attr({ attribute: "current-checked", converter: booleanConverter })(D.prototype, "currentChecked");
+    observable(D.prototype, "defaultChecked");
+    observable(D.prototype, "checked");
+    return D;
+}
+
+export { CheckableFormAssociated as C, FormAssociated as F, keyArrowLeft as a, keyArrowRight as b, keyEnter as c, keyHome as d, keyEnd as e, keyArrowUp as f, keyArrowDown as g, keyEscape as h, keySpace as k };