@pacem/pacem-core 2.0.0-goldbach → 2.0.0-hadamard

package/dist/bundle/pacem-core.mjs

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-core v2.0.0-goldbach (https://js.pacem.it)
+ * @pacem/pacem-core v2.0.0-hadamard (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -362,7 +362,7 @@ var Utils = class _Utils {
       },
       /** Sets a CSS custom property's value on the document root (`:root`/`html`). */
       setVariable(name, value2) {
-        getComputedStyle(document.documentElement).setProperty(name, value2);
+        document.documentElement.style.setProperty(name, value2);
       },
       /**
        * Naive O(n^2) implementation for an actual css class presence (definition) in the current DOM.
@@ -1440,12 +1440,12 @@ var BindingParser = class _BindingParser {
    * Parses a binding expression against a scope.
    * @param expression The bare expression text (no `{{ }}` delimiters, no `, twoway`/`, once` modifier).
    * @param scope What the references resolve to.
-   * @throws When the expression is unsafe (see {@link analyze}).
+   * @throws An `Error` when the expression is unsafe (see {@link analyze}).
    */
   static parse(expression, scope) {
     const analysis = _BindingParser.analyze(expression);
     if (analysis.unsafe != null) {
-      throw `Unsafe expression detected: "${analysis.unsafe}" in "${expression}".`;
+      throw new Error(`Unsafe expression detected: "${analysis.unsafe}" in "${expression}".`);
     }
     if (!analysis.hasReferences) {
       return { kind: "constant", functionBody: `return ${expression};`, voidBody: expression, dependencies: [] };
@@ -4415,6 +4415,14 @@ var SwipeEventArgsClass = class _SwipeEventArgsClass {
   get element() {
     return this._builder.element;
   }
+  /**
+   * @readonly Gets the snap the element is going to rest at, relative to where the gesture started: `0` means it
+   * bounces back home (the release didn't make it). Known on release (`swipe`, `swipe<direction>` and the
+   * animation-end events); `undefined` while panning.
+   */
+  get snap() {
+    return this._builder.snap;
+  }
   /** Builds a new {@link SwipeEventArgsClass} out of a plain {@link SwipeEventArgs} builder. */
   static fromArgs(builder) {
     return new _SwipeEventArgsClass(Utils.extend({}, builder));
@@ -4854,28 +4862,46 @@ var PacemUnsafeContentElement = class extends PacemContentElement {
     return html;
   }
 };
+var URL_ATTRIBUTES = ["href", "src", "action", "formaction", "xlink:href"];
+function isScriptUrl(value2) {
+  const normalized = (value2 ?? "").replace(/[\u0000- ]/g, "").toLowerCase();
+  return normalized.startsWith("javascript:");
+}
+function sanitizeNode(node) {
+  for (let i = node.childNodes.length - 1; i >= 0; i--) {
+    const child = node.childNodes.item(i);
+    if (child instanceof Element && child.localName === "script") {
+      child.remove();
+      continue;
+    }
+    sanitizeNode(child);
+  }
+  if (!(node instanceof Element)) {
+    return;
+  }
+  for (const attribute of Array.from(node.attributes)) {
+    const name = attribute.name.toLowerCase();
+    const isHandler = name.startsWith("on");
+    const isScriptLink = URL_ATTRIBUTES.indexOf(name) >= 0 && isScriptUrl(attribute.value);
+    if (isHandler || isScriptLink) {
+      node.removeAttribute(attribute.name);
+    }
+  }
+}
 var PacemSafeContentElement = class extends PacemContentElement {
-  _sanitizeLegacy(html) {
+  sanitize(html) {
     if (Utils.isNullOrEmpty(html)) {
       return html;
     }
     if (html instanceof Node) {
-      for (let i = html.childNodes.length - 1; i >= 0; i--) {
-        const node = html.childNodes.item(i);
-        if (node instanceof HTMLScriptElement) {
-          node.remove();
-        } else {
-          this.sanitize(node);
-        }
-      }
+      sanitizeNode(html);
       return html;
-    } else {
-      const scriptBlockPattern = /<script.+<\/script>/g;
-      return (html || "").toString().replace(scriptBlockPattern, "");
     }
-  }
-  sanitize(html) {
-    return this._sanitizeLegacy(html);
+    const template = document.createElement("template");
+    template.innerHTML = html.toString();
+    const fragment = template.content;
+    sanitizeNode(fragment);
+    return fragment;
   }
 };
 
@@ -5109,7 +5135,7 @@ var PacemBroadcastChannelProxyElement = class PacemBroadcastChannelProxyElement2
     super.propertyChangedCallback(name, old, val, first);
     if (!first) {
       switch (name) {
-        case "src":
+        case "channelName":
           this._disposeChannel();
           this._initializeChannel(val);
           break;
@@ -5157,6 +5183,9 @@ var PacemBroadcastChannelProxyElement = class PacemBroadcastChannelProxyElement2
       channel.removeEventListener("message", this._messageHandler, false);
       channel.close();
     }
+    if (channel === this.#channel) {
+      this.#channel = null;
+    }
   }
 };
 __decorate6([
@@ -5231,12 +5260,25 @@ var __decorate8 = function(decorators, target, key2, desc) {
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key2, r) : d(target, key2)) || r;
   return c > 3 && r && Object.defineProperty(target, key2, r), r;
 };
+var DebouncePropertyConverter = {
+  convert: (attr) => {
+    switch (attr) {
+      case "true":
+        return true;
+      case "false":
+        return false;
+      default:
+        return parseFloat(attr);
+    }
+  },
+  convertBack: (prop) => `${prop}`
+};
 var PacemDataElement = class PacemDataElement2 extends PacemEventTarget {
   constructor(storage = new Storage()) {
     super();
     this.storage = storage;
-    this._handle = 0;
-    this._flag = false;
+    this._cancelPending = null;
+    this._throttling = false;
   }
   propertyChangedCallback(name, old, val, first) {
     super.propertyChangedCallback(name, old, val, first);
@@ -5250,34 +5292,65 @@ var PacemDataElement = class PacemDataElement2 extends PacemEventTarget {
         }
         break;
       case "model":
-        const debounce = this.debounce, throttle = this.throttle, emit = () => {
-          this.dispatchEvent(new PropertyChangeEvent({ propertyName: name, oldValue: old, currentValue: val, firstChange: first }));
-        };
-        if (debounce > 0 && !first) {
-          if (throttle) {
-            if (this._flag)
-              return;
-            this._flag = true;
-            emit();
-            this._handle = window.setTimeout(() => {
-              this._flag = false;
-            }, debounce);
-          } else {
-            clearTimeout(this._handle);
-            this._handle = window.setTimeout(emit, debounce);
-          }
-        } else {
-          emit();
-        }
-        if (!first && !Utils.isNullOrEmpty(this.persistAs)) {
-          if (Utils.isNull(val))
-            this.storage.removeProperty(this.persistAs);
-          else
-            this.storage.setPropertyValue(this.persistAs, val, true);
-        }
+        this._notifyModelChange(old, val, first);
+        this._persist(val, first);
         break;
     }
   }
+  /** Notifies a model change: right away, debounced or throttled (see {@link debounce} and {@link throttle}). */
+  _notifyModelChange(old, val, first) {
+    const emit = () => {
+      this.dispatchEvent(new PropertyChangeEvent({ propertyName: "model", oldValue: old, currentValue: val, firstChange: first }));
+    };
+    const debounce = this.debounce;
+    const perFrame = debounce === true;
+    const delay = typeof debounce === "number" && debounce > 0 ? debounce : 0;
+    if (first || !perFrame && delay === 0) {
+      emit();
+      return;
+    }
+    if (this.throttle) {
+      this._throttle(emit, perFrame, delay);
+      return;
+    }
+    this._cancelPending?.();
+    this._cancelPending = this._schedule(emit, perFrame, delay);
+  }
+  /** Notifies the first change of a window, and drops the others until the window closes. */
+  _throttle(emit, perFrame, delay) {
+    if (this._throttling) {
+      return;
+    }
+    this._throttling = true;
+    emit();
+    this._schedule(() => {
+      this._throttling = false;
+    }, perFrame, delay);
+  }
+  /**
+   * Runs a callback on the next animation frame, or after a delay.
+   * @returns A function cancelling it.
+   */
+  _schedule(callback, perFrame, delay) {
+    if (perFrame) {
+      const frame = requestAnimationFrame(callback);
+      return () => cancelAnimationFrame(frame);
+    }
+    const timeout = window.setTimeout(callback, delay);
+    return () => clearTimeout(timeout);
+  }
+  /** Persists the model under {@link persistAs}, if set (a `null` model removes it). */
+  _persist(val, first) {
+    const key2 = this.persistAs;
+    if (first || Utils.isNullOrEmpty(key2)) {
+      return;
+    }
+    if (Utils.isNull(val)) {
+      this.storage.removeProperty(key2);
+      return;
+    }
+    this.storage.setPropertyValue(key2, val, true);
+  }
 };
 __decorate8([
   Watch({ emit: false, converter: PropertyConverters.Eval })
@@ -5286,7 +5359,7 @@ __decorate8([
   Watch({ emit: false, converter: PropertyConverters.String })
 ], PacemDataElement.prototype, "persistAs", void 0);
 __decorate8([
-  Watch({ emit: false, converter: PropertyConverters.Number })
+  Watch({ emit: false, converter: DebouncePropertyConverter })
 ], PacemDataElement.prototype, "debounce", void 0);
 __decorate8([
   Watch({ emit: false, converter: PropertyConverters.BooleanStrict })
@@ -5834,7 +5907,7 @@ __decorate12([
   Watch({ reflectBack: true, converter: PropertyConverters.Number })
 ], PacemFetchElement.prototype, "debounce", void 0);
 __decorate12([
-  Watch({ emit: false, reflectBack: true, converter: PropertyConverters.Number })
+  Watch({ emit: false, reflectBack: true, converter: PropertyConverters.Boolean })
 ], PacemFetchElement.prototype, "throttle", void 0);
 __decorate12([
   Watch({ emit: false, reflectBack: true, converter: PropertyConverters.Boolean })
@@ -7122,6 +7195,8 @@ var PacemServiceWorkerProxyElement = class PacemServiceWorkerProxyElement2 exten
             this.pushSubscription = null;
           }
           resolve(result);
+        }, (reason) => {
+          reject(reason);
         });
       } else {
         resolve(false);
@@ -7131,6 +7206,8 @@ var PacemServiceWorkerProxyElement = class PacemServiceWorkerProxyElement2 exten
   /**
    * Subscribes to push notifications through the registered service worker.
    * @param publicKey VAPID public key (base64url or raw bytes); defaults to `publicKey`
+   * @returns The subscription (`null` without a push manager, or when notifications are denied); rejects when the
+   * browser refuses to subscribe (no push service, an invalid key…).
    */
   subscribe(publicKey = this.publicKey) {
     return new Promise((resolve, reject) => {
@@ -7151,6 +7228,8 @@ var PacemServiceWorkerProxyElement = class PacemServiceWorkerProxyElement2 exten
               this.pushSubscription = subscription
             );
           }
+        }, (reason) => {
+          reject(reason);
         });
       } else {
         resolve(null);
@@ -7216,6 +7295,10 @@ var PacemShortcutElement = class PacemShortcutElement2 extends PacemEventTarget
     super(...arguments);
     this._accumulator = [];
     this._shortcutHandler = (evt) => {
+      if (this.disabled) {
+        this._accumulator.splice(0);
+        return;
+      }
       const result = matchesKeyCombination(evt, this.combination, this._accumulator);
       switch (result) {
         case true:
@@ -7716,6 +7799,9 @@ var PacemWebWorkerProxyElement = class PacemWebWorkerProxyElement2 extends Pacem
       worker.removeEventListener("message", this._messageHandler, false);
       worker.terminate();
     }
+    if (worker === this._worker) {
+      this._worker = null;
+    }
   }
 };
 __decorate36([
@@ -8192,6 +8278,28 @@ var __decorate38 = function(decorators, target, key2, desc) {
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key2, r) : d(target, key2)) || r;
   return c > 3 && r && Object.defineProperty(target, key2, r), r;
 };
+function clamp(value2, min, max) {
+  if (value2 < min) {
+    return min;
+  }
+  return Math.min(value2, max);
+}
+function clampToConstraints(rect, handle, constraints) {
+  const width = clamp(rect.width, constraints.minWidth, constraints.maxWidth);
+  const height = clamp(rect.height, constraints.minHeight, constraints.maxHeight);
+  const x = handle.endsWith("left") ? rect.x + rect.width - width : rect.x;
+  const y = handle.startsWith("top") ? rect.y + rect.height - height : rect.y;
+  return { x, y, width, height };
+}
+function boxChrome(computed) {
+  if (computed.boxSizing === "border-box") {
+    return { width: 0, height: 0 };
+  }
+  const px = (value2) => parseFloat(value2) || 0;
+  const width = px(computed.paddingLeft) + px(computed.paddingRight) + px(computed.borderLeftWidth) + px(computed.borderRightWidth);
+  const height = px(computed.paddingTop) + px(computed.paddingBottom) + px(computed.borderTopWidth) + px(computed.borderBottomWidth);
+  return { width, height };
+}
 var RescaleElementDelegate = class {
   constructor(_element, _type, _rescaler, _logFn) {
     this._element = _element;
@@ -8257,6 +8365,9 @@ var RescaleElementDelegate = class {
       this._logFn(LogLevel.Log, `handle: ${handle}, origin: ${JSON.stringify(origin)}, currentPosition: ${JSON.stringify(currentPosition)}`, `Rescaling`);
       this._logFn(LogLevel.Log, `delta: ${JSON.stringify(delta)}, position: ${JSON.stringify(position)}`, `Rescaling`);
       this._logFn(LogLevel.Log, `from: ${JSON.stringify(this._rect)}, to: ${JSON.stringify(desiredRect)}`, `Rescaling`);
+      if (!keepProportions) {
+        desiredRect = clampToConstraints(desiredRect, handle, { minWidth, maxWidth, minHeight, maxHeight });
+      }
       let horizontally = desiredRect.width >= minWidth && desiredRect.width <= maxWidth, vertically = desiredRect.height >= minHeight && desiredRect.height <= maxHeight;
       if (keepProportions && (!horizontally || !vertically)) {
         horizontally = vertically = false;
@@ -8283,8 +8394,9 @@ var RescaleElementDelegate = class {
         if (!rescaleEvt.defaultPrevented) {
           const m = this._originalTransform;
           el.style.transform = `matrix(${m.a},${m.b},${m.c},${m.d},${m.e + desiredRect.x - this._rect.x},${m.f + desiredRect.y - this._rect.y})`;
-          el.style.width = desiredRect.width + "px";
-          el.style.height = desiredRect.height + "px";
+          const chrome = this._chrome;
+          el.style.width = Math.max(desiredRect.width - chrome.width, 0) + "px";
+          el.style.height = Math.max(desiredRect.height - chrome.height, 0) + "px";
         }
         this._targetRect = desiredRect;
       }
@@ -8314,7 +8426,9 @@ var RescaleElementDelegate = class {
     window.addEventListener("touchmove", this._moveHandler, false);
     this._origin = this._position = GET_VAL5(_element, MOUSE_DOWN2);
     this._rect = this._targetRect = Utils.offsetRect(_element);
-    this._originalTransform = Utils.deserializeTransform(getComputedStyle(_element));
+    const computed = getComputedStyle(_element);
+    this._originalTransform = Utils.deserializeTransform(computed);
+    this._chrome = boxChrome(computed);
     Utils.addClass(document.body, PCSS + "-rescaling rescale-" + _type);
   }
 };
@@ -8658,8 +8772,8 @@ var SwipeElementDelegate = class {
       swiper.dispatchEvent(swipeEvt);
       if (!swipeEvt.defaultPrevented) {
         let { delta } = this._delta(this._init, state);
-        if (!swiper.options.bouncy) {
-          const snaps = swiper.snaps.slice().sort();
+        if (!this.#options.bouncy) {
+          const snaps = swiper.snaps.slice().sort((a, b) => a - b);
           const snapFirst = snaps[0], snapLast = snaps[snaps.length - 1];
           const dir = this._swiper.direction;
           const { x, y } = delta;
@@ -8674,22 +8788,22 @@ var SwipeElementDelegate = class {
       if (Utils.isNull(this.#state)) {
         console.log("How come?!");
       } else {
-        const args = this._buildSwipeArgsFromState();
-        const swipeEvt = new SwipeEvent(SwipeEventType.Swipe, args, { cancelable: true, bubbles: false });
         const swiper = this._swiper;
+        const estimate = this._buildSwipeArgsFromState();
+        const snaps = (swiper.snaps ?? [0]).slice().sort((a, b) => a - b);
+        const target = this.#options.bouncy ? estimate.predictedDelta : estimate.predictedDelta.clamp(snaps[0], snaps[snaps.length - 1]);
+        const snap = snaps.reduce((acc, v) => {
+          const distance = Math.abs(v - target);
+          const current = Math.abs(acc - target);
+          return distance < current ? v : acc;
+        }, 0);
+        const args = this._buildSwipeArgsFromState(this.#state, snap);
+        const swipeEvt = new SwipeEvent(SwipeEventType.Swipe, args, { cancelable: true, bubbles: false });
         swiper.dispatchEvent(swipeEvt);
         if (!swipeEvt.defaultPrevented) {
           const swipe1Evt = new SwipeEvent("swipe" + args.direction, args, { cancelable: true, bubbles: false });
           swiper.dispatchEvent(swipe1Evt);
           if (!swipe1Evt.defaultPrevented) {
-            const snaps = swiper.snaps ?? [0];
-            snaps.sort();
-            const target = swiper.options.bouncy ? args.predictedDelta : args.predictedDelta.clamp(snaps[0], snaps[snaps.length - 1]);
-            const snap = snaps.reduce((acc, v) => {
-              const distance = Math.abs(v - target);
-              const current = Math.abs(acc - target);
-              return distance < current ? v : acc;
-            }, 0);
             const vertical = swiper.direction === "vertical";
             const duration = args.predictedDuration;
             const delta0 = vertical ? { x: 0, y: target } : { x: target, y: 0 };
@@ -8702,7 +8816,10 @@ var SwipeElementDelegate = class {
             };
             if (snap.isCloseTo(0)) {
               this._animateOffsetBy(delta0, duration).then(() => {
-                this._animateOffsetBy({ x: 0, y: 0 }, 0.3, "cubic-bezier(.37,-0.01,.34,1.43)").then(() => swipeAnimationEnd());
+                this._animateOffsetBy({ x: 0, y: 0 }, 0.3, "cubic-bezier(.37,-0.01,.34,1.43)").then(() => {
+                  this._element.style.transform = this.#originalInlineTransform;
+                  swipeAnimationEnd();
+                });
               });
             } else {
               const doesNotExceed = (snap - target) * (snap - args.delta) >= 0;
@@ -8727,6 +8844,7 @@ var SwipeElementDelegate = class {
     const el = _element;
     this.#options = Utils.extend({}, DEFAULT_OPTIONS, _swiper.options ?? {});
     this.#originalTransform = Utils.deserializeTransform(getComputedStyle(el));
+    this.#originalInlineTransform = el.style.transform;
     window.addEventListener("pointermove", this._moveHandler, false);
     window.addEventListener("pointerup", this._endHandler, false);
     window.addEventListener("pointercancel", this._endHandler, false);
@@ -8765,7 +8883,12 @@ var SwipeElementDelegate = class {
     };
     return state;
   }
-  _buildSwipeArgsFromState(state = this.#state) {
+  /**
+   * Builds the event args of the current state.
+   * @param state The gesture state.
+   * @param snap The snap the element is going to rest at, once known (on release).
+   */
+  _buildSwipeArgsFromState(state = this.#state, snap) {
     const options = this.#options;
     const speed = this.speed;
     const dir = this._swiper.direction;
@@ -8780,7 +8903,8 @@ var SwipeElementDelegate = class {
       fling: options.fling,
       horizontalspeed,
       verticalspeed,
-      vertical
+      vertical,
+      snap
     });
     return args;
   }
@@ -8806,6 +8930,8 @@ var SwipeElementDelegate = class {
   #options;
   #samples;
   #originalTransform;
+  /** The element's inline `transform` before the gesture, restored as is on a bounce-back home. */
+  #originalInlineTransform;
   #state;
   dispose() {
     const el = this._element;