powerpagestoolkit 3.0.3 → 3.0.52

package/README.md

@@ -21,26 +21,26 @@ npm install powerpagestoolkit
 
 # Core Modules
 
-### DOMNodeReference
+### PowerPagesElement
 
 A powerful class for managing DOM elements with automatic value synchronization and event handling.
 
 #### Basic Usage
 
-DOMNodeReferences are instantiated with the help of the following factory function: `createRef`
+PowerPagesElements are instantiated with the help of the following factory function: `get`
 
 ```typescript
-createRef(
+get(
   target: HTMLElement | string,
   options: {
     multiple: (() => boolean) | boolean = false,
     root: HTMLElement,
     timeoutMs:number
   }
-): Promise<DOMNodeReference | DOMNodeReference[]>;
+): Promise<PowerPagesElement | PowerPagesElement[]>;
 ```
 
-createRef takes two main arguments:
+get takes two main arguments:
 
 <table style="width: 100%; border-collapse: collapse;">
   <thead>
@@ -76,20 +76,20 @@ createRef takes two main arguments:
   </tbody>
 </table>
 
-Import the utility function for creating DOMNodeReference(s)
+Import the utility function for creating PowerPagesElement(s)
 
 ```typescript
-import { createRef } from "powerpagestoolkit";
+import { get } from "powerpagestoolkit";
 ```
 
-Instantiate one, or multiple instances of a DOMNodeReference, and optionally configure advanced options
+Instantiate one, or multiple instances of a PowerPagesElement, and optionally configure advanced options
 
 ```javascript
 // Create a single reference (i.e. 'querySelector')
-const node = await createRef("#myElement");
+const node = await get("#myElement");
 
 // Create multiple references (i.e. 'querySelectorAll')
-const nodes = await createRef(".my-class", { multiple: true });
+const nodes = await get(".my-class", { multiple: true });
 
 /******************/
 // ADVANCED OPTIONS
@@ -98,31 +98,31 @@ const nodes = await createRef(".my-class", { multiple: true });
 
 // If the node you are targeting is not available at the initial execution
 // of the script, set a timeout for 2 seconds
-const node2 = await createRef("#target", { timeoutMs:2000 });
+const node2 = await get("#target", { timeoutMs: 2000 });
 
 // need to target a node within a specific node? use that node as the root
 const otherElement = document.getElementById("id");
-const node3 = await createRef("#target", { root: otherElement });
+const node3 = await get("#target", { root: otherElement });
 
 // implement all options:
-const nodes2 = await createRef("#target", {
+const nodes2 = await get("#target", {
   multiple: true,
-  timeoutMs:4000,
+  timeoutMs: 4000,
   root: otherElement,
 });
 ```
 
 #### Properties
 
-| Property | Type                     | Description                                   |
-| -------- | ------------------------ | --------------------------------------------- |
-| element  | HTMLElement              | The referenced DOM element                    |
-| value    | any                      | Current synchronized value of the element     |
-| isLoaded | boolean                  | Element load status                           |
-| target   | HTMLElement \| string    | Original target selector or element           |
-| yesRadio | DOMNodeReference \| null | Reference to 'yes' radio (for boolean fields) |
-| noRadio  | DOMNodeReference \| null | Reference to 'no' radio (for boolean fields)  |
-| checked  | boolean                  | Checkbox/radio checked state                  |
+| Property | Type                  | Description                                  |
+| -------- | --------------------- | -------------------------------------------- |
+| element  | HTMLElement           | The referenced DOM element                   |
+| value    | any                   | Current synchronized value of the element    |
+| isLoaded | boolean               | Element load status                          |
+| target   | HTMLElement \| string | Original target selector or element          |
+| yesRadio | Radio \| null         | Reference to 'yes' radio (for yes/no fields) |
+| noRadio  | Radio \| null         | Reference to 'no' radio (for yes/no fields)  |
+| checked  | boolean               | Checkbox/radio checked state                 |
 
 #### Key Methods
 
@@ -151,8 +151,8 @@ _Method Signature:_
 ```typescript
 applyBusinessRule(
   rule: BusinessRule,
-  dependencies: DOMNodeReference[]
-): DOMNodeReference; /* Instance of this is returned for optional
+  dependencies: PowerPagesElement[]
+): PowerPagesElement; /* Instance of this is returned for optional
  method chaining */
 ```
 
@@ -161,14 +161,14 @@ applyBusinessRule(
 ```typescript
 interface BusinessRule {
   setVisibility?: () => boolean;
-  setRequirements?: () => ({
-    isRequired: () => boolean,
-    isValid: () => boolean
-  });
-  setValue?: () => ({
-    condition: () => boolean,
-    value: () => any | any
-  });
+  setRequirements?: () => {
+    isRequired: () => boolean;
+    isValid: () => boolean;
+  };
+  setValue?: () => {
+    condition: () => boolean;
+    value: () => any | any;
+  };
   setDisabled?: () => boolean;
 }
 ```
@@ -180,10 +180,9 @@ interface BusinessRule {
 // 'businessTypeField' is set to 'Corporation' or 'LLC'
 taxIdField.applyBusinessRule(
   {
-    setVisibility: 
-      () =>
-        businessTypeField.value === "Corporation" ||
-        businessTypeField.value === "LLC"
+    setVisibility: () =>
+      businessTypeField.value === "Corporation" ||
+      businessTypeField.value === "LLC",
   },
   [businessTypeField] // Re-evaluate when businessTypeField changes
 );
@@ -205,7 +204,7 @@ taxIdField.applyBusinessRule(
       isValid: function () {
         return this.value != null && this.value !== "";
       },
-    })
+    }),
   },
   [businessTypeField] // Revalidate when businessTypeField changes
 );
@@ -219,8 +218,8 @@ industryField.applyBusinessRule(
   {
     setValue: () => ({
       condition: () => businessTypeField.value === "Corporation",
-      value: "Corporate"
-    })
+      value: "Corporate",
+    }),
   },
   [businessTypeField] // Apply value when businessTypeField changes
 );
@@ -308,9 +307,9 @@ node.addTooltip(
 _Example:_
 
 ```typescript
-import { createRef } from "powerpagestoolkit";
+import { get } from "powerpagestoolkit";
 
-const title = await createRef("#myTitle");
+const title = await get("#myTitle");
 
 title.addTooltip("This is an Example of a tooltip!", { color: "red" });
 ```
@@ -370,7 +369,7 @@ bindForm("form-guid").then((form) => {
  * @param formGuid Unique identifier for the form
  * @returns Promise resolving to form element references
  */
-function bindForm(formGuid: string): Promise<DOMNodeReferenceArray & Record<string: DOMNodeReference>>;
+function bindForm(formGuid: string): Promise<PowerPagesElementArray & Record<string: PowerPagesElement>>;
 ```
 
 ##### Benefits
@@ -447,10 +446,10 @@ await API.updateRecord("contacts", "record-guid", {
 
 ## Best Practices
 
-1. Always await DOMNodeReference creation:
+1. Always await PowerPagesElement creation:
 
 ```typescript
-const node = await createRef("#element");
+const node = await get("#element");
 ```
 
 2. Include all referenced nodes in dependency arrays:

package/dist/src/{core → ancillary}/DOMNodeReference.d.ts

@@ -1,5 +1,8 @@
 /// <reference path="../globals.d.ts" />
-export default class DOMNodeReference {
+import type EventManager from "../ancillary/EventManager.d.ts";
+import type ValueManager from "../ancillary/ValueManager.d.ts";
+import type VisibilityManager from "./VisibilityManager.d.ts";
+export default abstract class DOMNodeReference {
     static instances: DOMNodeReference[];
     [key: symbol]: (...arg: any[]) => any;
     target: Element | string;
@@ -7,38 +10,23 @@ export default class DOMNodeReference {
     root: Element;
     protected timeoutMs: number;
     protected isLoaded: boolean;
-    protected defaultDisplay: string;
-    protected observers: Array<MutationObserver | ResizeObserver>;
-    protected boundListeners: Array<BoundEventListener>;
-    protected dependents: Dependents;
-    protected isRadio: boolean;
-    protected radioType: RadioType | null;
     /**
      * The value of the element that this node represents
      * stays in syncs with the live DOM elements?.,m  via event handler
      */
-    value: any;
+    get value(): any;
+    set value(newValue: any);
+    get checked(): boolean;
+    set defaultDisplay(newValue: string | null);
     /**
      * The element targeted when instantiating DOMNodeReference.
      * Made available in order to perform normal DOM traversal,
      * or access properties not available through this class.
      */
     element: HTMLElement;
-    protected visibilityController: HTMLElement;
-    checked: boolean;
-    radioParent: DOMNodeReference | null;
-    /**
-     * Represents the 'yes' option of a boolean radio field.
-     * This property is only available when the parent node
-     * is a main field for a boolean radio input.
-     */
-    yesRadio: DOMNodeReference | null;
-    /**
-     * Represents the 'no' option of a boolean radio field.
-     * This property is only available when the parent node
-     * is a main field for a boolean radio input.
-     */
-    noRadio: DOMNodeReference | null;
+    visibilityManager: VisibilityManager | null;
+    valueManager: ValueManager | null;
+    eventManager: EventManager | null;
     /**
      * Creates an instance of DOMNodeReference.
      * @param target - The CSS selector to find the desired DOM element.
@@ -46,25 +34,15 @@ export default class DOMNodeReference {
      * Defaults to 'document.body'
      */
     /******/ /******/ constructor(target: Element | string, root: Element | undefined, timeoutMs: number);
+    protected abstract initValueManager(): void;
+    protected abstract initVisibilityManager(): void;
+    protected abstract initEventManager(): void;
     protected _extractLogicalName(target: Element | string): string;
-    /**
-     * Initializes value synchronization with appropriate event listeners
-     * based on element type.
-     */
     protected _valueSync(): void;
-    protected _determineEventType(): keyof HTMLElementEventMap;
+    protected _determineEventType(): keyof GlobalEventHandlersEventMap;
     protected _isDateInput(): boolean;
     protected _isValidFormElement(element: Element): element is FormElement;
-    protected _registerEventListener(element: Element, eventType: keyof HTMLElementEventMap, handler: (e: Event) => unknown): void;
     protected _dateSync(element: HTMLInputElement): Promise<void>;
-    /**
-     * Gets the current value of the element based on its type
-     * @protected
-     * @returns Object containing value and optional checked state
-     */
-    protected _getElementValue(): Promise<ElementValue>;
-    protected _attachVisibilityController(): void;
-    protected _attachRadioButtons(): Promise<void>;
     protected _bindMethods(): void;
     /**
      * Updates the value and checked state based on element type
@@ -72,7 +50,6 @@ export default class DOMNodeReference {
      */
     updateValue(e?: Event): Promise<void>;
     protected triggerDependentsHandlers(): void;
-    protected _validateValue(value: any): any;
     /**
      * Sets up an event listener based on the specified event type, executing the specified
      * event handler
@@ -81,7 +58,7 @@ export default class DOMNodeReference {
      * specified event occurs.
      * @returns - Instance of this [provides option to method chain]
      */
-    on(eventType: keyof HTMLElementEventMap, eventHandler: (this: DOMNodeReference, e: Event) => void): DOMNodeReference;
+    on<K extends keyof GlobalEventHandlersEventMap>(eventType: K, eventHandler: (this: DOMNodeReference, e: GlobalEventHandlersEventMap[K]) => void): DOMNodeReference;
     /**
      * Hides the element by setting its display style to "none".
      * @returns - Instance of this [provides option to method chain]
@@ -97,7 +74,7 @@ export default class DOMNodeReference {
      * or a natural boolean to determine the visibility of this
      * @returns - Instance of this [provides option to method chain]
      */
-    toggleVisibility(shouldShow: ((this: DOMNodeReference) => boolean) | boolean): DOMNodeReference;
+    toggleVisibility(shouldShow: EvaluationFunction | boolean): DOMNodeReference;
     /**
      * Sets the value of the HTML element.
      * @param value - The value to set for the HTML element.
@@ -115,13 +92,10 @@ export default class DOMNodeReference {
      * Clears all values and states of the element.
      * Handles different input types appropriately, and can be called
      * on an element containing N child inputs to clear all
-     *
-     * @returns - Instance of this [provides option to method chain]
-     * @throws If clearing values fails
      */
-    clearValue(): Promise<DOMNodeReference>;
+    clearValue(): void;
     protected _getChildren(): DOMNodeReference[] | null;
-    protected callAgainstChildInputs(func: (child: DOMNodeReference) => any): void;
+    protected callAgainstChildrenInputs(callback: (child: DOMNodeReference) => any): void;
     /**
      * Enables the element so that users can input data
      * @returns - Instance of this [provides option to method chain]
@@ -174,22 +148,18 @@ export default class DOMNodeReference {
      * @param string - The text to set as the inner HTML of the element.
      * @returns - Instance of this [provides option to method chain]
      */
-    setInnerHTML(string: string): this;
+    set innerHTML(innerHTML: string);
     /**
      * Removes this element from the DOM
      * @returns - Instance of this [provides option to method chain]
      */
     remove(): this;
     /**
-     * @param options and object containing the styles you want to set : {key: value} e.g.: {'display': 'block'}
-     * @returns - Instance of this [provides option to method chain]
-     */
-    setStyle(options: Partial<CSSStyleDeclaration>): this;
-    /**
-     * Unchecks both the yes and no radio buttons if they exist.
-     * @returns - Instance of this [provides option to method chain]
+     * Sets inline CSS styles on the element.
+     * @param options - An object containing CSS property-value pairs, e.g., { display: 'block' }.
+     * @returns The instance, enabling method chaining.
      */
-    uncheckRadios(): DOMNodeReference;
+    setStyle(options: Partial<CSSStyleDeclaration>): DOMNodeReference;
     /**
      * Applies a business rule to manage visibility, required state, value, and disabled state dynamically.
      * @see {@link BusinessRule}
@@ -197,19 +167,11 @@ export default class DOMNodeReference {
      * @param dependencies For re-evaluation of conditions when the state of the dependencies change
      * @returns Instance of this for method chaining.
      */
-    applyBusinessRule(rule: BusinessRule, dependencies: DOMNodeReference[]): DOMNodeReference;
-    protected _returnBusinessRuleHandler(rule: BusinessRule): BusinessRuleHandler;
-    protected _createValidator(evaluationFunction: () => boolean): void;
-    /**
-     * Sets up tracking for dependencies using both event listeners and mutation observers.
-     * @protected
-     * @param handler The function to execute when dependencies change
-     * @param dependencies Array of dependent DOM nodes to track
-     * all other options defaults to true
-     */
-    protected _configureDependencyTracking(handler: DependencyHandler, dependencies: DOMNodeReference[]): void;
-    protected _getVisibility(): boolean;
-    protected _receiveNotification(): void;
+    applyBusinessRule(rule: BusinessRule, dependencies: DependencyArray<DOMNodeReference>): DOMNodeReference;
+    private _setupRequirementsValidator;
+    private _createBusinessRuleHandler;
+    private _createValidator;
+    private _configureDependencyTracking;
     /**
      * Sets the required level for the field by adding or removing the "required-field" class on the label.
      *
@@ -217,7 +179,7 @@ export default class DOMNodeReference {
      * If true, the "required-field" class is added to the label; if false, it is removed.
      * @returns Instance of this [provides option to method chain]
      */
-    setRequiredLevel(isRequired: (() => boolean) | boolean): DOMNodeReference;
+    setRequiredLevel(isRequired: EvaluationFunction | boolean): DOMNodeReference;
     /**
      * Executes a callback function once the element is fully loaded.
      * If the element is already loaded, the callback is called immediately.
@@ -225,5 +187,5 @@ export default class DOMNodeReference {
      * @param callback A callback function to execute once the element is loaded.
      * Receives instance of 'this' as an argument
      */
-    onceLoaded(callback: (instance: DOMNodeReference) => any): any;
+    onceLoaded(callback: (instance: DOMNodeReference) => any): void;
 }

package/dist/src/ancillary/EventManager.d.ts

@@ -0,0 +1,25 @@
+/// <reference path="../globals.d.ts" />
+import type DOMNodeReference from "./DOMNodeReference.d.ts";
+declare type EventType = string;
+declare type Handler = (this: DOMNodeReference, ...args: any[]) => void;
+/********/ /********/ export default class EventManager {
+    private readonly events;
+    private readonly listeners;
+    private readonly dependencyHandlers;
+    private observers;
+    private boundListeners;
+    constructor();
+    /********/ dispatchDependencyHandlers(): void;
+    /********/ registerDependent(dependency: DOMNodeReference, handler: Handler): "success" | Error;
+    /********/ registerEvent(event: EventType, handler: Handler): "success" | Error;
+    /********/ registerListener(event: EventType, listener: DOMNodeReference): "success" | Error;
+    /********/ emit(eventType: EventType, ...args: any[]): void;
+    /********/ stopListening(listener: DOMNodeReference): void;
+    /********/ registerObserver(observer: MutationObserver | ResizeObserver, observerOptions: {
+        nodeToObserve: Element;
+        options: Partial<ResizeObserverOptions> | Partial<MutationObserverInit>;
+    }): void;
+    /********/ registerDOMEventListener(element: Element, eventType: keyof HTMLElementEventMap, handler: (e: Event) => unknown): void;
+    /********/ destroy(): void;
+}
+export {};

package/dist/src/ancillary/InfoElement.d.ts

@@ -0,0 +1,25 @@
+/// <reference path="../globals.d.ts" />
+/**
+ *
+ * @param {string} titleString The text to display in the tooltip flyout content
+ * @param iconStyle Optional CSS styles to apply to the info icon
+ * @returns
+ */
+/********/ /********/ export default class InfoElement extends HTMLElement {
+    private flyoutContent;
+    private icon;
+    private observers;
+    /********/ constructor(titleString: string, iconStyle?: Partial<CSSStyleDeclaration>);
+    /********/ private attachEventListeners;
+    /********/ private setupObservers;
+    /********/ private getDesiredWidth;
+    /********/ private positionFlyout;
+    /********/ private updateFlyoutWidth;
+    /********/ private handleClick;
+    /********/ private handleResize;
+    /********/ private handleTouchStart;
+    /********/ private handleMouseEnter;
+    /********/ private handleMouseLeave;
+    /********/ private handleScroll;
+    /********/ private destroy;
+}

package/dist/src/ancillary/LoadingSpinner.d.ts

@@ -0,0 +1,16 @@
+/// <reference path="../globals.d.ts" />
+/**
+ * @class LoadingSpinner - instantiate a spinner to handle loading state in your powerpages site
+ */
+/********/ /********/ export default class LoadingSpinner extends HTMLElement {
+    private element;
+    constructor();
+    /**
+     * @method hide - Hides the loading spinner
+     */
+    hide(): void;
+    /**
+     * @method show - Shows the loading spinner
+     */
+    show(): void;
+}

package/dist/src/ancillary/Radio.d.ts

@@ -0,0 +1,11 @@
+/// <reference path="../globals.d.ts" />
+import DOMNodeReference from "./DOMNodeReference.d.ts";
+export default class Radio extends DOMNodeReference {
+    [key: symbol]: (...arg: any[]) => any;
+    radioType: RadioType | undefined;
+    radioParent: DOMNodeReference | undefined;
+    constructor(parent: DOMNodeReference, target: Element | string, root: Element | undefined, timeoutMs: number, radioType: RadioType);
+    protected initEventManager(): void;
+    protected initValueManager(): void;
+    protected initVisibilityManager(): void;
+}

package/dist/src/ancillary/ValueManager.d.ts

@@ -0,0 +1,19 @@
+/// <reference path="../globals.d.ts" />
+import type DOMNodeReference from "./DOMNodeReference.d.ts";
+export default class ValueManager {
+    value: any;
+    checked: true | false;
+    element: HTMLElement | null;
+    private noRadio;
+    private yesRadio;
+    radioParent?: DOMNodeReference | undefined;
+    private isRadio;
+    private radioType;
+    constructor(instance: DOMNodeReference);
+    setValue(value: any): void;
+    updateValue(e?: Event): Promise<void>;
+    getElementValue(): Promise<ElementValue>;
+    protected _validateValue(value: any): any;
+    clearValue(): void;
+    destroy(): void;
+}

package/dist/src/ancillary/VisibilityManager.d.ts

@@ -0,0 +1,12 @@
+/// <reference path="../globals.d.ts" />
+export default class VisibilityManager {
+    private visibilityController;
+    private defaultVisibility;
+    set defaultDisplay(newValue: string | null);
+    constructor(target: HTMLElement);
+    hide(): void;
+    show(): void;
+    toggleVisibility(shouldShow: boolean): void;
+    getVisibility(): true | false;
+    destroy(): void;
+}

package/dist/src/constants/EventTypes.d.ts

@@ -1,7 +1,7 @@
 /// <reference path="../globals.d.ts" />
 /**
- * For use in setting up event management in the instances of DOMNodeReference
- * @see {@link DOMNodeReference}
+ * For use in setting up event management in the instances of PowerPagesElement
+ * @see {@link PowerPagesElement}
  */
 export declare const EventTypes: {
     readonly CHECKBOX: "click";

package/dist/src/core/API.d.ts

@@ -20,17 +20,21 @@ declare abstract class API {
      *
      * @param tableSetName The DataVerse SET name of the table being queried
      * @param recordID the GUID of the records to be retrieved
-     * @param selectColumns *OPTIONAL* if desired, enter your own custom OData query for advanced GET results. Format = select=column1,column2,column3...
+     * @param ODataQueryString *OPTIONAL* if desired, enter your own custom OData query for advanced GET results. e.g.: ?$select=column1,column2,column3
      * @returns a Promise resolving the successful results of the GET request, or rejecting the failed results of the GET request
      */
-    static getRecord<T>(tableSetName: string, recordID: string, selectColumns?: string): Promise<T>;
+    static getRecord<T>(tableSetName: string, recordID: string, ODataQueryString?: string): Promise<T>;
+    /**
+     * More flexible method for building completely custom queries
+     */
+    static request<T>(query: string, options?: JQuery.AjaxSettings): Promise<T | Error>;
     /**
      *
      * @param tableSetName The dataverse set name of the table being queried
      * @param queryParameters *OPTIONAL* the OData query parameters for refining search results: *format = $filter=filters&$select=columns*
      * @returns a Promise resolving the successful results of the GET request, or rejecting the failed results of the GET request
      */
-    static getMultiple(tableSetName: string, queryParameters?: string): Promise<Array<object>>;
+    static getMultiple<T = object>(tableSetName: string, queryParameters?: string): Promise<Array<T>>;
     /**
      *
      * @param tableSetName The dataverse set name for the table that you are updating a record in

package/dist/src/core/PowerPagesElement.d.ts

@@ -0,0 +1,53 @@
+/// <reference path="../globals.d.ts" />
+import DOMNodeReference from "../ancillary/DOMNodeReference.d.ts";
+import Radio from "../ancillary/Radio.d.ts";
+/********/ /********/ export default class PowerPagesElement extends DOMNodeReference {
+    [key: symbol]: (...arg: any[]) => any;
+    private isMasked;
+    /**
+     * Represents the 'yes' option of a boolean radio field.
+     * This property is only available when the parent node
+     * is a main field for a boolean radio input.
+     */
+    yesRadio: Radio | undefined;
+    /**
+     * Represents the 'no' option of a boolean radio field.
+     * This property is only available when the parent node
+     * is a main field for a boolean radio input.
+     */
+    noRadio: Radio | undefined;
+    /**
+     * Creates an instance of PowerPagesElement.
+     * @param target - The CSS selector to find the desired DOM element.
+     * @param root - Optionally specify the element within to search for the element targeted by 'target'
+     * Defaults to 'document.body'
+     */
+    /******/ constructor(target: Element | string, root: Element | undefined, timeoutMs: number);
+    protected initValueManager(): void;
+    protected initVisibilityManager(): void;
+    protected initEventManager(): void;
+    protected _attachRadioButtons(): Promise<void>;
+    clearValue(): void;
+    /**
+     * Unchecks both the yes and no radio buttons if they exist.
+     * @returns - Instance of this [provides option to method chain]
+     */
+    uncheckRadios(): PowerPagesElement;
+    /**
+     * Apply an input mask to this element
+     * @param type The type of input mask to apply to this element
+     * @param options The options to specify the behavior of the mask
+     */
+    inputMask(type: "phone" | "money", options: InputMaskOptions): void;
+    inputMask(type: "phone", options?: {
+        format?: PhoneNumberFormats;
+        countryCode?: CountryCodeFormats;
+    }): void;
+    inputMask(type: "money", options?: {
+        prefix?: CurrencySymbol;
+        decimalPlaces?: number;
+        thousandsSeparator?: string;
+        decimalSeparator?: string;
+        allowNegative?: boolean;
+    }): void;
+}

package/dist/src/core/PowerPagesElementArray.d.ts

@@ -0,0 +1,12 @@
+/// <reference path="../globals.d.ts" />
+import type PowerPagesElement from "./PowerPagesElement.d.ts";
+export default class PowerPagesElementArray extends Array<PowerPagesElement> {
+    /**
+     * Hides all the containers of the PowerPagesElement instances in the array.
+     */
+    hideAll(this: PowerPagesElementArray): PowerPagesElementArray;
+    /**
+     * Shows all the containers of the PowerPagesElement instances in the array.
+     */
+    showAll(this: PowerPagesElementArray): PowerPagesElementArray;
+}

package/dist/src/core/bindForm.d.ts

@@ -1,14 +1,14 @@
 /// <reference path="../globals.d.ts" />
-import type DOMNodeReference from "./DOMNodeReference.d.ts";
-import type DOMNodeReferenceArray from "./DOMNodeReferenceArray.d.ts";
+import type PowerPagesElementArray from "./PowerPagesElementArray.d.ts";
+import type PowerPagesElement from "./PowerPagesElement.d.ts";
 /**
  * When loading into a page in PowerPages that has a form,
  * you can use this function by passing in the GUID of the form, and you will receive an array/record
- * of {@link DOMNodeReference}s that represent all fields, sections, sub-grids, and tabs of the given form.
+ * of {@link PowerPagesElement}s that represent all fields, sections, sub-grids, and tabs of the given form.
  * Access these properties of the {@link BoundForm} using the logical name of the control you need to access: form['logical_name']
- * you can then execute all the methods available from DOMNodeReference
+ * you can then execute all the methods available from PowerPagesElement
  * @param formId - The string GUID of the form you want to bind to
- * @returns An array of DOMNodeReferences, accessible as properties of a Record<string, DOMNodeReference> i.e. formProp = form["some_logicalName"]
+ * @returns An array of PowerPagesElements, accessible as properties of a Record<string, PowerPagesElement> i.e. formProp = form["some_logicalName"]
  * @example
  * ```js
  * bindForm("form-guid-0000").then((form) => {
@@ -23,6 +23,6 @@ import type DOMNodeReferenceArray from "./DOMNodeReferenceArray.d.ts";
  * const form = await bindForm("form-guid-0000")
  * ```
  *  @see {@link BoundForm}
- *  @see {@link DOMNodeReference}
+ *  @see {@link PowerPagesElement}
  */
-export default function bindForm(formId: string): Promise<DOMNodeReferenceArray & Record<string, DOMNodeReference>>;
+export default function bindForm(formId: string): Promise<PowerPagesElementArray & Record<string, PowerPagesElement>>;