powerpagestoolkit 2.5.404 → 2.5.409

package/README.md

@@ -28,18 +28,15 @@ A powerful class for managing DOM elements with automatic value synchronization
 #### Basic Usage
 
 ```typescript
-import {
-  createDOMNodeReference,
-  createMultipleDOMNodeReferences,
-} from "powerpagestoolkit";
+import { createRef } from "powerpagestoolkit";
 
 // Both methods support standard querySelector syntax:
 
 // Create a single reference
-const node = await createDOMNodeReference("#myElement");
+const node = await createRef("#myElement");
 
 // Create multiple references
-const nodes = await createMultipleDOMNodeReferences(".my-class");
+const nodes = await createRef(".my-class", true);
 ```
 
 #### Properties
@@ -204,7 +201,7 @@ await API.updateRecord("contacts", "record-guid", {
 1. Always await DOMNodeReference creation:
 
 ```typescript
-const node = await createDOMNodeReference("#element");
+const node = await createRef("#element");
 ```
 
 2. Include all referenced nodes in dependency arrays:

package/dist/DOMNodeReference.d.ts

@@ -15,7 +15,7 @@ export default class DOMNodeReference {
      * or access properties not available through this class.
      * @property {HTMLElement | null}
      */
-    element: HTMLElement;
+    element: Element;
     private visibilityController;
     checked: boolean;
     /**
@@ -44,6 +44,7 @@ export default class DOMNodeReference {
      * @private
      */
     private _initValueSync;
+    private _initDateSync;
     /**
      * Updates the value and checked state based on element type
      * @public
@@ -54,12 +55,12 @@ export default class DOMNodeReference {
      * @private
      * @returns {ElementValue} Object containing value and optional checked state
      */
-    private getElementValue;
+    private _getElementValue;
     /**
      * Updates related radio buttons if this is part of a radio group
      * @private
      */
-    private updateRadioGroup;
+    private _updateRadioGroup;
     private _attachVisibilityController;
     private _attachRadioButtons;
     /**
@@ -192,7 +193,7 @@ export default class DOMNodeReference {
      * @throws {ConditionalRenderingError} When there's an error in setting up conditional rendering
      * @returns {DOMNodeReference} - Instance of this [provides option to method chain]
      */
-    configureConditionalRendering(condition: () => boolean, dependencies?: Array<DOMNodeReference>): DOMNodeReference;
+    configureConditionalRendering(condition: () => boolean, dependencies?: Array<DOMNodeReference>, clearValuesOnHide?: boolean): DOMNodeReference;
     /**
      * Sets up validation and requirement rules for the field with enhanced error handling and dynamic updates.
      *

package/dist/List.d.ts

@@ -0,0 +1,28 @@
+/**
+ * so far this whole thing is a moot point
+ * Microsoft provides no way to get important specific information
+ * about the records represented by each 'row' in a list
+ * rendering this effort particularly useless
+ *
+ * Saving for in case things change in the future and this
+ * could be re-factored/extended to provide some usable value
+ */
+export declare const _init: symbol;
+/**
+ * Provides information about how to target elements in
+ * the construction of the list
+ */
+interface ListOptions {
+    containerSelector: string;
+    rowSelector: string;
+    cellSelector: string;
+}
+interface ListItem extends Array<Element> {
+}
+export default class List {
+    items: ListItem[];
+    private options;
+    private container;
+    constructor(options?: Partial<ListOptions>);
+}
+export {};

package/dist/bundle.js

@@ -103,10 +103,10 @@ var API = {
 var API_default = API;
 
 // src/waitFor.ts
-function waitFor(target) {
+function waitFor(target, root = document) {
   return new Promise((resolve, reject) => {
     const observer = new MutationObserver(() => {
-      const observedElement = document.querySelector(target);
+      const observedElement = root.querySelector(target);
       if (observedElement) {
         clearTimeout(timeout);
         observer.disconnect();
@@ -121,7 +121,7 @@ function waitFor(target) {
       clearTimeout(timeout);
       return resolve(target);
     }
-    const element = document.querySelector(target);
+    const element = root.querySelector(target);
     if (element) {
       clearTimeout(timeout);
       return resolve(element);
@@ -251,6 +251,7 @@ var DOMNodeReference = class _DOMNodeReference {
     this.isLoaded = false;
     this.defaultDisplay = "";
     this.value = null;
+    this.updateValue = this.updateValue.bind(this);
   }
   async [_init]() {
     try {
@@ -275,38 +276,64 @@ var DOMNodeReference = class _DOMNodeReference {
    * based on element type.
    * @private
    */
-  _initValueSync() {
-    this.updateValue();
-    const input = this.element;
-    const eventMapping = {
-      checkbox: "click",
-      radio: "click",
-      "select-one": "change",
-      select: "change",
-      "select-multiple": "change"
-    };
-    const boundUpdateValue = this.updateValue.bind(this);
-    const eventType = eventMapping[input.type] || "input";
-    this.element.addEventListener(eventType, boundUpdateValue);
+  async _initValueSync() {
+    try {
+      this.updateValue();
+      if (!(this.element instanceof HTMLElement)) {
+        throw new Error("Element is not a valid HTML element");
+      }
+      const eventMapping = {
+        checkbox: "click",
+        radio: "click",
+        select: "change",
+        "select-multiple": "change"
+        // Add other input types as needed
+      };
+      let eventType;
+      if (this.element instanceof HTMLSelectElement) {
+        eventType = "change";
+      } else if (this.element instanceof HTMLInputElement) {
+        eventType = eventMapping[this.element.type] || "input";
+      } else {
+        eventType = "input";
+      }
+      this.element.addEventListener(eventType, this.updateValue);
+      if (this.element instanceof HTMLInputElement && this.element.dataset.type === "date") {
+        await this._initDateSync(this.element);
+      }
+    } catch (error) {
+      throw new DOMNodeInitializationError(
+        this,
+        `Failed to initialize value sync: ${error}`
+      );
+    }
+  }
+  async _initDateSync(element) {
+    const parentElement = element.parentElement;
+    if (!parentElement) {
+      throw new Error("Date input must have a parent element");
+    }
+    const dateNode = await waitFor("[data-date-format]", parentElement);
+    dateNode.addEventListener("select", this.updateValue);
   }
   /**
    * Updates the value and checked state based on element type
    * @public
    */
   updateValue() {
-    const elementValue = this.getElementValue();
+    const elementValue = this._getElementValue();
     this.value = elementValue.value;
     if (elementValue.checked !== void 0) {
       this.checked = elementValue.checked;
     }
-    this.updateRadioGroup();
+    this._updateRadioGroup();
   }
   /**
    * Gets the current value of the element based on its type
    * @private
    * @returns {ElementValue} Object containing value and optional checked state
    */
-  getElementValue() {
+  _getElementValue() {
     const input = this.element;
     const select = this.element;
     switch (input.type) {
@@ -332,7 +359,7 @@ var DOMNodeReference = class _DOMNodeReference {
         };
       default:
         return {
-          value: this.element.classList.contains("decimal") ? parseFloat(input.value) : input.value
+          value: this.element.classList.contains("decimal") || this.element.classList.contains("money") ? parseFloat(input.value) : input.value
         };
     }
   }
@@ -340,7 +367,7 @@ var DOMNodeReference = class _DOMNodeReference {
    * Updates related radio buttons if this is part of a radio group
    * @private
    */
-  updateRadioGroup() {
+  _updateRadioGroup() {
     if (this.yesRadio instanceof _DOMNodeReference && this.noRadio instanceof _DOMNodeReference) {
       this.yesRadio.updateValue();
       this.noRadio?.updateValue();
@@ -507,7 +534,7 @@ var DOMNodeReference = class _DOMNodeReference {
         );
         if (childInputs.length > 0) {
           const clearPromises = childInputs.map(async (input) => {
-            const inputRef = await createDOMNodeReference(input);
+            const inputRef = await createDOMNodeReference(input, false);
             return inputRef.clearValues();
           });
           await Promise.all(clearPromises);
@@ -669,7 +696,7 @@ var DOMNodeReference = class _DOMNodeReference {
    * @throws {ConditionalRenderingError} When there's an error in setting up conditional rendering
    * @returns {DOMNodeReference} - Instance of this [provides option to method chain]
    */
-  configureConditionalRendering(condition, dependencies) {
+  configureConditionalRendering(condition, dependencies, clearValuesOnHide = true) {
     try {
       if (typeof condition !== "function") {
         throw new TypeError("Condition must be a function");
@@ -692,7 +719,7 @@ var DOMNodeReference = class _DOMNodeReference {
         const handleChange = () => {
           try {
             this.toggleVisibility(condition());
-            if (condition() === false) {
+            if (condition() === false && clearValuesOnHide) {
               this.clearValues();
             }
           } catch (error) {
@@ -854,50 +881,59 @@ var DOMNodeReference = class _DOMNodeReference {
 };
 
 // src/createDOMNodeReferences.ts
-async function createDOMNodeReference(target) {
+async function createDOMNodeReference(target, multiple = false) {
   try {
+    const isMultiple = typeof multiple === "function" ? multiple() : multiple;
+    if (isMultiple) {
+      if (typeof target !== "string") {
+        throw new Error(
+          `'target' must be of type 'string' if 'multiple' is set to 'true'. Received type: '${typeof target}'`
+        );
+      }
+      const elements = Array.from(
+        document.querySelectorAll(target)
+      );
+      const initializedElements = await Promise.all(
+        elements.map(async (element) => {
+          const instance2 = new DOMNodeReference(element);
+          await instance2[_init]();
+          return new Proxy(instance2, createProxyHandler());
+        })
+      );
+      return enhanceArray(initializedElements);
+    }
     const instance = new DOMNodeReference(target);
     await instance[_init]();
-    return new Proxy(instance, {
-      get: (target2, prop) => {
-        if (prop.toString().startsWith("_")) return void 0;
-        const value = target2[prop];
-        if (typeof value === "function" && prop !== "onceLoaded") {
-          return (...args) => {
-            target2.onceLoaded(() => value.apply(target2, args));
-            return target2;
-          };
-        }
-        return value;
-      }
-    });
+    return new Proxy(instance, createProxyHandler());
   } catch (e) {
     throw new Error(e);
   }
 }
-async function createMultipleDOMNodeReferences(querySelector) {
-  try {
-    const elements = Array.from(
-      document.querySelectorAll(querySelector)
-    );
-    const initializedElements = await Promise.all(
-      elements.map((element) => createDOMNodeReference(element))
-    );
-    const domNodeArray = initializedElements;
-    domNodeArray.hideAll = () => domNodeArray.forEach((instance) => instance.hide());
-    domNodeArray.showAll = () => domNodeArray.forEach((instance) => instance.show());
-    return domNodeArray;
-  } catch (e) {
-    console.error(
-      `There was an error creating multiple DOMNodeReferences: ${e}`
-    );
-    throw new Error(e);
-  }
+function createProxyHandler() {
+  return {
+    get: (target, prop) => {
+      if (prop.toString().startsWith("_")) return void 0;
+      const value = target[prop];
+      if (typeof value === "function" && prop !== "onceLoaded") {
+        return (...args) => {
+          target.onceLoaded(() => value.apply(target, args));
+          return target;
+        };
+      }
+      return value;
+    }
+  };
+}
+function enhanceArray(array) {
+  const enhanced = array;
+  enhanced.hideAll = () => enhanced.forEach((instance) => instance.hide());
+  enhanced.showAll = () => enhanced.forEach((instance) => instance.show());
+  return enhanced;
 }
 export {
   API_default as API,
-  createDOMNodeReference,
-  createMultipleDOMNodeReferences
+  createDOMNodeReference as createRef,
+  waitFor
 };
 
 

package/dist/createDOMNodeReferences.d.ts

@@ -2,14 +2,8 @@ import DOMNodeReference from "./DOMNodeReference.js";
 /**
  * Creates and initializes a DOMNodeReference instance.
  * @async
- * @param {string | HTMLElement} target - The CSS selector for the desired DOM element, or, optionally, the element itself for which to create a DOMNodeReference.
- * @returns {Promise<DOMNodeReference>} A promise that resolves to a Proxy of the initialized DOMNodeReference instance.
+ * @param  target - The CSS selector for the desired DOM element, or, optionally, the element itself for which to create a DOMNodeReference.
+ * @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 declare function createDOMNodeReference(target: HTMLElement | string): Promise<DOMNodeReference>;
-/**
- * Creates and initializes multiple DOMNodeReference instances.
- * @async
- * @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.
- */
-export declare function createMultipleDOMNodeReferences(querySelector: string): Promise<DOMNodeReference[]>;
+export default function createDOMNodeReference(target: HTMLElement | string, multiple?: (() => boolean) | boolean): Promise<DOMNodeReference | DOMNodeReferenceArray>;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import './style.css';
+import "./style.css";
 import API from "./API.js";
-import { createDOMNodeReference, createMultipleDOMNodeReferences } from "./createDOMNodeReferences.js";
-export { API, createDOMNodeReference, createMultipleDOMNodeReferences };
+import createRef from "./createDOMNodeReferences.js";
+import waitFor from "./waitFor.js";
+export { API, createRef, waitFor };

package/dist/waitFor.d.ts

@@ -1 +1,7 @@
-export default function waitFor(target: HTMLElement | string): Promise<HTMLElement>;
+/**
+ *
+ * @param target basic querySelector syntax to select an element
+ * @param root optional parameter to replace document as the root from which to perform the node search
+ * @returns
+ */
+export default function waitFor(target: HTMLElement | string, root?: Element | Document): Promise<Element>;

package/package.json

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