powerpagestoolkit 2.3.101 → 2.3.311

package/dist/DOMNodeReference.d.ts

@@ -40,7 +40,6 @@ export declare const _init: unique symbol;
     [_init](): Promise<void>;
     private _initValueSync;
     updateValue(): void;
-    private _observeValueChanges;
     private _attachVisibilityController;
     private _attachRadioButtons;
     /**
@@ -71,12 +70,12 @@ export declare const _init: unique symbol;
     toggleVisibility(shouldShow: Function | boolean): DOMNodeReference;
     /**
      * Sets the value of the HTML element.
-     * @param {() => any} value - The value to set for the HTML element.
+     * @param {(() => any) | 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: any): DOMNodeReference;
+    setValue(value: (() => any) | any): DOMNodeReference;
     /**
      * Disables the element so that users cannot input any data
      * @returns - Instance of this
@@ -182,11 +181,11 @@ export declare const _init: unique symbol;
     /**
      * 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.
+     * @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
      */
-    setRequiredLevel(isRequired: Function | boolean): DOMNodeReference;
+    setRequiredLevel(isRequired: (() => boolean) | boolean): DOMNodeReference;
     /**
      * Executes a callback function once the element is fully loaded.
      * If the element is already loaded, the callback is called immediately.

package/dist/bundle.css

@@ -0,0 +1,35 @@
+/* src/style.css */
+.info-icon {
+  position: relative;
+  display: inline-block;
+}
+.info-icon .fa-info-circle {
+  cursor: pointer;
+}
+.info-icon .flyout-content {
+  max-width: calc(100vw - 20px);
+  display: none;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #f9f9f9;
+  padding: 10px;
+  border: 1px solid #ddd;
+  z-index: 1;
+  min-width: 200px;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+@media (max-width: 600px) {
+  .info-icon .flyout-content {
+    max-width: 95vw;
+    padding: 12px;
+    font-size: 0.9em;
+    display: block;
+    right: auto;
+  }
+}
+.required-field::after {
+  content: " *" !important;
+  color: #f00 !important;
+}

package/dist/bundle.js

@@ -257,14 +257,10 @@ var DOMNodeReference = class _DOMNodeReference {
     } else {
       this.element.addEventListener("input", this.updateValue.bind(this));
     }
-    this._observeValueChanges();
   }
   updateValue() {
     switch (this.element.type) {
       case "checkbox":
-        this.value = +this.element.checked;
-        this.checked = this.element.checked;
-        break;
       case "radio":
         this.value = this.element.checked;
         this.checked = this.element.checked;
@@ -276,6 +272,7 @@ var DOMNodeReference = class _DOMNodeReference {
         break;
       case "select-one":
         this.value = this.element.value;
+        break;
       case "number":
         this.value = this.element.value !== "" ? Number(this.element.value) : null;
         break;
@@ -287,19 +284,9 @@ var DOMNodeReference = class _DOMNodeReference {
       this.yesRadio.updateValue();
       this.noRadio.updateValue();
       this.checked = this.yesRadio.checked;
-      this.value = +this.yesRadio.checked;
+      this.value = this.yesRadio.checked;
     }
   }
-  // Add a method to observe value changes using MutationObserver
-  _observeValueChanges() {
-    const observer = new MutationObserver(() => {
-      this.updateValue();
-    });
-    observer.observe(this.element, {
-      attributes: true,
-      attributeFilter: ["value"]
-    });
-  }
   _attachVisibilityController() {
     this.visibilityController = this.element;
     if (this.element.tagName === "TABLE") {
@@ -371,12 +358,15 @@ var DOMNodeReference = class _DOMNodeReference {
   }
   /**
    * Sets the value of the HTML element.
-   * @param {() => any} value - The value to set for the HTML element.
+   * @param {(() => any) | 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 (value instanceof Function) {
+      value = value();
+    }
     if (this.element.classList.contains("boolean-radio")) {
       this.yesRadio.element.checked = value;
       this.noRadio.element.checked = !value;
@@ -614,7 +604,7 @@ var DOMNodeReference = class _DOMNodeReference {
   /**
    * 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.
+   * @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
    */
@@ -702,4 +692,11 @@ export {
   createDOMNodeReference,
   createMultipleDOMNodeReferences
 };
-//# sourceMappingURL=bundle.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  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/index.d.ts

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

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "powerpagestoolkit",
-  "version": "2.3.101",
+  "version": "2.3.311",
   "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",
   "scripts": {
     "typecheck": "tsc",
-    "build": "node build.js",
+    "node:build": "node build.js",
     "build:types": "tsc --emitDeclarationOnly --declaration",
-    "build:all": "npm run typecheck && npm run build && npm run build:types",
+    "build": "npm run typecheck && npm run node:build && npm run build:types",
     "dev": "tsc --watch"
   },
   "devDependencies": {
@@ -55,6 +55,7 @@
   ],
   "files": [
     "dist/bundle.js",
+    "dist/bundle.css",
     "dist/**/*.d.ts"
   ],
   "exports": {
@@ -65,6 +66,9 @@
     "./createDOMNodeReference": {
       "import": "./dist/createDOMNodeReference.js",
       "types": "./dist/createDOMNodeReference.d.ts"
+    },
+    "./style.css": {
+      "import": "./dist/bundle.css"
     }
   }
 }