abledom 0.2.0 → 0.3.1

package/dist/esm/index.js

@@ -58,7 +58,7 @@ var ValidationRule = class {
 };
 
 // inline-file:/Users/marata/Documents/Work/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: absolute;\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 .notifications-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-notifications-container {\n  overflow: scroll;\n  max-height: calc(100vh - 100px);\n}\n\n#abledom-report.abledom-align-right .abledom-notifications-container {\n  text-align: right;\n}\n\n.abledom-notification-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-notification {\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-notification_warning {\n  background-color: rgba(163, 82, 1, 0.7);\n}\n.abledom-notification_info {\n  background-color: rgba(0, 0, 255, 0.7);\n}\n\n.abledom-notification .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-notification .button:hover {\n  opacity: 0.7;\n}\n\n.abledom-notification .button.close {\n  background: none;\n  border-color: transparent;\n  color: #fff;\n  margin: 0;\n}\n\n.abledom-highlight {\n  background-color: yellow;\n  border: 1px solid red;\n  box-sizing: border-box;\n  display: none;\n  opacity: 0.6;\n  position: absolute;\n  z-index: 100499;\n}\n";
+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 .notifications-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-notifications-container {\n  overflow: scroll;\n  max-height: calc(100vh - 100px);\n}\n\n#abledom-report.abledom-align-right .abledom-notifications-container {\n  text-align: right;\n}\n\n.abledom-notification-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-notification {\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-notification_warning {\n  background-color: rgba(163, 82, 1, 0.7);\n}\n.abledom-notification_info {\n  background-color: rgba(0, 0, 255, 0.7);\n}\n\n.abledom-notification .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-notification .button:hover {\n  opacity: 0.7;\n}\n\n.abledom-notification .button.close {\n  background: none;\n  border-color: transparent;\n  color: #fff;\n  margin: 0;\n}\n\n.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
 var DOMBuilder = class {
@@ -173,8 +173,36 @@ var reveal_default = function buildSVG4(parent) {
   return parent.firstElementChild;
 };
 
+// inline-file:/Users/marata/Documents/Work/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");
+  builder.openTag("ellipse", { "cx": "10", "cy": "12", "rx": "4", "ry": "5", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("circle", { "cx": "10", "cy": "5.5", "r": "2", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "6.5", "y1": "10", "x2": "3.5", "y2": "7", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "13.5", "y1": "10", "x2": "16.5", "y2": "7", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "6", "y1": "13", "x2": "3.5", "y2": "13", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "14", "y1": "13", "x2": "16.5", "y2": "13", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "6.5", "y1": "16", "x2": "3.5", "y2": "19", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "13.5", "y1": "16", "x2": "16.5", "y2": "19", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "9", "y1": "3.5", "x2": "7.5", "y2": "2", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "11", "y1": "3.5", "x2": "12.5", "y2": "2", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.closeTag();
+  return parent.firstElementChild;
+};
+
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/hideall.svg
-var hideall_default = function buildSVG5(parent) {
+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");
   builder.openTag("path", { "d": "M11.44 17.5a1.67 1.67 0 0 1-2.89 0", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
@@ -188,7 +216,7 @@ var hideall_default = function buildSVG5(parent) {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/muteall.svg
-var muteall_default = function buildSVG6(parent) {
+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");
   builder.openTag("path", { "d": "M11.44 17.5a1.67 1.67 0 0 1-2.89 0", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
@@ -204,7 +232,7 @@ var muteall_default = function buildSVG6(parent) {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/showall.svg
-var showall_default = function buildSVG7(parent) {
+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");
   builder.openTag("path", { "d": "M11.44 17.5a1.67 1.67 0 0 1-2.89 0", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
@@ -216,7 +244,7 @@ var showall_default = function buildSVG7(parent) {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/aligntopleft.svg
-var aligntopleft_default = function buildSVG8(parent) {
+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");
   builder.openTag("rect", { "x": "3", "y": "3", "width": "6", "height": "6", "stroke-width": "2" }, void 0, "http://www.w3.org/2000/svg");
@@ -226,7 +254,7 @@ var aligntopleft_default = function buildSVG8(parent) {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/aligntopright.svg
-var aligntopright_default = function buildSVG9(parent) {
+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");
   builder.openTag("rect", { "x": "11", "y": "3", "width": "6", "height": "6", "stroke-width": "2" }, void 0, "http://www.w3.org/2000/svg");
@@ -236,7 +264,7 @@ var aligntopright_default = function buildSVG9(parent) {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/alignbottomright.svg
-var alignbottomright_default = function buildSVG10(parent) {
+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");
   builder.openTag("rect", { "x": "11", "y": "11", "width": "6", "height": "6", "stroke-width": "2" }, void 0, "http://www.w3.org/2000/svg");
@@ -246,7 +274,7 @@ var alignbottomright_default = function buildSVG10(parent) {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/alignbottomleft.svg
-var alignbottomleft_default = function buildSVG11(parent) {
+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");
   builder.openTag("rect", { "x": "3", "y": "11", "width": "6", "height": "6", "stroke-width": "2" }, void 0, "http://www.w3.org/2000/svg");
@@ -259,14 +287,12 @@ var alignbottomleft_default = function buildSVG11(parent) {
 var pressedClass = "pressed";
 var NotificationUI = class {
   constructor(win, core, rule, notificationsUI) {
-    __publicField(this, "_win");
     __publicField(this, "_core");
     __publicField(this, "_notificationsUI");
     __publicField(this, "_wrapper");
     __publicField(this, "_rule");
     __publicField(this, "_onToggle");
     __publicField(this, "isHidden", false);
-    this._win = win;
     this._core = core;
     this._rule = rule;
     this._notificationsUI = notificationsUI;
@@ -282,7 +308,6 @@ var NotificationUI = class {
     return instance._wrapper;
   }
   update(notification) {
-    const win = this._win;
     const rule = this._rule;
     const wrapper = this._wrapper;
     const element = notification.element;
@@ -292,11 +317,11 @@ var NotificationUI = class {
       "div",
       { class: "abledom-notification-container" },
       (container) => {
-        container.onmouseover = () => {
+        container.onmouseenter = () => {
           var _a;
           element && ((_a = this._notificationsUI) == null ? void 0 : _a.highlight(element));
         };
-        container.onmouseout = () => {
+        container.onmouseleave = () => {
           var _a;
           (_a = this._notificationsUI) == null ? void 0 : _a.highlight(null);
         };
@@ -330,28 +355,43 @@ var NotificationUI = class {
       "button",
       {
         class: "button",
-        title: "Reveal in Elements panel"
+        // title: "Reveal in Elements panel",
+        title: "Scroll element into view"
       },
       (revealButton) => {
-        var _a;
-        const body = win.document.body;
-        const hasDevTools = !!((_a = win.__ableDOMDevtools) == null ? void 0 : _a.revealElement) && false;
-        if (hasDevTools && element && body.contains(element)) {
+        const element2 = notification.element;
+        if (element2) {
           revealButton.onclick = () => {
-            var _a2;
-            const revealElement = (_a2 = win.__ableDOMDevtools) == null ? void 0 : _a2.revealElement;
-            if (revealElement && body.contains(element)) {
-              revealElement(element).then((revealed) => {
-                if (!revealed) {
-                }
-              });
-            }
+            var _a;
+            element2.scrollIntoView({ block: "center" });
+            (_a = this._notificationsUI) == null ? void 0 : _a.highlight(element2);
           };
         } else {
           revealButton.style.display = "none";
         }
       }
-    ).element(reveal_default).closeTag().text(notification.message).openTag(
+    ).element(reveal_default).closeTag().openTag(
+      "button",
+      {
+        class: "button",
+        title: "Report bug"
+      },
+      (bugReportButton) => {
+        var _a, _b;
+        const bugReport = (_a = this._notificationsUI) == null ? void 0 : _a.bugReport;
+        if (bugReport == null ? void 0 : bugReport.isVisible(notification)) {
+          const title = (_b = bugReport.getTitle) == null ? void 0 : _b.call(bugReport, notification);
+          if (title) {
+            bugReportButton.title = title;
+          }
+          bugReportButton.onclick = () => {
+            bugReport.onClick(notification);
+          };
+        } else {
+          bugReportButton.style.display = "none";
+        }
+      }
+    ).element(bug_default).closeTag().text(notification.message).openTag(
       "a",
       {
         class: "button close",
@@ -398,7 +438,7 @@ var NotificationUI = class {
   }
 };
 var NotificationsUI = class {
-  constructor(win) {
+  constructor(win, props) {
     __publicField(this, "_container");
     __publicField(this, "_notificationsContainer");
     __publicField(this, "_menuElement");
@@ -412,6 +452,8 @@ var NotificationsUI = class {
     __publicField(this, "_isMuted", false);
     __publicField(this, "_notifications", /* @__PURE__ */ new Set());
     __publicField(this, "_highlighter");
+    __publicField(this, "bugReport");
+    this.bugReport = props.bugReport;
     const doc = win.document;
     const container = this._container = doc.createElement("div");
     container.__abledomui = true;
@@ -678,39 +720,80 @@ var ElementHighlighter = class {
   constructor(win) {
     __publicField(this, "_window");
     __publicField(this, "_container");
+    __publicField(this, "_element");
+    __publicField(this, "_cancelScrollTimer");
+    __publicField(this, "_intersectionObserver");
+    __publicField(this, "_onScroll", () => {
+      var _a;
+      (_a = this._cancelScrollTimer) == null ? void 0 : _a.call(this);
+      this._hide();
+      const win = this._window;
+      if (win) {
+        const scrollTimer = win.setTimeout(() => {
+          delete this._cancelScrollTimer;
+          this.highlight(this._element || null);
+        }, 100);
+        this._cancelScrollTimer = () => {
+          delete this._cancelScrollTimer;
+          win.clearTimeout(scrollTimer);
+        };
+      }
+    });
     this._window = win;
     const container = this._container = win.document.createElement("div");
     container.__abledomui = true;
     container.className = "abledom-highlight";
+    new DOMBuilder(container).openTag("div", { class: "abledom-highlight-border1" }).closeTag().openTag("div", { class: "abledom-highlight-border2" }).closeTag();
+    win.addEventListener("scroll", this._onScroll, true);
   }
   highlight(element) {
     if (!element) {
-      this._container && (this._container.style.display = "none");
+      delete this._element;
+      this._unobserve();
+      this._hide();
       return;
     }
     const win = this._window;
     const container = this._container;
-    const rect = element.getBoundingClientRect();
-    if (!win || !container || rect.width === 0 || rect.height === 0) {
+    if (!win || !container) {
       return;
     }
-    const body = win.document.body;
-    const style = container.style;
-    if (container.parentElement !== body) {
-      body.appendChild(container);
-    }
-    style.width = `${rect.width}px`;
-    style.height = `${rect.height}px`;
-    style.top = `${rect.top}px`;
-    style.left = `${rect.left}px`;
-    container.style.display = "block";
+    this._element = element;
+    this._intersectionObserver = new IntersectionObserver(([entry]) => {
+      if (entry) {
+        const rect = entry.boundingClientRect;
+        const body = win.document.body;
+        const style = container.style;
+        if (container.parentElement !== body) {
+          body.appendChild(container);
+        }
+        style.width = `${rect.width}px`;
+        style.height = `${rect.height}px`;
+        style.top = `${rect.top}px`;
+        style.left = `${rect.left}px`;
+        container.style.display = "block";
+      }
+    });
+    this._intersectionObserver.observe(element);
   }
   dispose() {
-    var _a;
-    (_a = this._container) == null ? void 0 : _a.remove();
+    var _a, _b, _c;
+    this._unobserve();
+    (_a = this._cancelScrollTimer) == null ? void 0 : _a.call(this);
+    (_b = this._window) == null ? void 0 : _b.removeEventListener("scroll", this._onScroll, true);
+    (_c = this._container) == null ? void 0 : _c.remove();
+    delete this._element;
     delete this._container;
     delete this._window;
   }
+  _hide() {
+    this._container && (this._container.style.display = "none");
+  }
+  _unobserve() {
+    var _a;
+    (_a = this._intersectionObserver) == null ? void 0 : _a.disconnect();
+    delete this._intersectionObserver;
+  }
 };
 function isAbleDOMUIElement(element) {
   for (let el = element; el; el = el.parentElement) {
@@ -1083,8 +1166,11 @@ var AbleDOM = class {
     }
   }
   _addNotification(rule, notification) {
+    var _a;
     if (!this._notificationsUI) {
-      this._notificationsUI = new NotificationsUI(this._win);
+      this._notificationsUI = new NotificationsUI(this._win, {
+        bugReport: (_a = this._props) == null ? void 0 : _a.bugReport
+      });
     }
     const element = notification == null ? void 0 : notification.element;
     if (!notification) {