@vonage/vivid 4.12.1 → 4.14.0

package/shared/form-associated.cjs

@@ -1,469 +1,434 @@
 'use strict';
 
-const index = require('./index.cjs');
-const keyCodes = require('./key-codes2.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
+const keyCodes = require('./key-codes.cjs');
 
 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
- */
+const supportsElementInternals = ElementInternalsKey in window && "setFormValue" in window[ElementInternalsKey].prototype;
+const InternalsMap = /* @__PURE__ */ new WeakMap();
 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 index.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;
-            }
-            index.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;
-            }
-            index.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() {
-            super.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 keyCodes.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();
-        }
-    };
-    index.attr({ mode: "boolean" })(C.prototype, "disabled");
-    index.attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
-    index.attr({ attribute: "current-value" })(C.prototype, "currentValue");
-    index.attr(C.prototype, "name");
-    index.attr({ mode: "boolean" })(C.prototype, "required");
-    index.observable(C.prototype, "value");
-    return C;
+  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) {
+        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) {
+        const parentLabels = this.proxy.labels;
+        const forLabels = Array.from(
+          this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`)
+        );
+        return Object.freeze(forLabels.concat(Array.from(parentLabels)));
+      } else {
+        return defineVividComponent.emptyArray;
+      }
+    }
+    /**
+     * 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`
+     */
+    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
+     *
+     * @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 (!this.dirtyValue) {
+        this.value = this.initialValue;
+        this.dirtyValue = false;
+      }
+    }
+    /**
+     * 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`
+     */
+    disabledChanged(_previous, _next) {
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.disabled = this.disabled;
+      }
+      defineVividComponent.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`
+     */
+    nameChanged(_previous, _next) {
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.name = this.name;
+      }
+    }
+    /**
+     * 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`
+     */
+    requiredChanged(_previous, _next) {
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.required = this.required;
+      }
+      defineVividComponent.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() {
+      super.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() {
+      if (!this.proxyInitialized) {
+        this.proxyInitialized = true;
+        this.proxy.style.display = "none";
+        this.proxyEventsToBlock.forEach(
+          (name) => this.proxy.addEventListener(name, this.stopPropagation)
+        );
+        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);
+      }
+      this.shadowRoot.appendChild(this.proxySlot);
+      this.appendChild(this.proxy);
+    }
+    /**
+     * Detach the proxy element from the DOM
+     */
+    detachProxy() {
+      this.removeChild(this.proxy);
+      this.shadowRoot.removeChild(this.proxySlot);
+    }
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(anchor) {
+      if (this.proxy instanceof HTMLElement && this.elementInternals) {
+        const isValid = this.proxy.validity.valid;
+        const control = this.control;
+        const controlIsInvalidDueToMinOrMaxLength = control && control.validity && !control.validity.valid && (control.validity.tooShort || control.validity.tooLong);
+        if (isValid && controlIsInvalidDueToMinOrMaxLength) {
+          this.setValidity(control.validity, control.validationMessage, anchor);
+        } else {
+          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 keyCodes.keyEnter:
+          if (this.form instanceof HTMLFormElement) {
+            const defaultButton = this.form.querySelector(
+              "[type=submit]"
+            );
+            defaultButton?.click();
+          }
+          break;
+      }
+    }
+    /**
+     * Used to stop propagation of proxy element events
+     * @param e - Event object
+     */
+    stopPropagation(e) {
+      e.stopPropagation();
+    }
+  };
+  defineVividComponent.attr({ mode: "boolean" })(C.prototype, "disabled");
+  defineVividComponent.attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
+  defineVividComponent.attr({ attribute: "current-value" })(C.prototype, "currentValue");
+  defineVividComponent.attr(C.prototype, "name");
+  defineVividComponent.attr({ mode: "boolean" })(C.prototype, "required");
+  defineVividComponent.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;
-        }
+  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;
+      this.dirtyChecked = false;
+    }
+    /**
+     * @internal
+     */
+    checkedAttributeChanged() {
+      this.defaultChecked = this.checkedAttribute;
+    }
+    /**
+     * @internal
+     */
+    defaultCheckedChanged() {
+      if (!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 !== void 0) {
+        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;
     }
-    index.attr({ attribute: "checked", mode: "boolean" })(D.prototype, "checkedAttribute");
-    index.attr({ attribute: "current-checked", converter: index.booleanConverter })(D.prototype, "currentChecked");
-    index.observable(D.prototype, "defaultChecked");
-    index.observable(D.prototype, "checked");
-    return D;
+  }
+  defineVividComponent.attr({ attribute: "checked", mode: "boolean" })(
+    D.prototype,
+    "checkedAttribute"
+  );
+  defineVividComponent.attr({ attribute: "current-checked", converter: defineVividComponent.booleanConverter })(
+    D.prototype,
+    "currentChecked"
+  );
+  defineVividComponent.observable(D.prototype, "defaultChecked");
+  defineVividComponent.observable(D.prototype, "checked");
+  return D;
 }
 
 exports.CheckableFormAssociated = CheckableFormAssociated;