@pacem/pacem-ui 1.0.0-abel

package/dist/esm/collapse.js

@@ -0,0 +1,72 @@
+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, Utils, PropertyConverters, PacemEventTarget, Components } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+let PacemCollapseElement = class PacemCollapseElement extends PacemEventTarget {
+    constructor() {
+        super(...arguments);
+        this._resizeHandler = (evt) => {
+            this.#state = evt.detail;
+            this._toggle();
+        };
+    }
+    #state;
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (!first) {
+            switch (name) {
+                case 'collapse':
+                    this._toggle();
+                case 'disabled':
+                    if (!Utils.isNull(this._resizer)) {
+                        this._resizer.disabled = this.disabled || this.collapse;
+                    }
+                    break;
+            }
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        const r = this._resizer;
+        this.#state = r.currentSize;
+        this._toggle();
+    }
+    _toggle() {
+        const div = this, collapse = this.collapse, state = this.#state;
+        if (this.disabled || Utils.isNull(div))
+            return;
+        //
+        if (this.horizontal) {
+            Utils.addClass(div, PCSS + '-horizontal');
+            div.style.height = state && (state.height + 'px') || '';
+            div.style.width = collapse ? '0' : (state && state.width + 'px') || '';
+        }
+        else {
+            Utils.removeClass(div, PCSS + '-horizontal');
+            div.style.height = collapse ? '0' : (state && state.height + 'px') || '';
+        }
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemCollapseElement.prototype, "collapse", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], PacemCollapseElement.prototype, "horizontal", void 0);
+__decorate([
+    ViewChild(P + '-resize')
+], PacemCollapseElement.prototype, "_resizer", void 0);
+__decorate([
+    ViewChild(`[part=content]`)
+], PacemCollapseElement.prototype, "_container", void 0);
+PacemCollapseElement = __decorate([
+    CustomElement({
+        tagName: P + '-collapse', shadow: true,
+        template: `<${P}-resize on-${Components.ResizeEventName}=":host._resizeHandler($event)" target="{{ ::_container }}"></${P}-resize><div part="container"><div part="content"><slot></slot></div></div>`
+    })
+], PacemCollapseElement);
+export { PacemCollapseElement };

package/dist/esm/dialog-abstractions.js

@@ -0,0 +1,61 @@
+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 { Watch, Utils, Components, CustomTypedEvent, Logging, avoidHandler } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+export var DialogButtons;
+(function (DialogButtons) {
+    DialogButtons["YesNo"] = "yesno";
+    DialogButtons["YesNoCancel"] = "yesnocancel";
+    DialogButtons["Ok"] = "ok";
+    DialogButtons["OkCancel"] = "okcancel";
+})(DialogButtons || (DialogButtons = {}));
+export var DialogButton;
+(function (DialogButton) {
+    DialogButton["Yes"] = "yes";
+    DialogButton["No"] = "no";
+    DialogButton["Cancel"] = "cancel";
+    DialogButton["Ok"] = "ok";
+})(DialogButton || (DialogButton = {}));
+export const DialogResultEventName = 'commit';
+export class DialogResultEvent extends CustomTypedEvent {
+    constructor(args) {
+        super(DialogResultEventName, args);
+    }
+}
+export class PacemDialogBase extends Components.PacemElement {
+    #deferred;
+    open(state) {
+        const lb = this.lightbox;
+        if (!Utils.isNull(this.#deferred)) {
+            throw `Dialog already open.`;
+        }
+        const deferred = this.#deferred = Promise.withResolvers();
+        if (this.hide || this.disabled) {
+            this.log(Logging.LogLevel.Warn, 'Dialog hidden or disabled, opening forbidden.');
+            deferred.reject();
+        }
+        else {
+            this.dispatchEvent(new Event('open'));
+            lb.show = true;
+            this.state = state;
+        }
+        return deferred.promise;
+    }
+    commit(btn, evt) {
+        avoidHandler(evt);
+        this.log(Logging.LogLevel.Debug, `Committing dialog by clicking '${btn}'.`);
+        const state = this.state;
+        var drevt = new DialogResultEvent({ button: btn, state: state });
+        this.lightbox.show = false;
+        this.#deferred.resolve(drevt.detail);
+        this.#deferred = null;
+        this.dispatchEvent(drevt);
+    }
+}
+__decorate([
+    Watch()
+], PacemDialogBase.prototype, "state", void 0);

package/dist/esm/dialog.js

@@ -0,0 +1,102 @@
+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, Defaults, CustomElement, ViewChild, Watch, PropertyConverters } from '@pacem/pacem-core';
+import { PacemDialogBase, DialogButtons } from './dialog-abstractions';
+//namespace Pacem.Components.UI {
+let PacemDialogElement = class PacemDialogElement extends PacemDialogBase {
+    constructor() {
+        super(...arguments);
+        this.buttons = DialogButtons.Ok;
+        this.okCaption = 'OK';
+        this.yesCaption = 'Yes';
+        this.noCaption = 'No';
+        this.cancelCaption = 'Cancel';
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'buttons':
+                //
+                break;
+        }
+    }
+    open(state) {
+        const retval = super.open(state);
+        switch (this.buttons) {
+            case DialogButtons.Ok:
+            case DialogButtons.OkCancel:
+                this.dialogButtons.ok.focus();
+                break;
+            default:
+                this.dialogButtons.yes.focus();
+                break;
+        }
+        return retval;
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        // HACK: move the buttons outside the .pacem-scrollable element in the lightbox
+        //requestAnimationFrame(() => {
+        //    const elFrom = this.lightbox && this.lightbox.container;
+        //    if (!Utils.isNull(elFrom)) {
+        //        elFrom.appendChild(this._buttons);
+        //        this.dispatchEvent(new PropertyChangeEvent({ propertyName: 'dialogButtons', currentValue: this.dialogButtons }));
+        //    } else {
+        //        this.log(Logging.LogLevel.Warn, `Could not find the lightbox container as expected.`);
+        //    }
+        //});
+    }
+    /** Gets the 'ok', 'yes', 'no' and 'cancel' dialog buttons. */
+    get dialogButtons() {
+        const btns = this._buttons;
+        return {
+            ok: btns && btns.firstElementChild.firstElementChild,
+            yes: btns && btns.firstElementChild.children.item(1),
+            no: btns && btns.firstElementChild.children.item(2),
+            cancel: btns && btns.firstElementChild.lastElementChild
+        };
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.String })
+], PacemDialogElement.prototype, "buttons", void 0);
+__decorate([
+    Watch({ reflectBack: true, converter: PropertyConverters.String })
+], PacemDialogElement.prototype, "okCaption", void 0);
+__decorate([
+    Watch({ reflectBack: true, converter: PropertyConverters.String })
+], PacemDialogElement.prototype, "yesCaption", void 0);
+__decorate([
+    Watch({ reflectBack: true, converter: PropertyConverters.String })
+], PacemDialogElement.prototype, "noCaption", void 0);
+__decorate([
+    Watch({ reflectBack: true, converter: PropertyConverters.String })
+], PacemDialogElement.prototype, "cancelCaption", void 0);
+__decorate([
+    ViewChild(`.${PCSS}-dialog-buttons`)
+], PacemDialogElement.prototype, "_buttons", void 0);
+__decorate([
+    ViewChild(P + '-lightbox')
+], PacemDialogElement.prototype, "lightbox", void 0);
+PacemDialogElement = __decorate([
+    CustomElement({
+        tagName: P + '-dialog', shadow: Defaults.USE_SHADOW_ROOT,
+        template: `<${P}-lightbox modal="true" logger="{{ :host.logger }}">
+    <${P}-content></${P}-content>
+    <div class="${PCSS}-dialog-buttons ${PCSS}-buttonset buttons" part="dialog-buttons" slot="bottom">
+        <div class="buttonset-left">
+            <${P}-button class="button button-size size-small primary dialog-ok" css-class="{{ {'buttonset-last': :host.buttons === 'ok'} }}" on-click=":host.commit('ok', $event)" disabled="{{ :host.disabled || this.hide }}" hide="{{ :host.buttons !== 'ok' && :host.buttons !== 'okcancel' }}"><${P}-text text="{{ :host.okCaption }}"></${P}-text></${P}-button>
+            <${P}-button class="button button-size size-small primary dialog-yes" css-class="{{ {'buttonset-first': :host.buttons !== 'ok' || :host.buttons !== 'okcancel'} }}" on-click=":host.commit('yes', $event)" disabled="{{ :host.disabled || this.hide }}" hide="{{ :host.buttons === 'ok' || :host.buttons === 'okcancel' }}"><${P}-text text="{{ :host.yesCaption }}"></${P}-text></${P}-button>
+            <${P}-button class="button button-size size-small dialog-no" css-class="{{ {'buttonset-last': :host.buttons === 'yesno'} }}" on-click=":host.commit('no', $event)" disabled="{{ :host.disabled || this.hide }}" hide="{{ :host.buttons !== 'yesno' && :host.buttons !== 'yesnocancel' }}"><${P}-text text="{{ :host.noCaption }}"></${P}-text></${P}-button>
+            <${P}-button class="button button-size size-small dialog-cancel" on-click=":host.commit('cancel', $event)" disabled="{{ :host.disabled || this.hide }}" hide="{{ :host.buttons !== 'yesnocancel' && :host.buttons !== 'okcancel' }}"><${P}-text text="{{ :host.cancelCaption }}"></${P}-text></${P}-button>
+        </div>
+    </div>
+</${P}-lightbox>`
+    })
+], PacemDialogElement);
+export { PacemDialogElement };
+//}

package/dist/esm/divider.js

@@ -0,0 +1,48 @@
+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, Utils, PropertyConverters, Components } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+let PacemDividerElement = class PacemDividerElement extends Components.PacemElement {
+    constructor() {
+        super('separator');
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (!first && name === 'orientation') {
+            this._syncOrientation(val);
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._syncOrientation();
+    }
+    _syncOrientation(orientation = this.orientation) {
+        if (orientation !== 'vertical') {
+            // exclude invalid runtime values
+            orientation = 'horizontal';
+        }
+        super.aria.attributes.set('orientation', orientation);
+        switch (orientation) {
+            case 'vertical':
+                Utils.addClass(this, 'divider-vertical');
+                break;
+            default:
+                Utils.removeClass(this, 'divider-vertical');
+                break;
+        }
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.String, emit: false })
+], PacemDividerElement.prototype, "orientation", void 0);
+PacemDividerElement = __decorate([
+    CustomElement({
+        tagName: P + '-divider', shadow: true,
+        template: `<div part="divider"><div part="prepend"></div><slot part="content"></slot><div part="append"></div></div>`
+    })
+], PacemDividerElement);
+export { PacemDividerElement };

package/dist/esm/icon.js

@@ -0,0 +1,131 @@
+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, Utils, PropertyConverters, Components, CustomElementUtils } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+const SVG = /^\s*<svg\s/;
+const FA = /^fa(b|r|s|l|d|t|-brands|-solid|-regular|-light|-thin|-duotone)?\s+fa-/;
+const FA_CDN = { url: "https://kit.fontawesome.com/4922589c3c.js", crossOrigin: true };
+const LNI = /^lni\s+lni-/;
+const LNI_CDN = "https://cdn.lineicons.com/2.0/LineIcons.css";
+const COREUI = /^ci[dlsbf]-/;
+const COREUI_CDN = "https://unpkg.com/@coreui/icons/css/all.min.css";
+const MATERIAL = /^material-icons?\s+([\w]+)/;
+//const MATERIAL_CDN = "https://fonts.googleapis.com/icon?family=Material+Icons";
+const MATERIAL_SYMBOLS = /^material(-symbols?)?\s+([\w]+)/;
+// TODO: put this url in a css variable and use it across the site (eventually)
+const MATERIAL_SYMBOLS_CDN = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";
+const URL = /^(https?:\/\/|\/\/)?.+\.(webp|svg|gif|png|jpe?g)$/;
+const iconImportMemoizer = [];
+function importConditionally(cssClassName, url, sha, crossOrigin, js) {
+    if (iconImportMemoizer.indexOf(cssClassName) >= 0) {
+        return Promise.resolve();
+    }
+    iconImportMemoizer.push(cssClassName);
+    // this is the heavy part, be sure to call it just once (thus the memoizer)
+    if (Utils.Css.isClassDefined(cssClassName)) {
+        return Promise.resolve();
+    }
+    return js ? CustomElementUtils.importjs(url, sha, crossOrigin) : CustomElementUtils.importcss(url, sha, crossOrigin);
+}
+function getIconMarkup(icon) {
+    return new Promise((resolve, reject) => {
+        // null or empty
+        if (Utils.isNullOrEmpty(icon)) {
+            reject('No icon provided');
+        }
+        // svg?
+        else if (SVG.test(icon)) {
+            resolve(icon);
+        }
+        // font-awesome?
+        else if (FA.test(icon)) {
+            importConditionally("fa", FA_CDN.url, undefined, FA_CDN.crossOrigin, true).then(_ => {
+                resolve(`<i class="${icon}"></i>`);
+            }, e => reject(e));
+        }
+        // explicit material symbols?
+        else if (MATERIAL_SYMBOLS.test(icon)) {
+            importConditionally("material-symbols", MATERIAL_SYMBOLS_CDN).then(_ => {
+                const regExcArray = MATERIAL_SYMBOLS.exec(icon), ligature = regExcArray[2], rest = icon.substring(regExcArray[0].length);
+                resolve(`<i class="material-symbols-outlined${rest}">${ligature}</i>`);
+            }, e => reject(e));
+        }
+        // explicit material icons? (switch to the new material-symbols anyway)
+        else if (MATERIAL.test(icon)) {
+            importConditionally("material-icons", MATERIAL_SYMBOLS_CDN).then(_ => {
+                const regExcArray = MATERIAL.exec(icon), ligature = regExcArray[1], rest = icon.substring(regExcArray[0].length);
+                resolve(`<i class="material-icons${rest}">${ligature}</i>`);
+            }, e => reject(e));
+        }
+        // line-icons?
+        else if (LNI.test(icon)) {
+            importConditionally('lni', LNI_CDN).then(_ => {
+                resolve(`<i class="${icon}"></i>`);
+            }, e => reject(e));
+        }
+        // coreui icons?
+        else if (COREUI.test(icon)) {
+            importConditionally('clb', COREUI_CDN).then(_ => {
+                resolve(`<i class="${icon}"></i>`);
+            }, e => reject(e));
+        }
+        // image url?
+        else if (URL.test(icon)) {
+            resolve(`<img src="${icon}" />`);
+        }
+        else {
+            // assume material icon as default
+            const parts = icon.trim().split(' ');
+            const ligature = parts[0];
+            const css = parts.length > 1 ? ' ' + parts.slice(1).join(' ') : '';
+            resolve(`<i class="${PCSS}-icon${css}">${ligature}</i>`);
+        }
+    });
+}
+let PacemIconElement = class PacemIconElement extends Components.PacemElement {
+    constructor() {
+        super('', { hidden: 'true' });
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (!first) {
+            switch (name) {
+                case 'icon':
+                    this._setIcon();
+                    break;
+                case 'hide':
+                    if (!val) {
+                        // overrides the default `PacemElement` behavior:
+                        // keep aria-hidden=true (to prevent screen readers from reading the ligatures)
+                        this.aria.attributes.set('hidden', 'true');
+                    }
+                    break;
+            }
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._setIcon();
+    }
+    _setIcon(icon = this.icon) {
+        getIconMarkup(icon).then(markup => {
+            this.innerHTML = markup;
+        }, _ => {
+            this.innerHTML = '';
+        });
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemIconElement.prototype, "icon", void 0);
+PacemIconElement = __decorate([
+    CustomElement({
+        tagName: P + '-icon'
+    })
+], PacemIconElement);
+export { PacemIconElement };
+//}

package/dist/esm/image.js

@@ -0,0 +1,109 @@
+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, Utils, PropertyConverters, Components } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+let PacemImageElement = class PacemImageElement extends Components.PacemElement {
+    constructor() {
+        super('img');
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (!first) {
+            switch (name) {
+                case 'src':
+                case 'disabled':
+                    this._setSource();
+                    break;
+                case 'size':
+                case 'adapt':
+                    this._setLayout();
+                    break;
+                case 'loading':
+                    (!val ? Utils.addClass : Utils.removeClass)(this, 'img-ready');
+                    break;
+            }
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._setLayout();
+        this._setSource();
+    }
+    _setLayout() {
+        const sizeDeclared = !Utils.isNullOrEmpty(this.size);
+        const bgsize = this.adapt || 'auto';
+        const size = this.size || this.#naturalSize || { width: '0', height: '0' };
+        this.style.backgroundSize = bgsize;
+        const adapt = bgsize === 'auto', w = size.width, h = size.height;
+        if (adapt || sizeDeclared) {
+            this.style.width = w || '';
+            this.style.height = h || '';
+        }
+    }
+    #naturalSize;
+    async _setSource() {
+        if (this.disabled || !this.isReady) {
+            return;
+        }
+        //
+        const src = this.src;
+        this.style.backgroundImage = '';
+        if (!Utils.isNullOrEmpty(src)) {
+            this.loading = true;
+            try {
+                const img = await Utils.loadImage(src);
+                let weight, entries, entry;
+                if (window.performance
+                    && (entries = performance.getEntriesByName(img.src))
+                    && (entry = entries[0])) {
+                    weight = entry.decodedBodySize;
+                }
+                this.#naturalSize = {
+                    width: img.naturalWidth + 'px',
+                    height: img.naturalHeight + 'px',
+                    weight: weight
+                };
+                this._setLayout();
+                this.style.backgroundImage = `url("${img.src}")`;
+            }
+            catch (e) {
+                // 404, whatever...
+            }
+            finally {
+                this.loading = false;
+            }
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemImageElement.prototype, "adapt", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemImageElement.prototype, "src", void 0);
+__decorate([
+    Watch({ emit: false,
+        converter: {
+            convert: (attr, el) => {
+                // parse strings like "20,20" ".5 , 1vh" "15" and returns respectively ["20px", "20px"], [".5px", "1vh"] and ["15px", "15px"]
+                const regex = /^\s*([\d.]+)(px|em|rem|vw|vh)?\s*(?:,\s*([\d.]+)(px|em|rem|vw|vh)?)?\s*$/i;
+                const match = regex.exec(attr);
+                const width = match ? match[1] + (match[2] || 'px') : '0', height = match ? (match[3] ? match[3] + (match[4] || 'px') : width) : '0';
+                return { width, height };
+            },
+            convertBack: (prop, el) => `${prop?.width},${prop?.height}`
+        }, reflectBack: true })
+], PacemImageElement.prototype, "size", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemImageElement.prototype, "loading", void 0);
+PacemImageElement = __decorate([
+    CustomElement({
+        tagName: P + '-img'
+    })
+], PacemImageElement);
+export { PacemImageElement };

package/dist/esm/index-components-ui.js

@@ -0,0 +1,41 @@
+export * from './adapter';
+export * from './anchor';
+export * from './balloon';
+export * from './binder';
+export * from './blade';
+export * from './bottom-sheet';
+export * from './button';
+export * from './buttonset';
+export * from './calendar';
+export * from './collapse';
+export * from './dialog-abstractions';
+export * from './dialog';
+export * from './divider';
+export * from './icon';
+export * from './image';
+export * from './infinite-scroller';
+export * from './iterative';
+export * from './lightbox-abstractions';
+export * from './lightbox';
+export * from './loader';
+export * from './markdown';
+export * from './markdown-svc';
+export * from './marquee';
+export * from './media-query';
+export * from './menu';
+export * from './pager';
+export * from './picture';
+export * from './progressbar';
+export * from './sidebar';
+export * from './slideshow';
+export * from './social-twitter';
+export * from './sticky-header';
+export * from './tabs';
+export * from './ticker';
+export * from './toast';
+export * from './toc';
+export * from './tuner';
+export * from './types';
+export * from './vibration';
+export * from './view';
+export * from './window';

package/dist/esm/index-components.js

@@ -0,0 +1 @@
+export * as UI from './index-components-ui';

package/dist/esm/index-iife.js

@@ -0,0 +1,3 @@
+import { DeepMerger } from '@pacem/pacem-foundation';
+import * as Output from './index';
+DeepMerger.merge(Output);

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * as Components from './index-components';