powerpagestoolkit 1.3.2 → 1.3.4

package/README.md

@@ -59,8 +59,15 @@ target: HTMLElement | string;
 element: HTMLElement;
 isLoaded: boolean;
 value: any;
+/**
+ * If the element targeted is the main input for a yes/no radio control,
+ * yesRadio and noRadio will be available as properties of 'this'
+ */
 yesRadio: DOMNodeReference;
 noRadio: DOMNodeReference;
+// and if 'this' is the instance of a yesRadio or noRadio
+// checked will represent wether the radio has been checked or not
+checked: boolean;
 ```
 
 ##### Methods
@@ -85,19 +92,22 @@ show()
 toggleVisibility(shouldShow: boolean | () => boolean)
 
 /**
-  * Configures conditional rendering for the target element based on a condition
-  * and the visibility of one or more trigger elements.
+  * Configures conditional rendering for the target element
+  * based on a condition and the visibility of one or more trigger elements.
   *
-  * @param {(this: DOMNodeReference) => boolean} 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 {DOMNodeReference[]} triggerNodes - 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.
+  * @param {(this: DOMNodeReference) => boolean} 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 {Array<DOMNodeReference>} 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.
   */
 configureConditionalRendering(
   condition: (this: DOMNodeReference) => boolean,
-  triggerNodes: DOMNodeReference[]
+  dependencies: Array<DOMNodeReference>
   )
 
 
@@ -106,18 +116,36 @@ configureConditionalRendering(
     const other_node = await createDOMNodeReference(".element_class")
 
     your_node.configureConditionalRendering(() =>
-        other_node.value == "3", // your_node will only be visible when the value of other_node is "3"
-        [other_node] // and we have to include any DOMNodeReferences used in the evaluation logic, so that changes to them can be watched and the condition evaluated again
+        other_node.value == "3",
+        /* your_node will only be
+        visible when the value of other_node is "3"
+        */
+        [other_node]
+        /* and we have to include any DOMNodeReferences used
+        in the evaluation logic, so that changes to them can
+        be watched and the condition evaluated again
+        */
       );
 
 
 /**
- * Sets up validation and requirement rules for the field. This function dynamically updates the field's required status and validates its input based on the specified conditions.
+ * Sets up validation and requirement rules for the field.
+ * This function dynamically updates the field's required status
+ * and validates its input based on the specified conditions.
  *
- * @param {function(this: DOMNodeReference): boolean} isRequired - A function that determines whether the field should be required. Returns `true` if required, `false` otherwise.
- * @param {function(this: DOMNodeReference): boolean} isValid - A function that checks if the field's input is valid. Returns `true` if valid, `false` otherwise.
- * @param {string} fieldDisplayName - The name of the field, used in error messages if validation fails.
- * @param {Array<DOMNodeReference>} [dependencies] Other fields that this field’s requirement depends on. When these fields change, the required status of this field is re-evaluated. Make sure any DOMNodeReference used in `isRequired` or `isValid` is included in this array.
+ * @param {function(this: DOMNodeReference): boolean} isRequired
+ * A function that determines whether the field should be required.
+ * Return `true` if required, `false` to not be required.
+ * @param {function(this: DOMNodeReference): boolean} isValid
+ * A function that checks if the field's input is valid.
+ * Return `true` if validation satisfied, `false` if not.
+ * @param {string} fieldDisplayName - The name of the field, used
+ * in error messages if validation fails.
+ * @param {Array<DOMNodeReference>} [dependencies]
+ * Other fields that this field’s requirement depends on. When
+ * these Nodes or their values change, the required status
+ * of this field is re-evaluated. Make sure any DOMNodeReference
+ * used in `isRequired` or `isValid` is included in this array.
  */
 configureValidationAndRequirements(
   isRequired: (this: this) => boolean,
@@ -131,18 +159,32 @@ configureValidationAndRequirements(
     const other_node = await createDOMNodeReference(".element_class")
 
     your_node.configureValidationAndRequirements(
-        () => other_node.yesRadio.checked, // if 'yes' is checked for this other node, this function will evaluate to true, meaning that 'your_node' will be required
-        function () { // important to use standard 'function' declaration, instead of arrow function when needing to access 'this' (the instance of 'your_node')
-          if (other_node.yesRadio.checked) { // when other_node radio is checked 'yes'
+        () => other_node.yesRadio.checked,
+        /* if 'yes' is checked for this other node,
+          this function will evaluate to true,
+          meaning that 'your_node' will be required */
+
+        function () {
+          /* important to use standard 'function' declaration,
+            instead of arrow function when needing to
+            access 'this' (the instance of 'your_node') */
+
+          if (other_node.yesRadio.checked) {
+            // when other_node radio is checked 'yes'
             return this.value; // this is only 'valid' if it has a value
           } else return true;
         },
         "Your Field Name",
-        [other_node] // since our conditions depend on 'other_node' it must be included in the dependency array so that the requirement conditions can be re-evaluated when the value of 'other_node' changes
+        [other_node]
+        /* since our conditions depend on
+          'other_node' it must be included in the dependency
+          array so that the requirement conditions can be
+          re-evaluated when the value of 'other_node' changes */
       );
 
 
-// sets the elements 'disabled' to true - useful for inputs that need to be enabled/disabled conditionally
+/* sets the elements 'disabled' to true - useful for inputs
+that need to be enabled/disabled conditionally */
 disable()
 
 // Sets the element 'disabled' to false
@@ -158,6 +200,9 @@ setValue(value: any)
 // Sets the inner HTML content of the associated HTML element.
 setTextContent(text: string)
 
+// set any style attribute for 'this' with standard CSS style declaration
+setStyle(options: Partial<CSSStyleDeclaration>): void;
+
 // Appends child elements to the associated HTML element.
 append(...elements: HTMLElement[])
 
@@ -177,9 +222,6 @@ on(eventType: string, eventHandler: (this: DOMNodeReference) => 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)
 

package/dist/index.bundle.js

@@ -815,7 +815,7 @@ var DOMNodeReference = /*#__PURE__*/function () {
             case 10:
               this._initValueSync();
               this._attachVisibilityController();
-              this.defaultDisplay = this.visibilityController.style.display;
+              this.defaultDisplay = this.visibilityController.style.display || "inline-block";
               this.isLoaded = true;
               _context.next = 19;
               break;
@@ -935,16 +935,19 @@ var DOMNodeReference = /*#__PURE__*/function () {
     key: "on",
     value: function on(eventType, eventHandler) {
       this.element.addEventListener(eventType, eventHandler.bind(this));
+      return this;
     }
   }, {
     key: "hide",
     value: function hide() {
       this.visibilityController.style.display = "none";
+      return this;
     }
   }, {
     key: "show",
     value: function show() {
       this.visibilityController.style.display = this.defaultDisplay;
+      return this;
     }
   }, {
     key: "toggleVisibility",
@@ -954,6 +957,7 @@ var DOMNodeReference = /*#__PURE__*/function () {
       } else {
         shouldShow ? this.show() : this.hide();
       }
+      return this;
     }
   }, {
     key: "setValue",
@@ -964,6 +968,7 @@ var DOMNodeReference = /*#__PURE__*/function () {
       } else {
         this.element.value = value;
       }
+      return this;
     }
   }, {
     key: "disable",
@@ -973,6 +978,7 @@ var DOMNodeReference = /*#__PURE__*/function () {
       } catch (e) {
         throw new Error("There was an error trying to disable the target: ".concat(this.target));
       }
+      return this;
     }
   }, {
     key: "enable",
@@ -982,18 +988,71 @@ var DOMNodeReference = /*#__PURE__*/function () {
       } catch (e) {
         throw new Error("There was an error trying to disable the target: ".concat(this.target));
       }
+      return this;
+    }
+  }, {
+    key: "prepend",
+    value: function prepend() {
+      var _this = this;
+      for (var _len = arguments.length, nodes = new Array(_len), _key = 0; _key < _len; _key++) {
+        nodes[_key] = arguments[_key];
+      }
+      nodes.forEach(function (node) {
+        if (node instanceof DOMNodeReference) {
+          _this.element.prepend(node.element);
+        } else {
+          _this.element.prepend(node);
+        }
+      });
+      return this;
     }
   }, {
     key: "append",
     value: function append() {
-      var _this$element;
-      (_this$element = this.element).append.apply(_this$element, arguments);
+      var _this2 = this;
+      for (var _len2 = arguments.length, nodes = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        nodes[_key2] = arguments[_key2];
+      }
+      nodes.forEach(function (node) {
+        if (node instanceof DOMNodeReference) {
+          _this2.element.append(node.element);
+        } else {
+          _this2.element.append(node);
+        }
+      });
+      return this;
+    }
+  }, {
+    key: "before",
+    value: function before() {
+      var _this3 = this;
+      for (var _len3 = arguments.length, nodes = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        nodes[_key3] = arguments[_key3];
+      }
+      nodes.forEach(function (node) {
+        if (node instanceof DOMNodeReference) {
+          _this3.element.before(node.element);
+        } else {
+          _this3.element.before(node);
+        }
+      });
+      return this;
     }
   }, {
     key: "after",
     value: function after() {
-      var _this$element2;
-      (_this$element2 = this.element).after.apply(_this$element2, arguments);
+      var _this4 = this;
+      for (var _len4 = arguments.length, nodes = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+        nodes[_key4] = arguments[_key4];
+      }
+      nodes.forEach(function (node) {
+        if (node instanceof DOMNodeReference) {
+          _this4.element.after(node.element);
+        } else {
+          _this4.element.after(node);
+        }
+      });
+      return this;
     }
   }, {
     key: "getLabel",
@@ -1005,26 +1064,48 @@ var DOMNodeReference = /*#__PURE__*/function () {
     value: function appendToLabel() {
       var label = this.getLabel();
       if (label) {
-        for (var _len = arguments.length, elements = new Array(_len), _key = 0; _key < _len; _key++) {
-          elements[_key] = arguments[_key];
+        for (var _len5 = arguments.length, elements = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+          elements[_key5] = arguments[_key5];
         }
         label.append.apply(label, [" "].concat(elements));
       }
+      return this;
     }
   }, {
     key: "addLabelTooltip",
     value: function addLabelTooltip(text) {
       this.appendToLabel(CreateInfoEl(text));
+      return this;
     }
   }, {
-    key: "addToolTip",
-    value: function addToolTip(text) {
+    key: "addTooltip",
+    value: function addTooltip(text) {
       this.append(CreateInfoEl(text));
+      return this;
+    }
+  }, {
+    key: "setInnerHTML",
+    value: function setInnerHTML(string) {
+      this.element.innerHTML = string;
+      return this;
+    }
+  }, {
+    key: "remove",
+    value: function remove() {
+      this.element.remove();
+      return this;
     }
   }, {
-    key: "setTextContent",
-    value: function setTextContent(text) {
-      this.element.innerHTML = text;
+    key: "setStyle",
+    value: function setStyle(options) {
+      var _this5 = this;
+      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: ".concat(DOMNodeReferences_typeof(options)));
+      }
+      Object.keys(options).forEach(function (key) {
+        _this5.element.style[key] = options[key];
+      });
+      return this;
     }
   }, {
     key: "uncheckRadios",
@@ -1035,22 +1116,23 @@ var DOMNodeReference = /*#__PURE__*/function () {
       } else {
         console.error("[SYNACT] Attempted to uncheck radios for an element that has no radios");
       }
+      return this;
     }
   }, {
     key: "configureConditionalRendering",
     value: function configureConditionalRendering(condition, triggerNodes) {
-      var _this = this;
+      var _this6 = this;
       try {
         this.toggleVisibility(condition(this));
         if (triggerNodes) {
           var nodes = Array.isArray(triggerNodes) ? triggerNodes : [triggerNodes];
           nodes.forEach(function (node) {
             node.on("change", function () {
-              return _this.toggleVisibility(condition(_this));
+              return _this6.toggleVisibility(condition(_this6));
             });
             var observer = new MutationObserver(function () {
               var display = window.getComputedStyle(node.visibilityController).display;
-              _this.toggleVisibility(display !== "none" && condition(_this));
+              _this6.toggleVisibility(display !== "none" && condition(_this6));
             });
             observer.observe(node.visibilityController, {
               attributes: true,
@@ -1061,11 +1143,12 @@ var DOMNodeReference = /*#__PURE__*/function () {
       } catch (e) {
         throw new ConditionalRenderingError(this, e);
       }
+      return this;
     }
   }, {
     key: "configureValidationAndRequirements",
     value: function configureValidationAndRequirements(isRequired, isValid, fieldDisplayName) {
-      var _this2 = this;
+      var _this7 = this;
       var dependencies = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
       if (typeof Page_Validators !== "undefined") {
         var newValidator = document.createElement("span");
@@ -1080,13 +1163,14 @@ var DOMNodeReference = /*#__PURE__*/function () {
         throw new Error("Attempted to add to Validator where Page_Validators do not exist");
       }
       this.setRequiredLevel(isRequired(this));
-      if (!dependencies) return;
+      if (!dependencies) return this;
       dependencies = Array.isArray(dependencies) ? dependencies : [dependencies];
       dependencies.forEach(function (dep) {
         dep.element.addEventListener("change", function () {
-          return _this2.setRequiredLevel(isRequired(_this2));
+          return _this7.setRequiredLevel(isRequired(_this7));
         });
       });
+      return this;
     }
   }, {
     key: "setRequiredLevel",
@@ -1096,19 +1180,20 @@ var DOMNodeReference = /*#__PURE__*/function () {
       } else {
         this.getLabel().classList.remove("required-field");
       }
+      return this;
     }
   }, {
     key: "onceLoaded",
     value: function onceLoaded(callback) {
-      var _this3 = this;
+      var _this8 = this;
       if (this.isLoaded) {
         callback(this);
       } else {
         var observer = new MutationObserver(function () {
-          if (document.querySelector(_this3.target)) {
+          if (document.querySelector(_this8.target)) {
             observer.disconnect(); // Stop observing once loaded
-            _this3.isLoaded = true;
-            callback(_this3); // Call the provided callback
+            _this8.isLoaded = true;
+            callback(_this8); // Call the provided callback
           }
         });
         observer.observe(document.body, {
@@ -1159,12 +1244,13 @@ function _createDOMNodeReference() {
               var value = target[prop];
               if (typeof value === "function" && prop !== "onceLoaded") {
                 return function () {
-                  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-                    args[_key2] = arguments[_key2];
+                  for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+                    args[_key6] = arguments[_key6];
                   }
-                  return target.onceLoaded(function () {
+                  target.onceLoaded(function () {
                     return value.apply(target, args);
                   });
+                  return target;
                 };
               }
               return value;

package/index.d.ts

@@ -8,7 +8,6 @@ class DOMNodeReference {
    */
   constructor(target: string): DOMNodeReference;
 
-  target: string;
   /**
    * The element targeted when instantiating DOMNodeReference.
    * Made available in order to perform normal DOM traversal,
@@ -17,8 +16,6 @@ class DOMNodeReference {
    */
   element: HTMLElement | null;
   isLoaded: boolean;
-  visibilityController: HTMLElement | null;
-  defaultDisplay: string;
   /**
    * The value of the element that this node represents
    * stays in syncs with the live DOM elements via event handler
@@ -50,55 +47,64 @@ class DOMNodeReference {
 
   /**
    * Hides the element by setting its display style to "none".
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  hide(): void;
+  hide(): DOMNodeReference;
 
   /**
    * Shows the element by restoring its default display style.
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  show(): void;
+  show(): DOMNodeReference;
 
   /**
    * Sets the value of the HTML element.
    * @param {() => any} 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 {DOMNodeReference} Returns 'this'
    */
-  setValue(value: string): void;
+  setValue(value: string): DOMNodeReference;
 
   /**
    * Disables the element so that users cannot input any data
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  disable(): void;
+  disable(): DOMNodeReference;
 
   /**
    * Enables the element so that users can input data
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  enable(): void;
+  enable(): DOMNodeReference;
 
   /**
    * Prepends elements to the target
-   * @param {...HTMLElement} elements - The elements to prepend to the HTML element
+   * @param {HTMLElement[] | DOMNodeReference[]} nodes - The elements to prepend to the HTML element
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  prepend(...elements: HTMLElement[]): void;
+  prepend(...nodes: HTMLElement[] | DOMNodeReference[]): DOMNodeReference;
 
   /**
    * Appends child elements to the HTML element.
-   * @param {...HTMLElement} elements - The elements to append to the HTML element.
+   * @param {HTMLElement[] | DOMNodeReference[]} nodes - The elements to append to the HTML element.
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  append(...elements: HTMLElement[]): void;
+  append(...nodes: HTMLElement[] | DOMNodeReference[]): DOMNodeReference;
 
   /**
    * Inserts elements before the HTML element.
-   * @param {...HTMLElement} elements - The elements to insert before the HTML element.
+   * @param {HTMLElement[] | DOMNodeReference[]} nodes - The elements to insert before the HTML element.
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  before(...elements: HTMLElement[]): void;
+  before(...nodes: HTMLElement[] | DOMNodeReference[]): DOMNodeReference;
 
   /**
    * Inserts elements after the HTML element.
-   * @param {...HTMLElement} elements - The elements to insert after the HTML element.
+   * @param {HTMLElement[] | DOMNodeReference[]} nodes - The elements to insert after the HTML element.
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  after(...elements: HTMLElement[]): void;
+  after(...nodes: HTMLElement[] | DOMNodeReference[]): DOMNodeReference;
 
   /**
    * Retrieves the label associated with the HTML element.
@@ -110,8 +116,9 @@ class DOMNodeReference {
   /**
    * Appends child elements to the label associated with the HTML element.
    * @param {...HTMLElement} elements - The elements to append to the label.
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  appendToLabel(...elements: HTMLElement[]): void;
+  appendToLabel(...elements: HTMLElement[]): DOMNodeReference;
 
   /**
    * Sets up an event listener based on the specified event type, executing the specified
@@ -119,12 +126,15 @@ class DOMNodeReference {
    * @param {string} eventType - The DOM event to watch for
    * @param {(this: DOMNodeReference, e: Event) => void} eventHandler - The callback function that runs when the
    * specified event occurs
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  on(eventType: string, eventHandler: (event: Event) => void): void;
+  on(eventType: string, eventHandler: (event: Event) => void): DOMNodeReference;
+
   /**
    * Unchecks both the yes and no radio buttons if they exist.
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  uncheckRadios(): void;
+  uncheckRadios(): DOMNodeReference;
 
   /**
    * Sets up validation and requirement rules for the field. This function dynamically updates the field's required status and validates its input based on the specified conditions.
@@ -133,46 +143,66 @@ class DOMNodeReference {
    * @param {function(this: DOMNodeReference): boolean} isValid - A function that checks if the field's input is valid. Returns `true` if valid, `false` otherwise.
    * @param {string} fieldDisplayName - The name of the field, used in error messages if validation fails.
    * @param {Array<DOMNodeReference>} [dependencies] Other fields that this field’s requirement depends on. When these fields change, the required status of this field is re-evaluated. Make sure any DOMNodeReference used in `isRequired` or `isValid` is included in this array.
+   * @returns {DOMNodeReference} Returns 'this'
    */
   configureValidationAndRequirements(
     isRequired: (this: this) => boolean,
     isValid: (this: this) => boolean,
     fieldDisplayName: string,
     dependencies: Array<DOMNodeReference>
-  ): void;
+  ): DOMNodeReference;
 
   /**
    * Sets the required level for the field by adding or removing the "required-field" class on the label.
    *
    * @param {boolean} 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 {DOMNodeReference} Returns 'this'
    */
-  setRequiredLevel(isRequired: boolean): void;
+  setRequiredLevel(isRequired: boolean): DOMNodeReference;
 
   /**
    * Adds a tooltip with specified text to the label associated with the HTML element.
    * @param {string} text - The text to display in the tooltip.
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  addLabelTooltip(text: string): void;
+  addLabelTooltip(text: string): DOMNodeReference;
 
   /**
    * Adds a tooltip with the specified text to the element
    * @param {string} text - The text to display in the tooltip
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  addTooltip(text: string): void;
+  addTooltip(text: string): DOMNodeReference;
 
   /**
    * Sets the inner HTML content of the HTML element.
    * @param {string} text - The text to set as the inner HTML of the element.
+   * @returns {DOMNodeReference} Returns 'this'
+   */
+  setInnerHTML(text: string): DOMNodeReference;
+
+  /**
+   * Removes the element from the DOM
+   * @returns {DOMNodeReference} Returns 'this'
+   */
+  remove(): DOMNodeReference;
+
+  /**
+   *
+   * @param {Partial<CSSStyleDeclaration>} options - An object with the style properties (keys) and updated styles (values)
+   * to apply to the this. {"key": "value"}
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  setTextContent(text: string): void;
+  setStyle(options: Partial<CSSStyleDeclaration>): DOMNodeReference;
 
   /**
    *
    * @param {boolean} shouldShow shows or hides the target
    * if = true => show, if = false => hide
+   * @returns {DOMNodeReference} Returns 'this'
    */
-  toggleVisibility(shouldShow: boolean): void;
+  toggleVisibility(shouldShow: boolean): DOMNodeReference;
 
   /**
    * Configures conditional rendering for the target element based on a condition
@@ -181,14 +211,15 @@ class DOMNodeReference {
    * @param {(this: DOMNodeReference) => boolean} 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 {DOMNodeReference[]} triggerNodes - An array of `DOMNodeReference` instances. Event listeners are
+   * @param {Array<DOMNodeReference>} 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.
+   * @returns {DOMNodeReference} Returns 'this'
    */
   configureConditionalRendering(
     condition: (this: DOMNodeReference) => boolean,
-    triggerNodes: DOMNodeReference[]
-  ): void;
+    dependencies: DOMNodeReference[]
+  ): DOMNodeReference;
 
   /**
    * Executes a callback function once the element is fully loaded.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerpagestoolkit",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "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",