powerpagestoolkit 2.7.121 → 2.7.131

package/dist/index.iife.js

@@ -0,0 +1,1368 @@
+"use strict";
+var powerpagestoolkit = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/index.ts
+  var src_exports = {};
+  __export(src_exports, {
+    API: () => API_default,
+    bindForm: () => bindForm,
+    createRef: () => createDOMNodeReference,
+    waitFor: () => waitFor
+  });
+
+  // src/utils/safeAjax.ts
+  function safeAjax(ajaxOptions) {
+    const deferredAjax = $.Deferred();
+    shell.getTokenDeferred().done(function(token) {
+      if (!ajaxOptions.headers) {
+        $.extend(ajaxOptions, {
+          headers: {
+            __RequestVerificationToken: token
+          }
+        });
+      } else {
+        ajaxOptions.headers["__RequestVerificationToken"] = token;
+      }
+      $.ajax(ajaxOptions).done(function(data, textStatus, jqXHR) {
+        validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);
+      }).fail(deferredAjax.reject);
+    }).fail(function() {
+      deferredAjax.rejectWith(this, arguments);
+    });
+    return deferredAjax.promise();
+  }
+
+  // src/core/API.ts
+  var API = {
+    /**
+     * @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) {
+      return new Promise((resolve, reject) => {
+        safeAjax({
+          type: "POST",
+          url: `/_api/${tableSetName}`,
+          data: JSON.stringify(data),
+          contentType: "application/json",
+          success: function(response, status, xhr) {
+            resolve(xhr.getResponseHeader("entityid"));
+          },
+          error: (error) => {
+            reject(error);
+          }
+        });
+      });
+    },
+    /**
+     *
+     * @param tableSetName The DataVerse SET name of the table being queried
+     * @param recordID the GUID of the records to be retrieved
+     * @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) {
+      return new Promise((resolve, reject) => {
+        const url = `/_api/${tableSetName}(${recordID})${selectColumns ? `?$${selectColumns}` : ""}`;
+        safeAjax({
+          type: "GET",
+          url,
+          success: resolve,
+          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) {
+      return new Promise((resolve, reject) => {
+        const url = `/_api/${tableSetName}${queryParameters ? `?${queryParameters}` : ""}`;
+        safeAjax({
+          type: "GET",
+          url,
+          success: function(response) {
+            resolve(response.value);
+          },
+          error: reject
+        });
+      });
+    },
+    /**
+     *
+     * @param tableSetName The dataverse set name for the table that you are updating a record in
+     * @param recordId The GUID of the record that is being updated
+     * @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) {
+      return new Promise((resolve, reject) => {
+        const url = `/_api/${tableSetName}(${recordId})`;
+        safeAjax({
+          type: "PATCH",
+          url,
+          data: JSON.stringify(data),
+          success: resolve,
+          error: reject
+        });
+      });
+    }
+  };
+  var API_default = API;
+
+  // src/core/waitFor.ts
+  function waitFor(target, root = document, multiple = false, debounceTime2) {
+    return new Promise((resolve, reject) => {
+      if (multiple) {
+        let timeoutMs;
+        const observedElements = [];
+        const observedSet = /* @__PURE__ */ new Set();
+        if (debounceTime2 < 1) {
+          return resolve(
+            Array.from(root.querySelectorAll(target))
+          );
+        }
+        const observer = new MutationObserver(() => {
+          const found = Array.from(root.querySelectorAll(target));
+          found.forEach((element) => {
+            if (!observedSet.has(element)) {
+              observedSet.add(element);
+              observedElements.push(element);
+            }
+          });
+          clearTimeout(timeoutMs);
+          timeoutMs = setTimeout(() => {
+            if (observedElements.length > 0) {
+              observer.disconnect();
+              resolve(observedElements);
+            } else {
+              reject(
+                new Error(
+                  `No elements found with target: "${target}" within ${debounceTime2 / 1e3} seconds. If the element you are expecting has not loaded yet, consider raising your timeout.`
+                )
+              );
+            }
+          }, debounceTime2);
+        });
+        observer.observe(root, {
+          childList: true,
+          subtree: true,
+          attributes: false
+        });
+      } else {
+        const observer = new MutationObserver(() => {
+          const observedElement = root.querySelector(target);
+          if (observedElement) {
+            clearTimeout(timeout);
+            observer.disconnect();
+            resolve(observedElement);
+          }
+        });
+        const timeout = setTimeout(() => {
+          observer.disconnect();
+          reject(
+            new Error(
+              `Element not found by target: "${target}" within ${debounceTime2 / 1e3} second. If the element you are expecting has not loaded yet, consider raising your timeout.`
+            )
+          );
+        }, debounceTime2);
+        if (target instanceof HTMLElement) {
+          clearTimeout(timeout);
+          return resolve(target);
+        }
+        const element = root.querySelector(target);
+        if (element) {
+          clearTimeout(timeout);
+          return resolve(element);
+        }
+        observer.observe(root, {
+          subtree: true,
+          attributes: true,
+          childList: true
+          // Detects added/removed child elements
+        });
+      }
+    });
+  }
+
+  // src/utils/createInfoElement.ts
+  function CreateInfoEl(titleString, iconStyle) {
+    if (typeof titleString !== "string") {
+      throw new Error(
+        `argument "titleString" must be of type "string". Received: "${typeof titleString}"`
+      );
+    }
+    if (iconStyle && typeof iconStyle !== "object") {
+      throw new Error(
+        `argument "iconStyle" must be of type "object". Received: "${typeof iconStyle}"`
+      );
+    }
+    const span = document.createElement("span");
+    span.classList.add("info-icon");
+    const icon = document.createElement("i");
+    icon.classList.add("fa", "fa-solid", "fa-info-circle");
+    icon.setAttribute("aria-label", "Info");
+    icon.style.cursor = "pointer";
+    const flyoutContent = document.createElement("div");
+    flyoutContent.innerHTML = titleString;
+    flyoutContent.classList.add("flyout-content");
+    span.appendChild(icon);
+    span.appendChild(flyoutContent);
+    if (iconStyle) {
+      Object.assign(icon.style, iconStyle);
+    }
+    const positionFlyout = () => {
+      flyoutContent.style.display = "block";
+      const flyoutRect = flyoutContent.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      if (flyoutRect.right > viewportWidth) {
+        const overflowAmount = flyoutRect.right - viewportWidth;
+        flyoutContent.style.left = `calc(50% - ${overflowAmount}px)`;
+      }
+      if (flyoutRect.left < 0) {
+        const overflowAmount = Math.abs(flyoutRect.left);
+        flyoutContent.style.left = `calc(50% + ${overflowAmount}px)`;
+      }
+    };
+    span.addEventListener("mouseenter", () => {
+      positionFlyout();
+    });
+    span.addEventListener("mouseleave", (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (!span.contains(relatedTarget)) {
+        flyoutContent.style.display = "none";
+      }
+    });
+    icon.addEventListener("touchstart", (event) => {
+      event.preventDefault();
+      flyoutContent.style.display = flyoutContent.style.display === "block" ? "none" : "block";
+      if (flyoutContent.style.display === "block") {
+        positionFlyout();
+      }
+    });
+    document.body.addEventListener("click", (event) => {
+      if (!span.contains(event.target)) {
+        flyoutContent.style.display = "none";
+      }
+    });
+    flyoutContent.style.display = "none";
+    return span;
+  }
+
+  // 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(
+        `There was an error initializing a DOMNodeReference for target: ${instance.target}, :: ${error}`
+      );
+      this.name = "DOMNodeInitializationError";
+    }
+  };
+  var DOMNodeNotFoundError = class extends Error {
+    constructor(instance) {
+      super(`The targeted DOM element was not found: ${instance.target}`);
+    }
+  };
+  var ConditionalRenderingError = class extends Error {
+    constructor(instance, error) {
+      super(
+        `There was an error condiguring conditional rendering for target: ${instance.target} :: ${error}`
+      );
+    }
+  };
+  var ValidationConfigError = class extends Error {
+    constructor(node, message) {
+      super(`Validation configuration error for ${node.target}: ${message}`);
+      this.name = "ValidationConfigError";
+    }
+  };
+
+  // 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];
+    isLoaded;
+    defaultDisplay;
+    [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
+     */
+    value;
+    /**
+     * Creates an instance of DOMNodeReference.
+     * @param target - The CSS selector to find the desired DOM element.
+     * @param root - Optionally specify the element within to search for the element targeted by 'target'
+     * Defaults to 'document.body'
+     */
+    /******/
+    /******/
+    constructor(target, root = document.body, debounceTime2) {
+      this.target = target;
+      this.logicalName = this.extractLogicalName(target);
+      this.root = root;
+      this[debounceTime] = debounceTime2;
+      this.isLoaded = false;
+      this.defaultDisplay = "";
+      this.value = null;
+      this[bindMethods]();
+    }
+    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]
+          );
+        }
+        if (!this.element) {
+          throw new DOMNodeNotFoundError(this);
+        }
+        if (this.element.id && this.element.querySelectorAll(
+          `#${this.element.id} > input[type="radio"]`
+        ).length > 0) {
+          await this[attachRadioButtons]();
+        }
+        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]();
+              observer.disconnect();
+              break;
+            }
+          }
+        });
+        observer.observe(document.body, {
+          childList: true,
+          subtree: true
+        });
+        this.isLoaded = true;
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        throw new DOMNodeInitializationError(this, errorMessage);
+      }
+    }
+    /**
+     * Initializes value synchronization with appropriate event listeners
+     * based on element type.
+     */
+    [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);
+      }
+    }
+    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
+      );
+      this[registerEventListener](dateNode, "select", this.updateValue);
+    }
+    /**
+     * Gets the current value of the element based on its type
+     * @protected
+     * @returns Object containing value and optional checked state
+     */
+    [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":
+          return {
+            value: input.checked,
+            checked: input.checked
+          };
+        case "select-multiple":
+          return {
+            value: Array.from(select.selectedOptions).map(
+              (option) => option.value
+            )
+          };
+        case "select-one":
+          return {
+            value: select.value
+          };
+        case "number":
+          return {
+            value: input.value !== "" ? Number(input.value) : null
+          };
+        default:
+          let cleanValue = input.value;
+          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
+          };
+      }
+    }
+    [attachVisibilityController]() {
+      this.visibilityController = this.element;
+      if (this.element.tagName === "TABLE") {
+        const fieldset = this.element.closest("fieldset");
+        if (fieldset) {
+          this.visibilityController = fieldset;
+        }
+        return;
+      }
+      const tagsRequiringTdParent = [
+        "SPAN",
+        "INPUT",
+        "TEXTAREA",
+        "SELECT",
+        "TABLE"
+      ];
+      if (tagsRequiringTdParent.includes(this.element.tagName)) {
+        const tdParent = this.element.closest("td");
+        if (tdParent) {
+          this.visibilityController = tdParent;
+        }
+      }
+    }
+    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]() {
+      const prototype = Object.getPrototypeOf(this);
+      for (const key of Object.getOwnPropertyNames(prototype)) {
+        const value = this[key];
+        if (key !== "constructor" && typeof value === "function") {
+          this[key] = value.bind(this);
+        }
+      }
+    }
+    [destroy]() {
+      this[boundEventListeners]?.forEach((binding) => {
+        binding.element?.removeEventListener(binding.event, binding.handler);
+      });
+      this[observers]?.forEach((observer) => {
+        observer.disconnect();
+      });
+      this.yesRadio?.[destroy]();
+      this.noRadio?.[destroy]();
+      this.yesRadio = null;
+      this.noRadio = null;
+      this.isLoaded = false;
+      this.value = null;
+    }
+    /**
+     * Updates the value and checked state based on element type
+     * @public
+     */
+    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;
+      }
+    }
+    /**
+     * Sets up an event listener based on the specified event type, executing the specified
+     * event handler
+     * @param eventType - The DOM event to watch for
+     * @param eventHandler - The callback function that runs when the
+     * specified event occurs.
+     * @returns - Instance of this [provides option to method chain]
+     */
+    on(eventType, eventHandler) {
+      if (typeof eventHandler !== "function") {
+        throw new Error(
+          `Argument "eventHandler" must be a Function. Received: ${typeof eventHandler}`
+        );
+      }
+      this[registerEventListener](
+        this.element,
+        eventType,
+        eventHandler.bind(this)
+      );
+      return this;
+    }
+    /**
+     * Hides the element by setting its display style to "none".
+     * @returns - Instance of this [provides option to method chain]
+     */
+    hide() {
+      this.visibilityController.style.display = "none";
+      return this;
+    }
+    /**
+     * Shows the element by restoring its default display style.
+     * @returns - Instance of this [provides option to method chain]
+     */
+    show() {
+      this.visibilityController.style.display = this.defaultDisplay;
+      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]
+     */
+    toggleVisibility(shouldShow) {
+      if (shouldShow instanceof Function) {
+        shouldShow(this) ? this.show() : this.hide();
+      } else {
+        shouldShow ? this.show() : this.hide();
+      }
+      return this;
+    }
+    /**
+     * Sets the value of the HTML element.
+     * @param value - The value to set for the HTML element.
+     * for parents of boolean radios, pass true or false as value, or
+     * an expression returning a boolean
+     * @returns - Instance of this [provides option to method chain]
+     */
+    setValue(value) {
+      if (value instanceof Function) {
+        value = value();
+      }
+      const eventType = this.determineEventType();
+      this.element.dispatchEvent(new Event(eventType, { bubbles: false }));
+      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;
+      }
+      return this;
+    }
+    /**
+     * Disables the element so that users cannot input any data
+     * @returns - Instance of this [provides option to method chain]
+     */
+    disable() {
+      try {
+        this.element.disabled = true;
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        throw new Error(
+          `There was an error trying to disable the target: ${this.target}: "${errorMessage}"`
+        );
+      }
+      return this;
+    }
+    /**
+     * Clears all values and states of the element.
+     * Handles different input types appropriately, and can be called
+     * on an element containing N child inputs to clear all
+     *
+     * @returns - Instance of this [provides option to method chain]
+     * @throws If clearing values fails
+     */
+    async clearValue() {
+      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 promises = childInputs.map(async (input) => {
+              const inputRef = await createDOMNodeReference(
+                input
+              );
+              return inputRef.clearValue();
+            });
+            await Promise.all(promises);
+          }
+        }
+        if (this.yesRadio instanceof _DOMNodeReference && this.noRadio instanceof _DOMNodeReference) {
+          await this.yesRadio.clearValue();
+          await this.noRadio.clearValue();
+        }
+        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 [provides option to method chain]
+     */
+    enable() {
+      try {
+        this.element.disabled = false;
+      } catch (e) {
+        throw new Error(
+          `There was an error trying to disable the target: ${this.target}`
+        );
+      }
+      return this;
+    }
+    /**
+     *
+     * @param elements - The elements to prepend to the element targeted by this.
+     * @returns - Instance of this [provides option to method chain]
+     */
+    prepend(...elements) {
+      this.element.prepend(...elements);
+      return this;
+    }
+    /**
+     * Appends child elements to the HTML element.
+     * @param elements - The elements to append to the element targeted by this.
+     * @returns - Instance of this [provides option to method chain]
+     */
+    append(...elements) {
+      this.element.append(...elements);
+      return this;
+    }
+    /**
+     * Inserts elements before the HTML element.
+     * @param elements - The elements to insert before the HTML element.
+     * @returns - Instance of this [provides option to method chain]
+     */
+    before(...elements) {
+      this.element.before(...elements);
+      return this;
+    }
+    /**
+     * Inserts elements after the HTML element.
+     * @param elements - The elements to insert after the HTML element.
+     * @returns - Instance of this [provides option to method chain]
+     */
+    after(...elements) {
+      this.element.after(...elements);
+      return this;
+    }
+    /**
+     * Retrieves the label associated with the HTML element.
+     * @returns {HTMLElement} The label element associated with this element.
+     */
+    getLabel() {
+      return document.querySelector(`#${this.element.id}_label`) || null;
+    }
+    /**
+     * Adds a tooltip with specified text to the label associated with the HTML element.
+     * @param innerHTML - The innerHTML to append into the tooltip.
+     * @param containerStyle - Optional object with CSS Styles to apply to the info element
+     * @returns - Instance of this [provides option to method chain]
+     */
+    addLabelTooltip(innerHTML, containerStyle) {
+      this.getLabel()?.append(
+        CreateInfoEl(innerHTML, containerStyle || void 0)
+      );
+      return this;
+    }
+    /**
+     * Adds a tooltip with the specified text to the element
+     * @param innerHTML - The innerHTML to append into the tooltip
+     * @param containerStyle - Optional object with CSS Styles to apply to the info element
+     * @returns - Instance of this [provides option to method chain]
+     */
+    addTooltip(innerHTML, containerStyle) {
+      this.append(CreateInfoEl(innerHTML, containerStyle || void 0));
+      return this;
+    }
+    /**
+     * Sets the inner HTML content of the HTML element.
+     * @param {string} string - The text to set as the inner HTML of the element.
+     * @returns - Instance of this [provides option to method chain]
+     */
+    setInnerHTML(string) {
+      this.element.innerHTML = string;
+      return this;
+    }
+    /**
+     * Removes this element from the DOM
+     * @returns - Instance of this [provides option to method chain]
+     */
+    remove() {
+      this.element.remove();
+      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]
+     */
+    setStyle(options) {
+      if (Object.prototype.toString.call(options) !== "[object Object]") {
+        throw new Error(
+          `powerpagestoolkit: 'DOMNodeReference.setStyle' required options to be in the form of an object. Argument passed was of type: ${typeof options}`
+        );
+      }
+      for (const _key in options) {
+        const key = _key;
+        this.element.style[key] = options[key];
+      }
+      return this;
+    }
+    /**
+     * Unchecks both the yes and no radio buttons if they exist.
+     * @returns - Instance of this [provides option to method chain]
+     */
+    uncheckRadios() {
+      if (this.yesRadio instanceof _DOMNodeReference && this.noRadio instanceof _DOMNodeReference) {
+        this.yesRadio.element.checked = false;
+        this.noRadio.element.checked = false;
+      } else {
+        console.error(
+          "[SYNACT] Attempted to uncheck radios for an element that has no radios"
+        );
+      }
+      return this;
+    }
+    /**
+     * 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.
+     */
+    applyBusinessRule(rule, dependencies) {
+      try {
+        if (rule.setVisibility) {
+          const [condition, clearValuesOnHide = true] = rule.setVisibility;
+          const initialState = condition.bind(this)();
+          this.toggleVisibility(initialState);
+          if (dependencies.length) {
+            this._configDependencyTracking(
+              () => this.toggleVisibility(condition.bind(this)()),
+              dependencies,
+              {
+                clearValuesOnHide,
+                observeVisibility: true,
+                trackInputEvents: false,
+                trackRadioButtons: false
+              }
+            );
+          }
+        }
+        if (rule.setRequired) {
+          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
+                )}`
+              );
+            label = label.innerHTML;
+            if (label.length > 50) {
+              label = label.substring(0, 50) + "...";
+            }
+            return label;
+          })();
+          if (typeof Page_Validators === "undefined") {
+            throw new ValidationConfigError(this, "Page_Validators not found");
+          }
+          const validatorId = `${this.element.id}Validator`;
+          const newValidator = document.createElement("span");
+          newValidator.style.display = "none";
+          newValidator.id = validatorId;
+          Object.assign(newValidator, {
+            controltovalidate: this.element.id,
+            errormessage: `<a href='#${this.element.id}_label'>${fieldDisplayName} is a required field</a>`,
+            evaluationfunction: () => {
+              const isFieldRequired = isRequired.bind(this)();
+              const isFieldVisible = window.getComputedStyle(this.visibilityController).display !== "none";
+              return !isFieldRequired || !isFieldVisible || isValid.bind(this)(isFieldRequired);
+            }
+          });
+          Page_Validators.push(newValidator);
+          this.setRequiredLevel(isRequired.bind(this)());
+          this._configDependencyTracking(
+            () => this.setRequiredLevel(isRequired.bind(this)()),
+            dependencies,
+            { clearValuesOnHide: false }
+          );
+        }
+        if (rule.setValue) {
+          let [condition, value] = rule.setValue;
+          if (value instanceof Function) value = value();
+          if (condition.bind(this)()) {
+            this.setValue.bind(this)(value);
+          }
+          if (dependencies.length) {
+            this._configDependencyTracking(
+              () => {
+                if (condition.bind(this)()) {
+                  this.setValue.bind(this)(value);
+                }
+              },
+              dependencies,
+              { clearValuesOnHide: false }
+            );
+          }
+        }
+        if (rule.setDisabled) {
+          const condition = rule.setDisabled;
+          condition.bind(this)() ? this.disable() : this.enable();
+          if (dependencies.length) {
+            this._configDependencyTracking(
+              () => {
+                condition.bind(this)() ? this.enable() : this.disable();
+              },
+              dependencies,
+              {
+                clearValuesOnHide: false,
+                observeVisibility: true,
+                trackInputEvents: true,
+                trackRadioButtons: true
+              }
+            );
+          }
+        }
+        return this;
+      } catch (error) {
+        throw new ValidationConfigError(
+          this,
+          `Failed to apply business rule: ${error}`
+        );
+      }
+    }
+    /**
+     * Configures conditional rendering for the target element based on a condition
+     * and the visibility of one or more trigger elements.
+     * @deprecated Use the new 'applyBusinessRule Method
+     * @param 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 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 When there's an error in setting up conditional rendering
+     * @returns Instance of this [provides option to method chain]
+     */
+    configureConditionalRendering(condition, dependencies, clearValuesOnHide = true) {
+      try {
+        if (typeof condition !== "function") {
+          throw new TypeError("Condition must be a function");
+        }
+        condition = condition.bind(this);
+        const initialState = condition();
+        this.toggleVisibility(initialState);
+        if (!dependencies?.length) {
+          console.warn(
+            `powerpagestoolkit: No dependencies provided for conditional rendering of ${this}. Include referenced nodes in the dependency array if using them in rendering logic.`
+          );
+          return this;
+        }
+        this._configDependencyTracking(
+          () => this.toggleVisibility(condition()),
+          dependencies,
+          {
+            clearValuesOnHide,
+            observeVisibility: true,
+            trackInputEvents: false,
+            trackRadioButtons: false
+          }
+        );
+        return this;
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        throw new ConditionalRenderingError(this, errorMessage);
+      }
+    }
+    /**
+     * Sets up validation and requirement rules for the field with enhanced error handling and dynamic updates.
+     * @deprecated Use the new 'applyBusinessRule Method
+     * @param isRequired Function determining if field is required
+     * @param isValid Function validating field input
+     * @param fieldDisplayName Display name for error messages
+     * @param dependencies Fields that trigger requirement/validation updates
+     * @returns Instance of this
+     * @throws If validation setup fails
+     */
+    configureValidationAndRequirements(isRequired, isValid, fieldDisplayName, dependencies) {
+      if (!fieldDisplayName?.trim()) {
+        throw new ValidationConfigError(this, "Field display name is required");
+      }
+      if (!Array.isArray(dependencies)) {
+        throw new ValidationConfigError(this, "Dependencies must be an array");
+      }
+      try {
+        isRequired = isRequired.bind(this);
+        isValid = isValid.bind(this);
+        if (typeof Page_Validators === "undefined") {
+          throw new ValidationConfigError(this, "Page_Validators not found");
+        }
+        const validatorId = `${this.element.id}Validator`;
+        const newValidator = document.createElement("span");
+        newValidator.style.display = "none";
+        newValidator.id = validatorId;
+        const validatorConfig = {
+          controltovalidate: this.element.id,
+          errormessage: `<a href='#${this.element.id}_label'>${fieldDisplayName} is a required field</a>`,
+          evaluationfunction: () => {
+            const isFieldRequired = isRequired();
+            const isFieldVisible = window.getComputedStyle(this.visibilityController).display !== "none";
+            if (!isFieldRequired || !isFieldVisible) {
+              return true;
+            }
+            return isValid();
+          }
+        };
+        Object.assign(newValidator, validatorConfig);
+        Page_Validators.push(newValidator);
+        this.setRequiredLevel(isRequired());
+        this._configDependencyTracking(
+          () => this.setRequiredLevel(isRequired()),
+          dependencies
+        );
+      } catch (error) {
+        throw new ValidationConfigError(
+          this,
+          `Failed to configure validation: ${error}`
+        );
+      }
+      return this;
+    }
+    /**
+     * Sets up tracking for dependencies using both event listeners and mutation observers.
+     * @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.
+     * all other options defaults to true
+     */
+    _configDependencyTracking(handler, dependencies, options = {
+      clearValuesOnHide: false,
+      observeVisibility: true,
+      trackInputEvents: true,
+      trackRadioButtons: true
+    }) {
+      const {
+        clearValuesOnHide = false,
+        observeVisibility = true,
+        trackInputEvents = true,
+        trackRadioButtons = true
+      } = options;
+      if (!dependencies?.length) {
+        console.warn(
+          `powerpagestoolkit: No dependencies specified for ${this.element.id}. Include all referenced nodes in the dependency array for proper tracking.`
+        );
+        return;
+      }
+      dependencies.forEach((dep) => {
+        if (!dep || !(dep instanceof _DOMNodeReference)) {
+          throw new TypeError(
+            "Each dependency must be a valid DOMNodeReference instance"
+          );
+        }
+        const handleChange = () => {
+          handler();
+          if (clearValuesOnHide && window.getComputedStyle(this.visibilityController).display === "none") {
+            this.clearValue();
+          }
+        };
+        this[registerEventListener](dep.element, "change", handleChange);
+        if (trackInputEvents) {
+          this[registerEventListener](dep.element, "input", handleChange);
+        }
+        if (observeVisibility) {
+          const observer = new MutationObserver(() => {
+            const display = window.getComputedStyle(
+              dep.visibilityController
+            ).display;
+            if (display !== "none") {
+              handler();
+            }
+          });
+          observer.observe(dep.visibilityController, {
+            attributes: true,
+            attributeFilter: ["style"],
+            subtree: false
+          });
+          this[observers].push(observer);
+        }
+        if (trackRadioButtons && dep.yesRadio && dep.noRadio) {
+          [dep.yesRadio, dep.noRadio].forEach((radio) => {
+            radio.on("change", handleChange);
+            this[boundEventListeners].push({
+              element: radio.element,
+              event: "change",
+              handler: handleChange
+            });
+          });
+        }
+      });
+    }
+    /**
+     * Sets the required level for the field by adding or removing the "required-field" class on the label.
+     *
+     * @param isRequired Determines whether the field should be marked as required.
+     * If true, the "required-field" class is added to the label; if false, it is removed.
+     * @returns Instance of this [provides option to method chain]
+     */
+    setRequiredLevel(isRequired) {
+      if (isRequired instanceof Function) {
+        isRequired() ? this.getLabel()?.classList.add("required-field") : this.getLabel()?.classList.remove("required-field");
+        return this;
+      } else {
+        isRequired ? this.getLabel()?.classList.add("required-field") : this.getLabel()?.classList.remove("required-field");
+        return this;
+      }
+    }
+    /**
+     * Executes a callback function once the element is fully loaded.
+     * If the element is already loaded, the callback is called immediately.
+     * Otherwise, a MutationObserver is used to detect when the element is added to the DOM.
+     * @param callback A callback function to execute once the element is loaded.
+     * Receives instance of 'this' as an argument
+     */
+    onceLoaded(callback) {
+      if (this.isLoaded) {
+        callback(this);
+        return;
+      }
+      if (this.target instanceof HTMLElement) {
+        callback(this);
+        return;
+      }
+      const observer = new MutationObserver(() => {
+        if (document.querySelector(this.target)) {
+          observer.disconnect();
+          this.isLoaded = true;
+          callback(this);
+        }
+      });
+      observer.observe(document.body, {
+        subtree: true,
+        childList: true
+      });
+      this[observers].push(observer);
+    }
+  };
+
+  // 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,
+    timeoutMs: 0
+  }) {
+    try {
+      if (typeof options !== "object") {
+        throw new Error(
+          `'options' must be of type 'object'. Received type: '${typeof options}'`
+        );
+      }
+      validateOptions(options);
+      const { multiple = false, root = document.body, timeoutMs = 0 } = options;
+      const isMultiple = typeof multiple === "function" ? multiple() : multiple;
+      if (isMultiple) {
+        if (typeof target !== "string") {
+          throw new Error(
+            `'target' must be of type 'string' if 'multiple' is set to 'true'. Received type: '${typeof target}'`
+          );
+        }
+        const elements = await waitFor(target, root, true, timeoutMs);
+        const initializedElements = await Promise.all(
+          elements.map(async (element) => {
+            const instance2 = new DOMNodeReference(element, root, timeoutMs);
+            await instance2[init]();
+            return new Proxy(instance2, createProxyHandler());
+          })
+        );
+        return enhanceArray(initializedElements);
+      }
+      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, 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}'`
+      );
+    }
+    if (typeof multiple === "function") {
+      const value = multiple();
+      if (typeof value !== "boolean") {
+        throw new Error(
+          `'multiple' function must return a boolean. Received type: '${typeof value}'`
+        );
+      }
+    }
+    if (!(root instanceof HTMLElement)) {
+      throw new Error(
+        `'root' must be of type 'HTMLElement'. Received type: '${typeof root}'`
+      );
+    }
+    if (typeof timeoutMs !== "number") {
+      throw new Error(
+        `'timeout' must be of type 'number'. Received type: '${typeof timeoutMs}'`
+      );
+    }
+    return;
+  }
+  function createProxyHandler() {
+    return {
+      get: (target, prop) => {
+        if (prop.toString().startsWith("_")) return void 0;
+        const value = target[prop];
+        if (typeof value === "function" && prop !== "onceLoaded") {
+          return (...args) => {
+            target.onceLoaded(() => value.apply(target, args));
+            return target;
+          };
+        }
+        return value;
+      }
+    };
+  }
+
+  // src/core/bindForm.ts
+  async function bindForm(formId) {
+    try {
+      const form = await API_default.getRecord("systemforms", formId);
+      const { formxml } = form;
+      const parser = new DOMParser();
+      const xmlDoc = parser.parseFromString(formxml, "application/xml");
+      const controls = processElements(xmlDoc.getElementsByTagName("control"));
+      const sections = processElements(xmlDoc.getElementsByTagName("section"));
+      const tabs = processElements(xmlDoc.getElementsByTagName("tab"));
+      const resolvedRefs = await Promise.all([...controls, ...sections, ...tabs]);
+      return enhanceArray(
+        resolvedRefs.filter((ref) => ref !== null)
+      );
+    } catch (error) {
+      if (error instanceof Error) {
+        console.error(error.message);
+        throw error;
+      } else {
+        console.error(error);
+        throw new Error(String(error));
+      }
+    }
+  }
+  function processElements(element) {
+    return Array.from(element).map((element2) => {
+      const identifyingAttribute = getIdentifyingAttribute(element2.tagName);
+      const datafieldname = element2.getAttribute(identifyingAttribute);
+      if (!datafieldname) return null;
+      const referenceString = createReferenceString(
+        element2.tagName,
+        datafieldname
+      );
+      if (!referenceString) return null;
+      return createDOMNodeReference(referenceString).catch((error) => {
+        console.warn(
+          `Failed to create a reference to the form field: ${datafieldname}`,
+          error
+        );
+        return null;
+      });
+    }).filter(Boolean);
+  }
+  function getIdentifyingAttribute(tagName) {
+    return tagName === "control" ? "id" : tagName === "tab" || tagName === "section" ? "name" : "id";
+  }
+  function createReferenceString(tagName, datafieldname) {
+    if (tagName === "control") return `#${datafieldname}`;
+    if (tagName === "tab" || tagName === "section")
+      return `[data-name="${datafieldname}"]`;
+    return null;
+  }
+  return __toCommonJS(src_exports);
+})();