powerpagestoolkit 2.7.135 → 2.7.211

package/dist/index.global.js

@@ -1,1373 +0,0 @@
-"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,
-    default: () => src_default,
-    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;
-  }
-
-  // src/index.ts
-  var toolkit = { API: API_default, createRef: createDOMNodeReference, waitFor, bindForm };
-  var src_default = toolkit;
-  return __toCommonJS(src_exports);
-})();