@pacem/pacem-ui 1.0.0-abel

package/dist/esm/tabs.js

@@ -0,0 +1,187 @@
+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, CustomElement, Watch, ViewChild, PropertyConverters, Components, Utils, PropertyChangeEvent, Animations } from '@pacem/pacem-core';
+import { AdapterOrientation } from './adapter';
+//namespace Pacem.Components.UI {
+const PACEM_TAB_FOCUS_CSS = 'tab-focus';
+const StringOrNodePropertyConverter = {
+    convert: (attr, e) => {
+        return attr.startsWith('#') ? PropertyConverters.Element.convert(attr, e) : PropertyConverters.String.convert(attr, e);
+    },
+    convertBack: (prop, e) => {
+        return (prop instanceof Node) ? PropertyConverters.Element.convertBack(prop, e) : PropertyConverters.String.convertBack(prop, e);
+    },
+    retryConversionWhenReady: true
+};
+let PacemTabElement = class PacemTabElement extends Components.PacemIterableElement {
+    constructor() {
+        super('tab');
+        this._slotChangeHandler = (_) => {
+            const old = this.#content;
+            const val = this.#content = this.content;
+            this.dispatchEvent(new PropertyChangeEvent({ propertyName: 'content', currentValue: val, oldValue: old }));
+        };
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._slotLabel.addEventListener('slotchange', this._slotChangeHandler, false);
+    }
+    disconnectedCallback() {
+        const lbl = this._slotLabel;
+        if (!Utils.isNull(lbl)) {
+            lbl.removeEventListener('slotchange', this._slotChangeHandler, false);
+        }
+        super.disconnectedCallback();
+    }
+    #content;
+    get content() {
+        return this.querySelectorAll('*[slot=label]');
+    }
+};
+__decorate([
+    ViewChild('slot[name=label]')
+], PacemTabElement.prototype, "_slotLabel", void 0);
+__decorate([
+    Watch({ converter: StringOrNodePropertyConverter })
+], PacemTabElement.prototype, "label", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.String })
+], PacemTabElement.prototype, "key", void 0);
+PacemTabElement = __decorate([
+    CustomElement({
+        tagName: P + '-tab', shadow: true, template: `<slot name="label" part="label"></slot><slot></slot>`
+    })
+], PacemTabElement);
+export { PacemTabElement };
+let PacemTabsElement = class PacemTabsElement extends Components.PacemIterativeElement {
+    constructor(_tweener = new Animations.TweenService()) {
+        super("tablist");
+        this._tweener = _tweener;
+    }
+    _labelCallback(item, index) {
+        const content = item.content;
+        if (content.length > 0) {
+            let assembled = '';
+            content.forEach((node) => {
+                assembled += node.outerHTML;
+            });
+            return assembled;
+        }
+        if (item.label instanceof Node) {
+            return item.label;
+        }
+        return `<span class="${(item.key || 'tab')}">${item.label}</span>`;
+    }
+    _syncOrientation(val = this.orientation) {
+        if (!Utils.isNull(this._defaultTabAdapter)) {
+            this._defaultTabAdapter.orientation = val;
+        }
+        if (!Utils.isNull(this._tabs)) {
+            const fn = val === AdapterOrientation.Vertical ? Utils.addClass : Utils.removeClass;
+            fn(this._tabs, 'tabs-vertical');
+        }
+    }
+    _syncVisibility(val = this.index, old = -1) {
+        const timeout = 500;
+        // lock height
+        const container = this._container, height = container.clientHeight;
+        const style = getComputedStyle(container), padding = style.boxSizing === 'border-box' ? 0 : parseInt(style.paddingTop) + parseInt(style.paddingBottom);
+        container.style.height = (height - padding) + 'px';
+        let ndx = 0;
+        for (let tab of this.items || []) {
+            if (ndx === val) {
+                Utils.addClass(tab, 'tab-in');
+                requestAnimationFrame(() => {
+                    // wait for visibility digestion
+                    Utils.addClass(tab, PACEM_TAB_FOCUS_CSS);
+                    Utils.removeClass(tab, 'tab-in');
+                    Utils.addAnimationEndCallback(tab, (t) => {
+                        Utils.removeClass(t, 'tab-previous tab-next');
+                        const tgetH = Utils.offset(t).height /* + padding*/;
+                        this._tweener.run(parseInt(container.style.height), tgetH, 100, 0, Animations.Easings.sineOut, (_, v) => {
+                            container.style.height = Math.round(v) + 'px';
+                        })
+                            .then(_ => {
+                            // unlock height
+                            container.style.height = '';
+                        });
+                    }, timeout);
+                });
+                tab.aria.attributes.set('selected', 'true');
+            }
+            else {
+                Utils.removeClass(tab, 'tab-previous tab-next');
+                Utils.addClass(tab, ndx < val ? 'tab-previous' : 'tab-next');
+                if (ndx === old) {
+                    Utils.addClass(tab, 'tab-out');
+                    Utils.removeClass(tab, PACEM_TAB_FOCUS_CSS);
+                    Utils.addAnimationEndCallback(tab, (t) => {
+                        Utils.removeClass(t, 'tab-out');
+                    }, timeout);
+                    tab.aria.attributes.set('selected', 'false');
+                }
+            }
+            ndx++;
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        //this._defaultTabAdapter.labelCallback = this._labelCallback;
+        if (Utils.isNull(this.adapter)) {
+            this._syncOrientation();
+            this._syncVisibility();
+            this.adapter = this._defaultTabAdapter;
+        }
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'adapter':
+                if (Utils.isNull(val)) {
+                    this.adapter = this._defaultTabAdapter;
+                }
+                this._isUsingDefaultTabAdapter = this.adapter === this._defaultTabAdapter;
+                break;
+            case 'index':
+                this._syncVisibility(val, old);
+                break;
+            case 'orientation':
+                this._syncOrientation(val);
+                break;
+        }
+    }
+    validate(item) {
+        return item instanceof PacemTabElement;
+    }
+};
+__decorate([
+    ViewChild(P + '-adapter')
+], PacemTabsElement.prototype, "_defaultTabAdapter", void 0);
+__decorate([
+    ViewChild('.' + PCSS + '-tabs')
+], PacemTabsElement.prototype, "_tabs", void 0);
+__decorate([
+    ViewChild('.' + PCSS + '-tabs-content')
+], PacemTabsElement.prototype, "_container", void 0);
+__decorate([
+    Watch()
+], PacemTabsElement.prototype, "_isUsingDefaultTabAdapter", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.String })
+], PacemTabsElement.prototype, "orientation", void 0);
+PacemTabsElement = __decorate([
+    CustomElement({
+        tagName: P + '-tabs', shadow: false,
+        template: `<div class="${PCSS}-tabs">
+    <${P}-adapter class="${PCSS}-tabs-adapter" swipe-enabled="false" hide="{{ !:host._isUsingDefaultTabAdapter }}" label-callback="{{ :host._labelCallback }}"></${P}-adapter>
+    <div class="${PCSS}-tabs-content">
+        <${P}-content></${P}-content>
+    </div>
+</div>`
+    })
+], PacemTabsElement);
+export { PacemTabsElement };

package/dist/esm/ticker.js

@@ -0,0 +1,78 @@
+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, ViewChild, Components, Utils } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+let PacemTickerElement = class PacemTickerElement extends Components.PacemSafeContentElement {
+    constructor() {
+        super(...arguments);
+        this._contentChangeHandler = (evt) => {
+            this._incoming.replaceChildren(...this.#newContent);
+            Utils.addClass(this, 'ticking');
+            Utils.addAnimationEndCallback(this._incoming, element => {
+                Utils.removeClass(this, 'ticking');
+                // swap content
+                this._outgoing.replaceChildren(...this.#newContent);
+                //this.#newContent = null;
+            });
+        };
+    }
+    #newContent;
+    _tickContent(content = this.content) {
+        if (typeof content === 'number') {
+            content = content.toLocaleString();
+        }
+        if (typeof content === 'string') {
+            const safeContent = this.sanitize(content);
+            this.#newContent = this._buildMarkupNode(safeContent);
+        }
+        else if (content instanceof Node) {
+            const safeContent = this.sanitize(content);
+            this.replaceChildren(...(this.#newContent = [safeContent]));
+        }
+        else {
+            const safeContent = content.map(a => this.sanitize(a));
+            this.replaceChildren(...(this.#newContent = safeContent));
+        }
+    }
+    _buildMarkupNode(html) {
+        const tmpl = document.createElement('template');
+        tmpl.innerHTML = html;
+        return Array.from(tmpl.content.childNodes);
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (name === 'content' && !first) {
+            this._tickContent(val);
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._slot.addEventListener('slotchange', this._contentChangeHandler, false);
+        const content = this.content ?? this._slot.assignedNodes();
+        this._tickContent(content);
+    }
+    disconnectedCallback() {
+        const slot = this._slot;
+        if (!Utils.isNull(slot)) {
+            slot.removeEventListener('slotchange', this._contentChangeHandler);
+        }
+        super.disconnectedCallback();
+    }
+};
+__decorate([
+    ViewChild('slot')
+], PacemTickerElement.prototype, "_slot", void 0);
+__decorate([
+    ViewChild('div[part=ticker-outgoing]')
+], PacemTickerElement.prototype, "_outgoing", void 0);
+__decorate([
+    ViewChild('div[part=ticker-incoming]')
+], PacemTickerElement.prototype, "_incoming", void 0);
+PacemTickerElement = __decorate([
+    CustomElement({ tagName: P + '-ticker', shadow: true, template: `<div part="ticker-outgoing"></div><div part="ticker-incoming"></div><slot hidden></slot>` })
+], PacemTickerElement);
+export { PacemTickerElement };

package/dist/esm/toast.js

@@ -0,0 +1,171 @@
+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 PacemToastElement_1;
+import { P, PCSS, CustomElement, Watch, Components, Utils, PropertyConverters, CustomElementUtils, Transformer } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+const PACEM_TOAST_POPS = "pacem:toast:pops";
+let PacemToastElement = PacemToastElement_1 = class PacemToastElement extends Components.PacemElement {
+    constructor() {
+        super(...arguments);
+        this.autohide = true;
+        this.timeout = 3000;
+        this._doHide = (evt) => {
+            window.clearTimeout(this._handle);
+            this.show = false;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._doHide, false);
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (name === 'show') {
+            if (val !== true) {
+                Utils.removeClass(this, 'toast-show');
+                Utils.addClass(this, 'toast-hide');
+                this.dispatchEvent(new CustomEvent('close'));
+                Utils.waitForAnimationEnd(this, 1000).then(() => {
+                    Utils.removeClass(this, 'toast-hide');
+                });
+            }
+            else {
+                let order = CustomElementUtils.getAttachedPropertyValue(PacemToastElement_1, PACEM_TOAST_POPS, 0) - 1;
+                CustomElementUtils.setAttachedPropertyValue(PacemToastElement_1, PACEM_TOAST_POPS, order);
+                this.style.order = '' + order;
+                Utils.addClass(this, 'toast-show');
+                this._show();
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this._doHide, false);
+        super.disconnectedCallback();
+    }
+    _show() {
+        window.clearTimeout(this._handle);
+        if (this.disabled) {
+            return;
+        }
+        if (this.autohide) {
+            this._handle = window.setTimeout(() => { this.show = false; }, this.timeout);
+        }
+    }
+    popup() {
+        if (this.show) {
+            this._show();
+        }
+        else {
+            this.show = true;
+        }
+    }
+    /**
+     * Opinionated shortcut/utility for toast spinning.
+     * @param toaster Toast container
+     * @param level Message criticity level
+     * @param message The message
+     * @param options Further options object
+     */
+    static toast(toaster, level, message, options) {
+        var toast = new PacemToastElement_1();
+        if (!Utils.isNullOrEmpty(options?.cssClass)) {
+            const cssClass = Utils.isArray(options.cssClass) ? options.cssClass.join(' ') : options.cssClass;
+            Utils.addClass(toast, cssClass);
+        }
+        else {
+            toast.className = 'toast-' + level;
+        }
+        if (!Utils.isNull(options?.autohide)) {
+            toast.autohide = options.autohide;
+        }
+        if (options?.timeout > 0) {
+            toast.timeout = options.timeout;
+        }
+        // icon
+        const icon = document.createElement('i');
+        icon.className = PCSS + '-icon text-bigger-steady ' + PCSS + '-margin margin-right-1 flex-auto';
+        var ligature = 'info';
+        switch (level) {
+            case 'danger':
+            case 'error':
+                ligature = 'error';
+                break;
+            case 'warning':
+                ligature = 'warning';
+                break;
+            case 'success':
+                ligature = 'check_circle';
+                break;
+        }
+        icon.textContent = ligature;
+        const container = document.createElement('div');
+        Utils.addClass(container, 'display-flex flex-stretch flex-start flex-nowrap');
+        container.appendChild(icon);
+        // caption
+        const caption = document.createElement('span');
+        Utils.addClass(caption, 'text-small text-pre');
+        if (typeof message === 'string') {
+            caption.innerHTML = message;
+        }
+        else {
+            caption.appendChild(message);
+        }
+        container.appendChild(caption);
+        toast.appendChild(container);
+        toaster.appendChild(toast);
+        // promise
+        return new Promise((resolve, _) => {
+            window.setTimeout(() => {
+                toast.popup();
+            }, // needs some time to digest
+            // state and transition
+            100);
+            const callback = () => {
+                toast.removeEventListener('close', callback, false);
+                resolve();
+                Utils.waitForAnimationEnd(toast, 1000).then(_ => {
+                    toast.remove();
+                });
+            };
+            toast.addEventListener('close', callback, false);
+        });
+    }
+    static toast2(toaster, level, message, options) {
+        let cssClass = options?.cssClass;
+        let cssArray = ['fill-' + level + '-container', 'fill-glass', 'border-solid', 'border-size--2', 'border-round', 'border-radius--6'];
+        if (!Utils.isNullOrEmpty(cssClass)) {
+            if (Utils.isArray(cssClass)) {
+                Array.prototype.push.apply(cssArray, cssClass);
+            }
+            else {
+                Array.prototype.push.apply(cssArray, cssClass.split(' '));
+            }
+        }
+        return PacemToastElement_1.toast(toaster, level, message, Utils.extend({}, options ?? {}, { cssClass: cssArray }));
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], PacemToastElement.prototype, "autohide", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemToastElement.prototype, "timeout", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemToastElement.prototype, "show", void 0);
+__decorate([
+    Transformer("poptoast")
+], PacemToastElement, "toast", null);
+__decorate([
+    Transformer("poptoastcontainer")
+], PacemToastElement, "toast2", null);
+PacemToastElement = PacemToastElement_1 = __decorate([
+    CustomElement({
+        tagName: P + '-toast'
+    })
+], PacemToastElement);
+export { PacemToastElement };

package/dist/esm/toc.js

@@ -0,0 +1,171 @@
+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, CustomElement, Watch, ViewChild, Components, Utils, PropertyConverters, Defaults, Animations, Debounce, avoidHandler } from '@pacem/pacem-core';
+//namespace Components.UI {
+let PacemTocElement = class PacemTocElement extends Components.PacemElement {
+    constructor(_tweener = new Animations.TweenService()) {
+        super();
+        this._tweener = _tweener;
+        this._items = [];
+        this._scrollToSelf = (evt) => {
+            this._scrollTo('#' + evt.target.id);
+        };
+        this._hashChange = (evt) => {
+            evt.preventDefault();
+            this._scrollTo(window.location.hash, false);
+        };
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        // url
+        switch (name) {
+            case 'target':
+                if (!Utils.isNull(this._observer))
+                    this._observe();
+                break;
+            case 'selector':
+                this.refresh();
+                break;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('hashchange', this._hashChange, false);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('hashchange', this._hashChange, false);
+        if (!Utils.isNull(this._observer))
+            this._observer.disconnect();
+        super.disconnectedCallback();
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._observer = new MutationObserver((e) => { this.refresh(); });
+        this._observe();
+    }
+    _onScroll(evt) {
+        this._update(Utils.scrollTop);
+    }
+    _observe() {
+        this._observer.observe(this.target || document.body, { subtree: true, childList: true });
+    }
+    _getTop(dom) {
+        return Utils.offset(dom).top;
+    }
+    _scrollTo(selector, tween = true) {
+        if (/^#[^&=]+$/.test(selector)) {
+            const dom = !Utils.isNullOrEmpty(selector) && document.querySelector(selector), item = !Utils.isNull(dom) && this._items.find(i => i.dom === dom);
+            if (item && !Utils.isNull(item.dom)) {
+                const tget = this._getTop(item.dom) - (this.offset || 0);
+                if (tween) {
+                    let from = Utils.scrollTop;
+                    window.location.hash = item.dom.id;
+                    this._tweener.run(from, tget, 500, 0, Animations.Easings.sineInOut, (t, v) => {
+                        window.scrollTo(0, v);
+                    });
+                }
+                else {
+                    window.scrollTo(0, tget);
+                }
+            }
+        }
+    }
+    _startScrollTo(item, evt) {
+        avoidHandler(evt);
+        this._scrollTo(item.url);
+    }
+    _update(top) {
+        // pick focused item (fallback: first item)
+        const zero = top + (this.offset || 0);
+        var current = this._items && this._items.length > 0 && this._items[0];
+        for (var item of this._items) {
+            if (Utils.offset(item.dom).top <= zero)
+                current = item;
+            else
+                break;
+        }
+        // update css
+        const datasource = [];
+        for (var item of this._items) {
+            if (Utils.isNullOrEmpty(item.dom.id)) {
+                item.dom.id = item.dom.innerText.trim().replace(/[^a-zA-Z0-9]/g, '-').replace(/-*$/, '').replace(/^-*/, '').toLowerCase();
+            }
+            datasource.push({ focus: item === current, label: item.dom.innerText, url: '#' + item.dom.id });
+        }
+        if (!Utils.isNull(this._repeater))
+            this._repeater.datasource = datasource;
+    }
+    /** DOM might change while interacting with the page, this method allows extemporary resets. */
+    refresh() {
+        // reset items
+        for (let item of this._items) {
+            item.dom.removeEventListener('click', this._scrollToSelf, false);
+            Utils.removeClass(item.dom, PCSS + '-toc-item');
+        }
+        //
+        const selector = this.selector;
+        if (Utils.isNullOrEmpty(selector)) {
+            this._repeater && (this._repeater.datasource = []);
+            this.hasContent = false;
+            return;
+        }
+        const items = (this.target || document).querySelectorAll(selector), elements = [];
+        for (let j = 0; j < items.length; j++) {
+            const dom = items.item(j);
+            dom.addEventListener('click', this._scrollToSelf, false);
+            Utils.addClass(dom, PCSS + '-toc-item');
+            elements.push({ dom: dom, top: this._getTop(dom) });
+        }
+        // bootstrap TOC
+        this._items = elements;
+        this._update(Utils.scrollTop);
+        this.hasContent = !Utils.isNullOrEmpty(elements);
+        // initial state
+        let initialTarget = window.location.hash;
+        if (!Utils.isNullOrEmpty(initialTarget)) {
+            // in case of hash
+            setTimeout(() => {
+                this._scrollTo(initialTarget, true);
+            }, 1000);
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemTocElement.prototype, "selector", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemTocElement.prototype, "offset", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Element })
+], PacemTocElement.prototype, "target", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Element })
+], PacemTocElement.prototype, "router", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemTocElement.prototype, "hasContent", void 0);
+__decorate([
+    ViewChild(P + '-repeater')
+], PacemTocElement.prototype, "_repeater", void 0);
+__decorate([
+    Debounce(100)
+], PacemTocElement.prototype, "_onScroll", null);
+__decorate([
+    Debounce(250)
+    /** DOM might change while interacting with the page, this method allows extemporary resets. */
+], PacemTocElement.prototype, "refresh", null);
+PacemTocElement = __decorate([
+    CustomElement({
+        tagName: P + '-toc', shadow: Defaults.USE_SHADOW_ROOT,
+        template: `<${P}-scroll-aware on-${Components.ScrollEventName}=":host._onScroll($event)" url="{{ :host.url }}"></${P}-scroll-aware>
+<${P}-repeater><nav class="${PCSS}-toc"><template>
+    <${P}-a on-click=":host._startScrollTo(^item, $event)" router="{{ :host.router }}" css-class="{{ {'toc-focus': ^item.focus} }}" href="{{ ^item.url }}"><${P}-text text="{{ ^item.label }}"></${P}-text></${P}-a>
+</template></nav></${P}-repeater>`
+    })
+], PacemTocElement);
+export { PacemTocElement };