powerpagestoolkit 2.5.2 → 2.5.301

package/dist/DOMNodeReference.d.ts

@@ -38,8 +38,28 @@ export declare const _init: unique symbol;
      */
     /******/ /******/ constructor(target: HTMLElement | string);
     [_init](): Promise<void>;
+    /**
+     * Initializes value synchronization with appropriate event listeners
+     * based on element type.
+     * @private
+     */
     private _initValueSync;
+    /**
+     * Updates the value and checked state based on element type
+     * @public
+     */
     updateValue(): void;
+    /**
+     * Gets the current value of the element based on its type
+     * @private
+     * @returns {ElementValue} Object containing value and optional checked state
+     */
+    private getElementValue;
+    /**
+     * Updates related radio buttons if this is part of a radio group
+     * @private
+     */
+    private updateRadioGroup;
     private _attachVisibilityController;
     private _attachRadioButtons;
     /**
@@ -81,6 +101,14 @@ export declare const _init: unique symbol;
      * @returns - Instance of this
      */
     disable(): DOMNodeReference;
+    /**
+     * Clears all values and states of the element.
+     * Handles different input types appropriately.
+     *
+     * @returns {DOMNodeReference} Instance of this for method chaining
+     * @throws {Error} If clearing values fails
+     */
+    clearValues(): Promise<DOMNodeReference>;
     /**
      * Enables the element so that users can input data
      * @returns - Instance of this
@@ -156,18 +184,18 @@ export declare const _init: unique symbol;
      */
     uncheckRadios(): DOMNodeReference;
     /**
-    * Configures conditional rendering for the target element based on a condition
-    * and the visibility of one or more trigger elements.
-    *
-    * @param {() => boolean} condition - A function that returns a boolean to determine
-    * the visibility of the target element. If `condition()` returns true, the element is shown;
-    * otherwise, it is hidden.
-    * @param {Array<DOMNodeReference>} [dependencies] - An array of `DOMNodeReference` instances. Event listeners are
-    * registered on each to toggle the visibility of the target element based on the `condition` and the visibility of
-    * the target node.
-    * @throws {ConditionalRenderingError} When there's an error in setting up conditional rendering
-    * @returns {DOMNodeReference} - Instance of this
-    */
+     * Configures conditional rendering for the target element based on a condition
+     * and the visibility of one or more trigger elements.
+     *
+     * @param {() => boolean} condition - A function that returns a boolean to determine
+     * the visibility of the target element. If `condition()` returns true, the element is shown;
+     * otherwise, it is hidden.
+     * @param {Array<DOMNodeReference>} [dependencies] - An array of `DOMNodeReference` instances. Event listeners are
+     * registered on each to toggle the visibility of the target element based on the `condition` and the visibility of
+     * the target node.
+     * @throws {ConditionalRenderingError} When there's an error in setting up conditional rendering
+     * @returns {DOMNodeReference} - Instance of this
+     */
     configureConditionalRendering(condition: () => boolean, dependencies?: Array<DOMNodeReference>): DOMNodeReference;
     /**
      * Sets up validation and requirement rules for the field with enhanced error handling and dynamic updates.

package/dist/bundle.js

@@ -252,47 +252,80 @@ var DOMNodeReference = class _DOMNodeReference {
       throw new DOMNodeInitializationError(this, e);
     }
   }
-  // Function to update this.value based on element type
+  /**
+   * Initializes value synchronization with appropriate event listeners
+   * based on element type.
+   * @private
+   */
   _initValueSync() {
     this.updateValue();
-    const elementType = this.element.type;
-    if (elementType === "checkbox" || elementType === "radio") {
-      this.element.addEventListener("click", this.updateValue.bind(this));
-    } else if (elementType === "select-one" || elementType === "select" || elementType === "select-multiple") {
-      this.element.addEventListener("change", this.updateValue.bind(this));
-    } else {
-      this.element.addEventListener("input", this.updateValue.bind(this));
-    }
+    const input = this.element;
+    const eventMapping = {
+      checkbox: "click",
+      radio: "click",
+      "select-one": "change",
+      select: "change",
+      "select-multiple": "change"
+    };
+    const boundUpdateValue = this.updateValue.bind(this);
+    const eventType = eventMapping[input.type] || "input";
+    this.element.addEventListener(eventType, boundUpdateValue);
   }
+  /**
+   * Updates the value and checked state based on element type
+   * @public
+   */
   updateValue() {
-    switch (this.element.type) {
+    const elementValue = this.getElementValue();
+    this.value = elementValue.value;
+    if (elementValue.checked !== void 0) {
+      this.checked = elementValue.checked;
+    }
+    this.updateRadioGroup();
+  }
+  /**
+   * Gets the current value of the element based on its type
+   * @private
+   * @returns {ElementValue} Object containing value and optional checked state
+   */
+  getElementValue() {
+    const input = this.element;
+    const select = this.element;
+    switch (input.type) {
       case "checkbox":
       case "radio":
-        this.value = this.element.checked;
-        this.checked = this.element.checked;
-        break;
+        return {
+          value: input.checked,
+          checked: input.checked
+        };
       case "select-multiple":
-        this.value = Array.from(
-          this.element.selectedOptions
-        ).map((option) => option.value);
-        break;
+        return {
+          value: Array.from(select.selectedOptions).map(
+            (option) => option.value
+          )
+        };
       case "select-one":
-        this.value = this.element.value;
-        break;
+        return {
+          value: select.value
+        };
       case "number":
-        this.value = this.element.value !== "" ? Number(this.element.value) : null;
-        break;
+        return {
+          value: input.value !== "" ? Number(input.value) : null
+        };
       default:
-        if (this.element.classList.contains("decimal")) {
-          this.value = parseFloat(this.element.value);
-        } else {
-          this.value = this.element.value;
-        }
-        break;
+        return {
+          value: this.element.classList.contains("decimal") ? parseFloat(input.value) : input.value
+        };
     }
-    if (this.yesRadio instanceof _DOMNodeReference) {
+  }
+  /**
+   * Updates related radio buttons if this is part of a radio group
+   * @private
+   */
+  updateRadioGroup() {
+    if (this.yesRadio instanceof _DOMNodeReference && this.noRadio instanceof _DOMNodeReference) {
       this.yesRadio.updateValue();
-      this.noRadio.updateValue();
+      this.noRadio?.updateValue();
       this.checked = this.yesRadio.checked;
       this.value = this.yesRadio.checked;
     }
@@ -399,6 +432,75 @@ var DOMNodeReference = class _DOMNodeReference {
     }
     return this;
   }
+  /**
+   * Clears all values and states of the element.
+   * Handles different input types appropriately.
+   *
+   * @returns {DOMNodeReference} Instance of this for method chaining
+   * @throws {Error} If clearing values fails
+   */
+  async clearValues() {
+    try {
+      const element = this.element;
+      if (element instanceof HTMLInputElement) {
+        switch (element.type.toLowerCase()) {
+          case "checkbox":
+          case "radio":
+            element.checked = false;
+            this.checked = false;
+            this.value = false;
+            break;
+          case "number":
+            element.value = "";
+            this.value = "";
+            break;
+          default:
+            element.value = "";
+            this.value = "";
+            break;
+        }
+      } else if (element instanceof HTMLSelectElement) {
+        if (element.multiple) {
+          Array.from(element.options).forEach(
+            (option) => option.selected = false
+          );
+          this.value = [];
+        } else {
+          element.selectedIndex = -1;
+          this.value = "";
+        }
+      } else if (element instanceof HTMLTextAreaElement) {
+        element.value = "";
+        this.value = "";
+      } else {
+        this.value = "";
+        const childInputs = Array.from(
+          this.element.querySelectorAll("input, select, textarea")
+        );
+        if (childInputs.length > 0) {
+          const clearPromises = childInputs.map(async (input) => {
+            const inputRef = await createDOMNodeReference(input);
+            return inputRef.clearValues();
+          });
+          await Promise.all(clearPromises);
+        }
+      }
+      if (this.yesRadio instanceof _DOMNodeReference && this.noRadio instanceof _DOMNodeReference) {
+        await this.yesRadio.clearValues();
+        await this.noRadio.clearValues();
+      }
+      const events = [
+        new Event("input", { bubbles: true }),
+        new Event("change", { bubbles: true }),
+        new Event("click", { bubbles: true })
+      ];
+      events.forEach((event) => this.element.dispatchEvent(event));
+      return this;
+    } catch (error) {
+      const errorMessage = `Failed to clear values for element with target "${this.target}": ${error instanceof Error ? error.message : String(error)}`;
+      throw new Error(errorMessage);
+    }
+  }
   /**
    * Enables the element so that users can input data
    * @returns - Instance of this
@@ -535,18 +637,18 @@ var DOMNodeReference = class _DOMNodeReference {
     return this;
   }
   /**
-  * Configures conditional rendering for the target element based on a condition
-  * and the visibility of one or more trigger elements.
-  *
-  * @param {() => boolean} condition - A function that returns a boolean to determine
-  * the visibility of the target element. If `condition()` returns true, the element is shown;
-  * otherwise, it is hidden.
-  * @param {Array<DOMNodeReference>} [dependencies] - An array of `DOMNodeReference` instances. Event listeners are
-  * registered on each to toggle the visibility of the target element based on the `condition` and the visibility of
-  * the target node.
-  * @throws {ConditionalRenderingError} When there's an error in setting up conditional rendering
-  * @returns {DOMNodeReference} - Instance of this
-  */
+   * Configures conditional rendering for the target element based on a condition
+   * and the visibility of one or more trigger elements.
+   *
+   * @param {() => boolean} condition - A function that returns a boolean to determine
+   * the visibility of the target element. If `condition()` returns true, the element is shown;
+   * otherwise, it is hidden.
+   * @param {Array<DOMNodeReference>} [dependencies] - An array of `DOMNodeReference` instances. Event listeners are
+   * registered on each to toggle the visibility of the target element based on the `condition` and the visibility of
+   * the target node.
+   * @throws {ConditionalRenderingError} When there's an error in setting up conditional rendering
+   * @returns {DOMNodeReference} - Instance of this
+   */
   configureConditionalRendering(condition, dependencies) {
     try {
       if (typeof condition !== "function") {
@@ -561,14 +663,18 @@ var DOMNodeReference = class _DOMNodeReference {
         );
         return this;
       }
-      const observers = [];
       dependencies.forEach((node) => {
         if (!node || !(node instanceof _DOMNodeReference)) {
-          throw new TypeError("Each dependency must be a valid DOMNodeReference instance");
+          throw new TypeError(
+            "Each dependency must be a valid DOMNodeReference instance"
+          );
         }
         const handleChange = () => {
           try {
             this.toggleVisibility(condition());
+            if (condition() === false) {
+              this.clearValues();
+            }
           } catch (error) {
             console.error("Error in change handler:", error);
           }
@@ -576,7 +682,9 @@ var DOMNodeReference = class _DOMNodeReference {
         node.on("change", handleChange);
         const observer = new MutationObserver(() => {
           try {
-            const display = window.getComputedStyle(node.visibilityController).display;
+            const display = window.getComputedStyle(
+              node.visibilityController
+            ).display;
             this.toggleVisibility(display !== "none" && condition());
           } catch (error) {
             0;
@@ -588,7 +696,6 @@ var DOMNodeReference = class _DOMNodeReference {
           attributes: true,
           attributeFilter: ["style"]
         });
-        observers.push(observer);
       });
       return this;
     } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerpagestoolkit",
-  "version": "2.5.2",
+  "version": "2.5.301",
   "description": "Reference, manipulate, and engage with Power Pages sites through the nodes in the DOM; use a variety of custom methods that allow customizing your power pages site quicker and easier.  ",
   "main": "./dist/bundle.js",
   "types": "./dist/index.d.ts",