@pacem/pacem-ui 1.0.0-euler → 1.0.0-galois

package/dist/bundle/pacem-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-ui v1.0.0-euler (https://js.pacem.it)
+ * @pacem/pacem-ui v1.0.0-galois (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -4523,40 +4523,14 @@ var PacemMenuCursorElement = PacemMenuCursorElement_1 = class PacemMenuCursorEle
   constructor() {
     super(...arguments);
     this._onPathChange = (evt) => {
-      const menu = this._menu, path = evt && evt.detail || window.location.pathname;
-      if (Utils20.isNull(menu)) {
-        this.log(Logging2.LogLevel.Warn, `Couldn't find a ${PacemMenuElement} ancestor for this ${PacemMenuCursorElement_1}.`);
-        return;
-      }
-      var anchors = menu.querySelectorAll(P22 + "-a");
-      var tget = null;
-      for (let j = 0; j < anchors.length; j++) {
-        let a = anchors.item(j);
-        if (a.href === path) {
-          tget = a;
-          break;
-        }
-      }
-      if (Utils20.isNull(tget)) {
-        tget = menu.querySelector(`a[href='${path}']`);
-      }
-      if (!Utils20.isNull(tget)) {
-        const rect = Utils20.offset(tget);
-        const rectMenu = Utils20.offset(menu);
-        this.style.top = rect.top + "px";
-        this.style.left = rectMenu.left + "px";
-        this.style.width = "0";
-        this.style.height = rect.height + "px";
-        Utils20.addAnimationEndCallback(this, () => {
-          this.style.width = rect.width + rect.left - rectMenu.left + "px";
-        }, 500);
-      }
+      const path = evt?.detail.path;
+      this._findAnchorAndScrollItIntoView(path);
     };
   }
   viewActivatedCallback() {
     super.viewActivatedCallback();
     this._menu = CustomElementUtils6.findAncestorOfType(this, PacemMenuElement);
-    this._onPathChange();
+    this._findAnchorAndScrollItIntoView();
   }
   connectedCallback() {
     super.connectedCallback();
@@ -4567,6 +4541,47 @@ var PacemMenuCursorElement = PacemMenuCursorElement_1 = class PacemMenuCursorEle
     window.removeEventListener("navigate", this._onPathChange, false);
     super.disconnectedCallback();
   }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (first) {
+      return;
+    }
+    switch (name) {
+      case "disabled":
+        this._findAnchorAndScrollItIntoView();
+        break;
+    }
+  }
+  _findAnchorAndScrollItIntoView(path = window.location.pathname) {
+    if (this.disabled) {
+      return;
+    }
+    const menu = this._menu;
+    if (Utils20.isNull(menu)) {
+      this.log(Logging2.LogLevel.Warn, `Couldn't find a ${PacemMenuElement} ancestor for this ${PacemMenuCursorElement_1}.`);
+      return;
+    }
+    const anchors = menu.querySelectorAll(P22 + "-a");
+    let tget = null;
+    for (let j = 0; j < anchors.length; j++) {
+      const a = anchors.item(j);
+      const router = a.router;
+      let href = Utils20.isNull(router) ? a.href : (
+        /* build fully formatted href, it might contain placeholders */
+        Utils20.URIs.format(a.href, router.state)
+      );
+      if (href === path) {
+        tget = a;
+        break;
+      }
+    }
+    if (Utils20.isNull(tget)) {
+      tget = menu.querySelector(`a[href='${path}']`);
+    }
+    if (!Utils20.isNull(tget)) {
+      tget.scrollIntoView({ behavior: "smooth" });
+    }
+  }
 };
 PacemMenuCursorElement = PacemMenuCursorElement_1 = __decorate23([
   CustomElement21({