@pacem/pacem 1.0.0-abel

package/dist/browser/pacem-plus.js

@@ -0,0 +1,2373 @@
+/**
+ * @pacem/pacem v1.0.0-abel (https://js.pacem.it)
+ * Copyright 2026 Pacem (https://pacem.it)
+ * Licensed under Apache-2.0
+ */
+(function (pacemFoundation, pacemCore, pacemUi, pacemScaffolding) {
+    'use strict';
+
+    var __decorate$b = (undefined && undefined.__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;
+    };
+    class PacemBaseCellElement extends pacemCore.Components.PacemSafeContentElement {
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this.updateColumnPosition();
+            this.updateLayout(this.metadata);
+        }
+        updateColumnPosition(metadata = this.metadata, state = this.gridState) {
+            this.style.gridColumn = (state.orderedColumns.indexOf(metadata.prop) + 1).toString();
+        }
+        updateVisibility(state = this.state) {
+            this.hide = !!state.hidden;
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'metadata':
+                        this.updateLayout(val);
+                        break;
+                    case 'gridState':
+                        this.updateColumnPosition();
+                        break;
+                    case 'state':
+                        this.updateVisibility();
+                        break;
+                }
+            }
+        }
+    }
+    __decorate$b([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Json })
+    ], PacemBaseCellElement.prototype, "metadata", void 0);
+    __decorate$b([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Json })
+    ], PacemBaseCellElement.prototype, "state", void 0);
+    __decorate$b([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Json })
+    ], PacemBaseCellElement.prototype, "gridState", void 0);
+
+    var __decorate$a = (undefined && undefined.__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;
+    };
+    const DefaultLocalizationOptions = {
+        headCell: (headCellProp, prop, dictionary) => {
+            switch (headCellProp) {
+                case 'name':
+                    return dictionary['column_name_' + prop] ?? dictionary['name_' + prop];
+                case 'description':
+                    return dictionary['column_description_' + prop] ?? dictionary['description_' + prop];
+            }
+            return null;
+        }
+    };
+    class DataGrids {
+        /**
+         * Localizes the metadata of a data grid **in place** using a translation dictionary.
+         * Only the `name` and `description` properties of data columns are localized.
+         *
+         * By default, this method uses an opinionated key lookup strategy and attempts to resolve translation keys in the following format:
+         * - `column_name_{key}` for column names
+         * - `column_description_{key}` for column descriptions/tooltips
+         *
+         * This behavior can be customized by providing a replacement strategy through the `options` parameter.
+         *
+         * @param metadata The metadata to localize.
+         * @param dictionary The translation dictionary.
+         * @param options Optional customization of the replacement strategy.
+         * @returns The localized metadata.
+         */
+        static localizeMetadata(metadata, dictionary, options) {
+            options = pacemCore.Utils.extend({}, DefaultLocalizationOptions, options ?? {});
+            // do not clone (for now...)
+            for (let prop of metadata) {
+                const display = prop.headCell = prop.headCell ?? {};
+                display.name = options.headCell('name', prop.prop, dictionary) ?? display.name; // dictionary['column_name_' + prop.prop] ?? dictionary['name_' + prop.prop] ?? display.name;
+                display.description = options.headCell('description', prop.prop, dictionary) ?? /*  dictionary['column_description_' + prop.prop] ?? dictionary['description_' + prop.prop] ?? */ display.description;
+            }
+            return metadata;
+        }
+    }
+    __decorate$a([
+        pacemCore.Transformer('datagrids.localizeMetadata')
+    ], DataGrids, "localizeMetadata", null);
+
+    var l10n = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        DataGrids: DataGrids
+    });
+
+    var indexPlus = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        L10n: l10n,
+        PacemBaseCellElement: PacemBaseCellElement
+    });
+
+    var __decorate$9 = (undefined && undefined.__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;
+    };
+    const UI$5 = pacemUi.Components.UI;
+    /** @deprecated*/
+    let PacemCarouselElement = class PacemCarouselElement extends UI$5.PacemAdaptedIterativeElement {
+        constructor() {
+            super(...arguments);
+            this.interval = 4000;
+        }
+    };
+    __decorate$9([
+        pacemCore.ViewChild(pacemCore.P + '-adapter')
+    ], PacemCarouselElement.prototype, "adapter", void 0);
+    __decorate$9([
+        pacemCore.ViewChild(pacemCore.P + '-slideshow')
+    ], PacemCarouselElement.prototype, "slideshow", void 0);
+    __decorate$9([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Number })
+    ], PacemCarouselElement.prototype, "interval", void 0);
+    __decorate$9([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemCarouselElement.prototype, "pausable", void 0);
+    PacemCarouselElement = __decorate$9([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-carousel', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<${pacemCore.P}-repeater datasource="{{ :host.datasource }}">
+        <${pacemCore.P}-slideshow class="${pacemCore.PCSS}-carousel" adapter="{{ ::adapter }}" index="{{ :host.index, twoway }}" on-load="this.focus()">
+
+            <template>
+
+                <${pacemCore.P}-slide class="${pacemCore.PCSS}-carousel-item" css-class="{{ { '${pacemCore.PCSS}-carousel-previous': :host.isPrevious(^index, ::slideshow.index), '${pacemCore.PCSS}-carousel-next': :host.isNext(^index, ::slideshow.index), '${pacemCore.PCSS}-carousel-focus': ^index === ::slideshow.index } }}">
+                <${pacemCore.P}-a href="{{ ^item.url }}">
+                    <${pacemCore.P}-img disabled="{{ !:host.isCloseTo(^index, ::slideshow.index) }}" class="${pacemCore.PCSS}-carousel-splash" adapt="cover" src="{{ ^item.image }}"></${pacemCore.P}-img>
+                    <div class="${pacemCore.PCSS}-carousel-content">
+                        <div class="${pacemCore.PCSS}-carousel-caption">
+                            <h3><${pacemCore.P}-text text="{{ ^item.title }}"></${pacemCore.P}-text></h3>
+                            <${pacemCore.P}-panel class="paragraph" content="{{ ^item.content }}"></${pacemCore.P}-panel>
+                        </div>
+                    </div>
+                </${pacemCore.P}-a>
+                </${pacemCore.P}-slide>
+
+            </template>
+        </${pacemCore.P}-slideshow>
+
+    </${pacemCore.P}-repeater><${pacemCore.P}-adapter pausable="{{ :host.pausable }}" class="${pacemCore.PCSS}-carousel-adapter" interval="{{ :host.interval }}"></${pacemCore.P}-adapter>`
+        })
+    ], PacemCarouselElement);
+
+    var __decorate$8 = (undefined && undefined.__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;
+    };
+    const UI$4 = pacemUi.Components.UI;
+    //namespace Pacem.Components.Plus {
+    class PacemContextMenuItemElement extends pacemCore.Components.PacemItemElement {
+        connectedCallback() {
+            super.connectedCallback();
+            pacemCore.Utils.addClass(this, pacemCore.PCSS + '-context-menuitem');
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            const container = this.container;
+            if (container instanceof PacemContextMenuElement) {
+                container.refresh();
+            }
+        }
+    }
+    let PacemContextMenuItemCommandElement = class PacemContextMenuItemCommandElement extends PacemContextMenuItemElement {
+        createMenuItemElement() {
+            const retval = new UI$4.PacemButtonElement();
+            retval.commandArgument = this.commandArgument;
+            retval.commandName = this.commandName;
+            retval.textContent = this.caption;
+            retval.iconGlyph = this.iconGlyph;
+            retval.confirmationDialog = this.confirmationDialog;
+            retval.confirmationMessage = this.confirmationMessage;
+            retval.tooltip = this.tooltip;
+            retval.disabled = this.disabled;
+            retval.cssClass = this.buttonCssClass;
+            return retval;
+        }
+    };
+    __decorate$8([
+        pacemCore.Watch({ emit: false, /* important */ reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemContextMenuItemCommandElement.prototype, "commandName", void 0);
+    __decorate$8([
+        pacemCore.Watch({ emit: false, /* important */ reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemContextMenuItemCommandElement.prototype, "caption", void 0);
+    __decorate$8([
+        pacemCore.Watch({ emit: false, /* important */ reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemContextMenuItemCommandElement.prototype, "tooltip", void 0);
+    __decorate$8([
+        pacemCore.Watch({ emit: false, /* important */ reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemContextMenuItemCommandElement.prototype, "iconGlyph", void 0);
+    __decorate$8([
+        pacemCore.Watch({ emit: false, /* important */ reflectBack: true, converter: pacemCore.PropertyConverters.StringArray })
+    ], PacemContextMenuItemCommandElement.prototype, "buttonCssClass", void 0);
+    __decorate$8([
+        pacemCore.Watch({ emit: false, /* important */ reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemContextMenuItemCommandElement.prototype, "confirmationMessage", void 0);
+    __decorate$8([
+        pacemCore.Watch({ emit: false, /* important */ reflectBack: true, converter: pacemCore.PropertyConverters.Element })
+    ], PacemContextMenuItemCommandElement.prototype, "confirmationDialog", void 0);
+    __decorate$8([
+        pacemCore.Watch({ emit: false, /* important */ reflectBack: true, converter: pacemCore.PropertyConverters.Json })
+    ], PacemContextMenuItemCommandElement.prototype, "commandArgument", void 0);
+    PacemContextMenuItemCommandElement = __decorate$8([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-context-menuitem-command' })
+    ], PacemContextMenuItemCommandElement);
+    let PacemContextMenuItemSeparatorElement = class PacemContextMenuItemSeparatorElement extends PacemContextMenuItemElement {
+        createMenuItemElement() {
+            const retval = document.createElement('hr');
+            retval.style.pointerEvents = 'none';
+            return retval;
+        }
+    };
+    PacemContextMenuItemSeparatorElement = __decorate$8([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-context-menuitem-separator' })
+    ], PacemContextMenuItemSeparatorElement);
+    // <${P}-button class="button-flat ${PCSS}-margin margin-0"><${P}-icon icon="{{ :host.icon || 'more_horiz' }}"></${P}-icon></${P}-button>
+    let PacemContextMenuElement = class PacemContextMenuElement extends pacemCore.Components.PacemItemsContainerElement {
+        constructor() {
+            super(...arguments);
+            this._dispatchCommand = (e) => {
+                pacemCore.avoidHandler(e);
+                this._onCommand(new pacemCore.CommandEvent({ commandName: e.detail.commandName, commandArgument: e.detail.commandArgument ?? this.commandArgument }));
+            };
+            this._slotchangeHandler = (evt) => {
+                this._resetLayout();
+            };
+            this._attributeChangeHandler = (evt) => this._refreshMenuItems;
+            this._mouseupHandler = (evt) => {
+                const balloon = this._ensureBalloon();
+                if (!pacemCore.Utils.isNull(balloon)) {
+                    balloon.popout();
+                }
+            };
+        }
+        validate(item) {
+            return item instanceof PacemContextMenuItemElement;
+        }
+        #btn;
+        #icon;
+        #balloon;
+        _ensureButton() {
+            if (!pacemCore.Utils.isNull(this.#btn)) {
+                return this.#btn;
+            }
+            const btnSlot = this._slot;
+            if (pacemCore.Utils.isNull(btnSlot)) {
+                return null;
+            }
+            const found = this._lookForAButton();
+            if (!pacemCore.Utils.isNull(found)) {
+                return this.#btn = found;
+            }
+            const retval = new UI$4.PacemButtonElement();
+            retval.setAttribute('slot', 'button');
+            retval.className = `${pacemCore.PCSS}-margin margin-0 button-flat`;
+            const icon = this.#icon = new UI$4.PacemIconElement();
+            retval.appendChild(icon);
+            this.appendChild(retval);
+            return this.#btn = retval;
+        }
+        _lookForAButton() {
+            const btnSlot = this._slot;
+            if (pacemCore.Utils.isNull(btnSlot)) {
+                return null;
+            }
+            const buttons = btnSlot.assignedElements({ flatten: true });
+            if (pacemCore.Utils.isNullOrEmpty(buttons)) {
+                return null;
+            }
+            return buttons[0];
+        }
+        _ensureBalloon() {
+            let balloon = this.#balloon;
+            if (!pacemCore.Utils.isNull(balloon)) {
+                return balloon;
+            }
+            const shell = pacemCore.CustomElementUtils.findAncestorShell(this);
+            if (pacemCore.Utils.isNull(shell)) {
+                return null;
+            }
+            balloon = new UI$4.PacemBalloonElement();
+            balloon.options = { trigger: UI$4.BalloonTrigger.Click, position: UI$4.BalloonPosition.HorizontalAuto, align: UI$4.BalloonAlignment.Auto, autoAdjust: true };
+            //balloon.target = this._btn;
+            balloon.addEventListener(pacemCore.CommandEventName, this._dispatchCommand, false);
+            balloon.className = `${pacemCore.PCSS}-contextmenu`;
+            shell.appendChild(balloon);
+            return this.#balloon = balloon;
+        }
+        register(item) {
+            const retval = super.register(item);
+            if (retval) {
+                item.addEventListener(pacemCore.AttributeChangeEventName, this._attributeChangeHandler, false);
+                this._refreshMenuItems();
+            }
+            return retval;
+        }
+        unregister(item) {
+            const retval = super.unregister(item);
+            if (retval) {
+                item.removeEventListener(pacemCore.AttributeChangeEventName, this._attributeChangeHandler, false);
+                this._refreshMenuItems();
+            }
+            return retval;
+        }
+        _onCommand(evt) {
+            this.dispatchEvent(new CustomEvent(pacemCore.CommandEventName, { detail: evt.detail, cancelable: true, bubbles: true }));
+            this.dispatchEvent(new CustomEvent(evt.detail.commandName.toLowerCase(), { detail: evt.detail.commandArgument, cancelable: true, bubbles: true }));
+        }
+        _resetLayout() {
+            const btn = this._ensureButton();
+            const balloon = this._ensureBalloon();
+            if (!pacemCore.Utils.isNull(btn) && !pacemCore.Utils.isNull(balloon)) {
+                balloon.target = btn;
+            }
+            this._toggleBtn();
+            this._toggleIcon();
+        }
+        _toggleBtn(disabled = this.disabled) {
+            const btn = this.#btn;
+            if (!pacemCore.Utils.isNull(btn) && btn instanceof pacemCore.Components.PacemElement) {
+                btn.disabled = disabled;
+            }
+        }
+        _toggleIcon(icon = this.icon) {
+            const iconEl = this.#icon;
+            if (!pacemCore.Utils.isNull(iconEl)) {
+                iconEl.icon = icon;
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._resetLayout();
+            this._slot.addEventListener('slotchange', this._slotchangeHandler, false);
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'icon':
+                        this._toggleIcon(val);
+                        break;
+                    case 'disabled':
+                        this._toggleBtn(val);
+                        break;
+                }
+            }
+        }
+        disconnectedCallback() {
+            this._disposeButton();
+            this._disposeSlot();
+            this._disposeBalloon();
+            super.disconnectedCallback();
+        }
+        refresh() {
+            this._refreshMenuItems();
+        }
+        _disposeButton() {
+            this.#btn = this.#icon = null;
+        }
+        _disposeSlot() {
+            const slot = this._slot;
+            if (!pacemCore.Utils.isNull(slot)) {
+                slot.removeEventListener('slotchange', this._slotchangeHandler, false);
+            }
+        }
+        _disposeBalloon() {
+            const balloon = this.#balloon;
+            if (!pacemCore.Utils.isNull(balloon)) {
+                balloon.removeEventListener(pacemCore.CommandEventName, this._dispatchCommand, false);
+                this._disposeBalloonChildren(0);
+                balloon.remove();
+                this.#balloon = null;
+            }
+        }
+        _disposeBalloonChildren(startAt) {
+            const balloon = this.#balloon;
+            const count = balloon.children.length;
+            for (let j = count - 1; j >= startAt; j--) {
+                // cleanup
+                const rem = balloon.children.item(j);
+                rem.removeEventListener('mouseup', this._mouseupHandler, false);
+                rem.remove();
+            }
+        }
+        _refreshMenuItems() {
+            const balloon = this._ensureBalloon();
+            if (pacemCore.Utils.isNull(balloon)) {
+                return;
+            }
+            const count = balloon.children.length;
+            let cursor = 0;
+            for (let item of this.items) {
+                if (item.hide) {
+                    continue;
+                }
+                const menuitem = item.createMenuItemElement();
+                menuitem.addEventListener('mouseup', this._mouseupHandler, false);
+                if (cursor < count) {
+                    const repl = balloon.children.item(cursor);
+                    repl.removeEventListener('mouseup', this._mouseupHandler, false);
+                    repl.replaceWith(menuitem);
+                }
+                else {
+                    balloon.appendChild(menuitem);
+                }
+                cursor++;
+            }
+            this._disposeBalloonChildren(cursor);
+        }
+    };
+    __decorate$8([
+        pacemCore.ViewChild('slot[name=button]')
+    ], PacemContextMenuElement.prototype, "_slot", void 0);
+    __decorate$8([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Json })
+    ], PacemContextMenuElement.prototype, "commandArgument", void 0);
+    __decorate$8([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemContextMenuElement.prototype, "icon", void 0);
+    __decorate$8([
+        pacemCore.Debounce(true)
+    ], PacemContextMenuElement.prototype, "_refreshMenuItems", null);
+    PacemContextMenuElement = __decorate$8([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-context-menu', shadow: true,
+            template: `<slot name="button"></slot><slot></slot>`
+        })
+    ], PacemContextMenuElement);
+
+    var __decorate$7 = (undefined && undefined.__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;
+    };
+    const UI$3 = pacemUi.Components.UI;
+    const Scaffolding = pacemScaffolding.Components.Scaffolding;
+    //namespace Pacem.Components.Plus {
+    var EditMode;
+    (function (EditMode) {
+        EditMode["Text"] = "text";
+        EditMode["Html"] = "html";
+        EditMode["Image"] = "image";
+        EditMode["Markdown"] = "markdown";
+    })(EditMode || (EditMode = {}));
+    let PacemEditElement = class PacemEditElement extends pacemCore.Components.PacemElement {
+        constructor(_markdown = new UI$3.MarkdownService()) {
+            super();
+            this._markdown = _markdown;
+            // #endregion
+            // #endregion
+            this._dialogPropertyChangedHandler = (evt) => {
+                this._dialogPropertyChangedCallback(evt);
+            };
+            this._broadcastFetchRequestEventName = (evt) => {
+                this.dispatchEvent(new Scaffolding.ImageFetchRequestEvent(evt.detail));
+            };
+            this._innerValueChangedHandler = (evt) => {
+                if (evt.detail.propertyName === 'value' && !pacemCore.Utils.isNull(this._dialog))
+                    this._dialog.state = evt.detail.currentValue;
+            };
+            this._editHandler = (evt) => {
+                this.edit(evt);
+            };
+        }
+        _addButton() {
+            /*<pacem-balloon options="{ position: '${UI.BalloonPosition.Top}', align: '${UI.BalloonAlignment.End}', behavior: '${UI.BalloonBehavior.Inert}', hoverDelay: 0 }" disabled="{{ :host.disabled }}" class="pacem-edit-balloon">
+                <pacem-button class="pacem-edit" on-click=":host.edit($event)"></pacem-button>
+            </pacem-balloon>*/
+            if (!pacemCore.Utils.isNull(this._button))
+                return;
+            //
+            var btn = document.createElement(pacemCore.P + '-button');
+            btn.className = pacemCore.PCSS + '-edit-button';
+            btn.addEventListener('click', this._editHandler, false);
+            this._target.appendChild(btn);
+            //
+            return this._button = btn;
+        }
+        _removeButton() {
+            var btn = this._button;
+            if (pacemCore.Utils.isNull(btn))
+                return;
+            btn.removeEventListener('click', this._editHandler, false);
+            btn.remove();
+            this._button = null;
+        }
+        // #region dialog
+        _addDialog() {
+            /* <pacem-dialog buttons="'${ UI.DialogButtons.OkCancel}'" on-${PropertyChangeEventName}=":host._dialogPropertyChangedCallback($event)"> */
+            var dialog = document.createElement(pacemCore.P + '-dialog');
+            dialog.buttons = UI$3.DialogButtons.OkCancel;
+            dialog.addEventListener(pacemCore.PropertyChangeEventName, this._dialogPropertyChangedHandler, false);
+            dialog.appendChild(this._addTextarea());
+            dialog.appendChild(this._addContenteditable());
+            dialog.appendChild(this._addEditImage());
+            document.body.appendChild(dialog);
+            //
+            return this._dialog = dialog;
+        }
+        _removeDialog() {
+            this._removeTextarea();
+            this._removeContenteditable();
+            this._removeEditImage();
+            if (!pacemCore.Utils.isNull(this._dialog)) {
+                this._dialog.removeEventListener(pacemCore.PropertyChangeEventName, this._dialogPropertyChangedHandler, false);
+                this._dialog.remove();
+            }
+        }
+        // #region textarea
+        _addTextarea() {
+            /*<pacem-textarea hide="{{ :host.type === '${ EditMode.Html}' || :host.type === '${EditMode.Image}' }}" value="{{ ::_dialog.state, twoway }}"></pacem-textarea>*/
+            var textarea = document.createElement(pacemCore.P + '-textarea');
+            textarea.className = pacemCore.PCSS + '-edit-text';
+            textarea.addEventListener(pacemCore.PropertyChangeEventName, this._innerValueChangedHandler, false);
+            const type = this.type || EditMode.Text;
+            textarea.hide = type !== EditMode.Text && type !== EditMode.Markdown;
+            return this._textarea = textarea;
+        }
+        _removeTextarea() {
+            if (!pacemCore.Utils.isNull(this._textarea))
+                this._textarea.removeEventListener(pacemCore.PropertyChangeEventName, this._innerValueChangedHandler, false);
+        }
+        // #endregion
+        // #region contenteditable
+        _addContenteditable() {
+            /*<pacem-contenteditable hide="{{ :host.type != '${ EditMode.Html}' }}" value="{{ ::_dialog.state, twoway  }}"></pacem-contenteditable> */
+            var contenteditable = document.createElement(pacemCore.P + '-contenteditable');
+            contenteditable.className = pacemCore.PCSS + '-edit-content';
+            contenteditable.addEventListener(pacemCore.PropertyChangeEventName, this._innerValueChangedHandler, false);
+            const type = this.type || EditMode.Text;
+            contenteditable.hide = type !== EditMode.Html;
+            return this._contenteditable = contenteditable;
+        }
+        _removeContenteditable() {
+            if (!pacemCore.Utils.isNull(this._contenteditable))
+                this._contenteditable.removeEventListener(pacemCore.PropertyChangeEventName, this._innerValueChangedHandler, false);
+        }
+        // #endregion
+        // #region edit-image
+        _addEditImage() {
+            /*<!-- img -->
+    <pacem-panel class="pacem-edit-image" hide="{{ :host.type != '${ EditMode.Image}' }}"
+        css-class="{{ {'pacem-uploading': ::_uploader.uploading, 'pacem-upload-enabled': !Pacem.Utils.isNullOrEmpty(:host.imageUploadUrl)} }}">
+        <pacem-input-search value="{{ :host.hint, twoway }}"></pacem-input-search>
+        <pacem-upload pattern="'.+\.(jpe?g|png)$'" url="{{ :host.imageUploadUrl }}" on-${ PropertyChangeEventName}=":host._uploaderPropertyChangedCallback($event)" hide="{{ Pacem.Utils.isNullOrEmpty(:host.imageUploadUrl) }}"></pacem-upload>
+        <pacem-infinite-scroller container="{{ ::_repeater }}" on-fetchmore=":host._imagefetchSuddenly()" disabled="{{ :host._fetching || !:host._open || :host._images.length >= :host.imageSet.total }}"></pacem-infinite-scroller>
+        <pacem-repeater datasource="{{ :host._images }}">
+            <template>
+                <pacem-img css-class="{{ {'pacem-selected': ^item.src === ::_dialog.state } }}" on-click="::_dialog.state = ^item.src" src="{{ ^item.thumb }}" adapt="'contain'"></pacem-img>
+            </template>
+        </pacem-repeater>
+        <pacem-progressbar></pacem-progressbar>
+    </pacem-panel>*/
+            var editImage = document.createElement(pacemCore.P + '-edit-image');
+            editImage.disabled = true;
+            editImage.addEventListener(pacemCore.PropertyChangeEventName, this._innerValueChangedHandler, false);
+            editImage.addEventListener(Scaffolding.ImageFetchRequestEventName, this._broadcastFetchRequestEventName, false);
+            const type = this.type || EditMode.Text;
+            editImage.hide = type !== EditMode.Image;
+            editImage.uploadUrl = this.imageUploadUrl;
+            editImage.allowSnapshot = this.allowSnapshot;
+            editImage.maxWidth = this.maxImageWidth;
+            editImage.maxHeight = this.maxImageHeight;
+            return this._editImage = editImage;
+        }
+        _removeEditImage() {
+            if (!pacemCore.Utils.isNull(this._editImage)) {
+                this._editImage.removeEventListener(pacemCore.PropertyChangeEventName, this._innerValueChangedHandler, false);
+                this._editImage.removeEventListener(Scaffolding.ImageFetchRequestEventName, this._broadcastFetchRequestEventName, false);
+            }
+        }
+        _update(val) {
+            var cnt = this._content;
+            switch (this.type) {
+                case EditMode.Html:
+                    cnt.innerHTML = val;
+                    break;
+                case EditMode.Markdown:
+                    switch (cnt.localName) {
+                        case pacemCore.P + '-markdown':
+                            cnt.value = val;
+                            break;
+                        default:
+                            cnt.innerHTML = this._markdown.toHtml(val);
+                            break;
+                    }
+                    break;
+                case EditMode.Image:
+                    switch (cnt.localName) {
+                        case 'img':
+                        case pacemCore.P + '-img':
+                            cnt['src'] = val;
+                            break;
+                        default:
+                            cnt.style.backgroundImage = `url(${val})`;
+                            break;
+                    }
+                    break;
+                default:
+                    this._content.textContent = val;
+                    break;
+            }
+        }
+        _retrieve() {
+            var cnt = this._content;
+            switch (this.type) {
+                case EditMode.Html:
+                    return cnt.innerHTML;
+                case EditMode.Image:
+                    switch (cnt.localName) {
+                        case pacemCore.P + '-img':
+                        case 'img':
+                            return cnt['src'];
+                        default:
+                            let styled = getComputedStyle(cnt).backgroundImage, matches = /url\(["']?([^'"]+)["']?\)/.exec(styled);
+                            return matches && matches.length && matches[1];
+                    }
+                case EditMode.Markdown:
+                    return cnt['value'] || cnt.textContent;
+                default:
+                    return cnt.textContent;
+            }
+        }
+        _setup() {
+            const val = this.disabled;
+            if (val) {
+                pacemCore.Utils.removeClass(this._target, pacemCore.PCSS + '-editing');
+                this._removeButton();
+            }
+            else {
+                pacemCore.Utils.addClass(this._target, pacemCore.PCSS + '-editing');
+                this._addButton();
+            }
+        }
+        _dialogPropertyChangedCallback(evt) {
+            if (evt.detail.propertyName === 'state') {
+                const val = evt.detail.currentValue;
+                if (!pacemCore.Utils.isNull(this._textarea))
+                    this._textarea.value = val;
+                if (!pacemCore.Utils.isNull(this._contenteditable))
+                    this._contenteditable.value = val;
+                if (!pacemCore.Utils.isNull(this._editImage))
+                    this._editImage.value = val;
+                this._update(evt.detail.currentValue);
+            }
+        }
+        get _target() {
+            var cnt = this.target;
+            if (pacemCore.Utils.isNull(cnt))
+                cnt = this.firstElementChild;
+            return cnt;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this._addDialog();
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._addButton();
+            this._setup();
+        }
+        disconnectedCallback() {
+            this._removeButton();
+            this._removeDialog();
+            super.disconnectedCallback();
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            switch (name) {
+                case 'imageUploadUrl':
+                    if (!pacemCore.Utils.isNull(this._editImage))
+                        this._editImage.uploadUrl = val;
+                    break;
+                case 'allowSnapshot':
+                    if (!pacemCore.Utils.isNull(this._editImage))
+                        this._editImage.allowSnapshot = val;
+                    break;
+                case 'imageSet':
+                    if (!pacemCore.Utils.isNull(this._editImage))
+                        this._editImage.imageSet = val;
+                    break;
+                case 'disabled':
+                    this._setup();
+                    break;
+                case 'type':
+                    const type = val;
+                    if (!pacemCore.Utils.isNull(this._textarea))
+                        this._textarea.hide = type !== EditMode.Text && type !== EditMode.Markdown;
+                    if (!pacemCore.Utils.isNull(this._contenteditable))
+                        this._contenteditable.hide = type !== EditMode.Html;
+                    if (!pacemCore.Utils.isNull(this._editImage))
+                        this._editImage.hide = type !== EditMode.Image;
+                    break;
+                case 'maxImageHeight':
+                    if (!pacemCore.Utils.isNull(this._editImage))
+                        this._editImage.maxHeight = val;
+                    break;
+                case 'maxImageWidth':
+                    if (!pacemCore.Utils.isNull(this._editImage))
+                        this._editImage.maxWidth = val;
+                    break;
+            }
+        }
+        edit(evt) {
+            pacemCore.avoidHandler(evt);
+            var cnt = this._target;
+            if (pacemCore.Utils.isNull(cnt))
+                return;
+            this._removeButton();
+            this._content = cnt;
+            var state = this._state = this._retrieve();
+            if (!pacemCore.Utils.isNull(this._editImage))
+                this._editImage.disabled = false;
+            this._dialog.open(state).then(args => {
+                switch (args.button) {
+                    case UI$3.DialogButton.Cancel:
+                        // reset value
+                        this._update(this._state);
+                        break;
+                    case UI$3.DialogButton.Ok:
+                        // save
+                        this._update(args.state);
+                        this.dispatchEvent(new CustomEvent('commit', { detail: { value: args.state } }));
+                        break;
+                }
+                this._content = null;
+                if (!pacemCore.Utils.isNull(this._editImage))
+                    this._editImage.disabled = true;
+                this._addButton();
+            });
+        }
+    };
+    __decorate$7([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemEditElement.prototype, "key", void 0);
+    __decorate$7([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemEditElement.prototype, "type", void 0);
+    __decorate$7([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Element })
+    ], PacemEditElement.prototype, "target", void 0);
+    __decorate$7([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemEditElement.prototype, "imageUploadUrl", void 0);
+    __decorate$7([
+        pacemCore.Watch({ emit: false })
+    ], PacemEditElement.prototype, "imageSet", void 0);
+    __decorate$7([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemEditElement.prototype, "maxImageWidth", void 0);
+    __decorate$7([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemEditElement.prototype, "maxImageHeight", void 0);
+    __decorate$7([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemEditElement.prototype, "allowSnapshot", void 0);
+    PacemEditElement = __decorate$7([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-edit'
+        })
+    ], PacemEditElement);
+
+    var __decorate$6 = (undefined && undefined.__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;
+    };
+    const UI$2 = pacemUi.Components.UI;
+    function getGallerySlideShowTemplate(captionTemplate = getDefaultCaptionTemplate(), imageProperty = 'image') {
+        return `<${pacemCore.P}-slide class="${pacemCore.PCSS}-gallery-item"
+css-class="{{ { '${pacemCore.PCSS}-gallery-previous': :host.isPrevious(^index, ::_slideshow.index), '${pacemCore.PCSS}-gallery-next': :host.isNext(^index, ::_slideshow.index), '${pacemCore.PCSS}-gallery-focus': ^index === ::_slideshow.index } }}"
+>
+            <${pacemCore.P}-img src="{{ ^item.${imageProperty} }}" disabled="{{ !::_lightbox.show || !(:host.isCloseTo(^index, ::_slideshow.index) || ^index === ::_slideshow.index) }}"
+css="{{ {'visibility': (:host._poppingUp ? 'hidden' : ''), 'transition': (:host._poppingUp ? 'none' : '')} }}" class="${pacemCore.PCSS}-gallery-splash" adapt="contain"></${pacemCore.P}-img>
+
+${captionTemplate}
+
+            </${pacemCore.P}-slide>`;
+    }
+    function getDefaultCaptionTemplate(captionProperty = 'caption') {
+        return `<${pacemCore.P}-panel hide="{{ $pacem.isNullOrEmpty(^item.${captionProperty}) }}" class="${pacemCore.PCSS}-gallery-caption gallery-caption-default">
+        <${pacemCore.P}-span class="paragraph" text="{{ ^item.${captionProperty} }}"></${pacemCore.P}-span>
+    </${pacemCore.P}-panel>`;
+    }
+    let PacemGalleryElement = class PacemGalleryElement extends UI$2.PacemAdaptedIterativeElement {
+        constructor() {
+            super(...arguments);
+            this._templateChangeHandler = (evt) => {
+                const proxy = evt.target;
+                this._setupWithCaptionTemplate(proxy.target);
+            };
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._setupWithCaptionTemplate();
+            this._databind();
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'datasource':
+                        this._databind();
+                        break;
+                    case 'captionTemplate':
+                        this._setupWithCaptionTemplate(val, old);
+                        break;
+                    case 'imageProperty':
+                        this._setupWithCaptionTemplate(this.captionTemplate, this.captionTemplate);
+                        break;
+                    case 'captionProperty':
+                        if (pacemCore.Utils.isNull(this.captionTemplate)) {
+                            this._setupDefaultTemplate();
+                        }
+                        break;
+                }
+            }
+        }
+        disconnectedCallback() {
+            this._disposeTemplate();
+            super.disconnectedCallback();
+        }
+        _disposeTemplate(val = this.captionTemplate) {
+            if (val instanceof pacemCore.Components.PacemTemplateProxyElement) {
+                val.removeEventListener('templatechange', this._templateChangeHandler);
+            }
+        }
+        _setupWithCaptionTemplate(val = this.captionTemplate, old) {
+            this._disposeTemplate(old);
+            if (pacemCore.Utils.isNull(val)) {
+                this._setupDefaultTemplate();
+                return;
+            }
+            if (val instanceof pacemCore.Components.PacemTemplateProxyElement) {
+                val.addEventListener('templatechange', this._templateChangeHandler, false);
+                val = val.target;
+            }
+            const container = val.content.firstElementChild;
+            pacemCore.Utils.addClass(container, pacemCore.PCSS + '-gallery-caption');
+            const tmpl = document.createElement('template');
+            tmpl.innerHTML = getGallerySlideShowTemplate(val.innerHTML, this.imageProperty);
+            this._setupTemplate(tmpl);
+        }
+        _setupTemplate(val) {
+            this._templateProxy.target = val;
+        }
+        _setupDefaultTemplate() {
+            const tmpl = document.createElement('template');
+            tmpl.innerHTML = getGallerySlideShowTemplate(getDefaultCaptionTemplate(this.captionProperty), this.imageProperty);
+            this._setupTemplate(tmpl);
+        }
+        _databind() {
+            const rep = this._repeater;
+            if (!pacemCore.Utils.isNull(rep)) {
+                rep.datasource = this.datasource;
+            }
+        }
+        get adapter() {
+            return this._adapter;
+        }
+        async _heroAnimate(fromEl, src) {
+            if (!pacemCore.Utils.isNull(fromEl)) {
+                let pImg = new UI$2.PacemImageElement();
+                let goalEl = this._heroPlaceholderProxy.dom[0];
+                const TRANSITION = 300;
+                pImg.src = src || /* assuming an img-ish element */ fromEl['src'];
+                pImg.adapt = 'contain';
+                let goal = pacemCore.Utils.offset(goalEl), from = pacemCore.Utils.offset(fromEl), style = pImg.style;
+                const cfrStyle = getComputedStyle(goalEl);
+                style.border = cfrStyle.border;
+                style.width = goalEl.clientWidth + 'px';
+                style.height = goalEl.clientHeight + 'px';
+                style.position = 'absolute';
+                style.zIndex = cfrStyle.zIndex;
+                style.top = goal.top + 'px';
+                style.left = goal.left + 'px';
+                const scaleX = fromEl.clientWidth / goalEl.clientWidth, scaleY = fromEl.clientHeight / goalEl.clientHeight, translateX = (from.left - goal.left) + 'px', translateY = (from.top - goal.top) + 'px';
+                style.transformOrigin = '0 0';
+                style.transition = `transform cubic-bezier(0.445, 0.05, 0.55, 0.95) ${TRANSITION}ms, opacity ${TRANSITION}ms`;
+                style.transform = `translate(${translateX}, ${translateY}) scale(${scaleX}, ${scaleY})`;
+                document.body.appendChild(pImg);
+                requestAnimationFrame(() => {
+                    pImg.style.transform = '';
+                });
+                await pacemCore.Utils.waitForAnimationEnd(pImg, TRANSITION);
+                pImg.remove();
+            }
+        }
+        open(startIndex, heroFrom, src) {
+            this._poppingUp = true;
+            this._lightbox.show = true;
+            this._slideshow.index = startIndex; // reflects on 'this' (twoway)
+            this._heroAnimate(heroFrom, src)
+                .then(_ => {
+                this._poppingUp = false;
+                this._slideshow.focus();
+            });
+        }
+    };
+    __decorate$6([
+        pacemCore.ViewChild(pacemCore.P + '-adapter')
+    ], PacemGalleryElement.prototype, "_adapter", void 0);
+    __decorate$6([
+        pacemCore.ViewChild(pacemCore.P + '-lightbox')
+    ], PacemGalleryElement.prototype, "_lightbox", void 0);
+    __decorate$6([
+        pacemCore.ViewChild(pacemCore.P + '-slideshow')
+    ], PacemGalleryElement.prototype, "_slideshow", void 0);
+    __decorate$6([
+        pacemCore.ViewChild(pacemCore.P + '-repeater')
+    ], PacemGalleryElement.prototype, "_repeater", void 0);
+    __decorate$6([
+        pacemCore.ViewChild(pacemCore.P + '-template-proxy')
+    ], PacemGalleryElement.prototype, "_templateProxy", void 0);
+    __decorate$6([
+        pacemCore.ViewChild(pacemCore.P + '-shell-proxy')
+    ], PacemGalleryElement.prototype, "_heroPlaceholderProxy", void 0);
+    __decorate$6([
+        pacemCore.Watch()
+    ], PacemGalleryElement.prototype, "_poppingUp", void 0);
+    __decorate$6([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Element })
+    ], PacemGalleryElement.prototype, "captionTemplate", void 0);
+    __decorate$6([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemGalleryElement.prototype, "captionProperty", void 0);
+    __decorate$6([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemGalleryElement.prototype, "imageProperty", void 0);
+    PacemGalleryElement = __decorate$6([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-gallery', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<${pacemCore.P}-lightbox class="${pacemCore.PCSS}-gallery">
+    <${pacemCore.P}-repeater>
+        <${pacemCore.P}-slideshow adapter="{{ ::_adapter }}" index="{{ :host.index, twoway }}" hide="{{ !::_lightbox.show }}">
+            <${pacemCore.P}-template-proxy></${pacemCore.P}-template-proxy>
+        </${pacemCore.P}-slideshow>
+    </${pacemCore.P}-repeater>
+<${pacemCore.P}-adapter class="${pacemCore.PCSS}-gallery-adapter"></${pacemCore.P}-adapter>
+</${pacemCore.P}-lightbox>
+<${pacemCore.P}-shell-proxy><div class="${pacemCore.PCSS}-gallery-hero-target"></div></${pacemCore.P}-shell-proxy>`
+        })
+    ], PacemGalleryElement);
+
+    var __decorate$5 = (undefined && undefined.__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 PacemModalFormElement_1;
+    const UI$1 = pacemUi.Components.UI;
+    //namespace Pacem.Components.Plus {
+    // TODO: use onewaytosource as a binding mode
+    let PacemModalFormElement = PacemModalFormElement_1 = class PacemModalFormElement extends UI$1.PacemDialogBase {
+        get form() {
+            return this._form;
+        }
+        constructor() {
+            super();
+            this.suddenValidation = true;
+            this.method = pacemCore.Net.HttpMethod.Post;
+            this._keyupHandler = (evt) => {
+                if (evt.keyCode === /* Enter */ 13
+                    // no modifiers
+                    && !evt.shiftKey && !evt.ctrlKey && !evt.altKey && !evt.metaKey) {
+                    let btn = evt.currentTarget.querySelector(`.${pacemCore.PCSS}-dialog-buttons ${pacemCore.P}-button[type=submit]`);
+                    if (!pacemCore.Utils.isNull(btn) && pacemCore.Utils.isVisible(btn) && !btn.disabled) {
+                        btn.click();
+                    }
+                }
+            };
+            this.#keepStateOnCommit = false;
+            this._emitter = new pacemScaffolding.Components.Scaffolding.FormEventEmitter(this);
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            // HACK: move the buttons outside the .pacem-scrollable element in the lightbox
+            //var lightboxCore = this.querySelector(`.${PCSS}-lightbox`);
+            //lightboxCore.appendChild(
+            //    this._buttons = this.querySelector(`.${PCSS}-dialog-buttons`)
+            //);
+            //lightboxCore.appendChild(
+            //    this.querySelector(`.${PCSS}-dialog-heading`)
+            //);
+            //lightboxCore.appendChild(
+            //    this.querySelector(P + '-loader')
+            //);
+            //this.dispatchEvent(new PropertyChangeEvent({ propertyName: 'modalButtons', currentValue: this.modalButtons }));
+            this.addEventListener('keyup', this._keyupHandler, false);
+            this._emitter.start();
+        }
+        disconnectedCallback() {
+            this._emitter.stop();
+            this.removeEventListener('keyup', this._keyupHandler, false);
+            super.disconnectedCallback();
+        }
+        _submit(evt) {
+            if (this.readonly) {
+                this.commit(UI$1.DialogButton.Ok, evt);
+            }
+            else {
+                pacemCore.avoidHandler(evt);
+                this._form.validate().then(valid => {
+                    if (valid) {
+                        if (pacemCore.Utils.isNullOrEmpty(this.action)) {
+                            this.commit(UI$1.DialogButton.Ok, evt);
+                        }
+                        else {
+                            this._form.submit(this._fetcher).then(_ => {
+                                this.commit(UI$1.DialogButton.Ok, evt);
+                            }, r => {
+                                // do nothing
+                            });
+                        }
+                    }
+                });
+            }
+        }
+        _onSubmit(evt) {
+            // no need to broadcast, event bubbles itself...
+            // ...just handle it using the eventual listeners:
+            this.emit(evt);
+        }
+        #keepStateOnCommit;
+        open(state, keepStateOnCommit, setAsPristine = true) {
+            if (pacemCore.Utils.isNull(state)) {
+                throw `The state of a ${PacemModalFormElement_1} cannot be null.`;
+            }
+            this.#keepStateOnCommit = keepStateOnCommit;
+            var retval = super.open(state);
+            if (setAsPristine) {
+                this._form.setPristine();
+            }
+            return retval;
+        }
+        commit(btn, evt) {
+            super.commit(btn, evt);
+            if (!this.#keepStateOnCommit) {
+                pacemCore.Utils.waitForAnimationEnd(this, 500).then(_ => {
+                    // BREAKING change (v0.8.37): state destroyed when dialog committed
+                    // TODO: consider 'if' and 'how' to avoid this.
+                    this.state = {};
+                });
+            }
+        }
+        _cancel(evt) {
+            this.commit(UI$1.DialogButton.Cancel, evt);
+            this._form.reset();
+        }
+        _broadcast(evt) {
+            this.dispatchEvent(new CustomEvent(evt.type, { detail: evt.detail }));
+        }
+        /** Gets the 'ok' and 'cancel' modal buttons. */
+        get modalButtons() {
+            const btns = this._buttons;
+            return {
+                ok: btns && btns.firstElementChild && btns.firstElementChild.firstElementChild,
+                cancel: btns && btns.firstElementChild && btns.firstElementChild.lastElementChild
+            };
+        }
+    };
+    __decorate$5([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemModalFormElement.prototype, "suddenValidation", void 0);
+    __decorate$5([
+        pacemCore.Watch({ reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemModalFormElement.prototype, "okCaption", void 0);
+    __decorate$5([
+        pacemCore.Watch({ reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemModalFormElement.prototype, "cancelCaption", void 0);
+    __decorate$5([
+        pacemCore.Watch({ reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemModalFormElement.prototype, "method", void 0);
+    __decorate$5([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Json })
+    ], PacemModalFormElement.prototype, "metadata", void 0);
+    __decorate$5([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemModalFormElement.prototype, "action", void 0);
+    __decorate$5([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemModalFormElement.prototype, "loaderType", void 0);
+    __decorate$5([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemModalFormElement.prototype, "success", void 0);
+    __decorate$5([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemModalFormElement.prototype, "fail", void 0);
+    __decorate$5([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemModalFormElement.prototype, "readonly", void 0);
+    __decorate$5([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Json })
+    ], PacemModalFormElement.prototype, "fetchHeaders", void 0);
+    __decorate$5([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemModalFormElement.prototype, "fetchCredentials", void 0);
+    __decorate$5([
+        pacemCore.ViewChild(pacemCore.P + '-lightbox')
+    ], PacemModalFormElement.prototype, "lightbox", void 0);
+    __decorate$5([
+        pacemCore.ViewChild(pacemCore.P + '-form[entity]')
+    ], PacemModalFormElement.prototype, "_form", void 0);
+    __decorate$5([
+        pacemCore.ViewChild(pacemCore.P + '-fetch')
+    ], PacemModalFormElement.prototype, "_fetcher", void 0);
+    PacemModalFormElement = PacemModalFormElement_1 = __decorate$5([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-modal-form', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<${pacemCore.P}-lightbox modal="true" logger="{{ :host.logger }}">
+        <${pacemCore.P}-form wrapper>
+            <${pacemCore.P}-form logger="{{ :host.logger }}" on-submit=":host._onSubmit($event)" readonly="{{ :host.readonly }}" entity="{{ :host.state, twoway }}" on-success=":host._broadcast($event)"
+                on-fail=":host._broadcast($event)" success="{{ :host.success, twoway }}" fail="{{ :host.fail, twoway }}" autogenerate="{{ !$pacem.isNull($this.entity) }}" metadata="{{ :host.metadata }}"
+                fetch-headers="{{ :host.fetchHeaders }}" fetch-credentials="{{ :host.fetchCredentials }}" sudden-validation="{{ :host.suddenValidation }}"></${pacemCore.P}-form>
+        </${pacemCore.P}-form>
+        <${pacemCore.P}-fetch logger="{{ :host.logger }}" method="{{ :host.method }}" headers="{{ :host.fetchHeaders }}" credentials="{{ :host.fetchCredentials }}" autofetch="false" url="{{ :host.action }}"></${pacemCore.P}-fetch>
+    <div class="${pacemCore.PCSS}-dialog-buttons ${pacemCore.PCSS}-buttonset buttons" slot="bottom">
+        <div class="buttonset-left">
+        <${pacemCore.P}-button on-click=":host._submit($event)" css-class="{{ {'buttonset-last': :host.readonly} }}" type="submit"
+            class="button primary button-size size-small" disabled="{{ (:host.suddenValidation && !:host.readonly && !(::_form.valid && ::_form.dirty)) || ::_fetcher.fetching }}">
+            <${pacemCore.P}-panel class="submit-spinner ${pacemCore.PCSS}-anim anim-pop" hide="{{ !::_form.fetching }}"><i class="${pacemCore.PCSS}-icon ${pacemCore.PCSS}-anim anim-rotate rotate-uniform display-block">refresh</i></${pacemCore.P}-panel>
+            <${pacemCore.P}-text text="{{ :host.okCaption || 'OK' }}"></${pacemCore.P}-text>
+        </${pacemCore.P}-button>
+        <${pacemCore.P}-button on-click=":host._cancel($event)" hide="{{ :host.readonly }}" class="button button-size size-small" disabled="{{ ::_fetcher.fetching }}"><${pacemCore.P}-text text="{{ :host.cancelCaption || 'Cancel' }}"></${pacemCore.P}-text></${pacemCore.P}-button>
+    </div></div>
+    <div class="${pacemCore.PCSS}-dialog-heading" slot="top">
+        <${pacemCore.P}-content></${pacemCore.P}-content>
+    </div>
+    <div class="pos-absolute absolute-top absolute-right absolute-left absolute-bottom overflow-hidden ${pacemCore.PCSS}-inert display-flex flex-center flex-middle">
+        <${pacemCore.P}-loader type="{{ :host.loaderType }}" class="loader-primary loader-smaller ${pacemCore.PCSS}-anim anim-pop" active="{{ ::_fetcher.fetching }}"></${pacemCore.P}-loader>
+    </div>
+</${pacemCore.P}-lightbox>`
+        })
+    ], PacemModalFormElement);
+
+    var __decorate$4 = (undefined && undefined.__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;
+    };
+    //namespace Pacem.Components.Plus {
+    let PacemRouterHashStateElement = class PacemRouterHashStateElement extends pacemCore.PacemEventTarget {
+        constructor() {
+            super(...arguments);
+            this.default = {};
+            this.state = {};
+            this.normalizedState = {};
+            this._routerNavigatingHandler = (_) => {
+                this.#locked = true;
+            };
+            this._routerNavigateHandler = (_) => {
+                this.#locked = false;
+                this._updateStateFromURI();
+            };
+        }
+        #locked;
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._updateStateFromURI();
+            this._setupRouterHandlers(this.router);
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            switch (name) {
+                case 'state':
+                    if (!first && !this.#locked) {
+                        this._updateNormalizedState();
+                        this._updateURIFromState();
+                    }
+                    break;
+                case 'disabled':
+                    if (!!val) {
+                        this._updateStateFromURI();
+                    }
+                    break;
+                case 'default':
+                    this._updateStateFromURI();
+                    break;
+                case 'router':
+                    if (!first) {
+                        this._disposeRouterHandlers(old);
+                        this._setupRouterHandlers(val);
+                    }
+                    break;
+            }
+        }
+        disconnectedCallback() {
+            this._disposeRouterHandlers();
+            super.disconnectedCallback();
+        }
+        _setupRouterHandlers(router = this.router) {
+            if (!pacemCore.Utils.isNull(router)) {
+                window.addEventListener('navigating', this._routerNavigatingHandler, false);
+                window.addEventListener('navigate', this._routerNavigateHandler, false);
+            }
+        }
+        _disposeRouterHandlers(router = this.router) {
+            if (!pacemCore.Utils.isNull(router)) {
+                window.removeEventListener('navigating', this._routerNavigatingHandler, false);
+                window.removeEventListener('navigate', this._routerNavigateHandler, false);
+            }
+        }
+        _currentBasePath() {
+            const router = this.router;
+            if (!pacemCore.Utils.isNull(router)) {
+                const q = router.state.$querystring;
+                return this._normalizePath(document.location.pathname, q);
+            }
+            return null;
+        }
+        _normalizePath(path, q) {
+            if (pacemCore.Utils.isNullOrEmpty(path)) {
+                return path;
+            }
+            if (path.endsWith('/')) {
+                path = path.substring(0, path.length - 1);
+            }
+            q ??= '';
+            return path + (q.length > 0 ? ('?' + q) : '');
+        }
+        _areStatesEquivalent(s1, s2) {
+            const state1 = pacemCore.Utils.extend({}, s1 || {}), state2 = pacemCore.Utils.extend({}, s2 || {});
+            for (let prop in state1) {
+                if (!this._areSubstantiallyEquivalent(state1[prop], state2[prop])) {
+                    return false;
+                }
+                delete state1[prop];
+                delete state2[prop];
+            }
+            for (let prop in state2) {
+                if (!this._areSubstantiallyEquivalent(state1[prop], state2[prop])) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        _updateNormalizedState(state = this.state) {
+            if (this.disabled || this.#locked) {
+                return;
+            }
+            const normalizedState = this._normalizeState(state);
+            if (!this._areStatesEquivalent(normalizedState, this.normalizedState)) {
+                this.normalizedState = normalizedState;
+            }
+        }
+        _updateStateFromURI() {
+            if (this.disabled || this.#locked) {
+                return;
+            }
+            var state = pacemCore.Utils.extend({}, this.default || {});
+            const router = this.router;
+            if (!pacemCore.Utils.isNull(router)) {
+                const denormalized = this._denormalizeState(pacemCore.Utils.URIs.parseQuery(router.state && router.state.$hash || '{}'));
+                pacemCore.Utils.extend(state, denormalized);
+            }
+            if (!this._areStatesEquivalent(this.state, state)) {
+                this.state = state;
+            }
+        }
+        _updateURIFromState(state = this.normalizedState) {
+            if (this.disabled || this.#locked) {
+                return;
+            }
+            const router = this.router;
+            if (!pacemCore.Utils.isNull(router)) {
+                const actual = this._currentBasePath();
+                const currentState = pacemCore.Utils.URIs.parseQuery(router.state.$hash || '{}'), targetState = state || {};
+                if (!this._areStatesEquivalent(currentState, targetState)) {
+                    // checked state equivalence to avoid superfluous navigation
+                    const clean = this._cleanupStateForURI(targetState);
+                    var url = actual;
+                    if (!pacemCore.Utils.isNullOrEmpty(clean)) {
+                        url = pacemCore.Utils.URIs.appendQuery(actual, clean, false, true);
+                    }
+                    // navigate
+                    router.path = url;
+                }
+            }
+        }
+        _areSubstantiallyEquivalent(v1, v2) {
+            v1 ??= '';
+            v2 ??= '';
+            return v1.toString() == v2.toString() || pacemCore.Utils.areSemanticallyEqual(v1, v2) || JSON.stringify(v1) === JSON.stringify(v2);
+        }
+        _cleanupStateForURI(state = this.state) {
+            const copy = pacemCore.Utils.clone(state || {}), base = this.default;
+            for (let key in copy) {
+                if ((pacemCore.Utils.isNullOrEmpty(copy[key]) && (pacemCore.Utils.isNull(base) || !(key in base)))
+                    || (!pacemCore.Utils.isNull(base) && (key in base) && this._areSubstantiallyEquivalent(base[key], copy[key]))) {
+                    delete copy[key];
+                }
+            }
+            return copy;
+        }
+        _normalizeState(state = this.state, mold = this.default) {
+            var output = {};
+            const base = mold;
+            for (let key in state || {}) {
+                const value = state[key];
+                if (pacemCore.Utils.isNullOrEmpty(value)) {
+                    if (!pacemCore.Utils.isNull(base) && (key in base) && !pacemCore.Utils.isNullOrEmpty(base[key])) {
+                        output[key] = '';
+                    }
+                    continue;
+                }
+                switch (typeof value) {
+                    case 'number':
+                    case 'bigint':
+                    case 'boolean':
+                        Object.defineProperty(output, key, { enumerable: true, value: value.toString() });
+                        break;
+                    case 'symbol':
+                    case 'string':
+                        Object.defineProperty(output, key, { enumerable: true, value });
+                        break;
+                    default:
+                        if (pacemCore.Utils.Dates.isDate(value)) {
+                            Object.defineProperty(output, key, { enumerable: true, value: value.toISOString() });
+                        }
+                        else if (value instanceof RegExp) {
+                            Object.defineProperty(output, key, { enumerable: true, value: value.source });
+                        }
+                        else {
+                            throw new Error('Type not supported to be normalized into a URI hash.');
+                        }
+                        break;
+                }
+            }
+            return output;
+        }
+        _denormalizeState(state = this.normalizedState, mold = this.default) {
+            const output = {};
+            const base = mold || {};
+            for (let prop in state) {
+                if (!(prop in base)) {
+                    output[prop] = state[prop];
+                    continue;
+                }
+                const moldProp = base[prop], value = state[prop];
+                switch (typeof moldProp) {
+                    case 'boolean':
+                        Object.defineProperty(output, prop, { enumerable: true, value: pacemCore.PropertyConverters.Boolean.convert(value) });
+                        break;
+                    case 'number':
+                    case 'bigint':
+                        Object.defineProperty(output, prop, { enumerable: true, value: pacemCore.PropertyConverters.Number.convert(value) });
+                        break;
+                    case 'symbol':
+                    case 'string':
+                        Object.defineProperty(output, prop, { enumerable: true, value: pacemCore.PropertyConverters.String.convert(value) });
+                        break;
+                    default:
+                        if (moldProp instanceof Date) {
+                            Object.defineProperty(output, prop, { enumerable: true, value: pacemCore.PropertyConverters.Date.convert(value) });
+                        }
+                        else if (moldProp instanceof RegExp) {
+                            Object.defineProperty(output, prop, { enumerable: true, value: new RegExp(value, moldProp.flags) });
+                        }
+                        else {
+                            Object.defineProperty(output, prop, { enumerable: true, value });
+                        }
+                        break;
+                }
+            }
+            return output;
+        }
+        set(key, value) {
+            var obj = {};
+            if (typeof key === 'string') {
+                Object.defineProperty(obj, key, { enumerable: true, value });
+            }
+            else {
+                obj = key;
+            }
+            this.state = pacemCore.Utils.extend({}, this.state || {}, obj);
+        }
+    };
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Element })
+    ], PacemRouterHashStateElement.prototype, "router", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json })
+    ], PacemRouterHashStateElement.prototype, "default", void 0);
+    __decorate$4([
+        pacemCore.Watch()
+    ], PacemRouterHashStateElement.prototype, "state", void 0);
+    __decorate$4([
+        pacemCore.Watch()
+    ], PacemRouterHashStateElement.prototype, "normalizedState", void 0);
+    PacemRouterHashStateElement = __decorate$4([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-router-hash-state' })
+    ], PacemRouterHashStateElement);
+
+    var __decorate$3 = (undefined && undefined.__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;
+    };
+    //namespace Pacem.Components.Plus {
+    let PacemSearchElement = class PacemSearchElement extends pacemCore.Components.PacemElement {
+        constructor() {
+            super(...arguments);
+            this.hintParameter = 'q';
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (name === 'hint') {
+                let params = {};
+                params[this.hintParameter] = val;
+                this._fetcher.parameters = params;
+            }
+        }
+    };
+    __decorate$3([
+        pacemCore.ViewChild(pacemCore.P + '-fetch')
+    ], PacemSearchElement.prototype, "_fetcher", void 0);
+    __decorate$3([
+        pacemCore.Watch()
+    ], PacemSearchElement.prototype, "datasource", void 0);
+    __decorate$3([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemSearchElement.prototype, "hint", void 0);
+    __decorate$3([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemSearchElement.prototype, "url", void 0);
+    __decorate$3([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemSearchElement.prototype, "method", void 0);
+    __decorate$3([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemSearchElement.prototype, "hintParameter", void 0);
+    PacemSearchElement = __decorate$3([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-search', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<${pacemCore.P}-fetch debounce="800" url="{{ :host.url }}" method="{{ :host.method }}">
+</${pacemCore.P}-fetch><${pacemCore.P}-input-search value="{{ :host.hint, twoway }}"></${pacemCore.P}-input-search>
+<${pacemCore.P}-repeater datasource="{{ ::_fetch.result }}">
+    <${pacemCore.P}-content></${pacemCore.P}-content>
+</${pacemCore.P}-repeater>`
+        })
+    ], PacemSearchElement);
+
+    var __decorate$2 = (undefined && undefined.__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;
+    };
+    //namespace Pacem.Components.Plus {
+    const DataRowSelectChangeEventName = "datarowselectchange";
+    class DataRowSelectChangeEvent extends CustomEvent {
+        constructor(detail) {
+            super(DataRowSelectChangeEventName, { detail, bubbles: false, cancelable: true });
+        }
+    }
+    const EMPTY_CSS = {};
+    const EMPTY_CSSCLASS = [];
+    let PacemDataCellElement = class PacemDataCellElement extends PacemBaseCellElement {
+        updateLayout(metadata = this.metadata) {
+            this._setup(metadata);
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            pacemCore.Utils.addClass(this, pacemCore.PCSS + '-datacell');
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case '_contentTooltip':
+                        this._updateTooltipJustInCase();
+                        break;
+                    case 'gridState':
+                    case 'rowindex':
+                        this._updateSelection();
+                        break;
+                }
+            }
+        }
+        _updateTooltipJustInCase() {
+            const tip = this.metadata.dataCell?.autoTooltip ?? true;
+            if (tip && !pacemCore.Utils.isNullOrEmpty(this._contentTooltip)) {
+                this.setAttribute('tooltip', this._contentTooltip);
+            }
+            else {
+                this.removeAttribute('tooltip');
+            }
+        }
+        _inflateContent(item = this.dataitem, index = this.rowindex, metadata = this.metadata) {
+            this._contentTooltip = '';
+            let format = metadata.dataCell?.format;
+            const nullValue = metadata.dataCell?.null ?? '';
+            // is 'format' a custom function?
+            if (typeof format === 'function') {
+                const htmlOrNode = format(this, metadata, item, index);
+                if (pacemCore.Utils.isNullOrEmpty(htmlOrNode)) {
+                    return nullValue;
+                }
+                if (typeof htmlOrNode === 'string') {
+                    return htmlOrNode;
+                }
+                return htmlOrNode;
+            }
+            // standard column
+            const tget = pacemCore.CustomElementUtils.resolvePath(metadata.prop, item)?.target;
+            const plainValue = tget?.value;
+            if (pacemCore.Utils.isNullOrEmpty(plainValue)) {
+                return nullValue;
+            }
+            const culture = pacemCore.Utils.lang(this);
+            switch (metadata.dataType) {
+                case "boolean":
+                    return `<${pacemCore.P}-icon icon="material ${(!plainValue ? 'radio_button_unchecked' : 'check_circle_outline')} text-big-steady"></${pacemCore.P}-icon>`;
+                case "time":
+                case "date":
+                case "datetime":
+                    return this._contentTooltip = pacemCore.Utils.core.date(plainValue, format, culture);
+                case "byte":
+                case "int16":
+                case "int32":
+                case "int64":
+                case "short":
+                case "integer":
+                case "int":
+                case "long":
+                case "double":
+                case "decimal":
+                case "float":
+                case "single":
+                case "number":
+                    return this._contentTooltip = pacemCore.Utils.core.number(plainValue, format || '', culture);
+                case "currency":
+                    format ??= 'EUR';
+                    if (typeof format === 'string') {
+                        return this._contentTooltip = pacemCore.Utils.core.currency(plainValue, format, culture);
+                    }
+                    return this._contentTooltip = pacemCore.Utils.core.number(plainValue, format, culture);
+                case "percent":
+                case "percentage":
+                    format ??= { style: 'percent', maximumFractionDigits: 2 };
+                    if (typeof format === 'string') {
+                        return this._contentTooltip = pacemCore.Utils.core.currency(plainValue, format, culture);
+                    }
+                    return this._contentTooltip = pacemCore.Utils.core.number(plainValue, format, culture);
+                case "url":
+                case "emailaddress":
+                case "phonenumber":
+                // TODO: render links
+                default:
+                    return this._contentTooltip = plainValue;
+            }
+        }
+        // @Debounce(true)
+        _inflateCssClass(item = this.dataitem, index = this.rowindex, metadata = this.metadata, datasource) {
+            if (pacemCore.Utils.isNull(item) || pacemCore.Utils.isNullOrEmpty(metadata)) {
+                return EMPTY_CSSCLASS;
+            }
+            const cssClass = metadata.dataCell && metadata.dataCell.cssClass || EMPTY_CSSCLASS;
+            const retval = [];
+            if (typeof cssClass === 'function') {
+                Array.prototype.push.apply(retval, cssClass(this, metadata, item, index) || []);
+            }
+            else {
+                Array.prototype.push.apply(retval, cssClass);
+            }
+            // alignment
+            switch (metadata.dataCell?.verticalAlign?.toLowerCase()) {
+                case 'top':
+                    retval.push('datacell-top');
+                    break;
+                case 'bottom':
+                    retval.push('datacell-bottom');
+                    break;
+                case 'middle':
+                    retval.push('datacell-middle');
+                    break;
+            }
+            switch (metadata.dataCell?.horizontalAlign?.toLowerCase()) {
+                // headcell display is flex: set h-alignment at container-level
+                case 'left':
+                    retval.push('datacell-left');
+                    break;
+                case 'right':
+                    retval.push('datacell-right');
+                    break;
+                case 'center':
+                    retval.push('datacell-center');
+                    break;
+            }
+            if (datasource?.length) {
+                if (index === 0) {
+                    retval.push('datacell-firstrow');
+                }
+                if (index === (datasource.length - 1)) {
+                    retval.push('datacell-lastrow');
+                }
+            }
+            return retval;
+        }
+        _inflateCss(item = this.dataitem, index = this.rowindex, metadata = this.metadata) {
+            if (pacemCore.Utils.isNull(item) || pacemCore.Utils.isNullOrEmpty(metadata)) {
+                return EMPTY_CSS;
+            }
+            const css = metadata.dataCell && metadata.dataCell.css || EMPTY_CSS;
+            if (typeof css === 'function') {
+                return css(this, metadata, item, index);
+            }
+            return css;
+        }
+        _setup(metadata = this.metadata) {
+            this.setAttribute("css-class", "{{ this._inflateCssClass(^item, ^index, this.metadata, :host.datasource) }}");
+            this.setAttribute("css", "{{ Pacem.Utils.extend({ 'grid-row': ^index+2 }, this._inflateCss(^item, ^index, this.metadata, :host.datasource)) }}");
+            const truncate = !!(metadata.dataCell?.textEllipsis);
+            const contentCssClass = truncate ? ['text-truncate'] : [];
+            const selectMode = metadata?.dataCell?.selectMode?.toLowerCase();
+            switch (selectMode) {
+                case 'cell':
+                case 'row':
+                    // make the content wrapper inert so that the click event can bubble
+                    contentCssClass.push(pacemCore.PCSS + '-inert');
+                    contentCssClass.push(pacemCore.PCSS + '-unselect');
+                    break;
+            }
+            this._content.cssClass = contentCssClass;
+            this._updateSelection();
+        }
+        _updateSelection() {
+            const selectedRows = this.gridState?.selectedRows ?? [];
+            if (selectedRows.indexOf(this.rowindex) >= 0) {
+                pacemCore.Utils.addClass(this, 'datarow-selected datacell-filled datacell-primary');
+            }
+            else {
+                pacemCore.Utils.removeClass(this, 'datarow-selected datacell-filled datacell-primary');
+            }
+        }
+    };
+    __decorate$2([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Eval })
+    ], PacemDataCellElement.prototype, "dataitem", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemDataCellElement.prototype, "rowindex", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String, debounce: 200 })
+    ], PacemDataCellElement.prototype, "_contentTooltip", void 0);
+    __decorate$2([
+        pacemCore.ViewChild(pacemCore.P + '-span')
+    ], PacemDataCellElement.prototype, "_content", void 0);
+    PacemDataCellElement = __decorate$2([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-datacell', shadow: false, template: `<${pacemCore.P}-span content="{{ :host._inflateContent(^item, ^index, :host.metadata) }}"></${pacemCore.P}-span>` })
+    ], PacemDataCellElement);
+
+    var __decorate$1 = (undefined && undefined.__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;
+    };
+    const UI = pacemUi.Components.UI;
+    //namespace Pacem.Components.Plus {
+    const DataColumnSortEventName = "datacolumnsort";
+    class DataColumnSortEvent extends CustomEvent {
+        constructor(detail) {
+            super(DataColumnSortEventName, { detail, bubbles: false, cancelable: true });
+        }
+    }
+    const DataColumnRescaleEventName = "datacolumnrescale";
+    class DataColumnRescaleEvent extends CustomEvent {
+        constructor(detail) {
+            super(DataColumnRescaleEventName, { detail, bubbles: false, cancelable: true });
+        }
+    }
+    let PacemHeadCellElement = class PacemHeadCellElement extends PacemBaseCellElement {
+        constructor(_md = new UI.MarkdownService()) {
+            super();
+            this._md = _md;
+            //#region sort button
+            this._sortButtonClickHandler = (evt) => {
+                const metadata = this.metadata, gridState = this.gridState, column = metadata.prop;
+                const dir = gridState.sort?.column === column ? (gridState.sort.dir === 'desc' ? 'asc' : 'desc') : (metadata.defaultSort || 'asc');
+                this.dispatchEvent(new DataColumnSortEvent({ column, dir }));
+            };
+            this._rescaleHandler = (evt) => {
+                evt.preventDefault();
+                const detail = evt.detail;
+                const width = Math.max(this.metadata.minPixelWidth ?? 24, detail.currentPosition.x - this._columnBBox.x);
+                this.dispatchEvent(new DataColumnRescaleEvent({ width }));
+            };
+            this._rescaleStartHandler = (evt) => {
+                this._columnBBox = pacemCore.Utils.offsetRect(this);
+            };
+            this._rescaleEndHandler = (evt) => {
+                // nothing(?)
+            };
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            pacemCore.Utils.addClass(this, pacemCore.PCSS + '-headcell');
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first && name === 'gridState') {
+                this._updateSortButtonIconGlyph();
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._ensureBalloon();
+        }
+        disconnectedCallback() {
+            this._disposeBalloon();
+            this._disposeRescaler();
+            super.disconnectedCallback();
+        }
+        updateLayout(metadata = this.metadata) {
+            this._setup(metadata);
+        }
+        _setupSortButton() {
+            const btn = new UI.PacemButtonElement();
+            btn.className = `button-flat headcell-sort ${pacemCore.PCSS}-inert`;
+            this.addEventListener('click', this._sortButtonClickHandler, false);
+            pacemCore.Utils.addClass(this, pacemCore.PCSS + '-clickable');
+            return btn;
+        }
+        _disposeSortButton(btn = this._sortButton) {
+            if (pacemCore.Utils.isNull(btn)) {
+                return;
+            }
+            pacemCore.Utils.removeClass(this, pacemCore.PCSS + '-clickable');
+            this.removeEventListener('click', this._sortButtonClickHandler, false);
+            btn.remove();
+            this._sortButton = null;
+        }
+        _updateSortButtonIconGlyph(btn = this._sortButton, state = this.gridState, metadata = this.metadata) {
+            if (pacemCore.Utils.isNull(btn) || pacemCore.Utils.isNullOrEmpty(metadata)) {
+                return;
+            }
+            btn.iconGlyph = state?.sort?.column === metadata.prop ? (state.sort.dir === 'desc' ? 'arrow_drop_down' : 'arrow_drop_up') : '';
+        }
+        _ensureRescaler() {
+            if (pacemCore.Utils.isNull(this._rescaler)) {
+                const r = this._rescaler = this._rescaler || new pacemCore.Components.PacemRescaleElement();
+                r.handles = [pacemCore.UI.RescaleHandle.Right];
+                r.addEventListener(pacemCore.UI.RescaleEventType.Rescale, this._rescaleHandler, false);
+                r.addEventListener(pacemCore.UI.RescaleEventType.Start, this._rescaleStartHandler, false);
+                r.addEventListener(pacemCore.UI.RescaleEventType.End, this._rescaleEndHandler, false);
+                pacemCore.CustomElementUtils.findAncestorShell(this).appendChild(r);
+            }
+        }
+        _setupRescaleContainer() {
+            this._ensureRescaler();
+            const c = new pacemCore.Components.PacemPanelElement();
+            c.className = "headcell-rescale";
+            c.behaviors = [this._rescaler];
+            return c;
+        }
+        _disposeRescaleContainer(c = this._rescaleContainer) {
+            if (pacemCore.Utils.isNull(c)) {
+                return;
+            }
+            c.remove();
+            this._rescaleContainer = null;
+        }
+        _disposeRescaler(r = this._rescaler) {
+            if (pacemCore.Utils.isNull(r)) {
+                return;
+            }
+            r.removeEventListener(pacemCore.UI.RescaleEventType.Rescale, this._rescaleHandler, false);
+            r.removeEventListener(pacemCore.UI.RescaleEventType.Start, this._rescaleStartHandler, false);
+            r.removeEventListener(pacemCore.UI.RescaleEventType.End, this._rescaleEndHandler, false);
+            r.remove();
+            this._rescaler = null;
+        }
+        //#endregion
+        _setup(metadata = this.metadata) {
+            this.setAttribute("css-class", "{{ this.metadata && this.metadata.headCell && this.metadata.headCell.cssClass || [] }}");
+            this.setAttribute("css", "{{ this.metadata && this.metadata.headCell && this.metadata.headCell.css }}");
+            const truncate = !!(metadata.headCell?.textEllipsis);
+            const cssClass = truncate ? ['text-truncate'] : [];
+            // alignment
+            switch (metadata.headCell?.verticalAlign?.toLowerCase()) {
+                case 'top':
+                    pacemCore.Utils.addClass(this, 'headcell-top');
+                    break;
+                case 'bottom':
+                    pacemCore.Utils.addClass(this, 'headcell-bottom');
+                    break;
+                case 'middle':
+                    pacemCore.Utils.addClass(this, 'headcell-middle');
+                    break;
+            }
+            switch (metadata.headCell?.horizontalAlign?.toLowerCase()) {
+                // headcell display is grid: set h-alignment at content-level
+                case 'left':
+                    cssClass.push('text-left');
+                    break;
+                case 'right':
+                    cssClass.push('text-right');
+                    break;
+                case 'center':
+                    cssClass.push('text-center');
+                    break;
+            }
+            // basic content
+            this.removeAttribute('content');
+            const css = !pacemCore.Utils.isNullOrEmpty(cssClass) ? ` class="${cssClass.join(' ')}"` : '';
+            const headContent = metadata.headCell?.name ?? metadata.prop;
+            this.innerHTML = `<div${css}>${headContent}</div>`;
+            if (metadata.isSortable) {
+                this._disposeSortButton();
+                const btn = this._sortButton = this._setupSortButton();
+                this._updateSortButtonIconGlyph(btn);
+                this.appendChild(btn);
+            }
+            if (metadata.isRescalable) {
+                this._disposeRescaleContainer();
+                const cnt = this._rescaleContainer = this._setupRescaleContainer();
+                this.appendChild(cnt);
+            }
+            if (metadata.isTogglable) ;
+        }
+        //#region balloon
+        _normalizeTooltip() {
+            const metadata = this.metadata.headCell?.tooltip || false;
+            if (typeof metadata === 'object') {
+                return metadata;
+            }
+            return { type: metadata };
+        }
+        _ensureBalloon() {
+            var innerText, tooltip;
+            const noBalloon = ((tooltip = this._normalizeTooltip()).type === false)
+                || pacemCore.Utils.isNullOrEmpty(innerText = this.metadata.headCell?.description);
+            // balloon
+            if (pacemCore.Utils.isNull(this._balloon) && !noBalloon) {
+                let balloon = new UI.PacemBalloonElement();
+                balloon.options = {
+                    behavior: UI.BalloonBehavior.Tooltip,
+                    trigger: tooltip.trigger || UI.BalloonTrigger.Hover,
+                    position: tooltip.position || UI.BalloonPosition.Top,
+                    hoverDelay: 200, hoverTimeout: 50,
+                    align: tooltip.align || UI.BalloonAlignment.Auto,
+                };
+                pacemCore.Utils.addClass(balloon, pacemCore.PCSS + '-headcell-tooltip');
+                var shell = pacemCore.CustomElementUtils.findAncestorShell(this);
+                shell.appendChild(this._balloon = balloon);
+            }
+            const balloon = this._balloon;
+            if (!pacemCore.Utils.isNull(balloon)) {
+                balloon.target = this;
+                if (!(balloon.disabled = noBalloon)) {
+                    const content = innerText || '';
+                    switch (tooltip.type) {
+                        case 'md':
+                        case 'markdown':
+                            balloon.innerHTML = this._md.toHtml(content);
+                            break;
+                        case 'html':
+                            balloon.innerHTML = content;
+                            break;
+                        default:
+                            balloon.innerText = content;
+                            break;
+                    }
+                }
+            }
+        }
+        _disposeBalloon() {
+            if (!pacemCore.Utils.isNull(this._balloon)) {
+                this._balloon.remove();
+                this._balloon = null;
+            }
+        }
+    };
+    PacemHeadCellElement = __decorate$1([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-headcell' })
+    ], PacemHeadCellElement);
+
+    var __decorate = (undefined && undefined.__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;
+    };
+    //namespace Pacem.Components.Plus {
+    const DataColumnRebuildEventName = 'datacolumnchange';
+    const DataColumnStateChangeEventName = 'datacolumnstatechange';
+    const DataGridConsts = {
+        Defaults: {
+            selectCaption: 'Details',
+            editCaption: 'Edit',
+            editIcon: 'edit',
+            deleteCaption: 'Delete',
+            deleteIcon: 'delete'
+        }
+    };
+    class DataGridBindEvent extends CustomEvent {
+        constructor(detail) {
+            super('databind', { cancelable: false, bubbles: false, detail });
+        }
+    }
+    class DataCellUIEvent extends pacemCore.CustomUIEvent {
+        constructor(type, detail, orig) {
+            super(type, detail, { bubbles: false, cancelable: true }, orig);
+        }
+    }
+    let PacemDataColumnElement = class PacemDataColumnElement extends pacemCore.Components.PacemItemElement {
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'field':
+                    case 'headcellCss':
+                    case 'headcellCssClass':
+                    case 'datacellCss':
+                    case 'datacellCssClass':
+                    case 'resizable':
+                    case 'togglable':
+                    case 'sortable':
+                    case 'label':
+                        this.dispatchEvent(new Event(DataColumnRebuildEventName));
+                        break;
+                    case 'order':
+                    case 'hide':
+                        this.dispatchEvent(new Event(DataColumnStateChangeEventName));
+                        break;
+                }
+            }
+        }
+    };
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemDataColumnElement.prototype, "field", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemDataColumnElement.prototype, "label", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemDataColumnElement.prototype, "resizable", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemDataColumnElement.prototype, "togglable", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemDataColumnElement.prototype, "sortable", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemDataColumnElement.prototype, "order", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json /*OrString (TODO)*/ })
+    ], PacemDataColumnElement.prototype, "format", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemDataColumnElement.prototype, "headcellCss", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemDataColumnElement.prototype, "headcellCssClass", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemDataColumnElement.prototype, "datacellCss", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemDataColumnElement.prototype, "datacellCssClass", void 0);
+    PacemDataColumnElement = __decorate([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-datacolumn' })
+    ], PacemDataColumnElement);
+    function headColumnHtml(c) {
+        return `<${pacemCore.P}-headcell metadata="{{ :host._getColumnMetadata('${c.prop}') }}" state="{{ :host._columnState.${c.prop} }}" grid-state="{{ :host._gridState }}"
+on-${DataColumnSortEventName}=":host._broadcastSortCommand($event)"
+on-${DataColumnRescaleEventName}=":host._broadcastRescaleCommand($event)"></${pacemCore.P}-headcell>`;
+    }
+    function dataColumnHtml(c, extra) {
+        return `<${pacemCore.P}-datacell metadata="{{ :host._getColumnMetadata('${c.prop}') }}" state="{{ :host._columnState.${c.prop} }}" grid-state="{{ :host._gridState }}"
+dataitem="{{ ^item }}" rowindex="{{ ^index }}" ${extra}></${pacemCore.P}-datacell>`;
+    }
+    let PacemDataGridElement = class PacemDataGridElement extends pacemCore.Components.PacemItemsContainerElement {
+        constructor(_key = pacemCore.Utils.uniqueCode()) {
+            super();
+            this._key = _key;
+            this.state = {};
+            // TODO: allow to persist states (key) on the session or location level...
+            this._columnState = {};
+            this._gridState = { sort: {}, orderedColumns: [], selectedRows: [] };
+            this._itemDataColumnRebuildHandler = (evt) => {
+                this._adaptColumnMetadata(this.items || []);
+            };
+            this._itemDataColumnChangeHandler = (evt) => {
+                this._adaptColumnMetadata(this.items || []);
+            };
+            this._memoizer = {};
+        }
+        validate(item) {
+            return item instanceof PacemDataColumnElement;
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this.addEventListener(pacemCore.CommandEventName, this._onCommand, false);
+            this._adaptColumnMetadata();
+            const cols = this._adaptedColumnMetadata || [];
+            this._buildUpGrid(cols);
+        }
+        disconnectedCallback() {
+            this.removeEventListener(pacemCore.CommandEventName, this._onCommand, false);
+            super.disconnectedCallback();
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'items':
+                    case 'metadata':
+                        this._adaptColumnMetadata();
+                        break;
+                    case '_adaptedColumnMetadata':
+                        this._buildUpGrid(val);
+                        break;
+                    case 'datasource':
+                        // cleanup row selection as datasource changes...
+                        const eventArgs = { keepRowSelection: false, datasource: val };
+                        const event = new DataGridBindEvent(eventArgs);
+                        this.dispatchEvent(event);
+                        if (!eventArgs.keepRowSelection) {
+                            this._setRowSelection();
+                        }
+                        break;
+                    case 'state':
+                        this._mergeState(val);
+                        break;
+                }
+            }
+        }
+        register(item) {
+            if (super.register(item)) {
+                // add listeners
+                item.addEventListener(DataColumnRebuildEventName, this._itemDataColumnRebuildHandler, false);
+                item.addEventListener(DataColumnStateChangeEventName, this._itemDataColumnChangeHandler, false);
+                return true;
+            }
+            return false;
+        }
+        unregister(item) {
+            if (super.unregister(item)) {
+                // remove listeners
+                item.removeEventListener(DataColumnRebuildEventName, this._itemDataColumnRebuildHandler, false);
+                item.removeEventListener(DataColumnStateChangeEventName, this._itemDataColumnChangeHandler, false);
+                return true;
+            }
+            return false;
+        }
+        /**
+         * Sets the selected rows among the current ones.
+         * @param args
+         */
+        setRowSelection(...args) {
+            const indices = Array.from(args);
+            this._setRowSelection(indices);
+        }
+        _setRowSelection(indices) {
+            const args = (indices || []).map(i => { return { item: this.datasource[i], index: i }; });
+            const evt = new DataRowSelectChangeEvent({ selectedRows: args });
+            this.dispatchEvent(evt);
+            if (!evt.defaultPrevented) {
+                let retval = evt.detail.selectedRows;
+                if (!pacemCore.Utils.isArray(retval)) {
+                    retval = [];
+                }
+                this._doSetRowSelection(retval.map(i => (i?.index ?? -1)).filter(i => i >= 0));
+            }
+        }
+        _doSetRowSelection(selectedRows) {
+            const selection = { selectedRows };
+            this._mergeState(selection);
+        }
+        /**
+         * Merges and synchronizes grid states (public vs private).
+         * @param state Partial state to be merged
+         */
+        _mergeState(state = this.state) {
+            state ??= {};
+            // normalize selected rows into numbers
+            const normalizedState = { selectedRows: (state.selectedRows || []).map((i) => typeof i === 'number' ? i : i.index) };
+            const newState = this._gridState = pacemCore.Utils.extend({}, this._gridState, state, normalizedState);
+            // does not trigger propertychange event (does not have to).
+            this.state = pacemCore.Utils.extend(this.state ?? {}, newState);
+        }
+        _adaptColumnMetadata(items = this.items, metadata = this.metadata) {
+            const output = Array.prototype.concat.apply((items || []).map(i => {
+                const retval = {
+                    prop: i.field,
+                    // format: i.format,
+                    headCell: {
+                        name: i.label, cssClass: i.headcellCssClass || [], css: i.headcellCss || {}
+                    },
+                    dataCell: {
+                        format: i.format, cssClass: i.datacellCssClass || [], css: i.datacellCss || {}
+                    },
+                    hide: i.hide,
+                    isRescalable: i.resizable,
+                    isSortable: i.sortable,
+                    isTogglable: i.togglable,
+                    order: i.order,
+                    width: 1,
+                };
+                return retval;
+            }), metadata || []);
+            this._memoizer = {};
+            this._adaptedColumnMetadata = output;
+        }
+        _getColumnMetadata(prop) {
+            return this._memoizer[prop] = this._memoizer[prop] || this._adaptedColumnMetadata.find(m => m.prop === prop);
+        }
+        _buildUpGrid(metadata) {
+            const container = this._tableContainer;
+            if (pacemCore.Utils.isNull(container)) {
+                return;
+            }
+            if (pacemCore.Utils.isNullOrEmpty(metadata)) {
+                container.innerHTML = '';
+                return;
+            }
+            const options = this.options = pacemCore.Utils.extend({}, DataGridConsts.Defaults, this.options || {}), hasCommands = options.allowDelete || options.allowEdit || options.allowSelect, multiSelect = options.allowMultiSelect && hasCommands;
+            let css = multiSelect ? 'auto ' : '', headcells = multiSelect ? `<div class="${pacemCore.PCSS}-headcell"></div>` : '', datacells = multiSelect ? `<${pacemCore.P}-panel class="${pacemCore.PCSS}-datacell" style="grid-column: 1;" css="{{ {'grid-row': ^index+2} }}"></${pacemCore.P}-panel>` : '', footcells = multiSelect ? `<div class="${pacemCore.PCSS}-footcell"></div>` : '';
+            const colCount = multiSelect ? (metadata.length + 2) : (hasCommands ? (metadata.length + 1) : metadata.length);
+            this._gridState.orderedColumns = metadata.sort((i, j) => ((i.order ?? 0) - (j.order ?? 0))).map(i => i.prop);
+            let extraUi = '';
+            for (let evtType of pacemCore.Components.PacemElement.emittedEventTypes) {
+                extraUi += ` on-${evtType}=":host._broadcastUiEvent(^item, ^index, $event)"`;
+            }
+            // loop
+            for (let c of metadata) {
+                this._columnState[c.prop] = {
+                    hidden: c.hide
+                };
+                // css
+                css += this._getColumnSize(c).replaceAll(' ', '') + ' ';
+                // headcell
+                headcells += headColumnHtml(c);
+                // datacell
+                datacells += dataColumnHtml(c, extraUi);
+            }
+            datacells += `<${pacemCore.P}-panel class="${pacemCore.PCSS}-datarow" css-class="{{ {'datarow-alt': ^index % 2 === 1, 'datarow-first': ^index === 0, 'datarow-last': ^index === (:host.datasource.length - 1), 'datarow-selected': :host._gridState.selectedRows.indexOf(^index) >= 0 } }}" style="grid-column: 1 /span ${colCount};" css="{{ {'grid-row': ^index+2} }}"></${pacemCore.P}-panel>`;
+            const html = `<${pacemCore.P}-repeater datasource="{{ :host.datasource }}">
+<${pacemCore.P}-panel class="${pacemCore.PCSS}-datatable" css="{{ {'grid-template-columns': :host._getColumnSizes(:host._columnState, '${css.trimEnd()}', :host._gridState) } }}">
+    ${headcells}
+    <template>
+    ${datacells}
+    </template>
+    ${footcells}
+</${pacemCore.P}-panel>`;
+            container.innerHTML = html;
+        }
+        _getColumnSizes(state = this._columnState, css, grid = this._gridState) {
+            if (pacemCore.Utils.isNullOrEmpty(state)) {
+                return css;
+            }
+            const split = css.split(' ');
+            for (let prop in state) {
+                const col = state[prop];
+                const ndx = grid.orderedColumns.indexOf(prop);
+                if (col.hidden) {
+                    split[ndx] = 'auto';
+                }
+                else if (col.pixelWidth > 0) {
+                    split[ndx] = col.pixelWidth + 'px';
+                }
+            }
+            return split.join(' ');
+        }
+        _getColumnSize(c) {
+            if (c.hide) {
+                return 'auto';
+            }
+            const min = c.minPixelWidth, max = c.maxPixelWidth;
+            if (max > 0 && min > 0) {
+                return `minmax(${min}px, ${max}px)`;
+            }
+            else {
+                const flexWidth = typeof c.width === 'number' ? (c.width + 'fr') : 'auto';
+                if (min > 0) {
+                    return `minmax(${min}px, ${flexWidth})`;
+                }
+                if (max > 0) {
+                    return `minmax(${flexWidth}, ${max}px)`;
+                }
+                return flexWidth;
+            }
+        }
+        //#endregion
+        //#region events
+        _onCommand(evt) {
+            // DO NOT stop bubbling! Might be 'handy' in autogenerated forms...
+            // Pacem.stopPropagationHandler(evt);
+            // ...But might lead to unwanted behaviors in nested repeaters.
+            // Thus include the 'originalEvent' in the outscoped one as a read-only property.
+            // 'itemcommand' event fires first
+            this.dispatchEvent(new pacemCore.Components.ItemCommandEvent(/* 'originalEvent' */ evt));
+            // custom 'item<cmd>' event fires next
+            this.dispatchEvent(new pacemCore.Components.CustomItemCommandEvent(/* 'originalEvent' */ evt));
+        }
+        _broadcastUiEvent(item, index, evt) {
+            const evtType = evt.type.toLowerCase(), type = 'datacell' + evtType;
+            const args = { dataitem: item, rowindex: index, datacell: evt.srcElement }, uiEvt = (evt instanceof MouseEvent || evt instanceof TouchEvent || evt instanceof KeyboardEvent) ? new DataCellUIEvent(type, args, evt) : new DataCellUIEvent(type, args);
+            this.dispatchEvent(uiEvt);
+            if (evtType === 'click' && !uiEvt.defaultPrevented) {
+                const datacell = uiEvt.detail.datacell;
+                const selectMode = datacell.metadata?.dataCell?.selectMode?.toLowerCase();
+                switch (selectMode) {
+                    case 'cell':
+                        break;
+                    case 'row':
+                        this._broadcastSelectCommand(uiEvt.detail.rowindex);
+                        break;
+                }
+            }
+        }
+        _broadcastSortCommand(evt) {
+            const sort = evt.detail;
+            const event = new DataColumnSortEvent(sort);
+            this.dispatchEvent(event);
+            if (!event.defaultPrevented) {
+                const sort2 = { column: '' };
+                if (typeof event.detail.column === 'string') {
+                    sort2.column = event.detail.column;
+                }
+                if (typeof event.detail.dir === 'string') {
+                    sort2.dir = event.detail.dir === 'desc' ? 'desc' : 'asc';
+                }
+                this._gridState = pacemCore.Utils.extend({}, this._gridState, /* let it be manipulated on the "other side" */ { sort: sort2 });
+            }
+        }
+        _broadcastRescaleCommand(evt) {
+            const rescale = evt.detail;
+            const event = new DataColumnRescaleEvent(rescale);
+            this.dispatchEvent(event);
+            if (!event.defaultPrevented) {
+                let width2 = rescale.width;
+                if (typeof event.detail.width === 'number' && event.detail.width > 0) {
+                    width2 = event.detail.width;
+                }
+                const column = evt.srcElement.metadata;
+                const newState = {};
+                newState[column.prop] = { pixelWidth: width2 };
+                this._columnState = pacemCore.Utils.extend({}, this._columnState, newState);
+            }
+        }
+        _broadcastSelectCommand(toggledRowIndex) {
+            let actualRows = (this._gridState.selectedRows || []).slice(0);
+            const ndx = actualRows.indexOf(toggledRowIndex);
+            let trigger = true;
+            if (ndx >= 0) {
+                actualRows.splice(ndx, 1);
+            }
+            else {
+                const options = this.options;
+                if (options.allowMultiSelect) {
+                    actualRows.push(toggledRowIndex);
+                }
+                else if (options.allowSelect) {
+                    actualRows = [toggledRowIndex];
+                }
+                else {
+                    trigger = false;
+                    const msg = `Cannot select the row at index ${toggledRowIndex} since datagrid options do not allow any row selection.`;
+                    if (pacemCore.Utils.isNull(this.logger)) {
+                        console.warn(msg);
+                    }
+                    else {
+                        this.log(pacemCore.Logging.LogLevel.Warn, msg);
+                    }
+                }
+            }
+            if (trigger) {
+                this._setRowSelection(actualRows);
+            }
+        }
+    };
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json })
+    ], PacemDataGridElement.prototype, "metadata", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json })
+    ], PacemDataGridElement.prototype, "options", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json })
+    ], PacemDataGridElement.prototype, "state", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: true, converter: pacemCore.PropertyConverters.Json })
+    ], PacemDataGridElement.prototype, "datasource", void 0);
+    __decorate([
+        pacemCore.ViewChild('.' + pacemCore.PCSS + '-datagrid')
+    ], PacemDataGridElement.prototype, "_tableContainer", void 0);
+    __decorate([
+        pacemCore.Watch()
+    ], PacemDataGridElement.prototype, "_adaptedColumnMetadata", void 0);
+    __decorate([
+        pacemCore.Watch()
+    ], PacemDataGridElement.prototype, "_columnState", void 0);
+    __decorate([
+        pacemCore.Watch()
+    ], PacemDataGridElement.prototype, "_gridState", void 0);
+    __decorate([
+        pacemCore.Debounce()
+    ], PacemDataGridElement.prototype, "_adaptColumnMetadata", null);
+    PacemDataGridElement = __decorate([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-datagrid', shadow: false, template: `<div class="${pacemCore.PCSS}-datagrid"></div><${pacemCore.P}-content></${pacemCore.P}-content>` })
+    ], PacemDataGridElement);
+
+    var indexComponents = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        DataCellUIEvent: DataCellUIEvent,
+        DataColumnRescaleEvent: DataColumnRescaleEvent,
+        DataColumnRescaleEventName: DataColumnRescaleEventName,
+        DataColumnSortEvent: DataColumnSortEvent,
+        DataColumnSortEventName: DataColumnSortEventName,
+        DataGridBindEvent: DataGridBindEvent,
+        DataRowSelectChangeEvent: DataRowSelectChangeEvent,
+        DataRowSelectChangeEventName: DataRowSelectChangeEventName,
+        get EditMode () { return EditMode; },
+        PacemBaseCellElement: PacemBaseCellElement,
+        get PacemCarouselElement () { return PacemCarouselElement; },
+        get PacemContextMenuElement () { return PacemContextMenuElement; },
+        get PacemContextMenuItemCommandElement () { return PacemContextMenuItemCommandElement; },
+        PacemContextMenuItemElement: PacemContextMenuItemElement,
+        get PacemContextMenuItemSeparatorElement () { return PacemContextMenuItemSeparatorElement; },
+        get PacemDataCellElement () { return PacemDataCellElement; },
+        get PacemDataColumnElement () { return PacemDataColumnElement; },
+        get PacemDataGridElement () { return PacemDataGridElement; },
+        get PacemEditElement () { return PacemEditElement; },
+        get PacemGalleryElement () { return PacemGalleryElement; },
+        get PacemHeadCellElement () { return PacemHeadCellElement; },
+        get PacemModalFormElement () { return PacemModalFormElement; },
+        get PacemRouterHashStateElement () { return PacemRouterHashStateElement; },
+        get PacemSearchElement () { return PacemSearchElement; }
+    });
+
+    var Output = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        Components: indexComponents,
+        Plus: indexPlus
+    });
+
+    pacemFoundation.DeepMerger.merge(Output);
+
+})(Pacem, Pacem, Pacem, Pacem);
+//# sourceMappingURL=pacem-plus.js.map