@vonage/vivid 4.24.0 → 4.25.0

package/shared/form-associated.js

@@ -1,24 +1,28 @@
-import { a as attr, b as booleanConverter, o as observable, e as emptyArray, D as DOM } from './vivid-element.js';
+import { a as attr, e as emptyArray, D as DOM } from './vivid-element.js';
 import { k as keyEnter } from './key-codes.js';
 
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
 const proxySlotName = "form-associated-proxy";
 const ElementInternalsKey = "ElementInternals";
 const supportsElementInternals = ElementInternalsKey in window && "setFormValue" in window[ElementInternalsKey].prototype;
 const InternalsMap = /* @__PURE__ */ new WeakMap();
-function FormAssociated(BaseCtor) {
-  const C = class extends BaseCtor {
+const FormAssociated = (Base) => {
+  class FormAssociatedElement extends Base {
     constructor(...args) {
       super(...args);
       /**
        * Track whether the value has been changed from the initial value
+       * @internal
        */
       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
@@ -26,8 +30,12 @@ function FormAssociated(BaseCtor) {
        *
        * The proxy implementation should be transparent to
        * the app author, so block these events from emitting.
+       * @internal
        */
       this.proxyEventsToBlock = ["change", "click"];
+      /**
+       * @internal
+       */
       this.proxyInitialized = false;
       this.required = false;
       this.initialValue = this.initialValue || "";
@@ -46,8 +54,6 @@ function FormAssociated(BaseCtor) {
     }
     /**
      * Returns the validity state of the element
-     *
-     * @alpha
      */
     get validity() {
       return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
@@ -55,8 +61,6 @@ function FormAssociated(BaseCtor) {
     /**
      * 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;
@@ -64,8 +68,6 @@ function FormAssociated(BaseCtor) {
     /**
      * Retrieve the localized validation message,
      * or custom validation message if set.
-     *
-     * @alpha
      */
     get validationMessage() {
       return this.elementInternals ? this.elementInternals.validationMessage : this.proxy.validationMessage;
@@ -94,32 +96,27 @@ function FormAssociated(BaseCtor) {
       }
     }
     /**
-     * Invoked when the `value` property changes
-     *
-     * @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`
+     * @internal
      */
     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;
+    /**
+     * @deprecated Use `value` instead.
+     */
+    get currentValue() {
+      return this.value;
+    }
+    set currentValue(value) {
+      this.value = value;
     }
     /**
-     * Invoked when the `initialValue` property changes
-     *
-     * @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`
+     * @internal
      */
     initialValueChanged(_previous, _next) {
       if (!this.dirtyValue) {
@@ -128,12 +125,7 @@ function FormAssociated(BaseCtor) {
       }
     }
     /**
-     * Invoked when the `disabled` property changes
-     *
-     * @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`
+     * @internal
      */
     disabledChanged(_previous, _next) {
       if (this.proxy instanceof HTMLElement) {
@@ -142,12 +134,7 @@ function FormAssociated(BaseCtor) {
       DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
     }
     /**
-     * Invoked when the `name` property changes
-     *
-     * @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`
+     * @internal
      */
     nameChanged(_previous, _next) {
       if (this.proxy instanceof HTMLElement) {
@@ -155,12 +142,7 @@ function FormAssociated(BaseCtor) {
       }
     }
     /**
-     * Invoked when the `required` property changes
-     *
-     * @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`
+     * @internal
      */
     requiredChanged(_previous, _next) {
       if (this.proxy instanceof HTMLElement) {
@@ -172,6 +154,7 @@ function FormAssociated(BaseCtor) {
     /**
      * The element internals object. Will only exist
      * in browsers supporting the attachInternals API
+     * @internal
      */
     get elementInternals() {
       if (!supportsElementInternals) {
@@ -234,6 +217,7 @@ function FormAssociated(BaseCtor) {
      * @param flags - Validity flags
      * @param message - Optional message to supply
      * @param anchor - Optional element used by UA to display an interactive validation UI
+     * @internal
      */
     setValidity(flags, message, anchor) {
       if (this.elementInternals) {
@@ -246,16 +230,21 @@ function FormAssociated(BaseCtor) {
      * Invoked when a connected component's form or fieldset has its disabled
      * state changed.
      * @param disabled - the disabled value of the form / fieldset
+     * @internal
      */
     formDisabledCallback(disabled) {
       this.disabled = disabled;
     }
+    /**
+     * @internal
+     */
     formResetCallback() {
       this.value = this.initialValue;
       this.dirtyValue = false;
     }
     /**
      * Attach the proxy element to the DOM
+     * @internal
      */
     attachProxy() {
       if (!this.proxyInitialized) {
@@ -281,12 +270,19 @@ function FormAssociated(BaseCtor) {
     }
     /**
      * Detach the proxy element from the DOM
+     * @internal
      */
     detachProxy() {
       this.removeChild(this.proxy);
       this.shadowRoot.removeChild(this.proxySlot);
     }
-    /** {@inheritDoc (FormAssociated:interface).validate} */
+    /**
+     * 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.
+     *
+     * @param anchor - The anchor element to provide to ElementInternals.setValidity for surfacing the browser's constraint validation UI
+     * @internal
+     */
     validate(anchor) {
       if (this.proxy instanceof HTMLElement && this.elementInternals) {
         const isValid = this.proxy.validity.valid;
@@ -307,12 +303,16 @@ function FormAssociated(BaseCtor) {
      * 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.
+     * @internal
      */
     setFormValue(value, state) {
       if (this.elementInternals) {
         this.elementInternals.setFormValue(value, state || value);
       }
     }
+    /**
+     * @internal
+     */
     _keypressHandler(e) {
       switch (e.key) {
         case keyEnter:
@@ -328,53 +328,52 @@ function FormAssociated(BaseCtor) {
     /**
      * Used to stop propagation of proxy element events
      * @param e - Event object
+     * @internal
      */
     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;
-}
-function CheckableFormAssociated(BaseCtor) {
-  class C extends FormAssociated(BaseCtor) {
   }
-  class D extends C {
-    constructor(...args) {
-      super(args);
+  __decorateClass([
+    attr({ attribute: "current-value" })
+  ], FormAssociatedElement.prototype, "value");
+  __decorateClass([
+    attr({ mode: "fromView", attribute: "value" })
+  ], FormAssociatedElement.prototype, "initialValue");
+  __decorateClass([
+    attr({ mode: "boolean" })
+  ], FormAssociatedElement.prototype, "disabled");
+  __decorateClass([
+    attr
+  ], FormAssociatedElement.prototype, "name");
+  __decorateClass([
+    attr({ mode: "boolean" })
+  ], FormAssociatedElement.prototype, "required");
+  return FormAssociatedElement;
+};
+const currentCheckedConverter = {
+  fromView(value) {
+    if (typeof value === "string") {
+      return value.toLowerCase() === "true";
+    }
+    return !!value;
+  },
+  toView(value) {
+    return value ? "true" : "false";
+  }
+};
+const CheckableFormAssociated = (Base) => {
+  class CheckableFormAssociatedElement extends FormAssociated(Base) {
+    constructor() {
+      super(...arguments);
       /**
        * Tracks whether the "checked" property has been changed.
        * This is necessary to provide consistent behavior with
        * normal input checkboxes
+       * @internal
        */
       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;
-      this.dirtyChecked = false;
-    }
-    /**
-     * @internal
-     */
-    checkedAttributeChanged() {
-      this.defaultChecked = this.checkedAttribute;
+      this.defaultChecked = false;
     }
     /**
      * @internal
@@ -385,11 +384,13 @@ function CheckableFormAssociated(BaseCtor) {
         this.dirtyChecked = false;
       }
     }
+    /**
+     * @internal
+     */
     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;
@@ -399,34 +400,57 @@ function CheckableFormAssociated(BaseCtor) {
       }
       this.validate();
     }
-    currentCheckedChanged(_prev, _next) {
-      this.checked = this.currentChecked;
+    /**
+     * @deprecated Use `defaultChecked` instead.
+     */
+    get checkedAttribute() {
+      return this.defaultChecked;
     }
+    set checkedAttribute(value) {
+      this.defaultChecked = value;
+    }
+    /**
+     * @deprecated Use `checked` instead.
+     */
+    get currentChecked() {
+      return this.checked;
+    }
+    set currentChecked(value) {
+      this.checked = value;
+    }
+    /**
+     * @internal
+     */
     updateForm() {
       const value = this.checked ? this.value : null;
       this.setFormValue(value, value);
     }
+    /**
+     * @internal
+     */
     connectedCallback() {
       super.connectedCallback();
       this.updateForm();
     }
+    /**
+     * @internal
+     */
     formResetCallback() {
       super.formResetCallback();
-      this.checked = !!this.checkedAttribute;
+      this.checked = !!this.defaultChecked;
       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;
-}
+  __decorateClass([
+    attr({
+      attribute: "checked",
+      mode: "boolean"
+    })
+  ], CheckableFormAssociatedElement.prototype, "defaultChecked");
+  __decorateClass([
+    attr({ attribute: "current-checked", converter: currentCheckedConverter })
+  ], CheckableFormAssociatedElement.prototype, "checked");
+  return CheckableFormAssociatedElement;
+};
 
 export { CheckableFormAssociated as C, FormAssociated as F };

package/shared/form-element.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+const vividElement = require('./vivid-element.cjs');
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const FormElement = (Base) => {
+  class FormElementElement extends Base {
+    constructor(...args) {
+      super(...args);
+      this.errorValidationMessage = "";
+      /**
+       * @internal
+       */
+      this.forceErrorDisplay = false;
+      /**
+       * @internal
+       */
+      this.hasBeenTouched = false;
+      this.#handleInvalidEvent = () => {
+        this.forceErrorDisplay = true;
+        this.validate();
+      };
+      this.addEventListener("blur", () => {
+        this.hasBeenTouched = true;
+        this.forceErrorDisplay = false;
+        this.validate();
+      });
+      this.addEventListener("focus", () => {
+        this.hasBeenTouched = false;
+      });
+      this.addEventListener("invalid", () => {
+        this.proxy.dispatchEvent(new Event("invalid"));
+      });
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+      super.connectedCallback();
+      this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
+    }
+    #handleInvalidEvent;
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.proxy.removeEventListener("invalid", this.#handleInvalidEvent);
+    }
+    /**
+     * @internal
+     */
+    formResetCallback() {
+      this.forceErrorDisplay = false;
+      super.formResetCallback();
+      this.validate();
+    }
+    /**
+     * @internal
+     */
+    validate() {
+      super.validate();
+      const shouldShowValidationError = this.forceErrorDisplay || this.hasBeenTouched && this.dirtyValue;
+      this.errorValidationMessage = shouldShowValidationError ? this.validationMessage : "";
+    }
+  }
+  __decorateClass([
+    vividElement.attr
+  ], FormElementElement.prototype, "label");
+  __decorateClass([
+    vividElement.observable
+  ], FormElementElement.prototype, "errorValidationMessage");
+  return FormElementElement;
+};
+
+exports.FormElement = FormElement;

package/shared/form-element.js

@@ -0,0 +1,82 @@
+import { a as attr, o as observable } from './vivid-element.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const FormElement = (Base) => {
+  class FormElementElement extends Base {
+    constructor(...args) {
+      super(...args);
+      this.errorValidationMessage = "";
+      /**
+       * @internal
+       */
+      this.forceErrorDisplay = false;
+      /**
+       * @internal
+       */
+      this.hasBeenTouched = false;
+      this.#handleInvalidEvent = () => {
+        this.forceErrorDisplay = true;
+        this.validate();
+      };
+      this.addEventListener("blur", () => {
+        this.hasBeenTouched = true;
+        this.forceErrorDisplay = false;
+        this.validate();
+      });
+      this.addEventListener("focus", () => {
+        this.hasBeenTouched = false;
+      });
+      this.addEventListener("invalid", () => {
+        this.proxy.dispatchEvent(new Event("invalid"));
+      });
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+      super.connectedCallback();
+      this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
+    }
+    #handleInvalidEvent;
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.proxy.removeEventListener("invalid", this.#handleInvalidEvent);
+    }
+    /**
+     * @internal
+     */
+    formResetCallback() {
+      this.forceErrorDisplay = false;
+      super.formResetCallback();
+      this.validate();
+    }
+    /**
+     * @internal
+     */
+    validate() {
+      super.validate();
+      const shouldShowValidationError = this.forceErrorDisplay || this.hasBeenTouched && this.dirtyValue;
+      this.errorValidationMessage = shouldShowValidationError ? this.validationMessage : "";
+    }
+  }
+  __decorateClass([
+    attr
+  ], FormElementElement.prototype, "label");
+  __decorateClass([
+    observable
+  ], FormElementElement.prototype, "errorValidationMessage");
+  return FormElementElement;
+};
+
+export { FormElement as F };