@pacem/pacem 1.0.0-euler → 1.0.0-galois

package/dist/bundle/pacem.mjs

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem v1.0.0-euler (https://js.pacem.it)
+ * @pacem/pacem v1.0.0-galois (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -20125,40 +20125,14 @@ var PacemMenuCursorElement = class extends Components24.PacemElement {
   constructor() {
     super(...arguments);
     this._onPathChange = (evt) => {
-      const menu = this._menu, path = evt && evt.detail || window.location.pathname;
-      if (Utils36.isNull(menu)) {
-        this.log(Logging5.LogLevel.Warn, `Couldn't find a ${PacemMenuElement} ancestor for this ${PacemMenuCursorElement}.`);
-        return;
-      }
-      var anchors = menu.querySelectorAll(P27 + "-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 (Utils36.isNull(tget)) {
-        tget = menu.querySelector(`a[href='${path}']`);
-      }
-      if (!Utils36.isNull(tget)) {
-        const rect = Utils36.offset(tget);
-        const rectMenu = Utils36.offset(menu);
-        this.style.top = rect.top + "px";
-        this.style.left = rectMenu.left + "px";
-        this.style.width = "0";
-        this.style.height = rect.height + "px";
-        Utils36.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 = CustomElementUtils8.findAncestorOfType(this, PacemMenuElement);
-    this._onPathChange();
+    this._findAnchorAndScrollItIntoView();
   }
   connectedCallback() {
     super.connectedCallback();
@@ -20169,6 +20143,47 @@ var PacemMenuCursorElement = class extends Components24.PacemElement {
     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 (Utils36.isNull(menu)) {
+      this.log(Logging5.LogLevel.Warn, `Couldn't find a ${PacemMenuElement} ancestor for this ${PacemMenuCursorElement}.`);
+      return;
+    }
+    const anchors = menu.querySelectorAll(P27 + "-a");
+    let tget = null;
+    for (let j = 0; j < anchors.length; j++) {
+      const a = anchors.item(j);
+      const router = a.router;
+      let href = Utils36.isNull(router) ? a.href : (
+        /* build fully formatted href, it might contain placeholders */
+        Utils36.URIs.format(a.href, router.state)
+      );
+      if (href === path) {
+        tget = a;
+        break;
+      }
+    }
+    if (Utils36.isNull(tget)) {
+      tget = menu.querySelector(`a[href='${path}']`);
+    }
+    if (!Utils36.isNull(tget)) {
+      tget.scrollIntoView({ behavior: "smooth" });
+    }
+  }
 };
 PacemMenuCursorElement = __decorateClass([
   CustomElement26({
@@ -27257,8 +27272,9 @@ var PacemHierarchyElement = class extends PacemBaseElement {
     return new Promise((resolve, reject) => {
       if (CustomEventUtils5.isInstanceOf(evt, HierarchyChangeEvent)) {
         resolve(this.value = evt.detail);
+      } else {
+        resolve(this.value);
       }
-      resolve(this.value);
     });
   }
   acceptValue(val) {
@@ -27297,6 +27313,7 @@ var PacemHierarchyElement = class extends PacemBaseElement {
     }
   }
   disconnectedCallback() {
+    this._disposeBindersAndTargets();
     this._disposeDragger();
     this._disposeBalloon();
     super.disconnectedCallback();
@@ -27355,36 +27372,71 @@ var PacemHierarchyElement = class extends PacemBaseElement {
     } else {
       item.setAttribute("behaviors", "{{ [#" + this._dragger.id + ", #" + this._dragger2.id + "] }}");
     }
+    const bindings = __privateGet(this, _bindings);
+    const bindingKey = hierarchyItem.value;
+    let binders;
+    if (!bindings.has(bindingKey)) {
+      bindings.set(bindingKey, binders = /* @__PURE__ */ new Map());
+    } else {
+      binders = bindings.get(bindingKey);
+    }
     for (let parent of hierarchyItem.parents || []) {
-      const binder = new ComponentsUI3.UI.PacemBinderElement();
-      binder.to = item;
+      const binderKey = parent.value;
+      const newBinder = !binders.has(binderKey);
+      const binder = newBinder ? new ComponentsUI3.UI.PacemBinderElement() : binders.get(binderKey);
+      binder.fromAnchor = ComponentsUI3.UI.BinderAnchor.Bottom;
       binder.toAnchor = ComponentsUI3.UI.BinderAnchor.Top;
       binder.toEnd = ComponentsUI3.UI.BinderEnd.Arrow;
       binder.setAttribute("from", "{{ #" + this._buildHierarchyItemDomId(parent.value) + " }}");
-      binder.fromAnchor = ComponentsUI3.UI.BinderAnchor.Bottom;
+      binder.setAttribute("to", "{{ #" + item.id + " }}");
       binder.cssClass = ["hierarchy-binder"];
-      binder.interactive = !this.readonly && !hierarchyItem.disabled && !parent.disabled;
-      binder.addEventListener(ComponentsUI3.UI.BinderInteractionEventName, this._binderClickHandler, false);
       binder.dataset[BINDER_HIERARCHYDATAKEY] = JSON.stringify({ parent: parent.value, child: hierarchyItem.value });
-      __privateGet(this, _bindings).set(hierarchyItem.value, binder);
-      __privateGet(this, _shell4).appendChild(binder);
+      binder.interactive = !this.readonly && !hierarchyItem.disabled && !parent.disabled;
+      if (newBinder) {
+        binder.addEventListener(ComponentsUI3.UI.BinderInteractionEventName, this._binderClickHandler, false);
+        __privateGet(this, _shell4).appendChild(binder);
+        binders.set(binderKey, binder);
+      }
+    }
+    for (let binderKey of binders.keys()) {
+      const found = hierarchyItem.parents.find((p) => p.value === binderKey);
+      if (!Utils71.isNull(found)) {
+        continue;
+      }
+      const binder = binders.get(binderKey);
+      binder.removeEventListener(ComponentsUI3.UI.BinderInteractionEventName, this._binderClickHandler);
+      binder.remove();
+      binders.delete(binderKey);
     }
     if (!__privateGet(this, _dropTargets).has(item)) {
       __privateGet(this, _dropTargets).set(item, hierarchyItem);
     }
   }
   _itemRemove(evt) {
-    const item = evt.detail.dom.find((i) => i instanceof HTMLElement && i.classList.contains(HIERARCHYITEM_CSSCLASS)), hierarchyItem = evt.detail.item, bindings = __privateGet(this, _bindings);
-    if (bindings.has(hierarchyItem.value)) {
-      const binder = bindings.get(hierarchyItem.value);
-      binder.removeEventListener(ComponentsUI3.UI.BinderInteractionEventName, this._binderClickHandler, false);
-      binder.remove();
-      bindings.delete(hierarchyItem.value);
-    }
+    const item = evt.detail.dom.find((i) => i instanceof HTMLElement && i.classList.contains(HIERARCHYITEM_CSSCLASS)), hierarchyItem = evt.detail.item;
+    this._disposeBinders(hierarchyItem.value);
     if (__privateGet(this, _dropTargets).has(item)) {
       __privateGet(this, _dropTargets).delete(item);
     }
   }
+  _disposeBinders(bindingKey) {
+    const bindings = __privateGet(this, _bindings);
+    if (bindings.has(bindingKey)) {
+      const binders = bindings.get(bindingKey);
+      for (let binderKey of binders.keys()) {
+        const binder = binders.get(binderKey);
+        binder.removeEventListener(ComponentsUI3.UI.BinderInteractionEventName, this._binderClickHandler, false);
+        binder.remove();
+      }
+      bindings.delete(bindingKey);
+    }
+  }
+  _disposeBindersAndTargets() {
+    for (let bindingKey of __privateGet(this, _bindings).keys()) {
+      this._disposeBinders(bindingKey);
+    }
+    __privateGet(this, _dropTargets).clear();
+  }
   _setupItemTemplate() {
     if (this.itemtemplate instanceof HTMLTemplateElement) {
       const frag = this.itemtemplate.cloneNode(true).content;
@@ -27434,10 +27486,10 @@ var PacemHierarchyElement = class extends PacemBaseElement {
       }
       found[parentsProperty].push(newParent);
     }
-    this._cleanupHierarchy(value2);
+    this._tidyUpHierarchy(value2);
     this.changeHandler(new HierarchyChangeEvent(value2));
   }
-  _cleanupHierarchy(value2 = []) {
+  _tidyUpHierarchy(value2 = []) {
     const valueProperty = this.valueProperty, parentsProperty = this.parentsProperty || DEFAULT_PARENTSPROPERTY;
     const isInAncestors = (sourceId, targetId) => {
       const target = value2.find((i) => i[valueProperty] == targetId);
@@ -27518,7 +27570,6 @@ var PacemHierarchyElement = class extends PacemBaseElement {
     return this._isInAncestors(target, source);
   }
   _databind() {
-    this._repeater.datasource = [];
     const valueProperty = this.valueProperty;
     if (Utils71.isNullOrEmpty(valueProperty)) {
       throw new Error("Missing valueProperty.");
@@ -27627,7 +27678,7 @@ PacemHierarchyElement = __decorateClass([
     </${P63}-panel>
 </template>
 <${P63}-shell-proxy>
-        <${P63}-balloon options="{{ { behavior: ComponentsUI.UI.BalloonBehavior.Inert } }}">
+        <${P63}-balloon options="{{ { behavior: '${ComponentsUI3.UI.BalloonBehavior.Inert}' } }}">
                     <${P63}-button icon-glyph="link_off" class="${PCSS43}-margin margin-0 button-flat display-flex flex-middle icon-rotate rotate-135"
                                  on-click=":host._unlink($event)"
                                  on-mousedown="$event.stopPropagation()"
@@ -46461,6 +46512,7 @@ var OrbitCameraBehavior = class _OrbitCameraBehavior {
         this._progress.x = this._progress.y = 0;
       }
       avoidHandler19(evt);
+      window.clearTimeout(this.#handle);
       window.addEventListener("pointerup", this._endHandler, false);
       window.addEventListener("pointermove", this._moveHandler, false);
       window.addEventListener("contextmenu", this._avoidHandler, false);
@@ -46468,7 +46520,7 @@ var OrbitCameraBehavior = class _OrbitCameraBehavior {
     this._avoidHandler = (evt) => avoidHandler19(evt);
     this._endHandler = (evt) => {
       avoidHandler19(evt);
-      window.setTimeout(() => {
+      this.#handle = window.setTimeout(() => {
         window.removeEventListener("pointerup", this._endHandler);
         window.removeEventListener("pointermove", this._moveHandler);
         window.removeEventListener("contextmenu", this._avoidHandler);
@@ -46542,6 +46594,7 @@ var OrbitCameraBehavior = class _OrbitCameraBehavior {
   }
   #panning;
   #rotating;
+  #handle;
   _getSafeAzimuth({ theta }) {
     return _OrbitCameraBehavior._modAngle(theta);
   }
@@ -48276,7 +48329,7 @@ var PacemDataCellElement = class extends PacemBaseCellElement {
     const culture = Utils156.lang(this);
     switch (metadata.dataType) {
       case "boolean":
-        return `<${P144}-icon icon="material ${!plainValue ? "radio_button_unchecked" : "check_circle_outline"} text-big-steady"></${P144}-icon>`;
+        return `<${P144}-icon icon="${!plainValue ? "radio_button_unchecked icon-outline" : "check_circle_outline icon-fill"} icon-size icon-size-2"></${P144}-icon>`;
       case "time":
       case "date":
       case "datetime":