@vonage/vivid 4.24.0 → 4.25.0

package/shared/form-associated.cjs

@@ -3,24 +3,28 @@
 const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.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 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
@@ -28,8 +32,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 || "";
@@ -48,8 +56,6 @@ function FormAssociated(BaseCtor) {
     }
     /**
      * Returns the validity state of the element
-     *
-     * @alpha
      */
     get validity() {
       return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
@@ -57,8 +63,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;
@@ -66,8 +70,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;
@@ -96,32 +98,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) {
@@ -130,12 +127,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) {
@@ -144,12 +136,7 @@ function FormAssociated(BaseCtor) {
       vividElement.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) {
@@ -157,12 +144,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) {
@@ -174,6 +156,7 @@ function FormAssociated(BaseCtor) {
     /**
      * The element internals object. Will only exist
      * in browsers supporting the attachInternals API
+     * @internal
      */
     get elementInternals() {
       if (!supportsElementInternals) {
@@ -236,6 +219,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) {
@@ -248,16 +232,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) {
@@ -283,12 +272,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;
@@ -309,12 +305,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 keyCodes.keyEnter:
@@ -330,53 +330,52 @@ function FormAssociated(BaseCtor) {
     /**
      * Used to stop propagation of proxy element events
      * @param e - Event object
+     * @internal
      */
     stopPropagation(e) {
       e.stopPropagation();
     }
-  };
-  vividElement.attr({ mode: "boolean" })(C.prototype, "disabled");
-  vividElement.attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
-  vividElement.attr({ attribute: "current-value" })(C.prototype, "currentValue");
-  vividElement.attr(C.prototype, "name");
-  vividElement.attr({ mode: "boolean" })(C.prototype, "required");
-  vividElement.observable(C.prototype, "value");
-  return C;
-}
-function CheckableFormAssociated(BaseCtor) {
-  class C extends FormAssociated(BaseCtor) {
   }
-  class D extends C {
-    constructor(...args) {
-      super(args);
+  __decorateClass([
+    vividElement.attr({ attribute: "current-value" })
+  ], FormAssociatedElement.prototype, "value");
+  __decorateClass([
+    vividElement.attr({ mode: "fromView", attribute: "value" })
+  ], FormAssociatedElement.prototype, "initialValue");
+  __decorateClass([
+    vividElement.attr({ mode: "boolean" })
+  ], FormAssociatedElement.prototype, "disabled");
+  __decorateClass([
+    vividElement.attr
+  ], FormAssociatedElement.prototype, "name");
+  __decorateClass([
+    vividElement.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
@@ -387,11 +386,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;
@@ -401,35 +402,58 @@ 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;
     }
   }
-  vividElement.attr({ attribute: "checked", mode: "boolean" })(
-    D.prototype,
-    "checkedAttribute"
-  );
-  vividElement.attr({ attribute: "current-checked", converter: vividElement.booleanConverter })(
-    D.prototype,
-    "currentChecked"
-  );
-  vividElement.observable(D.prototype, "defaultChecked");
-  vividElement.observable(D.prototype, "checked");
-  return D;
-}
+  __decorateClass([
+    vividElement.attr({
+      attribute: "checked",
+      mode: "boolean"
+    })
+  ], CheckableFormAssociatedElement.prototype, "defaultChecked");
+  __decorateClass([
+    vividElement.attr({ attribute: "current-checked", converter: currentCheckedConverter })
+  ], CheckableFormAssociatedElement.prototype, "checked");
+  return CheckableFormAssociatedElement;
+};
 
 exports.CheckableFormAssociated = CheckableFormAssociated;
 exports.FormAssociated = FormAssociated;