powerpagestoolkit 2.5.303 → 2.5.402

package/README.md

@@ -140,11 +140,18 @@ node.enable();
 ```typescript
 // LABEL AND INFO OPERATIONS
 const label = node.getLabel();
-node.appendToLabel(infoElement);
 // appends a tooltip to the label associated with the element targeted by 'this'
-node.addLabelTooltip("Helper text");
+node.addLabelTooltip(
+  "Helper text",
+  /* Optionally pass in css styles to customize the tooltip icon*/
+  { color: "orange", fontSize: "30px" }
+);
 // appends a tooltip directly to the element targeted by 'this'
-node.addTooltip("Inline helper");
+node.addTooltip(
+  "Inline helper",
+  /* Optionally pass in css styles to customize the tooltip icon*/
+  { color: "orange", fontSize: "30px" }
+);
 ```
 
 ### DataVerse API

package/dist/DOMNodeReference.d.ts

@@ -1,5 +1,5 @@
 export declare const _init: unique symbol;
-/******/ /******/ /******/ export default class DOMNodeReference {
+export default class DOMNodeReference {
     target: HTMLElement | string;
     private isLoaded;
     private defaultDisplay;
@@ -65,77 +65,77 @@ export declare const _init: unique symbol;
     /**
      * Sets up an event listener based on the specified event type, executing the specified
      * event handler
-     * @param {string} eventType - The DOM event to watch for
-     * @param {(e: Event) => void} eventHandler - The callback function that runs when the
-     * specified event occurs
-     * @returns - Instance of this
+     * @param eventType - The DOM event to watch for
+     * @param eventHandler - The callback function that runs when the
+     * specified event occurs.
+     * @returns - Instance of this [provides option to method chain]
      */
     on(eventType: string, eventHandler: (e: Event) => void): DOMNodeReference;
     /**
      * Hides the element by setting its display style to "none".
-     * @returns - Instance of this
+     * @returns - Instance of this [provides option to method chain]
      */
     hide(): DOMNodeReference;
     /**
      * Shows the element by restoring its default display style.
-     * @returns - Instance of this
+     * @returns - Instance of this [provides option to method chain]
      */
     show(): DOMNodeReference;
     /**
      *
      * @param {function(instance: DOMNodeReference): boolean | boolean} shouldShow - Either a function that returns true or false,
      * or a natural boolean to determine the visibility of this
-     * @returns - Instance of this
+     * @returns - Instance of this [provides option to method chain]
      */
     toggleVisibility(shouldShow: ((instance: DOMNodeReference) => boolean) | boolean): DOMNodeReference;
     /**
      * Sets the value of the HTML element.
-     * @param {(() => any) | any} value - The value to set for the HTML element.
+     * @param value - The value to set for the HTML element.
      * for parents of boolean radios, pass true or false as value, or
      * an expression returning a boolean
-     * @returns - Instance of this
+     * @returns - Instance of this [provides option to method chain]
      */
     setValue(value: (() => any) | any): DOMNodeReference;
     /**
      * Disables the element so that users cannot input any data
-     * @returns - Instance of this
+     * @returns - Instance of this [provides option to method chain]
      */
     disable(): DOMNodeReference;
     /**
      * Clears all values and states of the element.
      * Handles different input types appropriately.
      *
-     * @returns {DOMNodeReference} Instance of this for method chaining
-     * @throws {Error} If clearing values fails
+     * @returns - Instance of this [provides option to method chain]
+     * @throws If clearing values fails
      */
     clearValues(): Promise<DOMNodeReference>;
     /**
      * Enables the element so that users can input data
-     * @returns - Instance of this
+     * @returns - Instance of this [provides option to method chain]
      */
     enable(): DOMNodeReference;
     /**
      *
-     * @param {...HTMLElement} elements - The elements to prepend to the element targeted by this.
-     * @returns - Instance of this
+     * @param elements - The elements to prepend to the element targeted by this.
+     * @returns - Instance of this [provides option to method chain]
      */
     prepend(...elements: HTMLElement[]): DOMNodeReference;
     /**
      * Appends child elements to the HTML element.
-     * @param {...HTMLElement} elements - The elements to append to the element targeted by this.
-     * @returns - Instance of this
+     * @param elements - The elements to append to the element targeted by this.
+     * @returns - Instance of this [provides option to method chain]
      */
     append(...elements: HTMLElement[]): DOMNodeReference;
     /**
      * Inserts elements before the HTML element.
-     * @param {...HTMLElement} elements - The elements to insert before the HTML element.
-     * @returns - Instance of this
+     * @param elements - The elements to insert before the HTML element.
+     * @returns - Instance of this [provides option to method chain]
      */
     before(...elements: HTMLElement[]): DOMNodeReference;
     /**
      * Inserts elements after the HTML element.
-     * @param {...HTMLElement} elements - The elements to insert after the HTML element.
-     * @returns - Instance of this
+     * @param elements - The elements to insert after the HTML element.
+     * @returns - Instance of this [provides option to method chain]
      */
     after(...elements: HTMLElement[]): DOMNodeReference;
     /**
@@ -143,44 +143,40 @@ export declare const _init: unique symbol;
      * @returns {HTMLElement} The label element associated with this element.
      */
     getLabel(): HTMLElement | null;
-    /**
-     * Appends child elements to the label associated with the HTML element.
-     * @param {...HTMLElement} elements - The elements to append to the label.
-     * @returns - Instance of this
-     */
-    appendToLabel(...elements: HTMLElement[]): DOMNodeReference;
     /**
      * Adds a tooltip with specified text to the label associated with the HTML element.
-     * @param {string} text - The text to display in the tooltip.
-     * @returns - Instance of this
+     * @param text - The text to display in the tooltip.
+     * @param containerStyle - Optional object with CSS Styles to apply to the container of the info element
+     * @returns - Instance of this [provides option to method chain]
      */
-    addLabelTooltip(text: string): DOMNodeReference;
+    addLabelTooltip(text: string, containerStyle?: Partial<CSSStyleDeclaration>): DOMNodeReference;
     /**
      * Adds a tooltip with the specified text to the element
-     * @param {string} text - The text to display in the tooltip
-     * @returns - Instance of this
+     * @param text - The text to display in the tooltip
+     * @param containerStyle - Optional object with CSS Styles to apply to the container of the info element
+     * @returns - Instance of this [provides option to method chain]
      */
-    addTooltip(text: string): DOMNodeReference;
+    addTooltip(text: string, containerStyle?: Partial<CSSStyleDeclaration>): DOMNodeReference;
     /**
      * Sets the inner HTML content of the HTML element.
      * @param {string} string - The text to set as the inner HTML of the element.
-     * @returns - Instance of this
+     * @returns - Instance of this [provides option to method chain]
      */
     setInnerHTML(string: string): this;
     /**
      * Removes this element from the DOM
-     * @returns - Instance of this
+     * @returns - Instance of this [provides option to method chain]
      */
     remove(): this;
     /**
      *
      * @param {Partial<CSSStyleDeclaration} options and object containing the styles you want to set : {key: value} e.g.: {'display': 'block'}
-     * @returns - Instance of this
+     * @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
+     * @returns - Instance of this [provides option to method chain]
      */
     uncheckRadios(): DOMNodeReference;
     /**
@@ -194,7 +190,7 @@ export declare const _init: unique symbol;
      * registered on each to toggle the visibility of the target element based on the `condition` and the visibility of
      * the target node.
      * @throws {ConditionalRenderingError} When there's an error in setting up conditional rendering
-     * @returns {DOMNodeReference} - Instance of this
+     * @returns {DOMNodeReference} - Instance of this [provides option to method chain]
      */
     configureConditionalRendering(condition: () => boolean, dependencies?: Array<DOMNodeReference>): DOMNodeReference;
     /**
@@ -204,7 +200,7 @@ export declare const _init: unique symbol;
      * @param {() => boolean} isValid - Function validating field input
      * @param {string} fieldDisplayName - Display name for error messages
      * @param {Array<DOMNodeReference>} dependencies - Fields that trigger requirement/validation updates
-     * @returns {DOMNodeReference} Instance of this for method chaining
+     * @returns {DOMNodeReference} Instance of this
      * @throws {ValidationConfigError} If validation setup fails
      */
     configureValidationAndRequirements(isRequired: () => boolean, isValid: () => boolean, fieldDisplayName: string, dependencies: Array<DOMNodeReference>): DOMNodeReference;
@@ -218,7 +214,7 @@ export declare const _init: unique symbol;
      *
      * @param {Function | boolean} isRequired - Determines whether the field should be marked as required.
      * If true, the "required-field" class is added to the label; if false, it is removed.
-     * @returns - Instance of this
+     * @returns - Instance of this [provides option to method chain]
      */
     setRequiredLevel(isRequired: (() => boolean) | boolean): DOMNodeReference;
     /**

package/dist/bundle.css

@@ -12,6 +12,7 @@
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
+  color: #000;
   background-color: #f9f9f9;
   padding: 10px;
   border: 1px solid #ddd;

package/dist/bundle.js

@@ -136,7 +136,17 @@ function waitFor(target) {
 }
 
 // src/createInfoElement.ts
-function CreateInfoEl(titleString) {
+function CreateInfoEl(titleString, containerStyle) {
+  if (typeof titleString !== "string") {
+    throw new Error(
+      `argument "titleString" must be of type "string". Received: "${typeof titleString}"`
+    );
+  }
+  if (containerStyle && typeof containerStyle !== "object") {
+    throw new Error(
+      `argument "containerStyle" must be of type "object". Received: "${typeof containerStyle}"`
+    );
+  }
   const span = document.createElement("span");
   span.classList.add("info-icon");
   const icon = document.createElement("i");
@@ -148,6 +158,9 @@ function CreateInfoEl(titleString) {
   flyoutContent.classList.add("flyout-content");
   span.appendChild(icon);
   span.appendChild(flyoutContent);
+  if (containerStyle) {
+    Object.assign(icon.style, containerStyle);
+  }
   const positionFlyout = () => {
     flyoutContent.style.display = "block";
     const flyoutRect = flyoutContent.getBoundingClientRect();
@@ -161,9 +174,14 @@ function CreateInfoEl(titleString) {
       flyoutContent.style.left = `calc(50% + ${overflowAmount}px)`;
     }
   };
-  icon.addEventListener("mouseenter", positionFlyout);
-  icon.addEventListener("mouseleave", () => {
-    flyoutContent.style.display = "none";
+  span.addEventListener("mouseenter", () => {
+    positionFlyout();
+  });
+  span.addEventListener("mouseleave", (event) => {
+    const relatedTarget = event.relatedTarget;
+    if (!span.contains(relatedTarget)) {
+      flyoutContent.style.display = "none";
+    }
   });
   icon.addEventListener("touchstart", (event) => {
     event.preventDefault();
@@ -360,18 +378,28 @@ var DOMNodeReference = class _DOMNodeReference {
   /**
    * Sets up an event listener based on the specified event type, executing the specified
    * event handler
-   * @param {string} eventType - The DOM event to watch for
-   * @param {(e: Event) => void} eventHandler - The callback function that runs when the
-   * specified event occurs
-   * @returns - Instance of this
+   * @param eventType - The DOM event to watch for
+   * @param eventHandler - The callback function that runs when the
+   * specified event occurs.
+   * @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));
     return this;
   }
   /**
    * Hides the element by setting its display style to "none".
-   * @returns - Instance of this
+   * @returns - Instance of this [provides option to method chain]
    */
   hide() {
     this.visibilityController.style.display = "none";
@@ -379,7 +407,7 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    * Shows the element by restoring its default display style.
-   * @returns - Instance of this
+   * @returns - Instance of this [provides option to method chain]
    */
   show() {
     this.visibilityController.style.display = this.defaultDisplay;
@@ -389,7 +417,7 @@ var DOMNodeReference = class _DOMNodeReference {
    *
    * @param {function(instance: DOMNodeReference): boolean | boolean} shouldShow - Either a function that returns true or false,
    * or a natural boolean to determine the visibility of this
-   * @returns - Instance of this
+   * @returns - Instance of this [provides option to method chain]
    */
   toggleVisibility(shouldShow) {
     if (shouldShow instanceof Function) {
@@ -401,10 +429,10 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    * Sets the value of the HTML element.
-   * @param {(() => any) | any} value - The value to set for the HTML element.
+   * @param value - The value to set for the HTML element.
    * for parents of boolean radios, pass true or false as value, or
    * an expression returning a boolean
-   * @returns - Instance of this
+   * @returns - Instance of this [provides option to method chain]
    */
   setValue(value) {
     if (value instanceof Function) {
@@ -420,7 +448,7 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    * Disables the element so that users cannot input any data
-   * @returns - Instance of this
+   * @returns - Instance of this [provides option to method chain]
    */
   disable() {
     try {
@@ -436,8 +464,8 @@ var DOMNodeReference = class _DOMNodeReference {
    * Clears all values and states of the element.
    * Handles different input types appropriately.
    *
-   * @returns {DOMNodeReference} Instance of this for method chaining
-   * @throws {Error} If clearing values fails
+   * @returns - Instance of this [provides option to method chain]
+   * @throws If clearing values fails
    */
   async clearValues() {
     try {
@@ -503,7 +531,7 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    * Enables the element so that users can input data
-   * @returns - Instance of this
+   * @returns - Instance of this [provides option to method chain]
    */
   enable() {
     try {
@@ -517,8 +545,8 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    *
-   * @param {...HTMLElement} elements - The elements to prepend to the element targeted by this.
-   * @returns - Instance of this
+   * @param elements - The elements to prepend to the element targeted by this.
+   * @returns - Instance of this [provides option to method chain]
    */
   prepend(...elements) {
     this.element.prepend(...elements);
@@ -526,8 +554,8 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    * Appends child elements to the HTML element.
-   * @param {...HTMLElement} elements - The elements to append to the element targeted by this.
-   * @returns - Instance of this
+   * @param elements - The elements to append to the element targeted by this.
+   * @returns - Instance of this [provides option to method chain]
    */
   append(...elements) {
     this.element.append(...elements);
@@ -535,8 +563,8 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    * Inserts elements before the HTML element.
-   * @param {...HTMLElement} elements - The elements to insert before the HTML element.
-   * @returns - Instance of this
+   * @param elements - The elements to insert before the HTML element.
+   * @returns - Instance of this [provides option to method chain]
    */
   before(...elements) {
     this.element.before(...elements);
@@ -544,8 +572,8 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    * Inserts elements after the HTML element.
-   * @param {...HTMLElement} elements - The elements to insert after the HTML element.
-   * @returns - Instance of this
+   * @param elements - The elements to insert after the HTML element.
+   * @returns - Instance of this [provides option to method chain]
    */
   after(...elements) {
     this.element.after(...elements);
@@ -558,40 +586,30 @@ var DOMNodeReference = class _DOMNodeReference {
   getLabel() {
     return document.querySelector(`#${this.element.id}_label`) || null;
   }
-  /**
-   * Appends child elements to the label associated with the HTML element.
-   * @param {...HTMLElement} elements - The elements to append to the label.
-   * @returns - Instance of this
-   */
-  appendToLabel(...elements) {
-    const label = this.getLabel();
-    if (label) {
-      label.append(" ", ...elements);
-    }
-    return this;
-  }
   /**
    * Adds a tooltip with specified text to the label associated with the HTML element.
-   * @param {string} text - The text to display in the tooltip.
-   * @returns - Instance of this
+   * @param text - The text to display in the tooltip.
+   * @param containerStyle - Optional object with CSS Styles to apply to the container of the info element
+   * @returns - Instance of this [provides option to method chain]
    */
-  addLabelTooltip(text) {
-    this.appendToLabel(CreateInfoEl(text));
+  addLabelTooltip(text, containerStyle) {
+    this.getLabel()?.append(CreateInfoEl(text, containerStyle || void 0));
     return this;
   }
   /**
    * Adds a tooltip with the specified text to the element
-   * @param {string} text - The text to display in the tooltip
-   * @returns - Instance of this
+   * @param text - The text to display in the tooltip
+   * @param containerStyle - Optional object with CSS Styles to apply to the container of the info element
+   * @returns - Instance of this [provides option to method chain]
    */
-  addTooltip(text) {
-    this.append(CreateInfoEl(text));
+  addTooltip(text, containerStyle) {
+    this.append(CreateInfoEl(text, containerStyle || void 0));
     return this;
   }
   /**
    * Sets the inner HTML content of the HTML element.
    * @param {string} string - The text to set as the inner HTML of the element.
-   * @returns - Instance of this
+   * @returns - Instance of this [provides option to method chain]
    */
   setInnerHTML(string) {
     this.element.innerHTML = string;
@@ -599,7 +617,7 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    * Removes this element from the DOM
-   * @returns - Instance of this
+   * @returns - Instance of this [provides option to method chain]
    */
   remove() {
     this.element.remove();
@@ -608,7 +626,7 @@ var DOMNodeReference = class _DOMNodeReference {
   /**
    *
    * @param {Partial<CSSStyleDeclaration} options and object containing the styles you want to set : {key: value} e.g.: {'display': 'block'}
-   * @returns - Instance of this
+   * @returns - Instance of this [provides option to method chain]
    */
   setStyle(options) {
     if (Object.prototype.toString.call(options) !== "[object Object]") {
@@ -623,7 +641,7 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    * Unchecks both the yes and no radio buttons if they exist.
-   * @returns - Instance of this
+   * @returns - Instance of this [provides option to method chain]
    */
   uncheckRadios() {
     if (this.yesRadio && this.noRadio) {
@@ -647,7 +665,7 @@ var DOMNodeReference = class _DOMNodeReference {
    * registered on each to toggle the visibility of the target element based on the `condition` and the visibility of
    * the target node.
    * @throws {ConditionalRenderingError} When there's an error in setting up conditional rendering
-   * @returns {DOMNodeReference} - Instance of this
+   * @returns {DOMNodeReference} - Instance of this [provides option to method chain]
    */
   configureConditionalRendering(condition, dependencies) {
     try {
@@ -710,7 +728,7 @@ var DOMNodeReference = class _DOMNodeReference {
    * @param {() => boolean} isValid - Function validating field input
    * @param {string} fieldDisplayName - Display name for error messages
    * @param {Array<DOMNodeReference>} dependencies - Fields that trigger requirement/validation updates
-   * @returns {DOMNodeReference} Instance of this for method chaining
+   * @returns {DOMNodeReference} Instance of this
    * @throws {ValidationConfigError} If validation setup fails
    */
   configureValidationAndRequirements(isRequired, isValid, fieldDisplayName, dependencies) {
@@ -793,7 +811,7 @@ var DOMNodeReference = class _DOMNodeReference {
    *
    * @param {Function | boolean} isRequired - Determines whether the field should be marked as required.
    * If true, the "required-field" class is added to the label; if false, it is removed.
-   * @returns - Instance of this
+   * @returns - Instance of this [provides option to method chain]
    */
   setRequiredLevel(isRequired) {
     if (isRequired instanceof Function) {
@@ -883,7 +901,7 @@ export {
 
           (function() {
             const style = document.createElement('style');
-            style.textContent = "/* src/style.css */\n.info-icon {\n  position: relative;\n  display: inline-block;\n}\n.info-icon .fa-info-circle {\n  cursor: pointer;\n}\n.info-icon .flyout-content {\n  max-width: calc(100vw - 20px);\n  display: none;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #f9f9f9;\n  padding: 10px;\n  border: 1px solid #ddd;\n  z-index: 1;\n  min-width: 200px;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);\n  border-radius: 4px;\n}\n@media (max-width: 600px) {\n  .info-icon .flyout-content {\n    max-width: 95vw;\n    padding: 12px;\n    font-size: 0.9em;\n    display: block;\n    right: auto;\n  }\n}\n.required-field::after {\n  content: \" *\" !important;\n  color: #f00 !important;\n}\n";
+            style.textContent = "/* src/style.css */\n.info-icon {\n  position: relative;\n  display: inline-block;\n}\n.info-icon .fa-info-circle {\n  cursor: pointer;\n}\n.info-icon .flyout-content {\n  max-width: calc(100vw - 20px);\n  display: none;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  color: #000;\n  background-color: #f9f9f9;\n  padding: 10px;\n  border: 1px solid #ddd;\n  z-index: 1;\n  min-width: 200px;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);\n  border-radius: 4px;\n}\n@media (max-width: 600px) {\n  .info-icon .flyout-content {\n    max-width: 95vw;\n    padding: 12px;\n    font-size: 0.9em;\n    display: block;\n    right: auto;\n  }\n}\n.required-field::after {\n  content: \" *\" !important;\n  color: #f00 !important;\n}\n";
             document.head.appendChild(style);
           })();
         

package/dist/createInfoElement.d.ts

@@ -1 +1,7 @@
-export default function CreateInfoEl(titleString: string): HTMLSpanElement;
+/**
+ *
+ * @param {string} titleString The text to display in the tooltip flyout content
+ * @param containerStyle Optional CSS styles to apply to the info icon
+ * @returns
+ */
+export default function CreateInfoEl(titleString: string, containerStyle?: Partial<CSSStyleDeclaration>): HTMLSpanElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerpagestoolkit",
-  "version": "2.5.303",
+  "version": "2.5.402",
   "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",
@@ -72,8 +72,5 @@
     "./style.css": {
       "import": "./dist/bundle.css"
     }
-  },
-  "dependencies": {
-    "powerpagestoolkit": "^2.3.4"
   }
 }