@vonage/vivid 3.0.0-next.16 → 3.0.0-next.17

package/shared/focus.js

@@ -1,652 +1,5 @@
-import { e as emptyArray, D as DOM, a as attr, o as observable, F as FoundationElement, _ as __decorate, h as html } from './index.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { A as ARIAGlobalStatesAndProperties, S as StartEnd } from './aria-global.js';
-import { F as Focus } from './focus2.js';
+import { F as FoundationElement } 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 = {}));
-const keyEnter = "Enter";
+class Focus extends FoundationElement {}
 
-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;
-}
-
-class _Button extends FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
- *
- * @internal
- */
-class FormAssociatedButton extends FormAssociated(_Button) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
-}
-
-/**
- * A Button Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
- *
- * @public
- */
-class Button extends FormAssociatedButton {
-    constructor() {
-        super(...arguments);
-        /**
-         * Prevent events to propagate if disabled and has no slotted content wrapped in HTML elements
-         * @internal
-         */
-        this.handleClick = (e) => {
-            var _a;
-            if (this.disabled && ((_a = this.defaultSlottedContent) === null || _a === void 0 ? void 0 : _a.length) <= 1) {
-                e.stopPropagation();
-            }
-        };
-        /**
-         * Submits the parent form
-         */
-        this.handleSubmission = () => {
-            if (!this.form) {
-                return;
-            }
-            const attached = this.proxy.isConnected;
-            if (!attached) {
-                this.attachProxy();
-            }
-            // Browser support for requestSubmit is not comprehensive
-            // so click the proxy if it isn't supported
-            typeof this.form.requestSubmit === "function"
-                ? this.form.requestSubmit(this.proxy)
-                : this.proxy.click();
-            if (!attached) {
-                this.detachProxy();
-            }
-        };
-        /**
-         * Resets the parent form
-         */
-        this.handleFormReset = () => {
-            var _a;
-            (_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
-        };
-        /**
-         * Overrides the focus call for where delegatesFocus is unsupported.
-         * This check works for Chrome, Edge Chromium, FireFox, and Safari
-         * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
-         */
-        this.handleUnsupportedDelegatesFocus = () => {
-            var _a;
-            // Check to see if delegatesFocus is supported
-            if (window.ShadowRoot &&
-                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
-                this.focus = () => {
-                    this.control.focus();
-                };
-            }
-        };
-    }
-    formactionChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formAction = this.formaction;
-        }
-    }
-    formenctypeChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formEnctype = this.formenctype;
-        }
-    }
-    formmethodChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formMethod = this.formmethod;
-        }
-    }
-    formnovalidateChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formNoValidate = this.formnovalidate;
-        }
-    }
-    formtargetChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formTarget = this.formtarget;
-        }
-    }
-    typeChanged(previous, next) {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.type = this.type;
-        }
-        next === "submit" && this.addEventListener("click", this.handleSubmission);
-        previous === "submit" && this.removeEventListener("click", this.handleSubmission);
-        next === "reset" && this.addEventListener("click", this.handleFormReset);
-        previous === "reset" && this.removeEventListener("click", this.handleFormReset);
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        var _a;
-        super.connectedCallback();
-        this.proxy.setAttribute("type", this.type);
-        this.handleUnsupportedDelegatesFocus();
-        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
-        if (elements) {
-            elements.forEach((span) => {
-                span.addEventListener("click", this.handleClick);
-            });
-        }
-    }
-    /**
-     * @internal
-     */
-    disconnectedCallback() {
-        var _a;
-        super.disconnectedCallback();
-        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
-        if (elements) {
-            elements.forEach((span) => {
-                span.removeEventListener("click", this.handleClick);
-            });
-        }
-    }
-}
-__decorate([
-    attr({ mode: "boolean" })
-], Button.prototype, "autofocus", void 0);
-__decorate([
-    attr({ attribute: "form" })
-], Button.prototype, "formId", void 0);
-__decorate([
-    attr
-], Button.prototype, "formaction", void 0);
-__decorate([
-    attr
-], Button.prototype, "formenctype", void 0);
-__decorate([
-    attr
-], Button.prototype, "formmethod", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], Button.prototype, "formnovalidate", void 0);
-__decorate([
-    attr
-], Button.prototype, "formtarget", void 0);
-__decorate([
-    attr
-], Button.prototype, "type", void 0);
-__decorate([
-    observable
-], Button.prototype, "defaultSlottedContent", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA button role
- *
- * @public
- */
-class DelegatesARIAButton {
-}
-__decorate([
-    attr({ attribute: "aria-expanded" })
-], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
-__decorate([
-    attr({ attribute: "aria-pressed" })
-], DelegatesARIAButton.prototype, "ariaPressed", void 0);
-applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
-applyMixins(Button, StartEnd, DelegatesARIAButton);
-
-let _ = t => t,
-    _t;
-const focusTemplateFactory = context => {
-  const focusTag = context.tagFor(Focus);
-  return html(_t || (_t = _`<${0} class="focus-indicator"></${0}>`), focusTag, focusTag);
-};
-
-export { Button as B, focusTemplateFactory as f };
+export { Focus as F };