abledom 0.6.1 → 0.6.3

package/dist/index.d.cts

@@ -72,6 +72,7 @@ interface AbleDOMProps {
         onIssueUpdated?(element: HTMLElement, rule: ValidationRule, issue: ValidationIssue): void;
         onIssueRemoved?(element: HTMLElement, rule: ValidationRule): void;
     };
+    exposeInstanceForTesting?: boolean;
 }
 declare class AbleDOM {
     private _win;
@@ -93,6 +94,7 @@ declare class AbleDOM {
     private _idleResolve;
     private _currentAnchoredIssues;
     private _currentNotAnchoredIssues;
+    private _readIssues;
     constructor(win: Window, props?: AbleDOMProps);
     private _onElementId;
     private _getHighlighter;
@@ -109,7 +111,7 @@ declare class AbleDOM {
     private _onFocusOut;
     private _notifyAsync;
     private _getCurrentIssues;
-    idle(): Promise<ValidationIssue[]>;
+    idle(markAsRead?: boolean, timeout?: number): Promise<ValidationIssue[] | null>;
     clearCurrentIssues(anchored?: boolean, notAnchored?: boolean): void;
     highlightElement(element: HTMLElement | null, scrollIntoView?: boolean, autoHideTime?: number): void;
     log: typeof console.error;

package/dist/index.d.ts

@@ -72,6 +72,7 @@ interface AbleDOMProps {
         onIssueUpdated?(element: HTMLElement, rule: ValidationRule, issue: ValidationIssue): void;
         onIssueRemoved?(element: HTMLElement, rule: ValidationRule): void;
     };
+    exposeInstanceForTesting?: boolean;
 }
 declare class AbleDOM {
     private _win;
@@ -93,6 +94,7 @@ declare class AbleDOM {
     private _idleResolve;
     private _currentAnchoredIssues;
     private _currentNotAnchoredIssues;
+    private _readIssues;
     constructor(win: Window, props?: AbleDOMProps);
     private _onElementId;
     private _getHighlighter;
@@ -109,7 +111,7 @@ declare class AbleDOM {
     private _onFocusOut;
     private _notifyAsync;
     private _getCurrentIssues;
-    idle(): Promise<ValidationIssue[]>;
+    idle(markAsRead?: boolean, timeout?: number): Promise<ValidationIssue[] | null>;
     clearCurrentIssues(anchored?: boolean, notAnchored?: boolean): void;
     highlightElement(element: HTMLElement | null, scrollIntoView?: boolean, autoHideTime?: number): void;
     log: typeof console.error;

package/dist/index.js

@@ -99,10 +99,10 @@ var ValidationRule = class {
   }
 };
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/ui.css
+// inline-file:/Users/marata/tmp/abledom/src/ui/ui.css
 var ui_default = "#abledom-report {\n  bottom: 20px;\n  display: flex;\n  flex-direction: column;\n  left: 10px;\n  max-height: 80%;\n  max-width: 60%;\n  padding: 4px 8px;\n  position: fixed;\n  z-index: 100500;\n}\n\n#abledom-report :focus-visible {\n  outline: 3px solid red;\n  mix-blend-mode: difference;\n}\n\n#abledom-report.abledom-align-left {\n  left: 10px;\n  right: auto;\n}\n\n#abledom-report.abledom-align-right {\n  left: auto;\n  right: 10px;\n}\n\n#abledom-report.abledom-align-bottom {\n  bottom: 20px;\n  top: auto;\n}\n\n#abledom-report.abledom-align-top {\n  /* flex-direction: column-reverse; */\n  bottom: auto;\n  top: 10px;\n}\n\n.abledom-menu-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-block;\n  margin: 2px auto 2px 0;\n}\n\n#abledom-report.abledom-align-right .abledom-menu-container {\n  margin: 2px 0 2px auto;\n}\n\n.abledom-menu {\n  background-color: rgba(140, 10, 121, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n\n.abledom-menu .issues-count {\n  margin: 0 8px;\n  display: inline-block;\n}\n\n.abledom-menu .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-menu .align-button {\n  border-right-color: rgba(0, 0, 0, 0.4);\n  border-radius: 0;\n  margin: 0;\n}\n\n.abledom-menu .align-button:active,\n#abledom-report .pressed {\n  background: linear-gradient(\n    180deg,\n    rgba(130, 130, 130, 1) 0%,\n    rgba(180, 180, 180, 1) 100%\n  );\n}\n\n.abledom-menu .align-button-first {\n  border-top-left-radius: 6px;\n  border-bottom-left-radius: 6px;\n  margin-left: 8px;\n}\n.abledom-menu .align-button-last {\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n  border-right-color: rgba(255, 255, 255, 0.4);\n}\n\n.abledom-issues-container {\n  overflow: auto;\n  max-height: calc(100vh - 100px);\n}\n\n#abledom-report.abledom-align-right .abledom-issues-container {\n  text-align: right;\n}\n\n.abledom-issue-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-flex;\n  margin: 2px 0;\n}\n\n.abledom-issue {\n  background-color: rgba(164, 2, 2, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n.abledom-issue_warning {\n  background-color: rgba(163, 82, 1, 0.7);\n}\n.abledom-issue_info {\n  background-color: rgba(0, 0, 255, 0.7);\n}\n\n.abledom-issue .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-issue .button:hover {\n  opacity: 0.7;\n}\n\n.abledom-issue .button.close {\n  background: none;\n  border-color: transparent;\n  color: #fff;\n  margin: 0;\n}\n";
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/highlighter.css
+// inline-file:/Users/marata/tmp/abledom/src/ui/highlighter.css
 var highlighter_default = ".abledom-highlight {\n  background-color: yellow;\n  box-sizing: border-box;\n  display: none;\n  opacity: 0.6;\n  position: fixed;\n  z-index: 100499;\n}\n\n.abledom-highlight-border1 {\n  border-top: 2px solid red;\n  border-bottom: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  top: -2px;\n  width: calc(100% + 20px);\n  height: calc(100% + 4px);\n  margin: 0 -10px;\n}\n\n.abledom-highlight-border2 {\n  border-left: 2px solid red;\n  border-right: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  width: calc(100% + 4px);\n  left: -2px;\n  height: calc(100% + 20px);\n  margin: -10px 0;\n}\n";
 
 // src/ui/domBuilder.ts
@@ -160,7 +160,7 @@ var DOMBuilder = class {
   }
 };
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/close.svg
+// inline-file:/Users/marata/tmp/abledom/src/ui/close.svg
 var close_default = (function buildSVG(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
@@ -174,7 +174,7 @@ var close_default = (function buildSVG(parent) {
   return parent.firstElementChild;
 });
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/help.svg
+// inline-file:/Users/marata/tmp/abledom/src/ui/help.svg
 var help_default = (function buildSVG2(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
@@ -188,7 +188,7 @@ var help_default = (function buildSVG2(parent) {
   return parent.firstElementChild;
 });
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/log.svg
+// inline-file:/Users/marata/tmp/abledom/src/ui/log.svg
 var log_default = (function buildSVG3(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
@@ -200,7 +200,7 @@ var log_default = (function buildSVG3(parent) {
   return parent.firstElementChild;
 });
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/reveal.svg
+// inline-file:/Users/marata/tmp/abledom/src/ui/reveal.svg
 var reveal_default = (function buildSVG4(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
@@ -218,7 +218,7 @@ var reveal_default = (function buildSVG4(parent) {
   return parent.firstElementChild;
 });
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/bug.svg
+// inline-file:/Users/marata/tmp/abledom/src/ui/bug.svg
 var bug_default = (function buildSVG5(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
@@ -246,7 +246,7 @@ var bug_default = (function buildSVG5(parent) {
   return parent.firstElementChild;
 });
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/hideall.svg
+// inline-file:/Users/marata/tmp/abledom/src/ui/hideall.svg
 var hideall_default = (function buildSVG6(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
@@ -260,7 +260,7 @@ var hideall_default = (function buildSVG6(parent) {
   return parent.firstElementChild;
 });
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/muteall.svg
+// inline-file:/Users/marata/tmp/abledom/src/ui/muteall.svg
 var muteall_default = (function buildSVG7(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
@@ -276,7 +276,7 @@ var muteall_default = (function buildSVG7(parent) {
   return parent.firstElementChild;
 });
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/showall.svg
+// inline-file:/Users/marata/tmp/abledom/src/ui/showall.svg
 var showall_default = (function buildSVG8(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
@@ -288,7 +288,7 @@ var showall_default = (function buildSVG8(parent) {
   return parent.firstElementChild;
 });
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/aligntopleft.svg
+// inline-file:/Users/marata/tmp/abledom/src/ui/aligntopleft.svg
 var aligntopleft_default = (function buildSVG9(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
@@ -298,7 +298,7 @@ var aligntopleft_default = (function buildSVG9(parent) {
   return parent.firstElementChild;
 });
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/aligntopright.svg
+// inline-file:/Users/marata/tmp/abledom/src/ui/aligntopright.svg
 var aligntopright_default = (function buildSVG10(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
@@ -308,7 +308,7 @@ var aligntopright_default = (function buildSVG10(parent) {
   return parent.firstElementChild;
 });
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/alignbottomright.svg
+// inline-file:/Users/marata/tmp/abledom/src/ui/alignbottomright.svg
 var alignbottomright_default = (function buildSVG11(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
@@ -318,7 +318,7 @@ var alignbottomright_default = (function buildSVG11(parent) {
   return parent.firstElementChild;
 });
 
-// inline-file:/Users/marata/Documents/Work/abledom/src/ui/alignbottomleft.svg
+// inline-file:/Users/marata/tmp/abledom/src/ui/alignbottomleft.svg
 var alignbottomleft_default = (function buildSVG12(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
@@ -1100,6 +1100,7 @@ var AbleDOM = class {
     __publicField(this, "_idleResolve");
     __publicField(this, "_currentAnchoredIssues", /* @__PURE__ */ new Map());
     __publicField(this, "_currentNotAnchoredIssues", []);
+    __publicField(this, "_readIssues", /* @__PURE__ */ new Set());
     __publicField(this, "_getHighlighter", () => {
       if (!this._elementHighlighter && !this._isDisposed) {
         this._elementHighlighter = new ElementHighlighter(this._win);
@@ -1141,6 +1142,9 @@ var AbleDOM = class {
       ((_c = (_b = this._win) == null ? void 0 : _b.console) == null ? void 0 : _c.error)) == null ? void 0 : _d.apply(null, args);
     });
     this._win = win;
+    if (props.exposeInstanceForTesting) {
+      this._win.ableDOMInstanceForTesting = this;
+    }
     this._props = props;
     const _elementsToValidate = /* @__PURE__ */ new Set();
     const _elementsToRemove = /* @__PURE__ */ new Set();
@@ -1456,29 +1460,60 @@ var AbleDOM = class {
       rules.forEach((rule) => this._removeIssue(element, rule));
     });
   }
-  _getCurrentIssues() {
-    const issues = this._currentNotAnchoredIssues.slice(0);
+  _getCurrentIssues(markAsRead) {
+    const issues = [];
+    this._currentNotAnchoredIssues.forEach((issue) => {
+      if (!this._readIssues.has(issue)) {
+        issues.push(issue);
+      }
+      if (markAsRead) {
+        this._readIssues.add(issue);
+      }
+    });
     this._currentAnchoredIssues.forEach((issueByRule) => {
       issueByRule.forEach((issue) => {
-        issues.push(issue);
+        if (!this._readIssues.has(issue)) {
+          issues.push(issue);
+        }
+        if (markAsRead) {
+          this._readIssues.add(issue);
+        }
       });
     });
     return issues;
   }
-  idle() {
+  idle(markAsRead, timeout) {
     if (!this._clearValidationTimeout) {
-      return Promise.resolve(this._getCurrentIssues());
-    }
+      return Promise.resolve(this._getCurrentIssues(!!markAsRead));
+    }
+    let timeoutClear;
+    let timeoutResolve;
+    let timeoutPromise = timeout ? new Promise((resolve) => {
+      timeoutResolve = () => {
+        timeoutClear == null ? void 0 : timeoutClear();
+        timeoutResolve = void 0;
+        resolve(null);
+      };
+      let timeoutTimer = this._win.setTimeout(() => {
+        timeoutClear = void 0;
+        timeoutResolve == null ? void 0 : timeoutResolve();
+      }, timeout);
+      timeoutClear = () => {
+        this._win.clearTimeout(timeoutTimer);
+        timeoutClear = void 0;
+      };
+    }) : void 0;
     if (!this._idlePromise) {
       this._idlePromise = new Promise((resolve) => {
         this._idleResolve = () => {
           delete this._idlePromise;
           delete this._idleResolve;
-          resolve(this._getCurrentIssues());
+          resolve(this._getCurrentIssues(!!markAsRead));
+          timeoutResolve == null ? void 0 : timeoutResolve();
         };
       });
     }
-    return this._idlePromise;
+    return timeoutPromise ? Promise.race([this._idlePromise, timeoutPromise]) : this._idlePromise;
   }
   clearCurrentIssues(anchored = true, notAnchored = true) {
     if (anchored) {