@pacem/pacem-ui 2.0.0-cauchy → 2.0.0-davinci

package/dist/browser/pacem-ui.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-ui v2.0.0-cauchy (https://js.pacem.it)
+ * @pacem/pacem-ui v2.0.0-davinci (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -506,7 +506,8 @@
     ], PacemAnchorElement.prototype, "router", void 0);
     PacemAnchorElement = __decorate$A([
         pacemCore.CustomElement({
-            tagName: pacemCore.P + '-a'
+            tagName: pacemCore.P + '-a',
+            modifiers: ['hoverable', 'focusable', 'pressable']
         })
     ], PacemAnchorElement);
 
@@ -1080,6 +1081,9 @@
             }
         }
     };
+    __decorate$z([
+        pacemCore.ViewChild(`.${pacemCore.PCSS}-balloon-face`, true, false)
+    ], PacemBalloonElement.prototype, "_face", void 0);
     __decorate$z([
         pacemCore.ViewChild(`.${pacemCore.PCSS}-balloon`)
     ], PacemBalloonElement.prototype, "_container", void 0);
@@ -1100,6 +1104,7 @@
             tagName: pacemCore.P + '-balloon',
             shadow: true,
             template: `<${pacemCore.P}-resize target="{{ :host.target }}" disabled="true" watch-position="true" on-${pacemCore.Components.ResizeEventName}=":host._onLayoutChange($event)"></${pacemCore.P}-resize>
+<div class="${pacemCore.PCSS}-balloon-face"></div>
 <div class="${pacemCore.PCSS}-balloon"><${pacemCore.P}-resize on-${pacemCore.Components.ResizeEventName}=":host._onLayoutChange($event)" disabled="true" content><slot></slot></${pacemCore.P}-resize></div>
 <div class="corner top-left" part="corner-topleft"></div><div class="corner bottom-left" part="corner-bottomleft"></div><div class="corner top-right" part="corner-topright"></div><div class="corner bottom-right" part="corner-bottomright"></div>`
         })
@@ -2165,7 +2170,7 @@
         pacemCore.ViewChild(pacemCore.P + '-resize[handle]')
     ], PacemBottomSheetElement.prototype, "_handleResizer", void 0);
     __decorate$w([
-        pacemCore.ViewChild(pacemCore.P + '-panel.bottom-sheet')
+        pacemCore.ViewChild(pacemCore.P + '-panel.bottom-sheet', true)
     ], PacemBottomSheetElement.prototype, "_sheet", void 0);
     __decorate$w([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
@@ -2357,7 +2362,8 @@
     ], PacemButtonElement.prototype, "confirmationDialog", void 0);
     PacemButtonElement = __decorate$u([
         pacemCore.CustomElement({
-            tagName: pacemCore.P + '-button'
+            tagName: pacemCore.P + '-button',
+            modifiers: ['hoverable', 'focusable', 'clickable']
         })
     ], PacemButtonElement);
     //}
@@ -3908,7 +3914,7 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
         pacemCore.ViewChild('.' + pacemCore.PCSS + '-lightbox-wrapper')
     ], PacemLightboxElement.prototype, "_wrapperElement", void 0);
     __decorate$k([
-        pacemCore.ViewChild('.' + pacemCore.PCSS + '-lightbox')
+        pacemCore.ViewChild('.' + pacemCore.PCSS + '-lightbox', true)
     ], PacemLightboxElement.prototype, "_container", void 0);
     __decorate$k([
         pacemCore.ViewChild('slot[name=close]')
@@ -4006,7 +4012,7 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
         }
     };
     __decorate$j([
-        pacemCore.ViewChild('div.' + pacemCore.PCSS + '-spinner')
+        pacemCore.ViewChild('div.' + pacemCore.PCSS + '-spinner', true)
     ], PacemLoaderElement.prototype, "_spinner", void 0);
     __decorate$j([
         pacemCore.ViewChild('div.' + pacemCore.PCSS + '-loader')
@@ -4067,6 +4073,22 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
         },
         type: 'inline'
     };
+    // routed link: {route}(#router0:/{culture}/pages/next "Next Page"), the router's selector, then the href (formatted by
+    // the router's state), then the optional text (the href when missing)
+    const ANCHOR_RULE = {
+        rule: {
+            exec: (input) => {
+                const arr = /\{route\}\(([^:\s)]+):([^\s")]+)(?:\s+"([^"]*)")?\)/.exec(input);
+                if (arr && arr.length > 2) {
+                    return [{
+                            type: 'route', raw: arr[0], text: arr[3] || arr[2], index: arr.index, router: arr[1], href: arr[2]
+                        }];
+                }
+                return null;
+            }
+        },
+        type: 'inline'
+    };
     const RULES_TO_HTML = (token) => {
         switch (token.type) {
             case 'youtube':
@@ -4075,17 +4097,21 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
             case 'tweet':
                 return `<!-- twitter embed -->
 <${pacemCore.P}-tweetembed tweetid="${token.text}"></${pacemCore.P}-tweetembed>`;
+            case 'route':
+                return `<${pacemCore.P}-a href="${token['href']}" router="${token['router']}">${token.text}</${pacemCore.P}-a>`;
         }
     };
     /**
-     * Parses Markdown into HTML, extended with Pacem-specific inline embeds (`{tweet}(id)`, `{yt}(id)`).
+     * Parses Markdown into HTML, extended with Pacem-specific inline embeds (`{tweet}(id)`, `{yt}(id)`) and routed links
+     * (`{route}(#router0:/path "text")`).
      * Fenced code blocks are highlighted by the language-agnostic `Compile.Scanner`, for every language registered in
      * `Compile.Syntaxes` (built-in: javascript/typescript, html/xml, c#, c/c++, json; more can be registered at runtime).
      */
     class MarkdownService {
         #grammar = [
             TWITTER_RULE,
-            YOUTUBE_RULE
+            YOUTUBE_RULE,
+            ANCHOR_RULE
         ];
         #md = new pacemFoundation.Compile.Markdown.Parser();
         _escape(md) {
@@ -4791,7 +4817,10 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
         }
     };
     __decorate$c([
-        pacemCore.ViewChild('.progressbar-bar')
+        pacemCore.ViewChild('.progressbar-track', true, false)
+    ], PacemProgressbarElement.prototype, "_face", void 0);
+    __decorate$c([
+        pacemCore.ViewChild('.progressbar-bar', false, true)
     ], PacemProgressbarElement.prototype, "_bar", void 0);
     __decorate$c([
         pacemCore.ViewChild('.progressbar-glow')
@@ -4861,6 +4890,9 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
             this.#shell = pacemCore.CustomElementUtils.findAncestorShell(this);
         }
     };
+    __decorate$b([
+        pacemCore.ViewChild('.sidebar-drawer', true)
+    ], PacemSidebarElement.prototype, "_drawer", void 0);
     __decorate$b([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
     ], PacemSidebarElement.prototype, "open", void 0);
@@ -5500,7 +5532,8 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
     ], PacemToastElement, "toast2", null);
     PacemToastElement = PacemToastElement_1 = __decorate$5([
         pacemCore.CustomElement({
-            tagName: pacemCore.P + '-toast'
+            tagName: pacemCore.P + '-toast',
+            modifiers: ['clickable']
         })
     ], PacemToastElement);
 
@@ -5934,6 +5967,8 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
     let PacemViewElement = class PacemViewElement extends pacemCore.PacemEventTarget {
         constructor() {
             super(...arguments);
+            /** Bumped by every new content: a pending `render` dispatch from superseded content is dropped. */
+            this.#renderVersion = 0;
             this._templateChangeHandler = (evt) => {
                 const tmplProxy = evt.target;
                 this._setTmpl(tmplProxy.target);
@@ -5951,6 +5986,8 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
                 }, 100 /* tenth of a second limit */);
             };
         }
+        /** Bumped by every new content: a pending `render` dispatch from superseded content is dropped. */
+        #renderVersion;
         propertyChangedCallback(name, old, val, first) {
             super.propertyChangedCallback(name, old, val, first);
             // url
@@ -6015,6 +6052,7 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
         }
         _setTmpl(tmpl) {
             cancelAnimationFrame(this._renderHandle);
+            this.#renderVersion++;
             // this way, `this._container.innerHTML = ''` instruction will eventually let the page "scroll up"...
             this.innerHTML = '';
             this._dispatchPrerender();
@@ -6087,6 +6125,7 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
         _manageResult(result) {
             // this way, `this._container.innerHTML = ''` instruction will eventually let the page "scroll up"...
             cancelAnimationFrame(this._renderHandle);
+            const version = ++this.#renderVersion;
             this.scrollTo({ top: 0, left: 0, behavior: 'instant' });
             this.innerHTML = '';
             this._dispatchPrerender();
@@ -6097,12 +6136,20 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
                 // setting fetching to `false` triggers a css class change that could/should cause a css transition to happen
                 // TODO: manage to switch to native in a near future (https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API or https://youtu.be/oDcb3fvtETs)
                 pacemCore.Utils.addAnimationEndCallback(this, () => {
+                    if (version !== this.#renderVersion) {
+                        return;
+                    }
                     this._dispatchRender();
                 }, ANIM_TIMEOUT);
             });
         }
         #resizeHandle;
         _dispatchRender() {
+            // the view might have been removed meanwhile (e.g. a nested view whose container got re-rendered):
+            // no shell to host the resizer, nothing to notify.
+            if (!this.isConnected) {
+                return;
+            }
             const resizer = new pacemCore.Components.PacemResizeElement();
             resizer.target = this;
             resizer.addEventListener(pacemCore.Components.ResizeEventName, this._debounceDispatchHandler);