abledom 0.0.4 → 0.1.0

package/dist/esm/index.js

@@ -62,9 +62,6 @@ var ui_default = "#abledom-report {\n  bottom: 20px;\n  display: flex;\n  flex-d
 
 // src/ui/domBuilder.ts
 var DOMBuilder = class {
-  // static fromString(parent: HTMLElement | DocumentFragment, html: string): void {
-  //   // const builder = new DOMBuilder(parent);
-  // }
   constructor(parent) {
     __publicField(this, "_doc");
     __publicField(this, "_stack");
@@ -107,8 +104,8 @@ var DOMBuilder = class {
     (_a = this._stack[0]) == null ? void 0 : _a.appendChild(document.createTextNode(text));
     return this;
   }
-  builder(buildDOM) {
-    buildDOM(this._stack[0]);
+  element(callback) {
+    callback(this._stack[0]);
     return this;
   }
 };
@@ -323,7 +320,7 @@ var _NotificationUI = class _NotificationUI {
           );
         };
       }
-    ).builder(log_default).closeTag().openTag(
+    ).element(log_default).closeTag().openTag(
       "button",
       {
         class: "button",
@@ -347,12 +344,20 @@ var _NotificationUI = class _NotificationUI {
           revealButton.style.display = "none";
         }
       }
-    ).builder(reveal_default).closeTag().text(notification.message).openTag("a", {
-      class: "button close",
-      href: "/",
-      title: "Open help",
-      target: "_blank"
-    }).builder(help_default).closeTag().openTag(
+    ).element(reveal_default).closeTag().text(notification.message).openTag(
+      "a",
+      {
+        class: "button close",
+        href: notification.help || "/",
+        title: "Open help",
+        target: "_blank"
+      },
+      (help) => {
+        if (!notification.help) {
+          help.style.display = "none";
+        }
+      }
+    ).element(help_default).closeTag().openTag(
       "button",
       {
         class: "button close",
@@ -365,7 +370,7 @@ var _NotificationUI = class _NotificationUI {
           (_a = _NotificationUI._highlight) == null ? void 0 : _a.hide();
         };
       }
-    ).builder(close_default).closeTag().closeTag().closeTag();
+    ).element(close_default).closeTag().closeTag().closeTag();
   }
   toggle(show, initial = false) {
     var _a;
@@ -401,7 +406,6 @@ var NotificationsUI = class {
     __publicField(this, "_alignBottomRightButton");
     __publicField(this, "_isMuted", false);
     __publicField(this, "_notifications", /* @__PURE__ */ new Set());
-    var _a;
     const container = this._container = win.document.createElement("div");
     container.__abledomui = true;
     container.id = "abledom-report";
@@ -414,83 +418,111 @@ var NotificationsUI = class {
     container.appendChild(notificationsContainer);
     const menuElement = this._menuElement = win.document.createElement("div");
     menuElement.className = "abledom-menu-container";
-    new DOMBuilder(menuElement).openTag("div", { class: "abledom-menu" }).openTag("span", {
-      class: "notifications-count",
-      title: "Number of notifications"
-    }).closeTag().openTag("button", {
-      class: "button",
-      title: "Show all notifications"
-    }).builder(showall_default).closeTag().openTag("button", {
-      class: "button",
-      title: "Hide all notifications"
-    }).builder(hideall_default).closeTag().openTag("button", {
-      class: "button",
-      title: "Mute newly appearing notifications"
-    }).builder(muteall_default).closeTag().openTag("button", {
-      class: "button align-button align-button-first pressed",
-      title: "Attach notifications to bottom left"
-    }).builder(alignbottomleft_default).closeTag().openTag("button", {
-      class: "button align-button",
-      title: "Attach notifications to top left"
-    }).builder(aligntopleft_default).closeTag().openTag("button", {
-      class: "button align-button",
-      title: "Attach notifications to top right"
-    }).builder(aligntopright_default).closeTag().openTag("button", {
-      class: "button align-button align-button-last",
-      title: "Attach notifications to bottom right"
-    }).builder(alignbottomright_default).closeTag().closeTag();
-    const [
-      notificationCountElement,
-      showAllButton,
-      hideAllButton,
-      muteButton,
-      alignBottomLeftButton,
-      alignTopLeftButton,
-      alignTopRightButton,
-      alignBottomRightButton
-    ] = ((_a = menuElement.firstElementChild) == null ? void 0 : _a.childNodes) || [];
-    if (notificationCountElement instanceof HTMLSpanElement && showAllButton instanceof HTMLButtonElement && hideAllButton instanceof HTMLButtonElement && muteButton instanceof HTMLButtonElement && alignBottomLeftButton instanceof HTMLButtonElement && alignTopLeftButton instanceof HTMLButtonElement && alignTopRightButton instanceof HTMLButtonElement && alignBottomRightButton instanceof HTMLButtonElement) {
-      container.appendChild(menuElement);
-      this._notificationCountElement = notificationCountElement;
-      this._showAllButton = showAllButton;
-      this._hideAllButton = hideAllButton;
-      this._alignBottomLeftButton = alignBottomLeftButton;
-      this._alignTopLeftButton = alignTopLeftButton;
-      this._alignTopRightButton = alignTopRightButton;
-      this._alignBottomRightButton = alignBottomRightButton;
-      showAllButton.onclick = () => {
-        this.showAll();
-      };
-      hideAllButton.onclick = () => {
-        this.hideAll();
-      };
-      muteButton.onclick = () => {
-        const isMuted = this._isMuted = muteButton.classList.toggle(pressedClass);
-        if (isMuted) {
-          muteButton.setAttribute(
-            "title",
-            "Unmute newly appearing notifications"
-          );
-        } else {
-          muteButton.setAttribute(
-            "title",
-            "Mute newly appearing notifications"
-          );
-        }
-      };
-      alignBottomLeftButton.onclick = () => {
-        this.setUIAlignment("bottom-left" /* BottomLeft */);
-      };
-      alignBottomRightButton.onclick = () => {
-        this.setUIAlignment("bottom-right" /* BottomRight */);
-      };
-      alignTopLeftButton.onclick = () => {
-        this.setUIAlignment("top-left" /* TopLeft */);
-      };
-      alignTopRightButton.onclick = () => {
-        this.setUIAlignment("top-right" /* TopRight */);
-      };
-    }
+    container.appendChild(menuElement);
+    new DOMBuilder(menuElement).openTag("div", { class: "abledom-menu" }).openTag(
+      "span",
+      {
+        class: "notifications-count",
+        title: "Number of notifications"
+      },
+      (notificationCountElement) => {
+        this._notificationCountElement = notificationCountElement;
+      }
+    ).closeTag().openTag(
+      "button",
+      {
+        class: "button",
+        title: "Show all notifications"
+      },
+      (showAllButton) => {
+        this._showAllButton = showAllButton;
+        showAllButton.onclick = () => {
+          this.showAll();
+        };
+      }
+    ).element(showall_default).closeTag().openTag(
+      "button",
+      {
+        class: "button",
+        title: "Hide all notifications"
+      },
+      (hideAllButton) => {
+        this._hideAllButton = hideAllButton;
+        hideAllButton.onclick = () => {
+          this.hideAll();
+        };
+      }
+    ).element(hideall_default).closeTag().openTag(
+      "button",
+      {
+        class: "button",
+        title: "Mute newly appearing notifications"
+      },
+      (muteButton) => {
+        muteButton.onclick = () => {
+          const isMuted = this._isMuted = muteButton.classList.toggle(pressedClass);
+          if (isMuted) {
+            muteButton.setAttribute(
+              "title",
+              "Unmute newly appearing notifications"
+            );
+          } else {
+            muteButton.setAttribute(
+              "title",
+              "Mute newly appearing notifications"
+            );
+          }
+        };
+      }
+    ).element(muteall_default).closeTag().openTag(
+      "button",
+      {
+        class: "button align-button align-button-first pressed",
+        title: "Attach notifications to bottom left"
+      },
+      (alignBottomLeftButton) => {
+        this._alignBottomLeftButton = alignBottomLeftButton;
+        alignBottomLeftButton.onclick = () => {
+          this.setUIAlignment("bottom-left" /* BottomLeft */);
+        };
+      }
+    ).element(alignbottomleft_default).closeTag().openTag(
+      "button",
+      {
+        class: "button align-button",
+        title: "Attach notifications to top left"
+      },
+      (alignTopLeftButton) => {
+        this._alignTopLeftButton = alignTopLeftButton;
+        alignTopLeftButton.onclick = () => {
+          this.setUIAlignment("top-left" /* TopLeft */);
+        };
+      }
+    ).element(aligntopleft_default).closeTag().openTag(
+      "button",
+      {
+        class: "button align-button",
+        title: "Attach notifications to top right"
+      },
+      (alignTopRightButton) => {
+        this._alignTopRightButton = alignTopRightButton;
+        alignTopRightButton.onclick = () => {
+          this.setUIAlignment("top-right" /* TopRight */);
+        };
+      }
+    ).element(aligntopright_default).closeTag().openTag(
+      "button",
+      {
+        class: "button align-button align-button-last",
+        title: "Attach notifications to bottom right"
+      },
+      (alignBottomRightButton) => {
+        this._alignBottomRightButton = alignBottomRightButton;
+        alignBottomRightButton.onclick = () => {
+          this.setUIAlignment("bottom-right" /* BottomRight */);
+        };
+      }
+    ).element(alignbottomright_default).closeTag().closeTag();
     win.document.body.appendChild(container);
   }
   setUIAlignment(alignment) {
@@ -1346,7 +1378,8 @@ var FocusableElementLabelRule = class extends ValidationRule {
       notification: isElementVisible(element) ? {
         id: "focusable-element-label",
         message: "Focusable element must have a non-empty text label.",
-        element
+        element,
+        help: "https://www.w3.org/WAI/tutorials/forms/labels/"
       } : void 0,
       dependsOnIds: new Set(labelledByValues)
     };