powerpagestoolkit 2.7.135 → 2.7.211

package/dist/{bundle.js → src/index.js}

@@ -1,3 +1,4 @@
+/* @ts-self-types="./index.d.ts" */
 // src/utils/safeAjax.ts
 function safeAjax(ajaxOptions) {
   const deferredAjax = $.Deferred();
@@ -21,20 +22,20 @@ function safeAjax(ajaxOptions) {
 }
 
 // src/core/API.ts
-var API = {
+var API = class {
   /**
    * @param tableSetName The dataverse set name for the table that you are updating a record in
    * @param data The JSON of the fields and data that are to be updated on the targeted record
    * @returns a Promise resolving the successful results *[record id]* of the POST request, or rejecting the failed results *[error]* of the POST request.
    */
-  createRecord(tableSetName, data) {
+  static createRecord(tableSetName, data) {
     return new Promise((resolve, reject) => {
       safeAjax({
         type: "POST",
         url: `/_api/${tableSetName}`,
         data: JSON.stringify(data),
         contentType: "application/json",
-        success: function(response, status, xhr) {
+        success: function(_response, _status, xhr) {
           resolve(xhr.getResponseHeader("entityid"));
         },
         error: (error) => {
@@ -42,7 +43,7 @@ var API = {
         }
       });
     });
-  },
+  }
   /**
    *
    * @param tableSetName The DataVerse SET name of the table being queried
@@ -50,7 +51,7 @@ var API = {
    * @param selectColumns *OPTIONAL* if desired, enter your own custom OData query for advanced GET results. Format = select=column1,column2,column3...
    * @returns a Promise resolving the successful results of the GET request, or rejecting the failed results of the GET request
    */
-  getRecord(tableSetName, recordID, selectColumns) {
+  static getRecord(tableSetName, recordID, selectColumns) {
     return new Promise((resolve, reject) => {
       const url = `/_api/${tableSetName}(${recordID})${selectColumns ? `?$${selectColumns}` : ""}`;
       safeAjax({
@@ -60,14 +61,14 @@ var API = {
         error: reject
       });
     });
-  },
+  }
   /**
    *
    * @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
    */
-  getMultiple(tableSetName, queryParameters) {
+  static getMultiple(tableSetName, queryParameters) {
     return new Promise((resolve, reject) => {
       const url = `/_api/${tableSetName}${queryParameters ? `?${queryParameters}` : ""}`;
       safeAjax({
@@ -79,7 +80,7 @@ var API = {
         error: reject
       });
     });
-  },
+  }
   /**
    *
    * @param tableSetName The dataverse set name for the table that you are updating a record in
@@ -87,7 +88,7 @@ var API = {
    * @param data The JSON of the fields and data that are to be updated on the targeted record
    * @returns A Promise with the results of the API execution
    */
-  updateRecord(tableSetName, recordId, data) {
+  static updateRecord(tableSetName, recordId, data) {
     return new Promise((resolve, reject) => {
       const url = `/_api/${tableSetName}(${recordId})`;
       safeAjax({
@@ -106,7 +107,7 @@ var API_default = API;
 function waitFor(target, root = document, multiple = false, debounceTime2) {
   return new Promise((resolve, reject) => {
     if (multiple) {
-      let timeoutMs;
+      let timeout;
       const observedElements = [];
       const observedSet = /* @__PURE__ */ new Set();
       if (debounceTime2 < 1) {
@@ -122,8 +123,8 @@ function waitFor(target, root = document, multiple = false, debounceTime2) {
             observedElements.push(element);
           }
         });
-        clearTimeout(timeoutMs);
-        timeoutMs = setTimeout(() => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
           if (observedElements.length > 0) {
             observer.disconnect();
             resolve(observedElements);
@@ -158,10 +159,6 @@ function waitFor(target, root = document, multiple = false, debounceTime2) {
           )
         );
       }, debounceTime2);
-      if (target instanceof HTMLElement) {
-        clearTimeout(timeout);
-        return resolve(target);
-      }
       const element = root.querySelector(target);
       if (element) {
         clearTimeout(timeout);
@@ -270,13 +267,6 @@ var DOMNodeNotFoundError = class extends Error {
     super(`The targeted DOM element was not found: ${instance.target}`);
   }
 };
-var ConditionalRenderingError = class extends Error {
-  constructor(instance, error) {
-    super(
-      `There was an error condiguring conditional rendering for target: ${instance.target} :: ${error}`
-    );
-  }
-};
 var ValidationConfigError = class extends Error {
   constructor(node, message) {
     super(`Validation configuration error for ${node.target}: ${message}`);
@@ -436,6 +426,7 @@ var DOMNodeReference = class _DOMNodeReference {
         checked: this.yesRadio.checked
       };
     }
+    let returnValue;
     switch (input.type) {
       case "checkbox":
       case "radio":
@@ -457,14 +448,21 @@ var DOMNodeReference = class _DOMNodeReference {
         return {
           value: input.value !== "" ? Number(input.value) : null
         };
-      default:
+      default: {
         let cleanValue = input.value;
-        if (this.element.classList.contains("decimal") || this.element.classList.contains("money"))
+        if (this.element.classList.contains("decimal") || this.element.classList.contains("money")) {
           cleanValue = input.value.replace(/[$,]/g, "");
-        return {
+        }
+        returnValue = {
           value: this.element.classList.contains("decimal") || this.element.classList.contains("money") ? parseFloat(cleanValue) : cleanValue
         };
+      }
     }
+    returnValue = {
+      ...returnValue,
+      value: this.validateValue(returnValue.value)
+    };
+    return returnValue;
   }
   [attachVisibilityController]() {
     this.visibilityController = this.element;
@@ -536,6 +534,7 @@ var DOMNodeReference = class _DOMNodeReference {
    * @public
    */
   updateValue(e) {
+    if (e && !e.isTrusted) return;
     if (e) {
       e.stopPropagation();
     }
@@ -548,6 +547,16 @@ var DOMNodeReference = class _DOMNodeReference {
     if (elementValue.checked !== void 0) {
       this.checked = elementValue.checked;
     }
+    console.log("updated this element: ", this);
+  }
+  validateValue(value) {
+    if (value === null || value === "") {
+      return value;
+    }
+    if (!isNaN(Number(value))) {
+      return Number(value);
+    }
+    return value;
   }
   /**
    * Sets up an event listener based on the specified event type, executing the specified
@@ -587,7 +596,6 @@ var DOMNodeReference = class _DOMNodeReference {
     return this;
   }
   /**
-   *
    * @param shouldShow - Either a function that returns true or false,
    * or a natural boolean to determine the visibility of this
    * @returns - Instance of this [provides option to method chain]
@@ -611,8 +619,6 @@ var DOMNodeReference = class _DOMNodeReference {
     if (value instanceof Function) {
       value = value();
     }
-    const eventType = this.determineEventType();
-    this.element.dispatchEvent(new Event(eventType, { bubbles: false }));
     if (this.yesRadio instanceof _DOMNodeReference && this.noRadio instanceof _DOMNodeReference) {
       this.yesRadio.element.checked = value;
       this.noRadio.element.checked = !value;
@@ -625,6 +631,7 @@ var DOMNodeReference = class _DOMNodeReference {
     } else {
       this.element.value = value;
     }
+    this.value = this.validateValue(value);
     return this;
   }
   /**
@@ -721,7 +728,7 @@ var DOMNodeReference = class _DOMNodeReference {
   enable() {
     try {
       this.element.disabled = false;
-    } catch (e) {
+    } catch (_error) {
       throw new Error(
         `There was an error trying to disable the target: ${this.target}`
       );
@@ -729,7 +736,6 @@ var DOMNodeReference = class _DOMNodeReference {
     return this;
   }
   /**
-   *
    * @param elements - The elements to prepend to the element targeted by this.
    * @returns - Instance of this [provides option to method chain]
    */
@@ -811,7 +817,6 @@ var DOMNodeReference = class _DOMNodeReference {
     return 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]
    */
@@ -852,32 +857,19 @@ var DOMNodeReference = class _DOMNodeReference {
   applyBusinessRule(rule, dependencies) {
     try {
       if (rule.setVisibility) {
-        const [condition, clearValuesOnHide = true] = rule.setVisibility;
-        const initialState = condition.bind(this)();
+        const [condition] = rule.setVisibility;
+        const initialState = condition.call(this);
         this.toggleVisibility(initialState);
-        if (dependencies.length) {
-          this._configDependencyTracking(
-            () => this.toggleVisibility(condition.bind(this)()),
-            dependencies,
-            {
-              clearValuesOnHide,
-              observeVisibility: true,
-              trackInputEvents: false,
-              trackRadioButtons: false
-            }
-          );
-        }
       }
       if (rule.setRequired) {
         const [isRequired, isValid] = rule.setRequired;
         const fieldDisplayName = (() => {
           let label = this.getLabel();
-          if (!label)
-            return new Error(
-              `There was an error accessing the label for this element: ${String(
-                this.target
-              )}`
+          if (!label) {
+            throw new Error(
+              `There was an error accessing the label for this element: ${this.target}`
             );
+          }
           label = label.innerHTML;
           if (label.length > 50) {
             label = label.substring(0, 50) + "...";
@@ -895,159 +887,63 @@ var DOMNodeReference = class _DOMNodeReference {
           controltovalidate: this.element.id,
           errormessage: `<a href='#${this.element.id}_label'>${fieldDisplayName} is a required field</a>`,
           evaluationfunction: () => {
-            const isFieldRequired = isRequired.bind(this)();
+            const isFieldRequired = isRequired.call(this);
             const isFieldVisible = window.getComputedStyle(this.visibilityController).display !== "none";
-            return !isFieldRequired || !isFieldVisible || isValid.bind(this)(isFieldRequired);
+            return !isFieldRequired || !isFieldVisible || isValid.call(this, isFieldRequired);
           }
         });
         Page_Validators.push(newValidator);
-        this.setRequiredLevel(isRequired.bind(this)());
-        this._configDependencyTracking(
-          () => this.setRequiredLevel(isRequired.bind(this)()),
-          dependencies,
-          { clearValuesOnHide: false }
-        );
+        this.setRequiredLevel(isRequired.call(this));
       }
       if (rule.setValue) {
         let [condition, value] = rule.setValue;
         if (value instanceof Function) value = value();
-        if (condition.bind(this)()) {
-          this.setValue.bind(this)(value);
-        }
-        if (dependencies.length) {
-          this._configDependencyTracking(
-            () => {
-              if (condition.bind(this)()) {
-                this.setValue.bind(this)(value);
-              }
-            },
-            dependencies,
-            { clearValuesOnHide: false }
-          );
+        if (condition.call(this)) {
+          this.setValue.call(this, value);
         }
       }
       if (rule.setDisabled) {
         const condition = rule.setDisabled;
-        condition.bind(this)() ? this.disable() : this.enable();
-        if (dependencies.length) {
-          this._configDependencyTracking(
-            () => {
-              condition.bind(this)() ? this.enable() : this.disable();
-            },
-            dependencies,
-            {
-              clearValuesOnHide: false,
-              observeVisibility: true,
-              trackInputEvents: true,
-              trackRadioButtons: true
-            }
-          );
-        }
-      }
-      return this;
-    } catch (error) {
-      throw new ValidationConfigError(
-        this,
-        `Failed to apply business rule: ${error}`
-      );
-    }
-  }
-  /**
-   * Configures conditional rendering for the target element based on a condition
-   * and the visibility of one or more trigger elements.
-   * @deprecated Use the new 'applyBusinessRule Method
-   * @param condition A function that returns a boolean to determine
-   * the visibility of the target element. If `condition()` returns true, the element is shown;
-   * otherwise, it is hidden.
-   * @param dependencies - An array of `DOMNodeReference` instances. Event listeners are
-   * registered on each to toggle the visibility of the target element based on the `condition` and the visibility of
-   * the target node.
-   * @throws When there's an error in setting up conditional rendering
-   * @returns Instance of this [provides option to method chain]
-   */
-  configureConditionalRendering(condition, dependencies, clearValuesOnHide = true) {
-    try {
-      if (typeof condition !== "function") {
-        throw new TypeError("Condition must be a function");
+        condition.call(this) ? this.disable() : this.enable();
       }
-      condition = condition.bind(this);
-      const initialState = condition();
-      this.toggleVisibility(initialState);
-      if (!dependencies?.length) {
-        console.warn(
-          `powerpagestoolkit: No dependencies provided for conditional rendering of ${this}. Include referenced nodes in the dependency array if using them in rendering logic.`
+      if (dependencies.length) {
+        let visibilityCondition, clearValuesOnHide, isRequired, valueCondition, value, disabledCondition;
+        const aggregateHandler = (rule2) => {
+          if (rule2.setVisibility) {
+            [visibilityCondition, clearValuesOnHide = true] = rule2.setVisibility;
+            this.toggleVisibility(visibilityCondition.call(this));
+          }
+          if (rule2.setRequired) {
+            [isRequired] = rule2.setRequired;
+            this.setRequiredLevel(isRequired.call(this));
+          }
+          if (rule2.setValue) {
+            [valueCondition, value] = rule2.setValue;
+            if (valueCondition.call(this)) this.setValue.call(this, value);
+          }
+          if (rule2.setDisabled) {
+            disabledCondition = rule2.setDisabled;
+            disabledCondition.call(this) ? this.disable() : this.enable;
+          }
+        };
+        this._configDependencyTracking(
+          () => aggregateHandler(rule),
+          dependencies,
+          {
+            clearValuesOnHide,
+            observeVisibility: true,
+            trackInputEvents: false,
+            trackRadioButtons: false
+          }
         );
-        return this;
       }
-      this._configDependencyTracking(
-        () => this.toggleVisibility(condition()),
-        dependencies,
-        {
-          clearValuesOnHide,
-          observeVisibility: true,
-          trackInputEvents: false,
-          trackRadioButtons: false
-        }
-      );
       return this;
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      throw new ConditionalRenderingError(this, errorMessage);
-    }
-  }
-  /**
-   * Sets up validation and requirement rules for the field with enhanced error handling and dynamic updates.
-   * @deprecated Use the new 'applyBusinessRule Method
-   * @param isRequired Function determining if field is required
-   * @param isValid Function validating field input
-   * @param fieldDisplayName Display name for error messages
-   * @param dependencies Fields that trigger requirement/validation updates
-   * @returns Instance of this
-   * @throws If validation setup fails
-   */
-  configureValidationAndRequirements(isRequired, isValid, fieldDisplayName, dependencies) {
-    if (!fieldDisplayName?.trim()) {
-      throw new ValidationConfigError(this, "Field display name is required");
-    }
-    if (!Array.isArray(dependencies)) {
-      throw new ValidationConfigError(this, "Dependencies must be an array");
-    }
-    try {
-      isRequired = isRequired.bind(this);
-      isValid = isValid.bind(this);
-      if (typeof Page_Validators === "undefined") {
-        throw new ValidationConfigError(this, "Page_Validators not found");
-      }
-      const validatorId = `${this.element.id}Validator`;
-      const newValidator = document.createElement("span");
-      newValidator.style.display = "none";
-      newValidator.id = validatorId;
-      const validatorConfig = {
-        controltovalidate: this.element.id,
-        errormessage: `<a href='#${this.element.id}_label'>${fieldDisplayName} is a required field</a>`,
-        evaluationfunction: () => {
-          const isFieldRequired = isRequired();
-          const isFieldVisible = window.getComputedStyle(this.visibilityController).display !== "none";
-          if (!isFieldRequired || !isFieldVisible) {
-            return true;
-          }
-          return isValid();
-        }
-      };
-      Object.assign(newValidator, validatorConfig);
-      Page_Validators.push(newValidator);
-      this.setRequiredLevel(isRequired());
-      this._configDependencyTracking(
-        () => this.setRequiredLevel(isRequired()),
-        dependencies
-      );
     } catch (error) {
       throw new ValidationConfigError(
         this,
-        `Failed to configure validation: ${error}`
+        `Failed to apply business rule: ${error}`
       );
     }
-    return this;
   }
   /**
    * Sets up tracking for dependencies using both event listeners and mutation observers.
@@ -1331,26 +1227,24 @@ function getIdentifyingAttribute(tagName) {
 }
 function createReferenceString(tagName, datafieldname) {
   if (tagName === "control") return `#${datafieldname}`;
-  if (tagName === "tab" || tagName === "section")
+  if (tagName === "tab" || tagName === "section") {
     return `[data-name="${datafieldname}"]`;
+  }
   return null;
 }
-
-// src/index.ts
-var toolkit = { API: API_default, createRef: createDOMNodeReference, waitFor, bindForm };
-var src_default = toolkit;
 export {
   API_default as API,
   bindForm,
   createDOMNodeReference as createRef,
-  src_default as default,
   waitFor
 };
+/*! For license information please see index.js.LEGAL.txt */
+//# sourceMappingURL=index.js.map
 
 
-          (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  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);
-          })();
-        
+      if (typeof document !== 'undefined') {
+        const style = document.createElement('style');
+        style.textContent = ".info-icon {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.info-icon .fa-info-circle {\r\n  cursor: pointer; /* Ensures the icon is recognized as interactive */\r\n}\r\n\r\n.info-icon .flyout-content {\r\n  max-width: calc(100vw - 20px); /* 20px margin on both sides */\r\n  display: none; /* Initially hidden */\r\n  position: absolute;\r\n  left: 50%; /* Center horizontally */\r\n  transform: translateX(-50%); /* Adjust positioning */\r\n  color: #000;\r\n  background-color: #f9f9f9;\r\n  padding: 10px;\r\n  border: 1px solid #ddd;\r\n  z-index: 1;\r\n  min-width: 200px; /* Minimum width for better readability */\r\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);\r\n  border-radius: 4px; /* Rounded corners */\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .info-icon .flyout-content {\r\n    max-width: 95vw;\r\n    padding: 12px;\r\n    font-size: 0.9em;\r\n    display: block;\r\n    right: auto;\r\n  }\r\n}\r\n\r\n.required-field::after {\r\n  content: \" *\" !important;\r\n  color: #f00 !important;\r\n}\r\n";
+        document.head.appendChild(style);
+      }
+