powerpagestoolkit 2.5.4211 → 2.5.4212

package/README.md

@@ -99,23 +99,25 @@ Out of the box, Microsoft does not provide PowerPages developers the ability to
 _Method signature:_
 
 ```typescript
-DOMNodeReference.configureConditionalRendering(
+configureConditionalRendering(
     condition: () => boolean,
     dependencies?: Array<DOMNodeReference>,
     clearValuesOnHide: boolean = true
-  ): DOMNodeReference
+  ): DOMNodeReference /* Instance of this returned
+  for optional method chaining */
 ```
 
 _Example implementation:_
 
 ```typescript
 node.configureConditionalRendering(
-  // Function to evaluate wether this node should be visible or not
-  function () {
+  function () // Function to evaluate wether this node should be visible or not
+  {
     return otherNode.value === "some value";
   },
   [otherNode] /* Dependency array | if the values or visibility of these
   change, the function is re-evaluated */,
+
   true /* should the values in the targeted elements (this.element)
   be cleared if this node is hidden? Default = true */
 );
@@ -128,12 +130,11 @@ This utility enhances PowerPages forms by adding dynamic field validation and co
 _Method signature:_
 
 ```typescript
-// Core method for setting up validation
-function configureValidationAndRequirements(
-  isRequired: () => boolean, // Determines if field is required
-  isValid: () => boolean, // Validates field content
-  fieldDisplayName: string, // User-facing field name for error messages
-  dependencies: DOMNodeReference[] // Fields that trigger validation checks
+configureValidationAndRequirements(
+  isRequired: () => boolean,
+  isValid: () => boolean,
+  fieldDisplayName: string,
+  dependencies: DOMNodeReference[]
 ): DOMNodeReference; /* instance of this is returned for optional
  method chaining */
 ```
@@ -218,6 +219,20 @@ node.addTooltip(
 );
 ```
 
+_Example:_
+
+```typescript
+import { createRef } from "powerpagestoolkit";
+
+const title = await createRef("h1");
+
+title.setInnerHTML("Hello World");
+title.addTooltip("This is an Example of a tooltip!", { color: "red" });
+```
+
+![Example](./assets//infoIconExample.gif)
+
+
 ### DataVerse API
 
 Perform secure API calls to DataVerse from your PowerPages site. This method implements the shell deferred token to send requests with `__RequestVerificationToken`

package/dist/DOMNodeReference.d.ts

@@ -3,6 +3,8 @@ export default class DOMNodeReference {
     target: HTMLElement | string;
     private isLoaded;
     private defaultDisplay;
+    private observers;
+    private boundEventListeners;
     /**
      * The value of the element that this node represents
      * stays in syncs with the live DOM elements?.,m  via event handler
@@ -55,6 +57,7 @@ export default class DOMNodeReference {
     private _attachVisibilityController;
     private _attachRadioButtons;
     private _bindMethods;
+    private _destroy;
     /**
      * Updates the value and checked state based on element type
      * @public
@@ -68,7 +71,7 @@ export default class DOMNodeReference {
      * specified event occurs.
      * @returns - Instance of this [provides option to method chain]
      */
-    on(eventType: string, eventHandler: (e: Event) => void): DOMNodeReference;
+    on(eventType: keyof HTMLElementEventMap, eventHandler: (e: Event) => void): DOMNodeReference;
     /**
      * Hides the element by setting its display style to "none".
      * @returns - Instance of this [provides option to method chain]

package/dist/bundle.js

@@ -234,6 +234,8 @@ var DOMNodeReference = class _DOMNodeReference {
   target;
   isLoaded;
   defaultDisplay;
+  observers;
+  boundEventListeners;
   /**
    * The value of the element that this node represents
    * stays in syncs with the live DOM elements?.,m  via event handler
@@ -250,6 +252,8 @@ var DOMNodeReference = class _DOMNodeReference {
     this.isLoaded = false;
     this.defaultDisplay = "";
     this.value = null;
+    this.observers = [];
+    this.boundEventListeners = [];
     this._bindMethods();
   }
   async [_init]() {
@@ -265,6 +269,19 @@ var DOMNodeReference = class _DOMNodeReference {
       this._initValueSync();
       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);
@@ -298,6 +315,13 @@ var DOMNodeReference = class _DOMNodeReference {
         eventType = "input";
       }
       this.element.addEventListener(eventType, this.updateValue);
+      const _element = this.element;
+      const _updateValue = this.updateValue;
+      this.boundEventListeners.push({
+        element: _element,
+        handler: _updateValue,
+        event: eventType
+      });
       if (this.element instanceof HTMLInputElement && this.element.dataset.type === "date") {
         await this._initDateSync(this.element);
       }
@@ -315,6 +339,12 @@ var DOMNodeReference = class _DOMNodeReference {
     }
     const dateNode = await waitFor("[data-date-format]", parentElement);
     dateNode.addEventListener("select", this.updateValue);
+    const _handler = this.updateValue;
+    this.boundEventListeners.push({
+      element: dateNode,
+      handler: _handler,
+      event: "select"
+    });
   }
   /**
    * Gets the current value of the element based on its type
@@ -398,6 +428,24 @@ var DOMNodeReference = class _DOMNodeReference {
       }
     }
   }
+  _destroy() {
+    if (this.boundEventListeners.length > 0) {
+      this.boundEventListeners.forEach((binding) => {
+        binding.element?.removeEventListener(binding.event, binding.handler);
+      });
+    }
+    if (this.observers.length > 0) {
+      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
@@ -419,17 +467,19 @@ var DOMNodeReference = class _DOMNodeReference {
    * @returns - Instance of this [provides option to method chain]
    */
   on(eventType, eventHandler) {
-    if (typeof eventType !== "string") {
-      throw new Error(
-        `Argument "eventType" must be of type "string". Received: ${typeof eventType}`
-      );
-    }
     if (typeof eventHandler !== "function") {
       throw new Error(
         `Argument "eventHandler" must be a Function. Received: ${typeof eventHandler}`
       );
     }
     this.element.addEventListener(eventType, eventHandler.bind(this));
+    const _element = this.element;
+    const _handler = eventHandler;
+    this.boundEventListeners.push({
+      element: _element,
+      handler: _handler,
+      event: eventType
+    });
     return this;
   }
   /**
@@ -845,6 +895,7 @@ var DOMNodeReference = class _DOMNodeReference {
           attributeFilter: ["style"],
           subtree: false
         });
+        this.observers.push(observer);
       }
       if (trackRadioButtons && (dep.yesRadio || dep.noRadio)) {
         [dep.yesRadio, dep.noRadio].forEach((radio) => {
@@ -896,6 +947,7 @@ var DOMNodeReference = class _DOMNodeReference {
       subtree: true,
       childList: true
     });
+    this.observers.push(observer);
   }
 };
 
@@ -944,10 +996,21 @@ function createProxyHandler() {
   };
 }
 function enhanceArray(array) {
-  const enhanced = array;
-  enhanced.hideAll = () => enhanced.forEach((instance) => instance.hide());
-  enhanced.showAll = () => enhanced.forEach((instance) => instance.show());
-  return enhanced;
+  Object.defineProperties(array, {
+    hideAll: {
+      value: function() {
+        this.forEach((instance) => instance.hide());
+        return this;
+      }
+    },
+    showAll: {
+      value: function() {
+        this.forEach((instance) => instance.show());
+        return this;
+      }
+    }
+  });
+  return array;
 }
 export {
   API_default as API,

package/dist/createDOMNodeReferences.d.ts

@@ -6,4 +6,4 @@ import DOMNodeReference from "./DOMNodeReference.js";
  * @param multiple Should this call return an array of instantiated references, or just a single? Defaults to false, returning a single instance
  * @returns  A promise that resolves to a Proxy of the initialized DOMNodeReference instance.
  */
-export default function createDOMNodeReference(target: HTMLElement | string, multiple?: (() => boolean) | boolean): Promise<DOMNodeReference | DOMNodeReferenceArray>;
+export default function createDOMNodeReference(target: HTMLElement | string, multiple?: (() => boolean) | boolean): Promise<DOMNodeReference | DOMNodeReference[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerpagestoolkit",
-  "version": "2.5.4211",
+  "version": "2.5.4212",
   "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/bundle.js",
   "types": "./dist/index.d.ts",
@@ -58,7 +58,8 @@
   "files": [
     "dist/bundle.js",
     "dist/bundle.css",
-    "dist/**/*.d.ts"
+    "dist/**/*.d.ts",
+    "assets/**"
   ],
   "exports": {
     ".": {