powerpagestoolkit 2.7.0 → 2.7.2

package/dist/{bundle.js → src/index.js}

@@ -1,4 +1,5 @@
-// src/safeAjax.ts
+/* @ts-self-types="./index.d.ts" */
+// src/utils/safeAjax.ts
 function safeAjax(ajaxOptions) {
   const deferredAjax = $.Deferred();
   shell.getTokenDeferred().done(function(token) {
@@ -20,21 +21,21 @@ function safeAjax(ajaxOptions) {
   return deferredAjax.promise();
 }
 
-// src/API.ts
-var API = {
+// src/core/API.ts
+var API = class {
   /**
    * @param tableSetName The dataverse set name for the table that you are updating a record in
    * @param data The JSON of the fields and data that are to be updated on the targeted record
    * @returns a Promise resolving the successful results *[record id]* of the POST request, or rejecting the failed results *[error]* of the POST request.
    */
-  createRecord(tableSetName, data) {
+  static createRecord(tableSetName, data) {
     return new Promise((resolve, reject) => {
       safeAjax({
         type: "POST",
         url: `/_api/${tableSetName}`,
         data: JSON.stringify(data),
         contentType: "application/json",
-        success: function(response, status, xhr) {
+        success: function(_response, _status, xhr) {
           resolve(xhr.getResponseHeader("entityid"));
         },
         error: (error) => {
@@ -42,7 +43,7 @@ var API = {
         }
       });
     });
-  },
+  }
   /**
    *
    * @param tableSetName The DataVerse SET name of the table being queried
@@ -50,7 +51,7 @@ var API = {
    * @param selectColumns *OPTIONAL* if desired, enter your own custom OData query for advanced GET results. Format = select=column1,column2,column3...
    * @returns a Promise resolving the successful results of the GET request, or rejecting the failed results of the GET request
    */
-  getRecord(tableSetName, recordID, selectColumns) {
+  static getRecord(tableSetName, recordID, selectColumns) {
     return new Promise((resolve, reject) => {
       const url = `/_api/${tableSetName}(${recordID})${selectColumns ? `?$${selectColumns}` : ""}`;
       safeAjax({
@@ -60,14 +61,14 @@ var API = {
         error: reject
       });
     });
-  },
+  }
   /**
    *
    * @param tableSetName The dataverse set name of the table being queried
    * @param queryParameters *OPTIONAL* the OData query parameters for refining search results: *format = $filter=filters&$select=columns*
    * @returns a Promise resolving the successful results of the GET request, or rejecting the failed results of the GET request
    */
-  getMultiple(tableSetName, queryParameters) {
+  static getMultiple(tableSetName, queryParameters) {
     return new Promise((resolve, reject) => {
       const url = `/_api/${tableSetName}${queryParameters ? `?${queryParameters}` : ""}`;
       safeAjax({
@@ -79,7 +80,7 @@ var API = {
         error: reject
       });
     });
-  },
+  }
   /**
    *
    * @param tableSetName The dataverse set name for the table that you are updating a record in
@@ -87,7 +88,7 @@ var API = {
    * @param data The JSON of the fields and data that are to be updated on the targeted record
    * @returns A Promise with the results of the API execution
    */
-  updateRecord(tableSetName, recordId, data) {
+  static updateRecord(tableSetName, recordId, data) {
     return new Promise((resolve, reject) => {
       const url = `/_api/${tableSetName}(${recordId})`;
       safeAjax({
@@ -102,48 +103,14 @@ var API = {
 };
 var API_default = API;
 
-// src/DOMNodeReferenceArray.ts
-var DOMNodeReferenceArray = class extends Array {
-  /**
-   * Hides all the containers of the DOMNodeReference instances in the array.
-   */
-  hideAll() {
-    this.forEach((instance) => instance.hide());
-    return this;
-  }
-  /**
-   * Shows all the containers of the DOMNodeReference instances in the array.
-   */
-  showAll() {
-    this.forEach((instance) => instance.show());
-    return this;
-  }
-};
-function enhanceArray(array) {
-  const enhancedArray = new DOMNodeReferenceArray(...array);
-  return new Proxy(enhancedArray, {
-    get(target, prop, receiver) {
-      if (prop in target) {
-        return Reflect.get(target, prop, receiver);
-      }
-      if (typeof prop === "string") {
-        return target.find(
-          (instance) => instance.target.toString().replace(/[#\[\]]/g, "") === prop || instance.logicalName === prop
-        );
-      }
-      return void 0;
-    }
-  });
-}
-
-// src/waitFor.ts
-function waitFor(target, root = document, multiple = false, debounceTime) {
+// src/core/waitFor.ts
+function waitFor(target, root = document, multiple = false, debounceTime2) {
   return new Promise((resolve, reject) => {
     if (multiple) {
       let timeout;
       const observedElements = [];
       const observedSet = /* @__PURE__ */ new Set();
-      if (debounceTime < 1) {
+      if (debounceTime2 < 1) {
         return resolve(
           Array.from(root.querySelectorAll(target))
         );
@@ -164,11 +131,11 @@ function waitFor(target, root = document, multiple = false, debounceTime) {
           } else {
             reject(
               new Error(
-                `No elements found with target: "${target}" within ${debounceTime / 1e3} seconds. If the element you are expecting has not loaded yet, consider raising your timeout.`
+                `No elements found with target: "${target}" within ${debounceTime2 / 1e3} seconds. If the element you are expecting has not loaded yet, consider raising your timeout.`
               )
             );
           }
-        }, debounceTime);
+        }, debounceTime2);
       });
       observer.observe(root, {
         childList: true,
@@ -188,14 +155,10 @@ function waitFor(target, root = document, multiple = false, debounceTime) {
         observer.disconnect();
         reject(
           new Error(
-            `Element not found by target: "${target}" within ${debounceTime / 1e3} second. If the element you are expecting has not loaded yet, consider raising your timeout.`
+            `Element not found by target: "${target}" within ${debounceTime2 / 1e3} second. If the element you are expecting has not loaded yet, consider raising your timeout.`
           )
         );
-      }, debounceTime);
-      if (target instanceof HTMLElement) {
-        clearTimeout(timeout);
-        return resolve(target);
-      }
+      }, debounceTime2);
       const element = root.querySelector(target);
       if (element) {
         clearTimeout(timeout);
@@ -211,7 +174,7 @@ function waitFor(target, root = document, multiple = false, debounceTime) {
   });
 }
 
-// src/createInfoElement.ts
+// src/utils/createInfoElement.ts
 function CreateInfoEl(titleString, iconStyle) {
   if (typeof titleString !== "string") {
     throw new Error(
@@ -275,7 +238,22 @@ function CreateInfoEl(titleString, iconStyle) {
   return span;
 }
 
-// src/errors.ts
+// src/constants/symbols.ts
+var init = Symbol("__I");
+var destroy = Symbol("__D");
+var valueSync = Symbol("__VS");
+var dateSync = Symbol("__DS");
+var getElementValue = Symbol("__GEV");
+var attachVisibilityController = Symbol("__AVC");
+var attachRadioButtons = Symbol("__ARB");
+var bindMethods = Symbol("__B");
+var debounceTime = Symbol("__DT");
+var observers = Symbol("__O");
+var boundEventListeners = Symbol("__BEV");
+var isValidFormElement = Symbol("__VFE");
+var registerEventListener = Symbol("__REV");
+
+// src/errors/errors.ts
 var DOMNodeInitializationError = class extends Error {
   constructor(instance, error) {
     super(
@@ -303,29 +281,26 @@ var ValidationConfigError = class extends Error {
   }
 };
 
-// src/DOMNodeReference.ts
-var _init = Symbol("_I");
-var _destroy = Symbol("_D");
-var _valueSync = Symbol("_VS");
-var _dateSync = Symbol("_DS");
-var _getElementValue = Symbol("_GEV");
-var _updateRadioGroup = Symbol("_URG");
-var _attachVisibilityController = Symbol("_AVC");
-var _attachRadioButtons = Symbol("_ARB");
-var _bindMethods = Symbol("_B");
-var _debounceTime = Symbol("DT");
-var _observers = Symbol("O");
-var _boundEventListeners = Symbol("BEV");
+// src/core/DOMNodeReference.ts
+var EventTypes = {
+  CHECKBOX: "click",
+  RADIO: "click",
+  SELECT: "change",
+  TEXTAREA: "keyup",
+  DEFAULT: "input"
+};
 var DOMNodeReference = class _DOMNodeReference {
   // properties initialized in the constructor
   target;
   logicalName;
   root;
-  [_debounceTime];
+  [debounceTime];
   isLoaded;
   defaultDisplay;
-  [_observers] = [];
-  [_boundEventListeners] = [];
+  [observers] = [];
+  [boundEventListeners] = [];
+  isRadio = false;
+  radioType = null;
   /**
    * The value of the element that this node represents
    * stays in syncs with the live DOM elements?.,m  via event handler
@@ -339,47 +314,51 @@ var DOMNodeReference = class _DOMNodeReference {
    */
   /******/
   /******/
-  constructor(target, root = document.body, debounceTime) {
+  constructor(target, root = document.body, debounceTime2) {
     this.target = target;
-    if (typeof target === "string") {
-      let lName = null;
-      const bracketMatch = target.match(/\[([^\]]+)\]/);
-      if (bracketMatch) {
-        lName = bracketMatch[1];
-        const quoteMatch = lName.match(/["']([^"']+)["']/);
-        if (quoteMatch) {
-          lName = quoteMatch[1];
-        }
-      }
-      this.logicalName = (lName || target).replace(/[#\[\]]/g, "");
-    }
+    this.logicalName = this.extractLogicalName(target);
     this.root = root;
-    this[_debounceTime] = debounceTime;
+    this[debounceTime] = debounceTime2;
     this.isLoaded = false;
     this.defaultDisplay = "";
     this.value = null;
-    this[_bindMethods]();
+    this[bindMethods]();
   }
-  async [_init]() {
+  extractLogicalName(target) {
+    if (typeof target !== "string") return "";
+    const bracketMatch = target.match(/\[([^\]]+)\]/);
+    if (!bracketMatch) return target.replace(/[#\[\]]/g, "");
+    const content = bracketMatch[1];
+    const quoteMatch = content.match(/["']([^"']+)["']/);
+    return (quoteMatch?.[1] || content).replace(/[#\[\]]/g, "");
+  }
+  async [init]() {
     try {
       if (this.target instanceof HTMLElement) {
         this.element = this.target;
       } else {
-        this.element = await waitFor(this.target, this.root, false, this[_debounceTime]);
+        this.element = await waitFor(
+          this.target,
+          this.root,
+          false,
+          this[debounceTime]
+        );
       }
       if (!this.element) {
         throw new DOMNodeNotFoundError(this);
       }
-      if (this.element.classList.contains("boolean-radio")) {
-        await this[_attachRadioButtons]();
+      if (this.element.id && this.element.querySelectorAll(
+        `#${this.element.id} > input[type="radio"]`
+      ).length > 0) {
+        await this[attachRadioButtons]();
       }
-      this[_valueSync]();
-      this[_attachVisibilityController]();
+      this[valueSync]();
+      this[attachVisibilityController]();
       this.defaultDisplay = this.visibilityController.style.display;
       const observer = new MutationObserver((mutations) => {
         for (const mutation of mutations) {
           if (Array.from(mutation.removedNodes).includes(this.element)) {
-            this[_destroy]();
+            this[destroy]();
             observer.disconnect();
             break;
           }
@@ -395,70 +374,65 @@ var DOMNodeReference = class _DOMNodeReference {
       throw new DOMNodeInitializationError(this, errorMessage);
     }
   }
-  eventMapping = {
-    checkbox: "click",
-    radio: "click",
-    select: "change",
-    "select-multiple": "change",
-    textarea: "keyup"
-    // Add other input types as needed
-  };
   /**
    * Initializes value synchronization with appropriate event listeners
    * based on element type.
-   * @private
    */
-  async [_valueSync]() {
-    try {
-      this.updateValue();
-      let eventType;
-      if (this.element instanceof HTMLSelectElement) {
-        eventType = "change";
-      } else if (this.element instanceof HTMLInputElement) {
-        eventType = this.eventMapping[this.element.type] ?? "input";
-      } else if (this.element instanceof HTMLTextAreaElement) {
-        eventType = this.eventMapping[this.element.type] ?? "input";
-      } else {
-        eventType = "input";
-      }
-      this.element.addEventListener(eventType, this.updateValue);
-      this[_boundEventListeners].push({
-        element: this.element,
-        handler: this.updateValue,
-        event: eventType
-      });
-      if (this.element instanceof HTMLInputElement && this.element.dataset.type === "date") {
-        await this[_dateSync](this.element);
-      }
-    } catch (error) {
-      throw new DOMNodeInitializationError(
-        this,
-        `Failed to initialize value sync: ${error}`
-      );
+  [valueSync]() {
+    if (!this[isValidFormElement](this.element)) return;
+    this.updateValue();
+    const eventType = this.determineEventType();
+    this[registerEventListener](this.element, eventType, this.updateValue);
+    if (this.isDateInput()) {
+      this[dateSync](this.element);
     }
   }
-  async [_dateSync](element) {
+  determineEventType() {
+    if (this.element instanceof HTMLSelectElement) return "change";
+    if (!(this.element instanceof HTMLInputElement)) return EventTypes.DEFAULT;
+    return EventTypes[this.element.type.toUpperCase()] || EventTypes.DEFAULT;
+  }
+  isDateInput() {
+    return this.element instanceof HTMLInputElement && this.element.dataset.type === "date";
+  }
+  [isValidFormElement](element) {
+    return element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSpanElement || element instanceof HTMLButtonElement || element instanceof HTMLFieldSetElement;
+  }
+  [registerEventListener](element, eventType, handler) {
+    element.addEventListener(eventType, handler);
+    this[boundEventListeners].push({
+      element,
+      handler,
+      event: eventType
+    });
+  }
+  async [dateSync](element) {
     const parentElement = element.parentElement;
     if (!parentElement) {
       throw new Error("Date input must have a parent element");
     }
-    const dateNode = await waitFor("[data-date-format]", parentElement, false, 1500);
-    dateNode.addEventListener("select", this.updateValue);
-    const _handler = this.updateValue;
-    this[_boundEventListeners].push({
-      element: dateNode,
-      handler: _handler,
-      event: "select"
-    });
+    const dateNode = await waitFor(
+      "[data-date-format]",
+      parentElement,
+      false,
+      1500
+    );
+    this[registerEventListener](dateNode, "select", this.updateValue);
   }
   /**
    * Gets the current value of the element based on its type
-   * @private
+   * @protected
    * @returns Object containing value and optional checked state
    */
-  [_getElementValue]() {
+  [getElementValue]() {
     const input = this.element;
     const select = this.element;
+    if (this.yesRadio instanceof _DOMNodeReference && this.noRadio instanceof _DOMNodeReference) {
+      return {
+        value: this.yesRadio.checked,
+        checked: this.yesRadio.checked
+      };
+    }
     switch (input.type) {
       case "checkbox":
       case "radio":
@@ -480,28 +454,18 @@ var DOMNodeReference = class _DOMNodeReference {
         return {
           value: input.value !== "" ? Number(input.value) : null
         };
-      default:
+      default: {
         let cleanValue = input.value;
-        if (this.element.classList.contains("decimal") || this.element.classList.contains("money"))
+        if (this.element.classList.contains("decimal") || this.element.classList.contains("money")) {
           cleanValue = input.value.replace(/[$,]/g, "");
+        }
         return {
           value: this.element.classList.contains("decimal") || this.element.classList.contains("money") ? parseFloat(cleanValue) : cleanValue
         };
+      }
     }
   }
-  /**
-   * 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.checked = this.yesRadio.checked;
-      this.value = this.yesRadio.checked;
-    }
-  }
-  [_attachVisibilityController]() {
+  [attachVisibilityController]() {
     this.visibilityController = this.element;
     if (this.element.tagName === "TABLE") {
       const fieldset = this.element.closest("fieldset");
@@ -524,11 +488,26 @@ var DOMNodeReference = class _DOMNodeReference {
       }
     }
   }
-  async [_attachRadioButtons]() {
-    this.yesRadio = await createDOMNodeReference(`#${this.element.id}_1`);
-    this.noRadio = await createDOMNodeReference(`#${this.element.id}_0`);
+  async [attachRadioButtons]() {
+    if (!this.element) {
+      console.error(
+        "'this.element' not found: cannot attach radio buttons for ",
+        this.target
+      );
+      return;
+    }
+    this.yesRadio = await createDOMNodeReference('input[type="radio"][value="1"]', {
+      root: this.element
+    });
+    this.yesRadio.isRadio = true;
+    this.yesRadio.radioType = "truthy";
+    this.noRadio = await createDOMNodeReference('input[type="radio"][value="0"]', {
+      root: this.element
+    });
+    this.noRadio.isRadio = true;
+    this.noRadio.radioType = "falsy";
   }
-  [_bindMethods]() {
+  [bindMethods]() {
     const prototype = Object.getPrototypeOf(this);
     for (const key of Object.getOwnPropertyNames(prototype)) {
       const value = this[key];
@@ -537,15 +516,15 @@ var DOMNodeReference = class _DOMNodeReference {
       }
     }
   }
-  [_destroy]() {
-    this[_boundEventListeners]?.forEach((binding) => {
+  [destroy]() {
+    this[boundEventListeners]?.forEach((binding) => {
       binding.element?.removeEventListener(binding.event, binding.handler);
     });
-    this[_observers]?.forEach((observer) => {
+    this[observers]?.forEach((observer) => {
       observer.disconnect();
     });
-    this.yesRadio?.[_destroy]();
-    this.noRadio?.[_destroy]();
+    this.yesRadio?.[destroy]();
+    this.noRadio?.[destroy]();
     this.yesRadio = null;
     this.noRadio = null;
     this.isLoaded = false;
@@ -555,13 +534,19 @@ var DOMNodeReference = class _DOMNodeReference {
    * Updates the value and checked state based on element type
    * @public
    */
-  updateValue() {
-    const elementValue = this[_getElementValue]();
+  updateValue(e) {
+    if (e) {
+      e.stopPropagation();
+    }
+    if (this.yesRadio && this.noRadio) {
+      this.yesRadio.updateValue();
+      this.noRadio.updateValue();
+    }
+    const elementValue = this[getElementValue]();
     this.value = elementValue.value;
     if (elementValue.checked !== void 0) {
       this.checked = elementValue.checked;
     }
-    this[_updateRadioGroup]();
   }
   /**
    * Sets up an event listener based on the specified event type, executing the specified
@@ -577,14 +562,11 @@ var DOMNodeReference = class _DOMNodeReference {
         `Argument "eventHandler" must be a Function. Received: ${typeof eventHandler}`
       );
     }
-    this.element.addEventListener(eventType, eventHandler.bind(this));
-    const _element = this.element;
-    const _handler = eventHandler;
-    this[_boundEventListeners].push({
-      element: _element,
-      handler: _handler,
-      event: eventType
-    });
+    this[registerEventListener](
+      this.element,
+      eventType,
+      eventHandler.bind(this)
+    );
     return this;
   }
   /**
@@ -604,7 +586,6 @@ var DOMNodeReference = class _DOMNodeReference {
     return this;
   }
   /**
-   *
    * @param shouldShow - Either a function that returns true or false,
    * or a natural boolean to determine the visibility of this
    * @returns - Instance of this [provides option to method chain]
@@ -628,21 +609,17 @@ var DOMNodeReference = class _DOMNodeReference {
     if (value instanceof Function) {
       value = value();
     }
-    let eventType;
-    if (this.element instanceof HTMLSelectElement) {
-      eventType = "change";
-    } else if (this.element instanceof HTMLInputElement) {
-      eventType = this.eventMapping[this.element.type] ?? "input";
-    } else if (this.element instanceof HTMLTextAreaElement) {
-      eventType = this.eventMapping[this.element.type] ?? "input";
-    } else {
-      eventType = "input";
-    }
+    const eventType = this.determineEventType();
     this.element.dispatchEvent(new Event(eventType, { bubbles: false }));
-    if (this.element.classList.contains("boolean-radio") && this.yesRadio instanceof _DOMNodeReference && this.noRadio instanceof _DOMNodeReference) {
+    if (this.yesRadio instanceof _DOMNodeReference && this.noRadio instanceof _DOMNodeReference) {
       this.yesRadio.element.checked = value;
       this.noRadio.element.checked = !value;
       this.value = value;
+      this.checked = value;
+      this.element.checked = value;
+    } else if (this.isRadio || this.element.type === "radio") {
+      this.checked = value;
+      this.element.checked = value;
     } else {
       this.element.value = value;
     }
@@ -711,7 +688,9 @@ var DOMNodeReference = class _DOMNodeReference {
         );
         if (childInputs.length > 0) {
           const promises = childInputs.map(async (input) => {
-            const inputRef = await createDOMNodeReference(input, { multiple: false });
+            const inputRef = await createDOMNodeReference(
+              input
+            );
             return inputRef.clearValue();
           });
           await Promise.all(promises);
@@ -740,7 +719,7 @@ var DOMNodeReference = class _DOMNodeReference {
   enable() {
     try {
       this.element.disabled = false;
-    } catch (e) {
+    } catch (_error) {
       throw new Error(
         `There was an error trying to disable the target: ${this.target}`
       );
@@ -748,7 +727,6 @@ var DOMNodeReference = class _DOMNodeReference {
     return this;
   }
   /**
-   *
    * @param elements - The elements to prepend to the element targeted by this.
    * @returns - Instance of this [provides option to method chain]
    */
@@ -830,7 +808,6 @@ var DOMNodeReference = class _DOMNodeReference {
     return this;
   }
   /**
-   *
    * @param options and object containing the styles you want to set : {key: value} e.g.: {'display': 'block'}
    * @returns - Instance of this [provides option to method chain]
    */
@@ -851,7 +828,7 @@ var DOMNodeReference = class _DOMNodeReference {
    * @returns - Instance of this [provides option to method chain]
    */
   uncheckRadios() {
-    if (this.yesRadio && this.noRadio) {
+    if (this.yesRadio instanceof _DOMNodeReference && this.noRadio instanceof _DOMNodeReference) {
       this.yesRadio.element.checked = false;
       this.noRadio.element.checked = false;
     } else {
@@ -863,7 +840,7 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    * Applies a business rule to manage visibility, required state, value, and disabled state dynamically.
-   *
+   * @see {@link BusinessRule}
    * @param rule The business rule containing conditions for various actions.
    * @param dependencies For re-evaluation conditions when the state of the dependencies change
    * @returns Instance of this for method chaining.
@@ -872,11 +849,11 @@ var DOMNodeReference = class _DOMNodeReference {
     try {
       if (rule.setVisibility) {
         const [condition, clearValuesOnHide = true] = rule.setVisibility;
-        const initialState = condition.bind(this)();
+        const initialState = condition.call(this);
         this.toggleVisibility(initialState);
         if (dependencies.length) {
           this._configDependencyTracking(
-            () => this.toggleVisibility(condition.bind(this)()),
+            () => this.toggleVisibility(condition.call(this)),
             dependencies,
             {
               clearValuesOnHide,
@@ -891,12 +868,11 @@ var DOMNodeReference = class _DOMNodeReference {
         const [isRequired, isValid] = rule.setRequired;
         const fieldDisplayName = (() => {
           let label = this.getLabel();
-          if (!label)
-            return new Error(
-              `There was an error accessing the label for this element: ${String(
-                this.target
-              )}`
+          if (!label) {
+            throw new Error(
+              `There was an error accessing the label for this element: ${this.target}`
             );
+          }
           label = label.innerHTML;
           if (label.length > 50) {
             label = label.substring(0, 50) + "...";
@@ -914,29 +890,30 @@ var DOMNodeReference = class _DOMNodeReference {
           controltovalidate: this.element.id,
           errormessage: `<a href='#${this.element.id}_label'>${fieldDisplayName} is a required field</a>`,
           evaluationfunction: () => {
-            const isFieldRequired = isRequired.bind(this)();
+            const isFieldRequired = isRequired.call(this);
             const isFieldVisible = window.getComputedStyle(this.visibilityController).display !== "none";
-            return !isFieldRequired || !isFieldVisible || isValid.bind(this)(isRequired.bind(this));
+            return !isFieldRequired || !isFieldVisible || isValid.call(this, isFieldRequired);
           }
         });
         Page_Validators.push(newValidator);
-        this.setRequiredLevel(isRequired.bind(this)());
+        this.setRequiredLevel(isRequired.call(this));
         this._configDependencyTracking(
-          () => this.setRequiredLevel(isRequired.bind(this)()),
+          () => this.setRequiredLevel(isRequired.call(this)),
           dependencies,
           { clearValuesOnHide: false }
         );
       }
       if (rule.setValue) {
-        const [condition, value] = rule.setValue;
-        if (condition.bind(this)()) {
-          this.setValue.bind(this)(value);
+        let [condition, value] = rule.setValue;
+        if (value instanceof Function) value = value();
+        if (condition.call(this)) {
+          this.setValue.call(this, value);
         }
         if (dependencies.length) {
           this._configDependencyTracking(
             () => {
-              if (condition.bind(this)()) {
-                this.setValue.bind(this)(value);
+              if (condition.call(this)) {
+                this.setValue.call(this, value);
               }
             },
             dependencies,
@@ -945,12 +922,12 @@ var DOMNodeReference = class _DOMNodeReference {
         }
       }
       if (rule.setDisabled) {
-        const [condition] = rule.setDisabled;
-        condition.bind(this)() ? this.disable() : this.enable();
+        const condition = rule.setDisabled;
+        condition.call(this) ? this.disable() : this.enable();
         if (dependencies.length) {
           this._configDependencyTracking(
             () => {
-              condition.bind(this)() ? this.enable() : this.disable();
+              condition.call(this) ? this.enable() : this.disable();
             },
             dependencies,
             {
@@ -1069,7 +1046,7 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    * Sets up tracking for dependencies using both event listeners and mutation observers.
-   * @private
+   * @protected
    * @param handler The function to execute when dependencies change
    * @param dependencies Array of dependent DOM nodes to track
    * @param options Additional configuration options. clearValuesOnHide defaults to false.
@@ -1105,19 +1082,9 @@ var DOMNodeReference = class _DOMNodeReference {
           this.clearValue();
         }
       };
-      dep.on("change", handleChange);
-      this[_boundEventListeners].push({
-        element: dep.element,
-        event: "change",
-        handler: handleChange
-      });
+      this[registerEventListener](dep.element, "change", handleChange);
       if (trackInputEvents) {
-        dep.on("input", handleChange);
-        this[_boundEventListeners].push({
-          element: dep.element,
-          event: "input",
-          handler: handleChange
-        });
+        this[registerEventListener](dep.element, "input", handleChange);
       }
       if (observeVisibility) {
         const observer = new MutationObserver(() => {
@@ -1133,12 +1100,12 @@ var DOMNodeReference = class _DOMNodeReference {
           attributeFilter: ["style"],
           subtree: false
         });
-        this[_observers].push(observer);
+        this[observers].push(observer);
       }
       if (trackRadioButtons && dep.yesRadio && dep.noRadio) {
         [dep.yesRadio, dep.noRadio].forEach((radio) => {
           radio.on("change", handleChange);
-          this[_boundEventListeners].push({
+          this[boundEventListeners].push({
             element: radio.element,
             event: "change",
             handler: handleChange
@@ -1190,15 +1157,51 @@ var DOMNodeReference = class _DOMNodeReference {
       subtree: true,
       childList: true
     });
-    this[_observers].push(observer);
+    this[observers].push(observer);
   }
 };
 
-// src/createDOMNodeReferences.ts
+// src/core/DOMNodeReferenceArray.ts
+var DOMNodeReferenceArray = class extends Array {
+  /**
+   * Hides all the containers of the DOMNodeReference instances in the array.
+   */
+  hideAll() {
+    this.forEach((instance) => instance.hide());
+    return this;
+  }
+  /**
+   * Shows all the containers of the DOMNodeReference instances in the array.
+   */
+  showAll() {
+    this.forEach((instance) => instance.show());
+    return this;
+  }
+};
+
+// src/utils/enhanceArray.ts
+function enhanceArray(array) {
+  const enhancedArray = new DOMNodeReferenceArray(...array);
+  return new Proxy(enhancedArray, {
+    get(target, prop, receiver) {
+      if (prop in target) {
+        return Reflect.get(target, prop, receiver);
+      }
+      if (typeof prop === "string") {
+        return target.find(
+          (instance) => instance.target.toString().replace(/[#\[\]]/g, "") === prop || instance.logicalName === prop
+        );
+      }
+      return void 0;
+    }
+  });
+}
+
+// src/core/createDOMNodeReferences.ts
 async function createDOMNodeReference(target, options = {
   multiple: false,
   root: document.body,
-  timeout: 0
+  timeoutMs: 0
 }) {
   try {
     if (typeof options !== "object") {
@@ -1207,7 +1210,7 @@ async function createDOMNodeReference(target, options = {
       );
     }
     validateOptions(options);
-    const { multiple = false, root = document.body, timeout = 0 } = options;
+    const { multiple = false, root = document.body, timeoutMs = 0 } = options;
     const isMultiple = typeof multiple === "function" ? multiple() : multiple;
     if (isMultiple) {
       if (typeof target !== "string") {
@@ -1215,25 +1218,25 @@ async function createDOMNodeReference(target, options = {
           `'target' must be of type 'string' if 'multiple' is set to 'true'. Received type: '${typeof target}'`
         );
       }
-      const elements = await waitFor(target, root, true, timeout);
+      const elements = await waitFor(target, root, true, timeoutMs);
       const initializedElements = await Promise.all(
         elements.map(async (element) => {
-          const instance2 = new DOMNodeReference(element, root, timeout);
-          await instance2[_init]();
+          const instance2 = new DOMNodeReference(element, root, timeoutMs);
+          await instance2[init]();
           return new Proxy(instance2, createProxyHandler());
         })
       );
       return enhanceArray(initializedElements);
     }
-    const instance = new DOMNodeReference(target, root, timeout);
-    await instance[_init]();
+    const instance = new DOMNodeReference(target, root, timeoutMs);
+    await instance[init]();
     return new Proxy(instance, createProxyHandler());
   } catch (e) {
     throw new Error(e);
   }
 }
 function validateOptions(options) {
-  const { multiple = false, root = document.body, timeout = 0 } = options;
+  const { multiple = false, root = document.body, timeoutMs = 0 } = options;
   if (typeof multiple !== "boolean" && typeof multiple !== "function") {
     throw new Error(
       `'multiple' must be of type 'boolean' or 'function'. Received type: '${typeof multiple}'`
@@ -1252,9 +1255,9 @@ function validateOptions(options) {
       `'root' must be of type 'HTMLElement'. Received type: '${typeof root}'`
     );
   }
-  if (typeof timeout !== "number") {
+  if (typeof timeoutMs !== "number") {
     throw new Error(
-      `'timeout' must be of type 'number'. Received type: '${typeof timeout}'`
+      `'timeout' must be of type 'number'. Received type: '${typeof timeoutMs}'`
     );
   }
   return;
@@ -1275,7 +1278,7 @@ function createProxyHandler() {
   };
 }
 
-// src/bindForm.ts
+// src/core/bindForm.ts
 async function bindForm(formId) {
   try {
     const form = await API_default.getRecord("systemforms", formId);
@@ -1323,8 +1326,9 @@ function getIdentifyingAttribute(tagName) {
 }
 function createReferenceString(tagName, datafieldname) {
   if (tagName === "control") return `#${datafieldname}`;
-  if (tagName === "tab" || tagName === "section")
+  if (tagName === "tab" || tagName === "section") {
     return `[data-name="${datafieldname}"]`;
+  }
   return null;
 }
 export {
@@ -1333,11 +1337,13 @@ export {
   createDOMNodeReference as createRef,
   waitFor
 };
+/*! For license information please see index.js.LEGAL.txt */
+//# sourceMappingURL=index.js.map
 
 
-          (function() {
-            const style = document.createElement('style');
-            style.textContent = "/* src/style.css */\n.info-icon {\n  position: relative;\n  display: inline-block;\n}\n.info-icon .fa-info-circle {\n  cursor: pointer;\n}\n.info-icon .flyout-content {\n  max-width: calc(100vw - 20px);\n  display: none;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  color: #000;\n  background-color: #f9f9f9;\n  padding: 10px;\n  border: 1px solid #ddd;\n  z-index: 1;\n  min-width: 200px;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);\n  border-radius: 4px;\n}\n@media (max-width: 600px) {\n  .info-icon .flyout-content {\n    max-width: 95vw;\n    padding: 12px;\n    font-size: 0.9em;\n    display: block;\n    right: auto;\n  }\n}\n.required-field::after {\n  content: \" *\" !important;\n  color: #f00 !important;\n}\n";
-            document.head.appendChild(style);
-          })();
-        
+      if (typeof document !== 'undefined') {
+        const style = document.createElement('style');
+        style.textContent = ".info-icon {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.info-icon .fa-info-circle {\r\n  cursor: pointer; /* Ensures the icon is recognized as interactive */\r\n}\r\n\r\n.info-icon .flyout-content {\r\n  max-width: calc(100vw - 20px); /* 20px margin on both sides */\r\n  display: none; /* Initially hidden */\r\n  position: absolute;\r\n  left: 50%; /* Center horizontally */\r\n  transform: translateX(-50%); /* Adjust positioning */\r\n  color: #000;\r\n  background-color: #f9f9f9;\r\n  padding: 10px;\r\n  border: 1px solid #ddd;\r\n  z-index: 1;\r\n  min-width: 200px; /* Minimum width for better readability */\r\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);\r\n  border-radius: 4px; /* Rounded corners */\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .info-icon .flyout-content {\r\n    max-width: 95vw;\r\n    padding: 12px;\r\n    font-size: 0.9em;\r\n    display: block;\r\n    right: auto;\r\n  }\r\n}\r\n\r\n.required-field::after {\r\n  content: \" *\" !important;\r\n  color: #f00 !important;\r\n}\r\n";
+        document.head.appendChild(style);
+      }
+