powerpagestoolkit 1.2.202 → 1.3.101

package/README.md

@@ -1 +1,203 @@
-# PowerPagesToolKit
+# PowerPages Tool Kit
+
+This package provides utilities for managing and interacting with the DOM and making AJAX requests to a DataVerse API. It includes the `API` module for handling CRUD operations and the `DOMNodeReference` class for seamless DOM manipulations.
+
+## Installation
+
+After installing
+
+`npm install powerpagestoolkit`
+
+You can then import into your JavaScript files as follows:
+
+```javascript
+import {
+  API,
+  createDOMNodeReference,
+  createMultipleDOMNodeReferences,
+} from "powerpagestoolkit";
+```
+
+# Modules
+
+### `DOMNodereference`
+
+The `DOMNodeReference` module simplifies DOM element management. It provides functionalities for creating and interacting with DOM elements:
+
+#### Usage
+
+- **`createDOMNodeReference(selector)`**: Creates a `DOMNodeReference` instance for a single DOM element specified by a CSS selector or HTMLElement. Returns a `DOMNodeReference` instance.
+
+- **`createMultipleDOMNodeReferences(selector)`**: Creates multiple `DOMNodeReference` instances for all elements matching the specified CSS selector. Returns an array of `DOMNodeReference` instances.
+
+```javascript
+// single instance of DOMNodeReference
+const node = await createDOMNodeReference("#my-element");
+
+node.onceLoaded(() => {
+  console.log("Element is loaded: ", node.element);
+});
+
+// to imitate 'querySelectorAll', and return an array of DOMNodeReferences
+const nodeArray = await createMultipleDOMNodeReferences('div[class="row"]');
+
+nodeArray.forEach((node) => {
+    node.oneLoaded(() => {
+        console.log("Element loaded: ", node.element")
+    })
+})
+```
+
+##### Properties
+
+```typescript
+target: string;
+element: HTMLElement | null;
+isLoaded: boolean;
+visibilityController: HTMLElement | null;
+defaultDisplay: string;
+value: string | null;
+```
+
+##### Methods
+
+Here are the key methods you can use with a DOMNodeReference instance:
+
+```typescript
+
+// Hides the associated DOM element.
+hide()
+
+// Shows the associated DOM element.
+show()
+
+// Sets the value of the associated HTML element.
+setValue(value: string)
+
+// Appends child elements to the associated HTML element.
+append(...elements: HTMLElement[])
+
+// Inserts elements after the associated HTML element.
+after(...elements: HTMLElement[])
+
+// Retrieves the label associated with the HTML element.
+getLabel(): HTMLElement | null
+
+// Appends child elements to the label associated with the HTML element.
+appendToLabel(...elements: HTMLElement[])
+
+// Adds a click event listener to the associated HTML element.
+addClickListener(eventHandler: () => void)
+
+// Adds a change event listener to the associated HTML element.
+addChangeListener(eventHandler: () => void)
+
+// Unchecks both yes and no radio buttons if they exist.
+uncheckRadios()
+
+//Creates a validation instance for the field.
+createValidation(evaluationFunction: () => boolean, fieldDisplayName: string)
+
+// Adds a tooltip to the label associated with the HTML element.
+addLabelTooltip(text: string)
+
+// Adds a tooltip to the associated HTML element.
+
+addToolTip(text: string)
+
+// Sets the inner HTML content of the associated HTML element.
+setTextContent(text: string)
+
+// Toggles visibility based on the provided boolean value.
+toggleVisibility(shouldShow: boolean)
+
+// Sets the visibility of the element based on a condition and binds it to another DOMNodeReference.
+configureConditionalRendering(condition: () => boolean, triggerNode?: DOMNodeReference)
+
+// Executes a callback function once the element is fully loaded.
+onceLoaded(callback: (instance: DOMNodeReference) => void)
+
+```
+
+### `API`
+
+The `API` module provides functions for creating and retrieving records from a DataVerse. It includes the following methods:
+
+- **`createRecord(schema)`**: Creates a new record in the DataVerse using the provided schema instance. Returns a Promise that resolves with the record ID or rejects with an error.
+- **`getRecord(tableSetName, recordID, selectColumns)`**: Retrieves a specific record from the DataVerse. Returns a Promise that resolves with the retrieved record or rejects with an error.
+
+- **`getMultiple(tableSetName, queryParameters)`**: Retrieves multiple records from the DataVerse based on specified query parameters. Returns a Promise that resolves with the list of retrieved records or rejects with an error.
+
+#### Usage
+
+###### 1. Creating a Record
+
+To create a new record in the DataVerse, you can use the `createRecord` method. This method takes an instance of a schema class containing the data for the record.
+
+```javascript
+// Assuming you have a schema class defined
+const schema = new YourSchemaClass({
+  name: "Sample Record",
+  description: "This is a sample record for demonstration.",
+});
+
+API.createRecord(schema)
+  .then((recordId) => {
+    console.log("Record created successfully with ID:", recordId);
+  })
+  .catch((error) => {
+    console.error("Error creating record:", error);
+  });
+```
+
+###### 2. Getting a Single Record
+
+To retrieve a specific record from the DataVerse, use the `getRecord` method. You need to provide the table set name and the record ID.
+
+```javascript
+const tableSetName = "accounts"; // The DataVerse table set name
+const recordID = "your-record-id"; // The GUID of the record to retrieve
+
+API.getRecord(tableSetName, recordID)
+  .then((record) => {
+    console.log("Retrieved record:", record);
+  })
+  .catch((error) => {
+    console.error("Error retrieving record:", error);
+  });
+```
+
+###### 3. Getting Multiple Records
+
+If you need to retrieve multiple records with specific query parameters, you can use the `getMultiple` method. This method accepts the table set name and optional query parameters for filtering.
+
+```javascript
+const tableSetName = "contacts"; // The DataVerse table set name
+const queryParameters =
+  "$filter=firstName eq 'John'&$select=firstName,lastName"; // OData query parameters
+
+API.getMultiple(tableSetName, queryParameters)
+  .then((records) => {
+    console.log("Retrieved records:", records);
+  })
+  .catch((error) => {
+    console.error("Error retrieving records:", error);
+  });
+```
+
+##### Example Schema Class
+
+Here's a simple example of a schema class that you might use with the createRecord method:
+
+```javascript
+class YourSchemaClass {
+  constructor(tableSetName, data) {
+    this.setName = tableSetName;
+    this.data = data;
+  }
+
+  value() {
+    return JSON.stringify(this.data); // Convert data to JSON format for the API
+  }
+}
+```

package/dist/index.bundle.js

@@ -472,8 +472,9 @@ var __webpack_exports__ = {};
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  n: () => (/* reexport */ JS_API),
-  m: () => (/* reexport */ createDOMNodeReference)
+  nC: () => (/* reexport */ JS_API),
+  mI: () => (/* reexport */ createDOMNodeReference),
+  xq: () => (/* reexport */ createMultipleDOMNodeReferences)
 });
 
 ;// ./src/JS/safeAjax.js
@@ -569,19 +570,22 @@ var API = {
 ;// ./src/JS/waitFor.js
 /**
  * @description a function that will wait for a targeted element to appear in the DOM, and then resolve a promise to allow further action to be performed after the targeted elements appears
- * @param {String} selector a query selector expression to target a specific element that you want to appear in the DOM before taking further action
- * @returns {Promise} the element targeted by ID *selector*
+ * @param {String} target a query target expression to target a specific element that you want to appear in the DOM before taking further action
+ * @returns {Promise} the element targeted by ID *target*
  */
 
-function waitFor(selector) {
+function waitFor(target) {
   return new Promise(function (resolve) {
-    if (document.querySelector(selector)) {
-      return resolve(document.querySelector(selector));
+    if (target instanceof HTMLElement) {
+      return resolve(target);
+    }
+    if (document.querySelector(target)) {
+      return resolve(document.querySelector(target));
     }
     var observer = new MutationObserver(function () {
-      if (document.querySelector(selector)) {
+      if (document.querySelector(target)) {
         observer.disconnect();
-        resolve(document.querySelector(selector));
+        resolve(document.querySelector(target));
       }
     });
     observer.observe(document.body, {
@@ -741,66 +745,94 @@ function DOMNodeReferences_toPrimitive(t, r) { if ("object" != DOMNodeReferences
 /**
  * Class representing a reference to a DOM node.
  */
+/******/ /******/ /******/
 var DOMNodeReference = /*#__PURE__*/function () {
   /**
    * Creates an instance of DOMNodeReference.
-   * @param {string} querySelector - The CSS selector to find the desired DOM element.
+   * @param {string} target - The CSS selector to find the desired DOM element.
    */
-  function DOMNodeReference(querySelector) {
+  /******/ /******/
+  function DOMNodeReference(target) {
     DOMNodeReferences_classCallCheck(this, DOMNodeReference);
-    this.querySelector = querySelector;
+    this.target = target;
     this.element = null;
     this.isLoaded = false;
-    // Deferred initialization
+    this.visibilityController = null;
+    this.defaultDisplay = "";
+    this.value = null;
+    // we defer the rest of initialization
   }
 
   /**
    * Initializes the DOMNodeReference instance by waiting for the element to be available in the DOM.
    */
+  /******/ /******/
   return DOMNodeReferences_createClass(DOMNodeReference, [{
     key: "init",
     value: (function () {
       var _init = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var _this = this;
         var element;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              _context.next = 2;
-              return waitFor(this.querySelector);
-            case 2:
+              _context.prev = 0;
+              _context.next = 3;
+              return waitFor(this.target);
+            case 3:
               element = _context.sent;
-              if (element) {
-                _context.next = 5;
+              this.element = element;
+              if (this.element) {
+                _context.next = 7;
                 break;
               }
-              throw new Error("[SYNACT] No Element could be found with the provided query selector: ".concat(this.querySelector));
-            case 5:
-              this.element = element;
-              this.value = element.value;
-              this.parentElement = element.parentElement;
-              this.container = element.parentElement.parentElement.parentElement;
-              this.isLoaded = true;
+              throw new Error("[SYNACT] No Element could be found with the provided query selector: ".concat(this.target));
+            case 7:
+              this.value = this.element.value;
               if (!this.element.classList.contains("boolean-radio")) {
-                _context.next = 17;
+                _context.next = 15;
                 break;
               }
-              _context.next = 13;
+              _context.next = 11;
               return createDOMNodeReference("#".concat(this.element.id, "_1"));
-            case 13:
+            case 11:
               this.yesRadio = _context.sent;
-              _context.next = 16;
+              _context.next = 14;
               return createDOMNodeReference("#".concat(this.element.id, "_0"));
-            case 16:
+            case 14:
               this.noRadio = _context.sent;
-            case 17:
-              this.defaultDisplay = this.element.style.display || "block";
-              this.defaultParentDisplay = this.parentElement.style.display || "block";
-              this.defaultContainerDisplay = this.container.style.display || "block";
-            case 20:
+            case 15:
+              this.element.addEventListener("change", function () {
+                _this.value = _this.element.value;
+              });
+
+              // based on the type of element we have targeted in instantiation
+              // we now grab the parent element that will be responsible for
+              // 'showing' and 'hiding' the target element
+              // this is needed also in order to observe changes to visibility so that
+              // changes to target can cascade to dependent DOMNodeReferences
+              _context.t0 = this.element.tagName;
+              _context.next = _context.t0 === "SPAN" ? 19 : _context.t0 === "INPUT" ? 19 : _context.t0 === "TEXTAREA" ? 19 : _context.t0 === "SELECT" ? 19 : _context.t0 === "FIELDSET" ? 21 : 21;
+              break;
+            case 19:
+              this.visibilityController = this.element.closest("td");
+              return _context.abrupt("break", 22);
+            case 21:
+              this.visibilityController = this.element;
+            case 22:
+              this.defaultDisplay = this.visibilityController.style.display;
+              this.isLoaded = true;
+              _context.next = 29;
+              break;
+            case 26:
+              _context.prev = 26;
+              _context.t1 = _context["catch"](0);
+              throw new Error("powerpagestoolkit: There was an error initializing a DOMNodeReference with the target: ".concat(this.target, " :: ").concat(_context.t1));
+            case 29:
             case "end":
               return _context.stop();
           }
-        }, _callee, this);
+        }, _callee, this, [[0, 26]]);
       }));
       function init() {
         return _init.apply(this, arguments);
@@ -811,61 +843,23 @@ var DOMNodeReference = /*#__PURE__*/function () {
      * Hides the element by setting its display style to "none".
      * @method hide
      */
+    /******/
     )
   }, {
     key: "hide",
     value: function hide() {
-      this.element.style.display = "none";
+      this.visibilityController.style.display = "none";
     }
 
     /**
      * Shows the element by restoring its default display style.
      * @method show
      */
+    /******/
   }, {
     key: "show",
     value: function show() {
-      this.element.style.display = this.defaultDisplay;
-    }
-
-    /**
-     * Hides the parent element by setting its display style to "none".
-     * @method hideParent
-     */
-  }, {
-    key: "hideParent",
-    value: function hideParent() {
-      this.parentElement.style.display = "none";
-    }
-
-    /**
-     * Shows the parent element by restoring its default display style.
-     * @method showParent
-     */
-  }, {
-    key: "showParent",
-    value: function showParent() {
-      this.parentElement.style.display = this.defaultParentDisplay;
-    }
-
-    /**
-     * Hides the container (grandparent of the element) by setting its display style to "none".
-     * @method hideContainer
-     */
-  }, {
-    key: "hideContainer",
-    value: function hideContainer() {
-      this.element.parentElement.parentElement.parentElement.style.display = "none";
-    }
-
-    /**
-     * Shows the container (grandparent of the element) by restoring its default display style.
-     * @method showContainer
-     */
-  }, {
-    key: "showContainer",
-    value: function showContainer() {
-      this.element.parentElement.parentElement.parentElement.style.display = this.defaultContainerDisplay;
+      this.visibilityController.style.display = this.defaultDisplay;
     }
 
     /**
@@ -873,6 +867,7 @@ var DOMNodeReference = /*#__PURE__*/function () {
      * @method setValue
      * @param {string} value - The value to set for the HTML element.
      */
+    /******/
   }, {
     key: "setValue",
     value: function setValue(value) {
@@ -884,6 +879,7 @@ var DOMNodeReference = /*#__PURE__*/function () {
      * @method append
      * @param {...HTMLElement} elements - The elements to append to the HTML element.
      */
+    /******/
   }, {
     key: "append",
     value: function append() {
@@ -896,6 +892,7 @@ var DOMNodeReference = /*#__PURE__*/function () {
      * @method after
      * @param {...HTMLElement} elements - The elements to insert after the HTML element.
      */
+    /******/
   }, {
     key: "after",
     value: function after() {
@@ -909,10 +906,11 @@ var DOMNodeReference = /*#__PURE__*/function () {
      * @returns {HTMLElement} The label element associated with this element.
      * @throws {Error} Throws an error if the label cannot be found.
      */
+    /******/
   }, {
     key: "getLabel",
     value: function getLabel() {
-      return document.querySelector("#".concat(this.element.id, "_label"));
+      return document.querySelector("#".concat(this.element.id, "_label")) || null;
     }
 
     /**
@@ -920,14 +918,17 @@ var DOMNodeReference = /*#__PURE__*/function () {
      * @method appendToLabel
      * @param {...HTMLElement} elements - The elements to append to the label.
      */
+    /******/
   }, {
     key: "appendToLabel",
     value: function appendToLabel() {
       var label = this.getLabel();
-      for (var _len = arguments.length, elements = new Array(_len), _key = 0; _key < _len; _key++) {
-        elements[_key] = arguments[_key];
+      if (label) {
+        for (var _len = arguments.length, elements = new Array(_len), _key = 0; _key < _len; _key++) {
+          elements[_key] = arguments[_key];
+        }
+        label.append.apply(label, [" "].concat(elements));
       }
-      label.append.apply(label, [" "].concat(elements));
     }
 
     /**
@@ -935,6 +936,7 @@ var DOMNodeReference = /*#__PURE__*/function () {
      * @method addClickListener
      * @param {Function} eventHandler - The function to execute when the element is clicked.
      */
+    /******/
   }, {
     key: "addClickListener",
     value: function addClickListener(eventHandler) {
@@ -949,6 +951,7 @@ var DOMNodeReference = /*#__PURE__*/function () {
      * @method addChangeListener
      * @param {Function} eventHandler - The function to execute when the element's value changes.
      */
+    /******/
   }, {
     key: "addChangeListener",
     value: function addChangeListener(eventHandler) {
@@ -962,6 +965,7 @@ var DOMNodeReference = /*#__PURE__*/function () {
      * Unchecks both the yes and no radio buttons if they exist.
      * @method uncheckRadios
      */
+    /******/
   }, {
     key: "uncheckRadios",
     value: function uncheckRadios() {
@@ -979,6 +983,7 @@ var DOMNodeReference = /*#__PURE__*/function () {
      * @param {Function} evaluationFunction - The function used to evaluate the field.
      * @param {string} fieldDisplayName - The field name to display in error if validation fails.
      */
+    /******/
   }, {
     key: "createValidation",
     value: function createValidation(evaluationFunction, fieldDisplayName) {
@@ -990,11 +995,14 @@ var DOMNodeReference = /*#__PURE__*/function () {
      * @method addLabelTooltip
      * @param {string} text - The text to display in the tooltip.
      */
+    /******/
   }, {
     key: "addLabelTooltip",
     value: function addLabelTooltip(text) {
       this.appendToLabel(CreateInfoEl(text));
     }
+
+    /******/
   }, {
     key: "addToolTip",
     value: function addToolTip(text) {
@@ -1006,6 +1014,7 @@ var DOMNodeReference = /*#__PURE__*/function () {
      * @method setTextContent
      * @param {string} text - The text to set as the inner HTML of the element.
      */
+    /******/
   }, {
     key: "setTextContent",
     value: function setTextContent(text) {
@@ -1014,26 +1023,43 @@ var DOMNodeReference = /*#__PURE__*/function () {
 
     /**
      *
-     * @param {Array<Function>} conditions an array of functions that return a boolean value to set the visibility of the targeted element.
-     *  if condition() returns true, element is shown. If false, element is hidden
+     * @param {boolean} shouldShow shows or hides the target
+     * if = true => show, if = false => hide
      */
+  }, {
+    key: "toggleVisibility",
+    value: function toggleVisibility(shouldShow) {
+      shouldShow ? this.show() : this.hide();
+    }
+
+    /**
+     *
+     * @param {Function} condition A Function that return a boolean value to set the
+     *  visibility of the targeted element. if condition() returns true, element is shown.
+     *  If false, element is hidden
+     * @param {DOMNodeReference} triggerNode The DOMNodeReference to which an
+     * event listener will be registered to change the visibility state of the calling
+     * DOMNodeReference
+     */
+    /******/
   }, {
     key: "configureConditionalRendering",
-    value: function configureConditionalRendering() {
-      var _this = this;
-      for (var _len2 = arguments.length, conditions = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        conditions[_key2] = arguments[_key2];
-      }
-      conditions.forEach(function (condition) {
-        var o = new MutationObserver(function () {
-          if (condition()) _this.show();else _this.hide();
+    value: function configureConditionalRendering(condition, triggerNode) {
+      var _this2 = this;
+      this.toggleVisibility(condition());
+      if (triggerNode) {
+        triggerNode.addChangeListener(function () {
+          _this2.toggleVisibility(condition());
         });
-        o.observe(document.body, {
-          subtree: true,
-          childList: true,
-          attributes: true
+        var observer = new MutationObserver(function () {
+          var display = window.getComputedStyle(triggerNode.visibilityController).display;
+          _this2.toggleVisibility(display !== "none" && condition());
         });
-      });
+        observer.observe(triggerNode.visibilityController, {
+          attributes: true,
+          attributeFilter: ["style"]
+        });
+      }
     }
 
     /**
@@ -1043,18 +1069,19 @@ var DOMNodeReference = /*#__PURE__*/function () {
      * @method onceLoaded
      * @param {Function} callback - A callback function to execute once the element is loaded.
      */
+    /******/
   }, {
     key: "onceLoaded",
     value: function onceLoaded(callback) {
-      var _this2 = this;
+      var _this3 = this;
       if (this.isLoaded) {
         callback(this);
       } else {
         var observer = new MutationObserver(function () {
-          if (document.querySelector(_this2.querySelector)) {
+          if (document.querySelector(_this3.target)) {
             observer.disconnect(); // Stop observing once loaded
-            _this2.isLoaded = true;
-            callback(_this2); // Call the provided callback
+            _this3.isLoaded = true;
+            callback(_this3); // Call the provided callback
           }
         });
         observer.observe(document.body, {
@@ -1069,22 +1096,31 @@ var DOMNodeReference = /*#__PURE__*/function () {
  * Creates and initializes a DOMNodeReference instance.
  * @async
  * @function createDOMNodeReference
- * @param {string} querySelector - The CSS selector for the desired DOM element.
+ * @param {string | HTMLElement} target - The CSS selector for the desired DOM element.
  * @returns {Promise<DOMNodeReference>} A promise that resolves to a Proxy of the initialized DOMNodeReference instance.
  */
 function createDOMNodeReference(_x) {
   return _createDOMNodeReference.apply(this, arguments);
 }
+
+/**
+ * Creates and initializes multiple DOMNodeReference instances.
+ * @async
+ * @function createMultipleDOMNodeReferences
+ * @param {string} querySelector - The CSS selector for the desired DOM elements.
+ * @returns {Promise<DOMNodeReference[]>} A promise that resolves to an array of Proxies of initialized DOMNodeReference instances.
+ */
 function _createDOMNodeReference() {
-  _createDOMNodeReference = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(querySelector) {
+  _createDOMNodeReference = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(target) {
     var instance;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          instance = new DOMNodeReference(querySelector);
-          _context2.next = 3;
+          _context2.prev = 0;
+          instance = new DOMNodeReference(target);
+          _context2.next = 4;
           return instance.init();
-        case 3:
+        case 4:
           return _context2.abrupt("return", new Proxy(instance, {
             get: function get(target, prop) {
               // do not proxy the initialization method
@@ -1096,8 +1132,8 @@ function _createDOMNodeReference() {
               var value = target[prop];
               if (typeof value === "function" && prop !== "onceLoaded") {
                 return function () {
-                  for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-                    args[_key3] = arguments[_key3];
+                  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                    args[_key2] = arguments[_key2];
                   }
                   return target.onceLoaded(function () {
                     return value.apply(target, args);
@@ -1107,18 +1143,65 @@ function _createDOMNodeReference() {
               return value;
             }
           }));
-        case 4:
+        case 7:
+          _context2.prev = 7;
+          _context2.t0 = _context2["catch"](0);
+          console.error("There was an error creating a DOMNodeReference: ".concat(_context2.t0));
+          throw new Error(_context2.t0);
+        case 11:
         case "end":
           return _context2.stop();
       }
-    }, _callee2);
+    }, _callee2, null, [[0, 7]]);
   }));
   return _createDOMNodeReference.apply(this, arguments);
 }
+function createMultipleDOMNodeReferences(_x2) {
+  return _createMultipleDOMNodeReferences.apply(this, arguments);
+}
+function _createMultipleDOMNodeReferences() {
+  _createMultipleDOMNodeReferences = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(querySelector) {
+    var elements;
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.prev = 0;
+          elements = Array.from(document.querySelectorAll(querySelector));
+          _context3.next = 4;
+          return Promise.all(elements.map(function (element) {
+            return createDOMNodeReference(element);
+          }));
+        case 4:
+          elements = _context3.sent;
+          elements.hideAll = function () {
+            return elements.forEach(function (instance) {
+              return instance.hide();
+            });
+          };
+          elements.showAll = function () {
+            return elements.forEach(function (instance) {
+              return instance.show();
+            });
+          };
+          return _context3.abrupt("return", elements);
+        case 10:
+          _context3.prev = 10;
+          _context3.t0 = _context3["catch"](0);
+          console.error("There was an error creating multiple DOMNodeReferences: ".concat(_context3.t0));
+          throw new Error(_context3.t0);
+        case 14:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3, null, [[0, 10]]);
+  }));
+  return _createMultipleDOMNodeReferences.apply(this, arguments);
+}
 ;// ./src/index.js
 
 
 
-var __webpack_exports__API = __webpack_exports__.n;
-var __webpack_exports__createDOMNodeReference = __webpack_exports__.m;
-export { __webpack_exports__API as API, __webpack_exports__createDOMNodeReference as createDOMNodeReference };
+var __webpack_exports__API = __webpack_exports__.nC;
+var __webpack_exports__createDOMNodeReference = __webpack_exports__.mI;
+var __webpack_exports__createMultipleDOMNodeReferences = __webpack_exports__.xq;
+export { __webpack_exports__API as API, __webpack_exports__createDOMNodeReference as createDOMNodeReference, __webpack_exports__createMultipleDOMNodeReferences as createMultipleDOMNodeReferences };

package/index.d.ts

@@ -1,182 +1,206 @@
-declare module "powerpagestoolkit" {
-  /**
-   * Class representing a reference to a DOM node.
-   */
-  class DOMNodeReference {
-    /**
-     * Creates an instance of DOMNodeReference.
-     * @param {string} querySelector - The CSS selector to find the desired DOM element.
-     */
-    constructor(querySelector: string);
-
-    element: HTMLElement | null;
-    isLoaded: boolean;
-
-    /**
-     * Initializes the DOMNodeReference instance by waiting for the element to be available in the DOM.
-     * @returns {Promise<DOMNodeReference>} A promise that resolves to a Proxy of the DOMNodeReference instance.
-     * @throws {Error} Throws an error if the element cannot be found using the provided query selector.
-     */
-    private init(): Promise<this>;
-
-    /**
-     * Hides the element by setting its display style to "none".
-     */
-    hide(): void;
-
-    /**
-     * Shows the element by restoring its default display style.
-     */
-    show(): void;
-
-    /**
-     * Hides the parent element by setting its display style to "none".
-     */
-    hideParent(): void;
-
-    /**
-     * Shows the parent element by restoring its default display style.
-     */
-    showParent(): void;
-
-    /**
-     * Hides the container (grandparent of the element) by setting its display style to "none".
-     */
-    hideContainer(): void;
-
-    /**
-     * Shows the container (grandparent of the element) by restoring its default display style.
-     */
-    showContainer(): void;
-
-    /**
-     * Sets the value of the HTML element.
-     * @param {string} value - The value to set for the HTML element.
-     */
-    setValue(value: string): void;
-
-    /**
-     * Gets the value of the HTML element.
-     * @returns {string} The current value of the HTML element.
-     */
-    getValue(): string;
-
-    /**
-     * Appends child elements to the HTML element.
-     * @param {...HTMLElement} elements - The elements to append to the HTML element.
-     */
-    append(...elements: HTMLElement[]): void;
-
-    /**
-     * Inserts elements after the HTML element.
-     * @param {...HTMLElement} elements - The elements to insert after the HTML element.
-     */
-    after(...elements: HTMLElement[]): void;
-
-    /**
-     * Retrieves the label associated with the HTML element.
-     * @returns {HTMLElement} The label element associated with this element.
-     * @throws {Error} Throws an error if the label cannot be found.
-     */
-    getLabel(): HTMLElement;
-
-    /**
-     * Appends child elements to the label associated with the HTML element.
-     * @param {...HTMLElement} elements - The elements to append to the label.
-     */
-    appendToLabel(...elements: HTMLElement[]): void;
-
-    /**
-     * Adds a click event listener to the HTML element.
-     * @param {Function} eventHandler - The function to execute when the element is clicked.
-     */
-    addClickListener(eventHandler: () => void): void;
-
-    /**
-     * Adds a change event listener to the HTML element.
-     * @param {Function} eventHandler - The function to execute when the element's value changes.
-     */
-    addChangeListener(eventHandler: () => void): void;
-
-    /**
-     * Unchecks both the yes and no radio buttons if they exist.
-     */
-    uncheckRadios(): void;
-
-    /**
-     * Creates a validation instance for the field.
-     * @param {Function} evaluationFunction - The function used to evaluate the field.
-     * @param {string} fieldDisplayName - The field name to display in error if validation fails.
-     */
-    createValidation(
-      evaluationFunction: (value: any) => boolean,
-      fieldDisplayName: string
-    ): void;
-
-    /**
-     * Adds a tooltip with specified text to the label associated with the HTML element.
-     * @param {string} text - The text to display in the tooltip.
-     */
-    addLabelTooltip(text: string): void;
-
-    /**
-     * Sets the inner HTML content of the HTML element.
-     * @param {string} text - The text to set as the inner HTML of the element.
-     */
-    setTextContent(text: string): void;
-
-    /**
-     * 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 {Function} callback - A callback function to execute once the element is loaded.
-     */
-    onceLoaded(callback: (instance: this) => void): void;
-  }
-
-  /**
-   * Creates and initializes a DOMNodeReference instance.
-   * @async
-   * @function createDOMNodeReference
-   * @param {string} querySelector - The CSS selector for the desired DOM element.
-   * @returns {Promise<DOMNodeReference>} A promise that resolves to a Proxy of the initialized DOMNodeReference instance.
-   */
-  export async function createDOMNodeReference(
-    querySelector: string
-  ): Promise<DOMNodeReference>;
-
-  interface Schema {
-    logicalName(): string;
-    value(): any; // Adjust this type based on the structure of your schema values
-  }
-
-  export const API: {
-    /**
-     * Creates a new record in DataVerse.
-     * @param schema An instance of a schema class, containing the desired information for the POST request.
-     * @returns A Promise resolving the successful results (record ID) of the POST request, or rejecting with the error.
-     */
-    createRecord(schema: Schema): Promise<string>;
-
-    /**
-     * Retrieves a single record from DataVerse.
-     * @param tableSetName The DataVerse SET name of the table being queried.
-     * @param recordID The GUID of the record to be retrieved.
-     * @param selectColumns *OPTIONAL* 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 with the error.
-     */
-    getRecord(
-      tableSetName: string,
-      recordID: string,
-      selectColumns?: string
-    ): Promise<any>; // Adjust return type as necessary
-
-    /**
-     * Retrieves multiple records from DataVerse.
-     * @param tableSetName The DataVerse SET name of the table being queried.
-     * @param queryParameters *OPTIONAL* 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 with the error.
-     */
-    getMultiple(tableSetName: string, queryParameters?: string): Promise<any>; // Adjust return type as necessary
-  };
+/**
+ * Class representing a reference to a DOM node.
+ */
+class DOMNodeReference {
+  /**
+   * Creates an instance of DOMNodeReference.
+   * @param {string} querySelector - The CSS selector to find the desired DOM element.
+   */
+  constructor(target: string): DOMNodeReference;
+
+  target: string;
+  element: HTMLElement | null;
+  isLoaded: boolean;
+  visibilityController: HTMLElement | null;
+  defaultDisplay: string;
+  value: string | null;
+
+  /**
+   * Initializes the DOMNodeReference instance by waiting for the element to be available in the DOM.
+   * @returns {Promise<DOMNodeReference>} A promise that resolves to a Proxy of the DOMNodeReference instance.
+   * @throws {Error} Throws an error if the element cannot be found using the provided query selector.
+   */
+  private init(): Promise<this>;
+
+  /**
+   * Hides the element by setting its display style to "none".
+   */
+  hide(): void;
+
+  /**
+   * Shows the element by restoring its default display style.
+   */
+  show(): void;
+
+  /**
+   * Sets the value of the HTML element.
+   * @param {string} value - The value to set for the HTML element.
+   */
+  setValue(value: string): void;
+
+  /**
+   * Appends child elements to the HTML element.
+   * @param {...HTMLElement} elements - The elements to append to the HTML element.
+   */
+  append(...elements: HTMLElement[]): void;
+
+  /**
+   * Inserts elements after the HTML element.
+   * @param {...HTMLElement} elements - The elements to insert after the HTML element.
+   */
+  after(...elements: HTMLElement[]): void;
+
+  /**
+   * Retrieves the label associated with the HTML element.
+   * @returns {HTMLElement} The label element associated with this element, or **null** if no label element is present
+   */
+  getLabel(): HTMLElement | null;
+
+  /**
+   * Appends child elements to the label associated with the HTML element.
+   * @param {...HTMLElement} elements - The elements to append to the label.
+   */
+  appendToLabel(...elements: HTMLElement[]): void;
+
+  /**
+   * Adds a click event listener to the HTML element.
+   * @param {Function} eventHandler - The function to execute when the element is clicked.
+   */
+  addClickListener(eventHandler: () => void): void;
+
+  /**
+   * Adds a change event listener to the HTML element.
+   * @param {Function} eventHandler - The function to execute when the element's value changes.
+   */
+  addChangeListener(eventHandler: () => void): void;
+
+  /**
+   * Unchecks both the yes and no radio buttons if they exist.
+   */
+  uncheckRadios(): void;
+
+  /**
+   * Creates a validation instance for the field.
+   * @param {Function} evaluationFunction - The function used to evaluate the field.
+   * @param {string} fieldDisplayName - The field name to display in error if validation
+   * fails.
+   */
+  createValidation(
+    evaluationFunction: (value: any) => boolean,
+    fieldDisplayName: string
+  ): void;
+
+  /**
+   * Adds a tooltip with specified text to the label associated with the HTML element.
+   * @param {string} text - The text to display in the tooltip.
+   */
+  addLabelTooltip(text: string): void;
+
+  /**
+   * Sets the inner HTML content of the HTML element.
+   * @param {string} text - The text to set as the inner HTML of the element.
+   */
+  setTextContent(text: string): void;
+
+  /**
+   *
+   * @param {boolean} shouldShow shows or hides the target
+   * if = true => show, if = false => hide
+   */
+  toggleVisibility(shouldShow: boolean): void;
+
+  /**
+   *
+   * @param {Function} condition A Function that return a boolean value to set the
+   *  visibility of the targeted element. if condition() returns true, element is shown.
+   *  If false, element is hidden
+   * @param {DOMNodeReference} triggerNode The DOMNodeReference to which an
+   * event listener will be registered to change the visibility state of the calling
+   * DOMNodeReference
+   */
+  configureConditionalRendering(
+    condition: () => boolean,
+    triggerNode: DOMNodeReference
+  ): void;
+
+  /**
+   * 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 {Function} callback - A callback function to execute once the element is loaded.
+   */
+  onceLoaded(callback: (instance: this) => void): void;
 }
+
+/**
+ * Creates and initializes a DOMNodeReference instance.
+ * @async
+ * @function createDOMNodeReference
+ * @param {string} target - The CSS selector for the desired DOM element.
+ * @returns {Promise<DOMNodeReference>} A promise that resolves to a Proxy of the initialized DOMNodeReference instance.
+ */
+export declare async function createDOMNodeReference(
+  querySelector: string | HTMLElement
+): Promise<DOMNodeReference>;
+
+/**
+ * Interface representing an array of DOMNodeReference instances with additional methods.
+ */
+export interface DOMNodeReferenceArray extends Array<DOMNodeReference> {
+  /**
+   * Hides all the containers of the DOMNodeReference instances in the array.
+   */
+  hideAll(): void;
+
+  /**
+   * Shows all the containers of the DOMNodeReference instances in the array.
+   */
+  showAll(): void;
+}
+
+/**
+ * Creates and initializes multiple DOMNodeReference instances.
+ * @function createMultipleDOMNodeReferences
+ * @param {string} querySelector - The CSS selector for the desired DOM elements.
+ * @returns {Promise<DOMNodeReferenceArray>}
+ * A promise that resolves to an array of Proxies of initialized
+ * DOMNodeReference instances.
+ */
+export declare async function createMultipleDOMNodeReferences(
+  querySelector: string
+): Promise<DOMNodeReferenceArray>;
+
+interface Schema {
+  logicalName(): string;
+  value(): any; // Adjust this type based on the structure of your schema values
+}
+
+export declare const API: {
+  /**
+   * Creates a new record in DataVerse.
+   * @param schema An instance of a schema class, containing the desired information for the POST request.
+   * @returns A Promise resolving the successful results (record ID) of the POST request, or rejecting with the error.
+   */
+  createRecord(schema: Schema): Promise<string>;
+
+  /**
+   * Retrieves a single record from DataVerse.
+   * @param tableSetName The DataVerse SET name of the table being queried.
+   * @param recordID The GUID of the record to be retrieved.
+   * @param selectColumns *OPTIONAL* 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 with the error.
+   */
+  getRecord(
+    tableSetName: string,
+    recordID: string,
+    selectColumns?: string
+  ): Promise<any>; // Adjust return type as necessary
+
+  /**
+   * Retrieves multiple records from DataVerse.
+   * @param tableSetName The DataVerse SET name of the table being queried.
+   * @param queryParameters *OPTIONAL* 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 with the error.
+   */
+  getMultiple(tableSetName: string, queryParameters?: string): Promise<any>; // Adjust return type as necessary
+};

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "powerpagestoolkit",
-  "version": "1.2.202",
+  "version": "1.3.101",
   "description": "Reference, manipulate, and engage with Power Pages sites through the nodes in the DOM; use a variety of custom methods that allow customizing your power pages site quicker and easier.  ",
   "main": "./dist/index.bundle.js",
   "types": "index.d.ts",
   "scripts": {
-    "build": "webpack"
+    "build": "webpack",
+    "lint": "eslint ./src/JS/*"
   },
   "devDependencies": {
     "@babel/core": "^7.25.8",
@@ -16,7 +17,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^7.1.2",
     "eslint": "^8.57.1",
-    "rimraf": "^6.0.1",
+    "eslint-plugin-import": "^2.31.0",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.4",
     "typescript": "^5.6.3",
@@ -33,8 +34,5 @@
   "files": [
     "dist",
     "index.d.ts"
-  ],
-  "exports": {
-    ".": "./dist/index.bundle.js"
-  }
+  ]
 }