@pacem/pacem 1.0.0-abel

package/dist/browser/pacem-cms.js

@@ -0,0 +1,2220 @@
+/**
+ * @pacem/pacem v1.0.0-abel (https://js.pacem.it)
+ * Copyright 2026 Pacem (https://pacem.it)
+ * Licensed under Apache-2.0
+ */
+(function (pacemFoundation, pacemCore, pacemScaffolding, pacemUi) {
+    'use strict';
+
+    //namespace Pacem.Components.Cms {
+    /** Function container proxy (used in metadata) */
+    const Functions = {
+        'dismiss': (...args) => {
+            for (let name of args || []) {
+                delete Functions[name];
+            }
+        },
+        'handleExpressionValueChange': (evt, prop, entity) => {
+            if (evt.detail.propertyName === 'value' && !pacemCore.Utils.isNull(entity)) {
+                const value = evt.detail.currentValue;
+                if (entity instanceof HTMLElement) {
+                    // handle the entity as an element and modify the attribute
+                    let attr = pacemCore.CustomElementUtils.camelToKebab(prop);
+                    if (pacemCore.Utils.isNullOrEmpty(value)) {
+                        entity.removeAttribute(attr);
+                    }
+                    else {
+                        entity.setAttribute(attr, value.toString());
+                    }
+                }
+                else {
+                    entity[prop] = value;
+                }
+            }
+        }
+    };
+    /** Default metadata ('expression' field) 'type' factory. */
+    const EXPRESSION_METADATA_TYPE = (host, hostRef = ':host', hostEntityRef = ':host.entity') => {
+        const attrs = {}, meta = host.metadata, fns = Functions, fnKeys = [];
+        attrs['value'] = `{{ ${hostEntityRef} instanceof HTMLElement && ${hostEntityRef}.getAttribute('${pacemCore.CustomElementUtils.camelToKebab(meta.prop)}') }}`;
+        attrs['on-' + pacemCore.PropertyChangeEventName] = `Pacem.Components.Cms.Functions.handleExpressionValueChange($event, '${meta.prop}', ${hostEntityRef})`;
+        attrs['converter'] = `{{ Pacem.CustomElementUtils.getWatchedProperty(${hostEntityRef}, '${meta.prop}').config.converter }}`;
+        const tagName = pacemCore.P + '-expression';
+        let extra = (meta.extra || {});
+        // selector
+        if (!pacemCore.Utils.isNullOrEmpty(extra.selector)) {
+            attrs['selector'] = extra.selector;
+        }
+        // filters to the selector
+        if (!pacemCore.Utils.isNullOrEmpty(extra.filter)) {
+            switch (typeof extra.filter) {
+                case 'string':
+                    attrs['filter'] = `{{ (e) => e.constructor.name === "${extra.filter}" || e.localName === "${extra.filter.toLowerCase()}" }}`;
+                    break;
+                case 'function':
+                    const fnKey = 'fn' + pacemCore.Utils.uniqueCode();
+                    fns[fnKey] = extra.filter;
+                    attrs['filter'] = `{{ Pacem.Components.Cms.Functions.${fnKey}, once }}`;
+                    // tidy-up memento
+                    fnKeys.push(fnKey);
+                    break;
+            }
+        }
+        // labeler
+        if (typeof extra.labeler === 'function') {
+            const fnKey = 'fn' + pacemCore.Utils.uniqueCode();
+            fns[fnKey] = extra.labeler;
+            attrs['labeler'] = `{{ Pacem.Components.Cms.Functions.${fnKey}, once }}`;
+            // tidy-up memento
+            fnKeys.push(fnKey);
+        }
+        if (fnKeys.length > 0) {
+            // tidy-up
+            attrs['on-unload'] = `{{ Pacem.Components.Cms.Functions.dismiss('${fnKeys.join('\',\'')}') }}`;
+        }
+        return { tagName: tagName, attrs: attrs };
+    };
+
+    var __decorate$e = (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.Cms {
+    class PacemElementPickerElementBase extends pacemScaffolding.Components.Scaffolding.PacemBaseElement {
+    }
+    __decorate$e([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemElementPickerElementBase.prototype, "selector", void 0);
+    __decorate$e([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Eval })
+    ], PacemElementPickerElementBase.prototype, "filter", void 0);
+    __decorate$e([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Eval })
+    ], PacemElementPickerElementBase.prototype, "labeler", void 0);
+    let PacemElementPickerElement = class PacemElementPickerElement extends PacemElementPickerElementBase {
+        get inputFields() {
+            return [this._select];
+        }
+        toggleReadonlyView(readonly) {
+            this._select.readonly = readonly;
+        }
+        onChange(_) {
+            return pacemCore.Utils.fromResult(this.value = this._select.value);
+        }
+        acceptValue(val) {
+            this._select.value = val;
+        }
+        getViewValue(value) {
+            return this._select.viewValue;
+        }
+        convertValueAttributeToProperty(attr) {
+            return pacemCore.PropertyConverters.Element.convert(attr);
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._databind();
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'selector':
+                    case 'filter':
+                    case 'labeler':
+                        this._databind();
+                        break;
+                }
+            }
+        }
+        _databind() {
+            const project = this.labeler || (e => {
+                let label = e.constructor.name;
+                if (e.id) {
+                    label += '#' + e.id;
+                }
+                return label;
+            });
+            const retval = [];
+            document.querySelectorAll(this.selector || '[pacem]').forEach((e, i, arr) => {
+                if ((pacemCore.Utils.isNull(this.filter) || this.filter(e) === true)
+                    // let' say 'id' is a must-have...
+                    && !pacemCore.Utils.isNullOrEmpty(e.id)) {
+                    retval.push({ element: e, label: project(e) });
+                }
+            });
+            this._select.valueProperty = 'element';
+            this._select.textProperty = 'label';
+            this._select.datasource = retval;
+        }
+    };
+    __decorate$e([
+        pacemCore.ViewChild(pacemCore.P + '-select')
+    ], PacemElementPickerElement.prototype, "_select", void 0);
+    __decorate$e([
+        pacemCore.Debounce(50)
+    ], PacemElementPickerElement.prototype, "_databind", null);
+    PacemElementPickerElement = __decorate$e([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-element-picker', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<${pacemCore.P}-select></${pacemCore.P}-select>`
+        })
+    ], PacemElementPickerElement);
+
+    var __decorate$d = (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.Cms {
+    var ExpressionSource;
+    (function (ExpressionSource) {
+        ExpressionSource["Constant"] = "const";
+        ExpressionSource["PropertyReference"] = "property";
+        ExpressionSource["Expression"] = "expr";
+    })(ExpressionSource || (ExpressionSource = {}));
+    let PacemExpressionElement = class PacemExpressionElement extends PacemElementPickerElementBase {
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (name === 'converter') {
+                this._setFeedbackText(this.value);
+            }
+            else if (!first) {
+                if (this._editing) {
+                    switch (name) {
+                        case '_source':
+                            switch (val) {
+                                case ExpressionSource.PropertyReference:
+                                    this._picker.focus();
+                                    break;
+                                default:
+                                    this._editor.focus();
+                                    break;
+                            }
+                            break;
+                        case '_propRef':
+                            if (!pacemCore.Utils.isNullOrEmpty(val)) {
+                                this._editor.focus();
+                                this._editor.value = '{{ #' + this._sourceRef.id + '.' + val + '  }}';
+                            }
+                            this.changeHandler(new Event('change'));
+                            break;
+                    }
+                }
+            }
+        }
+        get inputFields() {
+            return [this._editor];
+        }
+        toggleReadonlyView(readonly) {
+            if (readonly) {
+                // ensure not editing
+                this._editing = false;
+            }
+        }
+        setPristine() {
+            super.setPristine();
+            this._editing = false;
+        }
+        onChange(_) {
+            return pacemCore.Utils.fromResult(this.value = this._editor.value);
+        }
+        acceptValue(val) {
+            this._view.textContent = val || '...';
+            this._setFeedbackText(val);
+            this._reverseStructure();
+            if (val !== this._editor.value) {
+                this._editor.value = val;
+            }
+        }
+        _setFeedbackText(val = this.value) {
+            const converter = this.converter;
+            if (pacemCore.CustomElementUtils.isBindingAttribute(val) || typeof (converter && converter.convert) !== 'function') {
+                this._eval.setAttribute('text', val);
+            }
+            else if (val === undefined) {
+                this._eval.text = '<undefined>';
+            }
+            else {
+                this._eval.text = converter.convert(val);
+            }
+        }
+        getViewValue(value) {
+            return value;
+        }
+        convertValueAttributeToProperty(attr) {
+            return attr;
+        }
+        _reverseStructure() {
+            let cleanup = () => {
+                this._source = this._sourceRef = this._propRef = /*this.value =*/ undefined;
+            };
+            // dependencies?
+            let expr = this.value;
+            if (!pacemCore.Utils.isNullOrEmpty(expr)) {
+                // setup the most likely form fields
+                if (pacemCore.CustomElementUtils.isBindingAttribute(expr)) {
+                    const expression = pacemCore.CustomElementUtils.parseBindingAttribute(expr, this), deps = expression.dependencies;
+                    // complex or simple (one dependency) expression
+                    if (pacemCore.Utils.isNullOrEmpty(deps) || deps.length > 1 || pacemCore.RepeaterItem.isRepeaterItem(deps[0].element)) {
+                        this._source = ExpressionSource.Expression;
+                    }
+                    else {
+                        const dep = deps[0];
+                        this._source = ExpressionSource.PropertyReference;
+                        this._sourceRef = document.querySelector('#' + dep.element.id);
+                        this._propRef = dep.path;
+                    }
+                }
+                else {
+                    this._source = ExpressionSource.Constant;
+                }
+                //
+            }
+            else {
+                cleanup();
+            }
+        }
+    };
+    __decorate$d([
+        pacemCore.Watch({ emit: false })
+    ], PacemExpressionElement.prototype, "converter", void 0);
+    __decorate$d([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemExpressionElement.prototype, "_editing", void 0);
+    __decorate$d([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemExpressionElement.prototype, "_source", void 0);
+    __decorate$d([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Element })
+    ], PacemExpressionElement.prototype, "_sourceRef", void 0);
+    __decorate$d([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemExpressionElement.prototype, "_propRef", void 0);
+    __decorate$d([
+        pacemCore.ViewChild(pacemCore.P + '-element-picker')
+    ], PacemExpressionElement.prototype, "_picker", void 0);
+    __decorate$d([
+        pacemCore.ViewChild(pacemCore.P + '-textarea')
+    ], PacemExpressionElement.prototype, "_editor", void 0);
+    __decorate$d([
+        pacemCore.ViewChild('span.' + pacemCore.PCSS + '-viewfinder')
+    ], PacemExpressionElement.prototype, "_view", void 0);
+    __decorate$d([
+        pacemCore.ViewChild(pacemCore.P + '-text')
+    ], PacemExpressionElement.prototype, "_eval", void 0);
+    __decorate$d([
+        pacemCore.Debounce(50)
+    ], PacemExpressionElement.prototype, "_reverseStructure", null);
+    PacemExpressionElement = __decorate$d([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-expression', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<${pacemCore.P}-collapse class="${pacemCore.PCSS}-expression" collapse="{{ !:host._editing }}">
+    <div class="expression-builder ${pacemCore.PCSS}-grid grid-tiny-rowgap grid-tiny-colgap ${pacemCore.PCSS}-pad pad-bottom-2">
+        <div class="${pacemCore.PCSS}-cell">
+            <${pacemCore.P}-select value="{{ :host._source, twoway }}" class="display-block">
+                <${pacemCore.P}-data-item value="${ExpressionSource.Constant}" label="constant value"></${pacemCore.P}-data-item>
+                <${pacemCore.P}-data-item value="${ExpressionSource.PropertyReference}" label="property reference"></${pacemCore.P}-data-item>
+                <${pacemCore.P}-data-item value="${ExpressionSource.Expression}" label="complex expression"></${pacemCore.P}-data-item>
+            </${pacemCore.P}-select>
+        </div>
+
+        <${pacemCore.P}-panel class="${pacemCore.PCSS}-cell cols-hd-6" hide="{{ :host._source !== '${ExpressionSource.PropertyReference}' }}">
+            <${pacemCore.P}-element-picker value="{{ :host._sourceRef, twoway }}" selector="{{ :host.selector }}" filter="{{ :host.filter }}" labeler="{{ :host.labeler }}" class="display-block"></${pacemCore.P}-element-picker>
+        </${pacemCore.P}-panel>
+        <${pacemCore.P}-panel class="${pacemCore.PCSS}-cell cols-hd-6" hide="{{ :host._source !== '${ExpressionSource.PropertyReference}' }}">
+            <${pacemCore.P}-property-picker value="{{ :host._propRef, twoway }}" disabled="{{ !:host._sourceRef }}" target="{{ :host._sourceRef }}" on-change="::_editor.focus()" class="display-block"></${pacemCore.P}-property-picker>
+        </${pacemCore.P}-panel>
+
+        <${pacemCore.P}-panel class="${pacemCore.PCSS}-cell">
+            <${pacemCore.P}-textarea class="display-block" placeholder="{{ '{{ '+ (:host._source || '') +'... }}' }}" change-policy="${pacemScaffolding.Components.Scaffolding.ChangePolicy.Blur}"></${pacemCore.P}-textarea>
+        </${pacemCore.P}-panel>
+    </div>
+</${pacemCore.P}-collapse>
+<div class="${pacemCore.PCSS}-fieldset">
+    <div class="fieldset-left">
+        <div class="${pacemCore.PCSS}-fieldgroup ${pacemCore.PCSS}-viewfinder">
+            <div class="text-truncate ${pacemCore.PCSS}-pad pad-x-1"><span class="${pacemCore.PCSS}-viewfinder text-tech">{{ :host.value || '...' }}</span></div>
+            <${pacemCore.P}-panel class="fieldgroup-prepend">
+                <${pacemCore.P}-button class="flat edit ${pacemCore.PCSS}-pad pad-left-1" on-click=":host._editing = !:host._editing" hide="{{ :host.readonly }}"></${pacemCore.P}-button>
+            </${pacemCore.P}-panel>
+            <${pacemCore.P}-panel class="fieldgroup-append text-tech display-flex flex-middle flex-nowrap" hide="{{ $pacem.isNullOrEmpty(:host.value) }}">
+                <i class="${pacemCore.PCSS}-icon text-primary">keyboard_arrow_right</i>
+                <${pacemCore.P}-text text="?" class="bg-primary ${pacemCore.PCSS}-pad pad-left-1 pad-right-1 ${pacemCore.PCSS}-margin margin-right-1 text-truncate" eval></${pacemCore.P}-text>
+            </${pacemCore.P}-panel>
+        </div>
+    </div>
+</div>`
+        })
+    ], PacemExpressionElement);
+
+    var __decorate$c = (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.Cms {
+    const DEFAULT_PERMISSION_METADATA = {
+        props: [
+            {
+                prop: 'permissions',
+                // child form-fields
+                type: 'array',
+                display: { name: 'Permissions' },
+                props: {
+                    display: { cssClass: [pacemCore.PCSS + '-cell', pacemCore.PCSS + '-grid', 'grid-novgap', 'grid-tiny-colgap', 'grid-nospace'], name: 'Permission' },
+                    props: Array.prototype.concat.apply([
+                        {
+                            prop: 'claimType', type: 'string',
+                            display: { cssClass: [pacemCore.PCSS + '-cell', 'cols-hd-4', 'cols-lg-6', 'field-stretch', 'field-minimal'], name: 'Claim type' },
+                            validators: [{ type: 'required', errorMessage: '!' }]
+                        },
+                        {
+                            prop: 'claimValue', type: 'string',
+                            display: { cssClass: [pacemCore.PCSS + '-cell', 'cols-hd-4', 'cols-lg-6', 'field-stretch', 'field-minimal'], name: 'Claim value' },
+                            validators: [{ type: 'required', errorMessage: '!' }]
+                        },
+                    ], ['read', 'update', 'create', 'delete'].map((p, j) => {
+                        return {
+                            prop: p,
+                            type: 'boolean',
+                            display: { cssClass: [pacemCore.PCSS + '-cell', 'cols-hd-1', 'cols-3', 'field-minimal', pacemCore.PCSS + '-pad pad-left-2'], name: p.charAt(0).toUpperCase() + p.substr(1) }
+                        };
+                    }))
+                }
+            }
+        ]
+    };
+    const DEFAULT_METADATA = {
+        display: { name: 'Widget', cssClass: [pacemCore.PCSS + '-grid', 'grid-novgap', 'grid-tiny-colgap', 'grid-nospace'] },
+        props: [
+            { prop: 'tag', type: 'string', display: { name: 'Tag', cssClass: [pacemCore.PCSS + '-cell'] } }
+        ]
+    };
+    function cellifyMetadata(p) {
+        // ensure pacem-cell cssClass
+        p.display = p.display || { name: p.prop, cssClass: [] };
+        const css = p.display.cssClass = pacemCore.Utils.isArray(p.display.cssClass) && p.display.cssClass || [];
+        css.push(pacemCore.PCSS + '-cell');
+    }
+    function gridifyMetadata(metadata) {
+        var props = metadata && metadata.props || [];
+        var display = metadata && metadata.display || { name: 'Element' };
+        if (!pacemCore.Utils.isNull(display)) {
+            const css = display.cssClass = display.cssClass || [];
+            Array.prototype.push.apply(css, DEFAULT_METADATA.display.cssClass);
+        }
+        props.forEach(cellifyMetadata);
+        return { display: display, props: props };
+    }
+    function buildWidgetMetadata(metadata) {
+        var display = pacemCore.Utils.extend({}, DEFAULT_METADATA.display, metadata && metadata.display || {});
+        var props = pacemCore.Utils.clone(DEFAULT_METADATA.props);
+        Array.prototype.push.apply(props, (metadata && metadata.props || []).filter(p => {
+            if (p.prop === 'tag') {
+                return false;
+            }
+            cellifyMetadata(p);
+            return true;
+        }));
+        return { display: display, props: props };
+    }
+    const WIDGET_CSS_CLASS = pacemCore.PCSS + '-widget';
+    /** Default metadata ('expression' field) 'extra' object. */
+    const EXPRESSION_WIDGET_METADATA_EXTRA = {
+        selector: '.' + WIDGET_CSS_CLASS,
+        labeler: (e) => {
+            if (!pacemCore.Utils.isNullOrEmpty(e.tag)) {
+                return e.tag;
+            }
+            return (e.metadata && e.metadata.display && e.metadata.display.name || '') + '#' + e.id;
+        }
+    };
+    class Widget {
+        /**
+         * Utility method for widget gathering.
+         * @param predicate Predicate for filtering
+         */
+        static findAll(predicate) {
+            return pacemCore.CustomElementUtils.findAll('.' + WIDGET_CSS_CLASS, (widget) => widget instanceof PacemWidgetElement && !pacemCore.Utils.isNullOrEmpty(widget.id) && (pacemCore.Utils.isNull(predicate) || predicate(widget)));
+        }
+    }
+    let PacemWidgetToolbarElement = class PacemWidgetToolbarElement extends pacemCore.Components.PacemElement {
+        /** Gets the toolbar's edit button. */
+        get editButton() {
+            return this._btnEdit;
+        }
+        /** Gets the toolbar's permimssions button. */
+        get permissionsButton() {
+            return this._btnPerms;
+        }
+        /** Gets the toolbar's remove button. */
+        get removeButton() {
+            return this._btnRemove;
+        }
+        _edit(evt) {
+            const form = this._proxy.dom.find(e => 'core' in e.attributes);
+            form.open(this.target, true);
+            form.metadata = this.target.metadata;
+            // popout
+            this._popoutJustInCase();
+        }
+        _editPermissions(evt) {
+            const form = this._proxy.dom.find(e => 'permissions' in e.attributes);
+            form.open(this.target);
+            form.metadata = this.target.permissionMetadata;
+            // popout
+            this._popoutJustInCase();
+        }
+        _popoutJustInCase() {
+            const balloon = pacemCore.CustomElementUtils.findAncestorOfType(this, UI.PacemBalloonElement);
+            if (!pacemCore.Utils.isNullOrEmpty(balloon)) {
+                balloon.popout();
+            }
+        }
+    };
+    __decorate$c([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Element })
+    ], PacemWidgetToolbarElement.prototype, "target", void 0);
+    __decorate$c([
+        pacemCore.ViewChild('.buttons > div')
+    ], PacemWidgetToolbarElement.prototype, "_toolbar", void 0);
+    __decorate$c([
+        pacemCore.ViewChild(pacemCore.P + '-button[edit]')
+    ], PacemWidgetToolbarElement.prototype, "_btnEdit", void 0);
+    __decorate$c([
+        pacemCore.ViewChild(pacemCore.P + '-button[permissions]')
+    ], PacemWidgetToolbarElement.prototype, "_btnPerms", void 0);
+    __decorate$c([
+        pacemCore.ViewChild(pacemCore.P + '-button[remove]')
+    ], PacemWidgetToolbarElement.prototype, "_btnRemove", void 0);
+    __decorate$c([
+        pacemCore.ViewChild(pacemCore.P + '-shell-proxy')
+    ], PacemWidgetToolbarElement.prototype, "_proxy", void 0);
+    PacemWidgetToolbarElement = __decorate$c([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-widget-toolbar', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<${pacemCore.P}-span class="toolbar-text" content="{{ '<i class=&quot;${pacemCore.PCSS}-icon&quot;>'+ (::target.metadata && ::target.metadata.display && ::target.metadata.display.icon || 'widgets') +'</i> '+ (::target.tag || (::target.metadata && ::target.metadata.display && ::target.metadata.display.name || ::target.localName) +'#'+ ::target.id) }}"></${pacemCore.P}-span>
+<div class="buttons ${pacemCore.PCSS}-buttonset ${pacemCore.PCSS}-pad ${pacemCore.PCSS}-margin pad-0 margin-left-2">
+    <div class="buttonset-left">
+        <${pacemCore.P}-button edit class="button edit" on-click=":host._edit($event)"></${pacemCore.P}-button>
+        <${pacemCore.P}-button permissions class="button" on-click=":host._editPermissions($event)" css-class="{{ {'button-success': ::target.permissions.length > 0} }}" icon-glyph="verified_user"></${pacemCore.P}-button>
+        <${pacemCore.P}-button remove class="button button-danger delete"></${pacemCore.P}-button>
+    </div>
+<div>
+<${pacemCore.P}-shell-proxy>
+    <${pacemCore.P}-modal-form core></${pacemCore.P}-modal-form>
+    <${pacemCore.P}-modal-form permissions></${pacemCore.P}-modal-form>
+</${pacemCore.P}-shell-proxy>`
+        })
+    ], PacemWidgetToolbarElement);
+    class PacemWidgetElement extends pacemCore.Components.PacemElement {
+        constructor(metadata, role = 'widget') {
+            super(role);
+            this.permissionMetadata = DEFAULT_PERMISSION_METADATA;
+            this.metadata = metadata;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            // ensure an explicit id for each widget
+            if (pacemCore.Utils.isNullOrEmpty(this.id)) {
+                this.id = 'wdg' + pacemCore.Utils.uniqueCode();
+            }
+            pacemCore.Utils.addClass(this, WIDGET_CSS_CLASS);
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            switch (name) {
+                case 'editable':
+                    if (!val) {
+                        this._disposeBalloon();
+                    }
+                    else if (this.isReady) {
+                        this._ensureBalloon();
+                    }
+                    break;
+                case 'editing':
+                    if (!pacemCore.Utils.isNull(this._balloon)) {
+                        this._balloon.disabled = !val;
+                    }
+                    (val ? pacemCore.Utils.addClass : pacemCore.Utils.removeClass).apply(this, [this, 'widget-' + name]);
+                    break;
+                case 'metadata':
+                    this._assignIcon(val);
+                    break;
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._assignIcon();
+            this._ensureBalloon();
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+        }
+        _assignIcon(val = this.metadata) {
+            this.dataset['icon'] = (val && val.display && val.display.icon) || 'widgets';
+        }
+        _ensureBalloon() {
+            if (pacemCore.Utils.isNull(this._balloon)) {
+                const balloon = this._balloon = document.createElement(pacemCore.P + '-balloon');
+                balloon.target = this;
+                balloon.disabled = !this.editing;
+                balloon.options = {
+                    behavior: UI.BalloonBehavior.Menu,
+                    trigger: UI.BalloonTrigger.Hover
+                };
+                // innerHTML before appending the balloon to the DOM.
+                balloon.innerHTML = `<${pacemCore.P}-widget-toolbar target="{{ #${this.id} }}"><${pacemCore.P}-widget-toolbar>`;
+                // append to trigger connected/viewActivated callbacks
+                pacemCore.CustomElementUtils.findAncestorShell(this).appendChild(balloon);
+            }
+        }
+        _disposeBalloon() {
+            if (!pacemCore.Utils.isNull(this._balloon)) {
+                this._balloon.remove();
+                this._balloon = null;
+            }
+        }
+    }
+    __decorate$c([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemWidgetElement.prototype, "editing", void 0);
+    __decorate$c([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemWidgetElement.prototype, "editable", void 0);
+    __decorate$c([
+        pacemCore.Watch({ emit: true, reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemWidgetElement.prototype, "tag", void 0);
+    __decorate$c([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.Json })
+    ], PacemWidgetElement.prototype, "permissions", void 0);
+    __decorate$c([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json })
+    ], PacemWidgetElement.prototype, "metadata", void 0);
+    __decorate$c([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json })
+    ], PacemWidgetElement.prototype, "permissionMetadata", void 0);
+
+    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;
+    };
+    //namespace Pacem.Components.Cms {
+    const DATA_METADATA$1 = {
+        display: { icon: 'storage', name: 'Data', description: 'Data object widget.' },
+        props: [
+            {
+                prop: 'model', type: EXPRESSION_METADATA_TYPE, display: {
+                    name: 'Model'
+                }, extra: {
+                    selector: '.' + pacemCore.PCSS + '-widget'
+                }
+            }
+        ]
+    };
+    let PacemWidgetDataElement = class PacemWidgetDataElement extends PacemWidgetElement {
+        constructor() {
+            super(buildWidgetMetadata(DATA_METADATA$1));
+        }
+    };
+    __decorate$b([
+        pacemCore.Watch({ reflectBack: true, converter: pacemCore.PropertyConverters.Json })
+    ], PacemWidgetDataElement.prototype, "model", void 0);
+    PacemWidgetDataElement = __decorate$b([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-widget-data'
+        })
+    ], PacemWidgetDataElement);
+
+    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;
+    };
+    //namespace Pacem.Components.Cms {
+    const FETCH_PARAMETER_METADATA = {
+        props: [
+            { prop: 'name', type: 'string', isReadOnly: true, display: { name: 'Name', cssClass: ['cols-md-4', 'cols-lg-3', 'cols-hd-2'] } },
+            { prop: 'value', type: EXPRESSION_METADATA_TYPE, display: { name: 'Value', cssClass: ['cols-md-8', 'cols-lg-9', 'cols-hd-10'] } }
+        ]
+    };
+    const FETCH_METADATA = {
+        display: {
+            icon: 'wifi', name: 'Api Fetcher', description: 'Fetching widget that retrieves data from a REST endpoint.'
+        }, props: [
+            {
+                prop: 'manifest', type: EXPRESSION_METADATA_TYPE, isComplexType: true, display: {
+                    name: 'Api Manifest'
+                }, extra: {
+                    selector: pacemCore.P + '-widget-apimanifest'
+                }, validators: [{ type: 'required', errorMessage: 'Api Manifest is a required field.' }]
+            },
+            {
+                prop: 'endpoint', type: 'object', isComplexType: true, display: {
+                    name: 'Endpoint', ui: 'oneToMany'
+                }, validators: [{ type: 'required', errorMessage: 'Api Manifest is a required field.' }],
+                extra: {
+                    source: (manifest) => manifest.endpoints.map(e => pacemCore.Utils.extend(e, { 'fullPath': `[${e.method.toUpperCase()}] ${e.path}` })).sort(),
+                    textProperty: 'fullPath', valueProperty: 'fullPath',
+                    dependsOn: [{ prop: 'manifest', hide: true }]
+                }
+            },
+            {
+                prop: 'parameters', type: 'array', display: {
+                    name: 'Parameters'
+                },
+                props: gridifyMetadata(FETCH_PARAMETER_METADATA),
+                extra: {
+                    lockItems: true,
+                    dependsOn: [{ prop: 'endpoint', hide: true }]
+                }
+            },
+            ACCESS_TOKEN_METADATA
+        ]
+    };
+    const PARAMETER_TAGNAME = pacemCore.P + '-widget-fetch-parameter';
+    let PacemWidgetFetchParameterElement = class PacemWidgetFetchParameterElement extends pacemCore.PacemEventTarget {
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val.first);
+            if (name === 'value' && !pacemCore.Utils.isNull(this._fetcher)) {
+                this._fetcher.fetch();
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._fetcher = pacemCore.CustomElementUtils.findAncestorOfType(this, PacemWidgetFetchElement);
+            if (!pacemCore.Utils.isNull(this._fetcher) && !pacemCore.Utils.isNull(this.value)) {
+                this._fetcher.fetch();
+            }
+        }
+    };
+    __decorate$a([
+        pacemCore.Watch({ reflectBack: true, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemWidgetFetchParameterElement.prototype, "required", void 0);
+    __decorate$a([
+        pacemCore.Watch({ reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemWidgetFetchParameterElement.prototype, "name", void 0);
+    __decorate$a([
+        pacemCore.Watch({ reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemWidgetFetchParameterElement.prototype, "value", void 0);
+    PacemWidgetFetchParameterElement = __decorate$a([
+        pacemCore.CustomElement({ tagName: PARAMETER_TAGNAME })
+    ], PacemWidgetFetchParameterElement);
+    let PacemWidgetFetchElement = class PacemWidgetFetchElement extends PacemBearerWidgetElement {
+        constructor() {
+            super(buildWidgetMetadata(FETCH_METADATA));
+            this._onerror = (e) => {
+                this.failure = !(this.success = false);
+            };
+            this._onsuccess = (e) => {
+                this.failure = !(this.success = true);
+            };
+            this._onresult = (e) => {
+                this.result = e.detail;
+            };
+        }
+        get _parameters() {
+            return Array.from(this._itemsElement.children).filter(e => e.localName === PARAMETER_TAGNAME);
+        }
+        fetch() {
+            const fetcher = this._fetcher, parameters = this._parameters || [], endpoint = this.endpoint;
+            if (!pacemCore.Utils.isNull(endpoint)) {
+                for (let param of endpoint.parameters) {
+                    if (param.required && pacemCore.Utils.isNull(parameters.find(p => p.name === param.name))) {
+                        // parameters not yet aligned with the ref endpoint:
+                        // not all the required parameters are attached => exit
+                        return;
+                    }
+                }
+            }
+            // build-up fetch params
+            const params = {};
+            for (let parameter of parameters) {
+                if (!pacemCore.Utils.isNullOrEmpty(parameter.value)) {
+                    params[parameter.name] = parameter.value;
+                }
+                else if (parameter.required) {
+                    // found an empty (required) parameter => exit
+                    return;
+                }
+            }
+            fetcher.url = this.url;
+            fetcher.method = this.method;
+            fetcher.credentials = this.fetchCredentials;
+            fetcher.headers = this.fetchHeaders;
+            fetcher.parameters = params;
+            return fetcher.fetch();
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this.fetch();
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (name === 'endpoint' && !pacemCore.Utils.isNullOrEmpty(val)) {
+                this._mergeEndpoint(val);
+            }
+            else
+                switch (name) {
+                    case 'parameters':
+                    case 'fetchHeaders':
+                    case 'fetchCredentials':
+                    case 'url':
+                    case 'method':
+                        this.fetch();
+                        break;
+                }
+        }
+        _mergeEndpoint(endpoint = this.endpoint) {
+            this.url = this.manifest.baseUrl + endpoint.path;
+            this.method = endpoint.method;
+            this.fields = endpoint.response.fields;
+            const itemsElement = this._itemsElement, parameters = this._parameters;
+            // remove exceeding
+            for (let j = parameters.length - 1; j >= 0; j--) {
+                let item = parameters[j];
+                let matching = endpoint.parameters.find(p => p.name === item.name);
+                if (pacemCore.Utils.isNull(matching)) {
+                    item.remove();
+                }
+            }
+            // add missing
+            for (let param of endpoint.parameters) {
+                let existing = parameters.find(p => p.name === param.name);
+                if (pacemCore.Utils.isNull(existing)) {
+                    let item = existing = document.createElement(PARAMETER_TAGNAME);
+                    item.name = param.name;
+                    itemsElement.appendChild(item);
+                }
+                existing.required = param.required;
+            }
+            // for editing sake
+            this.parameters = parameters;
+        }
+    };
+    __decorate$a([
+        pacemCore.Watch({ reflectBack: true, emit: true /* < due to metadata 'dependsOn' */, converter: pacemCore.PropertyConverters.Json })
+    ], PacemWidgetFetchElement.prototype, "manifest", void 0);
+    __decorate$a([
+        pacemCore.Watch({ reflectBack: true, emit: true /* < due to metadata 'dependsOn' */, converter: pacemCore.PropertyConverters.Json })
+    ], PacemWidgetFetchElement.prototype, "endpoint", void 0);
+    __decorate$a([
+        pacemCore.Watch({ reflectBack: true, emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemWidgetFetchElement.prototype, "url", void 0);
+    __decorate$a([
+        pacemCore.Watch({ reflectBack: true, emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemWidgetFetchElement.prototype, "method", void 0);
+    __decorate$a([
+        pacemCore.Watch({ reflectBack: true, emit: false, converter: pacemCore.PropertyConverters.Json })
+    ], PacemWidgetFetchElement.prototype, "fields", void 0);
+    __decorate$a([
+        pacemCore.Watch( /* just for editing sake */)
+    ], PacemWidgetFetchElement.prototype, "parameters", void 0);
+    __decorate$a([
+        pacemCore.Watch( /* can only be databound or assigned at runtime */)
+    ], PacemWidgetFetchElement.prototype, "result", void 0);
+    __decorate$a([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemWidgetFetchElement.prototype, "fetching", void 0);
+    __decorate$a([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemWidgetFetchElement.prototype, "success", void 0);
+    __decorate$a([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemWidgetFetchElement.prototype, "failure", void 0);
+    __decorate$a([
+        pacemCore.ViewChild(pacemCore.P + '-fetch')
+    ], PacemWidgetFetchElement.prototype, "_fetcher", void 0);
+    __decorate$a([
+        pacemCore.ViewChild('div[hidden]')
+    ], PacemWidgetFetchElement.prototype, "_itemsElement", void 0);
+    PacemWidgetFetchElement = __decorate$a([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-widget-fetch', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<${pacemCore.P}-fetch autofetch="false" fetching="{{ :host.fetching, twoway }}" debounce="100"
+on-${pacemCore.Net.FetchResultEventName}=":host._onresult($event)" on-${pacemCore.Net.FetchErrorEventName}=":host._onerror($event)" on-${pacemCore.Net.FetchSuccessEventName}=":host._onsuccess($event)"></${pacemCore.P}-fetch><div hidden><${pacemCore.P}-content></${pacemCore.P}-content></div>`
+        })
+    ], PacemWidgetFetchElement);
+
+    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;
+    };
+    //namespace Pacem.Components.Cms {
+    const FETCH_CREDENTIALS_METADATA = {
+        prop: 'fetchCredentials', type: 'string', dataType: 'enumeration', display: { name: 'Fetch Credentials' }, extra: {
+            enum: ['same-origin', 'omit', 'include']
+        }
+    };
+    const ACCESS_TOKEN_METADATA = {
+        prop: 'accessToken', type: EXPRESSION_METADATA_TYPE, display: { name: 'Access Token' },
+        extra: pacemCore.Utils.extend({}, EXPRESSION_WIDGET_METADATA_EXTRA, { filter: (e) => e instanceof PacemWidgetDataElement || e instanceof PacemWidgetFetchElement })
+    };
+    class PacemBearerWidgetElement extends PacemWidgetElement {
+        constructor() {
+            super(...arguments);
+            this.fetchCredentials = 'same-origin';
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (name === 'accessToken') {
+                if (!pacemCore.Utils.isNullOrEmpty(val)) {
+                    this.fetchHeaders = { 'Authorization': 'Bearer ' + val };
+                }
+                else {
+                    this.fetchHeaders = {};
+                }
+            }
+        }
+    }
+    __decorate$9([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemBearerWidgetElement.prototype, "fetchCredentials", void 0);
+    __decorate$9([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json })
+    ], PacemBearerWidgetElement.prototype, "fetchHeaders", void 0);
+    __decorate$9([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemBearerWidgetElement.prototype, "accessToken", void 0);
+    __decorate$9([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemBearerWidgetElement.prototype, "fetching", void 0);
+
+    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;
+    };
+    //namespace Pacem.Components.Cms {
+    let PacemWidgetTranslatorElement = class PacemWidgetTranslatorElement extends PacemWidgetElement {
+    };
+    PacemWidgetTranslatorElement = __decorate$8([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-widget-translator'
+        })
+    ], PacemWidgetTranslatorElement);
+
+    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;
+    };
+    //namespace Pacem.Components.Cms {
+    const DATA_METADATA = {
+        display: { icon: 'timer', name: 'Clock', description: 'Timer widget.' },
+        props: [
+            {
+                prop: 'interval', type: EXPRESSION_METADATA_TYPE, display: {
+                    name: 'Interval (msec)'
+                }, extra: {
+                    selector: '.' + pacemCore.PCSS + '-widget', step: 1000
+                },
+                validators: [{
+                        type: 'range', errorMessage: 'Negative numbers not allowed', params: { min: 0 }
+                    }]
+            }
+        ]
+    };
+    let PacemWidgetClockElement = class PacemWidgetClockElement extends PacemWidgetElement {
+        constructor() {
+            super(buildWidgetMetadata(DATA_METADATA));
+            this.interval = 0;
+        }
+    };
+    __decorate$7([
+        pacemCore.Watch({ reflectBack: true, converter: pacemCore.PropertyConverters.Number })
+    ], PacemWidgetClockElement.prototype, "interval", void 0);
+    __decorate$7([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Number })
+    ], PacemWidgetClockElement.prototype, "time", void 0);
+    PacemWidgetClockElement = __decorate$7([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-widget-clock', template: `<${pacemCore.P}-timer interval="{{ :host.interval }}" on-tick="{{ :host.time = Date.now() }}"></${pacemCore.P}-timer>`
+        })
+    ], PacemWidgetClockElement);
+
+    /// <reference path="./swagger-types.d.ts" />
+    //namespace Pacem.Cms.OpenApi {
+    const BAG = 'pacem:metadatabag';
+    class SwaggerCmsParser {
+        constructor(_openApi = new pacemScaffolding.Scaffolding.OpenApi.OpenApiParser()) {
+            this._openApi = _openApi;
+            this._cachedMetadataUrls = [];
+        }
+        async load(url, headers) {
+            let api = await this._openApi.load(url, headers);
+            if (api != null) {
+                api[BAG] = {};
+                // greedy load of datafields
+                for (let endpoint of api.endpoints) {
+                    await this._enrichSchemas(api, endpoint, headers);
+                }
+            }
+            return api;
+        }
+        async _enrichSchemas(api, endpoint, headers) {
+            const response = endpoint.response;
+            if (response && response.meta) {
+                response.fields = await this._fetchMetadata(api, { name: response.fullType, schema: response.meta }, headers);
+            }
+            // parameters?
+            const parameters = endpoint.parameters;
+            for (let parameter of (parameters || [])) {
+                if (parameter.meta && parameter.fullType) {
+                    let fields = await this._fetchMetadata(api, { name: parameter.fullType, schema: parameter.meta }, headers);
+                    parameter.fields = fields;
+                }
+            }
+        }
+        clearCache() {
+            const cache = this.cache, keys = this._cachedMetadataUrls;
+            if (cache) {
+                for (let key of keys) {
+                    cache.removeProperty(key);
+                }
+                // clear keys
+                keys.splice(0);
+            }
+        }
+        /**
+         *
+         * @param def1
+         * @param headers HTTP headers for API fetching
+         */
+        async _fetchMetadata(api, def0, headers) {
+            let _fetch = async (def1) => {
+                let cols = [];
+                if (def1 && def1.name) {
+                    // short-circuit if already in the bag
+                    if (api[BAG][def1.name]) {
+                        return api[BAG][def1.name];
+                    }
+                    /* reserve a place for this type so that it gets not fetched again if aggressive recursion occurs */ api[BAG][def1.name] = cols;
+                    let meta = { props: [] }, metadataUrl;
+                    if (/^https?:\/\//.test(def1.name)) {
+                        // name is url? then it's the endpoint for type metadata, fetch it!
+                        metadataUrl = def1.name;
+                    }
+                    else {
+                        console.warn(`Swagger entity definition keys must appear in form of absolute url. Their response to a GET request needs to be the entity metadata itself.\nNo other options are currently supported.`);
+                        return;
+                    }
+                    if (metadataUrl) {
+                        let retrieveFn = async () => {
+                            let response = await fetch(metadataUrl, { credentials: 'omit', mode: 'cors', headers: headers });
+                            if (response.ok) {
+                                return await response.json();
+                            }
+                        };
+                        if (this.cache) {
+                            // check for session cache
+                            meta = this.cache.getPropertyValue(metadataUrl);
+                            if (!meta) {
+                                // no cache available? then fetch...
+                                meta = await retrieveFn();
+                                this._cachedMetadataUrls.push(metadataUrl);
+                                this.cache.setPropertyValue(metadataUrl, meta, /* persist in session not on location */ false);
+                            }
+                        }
+                        else {
+                            // do fetch
+                            meta = await retrieveFn();
+                        }
+                    }
+                    let schema = def1.schema;
+                    for (let col in schema.properties) {
+                        let column = schema.properties[col], field = meta && meta.props.find(p => p.prop === col);
+                        let datafield = Object.assign({
+                            prop: col, type: column.type || 'text', props: undefined
+                        }, field || /* if there's no match, then read-only */ { isReadOnly: true });
+                        if (field) {
+                            let $ref = (column.items && column.items.$ref) || column.$ref;
+                            if ($ref) {
+                                let ref = pacemScaffolding.Scaffolding.OpenApi.getOpenApiDefinition(api, $ref), key = ref.name;
+                                if (api[BAG][key]) {
+                                    datafield.props = api[BAG][key];
+                                }
+                                else {
+                                    // recursion here
+                                    datafield.props = await _fetch(ref);
+                                }
+                            }
+                        }
+                        cols.push(datafield);
+                    }
+                }
+                return cols;
+            };
+            return await _fetch(def0);
+        }
+    }
+
+    var swaggerCms = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        SwaggerCmsParser: SwaggerCmsParser
+    });
+
+    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;
+    };
+    //namespace Pacem.Components.Cms {
+    const APIMANIFEST_METADATA = {
+        display: { icon: 'cloud_circle', name: 'Api Manifest', description: 'OpenApi parser for WebApi scaffolding.' },
+        props: [
+            {
+                prop: 'url', type: 'text', display: {
+                    name: 'Url', description: 'Insert the url of the OpenApi json configuration.', cssClass: ['cols-lg-8'],
+                    watermark: 'https://domain.com/swagger/v1/swagger.json'
+                },
+                extra: { tooltip: true },
+                validators: [{
+                        type: 'required', errorMessage: 'Url field is required.'
+                    }]
+            },
+            {
+                prop: 'usecache', type: 'boolean', display: {
+                    name: 'Cache results', description: 'Whether to cache the manifest per-url.', cssClass: ['cols-lg-4'],
+                    ui: 'switcher'
+                },
+                extra: { tooltip: true }
+            },
+            ACCESS_TOKEN_METADATA
+        ]
+    };
+    let PacemWidgetApiManifestElement = class PacemWidgetApiManifestElement extends PacemBearerWidgetElement {
+        constructor(_openapi = new SwaggerCmsParser(), _cache = new pacemCore.Storage()) {
+            super(buildWidgetMetadata(APIMANIFEST_METADATA));
+            this._openapi = _openapi;
+            this._cache = _cache;
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            switch (name) {
+                case 'url':
+                case 'editing':
+                case 'editable':
+                    this._scaffold();
+                    break;
+                case 'usecache':
+                    this._openapi.cache = val ? this._cache : null;
+                    break;
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            if (this.usecache) {
+                this._openapi.cache = this._cache;
+            }
+            this._scaffold();
+        }
+        _scaffold() {
+            if (this.editing && this.editable && !pacemCore.Utils.isNullOrEmpty(this.url)) {
+                this.fetching = true;
+                this._openapi.load(this.url).then(s => {
+                    this.manifest = s;
+                    this.fetching = false;
+                }, _ => {
+                    this.fetching = false;
+                });
+            }
+        }
+    };
+    __decorate$6([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemWidgetApiManifestElement.prototype, "url", void 0);
+    __decorate$6([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemWidgetApiManifestElement.prototype, "usecache", void 0);
+    __decorate$6([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Json })
+    ], PacemWidgetApiManifestElement.prototype, "manifest", void 0);
+    PacemWidgetApiManifestElement = __decorate$6([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-widget-apimanifest' })
+    ], PacemWidgetApiManifestElement);
+
+    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;
+    };
+    //namespace Pacem.Components.Cms {
+    class PacemUiWidgetElement extends PacemWidgetElement {
+        constructor(metadata, colspan = 1, role) {
+            super(metadata, role);
+            this.colspan = colspan;
+            this.rowspan = 1;
+        }
+        // just a flag class
+        connectedCallback() {
+            super.connectedCallback();
+            pacemCore.Utils.addClass(this, 'ui-widget ' + pacemCore.PCSS + '-cell cols-xs-start-1 cols-xs-12 rows-xs-start-auto');
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            switch (name) {
+                case 'row':
+                    pacemCore.Utils.removeClass(this, `rows-start-${old + 1}`);
+                    pacemCore.Utils.addClass(this, `rows-start-${val + 1}`);
+                    break;
+                case 'rowspan':
+                    pacemCore.Utils.removeClass(this, `rows-${old}`);
+                    pacemCore.Utils.addClass(this, `rows-${val}`);
+                    break;
+                case 'column':
+                    pacemCore.Utils.removeClass(this, `cols-start-${old + 1}`);
+                    pacemCore.Utils.addClass(this, `cols-start-${val + 1}`);
+                    break;
+                case 'colspan':
+                    pacemCore.Utils.removeClass(this, `cols-${old}`);
+                    pacemCore.Utils.addClass(this, `cols-${val}`);
+                    break;
+                case 'borders':
+                    (this.borders ? pacemCore.Utils.addClass : pacemCore.Utils.removeClass).apply(this, [this, pacemCore.PCSS + '-border']);
+                    break;
+                case 'corners':
+                    (this.borders ? pacemCore.Utils.addClass : pacemCore.Utils.removeClass).apply(this, [this, pacemCore.PCSS + '-corners']);
+                    break;
+            }
+        }
+        get container() {
+            return this._container;
+        }
+        /** @overridable */
+        findContainer() {
+            return pacemCore.CustomElementUtils.findAncestor(this, n => n instanceof PacemCompositeWidgetElement);
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            let iter = this._container = this.findContainer();
+            if (!pacemCore.Utils.isNull(iter)) {
+                iter.register(this);
+            }
+        }
+        disconnectedCallback() {
+            if (!pacemCore.Utils.isNull(this._container)) {
+                this._container.unregister(this);
+            }
+            super.disconnectedCallback();
+        }
+    }
+    __decorate$5([
+        pacemCore.Watch({ emit: true, reflectBack: true, converter: pacemCore.PropertyConverters.Number })
+    ], PacemUiWidgetElement.prototype, "column", void 0);
+    __decorate$5([
+        pacemCore.Watch({ emit: true, reflectBack: true, converter: pacemCore.PropertyConverters.Number })
+    ], PacemUiWidgetElement.prototype, "row", void 0);
+    __decorate$5([
+        pacemCore.Watch({ emit: true, reflectBack: true, converter: pacemCore.PropertyConverters.Number })
+    ], PacemUiWidgetElement.prototype, "colspan", void 0);
+    __decorate$5([
+        pacemCore.Watch({ emit: true, reflectBack: true, converter: pacemCore.PropertyConverters.Number })
+    ], PacemUiWidgetElement.prototype, "rowspan", void 0);
+    __decorate$5([
+        pacemCore.Watch({ emit: true, reflectBack: true, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemUiWidgetElement.prototype, "borders", void 0);
+    __decorate$5([
+        pacemCore.Watch({ emit: true, reflectBack: true, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemUiWidgetElement.prototype, "corners", void 0);
+    const WidgetRegisterEventName = "widgetregister";
+    const WidgetUnregisterEventName = "widgetunregister";
+    const LayoutChangeEventName = "layoutchange";
+    class WidgetRegisterEvent extends CustomEvent {
+        constructor(item, eventInit) {
+            super(WidgetRegisterEventName, pacemCore.Utils.extend(eventInit || {}, { detail: item }));
+        }
+    }
+    class WidgetUnregisterEvent extends CustomEvent {
+        constructor(item, eventInit) {
+            super(WidgetUnregisterEventName, pacemCore.Utils.extend(eventInit || {}, { detail: item }));
+        }
+    }
+    class PacemCompositeWidgetElement extends PacemUiWidgetElement {
+        get itemsElement() {
+            return this;
+        }
+        validate(item) {
+            return item instanceof PacemUiWidgetElement;
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            pacemCore.Utils.addClass(this.itemsElement, pacemCore.PCSS + '-items-element');
+        }
+        /**
+         * Appends a child Element to this CompositeWidget's itemsElement.
+         * @param item New child element
+         */
+        appendItem(item) {
+            this.itemsElement.appendChild(item);
+        }
+        /**
+         * Registers a new item among the items.
+         * @param item {PacemUiWidgetElement} Item to be enrolled
+         */
+        register(item) {
+            if (!this.validate(item)) {
+                this.log(pacemCore.Logging.LogLevel.Debug, `${(item && item.localName)} element couldn't be registered in a ${this.localName} element.`);
+                return false;
+            }
+            let retval = false;
+            const items = this.items = this.items || [];
+            if (pacemCore.Utils.isNullOrEmpty(items)) {
+                this.items = [item];
+                retval = true;
+            }
+            else if (items.indexOf(item) === -1) {
+                items.push(item);
+                retval = true;
+            }
+            //
+            if (retval) {
+                this.dispatchEvent(new WidgetRegisterEvent(item));
+            }
+            return retval;
+        }
+        /**
+         * Removes an existing element from the items.
+         * @param item {PacemUiWidgetElement} Item to be removed
+         */
+        unregister(item) {
+            const items = this.items, ndx = !pacemCore.Utils.isNullOrEmpty(items) && items.indexOf(item);
+            if (ndx >= 0) {
+                let item = items.splice(ndx, 1);
+                this.dispatchEvent(new WidgetUnregisterEvent(item[0]));
+                return true;
+            }
+            return false;
+        }
+    }
+    __decorate$5([
+        pacemCore.Watch( /* can only be databound or assigned at runtime */)
+    ], PacemCompositeWidgetElement.prototype, "items", void 0);
+    //  #endregion COMPOSITE
+
+    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.Cms {
+    const TEXT_METADATA = buildWidgetMetadata({
+        display: { icon: 'font_download', name: 'Text', description: 'Plain text widget.' },
+        props: [{
+                prop: 'text', type: EXPRESSION_METADATA_TYPE, display: { name: 'Text' }, extra: EXPRESSION_WIDGET_METADATA_EXTRA
+            }]
+    });
+    let PacemWidgetTextElement = class PacemWidgetTextElement extends PacemUiWidgetElement {
+        constructor() {
+            super(TEXT_METADATA);
+        }
+    };
+    __decorate$4([
+        pacemCore.Watch({ reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemWidgetTextElement.prototype, "text", void 0);
+    PacemWidgetTextElement = __decorate$4([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-widget-text', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<${pacemCore.P}-text text="{{ :host.text }}"></${pacemCore.P}-text>`
+        })
+    ], PacemWidgetTextElement);
+
+    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.Cms {
+    /**
+     * UI widget container that eases dragdrop-based enrollment into composite widgets.
+     */
+    let PacemWidgetPickerElement = class PacemWidgetPickerElement extends PacemCompositeWidgetElement {
+        register(item) {
+            const retval = super.register(item);
+            if (retval) {
+                item.hide = true;
+            }
+            return retval;
+        }
+    };
+    __decorate$3([
+        pacemCore.ViewChild(pacemCore.P + '-drag-drop')
+    ], PacemWidgetPickerElement.prototype, "_dragDrop", void 0);
+    PacemWidgetPickerElement = __decorate$3([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-widget-picker', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<${pacemCore.P}-repeater datasource="{{ :host.items }}">
+    <template>
+        <${pacemCore.P}-panel behaviors="{{ [::_dragDrop] }}" class="${pacemCore.PCSS}-widget-itempicker display-flex flex-fill flex-middle flex-nowrap">
+            <i class="${pacemCore.PCSS}-icon flex-auto" dragger>drag_indicator</i>
+            <${pacemCore.P}-icon icon="{{ ^item.metadata.display.icon }}" class="flex-auto ${pacemCore.PCSS}-margin margin-x-1"></${pacemCore.P}-icon>
+            <${pacemCore.P}-text text="{{ ^item.metadata.display.name }}"></${pacemCore.P}-text>
+        </${pacemCore.P}-panel>
+    </template>
+</${pacemCore.P}-repeater>
+<${pacemCore.P}-drag-drop handle-selector="i.${pacemCore.PCSS}-icon[dragger]"></${pacemCore.P}-drag-drop>
+<${pacemCore.P}-content></${pacemCore.P}-content>`
+        })
+    ], PacemWidgetPickerElement);
+
+    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.Cms {
+    function createSvgGridBox() {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.style.pointerEvents = 'none';
+        svg.style.zIndex = '1000';
+        svg.setAttribute('height', '100%');
+        svg.setAttribute('width', '100%');
+        svg.setAttribute('preserveAspectRatio', 'none');
+        svg.setAttribute('class', 'grid-cell-wrapper');
+        //svg.style.padding = '2px';
+        //svg.style.boxSizing = 'border-box';
+        svg.innerHTML = `<rect class="grid-cell" width="100%" height="100%"></rect>`;
+        return svg;
+    }
+    const GRID_COLUMNS = 12;
+    const FALLBACK_COLUMNS = GRID_COLUMNS;
+    const FALLBACK_ROWS = 1;
+    const GRID_METADATA = {
+        display: {
+            icon: 'grid_on',
+            name: 'Grid',
+            description: 'Composition Widget that lays out child-widgets in a grid container.'
+        },
+        props: [
+            {
+                prop: 'rows', type: 'int', display: {
+                    name: 'Rows', cssClass: ['cols-lg-4']
+                }, validators: [
+                    { type: 'required', errorMessage: '' },
+                    {
+                        type: 'range', errorMessage: '', params: {
+                            min: 1, max: 24
+                        }
+                    }
+                ]
+            }, {
+                prop: 'rowGap', type: 'int', display: {
+                    //ui: 'slider',
+                    name: 'Row gap', cssClass: ['cols-lg-4']
+                }, validators: [
+                    // { type: 'required', errorMessage: '' },
+                    {
+                        type: 'range', errorMessage: '', params: {
+                            min: 0, max: 3, step: .25
+                        }
+                    }
+                ]
+            }, {
+                prop: 'columnGap', type: 'int', display: {
+                    //ui: 'slider',
+                    name: 'Column gap', cssClass: ['cols-lg-4']
+                }, validators: [
+                    // { type: 'required', errorMessage: '' },
+                    {
+                        type: 'range', errorMessage: '', params: {
+                            min: 0, max: 3, step: .25
+                        }
+                    }
+                ]
+            }
+        ]
+    };
+    let PacemGridWidgetElement = class PacemGridWidgetElement extends PacemCompositeWidgetElement {
+        constructor() {
+            super(buildWidgetMetadata(GRID_METADATA), FALLBACK_COLUMNS, "grid");
+            this._widgetPropertyChange = (evt) => {
+                if (evt.detail.propertyName === 'row' || evt.detail.propertyName === 'rowspan') {
+                    const widget = evt.target;
+                    this.rows = Math.max(this.rows, widget.row + widget.rowspan);
+                }
+            };
+            this._dragDropHandler = (evt) => {
+                const args = evt.detail, el = args.element;
+                switch (evt.type) {
+                    case pacemCore.UI.DragDropEventType.Start:
+                        this._gridBoxes.forEach(svg => { svg.style.pointerEvents = 'auto'; });
+                        this._initState = {
+                            colspan: el.colspan,
+                            rowspan: el.rowspan,
+                            col: el.column,
+                            row: el.row
+                        };
+                        break;
+                    case pacemCore.UI.DragDropEventType.End:
+                        this._gridBoxes.forEach(svg => { svg.style.pointerEvents = 'none'; });
+                        break;
+                    case pacemCore.UI.DragDropEventType.Over:
+                        var dropTarget = args.target;
+                        var col = +dropTarget.style.gridColumnStart - 1;
+                        var row = +dropTarget.style.gridRowStart - 1;
+                        const farRight = col + this._initState.colspan, farBottom = row + this._initState.rowspan;
+                        // check overlap
+                        if (!this._intersects(el, col, row, el.colspan, el.rowspan)) {
+                            let fireLayoutChange = false;
+                            //
+                            if (farRight <= (this.columns || FALLBACK_COLUMNS)) {
+                                fireLayoutChange = el.column !== col;
+                                el.column = col; // + '/' + (col + this._initState.colspan);
+                            }
+                            if (farBottom <= (this.rows || FALLBACK_ROWS)) {
+                                fireLayoutChange = fireLayoutChange || (el.row !== row);
+                                el.row = row; // + '/' + (row + this._initState.rowspan);
+                            }
+                        }
+                        break;
+                }
+            };
+            this._resizeHandler = (evt) => {
+                switch (evt.type) {
+                    case pacemCore.UI.RescaleEventType.Start:
+                        pacemCore.Utils.addClass(evt.detail.element, pacemCore.PCSS + '-rescaling');
+                        this._gridBoxes.forEach(svg => { svg.style.pointerEvents = 'auto'; });
+                        break;
+                    case pacemCore.UI.RescaleEventType.End:
+                        this._gridBoxes.forEach(svg => { svg.style.pointerEvents = 'none'; });
+                        pacemCore.Utils.removeClass(evt.detail.element, pacemCore.PCSS + '-rescaling');
+                        break;
+                    case pacemCore.UI.RescaleEventType.Rescale:
+                        evt.preventDefault();
+                        // check pos
+                        const pos = { x: evt.clientX, y: evt.clientY }, handle = evt.detail.handle;
+                        const dropTarget = document.elementsFromPoint(pos.x, pos.y).find(e => this._dragDrop.dropTargets.indexOf(e) >= 0);
+                        if (dropTarget) {
+                            var col = +dropTarget.style.gridColumnStart;
+                            var row = +dropTarget.style.gridRowStart;
+                            const widget = evt.detail.element, startcol = widget.column + 1, startrow = widget.row + 1;
+                            const colspan = 1 + col - startcol, rowspan = 1 + row - startrow;
+                            if (!this._intersects(widget, widget.column, widget.row, colspan, rowspan)) {
+                                let fireLayoutChange = false;
+                                //
+                                if (col >= startcol && handle.endsWith('right')) {
+                                    fireLayoutChange = widget.colspan !== colspan;
+                                    widget.colspan = colspan;
+                                }
+                                if (row >= startrow && handle.startsWith('bottom')) {
+                                    fireLayoutChange = fireLayoutChange || widget.rowspan !== rowspan;
+                                    widget.rowspan = rowspan;
+                                }
+                            }
+                        }
+                        break;
+                }
+            };
+            this._gridBoxes = [];
+        }
+        register(item) {
+            let retval = super.register(item);
+            if (retval) {
+                const row = item.row || 0, column = item.column || 0, colspan = item.colspan || 2, rowspan = item.rowspan || 1;
+                let foundspot = !this._intersects(item, column, row, colspan, rowspan);
+                if (foundspot) {
+                    item.row = row;
+                    item.column = column;
+                    item.colspan = colspan;
+                    item.rowspan = rowspan;
+                }
+                else {
+                    if (!foundspot) {
+                        // select a spot or create a new row
+                        let check = (elasticOnColspan = false) => {
+                            let maxColIndex = this.columns - 1;
+                            if (!elasticOnColspan) {
+                                maxColIndex = maxColIndex - colspan + 1;
+                            }
+                            for (let j = 0; j < this.rows; j++) {
+                                for (let i = 0; i <= maxColIndex; i++) {
+                                    if (!this._intersects(item, i, j, colspan, rowspan)) {
+                                        item.column = i;
+                                        item.row = j;
+                                        item.colspan = Math.min(maxColIndex + 1 - i, colspan);
+                                        item.rowspan = rowspan;
+                                        foundspot = true;
+                                        break;
+                                    }
+                                }
+                                if (foundspot)
+                                    break;
+                            }
+                        };
+                        check();
+                        if (!foundspot && colspan > 1) {
+                            // find first avail slot conceding less colspan
+                            check(true);
+                        }
+                    }
+                    // okay, surrender and create a new row
+                    if (!foundspot) {
+                        this.rows++;
+                        item.row = this.rows - 1;
+                        item.column = 0;
+                    }
+                }
+                //
+                // item.behaviors.push(this._dragDrop, this._rescaler);
+                item.behaviors = [this._dragDrop, this._rescaler];
+                item.addEventListener(pacemCore.PropertyChangeEventName, this._widgetPropertyChange, false);
+            }
+            //
+            return retval;
+        }
+        unregister(item) {
+            let retval = super.unregister(item);
+            if (retval) {
+                item.removeEventListener(pacemCore.PropertyChangeEventName, this._widgetPropertyChange, false);
+                const ndx = item.behaviors.indexOf(this._dragDrop);
+                if (ndx >= 0)
+                    item.behaviors.splice(ndx, 1);
+                const ndx1 = item.behaviors.indexOf(this._rescaler);
+                if (ndx1 >= 0)
+                    item.behaviors.splice(ndx1, 1);
+            }
+            return retval;
+        }
+        _intersects(who, col, row, colspan, rowspan) {
+            for (let item of this.items) {
+                let widget = item;
+                if (widget === who) {
+                    continue;
+                }
+                if ((widget.column < (col + colspan) && (widget.column + widget.colspan) > col)
+                    && (widget.row < (row + rowspan) && (widget.row + widget.rowspan) > row)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            pacemCore.Utils.addClass(this, pacemCore.PCSS + '-grid');
+            // drag-drop
+            let dragDrop = this._dragDrop = document.createElement(pacemCore.P + '-drag-drop');
+            let floater = document.createElement('div');
+            document.body.appendChild(floater);
+            dragDrop.floater = floater;
+            dragDrop.mode = pacemCore.UI.DragDataMode.Alias;
+            dragDrop.dropBehavior = pacemCore.UI.DropBehavior.None;
+            dragDrop.addEventListener(pacemCore.UI.DragDropEventType.Start, this._dragDropHandler, false);
+            dragDrop.addEventListener(pacemCore.UI.DragDropEventType.Over, this._dragDropHandler, false);
+            dragDrop.addEventListener(pacemCore.UI.DragDropEventType.End, this._dragDropHandler, false);
+            document.body.appendChild(dragDrop);
+            // rescale
+            let rescale = this._rescaler = document.createElement(pacemCore.P + '-rescale');
+            rescale.handles = [pacemCore.UI.RescaleHandle.Right, pacemCore.UI.RescaleHandle.Bottom];
+            rescale.addEventListener(pacemCore.UI.RescaleEventType.Start, this._resizeHandler, false);
+            rescale.addEventListener(pacemCore.UI.RescaleEventType.Rescale, this._resizeHandler, false);
+            rescale.addEventListener(pacemCore.UI.RescaleEventType.End, this._resizeHandler, false);
+            document.body.appendChild(rescale);
+            // editor
+            // default configuration
+            if (pacemCore.Utils.isNullOrEmpty(this.columns)) {
+                this.columns = GRID_COLUMNS;
+            }
+            if (pacemCore.Utils.isNullOrEmpty(this.rows)) {
+                this.rows = 1;
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this.adapt();
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            this.adapt();
+        }
+        disconnectedCallback() {
+            var dragDrop = this._dragDrop, rescale = this._rescaler;
+            if (!pacemCore.Utils.isNull(dragDrop)) {
+                dragDrop.floater.remove();
+                dragDrop.removeEventListener(pacemCore.UI.DragDropEventType.Start, this._dragDropHandler, false);
+                dragDrop.removeEventListener(pacemCore.UI.DragDropEventType.Over, this._dragDropHandler, false);
+                dragDrop.removeEventListener(pacemCore.UI.DragDropEventType.End, this._dragDropHandler, false);
+                dragDrop.remove();
+                this._dragDrop = null;
+            }
+            if (!pacemCore.Utils.isNull(rescale)) {
+                rescale.removeEventListener(pacemCore.UI.RescaleEventType.Start, this._resizeHandler, false);
+                rescale.removeEventListener(pacemCore.UI.RescaleEventType.Rescale, this._resizeHandler, false);
+                rescale.removeEventListener(pacemCore.UI.RescaleEventType.End, this._resizeHandler, false);
+                rescale.remove();
+                this._rescaler = null;
+            }
+            super.disconnectedCallback();
+        }
+        _normalize(measure, defaultValue = 1) {
+            if (typeof measure === 'string') {
+                return measure;
+            }
+            else if (measure == null) {
+                measure = defaultValue;
+            }
+            return this.unitPixels(measure) + 'px';
+        }
+        unitPixels(qty) {
+            return qty * (this.unit || 8);
+        }
+        adapt() {
+            this.style.marginTop = this.unitPixels(this.marginTop || 0) + 'px';
+            this.style.marginBottom = this.unitPixels(this.marginBottom || 0) + 'px';
+            //
+            this.style.gridTemplateColumns = `repeat(${(this.columns || FALLBACK_COLUMNS)}, 1fr)`;
+            //this.style.gridAutoRows = `minmax(${(this.minRowheight || 24)}, ${(this.rowheight || 'auto')})`;
+            let minrowheight = this._normalize(this.minRowheight, 3), rowheight = this._normalize(this.rowheight || 'auto');
+            this.style.gridTemplateRows = `repeat(${(this.rows || FALLBACK_ROWS)}, minmax(${minrowheight}, ${rowheight}))`;
+            this.style.gridRowGap = this._normalize(this.rowGap, 1);
+            this.style.gridColumnGap = this._normalize(this.columnGap, 1);
+            //
+            this._setGridLines();
+        }
+        _setGridLines() {
+            var splice = 0;
+            const editing = this.editing;
+            if (editing) {
+                const cols = this.columns || FALLBACK_COLUMNS, rows = this.rows || FALLBACK_ROWS, total = cols * rows;
+                splice = total;
+                for (let k = 0; k < total; k++) {
+                    while (this._gridBoxes.length <= k) {
+                        let s = createSvgGridBox();
+                        this.appendChild(s);
+                        this._gridBoxes.push(s);
+                    }
+                    let svg = this._gridBoxes[k];
+                    const i = k % cols, j = Math.floor(k / cols);
+                    svg.style.gridColumn = (i + 1).toString();
+                    svg.style.gridRow = (j + 1).toString();
+                }
+            }
+            for (let svg of this._gridBoxes.splice(splice)) {
+                svg.remove();
+            }
+            // behaviors to be synchronized
+            if (!pacemCore.Utils.isNull(this._dragDrop) && !pacemCore.Utils.isNull(this._rescaler)) {
+                this._dragDrop.disabled = this._rescaler.disabled
+                    = !editing;
+                this._dragDrop.dropTargets = this._gridBoxes;
+            }
+        }
+    };
+    __decorate$2([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.Number })
+    ], PacemGridWidgetElement.prototype, "unit", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.Number })
+    ], PacemGridWidgetElement.prototype, "marginTop", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.Number })
+    ], PacemGridWidgetElement.prototype, "marginBottom", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.Number })
+    ], PacemGridWidgetElement.prototype, "columns", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.Number })
+    ], PacemGridWidgetElement.prototype, "rows", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemGridWidgetElement.prototype, "minRowheight", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemGridWidgetElement.prototype, "rowheight", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.Number })
+    ], PacemGridWidgetElement.prototype, "rowGap", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.Number })
+    ], PacemGridWidgetElement.prototype, "columnGap", void 0);
+    __decorate$2([
+        pacemCore.Debounce(100)
+    ], PacemGridWidgetElement.prototype, "adapt", null);
+    PacemGridWidgetElement = __decorate$2([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-widget-grid' })
+    ], PacemGridWidgetElement);
+
+    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;
+    };
+    //namespace Pacem.Components.Cms {
+    /** Default metadata ('expression' field) 'type' factory. */
+    const DATACOLUMNS_METADATA_TYPE = (host, hostRef = ':host', hostEntityRef = ':host.entity') => {
+        const attrs = {}, meta = host.metadata, fns = Functions, fnKeys = [];
+        attrs['properties'] = `{{ Pacem.CustomElementUtils.getWatchedProperty(${hostEntityRef}, '${meta.prop}').config.converter }}`;
+        const tagName = pacemCore.P + '-datacolumns';
+        let extra = (meta.extra || {});
+        // properties
+        if (!pacemCore.Utils.isNullOrEmpty(extra.properties)) {
+            switch (typeof extra.properties) {
+                case 'string':
+                    attrs['properties'] = `{{ ${hostEntityRef}.${extra.properties} }}`;
+                    break;
+                case 'function':
+                    const fnKey = 'fn' + pacemCore.Utils.uniqueCode();
+                    fns[fnKey] = extra.properties;
+                    attrs['properties'] = `{{ Pacem.Components.Cms.Functions.${fnKey}(${hostRef}), once }}`;
+                    // tidy-up memento
+                    fnKeys.push(fnKey);
+                    break;
+            }
+        }
+        if (fnKeys.length > 0) {
+            // tidy-up
+            attrs['on-unload'] = `{{ Pacem.Components.Cms.Functions.dismiss('${fnKeys.join('\',\'')}') }}`;
+        }
+        return { tagName: tagName, attrs: attrs };
+    };
+    const DATACOLUMN_METADATA$1 = {
+        display: { name: 'Columns' },
+        props: [
+            { prop: 'header', type: 'string', display: { cssClass: ['form-minimal'], name: 'Header' } },
+            {
+                prop: 'content', type: EXPRESSION_METADATA_TYPE, display: { name: 'Content' },
+                extra: EXPRESSION_WIDGET_METADATA_EXTRA
+            }
+        ]
+    };
+    let PacemDataColumnElement = class PacemDataColumnElement extends pacemCore.Components.PacemElement {
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            switch (name) {
+                case 'content':
+                    this.contentExpression = val;
+                    break;
+                case 'contentExpression':
+                    this.setAttribute('content', val || '');
+                    break;
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._form.entity = this;
+            this._form.metadata = gridifyMetadata(DATACOLUMN_METADATA$1);
+        }
+    };
+    __decorate$1([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemDataColumnElement.prototype, "header", void 0);
+    __decorate$1([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemDataColumnElement.prototype, "content", void 0);
+    __decorate$1([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemDataColumnElement.prototype, "contentExpression", void 0);
+    __decorate$1([
+        pacemCore.ViewChild(pacemCore.P + '-form')
+    ], PacemDataColumnElement.prototype, "_form", void 0);
+    PacemDataColumnElement = __decorate$1([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-widget-datacolumn', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<${pacemCore.P}-form class="panel-body" autogenerate="true"></${pacemCore.P}-form>`
+        })
+    ], PacemDataColumnElement);
+    let PacemDataColumnsElement = class PacemDataColumnsElement extends pacemScaffolding.Components.Scaffolding.PacemBaseElement {
+        constructor() {
+            super(...arguments);
+            this._dropHandler = (e) => {
+                this.changeHandler(e);
+            };
+            this._columnifyMetadata = (props = this.properties) => {
+                return (props || []).map(p => {
+                    const header = typeof p.display?.name === 'function' ? /* NOT supported */ p.prop : (p.display?.name || p.prop);
+                    const c = {
+                        header,
+                        content: `{{ ^item.${p.prop} }}`
+                    };
+                    return c;
+                }).sort((a, b) => a.header > b.header ? 1 : -1);
+            };
+        }
+        get inputFields() {
+            return [];
+        }
+        toggleReadonlyView(readonly) {
+            // leave it all to the template bindings
+        }
+        onChange(evt) {
+            return pacemCore.Utils.fromResult(this.value = this._repeater.datasource);
+        }
+        acceptValue(val) {
+            if (!pacemCore.Utils.isNull(this._repeater)) {
+                this._repeater.datasource = pacemCore.Utils.clone(val || []);
+            }
+        }
+        getViewValue(value) {
+            return /* dummy */ '[DataColumns]';
+        }
+        convertValueAttributeToProperty(attr) {
+            return pacemCore.PropertyConverters.Json.convert(attr, this);
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._propDragger.addEventListener(pacemCore.UI.DragDropEventType.End, this._dropHandler, false);
+            this._colDragger.addEventListener(pacemCore.UI.DragDropEventType.End, this._dropHandler, false);
+        }
+        disconnectedCallback() {
+            if (!pacemCore.Utils.isNull(this._propDragger)) {
+                this._propDragger.removeEventListener(pacemCore.UI.DragDropEventType.End, this._dropHandler, false);
+            }
+            if (!pacemCore.Utils.isNull(this._colDragger)) {
+                this._colDragger.removeEventListener(pacemCore.UI.DragDropEventType.End, this._dropHandler, false);
+            }
+            super.disconnectedCallback();
+        }
+    };
+    __decorate$1([
+        pacemCore.ViewChild(`${pacemCore.P}-repeater[columns]`)
+    ], PacemDataColumnsElement.prototype, "_repeater", void 0);
+    __decorate$1([
+        pacemCore.ViewChild(`${pacemCore.P}-drag-drop[properties]`)
+    ], PacemDataColumnsElement.prototype, "_propDragger", void 0);
+    __decorate$1([
+        pacemCore.ViewChild(`${pacemCore.P}-drag-drop[columns]`)
+    ], PacemDataColumnsElement.prototype, "_colDragger", void 0);
+    __decorate$1([
+        pacemCore.ViewChild('div[drop-target]')
+    ], PacemDataColumnsElement.prototype, "_dropTarget", void 0);
+    __decorate$1([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Json })
+    ], PacemDataColumnsElement.prototype, "properties", void 0);
+    PacemDataColumnsElement = __decorate$1([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-widget-datacolumns', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<div class="${pacemCore.PCSS}-datacolumns">
+    <div class="datacolumns-main display-flex flex-fill">
+
+        <${pacemCore.P}-drag-drop mode="${pacemCore.UI.DragDataMode.Alias}" disabled="{{ :host.readonly }}" handle-selector="*[handle]"
+              drop-behavior="${pacemCore.UI.DropBehavior.InsertChild}" drop-targets="{{ [::_dropTarget] }}" columns></${pacemCore.P}-drag-drop>
+        <${pacemCore.P}-repeater class="display-flex flex-fill" columns>
+            <!-- columns -->
+            <div class="display-flex flex-nowrap" drop-target>
+                <template>
+                    <${pacemCore.P}-panel behaviors="{{ [::_colDragger] }}">
+                        <div class="${pacemCore.PCSS}-panel panel-side-left side-auto">
+                            <div class="panel-side">
+                                <${pacemCore.P}-button class="display-block button-flat icon-glyph-small" icon-glyph="drag_indicator" handle></${pacemCore.P}-button>
+                                <${pacemCore.P}-button class="display-block button-flat icon-glyph-small" on-click=":host.value.splice(^index, 1)" icon-glyph="clear"></${pacemCore.P}-button>
+                            </div>
+                            <div class="panel-heading">
+                                <${pacemCore.P}-text text="{{ ^item.header }}"></${pacemCore.P}-text>
+                            </div>
+                            <${pacemCore.P}-widget-datacolumn class="panel-body" header="{{ ^item.header, twoway }}" content-expression="{{ ^item.content, twoway }}"></${pacemCore.P}-widget-datacolumn>
+                        </div>
+                    </${pacemCore.P}-panel>
+                </template>
+            </div>
+        </${pacemCore.P}-repeater>
+
+    </div>
+    <${pacemCore.P}-panel class="datacolumns-props" hide="{{ :host.readonly }}">
+        <${pacemCore.P}-drag-drop mode="${pacemCore.UI.DragDataMode.Copy}" disabled="{{ :host.readonly }}" handle-selector="*[handle]"
+              drop-behavior="${pacemCore.UI.DropBehavior.InsertChild}" drop-targets="{{ [::_dropTarget] }}" properties></${pacemCore.P}-drag-drop>
+        <${pacemCore.P}-repeater datasource="{{ :host._columnifyMetadata(:host.properties) }}">
+        <!-- properties -->
+            <template>
+                <${pacemCore.P}-panel behaviors="{{ [::_propDragger] }}" class="${pacemCore.PCSS}-panel panel-side-left side-auto panel-primary panel-filled ${pacemCore.PCSS}-margin margin-bottom-1">
+                    <div class="panel-side">
+                        <${pacemCore.P}-button class="display-block button-flat icon-glyph-small" icon-glyph="drag_indicator" handle></${pacemCore.P}-button>
+                    </div>
+                    <div class="text-truncate panel-body">
+                        <${pacemCore.P}-span text="{{ ^item.header }}"></${pacemCore.P}-span>
+                    </div>
+                </${pacemCore.P}-panel>
+            </template>
+        </${pacemCore.P}-repeater>
+    </${pacemCore.P}-panel>
+</div>`
+        })
+    ], PacemDataColumnsElement);
+
+    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.Cms {
+    const DATACOLUMN_METADATA = {
+        display: { name: 'DataColumn' },
+        props: [
+            { prop: "header", type: "string", display: { name: "Header" } },
+            { prop: "content", type: EXPRESSION_METADATA_TYPE, display: { name: "Content" }, extra: EXPRESSION_WIDGET_METADATA_EXTRA },
+        ]
+    };
+    const DATAGRID_METADATA = buildWidgetMetadata({
+        display: { icon: 'table_chart', name: 'DataGrid', description: 'DataGrid widget.' },
+        props: [{
+                prop: 'datasource', type: EXPRESSION_METADATA_TYPE, display: { name: 'Datasource' },
+                extra: pacemCore.Utils.extend({}, EXPRESSION_WIDGET_METADATA_EXTRA, { filter: (e) => e instanceof PacemWidgetDataElement || e instanceof PacemWidgetFetchElement })
+            },
+            {
+                prop: 'columns', type: DATACOLUMNS_METADATA_TYPE, display: { name: 'Columns' },
+                // this will include 'datasource' as argument in the oneToMany source fn
+                extra: { properties: 'datarowMetadata' },
+                props: gridifyMetadata(DATACOLUMN_METADATA)
+            }]
+    });
+    function gridify(columns = []) {
+        var output = '';
+        for (let column of columns || []) {
+            // if empty then 1fr
+            const col = column.width || 1;
+            if (typeof col === 'number') {
+                output += col + 'fr ';
+            }
+            else {
+                output += 'auto ';
+            }
+        }
+        return output;
+    }
+    function datagridFragments(columns = []) {
+        const fragHeading = document.createDocumentFragment(), fragBody = document.createDocumentFragment();
+        let j = 1;
+        for (let col of columns) {
+            // heading
+            const headcell = document.createElement('div');
+            headcell.classList.add(pacemCore.PCSS + '-headcell');
+            headcell.textContent = col.header;
+            fragHeading.appendChild(headcell);
+            // body
+            const datacell = new pacemCore.Components.PacemSpanElement();
+            datacell.classList.add(pacemCore.PCSS + '-datacell', 'datacell-corners');
+            datacell.style.gridColumn = j.toString();
+            datacell.setAttribute('css', "{{ {'grid-row': ^index+2} }}");
+            datacell.setAttribute('content', col.content);
+            fragBody.appendChild(datacell);
+            j++;
+        }
+        const datarow = new pacemCore.Components.PacemPanelElement();
+        datarow.classList.add(pacemCore.PCSS + '-datarow');
+        datarow.setAttribute('css', "{{ {'grid-row': ^index+2} }}");
+        datarow.setAttribute('css-class', "{{ {'datarow-alt': ^index % 2 === 1} }}");
+        datarow.style.gridColumn = "1/" + (columns.length + 1);
+        fragBody.appendChild(datarow);
+        return { head: fragHeading, body: fragBody };
+    }
+    function datagridInnerHTML(id, columns = []) {
+        const { head, body } = datagridFragments(columns);
+        const head0 = document.createElement('div');
+        head0.appendChild(head);
+        const body0 = document.createElement('div');
+        body0.appendChild(body);
+        return `<${pacemCore.P}-repeater datasource="{{ #${id}.datasource }}">
+    <div class="${pacemCore.PCSS}-datatable" style="grid-template-columns: ${gridify(columns)}">
+    ${head0.innerHTML}
+    <template>${body0.innerHTML}</template>
+</div></${pacemCore.P}-repeater>`;
+    }
+    let PacemWidgetDataGridElement = class PacemWidgetDataGridElement extends PacemUiWidgetElement {
+        constructor() {
+            super(DATAGRID_METADATA);
+            this.columns = [];
+            this.datasource = [];
+            this.datarowMetadata = [];
+            this._builtUponDatasource = false;
+        }
+        _gridify(columns = this.columns) {
+            var output = '';
+            for (let column of columns || []) {
+                // if empty then 1fr
+                const col = column.width || 1;
+                if (typeof col === 'number') {
+                    output += col + 'fr ';
+                }
+                else {
+                    output += 'auto ';
+                }
+            }
+            return output;
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'columns':
+                        /*
+                         *
+                         * TODO: manage columns separately!
+                         * Create an ad-hoc editor/formfield and a dedicated form
+                         *
+                         * */
+                        this.innerHTML = datagridInnerHTML(this.id, val);
+                        break;
+                    case 'datasource':
+                        this._extractMetadataJustInCase(val);
+                        break;
+                }
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this.innerHTML = datagridInnerHTML(this.id, this.columns);
+        }
+        _seekArray(ds) {
+            if (pacemCore.Utils.isArray(ds)) {
+                return ds;
+            }
+            if (typeof ds === 'object') {
+                for (let prop in ds) {
+                    const arr = this._seekArray(ds[prop]);
+                    if (!pacemCore.Utils.isNull(arr)) {
+                        return arr;
+                    }
+                }
+            }
+            return null;
+        }
+        _extractMetadataJustInCase(ds = this.datasource) {
+            if ((pacemCore.Utils.isNullOrEmpty(this.datarowMetadata) || this._builtUponDatasource) && !pacemCore.Utils.isNullOrEmpty(ds)) {
+                const arr = this._seekArray(ds);
+                if (!pacemCore.Utils.isNullOrEmpty(arr)) {
+                    const props = [];
+                    const item = arr[0];
+                    for (let prop in item) {
+                        props.push({ prop, type: typeof item[prop] });
+                    }
+                    this.datarowMetadata = props;
+                    this._builtUponDatasource = true;
+                }
+            }
+        }
+    };
+    __decorate([
+        pacemCore.Watch({ reflectBack: true, converter: pacemCore.PropertyConverters.Json })
+    ], PacemWidgetDataGridElement.prototype, "columns", void 0);
+    __decorate([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Json })
+    ], PacemWidgetDataGridElement.prototype, "datasource", void 0);
+    __decorate([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Json })
+    ], PacemWidgetDataGridElement.prototype, "datarowMetadata", void 0);
+    __decorate([
+        pacemCore.ViewChild(`.${pacemCore.PCSS}-datatable`)
+    ], PacemWidgetDataGridElement.prototype, "_datatable", void 0);
+    __decorate([
+        pacemCore.ViewChild('template')
+    ], PacemWidgetDataGridElement.prototype, "_template", void 0);
+    __decorate([
+        pacemCore.ViewChild(pacemCore.P + '-repeater')
+    ], PacemWidgetDataGridElement.prototype, "_repeater", void 0);
+    PacemWidgetDataGridElement = __decorate([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-widget-datagrid'
+        })
+    ], PacemWidgetDataGridElement);
+
+    var index_components = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        ACCESS_TOKEN_METADATA: ACCESS_TOKEN_METADATA,
+        DATACOLUMNS_METADATA_TYPE: DATACOLUMNS_METADATA_TYPE,
+        DEFAULT_METADATA: DEFAULT_METADATA,
+        EXPRESSION_METADATA_TYPE: EXPRESSION_METADATA_TYPE,
+        EXPRESSION_WIDGET_METADATA_EXTRA: EXPRESSION_WIDGET_METADATA_EXTRA,
+        get ExpressionSource () { return ExpressionSource; },
+        FETCH_CREDENTIALS_METADATA: FETCH_CREDENTIALS_METADATA,
+        Functions: Functions,
+        GRID_COLUMNS: GRID_COLUMNS,
+        LayoutChangeEventName: LayoutChangeEventName,
+        PacemBearerWidgetElement: PacemBearerWidgetElement,
+        PacemCompositeWidgetElement: PacemCompositeWidgetElement,
+        get PacemDataColumnElement () { return PacemDataColumnElement; },
+        get PacemDataColumnsElement () { return PacemDataColumnsElement; },
+        get PacemElementPickerElement () { return PacemElementPickerElement; },
+        PacemElementPickerElementBase: PacemElementPickerElementBase,
+        get PacemExpressionElement () { return PacemExpressionElement; },
+        get PacemGridWidgetElement () { return PacemGridWidgetElement; },
+        PacemUiWidgetElement: PacemUiWidgetElement,
+        get PacemWidgetApiManifestElement () { return PacemWidgetApiManifestElement; },
+        get PacemWidgetClockElement () { return PacemWidgetClockElement; },
+        get PacemWidgetDataElement () { return PacemWidgetDataElement; },
+        get PacemWidgetDataGridElement () { return PacemWidgetDataGridElement; },
+        PacemWidgetElement: PacemWidgetElement,
+        get PacemWidgetFetchElement () { return PacemWidgetFetchElement; },
+        get PacemWidgetFetchParameterElement () { return PacemWidgetFetchParameterElement; },
+        get PacemWidgetPickerElement () { return PacemWidgetPickerElement; },
+        get PacemWidgetTextElement () { return PacemWidgetTextElement; },
+        get PacemWidgetToolbarElement () { return PacemWidgetToolbarElement; },
+        get PacemWidgetTranslatorElement () { return PacemWidgetTranslatorElement; },
+        Widget: Widget,
+        WidgetRegisterEvent: WidgetRegisterEvent,
+        WidgetRegisterEventName: WidgetRegisterEventName,
+        WidgetUnregisterEvent: WidgetUnregisterEvent,
+        WidgetUnregisterEventName: WidgetUnregisterEventName,
+        buildWidgetMetadata: buildWidgetMetadata,
+        gridifyMetadata: gridifyMetadata
+    });
+
+    const PermissionEditEventName = 'permissionedit';
+    class PermissionEditEvent extends CustomEvent {
+        constructor(permissible) {
+            super(PermissionEditEventName, { detail: permissible, cancelable: false, bubbles: true });
+        }
+    }
+    class Permissible {
+        static canEdit(claims, resource) { return this._canDoSomethingToResource(claims, resource, p => p.update); }
+        static canRead(claims, resource) { return this._canDoSomethingToResource(claims, resource, p => p.read); }
+        static canAdd(claims, resource) { return this._canDoSomethingToResource(claims, resource, p => p.create); }
+        static canDelete(claims, resource) { return this._canDoSomethingToResource(claims, resource, p => p.delete); }
+        static canTranslate(claims, resource) { return this._canDoSomethingToResource(claims, resource, p => p.translate); }
+        static _canDoSomethingToResource(claims, resource, predicate) {
+            if (pacemCore.Utils.isNullOrEmpty(claims) || pacemCore.Utils.isNull(resource)) {
+                return false;
+            }
+            // if no permissions are set, then you're free to go!
+            var editable = true;
+            if (resource.permissions && resource.permissions.length > 0) {
+                // check correspondence otherwise
+                editable = false;
+                for (let permission of resource.permissions) {
+                    if (predicate(permission) && claims[permission.claimType] && claims[permission.claimType].indexOf(permission.claimValue) >= 0) {
+                        return true;
+                    }
+                }
+            }
+            // return
+            return editable;
+        }
+    }
+
+    var index_cms = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        DATACOLUMNS_METADATA_TYPE: DATACOLUMNS_METADATA_TYPE,
+        OpenApi: swaggerCms,
+        get PacemDataColumnElement () { return PacemDataColumnElement; },
+        get PacemDataColumnsElement () { return PacemDataColumnsElement; },
+        Permissible: Permissible,
+        PermissionEditEvent: PermissionEditEvent,
+        PermissionEditEventName: PermissionEditEventName
+    });
+
+    var Output = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        Cms: index_cms,
+        Components: index_components
+    });
+
+    pacemFoundation.DeepMerger.merge(Output);
+
+})(Pacem, Pacem, Pacem, Pacem);
+//# sourceMappingURL=pacem-cms.js.map