@pacem/pacem-ui 1.0.0-abel

package/dist/esm/markdown-svc.js

@@ -0,0 +1,235 @@
+import { Compile } from '@pacem/pacem-foundation';
+import { P } from '@pacem/pacem-core';
+//namespace Pacem {
+const match = (input, pattern, fn) => {
+    const arr = pattern.exec(input);
+    if (arr && arr.length) {
+        return fn(arr);
+    }
+    return null;
+};
+const MARKUP_RULES = [
+    {
+        // comment
+        exec: (input) => match(input, /^((<|&lt;)!--(?:(?!(--(>|&gt;)))[\s\S])*(--(?:>|&gt;)|$))/, arr => {
+            const raw = arr[0], text = raw;
+            return [{
+                    type: 'code-comment', raw, text, index: arr.index
+                }];
+        })
+    },
+    {
+        // opening/self-closing tag
+        exec: (input, lexer) => match(input, /^(<|&lt;)([\w-]+)(?:\s+[\w-]+(?:=(?:'[^']*'|"[^"]*"))*)*(\s*\/?(?:&gt;|>))/, arr => {
+            const openingTag = arr[1], tagName = arr[2], closingTag = arr[3];
+            const closingTagIndex = arr[0].length - closingTag.length, attributesIndex = openingTag.length + tagName.length, attributesString = input.substring(attributesIndex, closingTagIndex);
+            const attributes = lexer.tokenize(attributesString, [{
+                    exec: (input) => match(input, /^(\s+[\w-]+)(=('[^']*'|"[^"]*"))?/, arr => {
+                        const raw = arr[1];
+                        const output = [{
+                                type: 'code-attribute', raw, text: raw, index: arr[0].indexOf(raw)
+                            }];
+                        if (arr.length > 2) {
+                            output.push({
+                                type: 'code-string', raw: arr[2], text: arr[2], index: arr.index + arr[0].length - arr[2].length
+                            });
+                        }
+                        return output;
+                    })
+                }]);
+            const retval = [{
+                    type: 'code-tag', raw: openingTag, text: openingTag, index: 0
+                }, {
+                    type: 'code-tagname', raw: tagName, text: tagName, index: openingTag.length
+                }];
+            // attributes
+            Array.prototype.push.apply(retval, attributes);
+            retval.push({
+                type: 'code-tag', raw: closingTag, text: closingTag, index: closingTagIndex
+            });
+            return retval;
+        })
+    },
+    {
+        // closing tag
+        exec: (input) => match(input, /^((?:<|&lt;)\/)([\w-]+)(\s*(?:&gt;|>))/, arr => {
+            const openingTag = arr[1], tagName = arr[2], closingTag = arr[3];
+            return [{
+                    type: 'code-tag', raw: openingTag, text: openingTag, index: 0
+                }, {
+                    type: 'code-tagname', raw: tagName, text: tagName, index: openingTag.length
+                }, {
+                    type: 'code-tag', raw: closingTag, text: closingTag, index: arr.index + arr[0].length - closingTag.length
+                }];
+        })
+    },
+    {
+        // text
+        exec: (input) => match(input, /^(<|&lt;)?((?!<|&lt;).)+/, arr => {
+            const raw = arr[0], text = raw;
+            return [{
+                    type: 'text', raw, text
+                }];
+        })
+    }
+];
+const C_LIKE_RULES = [{
+        // comments
+        exec: (input, _) => match(input, /^\/\/.*/, arr => {
+            const raw = arr[0], text = raw;
+            return [{
+                    type: 'code-comment', raw, text
+                }];
+        })
+    }, {
+        exec: (input, _) => match(input, /^\/\*(?:(?!(\*\/))[\s\S])*(?:\*\/|$)/, arr => {
+            const raw = arr[0], text = raw;
+            return [{
+                    type: 'code-comment', raw, text
+                }];
+        })
+    }, {
+        // string literal
+        exec: (input, _) => match(input, /^('(\\'|[^'])*[^\\]?'|@?\$?"(\\"|[^"])*[^\\]?")/, arr => {
+            const raw = arr[0], text = raw;
+            return [{
+                    type: 'code-string', raw, text
+                }];
+        })
+    }, {
+        // keywords
+        exec: (input, _) => match(input, /^\b(abstract|as|base|bool|break|byte|case|catch|char|checked|class|const|continue|decimal|default|delegate|do|double|else|enum|event|explicit|extern|false|finally|fixed|float|for|foreach|goto|if|implicit|in|int|interface|internal|is|lock|long|namespace|new|null|object|operator|out|out|override|params|private|protected|public|readonly|ref|return|sbyte|sealed|short|sizeof|stackalloc|static|string|struct|switch|this|throw|true|try|typeof|uint|ulong|unchecked|unsafe|ushort|using|static|virtual|void|volatile|while|add|alias|ascending|async|await|descending|dynamic|from|get|global|group|into|join|let|nameof|orderby|partial|remove|select|set|value|var|when|where|yield)\b/, arr => {
+            const raw = arr[0], text = raw;
+            return [{
+                    type: 'code-keyword', raw, text
+                }];
+        })
+    }, {
+        // number 
+        exec: (input, _) => match(input, /^\b((0x[0-9a-fA-F]|[\d])*\.?[\d]+)\b/, arr => {
+            const raw = arr[0], text = raw;
+            return [{
+                    type: 'code-number', raw, text
+                }];
+        })
+    }, {
+        // variables, operators, parentheses
+        exec: (input, _) => match(input, /^(@?\w+|:|\?\??|\?=?|\|\|?|&&?|&=?|;|,|=|\*=?|--|-=?|\+\+|\+=?|\/=?|\^|\(|\[|\)|\]|\{|\})/, arr => {
+            const raw = arr[0], text = raw;
+            return [{
+                    type: 'text', raw, text
+                }];
+        }),
+    }, {
+        // spaces
+        exec: (input, _) => match(input, /^\s+/, arr => {
+            const raw = arr[0], text = raw;
+            return [{
+                    type: 'space', raw, text
+                }];
+        }),
+    }];
+const SCRIPT_RULES = [
+    C_LIKE_RULES[0], C_LIKE_RULES[1], {
+        // string literal
+        exec: (input, _) => match(input, /^('(\\'|[^'])*[^\\]?'|"(\\"|[^"])*[^\\]?"|`(\\`|[^`])*[^\\]?`)/, arr => {
+            const raw = arr[0], text = raw;
+            return [{
+                    type: 'code-string', raw, text
+                }];
+        })
+    }, {
+        // keywords
+        exec: (input, _) => match(input, /^\b(abstract|any|arguments|async|await|boolean|break|byte|case|catch|char|class|const|continue|debugger|declare|default|delete|do|double|else|enum|eval|export|extends|false|final|finally|float|for|function|get|goto|if|implements|import|in|instanceof|int|interface|let|long|native|new|null|number|package|private|protected|public|return|short|static|string|super|switch|synchronized|this|throw|throws|transient|true|try|type|typeof|var|void|volatile|while|with|yield)\b/, arr => {
+            const raw = arr[0], text = raw;
+            return [{
+                    type: 'code-keyword', raw, text
+                }];
+        })
+    },
+    C_LIKE_RULES[4],
+    C_LIKE_RULES[5],
+    C_LIKE_RULES[6]
+];
+const TWITTER_RULE = {
+    rule: {
+        exec: (input) => {
+            const arr = /\{tweet\}\(([^\)]+)\)/.exec(input);
+            if (arr && arr.length > 1) {
+                return [{
+                        type: 'tweet', raw: arr[0], text: arr[1], index: arr.index
+                    }];
+            }
+            return null;
+        }
+    },
+    type: 'inline'
+};
+const YOUTUBE_RULE = {
+    rule: {
+        exec: (input) => {
+            const arr = /\{yt([\d]+x[\d]+)?\}\(([^\)]+)\)/.exec(input);
+            if (arr && arr.length > 2) {
+                const m0 = arr[1] || '560x315';
+                const size = m0.split('x'), w = size[0], h = size[1];
+                return [{
+                        type: 'youtube', raw: arr[0], text: arr[2], index: arr.index, width: w, height: h
+                    }];
+            }
+            return null;
+        }
+    },
+    type: 'inline'
+};
+const RULES_TO_HTML = (token) => {
+    switch (token.type) {
+        case 'youtube':
+            return `<!-- youtube embed -->
+<iframe width="${token['width']}" height="${token['height']}" src="https://www.youtube-nocookie.com/embed/${token.text}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`;
+        case 'tweet':
+            return `<!-- twitter embed -->
+<${P}-tweetembed tweetid="${token.text}"></${P}-tweetembed>`;
+        // code
+        case 'code-string':
+        case 'code-keyword':
+        case 'code-number':
+        case 'code-comment':
+        case 'code-tag':
+        case 'code-tagname':
+        case 'code-attribute':
+            return `<span class="${token.type}">${token.text}</span>`;
+    }
+};
+export class MarkdownService {
+    constructor() {
+        const grammar = [
+            TWITTER_RULE,
+            YOUTUBE_RULE
+        ];
+        for (let lang of ['c-sharp', 'c', 'c#', 'csharp', 'c++', 'cpp']) {
+            const c_like_rules = C_LIKE_RULES.map(rule => { return { rule, lang, type: 'code' }; });
+            Array.prototype.push.apply(grammar, c_like_rules);
+        }
+        for (let lang of ['ts', 'js', 'typescript', 'javascript']) {
+            const script_rules = SCRIPT_RULES.map(rule => { return { rule, lang, type: 'code' }; });
+            Array.prototype.push.apply(grammar, script_rules);
+        }
+        for (let lang of ['xml', 'html']) {
+            const markup_rules = MARKUP_RULES.map(rule => { return { rule, lang, type: 'code' }; });
+            Array.prototype.push.apply(grammar, markup_rules);
+        }
+        this.#grammar = grammar;
+    }
+    #grammar;
+    #md = new Compile.Markdown.Parser();
+    _escape(md) {
+        // no html allowed
+        return (md ?? '').replace(/</g, '&lt;');
+    }
+    toHtml(md) {
+        return this.#md.toHtml(this._escape(md), this.#grammar, RULES_TO_HTML);
+    }
+    tokenize(md) {
+        return this.#md.tokenize(this._escape(md), this.#grammar);
+    }
+}

package/dist/esm/markdown.js

@@ -0,0 +1,35 @@
+var __decorate = (this && this.__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);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { P, CustomElement, Watch, PropertyConverters, Components } from '@pacem/pacem-core';
+import { MarkdownService } from './markdown-svc';
+//namespace Pacem.Components.UI {
+let PacemMarkdownElement = class PacemMarkdownElement extends Components.PacemElement {
+    constructor(_md = new MarkdownService()) {
+        super();
+        this._md = _md;
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (name === 'value') {
+            this.innerHTML = this.html();
+        }
+    }
+    // IDEA: allow extensible parsing (grammar components?...)
+    tokens(md = this.value) {
+        return this._md.tokenize(md);
+    }
+    html(md = this.value) {
+        return this._md.toHtml(md);
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemMarkdownElement.prototype, "value", void 0);
+PacemMarkdownElement = __decorate([
+    CustomElement({ tagName: P + '-markdown' })
+], PacemMarkdownElement);
+export { PacemMarkdownElement };

package/dist/esm/marquee.js

@@ -0,0 +1,87 @@
+var __decorate = (this && this.__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);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { P, PCSS, Utils, CustomElement, Watch, ViewChild, PropertyConverters, Components, Defaults } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+let PacemMarqueeElement = class PacemMarqueeElement extends Components.PacemElement {
+    constructor() {
+        super(...arguments);
+        this._state = { overlap: 0, content: 0 };
+    }
+    // TODO: reuse css animation injection
+    connectedCallback() {
+        super.connectedCallback();
+        const css = this._css = document.createElement('style');
+        document.head.appendChild(css);
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (name === 'speed') {
+            this._adjust();
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._adjust();
+    }
+    disconnectedCallback() {
+        if (!Utils.isNull(this._css))
+            this._css.remove();
+        super.disconnectedCallback();
+    }
+    _overlapResize(evt) {
+        this._state.overlap = evt.detail.width;
+        this._adjust();
+    }
+    _contentResize(evt) {
+        this._state.content = evt.detail.width;
+        this._adjust();
+    }
+    _adjust() {
+        const state = this._state;
+        if (state.content > 0 && state.overlap > 0) {
+            const m = this._marquee;
+            const id = 'marquee-' + Utils.uniqueCode(), // rename the animation every time (Edge bug)
+            from = Math.round(state.overlap), to = -Math.round(state.content);
+            this._css.innerHTML = `@keyframes ${id} {
+    0% {
+        transform: translateX(${from}px);
+    }
+
+    100% {
+        transform: translateX(${to}px);
+    }
+}`;
+            const speed = this.speed || 20;
+            const time = Math.max(speed, Math.round(speed * Math.abs(from - to) / 1920));
+            m.style.animationName = id;
+            m.style.animationDuration = time + 's';
+            m.style.animationIterationCount = 'infinite';
+            m.style.animationTimingFunction = 'linear';
+        }
+    }
+};
+__decorate([
+    ViewChild(`.${PCSS}-marquee`)
+], PacemMarqueeElement.prototype, "_marquee", void 0);
+__decorate([
+    ViewChild(`.${PCSS}-marquee-overlap`)
+], PacemMarqueeElement.prototype, "_overlap", void 0);
+__decorate([
+    ViewChild(P + "-resize")
+], PacemMarqueeElement.prototype, "_resizer", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Number })
+], PacemMarqueeElement.prototype, "speed", void 0);
+PacemMarqueeElement = __decorate([
+    CustomElement({
+        tagName: P + '-marquee', shadow: Defaults.USE_SHADOW_ROOT,
+        template: `<div class="${PCSS}-marquee"><${P}-content></${P}-content></div><div class="${PCSS}-marquee-overlap"></div>
+<${P}-resize target="{{ :host._overlap }}" on-${Components.ResizeEventName}=":host._overlapResize($event)"></${P}-resize>
+<${P}-resize target="{{ :host._marquee }}" on-${Components.ResizeEventName}=":host._contentResize($event)"></${P}-resize>`
+    })
+], PacemMarqueeElement);
+export { PacemMarqueeElement };

package/dist/esm/media-query.js

@@ -0,0 +1,85 @@
+var __decorate = (this && this.__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);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { P, Utils, CustomElement, Watch, PropertyConverters, PacemEventTarget } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+const THRESHOLD_SM = 768;
+const THRESHOLD_MD = 992;
+const THRESHOLD_LG = 1200;
+const THRESHOLD_XL = 1824;
+const THRESHOLD_HD = 1920;
+const THRESHOLD_2K = 2048;
+const THRESHOLD_4K = 3840;
+export const MEDIAQUERY_XS = `(max-width: ${(THRESHOLD_SM - 1)}px)`;
+export const MEDIAQUERY_SM = `(min-width: ${THRESHOLD_SM}px)`;
+export const MEDIAQUERY_MD = `(min-width: ${THRESHOLD_MD}px)`;
+export const MEDIAQUERY_LG = `(min-width: ${THRESHOLD_LG}px)`;
+export const MEDIAQUERY_XL = `(min-width: ${THRESHOLD_XL}px)`;
+export const MEDIAQUERY_HD = `(min-width: ${THRESHOLD_HD}px)`;
+export const MEDIAQUERY_2K = `(min-width: ${THRESHOLD_2K}px)`;
+export const MEDIAQUERY_4K = `(min-width: ${THRESHOLD_4K}px)`;
+export const MEDIAQUERY_PORTRAIT = `(orientation: portrait)`;
+export const MEDIAQUERY_LANDSCAPE = `(orientation: landscape)`;
+export const MEDIAQUERY_PREFERS_LIGHT = `(prefers-color-scheme: light)`;
+export const MEDIAQUERY_PREFERS_DARK = `(prefers-color-scheme: dark)`;
+let PacemMediaQueryElement = class PacemMediaQueryElement extends PacemEventTarget {
+    constructor() {
+        super(...arguments);
+        this._changeHandler = (evt) => {
+            this.isMatch = evt.matches;
+        };
+    }
+    #mql;
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._init();
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'query':
+                if (!first) {
+                    this._init();
+                }
+                break;
+            case 'isMatch':
+                // dedicated change events
+                this._broadcastChange(val);
+                break;
+        }
+    }
+    disconnectedCallback() {
+        this._init('');
+        super.disconnectedCallback();
+    }
+    _broadcastChange(val = this.isMatch) {
+        this.dispatchEvent(new Event('change'));
+        this.dispatchEvent(new Event(val ? 'match' : 'unmatch'));
+    }
+    _init(q = this.query) {
+        const old = this.#mql;
+        if (!Utils.isNull(old)) {
+            old.removeEventListener('change', this._changeHandler);
+        }
+        if (!Utils.isNullOrEmpty(q)) {
+            const val = this.#mql = window.matchMedia(q);
+            val.addEventListener('change', this._changeHandler);
+            this.isMatch = val.matches;
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemMediaQueryElement.prototype, "query", void 0);
+__decorate([
+    Watch({ reflectBack: true, converter: PropertyConverters.Boolean })
+], PacemMediaQueryElement.prototype, "isMatch", void 0);
+PacemMediaQueryElement = __decorate([
+    CustomElement({
+        tagName: P + '-media-query'
+    })
+], PacemMediaQueryElement);
+export { PacemMediaQueryElement };

package/dist/esm/menu.js

@@ -0,0 +1,165 @@
+var __decorate = (this && this.__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);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemMenuCursorElement_1;
+import { P, PCSS, Utils, CustomElement, Watch, ViewChild, PropertyConverters, Components, Defaults, avoidHandler, stopPropagationHandler, CustomElementUtils, Logging } from '@pacem/pacem-core';
+//namespace Components.UI {
+let PacemMenuElement = class PacemMenuElement extends Components.PacemElement {
+    constructor() {
+        super(...arguments);
+        this.synchronizeShell = true;
+        this._stopPropagationHandlerConditional = (_) => {
+            if (!Utils.isNull(this._container) && !Utils.isNull(this._base)) {
+                const offsetNav = Utils.offset(this._container);
+                const offsetBase = Utils.offset(this._base);
+                // TODO: consider height as well for different skins, but DO manage edge cases...
+                if (offsetNav.width < offsetBase.width) {
+                    this.open = false;
+                }
+            }
+        };
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._container.addEventListener('click', stopPropagationHandler, false);
+        this._container.addEventListener("scroll", stopPropagationHandler, false);
+        this._sync();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('navigate', this._stopPropagationHandlerConditional, false);
+        if (!Utils.isNull(this._container)) {
+            this._container.removeEventListener('click', stopPropagationHandler, false);
+            this._container.removeEventListener("scroll", stopPropagationHandler, false);
+        }
+        this._sync(false);
+        super.disconnectedCallback();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('navigate', this._stopPropagationHandlerConditional, false);
+        this._shell = CustomElementUtils.findAncestorShell(this);
+    }
+    _toggle(evt) {
+        avoidHandler(evt);
+        this.open = !this.open;
+        this.dispatchEvent(new Event('toggle'));
+    }
+    _sync(val = this.open) {
+        if (this.synchronizeShell) {
+            Utils.addClass(this, 'menu-sync');
+            Utils.addClass(this._shell, PCSS + (val === true ? '-menu-open' : '-menu-close'));
+            Utils.removeClass(this._shell, PCSS + (val === true ? '-menu-close' : '-menu-open'));
+        }
+        else {
+            Utils.removeClass(this, 'menu-sync');
+            Utils.removeClass(this._shell, PCSS + '-menu-close ' + PCSS + '-menu-open');
+        }
+        if (this.outset) {
+            Utils.addClass(this, 'menu-outset');
+        }
+        else {
+            Utils.removeClass(this, 'menu-outset');
+        }
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (name === 'open' || name === 'synchronizeShell' || name === 'outset') {
+            this._sync();
+        }
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemMenuElement.prototype, "open", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemMenuElement.prototype, "hideHamburgerButton", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemMenuElement.prototype, "hideBackButton", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], PacemMenuElement.prototype, "outset", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], PacemMenuElement.prototype, "synchronizeShell", void 0);
+__decorate([
+    ViewChild('nav')
+], PacemMenuElement.prototype, "_container", void 0);
+__decorate([
+    ViewChild(`.${PCSS}-menu`)
+], PacemMenuElement.prototype, "_base", void 0);
+PacemMenuElement = __decorate([
+    CustomElement({
+        tagName: P + '-menu', template: `<${P}-panel class="${PCSS}-menu" css-class="{{ {'menu-close': !:host.open, 'menu-open': :host.open} }}" on-click=":host._toggle($event)">    
+    <nav><${P}-content></${P}-content></nav>
+</${P}-panel>
+<${P}-shell-proxy>
+<${P}-button hide="{{ :host.hideBackButton }}" class="${PCSS}-back ${PCSS}-menu button-flat" css-class="{{ {'menu-close': !:host.open, 'menu-open': :host.open} }}" on-click=":host._toggle($event)">BACK</${P}-button>
+<${P}-button hide="{{ :host.hideHamburgerButton }}" class="${PCSS}-hamburger ${PCSS}-menu button-flat" css-class="{{ {'menu-close': :host.open, 'menu-open': !:host.open} }}" on-click=":host._toggle($event)">MENU</${P}-button></${P}-shell-proxy>`,
+        shadow: Defaults.USE_SHADOW_ROOT
+    })
+], PacemMenuElement);
+export { PacemMenuElement };
+let PacemMenuCursorElement = PacemMenuCursorElement_1 = class PacemMenuCursorElement extends Components.PacemElement {
+    constructor() {
+        super(...arguments);
+        this._onPathChange = (evt) => {
+            const menu = this._menu, path = (evt && evt.detail) || window.location.pathname;
+            if (Utils.isNull(menu)) {
+                this.log(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(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 (Utils.isNull(tget)) {
+                // 2. try with real HTMLAnchorElement
+                tget = menu.querySelector(`a[href='${path}']`);
+            }
+            if (!Utils.isNull(tget)) {
+                // TODO: use transforms (remove width/height/top/... animations)
+                // TODO: consider <nav> scrollTop
+                const rect = Utils.offset(tget);
+                const rectMenu = 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';
+                Utils.addAnimationEndCallback(this, () => {
+                    this.style.width = (rect.width + rect.left - rectMenu.left) + 'px';
+                }, 500);
+            }
+        };
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._menu = CustomElementUtils.findAncestorOfType(this, PacemMenuElement);
+        this._onPathChange();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('navigate', this._onPathChange, false);
+    }
+    disconnectedCallback() {
+        this._menu = null;
+        window.removeEventListener('navigate', this._onPathChange, false);
+        super.disconnectedCallback();
+    }
+};
+PacemMenuCursorElement = PacemMenuCursorElement_1 = __decorate([
+    CustomElement({
+        tagName: P + '-menu-cursor'
+    })
+], PacemMenuCursorElement);
+export { PacemMenuCursorElement };