@vonage/vivid 3.0.0-test.0 → 3.0.1

package/shared/direction.js

@@ -0,0 +1,20 @@
+/**
+ * Expose ltr and rtl strings
+ */
+var Direction;
+(function (Direction) {
+    Direction["ltr"] = "ltr";
+    Direction["rtl"] = "rtl";
+})(Direction || (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" ? Direction.rtl : Direction.ltr;
+};
+
+export { Direction as D, getDirection as g };

package/shared/dom.js

@@ -0,0 +1,8 @@
+/**
+ * A test that ensures that all arguments are HTML Elements
+ */
+function isHTMLElement(...args) {
+    return args.every((arg) => arg instanceof HTMLElement);
+}
+
+export { isHTMLElement as i };

package/shared/enums.js

@@ -0,0 +1,70 @@
+var Connotation;
+(function (Connotation) {
+  Connotation["Accent"] = "accent";
+  Connotation["CTA"] = "cta";
+  Connotation["Success"] = "success";
+  Connotation["Alert"] = "alert";
+  Connotation["Warning"] = "warning";
+  Connotation["Information"] = "information";
+  Connotation["Announcement"] = "announcement";
+})(Connotation || (Connotation = {}));
+var ConnotationDecorative;
+(function (ConnotationDecorative) {
+  ConnotationDecorative["Pacific"] = "pacific";
+})(ConnotationDecorative || (ConnotationDecorative = {}));
+var Shape;
+(function (Shape) {
+  Shape["Rounded"] = "rounded";
+  Shape["Pill"] = "pill";
+  Shape["Circled"] = "circled";
+  Shape["Sharp"] = "sharp";
+})(Shape || (Shape = {}));
+var Appearance;
+(function (Appearance) {
+  Appearance["Filled"] = "filled";
+  Appearance["Outlined"] = "outlined";
+  Appearance["Duotone"] = "duotone";
+  Appearance["Fieldset"] = "fieldset";
+  Appearance["Subtle"] = "subtle";
+  Appearance["Ghost"] = "ghost";
+})(Appearance || (Appearance = {}));
+var Size;
+(function (Size) {
+  Size["UltraCondensed"] = "ultraCondensed";
+  Size["SuperCondensed"] = "superCondensed";
+  Size["ExtraCondensed"] = "extraCondensed";
+  Size["SemiCondensed"] = "semiCondensed";
+  Size["Condensed"] = "condensed";
+  Size["Normal"] = "normal";
+  Size["SemiExpanded"] = "semiExpanded";
+  Size["Expanded"] = "expanded";
+  Size["ExtraExpanded"] = "extraExpanded";
+  Size["SuperExpanded"] = "superExpanded";
+  Size["UltraExpanded"] = "ultraExpanded";
+})(Size || (Size = {}));
+var LayoutSize;
+(function (LayoutSize) {
+  LayoutSize["Small"] = "small";
+  LayoutSize["Medium"] = "medium";
+  LayoutSize["Large"] = "large";
+})(LayoutSize || (LayoutSize = {}));
+var Position;
+(function (Position) {
+  Position["Top"] = "TOP";
+  Position["Bottom"] = "BOTTOM";
+  Position["Start"] = "START";
+  Position["Center"] = "CENTER";
+  Position["End"] = "END";
+})(Position || (Position = {}));
+var Role;
+(function (Role) {
+  Role["Status"] = "status";
+  Role["Alert"] = "alert";
+})(Role || (Role = {}));
+var AriaLive;
+(function (AriaLive) {
+  AriaLive["Polite"] = "polite";
+  AriaLive["Assertive"] = "assertive";
+})(AriaLive || (AriaLive = {}));
+
+export { Connotation as C, Shape as S };

package/shared/es.object.assign.js

@@ -1,4 +1,4 @@
-import { d as descriptors, f as functionUncurryThis, l as functionCall, p as fails$1, H as objectKeys$1, I as toObject$1, J as indexedObject, K as objectGetOwnPropertySymbols, L as objectPropertyIsEnumerable, _ as _export } from './web.dom-collections.iterator.js';
+import { i as descriptors, k as functionUncurryThis, K as functionCall, l as fails$1, $ as objectKeys$1, a0 as toObject$1, a1 as indexedObject, a2 as objectGetOwnPropertySymbols, a3 as objectPropertyIsEnumerable, G as _export } from './index.js';
 
 var DESCRIPTORS = descriptors;
 var uncurryThis = functionUncurryThis;
@@ -63,6 +63,6 @@ var assign = objectAssign;
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
 // eslint-disable-next-line es/no-object-assign -- required for testing
-$({ target: 'Object', stat: true, forced: Object.assign !== assign }, {
+$({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
   assign: assign
 });

package/shared/es.regexp.to-string.js

@@ -0,0 +1,59 @@
+import { q as anObject$2, K as functionCall, B as hasOwnProperty_1, j as objectIsPrototypeOf, R as functionName, H as defineBuiltIn$1, l as fails$1 } from './index.js';
+import { t as toString } from './to-string.js';
+
+var anObject$1 = anObject$2;
+
+// `RegExp.prototype.flags` getter implementation
+// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
+var regexpFlags = function () {
+  var that = anObject$1(this);
+  var result = '';
+  if (that.hasIndices) result += 'd';
+  if (that.global) result += 'g';
+  if (that.ignoreCase) result += 'i';
+  if (that.multiline) result += 'm';
+  if (that.dotAll) result += 's';
+  if (that.unicode) result += 'u';
+  if (that.unicodeSets) result += 'v';
+  if (that.sticky) result += 'y';
+  return result;
+};
+
+var call = functionCall;
+var hasOwn = hasOwnProperty_1;
+var isPrototypeOf = objectIsPrototypeOf;
+var regExpFlags = regexpFlags;
+
+var RegExpPrototype$1 = RegExp.prototype;
+
+var regexpGetFlags = function (R) {
+  var flags = R.flags;
+  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn(R, 'flags') && isPrototypeOf(RegExpPrototype$1, R)
+    ? call(regExpFlags, R) : flags;
+};
+
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var defineBuiltIn = defineBuiltIn$1;
+var anObject = anObject$2;
+var $toString = toString;
+var fails = fails$1;
+var getRegExpFlags = regexpGetFlags;
+
+var TO_STRING = 'toString';
+var RegExpPrototype = RegExp.prototype;
+var nativeToString = RegExpPrototype[TO_STRING];
+
+var NOT_GENERIC = fails(function () { return nativeToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
+// FF44- RegExp#toString has a wrong name
+var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name != TO_STRING;
+
+// `RegExp.prototype.toString` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
+if (NOT_GENERIC || INCORRECT_NAME) {
+  defineBuiltIn(RegExp.prototype, TO_STRING, function toString() {
+    var R = anObject(this);
+    var pattern = $toString(R.source);
+    var flags = $toString(getRegExpFlags(R));
+    return '/' + pattern + '/' + flags;
+  }, { unsafe: true });
+}

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,466 @@
+import { a as attr, o as observable, V as booleanConverter, e as emptyArray, W as DOM } from './index.js';
+import { d as keyEnter } from './key-codes.js';
+
+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);
+        }
+        /** {@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 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 };