powerpagestoolkit 2.6.3212 → 2.6.3310

package/README.md

@@ -37,7 +37,7 @@ createRef(
     root: HTMLElement,
     timeout: number
   }
-): Promise<DOMNodeReference | DOMNodeReferenceArray>;
+): Promise<DOMNodeReference | DOMNodeReference[]>;
 ```
 
 createRef takes two main arguments:
@@ -158,7 +158,7 @@ _Method signature:_
 ```typescript
 configureConditionalRendering(
     condition: () => boolean,
-    dependencies?: Array<DOMNodeReference>,
+    dependencies?: DOMNodeReference[],
     clearValuesOnHide: boolean = true
   ): DOMNodeReference /* Instance of this returned
   for optional method chaining */
@@ -216,9 +216,9 @@ node.configureValidationAndRequirements(
 
 ##### Element Manipulation
 
-```typescript
-/****/ Value management /****/
+_Value management_
 
+```typescript
 // set a static value
 node.setValue("new value");
 
@@ -233,25 +233,31 @@ node.setValue(() => {
 node.updateValue();
 
 // Clear the value for both the instance and the target element
-node.clearValue()
+node.clearValue();
+```
 
-/****/ Content manipulation /****/
+_Content manipulation_
 
+```typescript
 node.setInnerHTML("<span>New content</span>");
 node.append(childElement);
 node.prepend(headerElement);
 node.after(siblingElement);
 node.before(labelElement);
+```
 
-/****/ Styling /****/
+_Styling_
 
+```typescript
 node.setStyle({
   display: "block",
   color: "red",
 });
+```
 
-/****/ State management /****/
+_Enabling/Disabling inputs_
 
+```typescript
 node.disable();
 node.enable();
 

package/dist/DOMNodeReference.d.ts

@@ -7,16 +7,17 @@ declare const _updateRadioGroup: unique symbol;
 declare const _attachVisibilityController: unique symbol;
 declare const _attachRadioButtons: unique symbol;
 declare const _bindMethods: unique symbol;
-declare const observers: unique symbol;
-declare const boundEventListeners: unique symbol;
+declare const _debounceTime: unique symbol;
+declare const _observers: unique symbol;
+declare const _boundEventListeners: unique symbol;
 export default class DOMNodeReference {
-    target: HTMLElement | string;
+    target: HTMLElement | QuerySelector;
     root: HTMLElement;
-    private debounceTime;
+    private [_debounceTime];
     private isLoaded;
     private defaultDisplay;
-    private [observers];
-    private [boundEventListeners];
+    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
@@ -48,7 +49,7 @@ export default class DOMNodeReference {
      * @param root - Optionally specify the element within to search for the element targeted by 'target'
      * Defaults to 'document.body'
      */
-    /******/ /******/ constructor(target: HTMLElement | string, root?: HTMLElement, debounceTime?: number);
+    /******/ /******/ constructor(target: HTMLElement | string, root: HTMLElement | undefined, debounceTime: number);
     [_init](): Promise<void>;
     /**
      * Initializes value synchronization with appropriate event listeners

package/dist/bundle.js

@@ -130,7 +130,7 @@ function waitFor(target, root = document, multiple = false, debounceTime) {
           } else {
             reject(
               new Error(
-                `No elements found with target: "${target}" within ${debounceTime / 1e3} seconds. If the element you are expected has not loading, consider raising your timeout.`
+                `No elements found with target: "${target}" within ${debounceTime / 1e3} seconds. If the element you are expected has not loaded yet, consider raising your timeout.`
               )
             );
           }
@@ -154,7 +154,7 @@ function waitFor(target, root = document, multiple = false, debounceTime) {
         observer.disconnect();
         reject(
           new Error(
-            `Element not found by target: "${target}" within ${debounceTime / 1e3} second. If the element you are expected has not loading, consider raising your timeout.`
+            `Element not found by target: "${target}" within ${debounceTime / 1e3} second. If the element you are expected has not loaded yet, consider raising your timeout.`
           )
         );
       }, debounceTime);
@@ -279,17 +279,18 @@ var _updateRadioGroup = Symbol("_URG");
 var _attachVisibilityController = Symbol("_AVC");
 var _attachRadioButtons = Symbol("_ARB");
 var _bindMethods = Symbol("_B");
-var observers = Symbol("O");
-var boundEventListeners = Symbol("BEV");
+var _debounceTime = Symbol("DT");
+var _observers = Symbol("O");
+var _boundEventListeners = Symbol("BEV");
 var DOMNodeReference = class _DOMNodeReference {
   // properties initialized in the constructor
   target;
   root;
-  debounceTime;
+  [_debounceTime];
   isLoaded;
   defaultDisplay;
-  [observers] = [];
-  [boundEventListeners] = [];
+  [_observers] = [];
+  [_boundEventListeners] = [];
   /**
    * The value of the element that this node represents
    * stays in syncs with the live DOM elements?.,m  via event handler
@@ -303,10 +304,10 @@ var DOMNodeReference = class _DOMNodeReference {
    */
   /******/
   /******/
-  constructor(target, root = document.body, debounceTime = 5e3) {
+  constructor(target, root = document.body, debounceTime) {
     this.target = target;
     this.root = root;
-    this.debounceTime = debounceTime;
+    this[_debounceTime] = debounceTime;
     this.isLoaded = false;
     this.defaultDisplay = "";
     this.value = null;
@@ -317,7 +318,7 @@ var DOMNodeReference = class _DOMNodeReference {
       if (this.target instanceof HTMLElement) {
         this.element = this.target;
       } else {
-        this.element = await waitFor(this.target, this.root, false, this.debounceTime);
+        this.element = await waitFor(this.target, this.root, false, this[_debounceTime]);
       }
       if (!this.element) {
         throw new DOMNodeNotFoundError(this);
@@ -376,7 +377,7 @@ var DOMNodeReference = class _DOMNodeReference {
       this.element.addEventListener(eventType, this.updateValue);
       const _element = this.element;
       const _updateValue = this.updateValue;
-      this[boundEventListeners].push({
+      this[_boundEventListeners].push({
         element: _element,
         handler: _updateValue,
         event: eventType
@@ -399,7 +400,7 @@ var DOMNodeReference = class _DOMNodeReference {
     const dateNode = await waitFor("[data-date-format]", parentElement, false, 1500);
     dateNode.addEventListener("select", this.updateValue);
     const _handler = this.updateValue;
-    this[boundEventListeners].push({
+    this[_boundEventListeners].push({
       element: dateNode,
       handler: _handler,
       event: "select"
@@ -488,10 +489,10 @@ var DOMNodeReference = class _DOMNodeReference {
     }
   }
   [_destroy]() {
-    this[boundEventListeners]?.forEach((binding) => {
+    this[_boundEventListeners]?.forEach((binding) => {
       binding.element?.removeEventListener(binding.event, binding.handler);
     });
-    this[observers]?.forEach((observer) => {
+    this[_observers]?.forEach((observer) => {
       observer.disconnect();
     });
     this.yesRadio?.[_destroy]();
@@ -530,7 +531,7 @@ var DOMNodeReference = class _DOMNodeReference {
     this.element.addEventListener(eventType, eventHandler.bind(this));
     const _element = this.element;
     const _handler = eventHandler;
-    this[boundEventListeners].push({
+    this[_boundEventListeners].push({
       element: _element,
       handler: _handler,
       event: eventType
@@ -933,14 +934,14 @@ var DOMNodeReference = class _DOMNodeReference {
         }
       };
       dep.on("change", handleChange);
-      this[boundEventListeners].push({
+      this[_boundEventListeners].push({
         element: dep.element,
         event: "change",
         handler: handleChange
       });
       if (trackInputEvents) {
         dep.on("input", handleChange);
-        this[boundEventListeners].push({
+        this[_boundEventListeners].push({
           element: dep.element,
           event: "input",
           handler: handleChange
@@ -960,12 +961,12 @@ var DOMNodeReference = class _DOMNodeReference {
           attributeFilter: ["style"],
           subtree: false
         });
-        this[observers].push(observer);
+        this[_observers].push(observer);
       }
       if (trackRadioButtons && dep.yesRadio && dep.noRadio) {
         [dep.yesRadio, dep.noRadio].forEach((radio) => {
           radio.on("change", handleChange);
-          this[boundEventListeners].push({
+          this[_boundEventListeners].push({
             element: radio.element,
             event: "change",
             handler: handleChange
@@ -1017,7 +1018,7 @@ var DOMNodeReference = class _DOMNodeReference {
       subtree: true,
       childList: true
     });
-    this[observers].push(observer);
+    this[_observers].push(observer);
   }
 };
 
@@ -1025,7 +1026,7 @@ var DOMNodeReference = class _DOMNodeReference {
 async function createDOMNodeReference(target, options = {
   multiple: false,
   root: document.body,
-  timeout: 0
+  timeout: 500
 }) {
   const { multiple = false, root = document.body, timeout = 0 } = options;
   try {
@@ -1039,7 +1040,7 @@ async function createDOMNodeReference(target, options = {
       const elements = await waitFor(target, root, true, timeout);
       const initializedElements = await Promise.all(
         elements.map(async (element) => {
-          const instance2 = new DOMNodeReference(element);
+          const instance2 = new DOMNodeReference(element, root, timeout);
           await instance2[_init]();
           return new Proxy(instance2, createProxyHandler());
         })

package/dist/createDOMNodeReferences.d.ts

@@ -1,10 +1,10 @@
 import DOMNodeReference from "./DOMNodeReference.js";
-export default function createDOMNodeReference(target: HTMLElement | string, options?: {
+export default function createDOMNodeReference(target: HTMLElement | QuerySelector, options?: {
     multiple?: (() => boolean) | false;
     root?: HTMLElement;
     timeout?: number;
 }): Promise<DOMNodeReference>;
-export default function createDOMNodeReference(target: HTMLElement | string, options?: {
+export default function createDOMNodeReference(target: HTMLElement | QuerySelector, options?: {
     multiple?: (() => true) | true;
     root?: HTMLElement;
     timeout?: number;

package/package.json

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