@pacem/pacem 1.0.0-fermat → 1.0.0-gauss

package/dist/browser/pacem-ui.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem v1.0.0-fermat (https://js.pacem.it)
+ * @pacem/pacem v1.0.0-gauss (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -1822,6 +1822,14 @@
     ], PacemBladeElement);
     //}
 
+    //namespace Pacem.Components.UI {
+    /** How a {@link Lightbox} reacts to a click outside its content. */
+    var LightboxBehavior;
+    (function (LightboxBehavior) {
+        LightboxBehavior["ClickOutsideClose"] = "clickOutsideClose";
+        LightboxBehavior["ExplicitClose"] = "explicitClose";
+    })(LightboxBehavior || (LightboxBehavior = {}));
+
     var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -1940,6 +1948,12 @@
                 }
                 this._setPosition();
             };
+            this._softReleaseHandler = (e) => {
+                pacemCore.avoidHandler(e);
+                if (this.behavior !== LightboxBehavior.ExplicitClose) {
+                    this.open = false;
+                }
+            };
         }
         propertyChangedCallback(name, old, val, first) {
             super.propertyChangedCallback(name, old, val, first);
@@ -1996,6 +2010,8 @@
             this._toggle();
             this._rebuildSwiperSnaps();
             this._toggleSwiper();
+            this._sheet.addEventListener('pointerdown', pacemCore.stopPropagationHandler, false);
+            this.addEventListener('pointerdown', this._softReleaseHandler, false);
         }
         disconnectedCallback() {
             const resizer = this._resizer;
@@ -2013,6 +2029,11 @@
                 swiper.removeEventListener(pacemCore.UI.SwipeEventType.SwipeUpAnimationEnd, this._swipeHandler);
                 swiper.removeEventListener(pacemCore.UI.SwipeEventType.SwipeDownAnimationEnd, this._swipeHandler);
             }
+            const sheet = this._sheet;
+            if (!pacemCore.Utils.isNull(sheet)) {
+                sheet.removeEventListener('pointerdown', pacemCore.stopPropagationHandler);
+            }
+            this.removeEventListener('pointerdown', this._softReleaseHandler);
             super.disconnectedCallback();
         }
         /**
@@ -2090,6 +2111,9 @@
     __decorate$w([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
     ], PacemBottomSheetElement.prototype, "open", void 0);
+    __decorate$w([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemBottomSheetElement.prototype, "behavior", void 0);
     PacemBottomSheetElement = __decorate$w([
         pacemCore.CustomElement({
             tagName: pacemCore.P + '-bottom-sheet', shadow: false /* css priority would be a mess otherwise */, template: `
@@ -3632,14 +3656,6 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
         pacemCore.Watch()
     ], PacemAdaptedIterativeElement.prototype, "datasource", void 0);
 
-    //namespace Pacem.Components.UI {
-    /** How a {@link Lightbox} reacts to a click outside its content. */
-    var LightboxBehavior;
-    (function (LightboxBehavior) {
-        LightboxBehavior["ClickOutsideClose"] = "clickOutsideClose";
-        LightboxBehavior["ExplicitClose"] = "explicitClose";
-    })(LightboxBehavior || (LightboxBehavior = {}));
-
     var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -4508,44 +4524,14 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
         constructor() {
             super(...arguments);
             this._onPathChange = (evt) => {
-                const menu = this._menu, path = (evt && evt.detail) || window.location.pathname;
-                if (pacemCore.Utils.isNull(menu)) {
-                    this.log(pacemCore.Logging.LogLevel.Warn, `Couldn't find a ${PacemMenuElement} ancestor for this ${PacemMenuCursorElement_1}.`);
-                    return;
-                }
-                // 1. try to find a matching PacemAnchorElement
-                var anchors = menu.querySelectorAll(pacemCore.P + '-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 (pacemCore.Utils.isNull(tget)) {
-                    // 2. try with real HTMLAnchorElement
-                    tget = menu.querySelector(`a[href='${path}']`);
-                }
-                if (!pacemCore.Utils.isNull(tget)) {
-                    // TODO: use transforms (remove width/height/top/... animations)
-                    // TODO: consider <nav> scrollTop
-                    const rect = pacemCore.Utils.offset(tget);
-                    const rectMenu = pacemCore.Utils.offset(menu);
-                    this.style.top = rect.top + 'px';
-                    this.style.left = rectMenu.left + 'px';
-                    this.style.width = '0';
-                    this.style.height = rect.height + 'px';
-                    pacemCore.Utils.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 = pacemCore.CustomElementUtils.findAncestorOfType(this, PacemMenuElement);
-            this._onPathChange();
+            this._findAnchorAndScrollItIntoView();
         }
         connectedCallback() {
             super.connectedCallback();
@@ -4556,6 +4542,49 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
             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 (pacemCore.Utils.isNull(menu)) {
+                this.log(pacemCore.Logging.LogLevel.Warn, `Couldn't find a ${PacemMenuElement} ancestor for this ${PacemMenuCursorElement_1}.`);
+                return;
+            }
+            // 1. try to find a matching PacemAnchorElement
+            const anchors = menu.querySelectorAll(pacemCore.P + '-a');
+            let tget = null;
+            for (let j = 0; j < anchors.length; j++) {
+                const a = anchors.item(j);
+                const router = a.router;
+                let href = pacemCore.Utils.isNull(router)
+                    ? a.href
+                    : /* build fully formatted href, it might contain placeholders */ pacemCore.Utils.URIs.format(a.href, router.state);
+                if (href === path) {
+                    tget = a;
+                    break;
+                }
+            }
+            if (pacemCore.Utils.isNull(tget)) {
+                // 2. try with real HTMLAnchorElement
+                tget = menu.querySelector(`a[href='${path}']`);
+            }
+            // finally, scroll if any matching anchor was found
+            if (!pacemCore.Utils.isNull(tget)) {
+                tget.scrollIntoView({ behavior: 'smooth' });
+            }
+        }
     };
     PacemMenuCursorElement = PacemMenuCursorElement_1 = __decorate$f([
         pacemCore.CustomElement({