powerpagestoolkit 2.221.12 → 2.701.4

package/dist/src/index.js

@@ -0,0 +1,1251 @@
+/* @ts-self-types="./index.d.ts" */
+// 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 = class {
+  /**
+   * @param tableSetName The dataverse set name for the table that you are updating a record in
+   * @param data The JSON of the fields and data that are to be updated on the targeted record
+   * @returns a Promise resolving the successful results *[record id]* of the POST request, or rejecting the failed results *[error]* of the POST request.
+   */
+  static createRecord(tableSetName, data) {
+    return new Promise((resolve, reject) => {
+      safeAjax({
+        type: "POST",
+        url: `/_api/${tableSetName}`,
+        data: JSON.stringify(data),
+        contentType: "application/json",
+        success: function(_response, _status, xhr) {
+          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
+   */
+  static 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
+   */
+  static 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
+   */
+  static 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 timeout;
+      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(timeout);
+        timeout = 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);
+      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 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",
+  TEXT: "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 HTMLTextAreaElement) return "keyup";
+    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
+      };
+    }
+    let returnValue;
+    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, "");
+        }
+        returnValue = {
+          value: this.element.classList.contains("decimal") || this.element.classList.contains("money") ? parseFloat(cleanValue) : cleanValue
+        };
+      }
+    }
+    returnValue = {
+      ...returnValue,
+      value: this.validateValue(returnValue.value)
+    };
+    return returnValue;
+  }
+  [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.isTrusted) return;
+    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;
+    }
+  }
+  validateValue(value) {
+    if (value === null || value === "") {
+      return value;
+    }
+    if (!isNaN(Number(value))) {
+      return Number(value);
+    }
+    return value;
+  }
+  /**
+   * 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();
+    }
+    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;
+    }
+    this.value = this.validateValue(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 (_error) {
+      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 {
+      const clearValuesOnHide = rule.setVisibility && rule.setVisibility.length > 1 ? rule.setVisibility[1] : true;
+      if (rule.setVisibility) {
+        const [condition] = rule.setVisibility;
+        const initialState = condition.call(this);
+        this.toggleVisibility(initialState);
+      }
+      if (rule.setRequired) {
+        const [isRequired, isValid] = rule.setRequired;
+        const fieldDisplayName = (() => {
+          let label = this.getLabel();
+          if (!label) {
+            throw new Error(
+              `There was an error accessing the label for this element: ${this.target}`
+            );
+          }
+          label = label.innerHTML;
+          if (label.length > 50) {
+            label = label.substring(0, 50) + "...";
+          }
+          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.call(this);
+            const isFieldVisible = window.getComputedStyle(this.visibilityController).display !== "none";
+            return !isFieldRequired || !isFieldVisible || isValid.call(this, isFieldRequired);
+          }
+        });
+        Page_Validators.push(newValidator);
+        this.setRequiredLevel(isRequired.call(this));
+      }
+      if (rule.setValue) {
+        let [condition, value] = rule.setValue;
+        if (value instanceof Function) value = value();
+        if (condition.call(this)) {
+          this.setValue.call(this, value);
+        }
+      }
+      if (rule.setDisabled) {
+        const condition = rule.setDisabled;
+        condition.call(this) ? this.disable() : this.enable();
+      }
+      if (dependencies.length) {
+        let visibilityCondition, isRequired, valueCondition, value, disabledCondition;
+        const aggregateHandler = (rule2) => {
+          if (rule2.setVisibility) {
+            [visibilityCondition] = rule2.setVisibility;
+            this.toggleVisibility(visibilityCondition.call(this));
+          }
+          if (rule2.setRequired) {
+            [isRequired] = rule2.setRequired;
+            this.setRequiredLevel(isRequired.call(this));
+          }
+          if (rule2.setValue) {
+            [valueCondition, value] = rule2.setValue;
+            if (valueCondition.call(this)) this.setValue.call(this, value);
+          }
+          if (rule2.setDisabled) {
+            disabledCondition = rule2.setDisabled;
+            disabledCondition.call(this) ? this.disable() : this.enable;
+          }
+        };
+        this._configDependencyTracking(
+          () => aggregateHandler(rule),
+          dependencies,
+          {
+            clearValuesOnHide,
+            observeVisibility: true,
+            trackInputEvents: false,
+            trackRadioButtons: false
+          }
+        );
+      }
+      return this;
+    } catch (error) {
+      throw new ValidationConfigError(
+        this,
+        `Failed to apply business rule: ${error}`
+      );
+    }
+  }
+  /**
+   * 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;
+}
+export {
+  API_default as API,
+  bindForm,
+  createDOMNodeReference as createRef,
+  waitFor
+};
+/*! For license information please see index.js.LEGAL.txt */
+//# sourceMappingURL=index.js.map
+
+
+      if (typeof document !== 'undefined') {
+        const style = document.createElement('style');
+        style.textContent = ".info-icon {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.info-icon .fa-info-circle {\r\n  cursor: pointer; /* Ensures the icon is recognized as interactive */\r\n}\r\n\r\n.info-icon .flyout-content {\r\n  max-width: calc(100vw - 20px); /* 20px margin on both sides */\r\n  display: none; /* Initially hidden */\r\n  position: absolute;\r\n  left: 50%; /* Center horizontally */\r\n  transform: translateX(-50%); /* Adjust positioning */\r\n  color: #000;\r\n  background-color: #f9f9f9;\r\n  padding: 10px;\r\n  border: 1px solid #ddd;\r\n  z-index: 1;\r\n  min-width: 200px; /* Minimum width for better readability */\r\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);\r\n  border-radius: 4px; /* Rounded corners */\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .info-icon .flyout-content {\r\n    max-width: 95vw;\r\n    padding: 12px;\r\n    font-size: 0.9em;\r\n    display: block;\r\n    right: auto;\r\n  }\r\n}\r\n\r\n.required-field::after {\r\n  content: \" *\" !important;\r\n  color: #f00 !important;\r\n}\r\n";
+        document.head.appendChild(style);
+      }
+