powerpagestoolkit 1.3.4 → 1.3.5

package/dist/bundle.js

@@ -0,0 +1,711 @@
+// src/safeAjax.ts
+function safeAjax(ajaxOptions) {
+  const deferredAjax = $.Deferred();
+  shell.getTokenDeferred().done(function(token) {
+    if (!ajaxOptions.headers) {
+      $.extend(ajaxOptions, {
+        headers: {
+          __RequestVerificationToken: token
+        }
+      });
+    } else {
+      ajaxOptions.headers["__RequestVerificationToken"] = token;
+    }
+    $.ajax(ajaxOptions).done(function(data, textStatus, jqXHR) {
+      validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);
+    }).fail(deferredAjax.reject);
+  }).fail(function() {
+    deferredAjax.rejectWith(this, arguments);
+  });
+  return deferredAjax.promise();
+}
+
+// src/API.ts
+var API = {
+  /**
+   *
+   * @param {Schema} schema an instance of a schema class, containing the desired information for the POST request
+   * @returns a Promise resolving the successful results *[record id]* of the POST request, or rejecting the failed results *[error]* of the POST request.
+   */
+  createRecord(schema) {
+    return new Promise((resolve, reject) => {
+      safeAjax({
+        type: "POST",
+        url: `/_api/${schema.logicalName()}`,
+        data: schema.value(),
+        contentType: "application/json",
+        success: function(response, status, xhr) {
+          resolve(xhr.getResponseHeader("entityid"));
+        },
+        error: (error) => {
+          reject(error);
+        }
+      });
+    });
+  },
+  /**
+   *
+   * @param {string} tableSetName The DataVerse SET name of the table being queried
+   * @param {string} recordID the GUID of the records to be retrieved
+   * @param {string} 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) {
+    return new Promise((resolve, reject) => {
+      const url = `/_api/${tableSetName}(${recordID})${selectColumns ? `?$${selectColumns}` : ""}`;
+      safeAjax({
+        type: "GET",
+        url,
+        success: resolve,
+        error: reject
+      });
+    });
+  },
+  /**
+   *
+   * @param {String} tableSetName The DataVerse SET name of the table being queried
+   * @param {String} 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) {
+    return new Promise((resolve, reject) => {
+      const url = `/_api/${tableSetName}${queryParameters ? `?${queryParameters}` : ""}`;
+      safeAjax({
+        type: "GET",
+        url,
+        success: function(response) {
+          resolve(response.value);
+        },
+        error: reject
+      });
+    });
+  }
+};
+var API_default = API;
+
+// src/waitFor.ts
+function waitFor(target) {
+  return new Promise((resolve, reject) => {
+    const observer = new MutationObserver(() => {
+      const observedElement = document.querySelector(target);
+      if (observedElement) {
+        clearTimeout(timeout);
+        observer.disconnect();
+        resolve(observedElement);
+      }
+    });
+    const timeout = setTimeout(() => {
+      observer.disconnect();
+      reject(new Error(`Element not found: ${target} within 5 seconds`));
+    }, 5e3);
+    if (target instanceof HTMLElement) {
+      clearTimeout(timeout);
+      return resolve(target);
+    }
+    const element = document.querySelector(target);
+    if (element) {
+      clearTimeout(timeout);
+      return resolve(element);
+    }
+    observer.observe(document.body, {
+      subtree: true,
+      attributes: true,
+      childList: true
+      // Detects added/removed child elements
+    });
+  });
+}
+
+// src/createInfoElement.ts
+function CreateInfoEl(titleString) {
+  const span = document.createElement("span");
+  span.classList.add("info-icon");
+  const icon = document.createElement("i");
+  icon.classList.add("fa", "fa-solid", "fa-info-circle");
+  icon.setAttribute("aria-label", "Info");
+  icon.style.cursor = "pointer";
+  const flyoutContent = document.createElement("div");
+  flyoutContent.innerHTML = titleString;
+  flyoutContent.classList.add("flyout-content");
+  span.appendChild(icon);
+  span.appendChild(flyoutContent);
+  const positionFlyout = () => {
+    flyoutContent.style.display = "block";
+    const flyoutRect = flyoutContent.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    if (flyoutRect.right > viewportWidth) {
+      const overflowAmount = flyoutRect.right - viewportWidth;
+      flyoutContent.style.left = `calc(50% - ${overflowAmount}px)`;
+    }
+    if (flyoutRect.left < 0) {
+      const overflowAmount = Math.abs(flyoutRect.left);
+      flyoutContent.style.left = `calc(50% + ${overflowAmount}px)`;
+    }
+  };
+  icon.addEventListener("mouseenter", positionFlyout);
+  icon.addEventListener("mouseleave", () => {
+    flyoutContent.style.display = "none";
+  });
+  icon.addEventListener("touchstart", (event) => {
+    event.preventDefault();
+    flyoutContent.style.display = flyoutContent.style.display === "block" ? "none" : "block";
+    if (flyoutContent.style.display === "block") {
+      positionFlyout();
+    }
+  });
+  document.body.addEventListener("click", (event) => {
+    if (!span.contains(event.target)) {
+      flyoutContent.style.display = "none";
+    }
+  });
+  flyoutContent.style.display = "none";
+  return span;
+}
+
+// src/errors.ts
+var DOMNodeInitializationError = class extends Error {
+  constructor(instance, error) {
+    super(
+      `There was an error initializing a DOMNodeReference for target: ${instance.target}, :: ${error}`
+    );
+    this.name = "DOMNodeInitializationError";
+  }
+};
+var DOMNodeNotFoundError = class extends Error {
+  constructor(instance) {
+    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}`
+    );
+  }
+};
+
+// src/DOMNodeReference.ts
+var _init = Symbol("_init");
+var DOMNodeReference = class {
+  // properties initialized in the constructor
+  target;
+  isLoaded;
+  defaultDisplay;
+  /**
+   * The value of the element that this node represents
+   * stays in syncs with the live DOM elements via event handler
+   * @type {any}
+   */
+  value;
+  /**
+   * Creates an instance of DOMNodeReference.
+   * @param {string} target - The CSS selector to find the desired DOM element.
+   */
+  /******/
+  /******/
+  constructor(target) {
+    this.target = target;
+    this.isLoaded = false;
+    this.defaultDisplay = "";
+    this.value = null;
+  }
+  async [_init]() {
+    try {
+      const element = await waitFor(this.target);
+      this.element = element;
+      if (!this.element) {
+        throw new DOMNodeNotFoundError(this);
+      }
+      if (this.element.classList.contains("boolean-radio")) {
+        await this._attachRadioButtons();
+      }
+      this._initValueSync();
+      this._attachVisibilityController();
+      this.defaultDisplay = this.visibilityController.style.display;
+      this.isLoaded = true;
+    } catch (e) {
+      throw new DOMNodeInitializationError(this, e);
+    }
+  }
+  // Function to update this.value based on element type
+  _initValueSync() {
+    this.updateValue();
+    const elementType = this.element.type;
+    if (elementType === "checkbox" || elementType === "radio") {
+      this.element.addEventListener("click", this.updateValue.bind(this));
+    } else if (elementType === "select-one" || elementType === "select-multiple") {
+      this.element.addEventListener("change", this.updateValue.bind(this));
+    } else {
+      this.element.addEventListener("input", this.updateValue.bind(this));
+    }
+  }
+  updateValue() {
+    switch (this.element.type) {
+      case "checkbox":
+      case "radio":
+        this.value = this.element.checked;
+        this.checked = this.element.checked;
+        break;
+      case "select-multiple":
+        this.value = Array.from(
+          this.element.selectedOptions
+        ).map((option) => option.value);
+        break;
+      case "number":
+        this.value = this.element.value !== "" ? Number(this.element.value) : null;
+        break;
+      default:
+        this.value = null;
+        break;
+    }
+    if (this.element.classList.contains("boolean-radio")) {
+      this.yesRadio.updateValue();
+      this.noRadio.updateValue();
+    }
+  }
+  _attachVisibilityController() {
+    this.visibilityController = this.element;
+    if (this.element.tagName === "TABLE") {
+      const fieldset = this.element.closest("fieldset");
+      if (fieldset) {
+        this.visibilityController = fieldset;
+      }
+      return;
+    }
+    const tagsRequiringTdParent = [
+      "SPAN",
+      "INPUT",
+      "TEXTAREA",
+      "SELECT",
+      "TABLE"
+    ];
+    if (tagsRequiringTdParent.includes(this.element.tagName)) {
+      const tdParent = this.element.closest("td");
+      if (tdParent) {
+        this.visibilityController = tdParent;
+      }
+    }
+  }
+  async _attachRadioButtons() {
+    this.yesRadio = await createDOMNodeReference(`#${this.element.id}_1`);
+    this.noRadio = await createDOMNodeReference(`#${this.element.id}_0`);
+  }
+  /**
+   * 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 {(this: DOMNodeReference, e: Event) => void} eventHandler - The callback function that runs when the
+   * specified event occurs
+   * @returns - Instance of this
+   */
+  on(eventType, eventHandler) {
+    this.element.addEventListener(eventType, eventHandler.bind(this));
+    return this;
+  }
+  /**
+   * Hides the element by setting its display style to "none".
+   * @returns - Instance of this
+   */
+  hide() {
+    this.visibilityController.style.display = "none";
+    return this;
+  }
+  /**
+   * Shows the element by restoring its default display style.
+   * @returns - Instance of this
+   */
+  show() {
+    this.visibilityController.style.display = this.defaultDisplay;
+    return this;
+  }
+  /**
+   *
+   * @param {function(this: 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
+   */
+  toggleVisibility(shouldShow) {
+    if (shouldShow instanceof Function) {
+      shouldShow(this) ? this.show() : this.hide();
+    } else {
+      shouldShow ? this.show() : this.hide();
+    }
+    return this;
+  }
+  /**
+   * Sets the value of the HTML element.
+   * @param {() => any} 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
+   */
+  setValue(value) {
+    if (this.element.classList.contains("boolean-radio")) {
+      this.yesRadio.element.checked = value;
+      this.noRadio.element.checked = !value;
+    } else {
+      this.element.value = value;
+    }
+    return this;
+  }
+  /**
+   * Disables the element so that users cannot input any data
+   * @returns - Instance of this
+   */
+  disable() {
+    try {
+      this.element.disabled = true;
+    } catch (e) {
+      throw new Error(
+        `There was an error trying to disable the target: ${this.target}`
+      );
+    }
+    return this;
+  }
+  /**
+   * Enables the element so that users can input data
+   * @returns - Instance of this
+   */
+  enable() {
+    try {
+      this.element.disabled = false;
+    } catch (e) {
+      throw new Error(
+        `There was an error trying to disable the target: ${this.target}`
+      );
+    }
+    return this;
+  }
+  /**
+   *
+   * @param {...HTMLElement} elements - The elements to prepend to the element targeted by this.
+   * @returns - Instance of this
+   */
+  prepend(...elements) {
+    this.element.prepend(...elements);
+    return this;
+  }
+  /**
+   * Appends child elements to the HTML element.
+   * @param {...HTMLElement} elements - The elements to append to the element targeted by this.
+   * @returns - Instance of this
+   */
+  append(...elements) {
+    this.element.append(...elements);
+    return this;
+  }
+  /**
+   * Inserts elements before the HTML element.
+   * @param {...HTMLElement} elements - The elements to insert before the HTML element.
+   * @returns - Instance of this
+   */
+  before(...elements) {
+    this.element.before(...elements);
+    return this;
+  }
+  /**
+   * Inserts elements after the HTML element.
+   * @param {...HTMLElement} elements - The elements to insert after the HTML element.
+   * @returns - Instance of this
+   */
+  after(...elements) {
+    this.element.after(...elements);
+    return this;
+  }
+  /**
+   * Retrieves the label associated with the HTML element.
+   * @returns {HTMLElement} The label element associated with this element.
+   */
+  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
+   */
+  addLabelTooltip(text) {
+    this.appendToLabel(CreateInfoEl(text));
+    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
+   */
+  addTooltip(text) {
+    this.append(CreateInfoEl(text));
+    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
+   */
+  setInnerHTML(string) {
+    this.element.innerHTML = string;
+    return this;
+  }
+  /**
+   * Removes this element from the DOM
+   * @returns - Instance of this
+   */
+  remove() {
+    this.element.remove();
+    return this;
+  }
+  /**
+   *
+   * @param {Partial<CSSStyleDeclaration} options and object containing the styles you want to set : {key: value} e.g.: {'display': 'block'}
+   * @returns - Instance of this
+   */
+  setStyle(options) {
+    if (Object.prototype.toString.call(options) !== "[object Object]") {
+      throw new Error(
+        `powerpagestoolkit: 'DOMNodeReference.setStyle' required options to be in the form of an object. Argument passed was of type: ${typeof options}`
+      );
+    }
+    for (const key in options) {
+      this.element.style[key] = options[key];
+    }
+    return this;
+  }
+  /**
+   * Unchecks both the yes and no radio buttons if they exist.
+   * @returns - Instance of this
+   */
+  uncheckRadios() {
+    if (this.yesRadio && this.noRadio) {
+      this.yesRadio.element.checked = false;
+      this.noRadio.element.checked = false;
+    } else {
+      console.error(
+        "[SYNACT] Attempted to uncheck radios for an element that has no radios"
+      );
+    }
+    return this;
+  }
+  /**
+   * Configures conditional rendering for the target element based on a condition
+   * and the visibility of one or more trigger elements.
+   *
+   * @param {(this: DOMNodeReference) => boolean} 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 {Array<DOMNodeReference>} [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.
+   * @returns - Instance of this
+   */
+  configureConditionalRendering(condition, dependencies) {
+    try {
+      this.toggleVisibility(condition());
+      if (!dependencies) {
+        console.warn(
+          `powerpagestoolkit: No dependencies were found when configuring conditional rendering for ${this}. Be sure that if you are referencing other nodes in your rendering logic, that you include those nodes in the dependency array`
+        );
+        return this;
+      }
+      dependencies.forEach((node) => {
+        node.on("change", () => this.toggleVisibility(condition()));
+        const observer = new MutationObserver(() => {
+          const display = window.getComputedStyle(
+            node.visibilityController
+          ).display;
+          this.toggleVisibility(display !== "none" && condition());
+        });
+        observer.observe(node.visibilityController, {
+          attributes: true,
+          attributeFilter: ["style"]
+        });
+      });
+      return this;
+    } catch (e) {
+      throw new ConditionalRenderingError(this, e);
+    }
+  }
+  /**
+   * Sets up validation and requirement rules for the field. This function dynamically updates the field's required status and validates its input based on the specified conditions.
+   *
+   * @param {function(this: DOMNodeReference): boolean} isRequired - A function that determines whether the field should be required. Returns `true` if required, `false` otherwise.
+   * @param {function(this: DOMNodeReference): boolean} isValid - A function that checks if the field's input is valid. Returns `true` if valid, `false` otherwise.
+   * @param {string} fieldDisplayName - The name of the field, used in error messages if validation fails.
+   * @param {Array<DOMNodeReference>} [dependencies] Other fields that this field’s requirement depends on. When these fields change, the required status of this field is re-evaluated. Make sure any DOMNodeReference used in `isRequired` or `isValid` is included in this array.
+   * @returns - Instance of this
+   */
+  configureValidationAndRequirements(isRequired, isValid, fieldDisplayName, dependencies) {
+    if (typeof Page_Validators !== "undefined") {
+      const newValidator = document.createElement("span");
+      newValidator.style.display = "none";
+      newValidator.id = `${this.element.id}Validator`;
+      newValidator.controltovalidate = this.element.id;
+      newValidator.errormessage = `<a href='#${this.element.id}_label'>${fieldDisplayName} is a required field</a>`;
+      newValidator.evaluationfunction = isValid.bind(this);
+      Page_Validators.push(newValidator);
+    } else {
+      throw new Error(
+        "Attempted to add to Validator where Page_Validators do not exist"
+      );
+    }
+    this.setRequiredLevel(isRequired(this));
+    if (!dependencies) {
+      console.warn(
+        `powerpagestoolkit: No dependencies were found when configuring requirement and validation for ${this}. Be sure that if you are referencing other nodes in your requirement or validation logic, that you include those nodes in the dependency array`
+      );
+      return this;
+    }
+    dependencies.forEach((dep) => {
+      dep.element.addEventListener(
+        "change",
+        () => this.setRequiredLevel(isRequired(this))
+      );
+    });
+    return this;
+  }
+  /**
+   * Sets the required level for the field by adding or removing the "required-field" class on the label.
+   *
+   * @param {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
+   */
+  setRequiredLevel(isRequired) {
+    if (isRequired instanceof Function) {
+      isRequired() ? this.getLabel()?.classList.add("required-field") : this.getLabel()?.classList.remove("required-field");
+      return this;
+    } else {
+      isRequired ? this.getLabel()?.classList.add("required-field") : this.getLabel()?.classList.remove("required-field");
+      return this;
+    }
+  }
+  /**
+   * Executes a callback function once the element is fully loaded.
+   * If the element is already loaded, the callback is called immediately.
+   * Otherwise, a MutationObserver is used to detect when the element is added to the DOM.
+   * @param {Function} callback - A callback function to execute once the element is loaded.
+   */
+  onceLoaded(callback) {
+    if (this.isLoaded) {
+      callback(this);
+      return;
+    }
+    if (this.target instanceof HTMLElement) {
+      callback(this);
+      return;
+    }
+    const observer = new MutationObserver(() => {
+      if (document.querySelector(this.target)) {
+        observer.disconnect();
+        this.isLoaded = true;
+        callback(this);
+      }
+    });
+    observer.observe(document.body, {
+      subtree: true,
+      childList: true
+    });
+  }
+};
+
+// src/createDOMNodeReferences.ts
+async function createDOMNodeReference(target) {
+  try {
+    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;
+      }
+    });
+  } 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);
+  }
+}
+
+// src/List.ts
+var _listInit = Symbol("_listInit");
+var List = class extends DOMNodeReference {
+  constructor(target) {
+    super(target);
+    this.listItems = [];
+  }
+  async [_listInit]() {
+    await super[_init]();
+    const li = await createMultipleDOMNodeReferences(
+      "div.ms-DetailsRow-fields"
+    );
+    console.log(li);
+    setTimeout(() => {
+      console.log(li);
+    }, 1e3);
+  }
+};
+
+// src/getList.ts
+async function getList_default() {
+  try {
+    const instance = new List("div.ms-DetailsList");
+    await instance[_listInit]();
+    return new Proxy(instance, {
+      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;
+      }
+    });
+  } catch (e) {
+    throw new Error(e);
+  }
+}
+export {
+  API_default as API,
+  createDOMNodeReference,
+  createMultipleDOMNodeReferences,
+  getList_default as getList
+};
+//# sourceMappingURL=bundle.js.map