powerpagestoolkit 2.7.101 → 2.7.104

package/README.md

@@ -150,7 +150,7 @@ _Method Signature:_
 
 ```typescript
 applyBusinessRule(
-  rule: IBusinessRule,
+  rule: BusinessRule,
   dependencies: DOMNodeReference[]
 ): DOMNodeReference; /* Instance of this is returned for optional
  method chaining */
@@ -159,7 +159,7 @@ applyBusinessRule(
 **BusinessRule Definition**
 
 ```typescript
-interface IBusinessRule {
+interface BusinessRule {
   setVisibility?: [
     condition: () => boolean,
     clearValuesOnHide?: boolean = true

package/dist/bundle.js

@@ -285,13 +285,12 @@ var ValidationConfigError = class extends Error {
 };
 
 // src/core/DOMNodeReference.ts
-var eventMapping = {
-  checkbox: "click",
-  radio: "click",
-  select: "change",
-  "select-multiple": "change",
-  textarea: "keyup"
-  // Add other input types as needed
+var EventTypes = {
+  CHECKBOX: "click",
+  RADIO: "click",
+  SELECT: "change",
+  TEXTAREA: "keyup",
+  DEFAULT: "input"
 };
 var DOMNodeReference = class _DOMNodeReference {
   // properties initialized in the constructor
@@ -320,18 +319,7 @@ var DOMNodeReference = class _DOMNodeReference {
   /******/
   constructor(target, root = document.body, debounceTime2) {
     this.target = target;
-    if (typeof target === "string") {
-      let lName = null;
-      const bracketMatch = target.match(/\[([^\]]+)\]/);
-      if (bracketMatch) {
-        lName = bracketMatch[1];
-        const quoteMatch = lName.match(/["']([^"']+)["']/);
-        if (quoteMatch) {
-          lName = quoteMatch[1];
-        }
-      }
-      this.logicalName = (lName || target).replace(/[#\[\]]/g, "");
-    }
+    this.logicalName = this.extractLogicalName(target);
     this.root = root;
     this[debounceTime] = debounceTime2;
     this.isLoaded = false;
@@ -339,6 +327,14 @@ var DOMNodeReference = class _DOMNodeReference {
     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) {
@@ -385,31 +381,23 @@ var DOMNodeReference = class _DOMNodeReference {
    * Initializes value synchronization with appropriate event listeners
    * based on element type.
    */
-  async [valueSync]() {
-    try {
-      if (!this[isValidFormElement](this.element)) return;
-      this.updateValue();
-      let eventType;
-      if (this.element instanceof HTMLSelectElement) {
-        eventType = "change";
-      } else if (this.element instanceof HTMLInputElement) {
-        eventType = eventMapping[this.element.type] ?? "input";
-      } else if (this.element instanceof HTMLTextAreaElement) {
-        eventType = eventMapping[this.element.type] ?? "input";
-      } else {
-        eventType = "input";
-      }
-      this[registerEventListener](this.element, eventType, this.updateValue);
-      if (this.element instanceof HTMLInputElement && this.element.dataset.type === "date") {
-        await this[dateSync](this.element);
-      }
-    } catch (error) {
-      throw new DOMNodeInitializationError(
-        this,
-        `Failed to initialize value sync: ${error}`
-      );
+  [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 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;
   }
@@ -623,16 +611,7 @@ var DOMNodeReference = class _DOMNodeReference {
     if (value instanceof Function) {
       value = value();
     }
-    let eventType;
-    if (this.element instanceof HTMLSelectElement) {
-      eventType = "change";
-    } else if (this.element instanceof HTMLInputElement) {
-      eventType = eventMapping[this.element.type] ?? "input";
-    } else if (this.element instanceof HTMLTextAreaElement) {
-      eventType = eventMapping[this.element.type] ?? "input";
-    } else {
-      eventType = "input";
-    }
+    const eventType = this.determineEventType();
     this.element.dispatchEvent(new Event(eventType, { bubbles: false }));
     if (this.element.classList.contains("boolean-radio") && this.yesRadio instanceof _DOMNodeReference && this.noRadio instanceof _DOMNodeReference) {
       this.yesRadio.element.checked = value;
@@ -706,9 +685,9 @@ var DOMNodeReference = class _DOMNodeReference {
         );
         if (childInputs.length > 0) {
           const promises = childInputs.map(async (input) => {
-            const inputRef = await createDOMNodeReference(input, {
-              multiple: false
-            });
+            const inputRef = await createDOMNodeReference(
+              input
+            );
             return inputRef.clearValue();
           });
           await Promise.all(promises);
@@ -860,7 +839,7 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    * 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.
@@ -1222,7 +1201,7 @@ function enhanceArray(array) {
 async function createDOMNodeReference(target, options = {
   multiple: false,
   root: document.body,
-  timeout: 0
+  timeoutMs: 0
 }) {
   try {
     if (typeof options !== "object") {
@@ -1231,7 +1210,7 @@ async function createDOMNodeReference(target, options = {
       );
     }
     validateOptions(options);
-    const { multiple = false, root = document.body, timeout = 0 } = options;
+    const { multiple = false, root = document.body, timeoutMs = 0 } = options;
     const isMultiple = typeof multiple === "function" ? multiple() : multiple;
     if (isMultiple) {
       if (typeof target !== "string") {
@@ -1239,17 +1218,17 @@ async function createDOMNodeReference(target, options = {
           `'target' must be of type 'string' if 'multiple' is set to 'true'. Received type: '${typeof target}'`
         );
       }
-      const elements = await waitFor(target, root, true, timeout);
+      const elements = await waitFor(target, root, true, timeoutMs);
       const initializedElements = await Promise.all(
         elements.map(async (element) => {
-          const instance2 = new DOMNodeReference(element, root, timeout);
+          const instance2 = new DOMNodeReference(element, root, timeoutMs);
           await instance2[init]();
           return new Proxy(instance2, createProxyHandler());
         })
       );
       return enhanceArray(initializedElements);
     }
-    const instance = new DOMNodeReference(target, root, timeout);
+    const instance = new DOMNodeReference(target, root, timeoutMs);
     await instance[init]();
     return new Proxy(instance, createProxyHandler());
   } catch (e) {
@@ -1257,7 +1236,7 @@ async function createDOMNodeReference(target, options = {
   }
 }
 function validateOptions(options) {
-  const { multiple = false, root = document.body, timeout = 0 } = 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}'`
@@ -1276,9 +1255,9 @@ function validateOptions(options) {
       `'root' must be of type 'HTMLElement'. Received type: '${typeof root}'`
     );
   }
-  if (typeof timeout !== "number") {
+  if (typeof timeoutMs !== "number") {
     throw new Error(
-      `'timeout' must be of type 'number'. Received type: '${typeof timeout}'`
+      `'timeout' must be of type 'number'. Received type: '${typeof timeoutMs}'`
     );
   }
   return;

package/dist/core/DOMNodeReference.d.ts

@@ -7,7 +7,7 @@ export default class DOMNodeReference {
     protected isLoaded: boolean;
     protected defaultDisplay: string;
     protected [s.observers]: Array<MutationObserver>;
-    protected [s.boundEventListeners]: Array<IBoundEventListener>;
+    protected [s.boundEventListeners]: Array<BoundEventListener>;
     protected isRadio: boolean;
     protected radioType: RadioType | null;
     /**
@@ -42,12 +42,15 @@ export default class DOMNodeReference {
      * Defaults to 'document.body'
      */
     /******/ /******/ constructor(target: Element | string, root: Element | undefined, debounceTime: number);
+    private extractLogicalName;
     [s.init](): Promise<void>;
     /**
      * Initializes value synchronization with appropriate event listeners
      * based on element type.
      */
-    protected [s.valueSync](): Promise<void>;
+    protected [s.valueSync](): void;
+    private determineEventType;
+    private isDateInput;
     protected [s.isValidFormElement](element: Element): element is FormElement;
     protected [s.registerEventListener](element: Element, eventType: keyof HTMLElementEventMap, handler: (e: Event) => unknown): void;
     protected [s.dateSync](element: HTMLInputElement): Promise<void>;
@@ -186,12 +189,12 @@ export default class DOMNodeReference {
     uncheckRadios(): DOMNodeReference;
     /**
      * 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: IBusinessRule, dependencies: DOMNodeReference[]): DOMNodeReference;
+    applyBusinessRule(rule: BusinessRule, dependencies: DOMNodeReference[]): DOMNodeReference;
     /**
      * Configures conditional rendering for the target element based on a condition
      * and the visibility of one or more trigger elements.

package/dist/core/createDOMNodeReferences.d.ts

@@ -1,21 +1,55 @@
 import DOMNodeReference from "./DOMNodeReference.js";
 import DOMNodeReferenceArray from "./DOMNodeReferenceArray.js";
-export default function createDOMNodeReference<T extends string>(target: Element, options?: ICreationOptions): Promise<DOMNodeReference>;
-export default function createDOMNodeReference(target: string, options?: Omit<ICreationOptions, "multiple"> & {
+export default function createDOMNodeReference(target: string, options?: {
     /**
-     * Should this call return an array of instantiated references, or just a single instance?
+     * Should this call return an array of instantiated references, or just a single?
      * Defaults to false, returning a single instance.
      */
     multiple?: false;
+    /**
+     * Optionally specify the element within which to search for the element targeted by 'target'.
+     * Defaults to 'document.body'.
+     */
+    root?: HTMLElement;
+    /**
+     * Optionally specify the amount of time that should be waited to find the targeted element before throwing an error.
+     * Useful for async DOM loading. Relies on MutationObserver.
+     * WARNING: Implementing multiple references with timeout can result in infinite loading.
+     */
+    timeoutMs?: number;
 }): Promise<DOMNodeReference>;
-export default function createDOMNodeReference<T extends string>(target: string, options?: Omit<ICreationOptions, "multiple"> & {
+export default function createDOMNodeReference(target: Element, options?: {
     /**
-     * Should this call return an array of instantiated references, or just a single instance?
+     * Optionally specify the element within which to search for the element targeted by 'target'.
+     * Defaults to 'document.body'.
+     */
+    root?: HTMLElement;
+    /**
+     * Optionally specify the amount of time that should be waited to find the targeted element before throwing an error.
+     * Useful for async DOM loading. Relies on MutationObserver.
+     * WARNING: Implementing multiple references with timeout can result in infinite loading.
+     */
+    timeoutMs?: number;
+}): Promise<DOMNodeReference>;
+export default function createDOMNodeReference(target: string, options?: {
+    /**
+     * Should this call return an array of instantiated references, or just a single?
      * Defaults to false, returning a single instance.
      */
     multiple?: true;
+    /**
+     * Optionally specify the element within which to search for the element targeted by 'target'.
+     * Defaults to 'document.body'.
+     */
+    root?: HTMLElement;
+    /**
+     * Optionally specify the amount of time that should be waited to find the targeted element before throwing an error.
+     * Useful for async DOM loading. Relies on MutationObserver.
+     * WARNING: Implementing multiple references with timeout can result in infinite loading.
+     */
+    timeoutMs?: number;
 }): Promise<DOMNodeReferenceArray>;
-export declare function validateOptions(options: any): void;
+export declare function validateOptions(options: Partial<CreationOptions>): void;
 export declare function createProxyHandler(): {
     get: (target: DOMNodeReference, prop: string | symbol) => any;
 };

package/dist/index.js

@@ -0,0 +1,8 @@
+/// <reference path="../@types/index.d.ts" />
+import "./style.css";
+import API from "./core/API.js";
+import createRef from "./core/createDOMNodeReferences.js";
+import waitFor from "./utils/waitFor.js";
+import bindForm from "./core/bindForm.js";
+export { API, createRef, waitFor, bindForm };
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerpagestoolkit",
-  "version": "2.7.101",
+  "version": "2.7.104",
   "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.js",
   "types": "./dist/index.d.ts",
@@ -59,6 +59,7 @@
   ],
   "files": [
     "dist/bundle.js",
+    "dist/index.js",
     "dist/bundle.css",
     "dist/**/*.d.ts",
     "assets/**"
@@ -66,7 +67,7 @@
   "exports": {
     ".": {
       "import": "./dist/bundle.js",
-      "types": "./dist/index.d.ts"
+      "types": "./@types/index.d.ts"
     },
     "./createDOMNodeReference": {
       "import": "./dist/createDOMNodeReference.js",