@teipublisher/pb-components 2.25.5 → 2.25.6

package/dist/pb-odd-editor.js

@@ -1,4 +1,4 @@
-import{f as e,N as t,j as o,k as i,l as s,A as r,L as a,c as n,h as l,b as d,w as c,p}from"./pb-mixin-b1caa22e.js";import{E as h,T as m,D as u,p as b}from"./vaadin-element-mixin-859a0132.js";import{h as g,g as v,F as f,D as y,z as w,A as _,c as x}from"./paper-checkbox-4f410b1f.js";import{a as E}from"./paper-listbox-5f42cff5.js";import"./paper-icon-button-0fb125c4.js";import"./jinn-codemirror-da0e2d1f.js";import{t as $,g as S}from"./pb-i18n-0611135a.js";const k=(()=>{if("undefined"==typeof self)return!1;if("top"in self&&self!==top)try{top}catch(e){return!1}return"showOpenFilePicker"in self})();k?Promise.resolve().then((function(){return P})):Promise.resolve().then((function(){return z})),k?Promise.resolve().then((function(){return T})):Promise.resolve().then((function(){return B}));const C=k?Promise.resolve().then((function(){return O})):Promise.resolve().then((function(){return j}));async function A(...e){return(await C).default(...e)}const R=async e=>{const t=await e.getFile();return t.handle=e,t};var P={__proto__:null,default:async(e=[{}])=>{Array.isArray(e)||(e=[e]);const t=[];e.forEach((e,o)=>{t[o]={description:e.description||"Files",accept:{}},e.mimeTypes?e.mimeTypes.map(i=>{t[o].accept[i]=e.extensions||[]}):t[o].accept["*/*"]=e.extensions||[]});const o=await window.showOpenFilePicker({id:e[0].id,startIn:e[0].startIn,types:t,multiple:e[0].multiple||!1,excludeAcceptAllOption:e[0].excludeAcceptAllOption||!1}),i=await Promise.all(o.map(R));return e[0].multiple?i:i[0]}};function M(e){function t(e){if(Object(e)!==e)return Promise.reject(new TypeError(e+" is not an object."));var t=e.done;return Promise.resolve(e.value).then((function(e){return{value:e,done:t}}))}return(M=function(e){this.s=e,this.n=e.next}).prototype={s:null,n:null,next:function(){return t(this.n.apply(this.s,arguments))},return:function(e){var o=this.s.return;return void 0===o?Promise.resolve({value:e,done:!0}):t(o.apply(this.s,arguments))},throw:function(e){var o=this.s.return;return void 0===o?Promise.reject(e):t(o.apply(this.s,arguments))}},new M(e)}const I=async(e,t,o=e.name,i)=>{const s=[],r=[];var a,n=!1,l=!1;try{for(var d,c=function(e){var t,o,i,s=2;for("undefined"!=typeof Symbol&&(o=Symbol.asyncIterator,i=Symbol.iterator);s--;){if(o&&null!=(t=e[o]))return t.call(e);if(i&&null!=(t=e[i]))return new M(t.call(e));o="@@asyncIterator",i="@@iterator"}throw new TypeError("Object is not async iterable")}(e.values());n=!(d=await c.next()).done;n=!1){const a=d.value,n=`${o}/${a.name}`;"file"===a.kind?r.push(a.getFile().then(t=>(t.directoryHandle=e,t.handle=a,Object.defineProperty(t,"webkitRelativePath",{configurable:!0,enumerable:!0,get:()=>n})))):"directory"!==a.kind||!t||i&&i(a)||s.push(I(a,t,n,i))}}catch(e){l=!0,a=e}finally{try{n&&null!=c.return&&await c.return()}finally{if(l)throw a}}return[...(await Promise.all(s)).flat(),...await Promise.all(r)]};var T={__proto__:null,default:async(e={})=>{e.recursive=e.recursive||!1,e.mode=e.mode||"read";const t=await window.showDirectoryPicker({id:e.id,startIn:e.startIn,mode:e.mode});return(await(await t.values()).next()).done?[t]:I(t,e.recursive,void 0,e.skipDirectory)}},O={__proto__:null,default:async(e,t=[{}],o=null,i=!1,s=null)=>{Array.isArray(t)||(t=[t]),t[0].fileName=t[0].fileName||"Untitled";const r=[];let a=null;if(e instanceof Blob&&e.type?a=e.type:e.headers&&e.headers.get("content-type")&&(a=e.headers.get("content-type")),t.forEach((e,t)=>{r[t]={description:e.description||"Files",accept:{}},e.mimeTypes?(0===t&&a&&e.mimeTypes.push(a),e.mimeTypes.map(o=>{r[t].accept[o]=e.extensions||[]})):a?r[t].accept[a]=e.extensions||[]:r[t].accept["*/*"]=e.extensions||[]}),o)try{await o.getFile()}catch(e){if(o=null,i)throw e}const n=o||await window.showSaveFilePicker({suggestedName:t[0].fileName,id:t[0].id,startIn:t[0].startIn,types:r,excludeAcceptAllOption:t[0].excludeAcceptAllOption||!1});!o&&s&&s(n);const l=await n.createWritable();if("stream"in e){const t=e.stream();return await t.pipeTo(l),n}return"body"in e?(await e.body.pipeTo(l),n):(await l.write(await e),await l.close(),n)}},z={__proto__:null,default:async(e=[{}])=>(Array.isArray(e)||(e=[e]),new Promise((t,o)=>{const i=document.createElement("input");i.type="file";const s=[...e.map(e=>e.mimeTypes||[]),...e.map(e=>e.extensions||[])].join();i.multiple=e[0].multiple||!1,i.accept=s||"",i.style.display="none",document.body.append(i);const r=e=>{"function"==typeof a&&a(),t(e)},a=e[0].legacySetup&&e[0].legacySetup(r,()=>a(o),i),n=()=>{window.removeEventListener("focus",n),i.remove()};i.addEventListener("click",()=>{window.addEventListener("focus",n)}),i.addEventListener("change",()=>{window.removeEventListener("focus",n),i.remove(),r(i.multiple?Array.from(i.files):i.files[0])}),"showPicker"in HTMLInputElement.prototype?i.showPicker():i.click()}))},B={__proto__:null,default:async(e=[{}])=>(Array.isArray(e)||(e=[e]),e[0].recursive=e[0].recursive||!1,new Promise((t,o)=>{const i=document.createElement("input");i.type="file",i.webkitdirectory=!0;const s=e=>{"function"==typeof r&&r(),t(e)},r=e[0].legacySetup&&e[0].legacySetup(s,()=>r(o),i);i.addEventListener("change",()=>{let t=Array.from(i.files);e[0].recursive?e[0].recursive&&e[0].skipDirectory&&(t=t.filter(t=>t.webkitRelativePath.split("/").every(t=>!e[0].skipDirectory({name:t,kind:"directory"})))):t=t.filter(e=>2===e.webkitRelativePath.split("/").length),s(t)}),"showPicker"in HTMLInputElement.prototype?i.showPicker():i.click()}))},j={__proto__:null,default:async(e,t={})=>{Array.isArray(t)&&(t=t[0]);const o=document.createElement("a");let i=e;"body"in e&&(i=await async function(e,t){const o=e.getReader(),i=new ReadableStream({start:e=>async function t(){return o.read().then(({done:o,value:i})=>{if(!o)return e.enqueue(i),t();e.close()})}()}),s=new Response(i),r=await s.blob();return o.releaseLock(),new Blob([r],{type:t})}(e.body,e.headers.get("content-type"))),o.download=t.fileName||"Untitled",o.href=URL.createObjectURL(await i);const s=()=>{"function"==typeof r&&r()},r=t.legacySetup&&t.legacySetup(s,()=>r(),o);return o.addEventListener("click",()=>{setTimeout(()=>URL.revokeObjectURL(o.href),3e4),s()}),o.click(),null}};
+import{f as e,N as t,j as o,k as i,l as s,A as r,L as a,c as n,h as l,b as d,w as c,p}from"./pb-mixin-886ece32.js";import{E as h,T as m,D as u,p as b}from"./vaadin-element-mixin-ad07ba25.js";import{h as g,g as v,F as f,D as y,z as w,A as _,c as x}from"./paper-checkbox-4f410b1f.js";import{a as $}from"./paper-listbox-5f42cff5.js";import"./paper-icon-button-72125e67.js";import"./jinn-codemirror-da0e2d1f.js";import{t as E,g as S}from"./pb-i18n-4cc00bfe.js";const k=(()=>{if("undefined"==typeof self)return!1;if("top"in self&&self!==top)try{top}catch(e){return!1}return"showOpenFilePicker"in self})();k?Promise.resolve().then((function(){return P})):Promise.resolve().then((function(){return j})),k?Promise.resolve().then((function(){return O})):Promise.resolve().then((function(){return z}));const C=k?Promise.resolve().then((function(){return T})):Promise.resolve().then((function(){return B}));async function A(...e){return(await C).default(...e)}const R=async e=>{const t=await e.getFile();return t.handle=e,t};var P={__proto__:null,default:async(e=[{}])=>{Array.isArray(e)||(e=[e]);const t=[];e.forEach((e,o)=>{t[o]={description:e.description||"Files",accept:{}},e.mimeTypes?e.mimeTypes.map(i=>{t[o].accept[i]=e.extensions||[]}):t[o].accept["*/*"]=e.extensions||[]});const o=await window.showOpenFilePicker({id:e[0].id,startIn:e[0].startIn,types:t,multiple:e[0].multiple||!1,excludeAcceptAllOption:e[0].excludeAcceptAllOption||!1}),i=await Promise.all(o.map(R));return e[0].multiple?i:i[0]}};function M(e){function t(e){if(Object(e)!==e)return Promise.reject(new TypeError(e+" is not an object."));var t=e.done;return Promise.resolve(e.value).then((function(e){return{value:e,done:t}}))}return(M=function(e){this.s=e,this.n=e.next}).prototype={s:null,n:null,next:function(){return t(this.n.apply(this.s,arguments))},return:function(e){var o=this.s.return;return void 0===o?Promise.resolve({value:e,done:!0}):t(o.apply(this.s,arguments))},throw:function(e){var o=this.s.return;return void 0===o?Promise.reject(e):t(o.apply(this.s,arguments))}},new M(e)}const I=async(e,t,o=e.name,i)=>{const s=[],r=[];var a,n=!1,l=!1;try{for(var d,c=function(e){var t,o,i,s=2;for("undefined"!=typeof Symbol&&(o=Symbol.asyncIterator,i=Symbol.iterator);s--;){if(o&&null!=(t=e[o]))return t.call(e);if(i&&null!=(t=e[i]))return new M(t.call(e));o="@@asyncIterator",i="@@iterator"}throw new TypeError("Object is not async iterable")}(e.values());n=!(d=await c.next()).done;n=!1){const a=d.value,n=`${o}/${a.name}`;"file"===a.kind?r.push(a.getFile().then(t=>(t.directoryHandle=e,t.handle=a,Object.defineProperty(t,"webkitRelativePath",{configurable:!0,enumerable:!0,get:()=>n})))):"directory"!==a.kind||!t||i&&i(a)||s.push(I(a,t,n,i))}}catch(e){l=!0,a=e}finally{try{n&&null!=c.return&&await c.return()}finally{if(l)throw a}}return[...(await Promise.all(s)).flat(),...await Promise.all(r)]};var O={__proto__:null,default:async(e={})=>{e.recursive=e.recursive||!1,e.mode=e.mode||"read";const t=await window.showDirectoryPicker({id:e.id,startIn:e.startIn,mode:e.mode});return(await(await t.values()).next()).done?[t]:I(t,e.recursive,void 0,e.skipDirectory)}},T={__proto__:null,default:async(e,t=[{}],o=null,i=!1,s=null)=>{Array.isArray(t)||(t=[t]),t[0].fileName=t[0].fileName||"Untitled";const r=[];let a=null;if(e instanceof Blob&&e.type?a=e.type:e.headers&&e.headers.get("content-type")&&(a=e.headers.get("content-type")),t.forEach((e,t)=>{r[t]={description:e.description||"Files",accept:{}},e.mimeTypes?(0===t&&a&&e.mimeTypes.push(a),e.mimeTypes.map(o=>{r[t].accept[o]=e.extensions||[]})):a?r[t].accept[a]=e.extensions||[]:r[t].accept["*/*"]=e.extensions||[]}),o)try{await o.getFile()}catch(e){if(o=null,i)throw e}const n=o||await window.showSaveFilePicker({suggestedName:t[0].fileName,id:t[0].id,startIn:t[0].startIn,types:r,excludeAcceptAllOption:t[0].excludeAcceptAllOption||!1});!o&&s&&s(n);const l=await n.createWritable();if("stream"in e){const t=e.stream();return await t.pipeTo(l),n}return"body"in e?(await e.body.pipeTo(l),n):(await l.write(await e),await l.close(),n)}},j={__proto__:null,default:async(e=[{}])=>(Array.isArray(e)||(e=[e]),new Promise((t,o)=>{const i=document.createElement("input");i.type="file";const s=[...e.map(e=>e.mimeTypes||[]),...e.map(e=>e.extensions||[])].join();i.multiple=e[0].multiple||!1,i.accept=s||"",i.style.display="none",document.body.append(i);const r=e=>{"function"==typeof a&&a(),t(e)},a=e[0].legacySetup&&e[0].legacySetup(r,()=>a(o),i),n=()=>{window.removeEventListener("focus",n),i.remove()};i.addEventListener("click",()=>{window.addEventListener("focus",n)}),i.addEventListener("change",()=>{window.removeEventListener("focus",n),i.remove(),r(i.multiple?Array.from(i.files):i.files[0])}),"showPicker"in HTMLInputElement.prototype?i.showPicker():i.click()}))},z={__proto__:null,default:async(e=[{}])=>(Array.isArray(e)||(e=[e]),e[0].recursive=e[0].recursive||!1,new Promise((t,o)=>{const i=document.createElement("input");i.type="file",i.webkitdirectory=!0;const s=e=>{"function"==typeof r&&r(),t(e)},r=e[0].legacySetup&&e[0].legacySetup(s,()=>r(o),i);i.addEventListener("change",()=>{let t=Array.from(i.files);e[0].recursive?e[0].recursive&&e[0].skipDirectory&&(t=t.filter(t=>t.webkitRelativePath.split("/").every(t=>!e[0].skipDirectory({name:t,kind:"directory"})))):t=t.filter(e=>2===e.webkitRelativePath.split("/").length),s(t)}),"showPicker"in HTMLInputElement.prototype?i.showPicker():i.click()}))},B={__proto__:null,default:async(e,t={})=>{Array.isArray(t)&&(t=t[0]);const o=document.createElement("a");let i=e;"body"in e&&(i=await async function(e,t){const o=e.getReader(),i=new ReadableStream({start:e=>async function t(){return o.read().then(({done:o,value:i})=>{if(!o)return e.enqueue(i),t();e.close()})}()}),s=new Response(i),r=await s.blob();return o.releaseLock(),new Blob([r],{type:t})}(e.body,e.headers.get("content-type"))),o.download=t.fileName||"Untitled",o.href=URL.createObjectURL(await i);const s=()=>{"function"==typeof r&&r()},r=t.legacySetup&&t.legacySetup(s,()=>r(),o);return o.addEventListener("click",()=>{setTimeout(()=>URL.revokeObjectURL(o.href),3e4),s()}),o.click(),null}};
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -487,7 +487,7 @@ const Y=e=>class extends e{static get properties(){return{_hasVaadinListMixin:{v
 @license
 Copyright (c) 2017 Vaadin Ltd.
 This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/,Q=/Apple.* Version\/(9|10)/.test(navigator.userAgent);class ee extends(h(Y(m(_([E],v))))){static get template(){return g`
+*/,Q=/Apple.* Version\/(9|10)/.test(navigator.userAgent);class ee extends(h(Y(m(_([$],v))))){static get template(){return g`
     <style>
       :host {
         display: flex;
@@ -574,297 +574,323 @@ This program is available under Apache License Version 2.0, available at https:/
 
     <div on-click="_scrollForward" part="forward-button"></div>
 `}static get is(){return"vaadin-tabs"}static get version(){return"3.2.0"}static get properties(){return{orientation:{value:"horizontal",type:String},selected:{value:0,type:Number}}}static get observers(){return["_updateOverflow(items.*, vertical)"]}ready(){super.ready(),this.addEventListener("iron-resize",()=>this._updateOverflow()),this._scrollerElement.addEventListener("scroll",()=>this._updateOverflow()),this.setAttribute("role","tablist"),x(this,()=>{this._updateOverflow()})}_scrollForward(){this._scroll(-this.__direction*this._scrollOffset)}_scrollBack(){this._scroll(this.__direction*this._scrollOffset)}get _scrollOffset(){return this._vertical?this._scrollerElement.offsetHeight:this._scrollerElement.offsetWidth}get _scrollerElement(){return this.$.scroll}get __direction(){return this._vertical||"rtl"!==this.getAttribute("dir")?-1:1}_updateOverflow(){const e=this._vertical?this._scrollerElement.scrollTop:this.__getNormalizedScrollLeft(this._scrollerElement);let t=this._vertical?this._scrollerElement.scrollHeight:this._scrollerElement.scrollWidth;t-=1;let o=e>0?"start":"";o+=e+this._scrollOffset<t?" end":"",1==this.__direction&&(o=o.replace(/start|end/gi,e=>"start"===e?"end":"start")),o?this.setAttribute("overflow",o.trim()):this.removeAttribute("overflow"),this._repaintShadowNodesHack()}_repaintShadowNodesHack(){if(Q&&this.root){const e="-webkit-backface-visibility";this.root.querySelectorAll("*").forEach(t=>{t.style[e]="visible",t.style[e]=""})}}}customElements.define(ee.is,ee);class te extends a{static get styles(){return n`
-            :host {
-                display: block;
-            }
-            .wrapper{
-                display:grid;
-                grid-template-columns:150px auto 50px;
-                grid-column-gap:20px;
-                grid-row-gap:20px;
-                margin-bottom:10px;
-            }
-
-            .editor label {
-                margin-bottom:5px;
-                font-size: 12px;
-                font-weight: 400;
-                color: var(--paper-grey-500);
-            }
-
-            paper-dropdown-menu{
-            }
-            
-            paper-icon-button{
-                align-self:center;
-            }
-        `}render(){return l`
-        <div class="wrapper">
-            <paper-dropdown-menu label="Scope">
-                <paper-listbox id="scopeList" slot="dropdown-content" selected="${this.scope}" attr-for-selected="value"
-                    @iron-select="${this._listchanged}">
-                      ${this.scopes.map(e=>l`
-                            <paper-item value="${e}">${e}</paper-item>
-                        `)}
-                </paper-listbox>
-            </paper-dropdown-menu>
-            <div class="editor">
-                <label>Rendition</label>
-                <jinn-codemirror
-                    id="editor"
-                    label="Rendition"
-                    code="${this.css||""}"
-                    mode="css"
-                    @update="${this._handleCodeChange}"></jinn-codemirror>
-            </div>
-            <paper-icon-button @click="${this._remove}" icon="delete" title="delete this rendition"></paper-icon-button>
+      :host {
+        display: block;
+      }
+      .wrapper {
+        display: grid;
+        grid-template-columns: 150px auto 50px;
+        grid-column-gap: 20px;
+        grid-row-gap: 20px;
+        margin-bottom: 10px;
+      }
+
+      .editor label {
+        margin-bottom: 5px;
+        font-size: 12px;
+        font-weight: 400;
+        color: var(--paper-grey-500);
+      }
+
+      paper-dropdown-menu {
+      }
+
+      paper-icon-button {
+        align-self: center;
+      }
+    `}render(){return l`
+      <div class="wrapper">
+        <paper-dropdown-menu label="Scope">
+          <paper-listbox
+            id="scopeList"
+            slot="dropdown-content"
+            selected="${this.scope}"
+            attr-for-selected="value"
+            @iron-select="${this._listchanged}"
+          >
+            ${this.scopes.map(e=>l` <paper-item value="${e}">${e}</paper-item> `)}
+          </paper-listbox>
+        </paper-dropdown-menu>
+        <div class="editor">
+          <label>Rendition</label>
+          <jinn-codemirror
+            id="editor"
+            label="Rendition"
+            code="${this.css||""}"
+            mode="css"
+            @update="${this._handleCodeChange}"
+          ></jinn-codemirror>
+        </div>
+        <paper-icon-button
+          @click="${this._remove}"
+          icon="delete"
+          title="delete this rendition"
+        ></paper-icon-button>
+      </div>
+
+      <slot></slot>
+    `}static get properties(){return{scopes:{type:Array},css:{type:String,reflect:!0},scope:{type:String,reflect:!0},selected:{type:String}}}constructor(){super(),this.scopes=["","before","after"],this.css="",this.scope="",this.selected="",this._initialized=!1}connectedCallback(){super.connectedCallback(),this.css=this.css.trim(),this.dispatchEvent(new CustomEvent("rendition-connected",{composed:!0,bubbles:!0,detail:{target:this}}))}firstUpdated(e){this.refreshEditor(),this._initialized=!0}refreshEditor(){console.log("refreshEditor"),this.shadowRoot.getElementById("editor")}_remove(e){e.preventDefault(),this.dispatchEvent(new CustomEvent("remove-rendition",{}))}_handleCodeChange(){this.css=this.shadowRoot.getElementById("editor").value,this.dispatchEvent(new CustomEvent("rendition-changed",{composed:!0,bubbles:!0,detail:{name:this.name,css:this.css,scope:this.scope}}))}_listchanged(e){const t=this.shadowRoot.getElementById("scopeList");this.scope=t.selected}}customElements.define("pb-odd-rendition-editor",te);class oe extends a{static get styles(){return n`
+      :host {
+        display: block;
+      }
+      .wrapper {
+        display: grid;
+        grid-template-columns: 150px auto 50px 50px;
+        grid-column-gap: 20px;
+        grid-row-gap: 20px;
+        margin-bottom: 10px;
+      }
+      paper-dropdown-menu {
+        align-self: start;
+      }
+      paper-icon-button,
+      paper-checkbox {
+        align-self: center;
+        margin-top: 16px;
+      }
+
+      .editor label {
+        margin-bottom: 5px;
+        font-size: 12px;
+        font-weight: 400;
+        color: var(--paper-grey-500);
+      }
+    `}render(){return l`
+      <div class="wrapper">
+        <paper-autocomplete
+          id="combo"
+          text="${this.name}"
+          placeholder="${E("odd.editor.model.param-name-placeholder")}"
+          label="Name"
+          .source="${this._currentParameters}"
+        ></paper-autocomplete>
+
+        <div class="editor">
+          <label>Parameter</label>
+          <jinn-codemirror
+            id="editor"
+            mode="xquery"
+            code="${this.value}"
+            linter="${this.endpoint}/${d(this.apiVersion,"1.0.0")?"modules/editor.xql":"api/lint"}"
+          ></jinn-codemirror>
         </div>
+        <paper-checkbox id="set" ?checked="${this.setParam}" @change="${this._handleCodeChange}"
+          >${E("odd.editor.model.set-param")}</paper-checkbox
+        >
+        <paper-icon-button
+          @click="${this._delete}"
+          icon="delete"
+          title="delete this parameter"
+        ></paper-icon-button>
+      </div>
+    `}static get properties(){return{name:{type:String,reflect:!0},value:{type:String,reflect:!0},behaviour:{type:String},parameters:{type:Object},setParam:{type:Boolean,attribute:"set"},_currentParameters:{type:Array},endpoint:{type:String},apiVersion:{type:String}}}constructor(){super(),this.name="",this.value="",this.setParam=!1,this.behaviour="",this.currentParameters=[],this.parameters={"":[],alternate:["default","alternate","persistent"],anchor:["content","id"],block:["content"],body:["content"],break:["content","type","label"],cell:["content"],cit:["content","source"],document:["content"],figure:["content","title"],graphic:["content","url","width","height","scale","title"],heading:["content","level"],inline:["content"],link:["content","uri","target"],list:["content","type"],listItem:["content","n"],metadata:["content"],note:["content","place","label"],omit:[],paragraph:["content"],row:["content"],section:["content"],table:["content"],text:["content"],title:["content"],webcomponent:["content","name"]},this.selected="",this.endpoint=""}connectedCallback(){super.connectedCallback(),this.value=this.value.trim(),this.dispatchEvent(new CustomEvent("parameter-connected",{composed:!0,bubbles:!0,detail:{target:this}}))}attributeChangedCallback(e,t,o){super.attributeChangedCallback(e,t,o),"behaviour"===e&&(this._currentParameters=this.parameters[o])}firstUpdated(e){this.selected=this.parameters[this.behaviour]||[],this.requestUpdate(),this.shadowRoot.getElementById("combo").addEventListener("focused-changed",this._handleCodeChange.bind(this)),this.shadowRoot.getElementById("editor").addEventListener("update",this._handleCodeChange.bind(this))}refreshEditor(){this.shadowRoot.getElementById("editor")}_delete(e){console.log("parameter delete ",e),e.preventDefault(),this.dispatchEvent(new CustomEvent("parameter-remove",{}))}_handleCodeChange(e){console.log("_handleCodeChange ",e),this.value=this.shadowRoot.getElementById("editor").content||"",console.log("value %s",this.value),this.name=this.shadowRoot.getElementById("combo").text,this.setParam=this.shadowRoot.getElementById("set").checked,this.dispatchEvent(new CustomEvent("parameter-changed",{composed:!0,bubbles:!0,detail:{name:this.name,value:this.value,set:this.setParam}}))}}customElements.define("pb-odd-parameter-editor",oe);class ie extends a{static get styles(){return n`
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-family: 'Oswald', Verdana, 'Helvetica', sans-serif;
+        font-weight: 400 !important;
+      }
 
+      form {
+        margin-bottom: 8px;
+      }
 
+      paper-input,
+      paper-autocomplete {
+        margin-bottom: 16px;
+      }
 
-        <slot></slot>
-
-        `}static get properties(){return{scopes:{type:Array},css:{type:String,reflect:!0},scope:{type:String,reflect:!0},selected:{type:String}}}constructor(){super(),this.scopes=["","before","after"],this.css="",this.scope="",this.selected="",this._initialized=!1}connectedCallback(){super.connectedCallback(),this.css=this.css.trim(),this.dispatchEvent(new CustomEvent("rendition-connected",{composed:!0,bubbles:!0,detail:{target:this}}))}firstUpdated(e){this.refreshEditor(),this._initialized=!0}refreshEditor(){console.log("refreshEditor");this.shadowRoot.getElementById("editor")}_remove(e){e.preventDefault(),this.dispatchEvent(new CustomEvent("remove-rendition",{}))}_handleCodeChange(){this.css=this.shadowRoot.getElementById("editor").value,this.dispatchEvent(new CustomEvent("rendition-changed",{composed:!0,bubbles:!0,detail:{name:this.name,css:this.css,scope:this.scope}}))}_listchanged(e){const t=this.shadowRoot.getElementById("scopeList");this.scope=t.selected}}customElements.define("pb-odd-rendition-editor",te);class oe extends a{static get styles(){return n`
-            :host {
-                display: block;
-            }
-            .wrapper{
-                display:grid;
-                grid-template-columns:150px auto 50px 50px;
-                grid-column-gap:20px;
-                grid-row-gap:20px;
-                margin-bottom:10px;
-            }
-            paper-dropdown-menu{
-                align-self:start;
-            }
-            paper-icon-button, paper-checkbox {
-                align-self: center;
-                margin-top: 16px;
-            }
-
-            .editor label {
-                margin-bottom:5px;
-                font-size: 12px;
-                font-weight: 400;
-                color: var(--paper-grey-500);
-            }
-        `}render(){return l`
-        <div class="wrapper">
-            
-            <paper-autocomplete id="combo" text="${this.name}" placeholder="${$("odd.editor.model.param-name-placeholder")}" label="Name" 
-                .source="${this._currentParameters}"></paper-autocomplete>
+      .models {
+        margin-left: 20px;
+        margin-top: 10px;
+      }
 
-            <div class="editor">
-                <label>Parameter</label>
-                <jinn-codemirror id="editor"
-                        mode="xquery"
-                        code="${this.value}"
-                        linter="${this.endpoint}/${d(this.apiVersion,"1.0.0")?"modules/editor.xql":"api/lint"}"></jinn-codemirror>
-            </div>
-            <paper-checkbox id="set" ?checked="${this.setParam}" @change="${this._handleCodeChange}">${$("odd.editor.model.set-param")}</paper-checkbox>
-            <paper-icon-button @click="${this._delete}" icon="delete" title="delete this parameter"></paper-icon-button>
-        </div>
+      .btn,
+      .btn-group {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
 
-        
-        `}static get properties(){return{name:{type:String,reflect:!0},value:{type:String,reflect:!0},behaviour:{type:String},parameters:{type:Object},setParam:{type:Boolean,attribute:"set"},_currentParameters:{type:Array},endpoint:{type:String},apiVersion:{type:String}}}constructor(){super(),this.name="",this.value="",this.setParam=!1,this.behaviour="",this.currentParameters=[],this.parameters={"":[],alternate:["default","alternate","persistent"],anchor:["content","id"],block:["content"],body:["content"],break:["content","type","label"],cell:["content"],cit:["content","source"],document:["content"],figure:["content","title"],graphic:["content","url","width","height","scale","title"],heading:["content","level"],inline:["content"],link:["content","uri","target"],list:["content","type"],listItem:["content","n"],metadata:["content"],note:["content","place","label"],omit:[],paragraph:["content"],row:["content"],section:["content"],table:["content"],text:["content"],title:["content"],webcomponent:["content","name"]},this.selected="",this.endpoint=""}connectedCallback(){super.connectedCallback(),this.value=this.value.trim(),this.dispatchEvent(new CustomEvent("parameter-connected",{composed:!0,bubbles:!0,detail:{target:this}}))}attributeChangedCallback(e,t,o){super.attributeChangedCallback(e,t,o),"behaviour"===e&&(this._currentParameters=this.parameters[o])}firstUpdated(e){this.selected=this.parameters[this.behaviour]||[],this.requestUpdate(),this.shadowRoot.getElementById("combo").addEventListener("focused-changed",this._handleCodeChange.bind(this)),this.shadowRoot.getElementById("editor").addEventListener("update",this._handleCodeChange.bind(this))}refreshEditor(){this.shadowRoot.getElementById("editor")}_delete(e){console.log("parameter delete ",e),e.preventDefault(),this.dispatchEvent(new CustomEvent("parameter-remove",{}))}_handleCodeChange(e){console.log("_handleCodeChange ",e),this.value=this.shadowRoot.getElementById("editor").content||"",console.log("value %s",this.value),this.name=this.shadowRoot.getElementById("combo").text,this.setParam=this.shadowRoot.getElementById("set").checked,this.dispatchEvent(new CustomEvent("parameter-changed",{composed:!0,bubbles:!0,detail:{name:this.name,value:this.value,set:this.setParam}}))}}customElements.define("pb-odd-parameter-editor",oe);class ie extends a{static get styles(){return n`
-            :host {
-                display: flex;
-                flex-direction:column;
-            }
-            h1, h2, h3, h4, h5, h6 {
-                font-family: "Oswald", Verdana, "Helvetica", sans-serif;
-                font-weight: 400 !important;
-            }
-
-            form {
-                margin-bottom: 8px;
-            }
-
-            paper-input, paper-autocomplete {
-                margin-bottom: 16px;
-            }
-
-            .models {
-                margin-left:20px;
-                margin-top:10px;
-            }
-
-            .btn, .btn-group {
-                margin-top: 0;
-                margin-bottom: 0;
-            }
-
-            header {
-                // background-color: #d1dae0;
-                background:var(--paper-grey-300);
-                margin:0;
-            }
-
-            header div {
-                display: flex;
-                flex-direction: row;
-                justify-content: space-between;
-                align-items: center;
-            }
-
-            header h4 {
-                padding: 4px 8px;
-                margin: 0;
-                display: grid;
-                grid-template-columns: 40px 40% auto;
-            }
-            h4 .btn-group{
-                text-align: right;
-                display: none;
-            }
-
-            #toggle, .modelType{
-                align-self:center;
-            }
-
-            header div.info {
-                padding: 0 16px 4px;
-                margin: 0;
-                font-size: 85%;
-                display: block;
-                margin:0 0 0 32px;
-            }
-            header div.info *{
-                display: block;
-                line-height: 1.2;
-            }
-
-            header .outputDisplay{
-                text-transform: uppercase ;
-            }
-            header .description{
-                font-style: italic;
-            }
-
-            header .predicate {
-                color: #ff5722;
-            }
-
-            .predicate label, .template label {
-                display: block;
-                font-size: 12px;
-                font-weight: 300;
-                color: rgb(115, 115, 115);
-            }
-
-            .model-collapse {
-                color: #000000;
-                cursor: pointer;
-            }
-
-            .model-collapse:hover {
-                text-decoration: none;
-            }
-
-            .behaviour {
-                color: #ff5722;
-            }
-
-            .behaviour:before {
-                content: ' [';
-            }
-
-            .behaviour:after {
-                content: ']';
-            }
-
-            .behaviourWrapper{
-                display:grid;
-                grid-template-columns: 140px 40px 140px auto;
-            }
-            .behaviourWrapper > *{
-                display:inline;
-                align-self:stretch;
-            }
-            
-            .group {
-                margin: 0;
-                font-size: 16px;
-                font-weight: bold;
-            }
-
-            .group .title {
-                /*text-decoration: underline;*/
-            }
-
-            .renditions, .parameters {
-                padding-left: 16px;
-                border-left: 3px solid #e0e0e0;
-                margin-bottom:20px;
-            }
-
-            .renditions .group {
-                display: flex;
-                flex-direction: row;
-                justify-content: space-between;
-                align-items: center;
-            }
-
-            .predicate .form-control {
-                width: 100%;
-            }
-
-            .source {
-                text-decoration: none;
-                margin-bottom: 8px;
-            }
-
-            .selectOutput {
-                margin-right: 10px;
-            }
-
-            :host([currentselection]) > form > header{
-                @apply --shadow-elevation-4dp;
-                border-left:3px solid var(--paper-blue-500);
-            }
-
-            paper-menu-button paper-icon-button{
-                margin-left:-10px;
-            }
-
-            /* need to play it save for FF */
-            :host([currentselection]) > form > header > h4 > .btn-group{
-                display: inline-block;
-            }
-            iron-collapse{
-            }
-
-            .renditions{
-                margin-top:10px;
-            }
-            
-            .details{
-                padding:0px 50px 20px 20px;
-                background:var(--paper-grey-200);
-            }
-            
-            .editor {
-                margin-bottom: 20px;
-            }
-
-            .editor label {
-                margin-bottom:5px;
-                font-size: 12px;
-                font-weight: 400;
-                color: var(--paper-grey-500);
-            }
-
-            .horizontal {
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: space-between;
-            }
-
-            #mode {
-                min-width: 18em;
-            }
-        `}static get properties(){return{behaviour:{type:String},predicate:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},type:{type:String,reflect:!0},template:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},output:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},css:{type:String,converter:(e,t)=>"null"===e.toLowerCase()?"":e},mode:{type:String},model:{type:Object},models:{type:Array},parameters:{type:Array},renditions:{type:Array},desc:{type:String,converter:(e,t)=>"null"===e.toLowerCase()?"":e},sourcerend:{type:String},show:{type:Boolean,reflect:!0},outputs:{type:Array},behaviours:{type:Array},icon:{type:String},open:{type:String},hasCustomBehaviour:{type:Boolean},endpoint:{type:String},apiVersion:{type:String}}}constructor(){super(),this.behaviour="inline",this.predicate="",this.type="",this.template="",this.output="",this.css="",this.mode="",this.model={},this.model.models=[],this.parameters=[],this.renditions=[],this.desc="",this.sourcerend="",this.show=!1,this.outputs=["","web","print","epub","fo","latex","plain"],this.parentModel=[],this.behaviours=["alternate","anchor","block","body","break","cell","cit","document","figure","graphic","heading","inline","link","list","listItem","metadata","note","omit","paragraph","pass-through","row","section","table","text","title","webcomponent"],this.icon="expand-more",this.hasCustomBehaviour=!1}render(){let e;switch(this.output){case"web":case"epub":e="html";break;case"latex":e="tex";break;case"plain":e="default";break;case"fo":case"print":e="xml";break;default:e="html"}return l`
+      header {
+        // background-color: #d1dae0;
+        background: var(--paper-grey-300);
+        margin: 0;
+      }
+
+      header div {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      header h4 {
+        padding: 4px 8px;
+        margin: 0;
+        display: grid;
+        grid-template-columns: 40px 40% auto;
+      }
+      h4 .btn-group {
+        text-align: right;
+        display: none;
+      }
+
+      #toggle,
+      .modelType {
+        align-self: center;
+      }
+
+      header div.info {
+        padding: 0 16px 4px;
+        margin: 0;
+        font-size: 85%;
+        display: block;
+        margin: 0 0 0 32px;
+      }
+      header div.info * {
+        display: block;
+        line-height: 1.2;
+      }
+
+      header .outputDisplay {
+        text-transform: uppercase;
+      }
+      header .description {
+        font-style: italic;
+      }
+
+      header .predicate {
+        color: #ff5722;
+      }
+
+      .predicate label,
+      .template label {
+        display: block;
+        font-size: 12px;
+        font-weight: 300;
+        color: rgb(115, 115, 115);
+      }
+
+      .model-collapse {
+        color: #000000;
+        cursor: pointer;
+      }
+
+      .model-collapse:hover {
+        text-decoration: none;
+      }
+
+      .behaviour {
+        color: #ff5722;
+      }
+
+      .behaviour:before {
+        content: ' [';
+      }
+
+      .behaviour:after {
+        content: ']';
+      }
+
+      .behaviourWrapper {
+        display: grid;
+        grid-template-columns: 140px 40px 140px auto;
+      }
+      .behaviourWrapper > * {
+        display: inline;
+        align-self: stretch;
+      }
+
+      .group {
+        margin: 0;
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      .group .title {
+        /*text-decoration: underline;*/
+      }
+
+      .renditions,
+      .parameters {
+        padding-left: 16px;
+        border-left: 3px solid #e0e0e0;
+        margin-bottom: 20px;
+      }
+
+      .renditions .group {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .predicate .form-control {
+        width: 100%;
+      }
+
+      .source {
+        text-decoration: none;
+        margin-bottom: 8px;
+      }
+
+      .selectOutput {
+        margin-right: 10px;
+      }
+
+      :host([currentselection]) > form > header {
+        @apply --shadow-elevation-4dp;
+        border-left: 3px solid var(--paper-blue-500);
+      }
+
+      paper-menu-button paper-icon-button {
+        margin-left: -10px;
+      }
+
+      /* need to play it save for FF */
+      :host([currentselection]) > form > header > h4 > .btn-group {
+        display: inline-block;
+      }
+      iron-collapse {
+      }
+
+      .renditions {
+        margin-top: 10px;
+      }
+
+      .details {
+        padding: 0px 50px 20px 20px;
+        background: var(--paper-grey-200);
+      }
+
+      .editor {
+        margin-bottom: 20px;
+      }
+
+      .editor label {
+        margin-bottom: 5px;
+        font-size: 12px;
+        font-weight: 400;
+        color: var(--paper-grey-500);
+      }
+
+      .horizontal {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+
+      #mode {
+        min-width: 18em;
+      }
+    `}static get properties(){return{behaviour:{type:String},predicate:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},type:{type:String,reflect:!0},template:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},output:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},css:{type:String,converter:(e,t)=>"null"===e.toLowerCase()?"":e},mode:{type:String},model:{type:Object},models:{type:Array},parameters:{type:Array},renditions:{type:Array},desc:{type:String,converter:(e,t)=>"null"===e.toLowerCase()?"":e},sourcerend:{type:String},show:{type:Boolean,reflect:!0},outputs:{type:Array},behaviours:{type:Array},icon:{type:String},open:{type:String},hasCustomBehaviour:{type:Boolean},endpoint:{type:String},apiVersion:{type:String}}}constructor(){super(),this.behaviour="inline",this.predicate="",this.type="",this.template="",this.output="",this.css="",this.mode="",this.model={},this.model.models=[],this.parameters=[],this.renditions=[],this.desc="",this.sourcerend="",this.show=!1,this.outputs=["","web","print","epub","fo","latex","plain"],this.parentModel=[],this.behaviours=["alternate","anchor","block","body","break","cell","cit","document","figure","graphic","heading","inline","link","list","listItem","metadata","note","omit","paragraph","pass-through","row","section","table","text","title","webcomponent"],this.icon="expand-more",this.hasCustomBehaviour=!1}render(){let e;switch(this.output){case"web":case"epub":e="html";break;case"latex":e="tex";break;case"plain":e="default";break;case"fo":case"print":e="xml";break;default:e="html"}return l`
         <form>
             <header> 
                 <h4>
@@ -884,20 +910,27 @@ This program is available under Apache License Version 2.0, available at https:/
                         <paper-icon-button @click="${this._paste}" icon="content-paste"></paper-icon-button>
 
                         ${this._isGroupOrSequence()?l`
-                            <paper-menu-button horizontal-align="right">
-                                <paper-icon-button icon="add" slot="dropdown-trigger"></paper-icon-button>
-                                <paper-listbox id="modelType" slot="dropdown-content" @iron-select="${this._addNested}"
-                                               attr-for-selected="value">
-                                   ${"modelSequence"===this.type?l`
-                                            <paper-item value="model">model</paper-item>
-                                        `:""}
-                                   ${"modelGrp"===this.type?l`
-                                            <paper-item value="modelSequence">modelSequence</paper-item>
-                                            <paper-item value="model">model</paper-item>
+                                <paper-menu-button horizontal-align="right">
+                                  <paper-icon-button
+                                    icon="add"
+                                    slot="dropdown-trigger"
+                                  ></paper-icon-button>
+                                  <paper-listbox
+                                    id="modelType"
+                                    slot="dropdown-content"
+                                    @iron-select="${this._addNested}"
+                                    attr-for-selected="value"
+                                  >
+                                    ${"modelSequence"===this.type?l` <paper-item value="model">model</paper-item> `:""}
+                                    ${"modelGrp"===this.type?l`
+                                          <paper-item value="modelSequence"
+                                            >modelSequence</paper-item
+                                          >
+                                          <paper-item value="model">model</paper-item>
                                         `:""}
-                                </paper-listbox>
-                            </paper-menu-button>
-                            `:""}
+                                  </paper-listbox>
+                                </paper-menu-button>
+                              `:""}
                     </span>
                 </h4>
                 <div class="info">
@@ -912,18 +945,16 @@ This program is available under Apache License Version 2.0, available at https:/
                         <paper-listbox id="output" slot="dropdown-content" attr-for-selected="value"
                                     selected="${this.output}" @iron-select="${this._selectOutput}">
 
-                            ${this.outputs.map(e=>l`
-                                <paper-item value="${e}">${e}</paper-item>
-                            `)}
+                            ${this.outputs.map(e=>l` <paper-item value="${e}">${e}</paper-item> `)}
 
                         </paper-listbox>
                     </paper-dropdown-menu>
                     <paper-input id="mode" .value="${this.mode}"
-                        placeholder="${$("odd.editor.model.mode-placeholder")}"
+                        placeholder="${E("odd.editor.model.mode-placeholder")}"
                         label="Mode"
                         @change="${this._inputMode}"></paper-input>
                 </div>
-                <paper-input id="desc" .value="${this.desc}" placeholder="${$("odd.editor.model.description-placeholder")}"
+                <paper-input id="desc" .value="${this.desc}" placeholder="${E("odd.editor.model.description-placeholder")}"
                     label="Description" @change="${this._inputDesc}"></paper-input>
 
                 <div class="editor">
@@ -932,487 +963,623 @@ This program is available under Apache License Version 2.0, available at https:/
                         code="${this.predicate}"   
                         mode="xquery"
                         linter="${this.endpoint}/${d(this.apiVersion,"1.0.0")<0?"modules/editor.xql":"api/lint"}"
-                        placeholder="${$("odd.editor.model.predicate-placeholder")}"
+                        placeholder="${E("odd.editor.model.predicate-placeholder")}"
                         @update="${this._updatePredicate}"></jinn-codemirror>
                 </div>
                
                 ${this._isModel()?l`
                         <div>
-                            <div class="behaviourWrapper">
-                                <paper-dropdown-menu label="behaviour" id="behaviourMenu" ?disabled="${this.hasCustomBehaviour}">
-                                    <paper-listbox id="behaviour" slot="dropdown-content" attr-for-selected="value"
-                                                   selected="${this.behaviour}" @iron-select="${this._selectBehaviour}">
-                                        ${this.behaviours.map(e=>l`
-                                            <paper-item value="${e}">${e}</paper-item>
-                                        `)}
-                                    </paper-listbox>
-                                </paper-dropdown-menu>
-                                <span style="align-self:center;justify-self: center;"> ${$("odd.editor.model.link-with-or")} </span>
-                                <paper-input id="custombehaviour" label="" @input="${this._handleCustomBehaviour}" placeHolder="${$("odd.editor.model.custom-behaviour-placeholder")}"></paper-input>
-                                <span></span>
-                            </div>
-
-                                
-    
-                            <paper-input id="css" .value="${this.css}"
-                                placeholder="${$("odd.editor.model.css-class-placeholder")}"
-                                label="CSS Class"
-                                @change="${this._inputCss}"></paper-input>
-                            
-                            <div class="editor">
-                                <label>Template</label>
-                                <jinn-codemirror id="template"
-                                                 code="${this.template}"
-                                                 mode="${e}"
-                                                 placeholder="${$("odd.editor.model.template-placeholder")}"
-                                                 @update="${this._updateTemplate}">
-                                    <div slot="toolbar">
-                                        <paper-button data-mode="xml" data-command="selectElement" data-key="mod-e mod-s"
-                                            title="Select element around current cursor position">&lt;|></paper-button>
-                                        <paper-button data-mode="xml" data-command="encloseWith" data-key="mod-e mod-e"
-                                            title="Enclose selection in new element">&lt;...&gt;</paper-button>
-                                        <paper-button data-mode="xml" data-command="removeEnclosing" title="Remove enclosing tags" 
-                                            data-key="mod-e mod-r" class="sep">&lt;X></paper-button>
-                                        <paper-button data-mode="html" data-command="selectElement" data-key="mod-e mod-s"
-                                            title="Select element around current cursor position">&lt;|></paper-button>
-                                        <paper-button data-mode="html" data-command="encloseWith" data-key="mod-e mod-e"
-                                            title="Enclose selection in new element">&lt;...&gt;</paper-button>
-                                        <paper-button data-mode="html" data-command="removeEnclosing" title="Remove enclosing tags" 
-                                            data-key="mod-e mod-r" class="sep">&lt;X></paper-button>
-                                        <paper-button data-key="mod-e mod-p" data-command="snippet" data-params="[[\${_}]]" title="Insert template variable">[[...]]</paper-button>
-                                    </div>
-                                </jinn-codemirror>
-                            </div>
+                          <div class="behaviourWrapper">
+                            <paper-dropdown-menu
+                              label="behaviour"
+                              id="behaviourMenu"
+                              ?disabled="${this.hasCustomBehaviour}"
+                            >
+                              <paper-listbox
+                                id="behaviour"
+                                slot="dropdown-content"
+                                attr-for-selected="value"
+                                selected="${this.behaviour}"
+                                @iron-select="${this._selectBehaviour}"
+                              >
+                                ${this.behaviours.map(e=>l` <paper-item value="${e}">${e}</paper-item> `)}
+                              </paper-listbox>
+                            </paper-dropdown-menu>
+                            <span style="align-self:center;justify-self: center;">
+                              ${E("odd.editor.model.link-with-or")}
+                            </span>
+                            <paper-input
+                              id="custombehaviour"
+                              label=""
+                              @input="${this._handleCustomBehaviour}"
+                              placeHolder="${E("odd.editor.model.custom-behaviour-placeholder")}"
+                            ></paper-input>
+                            <span></span>
+                          </div>
+
+                          <paper-input
+                            id="css"
+                            .value="${this.css}"
+                            placeholder="${E("odd.editor.model.css-class-placeholder")}"
+                            label="CSS Class"
+                            @change="${this._inputCss}"
+                          ></paper-input>
+
+                          <div class="editor">
+                            <label>Template</label>
+                            <jinn-codemirror
+                              id="template"
+                              code="${this.template}"
+                              mode="${e}"
+                              placeholder="${E("odd.editor.model.template-placeholder")}"
+                              @update="${this._updateTemplate}"
+                            >
+                              <div slot="toolbar">
+                                <paper-button
+                                  data-mode="xml"
+                                  data-command="selectElement"
+                                  data-key="mod-e mod-s"
+                                  title="Select element around current cursor position"
+                                  >&lt;|></paper-button
+                                >
+                                <paper-button
+                                  data-mode="xml"
+                                  data-command="encloseWith"
+                                  data-key="mod-e mod-e"
+                                  title="Enclose selection in new element"
+                                  >&lt;...&gt;</paper-button
+                                >
+                                <paper-button
+                                  data-mode="xml"
+                                  data-command="removeEnclosing"
+                                  title="Remove enclosing tags"
+                                  data-key="mod-e mod-r"
+                                  class="sep"
+                                  >&lt;X></paper-button
+                                >
+                                <paper-button
+                                  data-mode="html"
+                                  data-command="selectElement"
+                                  data-key="mod-e mod-s"
+                                  title="Select element around current cursor position"
+                                  >&lt;|></paper-button
+                                >
+                                <paper-button
+                                  data-mode="html"
+                                  data-command="encloseWith"
+                                  data-key="mod-e mod-e"
+                                  title="Enclose selection in new element"
+                                  >&lt;...&gt;</paper-button
+                                >
+                                <paper-button
+                                  data-mode="html"
+                                  data-command="removeEnclosing"
+                                  title="Remove enclosing tags"
+                                  data-key="mod-e mod-r"
+                                  class="sep"
+                                  >&lt;X></paper-button
+                                >
+                                <paper-button
+                                  data-key="mod-e mod-p"
+                                  data-command="snippet"
+                                  data-params="[[\${_}]]"
+                                  title="Insert template variable"
+                                  >[[...]]</paper-button
+                                >
+                              </div>
+                            </jinn-codemirror>
+                          </div>
                         </div>
-        
+
                         <div class="parameters">
-                            <div class="group">
-                                <span class="title">Parameters</span>
-                                <paper-icon-button icon="add"
-                                                   @click="${this._addParameter}"></paper-icon-button>
-                            </div>
-                            ${H(this.parameters,e=>e.name,(e,t)=>l`
-                                <pb-odd-parameter-editor 
-                                       behaviour="${this.behaviour}"
-                                       name="${e.name}"
-                                       value="${e.value}"
-                                       ?set="${e.set}"
-                                       endpoint="${this.endpoint}"
-                                       apiVersion="${this.apiVersion}"
-                                       @parameter-remove="${e=>this._removeParam(e,t)}"
-                                       @parameter-changed="${e=>this._updateParam(e,t)}"
-                                       ></pb-odd-parameter-editor>
-                            `)}
+                          <div class="group">
+                            <span class="title">Parameters</span>
+                            <paper-icon-button
+                              icon="add"
+                              @click="${this._addParameter}"
+                            ></paper-icon-button>
+                          </div>
+                          ${H(this.parameters,e=>e.name,(e,t)=>l`
+                                <pb-odd-parameter-editor
+                                  behaviour="${this.behaviour}"
+                                  name="${e.name}"
+                                  value="${e.value}"
+                                  ?set="${e.set}"
+                                  endpoint="${this.endpoint}"
+                                  apiVersion="${this.apiVersion}"
+                                  @parameter-remove="${e=>this._removeParam(e,t)}"
+                                  @parameter-changed="${e=>this._updateParam(e,t)}"
+                                ></pb-odd-parameter-editor>
+                              `)}
                         </div>
 
                         <div class="renditions">
-                            <div class="group">
-                                <div>
-                                    <span class="title">Renditions</span>
-                                    <paper-icon-button icon="add" @click="${this._addRendition}"></paper-icon-button>
-                                </div>
-                                <div class="source">
-                                    <paper-checkbox ?checked="${this.sourcerend}" id="sourcerend">Use source rendition</paper-checkbox>
-                                </div>
+                          <div class="group">
+                            <div>
+                              <span class="title">Renditions</span>
+                              <paper-icon-button
+                                icon="add"
+                                @click="${this._addRendition}"
+                              ></paper-icon-button>
                             </div>
-
-                            ${H(this.renditions,e=>e.name,(e,t)=>l`
-                                <pb-odd-rendition-editor scope="${e.scope}"
-                                       css="${e.css}"
-                                       @remove-rendition="${e=>this._removeRendition(e,t)}"
-                                       @rendition-changed="${e=>this._updateRendition(e,t)}"
-                                       ></pb-odd-rendition-editor>
-                            `)}
-
+                            <div class="source">
+                              <paper-checkbox ?checked="${this.sourcerend}" id="sourcerend"
+                                >Use source rendition</paper-checkbox
+                              >
+                            </div>
+                          </div>
+
+                          ${H(this.renditions,e=>e.name,(e,t)=>l`
+                                <pb-odd-rendition-editor
+                                  scope="${e.scope}"
+                                  css="${e.css}"
+                                  @remove-rendition="${e=>this._removeRendition(e,t)}"
+                                  @rendition-changed="${e=>this._updateRendition(e,t)}"
+                                ></pb-odd-rendition-editor>
+                              `)}
                         </div>
-                    `:""}
+                      `:""}
             </iron-collapse>
             
             <div class="models">
                 ${H(this.model.models,(e,t)=>l`
-                <pb-odd-model-editor 
-                    behaviour="${e.behaviour||"inline"}"
-                    predicate="${e.predicate}"
-                    type="${e.type}"
-                    output="${e.output}"
-                    css="${e.css}"
-                    mode="${e.mode}"
-                    .model="${e}"
-                    .parameters="${e.parameters}"
-                    desc="${e.desc}"
-                    sourcerend="${e.sourcerend}"
-                    .renditions="${e.renditions}"
-                    .template="${e.template}"
-                    .show="${e.show}"
-                    endpoint="${this.endpoint}"
-                    apiVersion="${this.apiVersion}"
-                    @model-remove="${this._removeModel}"
-                    @model-move-down="${this._moveModelDown}"
-                    @model-move-up="${this._moveModelUp}"
-                    @model-changed="${this.handleModelChanged}"
-                    @click="${e=>this.setCurrentSelection(e,t)}"
-                    hasParent
+                    <pb-odd-model-editor
+                      behaviour="${e.behaviour||"inline"}"
+                      predicate="${e.predicate}"
+                      type="${e.type}"
+                      output="${e.output}"
+                      css="${e.css}"
+                      mode="${e.mode}"
+                      .model="${e}"
+                      .parameters="${e.parameters}"
+                      desc="${e.desc}"
+                      sourcerend="${e.sourcerend}"
+                      .renditions="${e.renditions}"
+                      .template="${e.template}"
+                      .show="${e.show}"
+                      endpoint="${this.endpoint}"
+                      apiVersion="${this.apiVersion}"
+                      @model-remove="${this._removeModel}"
+                      @model-move-down="${this._moveModelDown}"
+                      @model-move-up="${this._moveModelUp}"
+                      @model-changed="${this.handleModelChanged}"
+                      @click="${e=>this.setCurrentSelection(e,t)}"
+                      hasParent
                     ></pb-odd-model-editor>
-            `)}
+                  `)}
     
             </div> 
         </form> 
         <pb-message id="dialog"></pb-message>
-        `}firstUpdated(){super.firstUpdated(),this.hasCustomBehaviour=this.behaviours.indexOf(this.behaviour)<0,this.hasCustomBehaviour&&(this.shadowRoot.getElementById("custombehaviour").value=this.behaviour)}updated(e){e.has("show")&&this.show&&this.refreshEditors()}refreshEditors(){if(console.log("refreshEditors"),this._isGroupOrSequence())return console.log("asfdfa");const e=this.shadowRoot.querySelectorAll("pb-odd-model-editor");for(let t=0;t<e.length;t++)e[t].refreshEditors();const t=this.shadowRoot.querySelectorAll("pb-odd-rendition-editor");for(let e=0;e<t.length;e++)t[e].refreshEditor();const o=this.shadowRoot.querySelectorAll("pb-odd-parameter-editor");for(let e=0;e<o.length;e++)o[e].refreshEditor()}toggle(e){this.show=!this.show,this.toggleButtonIcon();const t=this.model,o=Object.assign({},t,{show:this.show});this.model=o,this.refreshEditors(),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:t,newModel:o}}))}toggleButtonIcon(){this.show?this.icon="expand-less":this.icon="expand-more"}_isModel(){return"model"===this.type}_isGroupOrSequence(){return"model"!==this.type}static _templateMode(e){switch(e){case"latex":return"latex";case"web":default:return"xml"}}_changeSelection(e){if(e.detail.target==this)return;e.preventDefault(),e.stopPropagation(),null!=this.currentSelection&&this.currentSelection.removeAttribute("currentselection");const t=e.detail.target;t.setAttribute("currentselection","true"),this.currentSelection=t}_requestRemoval(e){e.preventDefault(),this.dispatchEvent(new CustomEvent("model-remove"))}_moveDown(e){e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent("model-move-down",{composed:!0,bubbles:!0,detail:{model:this}}))}_moveUp(e){e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent("model-move-up"))}_addNested(e){const t={behaviour:"inline",css:"",desc:"",predicate:"",type:e instanceof Event?e.detail.item.getAttribute("value"):e,output:"",sourcerend:!1,models:[],mode:"",parameters:[],renditions:[],template:"",show:!0},o=this.model,i=Array.from(this.model.models);i.unshift(t),this.model=Object.assign({},o,{models:i});this.shadowRoot.querySelector("#modelType").select(""),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:o,newModel:this.model}}))}addModel(e){"model"===e.type?(this.model.models.unshift(e),this.requestUpdate()):console.error("only models can be added to modelSequence or modelGrp")}_removeModel(e){console.log("_removeModel ",e),e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);this.shadowRoot.getElementById("dialog").confirm(S("odd.editor.model.delete-model-label"),S("odd.editor.model.delete-model-message")).then(()=>{const e=this.model,t=Array.from(this.model.models);t.splice(o,1),this.model=Object.assign({},e,{models:t}),this.models=t,this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:e,newModel:this.model}}))},()=>null)}_moveModelDown(e){console.log("MODEL._moveModelDown ",e),e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);if(o===this.model.models.length)return;const i=this.model,s=Array.from(this.model.models);s.splice(o,1),s.splice(o+1,0,t),this.model=Object.assign({},i,{models:s});const r=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o+1];this._setCurrentSelection(o+1,r),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:i,newModel:this.model}})),this.requestUpdate()}_moveModelUp(e){e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);if(0===o)return;const i=this.model,s=Array.from(this.model.models);s.splice(o,1),s.splice(o-1,0,t),this.model=Object.assign({},i,{models:s});const r=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o-1];this._setCurrentSelection(o-1,r),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:i,newModel:this.model}}))}handleModelChanged(e){console.log("handleModelChanged ",e,this),e.stopPropagation();const t=this.model,o=this.model.models.indexOf(e.detail.oldModel),i=Array.from(this.model.models);i.splice(o,1,e.detail.newModel),this.model=Object.assign({},t,{models:i}),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:t,newModel:this.model}}))}setCurrentSelection(e,t){e.preventDefault(),e.stopPropagation(),this._setCurrentSelection(t,e.target)}_setCurrentSelection(e,t){const o=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[e];o&&(o.hasAttribute("currentselection")||(this.dispatchEvent(new CustomEvent("current-changed",{composed:!0,bubbles:!0,detail:{target:t}})),this.requestUpdate()))}_inputDesc(e){this.desc=e.composedPath()[0].value,this._fireModelChanged("desc",this.desc)}_selectOutput(e){this.output=e.composedPath()[0].selected,this._fireModelChanged("output",this.output)}_updatePredicate(){this.predicate=this.shadowRoot.getElementById("predicate").value,console.log("_updatePredicate ",this.predicate),this._fireModelChanged("predicate",this.predicate)}_selectBehaviour(e){this.behaviour=e.composedPath()[0].selected,this._fireModelChanged("behaviour",this.behaviour)}_inputCss(e){this.css=e.composedPath()[0].value,this._fireModelChanged("css",this.css)}_inputMode(e){this.mode=e.composedPath()[0].value,this._fireModelChanged("mode",this.mode)}_updateTemplate(e){this.template=this.shadowRoot.getElementById("template").content,this._fireModelChanged("template",this.template)}_addParameter(e){this.parameters.push({name:"",value:""}),this._fireModelChanged("parameters",this.parameters)}_updateParam(e,t){this.parameters[t].name=e.detail.name,this.parameters[t].value=e.detail.value,this.parameters[t].set=e.detail.set,this._fireModelChanged("parameters",this.parameters)}_removeParam(e,t){this.parameters.splice(t,1),this._fireModelChanged("parameters",this.parameters)}_addRendition(e){this.renditions.push({scope:"",css:""}),this._fireModelChanged("renditions",this.renditions)}_updateRendition(e,t){this.renditions[t].css=e.detail.css,this.renditions[t].scope=e.detail.scope,this._fireModelChanged("renditions",this.renditions)}_removeRendition(e,t){this.renditions.splice(t,1),this._fireModelChanged("renditions",this.renditions)}_fireModelChanged(e,t){const o=this.model;this.model=Object.assign({},this.model,{[e]:t}),console.log("model changed for %s: %o - %o",e,t,this.model),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:o,newModel:this.model}})),this.requestUpdate()}_copy(e){e.preventDefault(),e.stopPropagation(),console.log("odd-model.copy ",e),console.log("odd-model.copy data",this.model),this.dispatchEvent(new CustomEvent("odd-copy",{composed:!0,bubbles:!0,detail:{model:this.model}}))}_paste(e){console.log("model _paste ",e),this.dispatchEvent(new CustomEvent("odd-paste",{composed:!0,bubbles:!0,detail:{target:this}}))}_handleCustomBehaviour(e){this.behaviour=e.composedPath()[0].value,this._fireModelChanged("behaviour",this.behaviour),""===this.behaviour?(this.behaviour="inline",this.hasCustomBehaviour=!1):this.hasCustomBehaviour=!0,this.requestUpdate()}}customElements.define("pb-odd-model-editor",ie);class se extends a{static get styles(){return n`
-            :host {
-                display: block;
-                padding: 4px 10px;
-                height: auto;
-            }
-
-            h1, h2, h3, h4, h5, h6 {
-                font-family: "Oswald", Verdana, "Helvetica", sans-serif;
-                font-weight: 400 !important;
-            }
-            
+        `}firstUpdated(){super.firstUpdated(),this.hasCustomBehaviour=this.behaviours.indexOf(this.behaviour)<0,this.hasCustomBehaviour&&(this.shadowRoot.getElementById("custombehaviour").value=this.behaviour)}updated(e){e.has("show")&&this.show&&this.refreshEditors()}refreshEditors(){if(console.log("refreshEditors"),this._isGroupOrSequence())return console.log("asfdfa");const e=this.shadowRoot.querySelectorAll("pb-odd-model-editor");for(let t=0;t<e.length;t++)e[t].refreshEditors();const t=this.shadowRoot.querySelectorAll("pb-odd-rendition-editor");for(let e=0;e<t.length;e++)t[e].refreshEditor();const o=this.shadowRoot.querySelectorAll("pb-odd-parameter-editor");for(let e=0;e<o.length;e++)o[e].refreshEditor()}toggle(e){this.show=!this.show,this.toggleButtonIcon();const t=this.model,o=Object.assign(Object.assign({},t),{},{show:this.show});this.model=o,this.refreshEditors(),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:t,newModel:o}}))}toggleButtonIcon(){this.show?this.icon="expand-less":this.icon="expand-more"}_isModel(){return"model"===this.type}_isGroupOrSequence(){return"model"!==this.type}static _templateMode(e){switch(e){case"latex":return"latex";case"web":default:return"xml"}}_changeSelection(e){if(e.detail.target==this)return;e.preventDefault(),e.stopPropagation(),null!=this.currentSelection&&this.currentSelection.removeAttribute("currentselection");const t=e.detail.target;t.setAttribute("currentselection","true"),this.currentSelection=t}_requestRemoval(e){e.preventDefault(),this.dispatchEvent(new CustomEvent("model-remove"))}_moveDown(e){e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent("model-move-down",{composed:!0,bubbles:!0,detail:{model:this}}))}_moveUp(e){e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent("model-move-up"))}_addNested(e){const t={behaviour:"inline",css:"",desc:"",predicate:"",type:e instanceof Event?e.detail.item.getAttribute("value"):e,output:"",sourcerend:!1,models:[],mode:"",parameters:[],renditions:[],template:"",show:!0},o=this.model,i=Array.from(this.model.models);i.unshift(t),this.model=Object.assign(Object.assign({},o),{},{models:i});this.shadowRoot.querySelector("#modelType").select(""),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:o,newModel:this.model}}))}addModel(e){"model"===e.type?(this.model.models.unshift(e),this.requestUpdate()):console.error("only models can be added to modelSequence or modelGrp")}_removeModel(e){console.log("_removeModel ",e),e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);this.shadowRoot.getElementById("dialog").confirm(S("odd.editor.model.delete-model-label"),S("odd.editor.model.delete-model-message")).then(()=>{const e=this.model,t=Array.from(this.model.models);t.splice(o,1),this.model=Object.assign(Object.assign({},e),{},{models:t}),this.models=t,this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:e,newModel:this.model}}))},()=>null)}_moveModelDown(e){console.log("MODEL._moveModelDown ",e),e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);if(o===this.model.models.length)return;const i=this.model,s=Array.from(this.model.models);s.splice(o,1),s.splice(o+1,0,t),this.model=Object.assign(Object.assign({},i),{},{models:s});const r=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o+1];this._setCurrentSelection(o+1,r),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:i,newModel:this.model}})),this.requestUpdate()}_moveModelUp(e){e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);if(0===o)return;const i=this.model,s=Array.from(this.model.models);s.splice(o,1),s.splice(o-1,0,t),this.model=Object.assign(Object.assign({},i),{},{models:s});const r=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o-1];this._setCurrentSelection(o-1,r),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:i,newModel:this.model}}))}handleModelChanged(e){console.log("handleModelChanged ",e,this),e.stopPropagation();const t=this.model,o=this.model.models.indexOf(e.detail.oldModel),i=Array.from(this.model.models);i.splice(o,1,e.detail.newModel),this.model=Object.assign(Object.assign({},t),{},{models:i}),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:t,newModel:this.model}}))}setCurrentSelection(e,t){e.preventDefault(),e.stopPropagation(),this._setCurrentSelection(t,e.target)}_setCurrentSelection(e,t){const o=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[e];o&&(o.hasAttribute("currentselection")||(this.dispatchEvent(new CustomEvent("current-changed",{composed:!0,bubbles:!0,detail:{target:t}})),this.requestUpdate()))}_inputDesc(e){this.desc=e.composedPath()[0].value,this._fireModelChanged("desc",this.desc)}_selectOutput(e){this.output=e.composedPath()[0].selected,this._fireModelChanged("output",this.output)}_updatePredicate(){this.predicate=this.shadowRoot.getElementById("predicate").value,console.log("_updatePredicate ",this.predicate),this._fireModelChanged("predicate",this.predicate)}_selectBehaviour(e){this.behaviour=e.composedPath()[0].selected,this._fireModelChanged("behaviour",this.behaviour)}_inputCss(e){this.css=e.composedPath()[0].value,this._fireModelChanged("css",this.css)}_inputMode(e){this.mode=e.composedPath()[0].value,this._fireModelChanged("mode",this.mode)}_updateTemplate(e){this.template=this.shadowRoot.getElementById("template").content,this._fireModelChanged("template",this.template)}_addParameter(e){this.parameters.push({name:"",value:""}),this._fireModelChanged("parameters",this.parameters)}_updateParam(e,t){this.parameters[t].name=e.detail.name,this.parameters[t].value=e.detail.value,this.parameters[t].set=e.detail.set,this._fireModelChanged("parameters",this.parameters)}_removeParam(e,t){this.parameters.splice(t,1),this._fireModelChanged("parameters",this.parameters)}_addRendition(e){this.renditions.push({scope:"",css:""}),this._fireModelChanged("renditions",this.renditions)}_updateRendition(e,t){this.renditions[t].css=e.detail.css,this.renditions[t].scope=e.detail.scope,this._fireModelChanged("renditions",this.renditions)}_removeRendition(e,t){this.renditions.splice(t,1),this._fireModelChanged("renditions",this.renditions)}_fireModelChanged(e,t){const o=this.model;this.model=Object.assign(Object.assign({},this.model),{},{[e]:t}),console.log("model changed for %s: %o - %o",e,t,this.model),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:o,newModel:this.model}})),this.requestUpdate()}_copy(e){e.preventDefault(),e.stopPropagation(),console.log("odd-model.copy ",e),console.log("odd-model.copy data",this.model),this.dispatchEvent(new CustomEvent("odd-copy",{composed:!0,bubbles:!0,detail:{model:this.model}}))}_paste(e){console.log("model _paste ",e),this.dispatchEvent(new CustomEvent("odd-paste",{composed:!0,bubbles:!0,detail:{target:this}}))}_handleCustomBehaviour(e){this.behaviour=e.composedPath()[0].value,this._fireModelChanged("behaviour",this.behaviour),""===this.behaviour?(this.behaviour="inline",this.hasCustomBehaviour=!1):this.hasCustomBehaviour=!0,this.requestUpdate()}}customElements.define("pb-odd-model-editor",ie);class se extends a{static get styles(){return n`
+      :host {
+        display: block;
+        padding: 4px 10px;
+        height: auto;
+      }
 
-            input {
-                vertical-align: middle;
-            }
-
-            .ident {
-                display: inline-block;
-                font-size:26px;
-                position:relative;
-            }
-            .mode{
-                font-size:10px;
-                display:inline-block;
-                text-transform:uppercase;
-                border-radius:12px;
-                color:var(--paper-grey-700);
-                background:var(--paper-grey-300);
-                padding:2px 6px;
-                border:thin solid var(--paper-grey-500);
-                margin-left:6px;
-                position:absolute;
-                top:8px;
-            }
-            
-            :host([currentselection]){
-                    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
-                    0 1px 18px 0 rgba(0, 0, 0, 0.12),
-                    0 3px 5px -1px rgba(0, 0, 0, 0.4);
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-family: 'Oswald', Verdana, 'Helvetica', sans-serif;
+        font-weight: 400 !important;
+      }
 
-            }
+      input {
+        vertical-align: middle;
+      }
 
-            :host([currentSelection]) > h3, :host([currentSelection]) > header{
-                border-left:thin solid var(--paper-blue-500);
-            }
-            
+      .ident {
+        display: inline-block;
+        font-size: 26px;
+        position: relative;
+      }
+      .mode {
+        font-size: 10px;
+        display: inline-block;
+        text-transform: uppercase;
+        border-radius: 12px;
+        color: var(--paper-grey-700);
+        background: var(--paper-grey-300);
+        padding: 2px 6px;
+        border: thin solid var(--paper-grey-500);
+        margin-left: 6px;
+        position: absolute;
+        top: 8px;
+      }
 
-            h3{
-                display:grid;
-                grid-template-columns:260px auto 160px;
-                align-items:center;
-            }
-            h3 .controls{
-                text-align: right;
-                margin-right: 10px;
-            }
-
-            h3 .ident{
-                align-self: center;
-             }
-
-            paper-menu-button paper-icon-button{
-                margin-left:-10px;
-            }
-
-            /*todo: this does not take effect*/
-            iron-collapse.models{
-                --iron-collapse-transition-duration:0.4s;
-            }
-            
-            .models{
-                padding:10px;
-            }
-        `}static get properties(){return{ident:{type:String},mode:{type:String},models:{type:Array},endpoint:{type:String},apiVersion:{type:String}}}constructor(){super(),this.ident="",this.mode="",this.models=[],this.icon="expand-more"}render(){return l`   
-        <h3>
-            <span class="ident">${this.ident}<span class="mode">mode: ${this.mode}</span></span>
-            <span class="spacer"></span>
-
-            <span class="controls">
-                <paper-icon-button @click="${this._remove}" icon="delete"></paper-icon-button>
-                <paper-icon-button @click="${this._paste}" icon="content-paste"></paper-icon-button>
-                <paper-menu-button horizontal-align="right">
-                    <paper-icon-button icon="add" slot="dropdown-trigger"></paper-icon-button>
-                    <paper-listbox id="addModel" slot="dropdown-content" @iron-select="${this._addModel}"
-                                   attr-for-selected="value">
-                        <paper-item value="model">model</paper-item>
-                        <paper-item value="modelSequence">modelSequence</paper-item>
-                        <paper-item value="modelGrp">modelGrp</paper-item>
-                    </paper-listbox>
-                </paper-menu-button>
+      :host([currentselection]) {
+        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
+          0 3px 5px -1px rgba(0, 0, 0, 0.4);
+      }
 
+      :host([currentSelection]) > h3,
+      :host([currentSelection]) > header {
+        border-left: thin solid var(--paper-blue-500);
+      }
 
-            </span>
-        </h3>
+      h3 {
+        display: grid;
+        grid-template-columns: 260px auto 160px;
+        align-items: center;
+      }
+      h3 .controls {
+        text-align: right;
+        margin-right: 10px;
+      }
+
+      h3 .ident {
+        align-self: center;
+      }
 
-        <div>
-            ${H(this.models,(e,t)=>l`
+      paper-menu-button paper-icon-button {
+        margin-left: -10px;
+      }
+
+      /*todo: this does not take effect*/
+      iron-collapse.models {
+        --iron-collapse-transition-duration: 0.4s;
+      }
+
+      .models {
+        padding: 10px;
+      }
+    `}static get properties(){return{ident:{type:String},mode:{type:String},models:{type:Array},endpoint:{type:String},apiVersion:{type:String}}}constructor(){super(),this.ident="",this.mode="",this.models=[],this.icon="expand-more"}render(){return l`
+      <h3>
+        <span class="ident">${this.ident}<span class="mode">mode: ${this.mode}</span></span>
+        <span class="spacer"></span>
+
+        <span class="controls">
+          <paper-icon-button @click="${this._remove}" icon="delete"></paper-icon-button>
+          <paper-icon-button @click="${this._paste}" icon="content-paste"></paper-icon-button>
+          <paper-menu-button horizontal-align="right">
+            <paper-icon-button icon="add" slot="dropdown-trigger"></paper-icon-button>
+            <paper-listbox
+              id="addModel"
+              slot="dropdown-content"
+              @iron-select="${this._addModel}"
+              attr-for-selected="value"
+            >
+              <paper-item value="model">model</paper-item>
+              <paper-item value="modelSequence">modelSequence</paper-item>
+              <paper-item value="modelGrp">modelGrp</paper-item>
+            </paper-listbox>
+          </paper-menu-button>
+        </span>
+      </h3>
+
+      <div>
+        ${H(this.models,(e,t)=>l`
             <pb-odd-model-editor
-                behaviour="${e.behaviour||""}"
-                predicate="${e.predicate}"
-                type="${e.type}"
-                output="${e.output}"
-                css="${e.css}"
-                mode="${e.mode}"
-                .model="${e}"
-                .parameters="${e.parameters}"
-                desc="${e.desc}"
-                .sourcerend="${e.sourcerend}"
-                .renditions="${e.renditions}"
-                .template="${e.template}"
-                .show="${e.show}"
-                .endpoint="${this.endpoint}"
-                .apiVersion="${this.apiVersion}"
-                @model-remove="${this._removeModel}"
-                @model-move-down="${this._moveModelDown}"
-                @model-move-up="${this._moveModelUp}"
-                @model-changed="${this.handleModelChanged}"
-                @click="${e=>this.setCurrentSelection(e,t)}"
-                ></pb-odd-model-editor>
-            `)}
-        </div>
-        <pb-message id="dialog"></pb-message>
-        `}addModel(e){this.models.unshift(e),this.requestUpdate()}_addModel(e){console.log("ELEMENTSPEC._addModel ",e);const t=this.shadowRoot.getElementById("addModel"),o={behaviour:"inline",css:"",mode:"",predicate:"",desc:"",type:t.selected,output:"",template:"",sourcerend:!1,models:[],parameters:[],renditions:[],show:!0},i=Array.from(this.models);i.unshift(o),this.models=i,this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}})),t.selected="",this.requestUpdate()}_remove(e){this.dispatchEvent(new CustomEvent("element-spec-removed",{composed:!0,bubbles:!0,detail:{target:this}}))}_paste(e){console.log("_paste ",e),this.dispatchEvent(new CustomEvent("odd-paste",{composed:!0,bubbles:!0,detail:{target:this}}))}setCurrentSelection(e,t){e.preventDefault(),e.stopPropagation(),this._setCurrentSelection(t,e.target)}_setCurrentSelection(e,t){const o=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[e];o&&(o.hasAttribute("currentselection")||(this.dispatchEvent(new CustomEvent("current-changed",{composed:!0,bubbles:!0,detail:{target:t}})),this.requestUpdate()))}_removeModel(e){console.log("_removeModel ",e),e.stopPropagation();const{model:t}=e.target,o=this.models.indexOf(t);this.shadowRoot.getElementById("dialog").confirm(S("odd.editor.model.delete-model-label"),S("odd.editor.model.delete-model-message")).then(()=>{const e=Array.from(this.models);e.splice(o,1),this.models=e,this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}}))},()=>null)}_moveModelDown(e){console.log("ELEMENTSPEC._moveModelDown ",e),e.stopPropagation();const{model:t}=e.target,o=this.models.indexOf(t);if(o===this.models.length)return;const i=Array.from(this.models);i.splice(o,1),i.splice(o+1,0,t),this.models=i;const s=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o+1];s&&(this._setCurrentSelection(o+1,s),this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}})))}_moveModelUp(e){e.stopPropagation();const{model:t}=e.target,o=this.models.indexOf(t);if(0===o)return;const i=Array.from(this.models);i.splice(o,1),i.splice(o-1,0,t),this.models=i;const s=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o-1];this._setCurrentSelection(o-1,s),this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}}))}handleModelChanged(e){e.stopPropagation();const t=this.models.indexOf(e.detail.oldModel),o=Array.from(this.models);o.splice(t,1,e.detail.newModel),this.models=o,this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}})),this.requestUpdate()}}customElements.define("pb-odd-elementspec-editor",se);class re extends(b(p(a))){static get styles(){return n`
-            :host {
-                display: flex;
-                /*margin: 30px 20px;*/
-                margin:0;
-                padding:0;
-                height:auto;
-            }
-            
-            #layout {
-                width: 100%;
-                display: grid;
-                grid-template-columns: auto 1fr;
-                grid-template-rows: auto 1fr;
-            }
-
-            #drawer {
-                grid-column: 1 / 1;
-                min-width: 320px;
-            }
-
-            #navlist {
-                grid-column: 1 / 1;
-                grid-row: 2 / 2;
-                overflow: auto;
-                height: 100%;
-            }
-
-            .specs {
-                grid-column: 2 / 2;
-                grid-row: 1 / span 2;
-                overflow: auto;
-            }
-
-            section{
-                padding:20px;
-            }
-
-            h3, h4 {
-                font-family: var(--pb-heading-font-family);
-                font-weight: var(--pb-heading-font-weight);
-                line-height: var(--pb-heading-line-height);
-            }
-
-            /* ported over but not checked yet */
-
-            .specs {
-                padding:6px;
-            }
-
-            .metadata {
-                display: block;
-            }
-
-            .metadata div {
-                padding: 0 16px 16px;
-            }
-
-            .metadata paper-input {
-                margin-bottom: 10px;
-            }
-
-            .metadata .extCssEdit {
-                display: flex;
-                align-items: center;
-                padding: 0;
-            }
-            .metadata .extCssEdit paper-input {
-                flex: 2;
-            }
-            .metadata .extCssEdit pb-edit-xml {
-                width: 40px;
-            }
-
-            #jump-to {
-                margin-top: 1em;
-            }
-
-            odd-model {
-                border-bottom: 1px solid #E0E0E0;
-            }
-            odd-model h4 {
-                margin-top: 15px;
-                padding-top: 5px;
-                border-top: 1px solid #E0E0E0;
-            }
-            .renditions {
-                margin-top: 10px;
-            }
-            .icons{
-                display:inline-block;
-                white-space: nowrap;
-            }
-
-            /* todo: this doesn't work - should refactor to have the complete trigger exposed here (move out of pb-collapse) */
-            pb-collapse#meta ::slotted(.collapse-trigger){
-                /*height:56px;*/
-            }
-
-            iron-collapse {
-                --iron-collapse-transition-duration:0.8s;
-            }
-            
-            pb-message#errorMsg{
-                background: var(--paper-red-500);
-                color:white;
-            }
-            .card-content{
-                height:100%;
-                overflow:auto;
-            }
-            
-            paper-tab{
-                width:100px;
-            }
-            
-            .editingView {
-                width:100%;
-            }
-            
-            vaadin-tabs{
-                margin-top:10px;
-            }
-            
-            vaadin-tab{
-                background:var(--paper-grey-200);
-                padding:0 6px;
-                border:thin solid var(--paper-grey-300);
-                border-bottom:none;
-            }
-            vaadin-tab[selected]{
-                background:white;
-                border-top-right-radius:20px;
-                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-                    0 1px 5px 0 rgba(0, 0, 0, 0.12),
-                    0 3px 1px -2px rgba(0, 0, 0, 0.2);
-
-            }
-
-        `}static get properties(){return Object.assign(Object.assign({},super.properties),{},{ident:{type:String},mode:{type:String},models:{type:Array},odd:{type:String,reflect:!0},elementSpecs:{type:Array},source:{type:String},title:{type:String},titleShort:{type:String,reflect:!0,attribute:"title-short"},description:{type:String},namespace:{type:String},rootPath:{type:String,attribute:"root-path"},loading:{type:Boolean},indentString:{type:String},outputPrefix:{type:String,attribute:"output-prefix"},outputRoot:{type:String,attribute:"output-root"},currentSelection:{type:Object},useNamespace:{type:Boolean},loggedIn:{type:Boolean},tabs:{type:Array},tabIndex:{type:Number,reflect:!0}})}constructor(){super(),this.ident="",this.mode="",this.models=()=>[],this.odd="",this.elementSpecs=[],this.source="",this.title="",this.titleShort="",this.description="",this.namespace="",this.rootPath="",this.loading=!1,this.indentString="    ",this.outputPrefix="",this.outputRoot="",this.currentSelection={},this.useNamespace=!1,this.loggedIn=!0,this.tabs=[],this.tabIndex=void 0,this.selectedNavIndex=0,this.cssFile="",this.hotkeys={save:"ctrl+shift+s,command+shift+s"},this._hasChanges=!1}render(){return l`
-        <iron-ajax id="loadContent"
-                handle-as="json" content-type="application/x-www-form-urlencoded"
-                with-credentials
-                method="GET"></iron-ajax>
-                
-        <iron-ajax id="saveOdd"
-                handle-as="json"
-                with-credentials></iron-ajax>
-
-        <div id="layout">
-            <div id="drawer">
-                    <slot id="slot"></slot>
-                    <h3>
-                        <span>${this.odd}</span>
-
-                        <span class="icons">
-                            <pb-edit-xml id="editSource"><paper-icon-button icon="code" title="${$("odd.editor.odd-source")}"></paper-icon-button></pb-edit-xml>
-                            <paper-icon-button @click="${()=>this.save(!0)}" icon="icons:cloud-download" title="${$(k?"odd.editor.save-as":"odd.editor.download")}"></paper-icon-button>
-                            <paper-icon-button @click="${this._reload}" icon="refresh" title="${$("odd.editor.reload")}"></paper-icon-button>
-                            <paper-icon-button @click="${()=>this.save(!1)}" icon="save" title="${$("odd.editor.save")} ${this.display("save")}" 
-                                ?disabled="${!this.loggedIn}"></paper-icon-button>
-                        </span>
-                    </h3>
-                    <div id="new-element" class="input-group">
-                        <paper-input id="identNew" label="${$("odd.editor.add-element")}" always-float-label="always-float-label">
-                            <paper-icon-button slot="suffix" @click="${this.addElementSpec}" icon="add" tabindex="-1"></paper-icon-button>
-                        </paper-input>
-                    </div>
-
-                    <div id="jump-to">
-                        <paper-autocomplete id="jumpTo" label="${$("odd.editor.jump-to")}" always-float-label="always-float-label"></paper-autocomplete>
-                    </div>
-                    
-                    <h3>${$("odd.editor.specs")}</h3>
-            </div>
-            <div id="navlist">
-                ${H(this.elementSpecs,e=>e.ident,(e,t)=>l`
-                    <paper-item id="es_${e.ident}"
-                        index="${t}"
-                        @click="${e=>this._openElementSpec(e,t)}">${e.ident}</paper-item>
-                `)}
-            </div>
-            <section class="specs" id="specs">
-    
-                <paper-card class="metadata">
-                    <pb-collapse id="meta">
-                        <h4 slot="collapse-trigger" class="panel-title">
-                            ${this._computedTitle()}
-                        </h4>
-                        <div slot="collapse-content">
-                            <paper-input id="title" name="title" value="${this.title}" label="${$("odd.editor.title")}"
-                                         placeholder="[${$("odd.editor.title-placeholder")}]"
-                                         @change="${this._inputTitle}"></paper-input>
-                            <paper-input id="titleShort" name="short-title" .value="${this.titleShort}" label="${$("odd.editor.title-short")}"
-                                         placeholder="[${$("odd.editor.title-short-placeholder")}]"
-                                         @change="${e=>this.titleShort=e.composedPath()[0].value}"></paper-input>
-                            <paper-input id="description" name="description" .value="${W(this.description)}" label="${$("odd.editor.description-label")}"
-                                      placeholder="[${$("odd.editor.description-placeholder")}]"
-                                      @change="${e=>this.description=e.composedPath()[0].value}"></paper-input>
-                            <paper-input id="source" name="source" ?value="${this.source}" label="${$("odd.editor.source-label")}"
-                                         placeholder="[${$("odd.editor.source-placeholder")}]"
-                                         @change="${e=>this.source=e.composedPath()[0].value}"></paper-input>
-                            <paper-checkbox id="useNamespace" @change="${this.setUseNamespace}">${$("odd.editor.use-namespace")}</paper-checkbox>
-                            <paper-input id="namespace" name="namespace" value="${this.namespace}" label="Namespace" ?disabled="${!this.useNamespace}"
-                                         placeholder="[${$("odd.editor.namespace-placeholder")}]"
-                                         @change="${e=>this.namespace=e.composedPath()[0].value}"></paper-input>
-                            <div class="extCssEdit">
-                                <paper-input name="cssFile" value="${this.cssFile}" label="External CSS File"
-                                    placeholder="[External CSS file with additional class definitions]"
-                                    @change="${this._cssFileChanged}"></paper-input>
-                                <pb-edit-xml id="editCSS"><paper-icon-button icon="create" title="${$("odd.editor.css-source")}"></paper-icon-button></pb-edit-xml>
-                            </div>
-                        </div>
-                    </pb-collapse>
-                </paper-card>
-    
-                <!-- todo: import elementspec to make it function  -->
-    
-                <div class="editingView">
-                    <vaadin-tabs id="tabs" selected="${this.tabIndex}">
-                        ${H(this.tabs,e=>e.id,(e,t)=>l`
-                            <vaadin-tab name="${e}" @click="${t=>this._selectTab(t,e)}"><span style="padding-right:20px;">${e}</span><paper-icon-button icon="close" @click="${e=>this._closeTabHandler(e,t)}"></paper-icon-button></vaadin-tab>
-                        `)}                    
-                    </vaadin-tabs>
-                                       
-                    <div id="currentElement"></div>
-                </div>
-            </section>
-            
-        </div>
+              behaviour="${e.behaviour||""}"
+              predicate="${e.predicate}"
+              type="${e.type}"
+              output="${e.output}"
+              css="${e.css}"
+              mode="${e.mode}"
+              .model="${e}"
+              .parameters="${e.parameters}"
+              desc="${e.desc}"
+              .sourcerend="${e.sourcerend}"
+              .renditions="${e.renditions}"
+              .template="${e.template}"
+              .show="${e.show}"
+              .endpoint="${this.endpoint}"
+              .apiVersion="${this.apiVersion}"
+              @model-remove="${this._removeModel}"
+              @model-move-down="${this._moveModelDown}"
+              @model-move-up="${this._moveModelUp}"
+              @model-changed="${this.handleModelChanged}"
+              @click="${e=>this.setCurrentSelection(e,t)}"
+            ></pb-odd-model-editor>
+          `)}
+      </div>
+      <pb-message id="dialog"></pb-message>
+    `}addModel(e){this.models.unshift(e),this.requestUpdate()}_addModel(e){console.log("ELEMENTSPEC._addModel ",e);const t=this.shadowRoot.getElementById("addModel"),o={behaviour:"inline",css:"",mode:"",predicate:"",desc:"",type:t.selected,output:"",template:"",sourcerend:!1,models:[],parameters:[],renditions:[],show:!0},i=Array.from(this.models);i.unshift(o),this.models=i,this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}})),t.selected="",this.requestUpdate()}_remove(e){this.dispatchEvent(new CustomEvent("element-spec-removed",{composed:!0,bubbles:!0,detail:{target:this}}))}_paste(e){console.log("_paste ",e),this.dispatchEvent(new CustomEvent("odd-paste",{composed:!0,bubbles:!0,detail:{target:this}}))}setCurrentSelection(e,t){e.preventDefault(),e.stopPropagation(),this._setCurrentSelection(t,e.target)}_setCurrentSelection(e,t){const o=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[e];o&&(o.hasAttribute("currentselection")||(this.dispatchEvent(new CustomEvent("current-changed",{composed:!0,bubbles:!0,detail:{target:t}})),this.requestUpdate()))}_removeModel(e){console.log("_removeModel ",e),e.stopPropagation();const{model:t}=e.target,o=this.models.indexOf(t);this.shadowRoot.getElementById("dialog").confirm(S("odd.editor.model.delete-model-label"),S("odd.editor.model.delete-model-message")).then(()=>{const e=Array.from(this.models);e.splice(o,1),this.models=e,this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}}))},()=>null)}_moveModelDown(e){console.log("ELEMENTSPEC._moveModelDown ",e),e.stopPropagation();const{model:t}=e.target,o=this.models.indexOf(t);if(o===this.models.length)return;const i=Array.from(this.models);i.splice(o,1),i.splice(o+1,0,t),this.models=i;const s=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o+1];s&&(this._setCurrentSelection(o+1,s),this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}})))}_moveModelUp(e){e.stopPropagation();const{model:t}=e.target,o=this.models.indexOf(t);if(0===o)return;const i=Array.from(this.models);i.splice(o,1),i.splice(o-1,0,t),this.models=i;const s=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o-1];this._setCurrentSelection(o-1,s),this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}}))}handleModelChanged(e){e.stopPropagation();const t=this.models.indexOf(e.detail.oldModel),o=Array.from(this.models);o.splice(t,1,e.detail.newModel),this.models=o,this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}})),this.requestUpdate()}}customElements.define("pb-odd-elementspec-editor",se);class re extends(b(p(a))){static get styles(){return n`
+      :host {
+        display: flex;
+        /*margin: 30px 20px;*/
+        margin: 0;
+        padding: 0;
+        height: auto;
+      }
+
+      #layout {
+        width: 100%;
+        display: grid;
+        grid-template-columns: auto 1fr;
+        grid-template-rows: auto 1fr;
+      }
+
+      #drawer {
+        grid-column: 1 / 1;
+        min-width: 320px;
+      }
+
+      #navlist {
+        grid-column: 1 / 1;
+        grid-row: 2 / 2;
+        overflow: auto;
+        height: 100%;
+      }
+
+      .specs {
+        grid-column: 2 / 2;
+        grid-row: 1 / span 2;
+        overflow: auto;
+      }
+
+      section {
+        padding: 20px;
+      }
+
+      h3,
+      h4 {
+        font-family: var(--pb-heading-font-family);
+        font-weight: var(--pb-heading-font-weight);
+        line-height: var(--pb-heading-line-height);
+      }
+
+      /* ported over but not checked yet */
+
+      .specs {
+        padding: 6px;
+      }
+
+      .metadata {
+        display: block;
+      }
+
+      .metadata div {
+        padding: 0 16px 16px;
+      }
+
+      .metadata paper-input {
+        margin-bottom: 10px;
+      }
+
+      .metadata .extCssEdit {
+        display: flex;
+        align-items: center;
+        padding: 0;
+      }
+      .metadata .extCssEdit paper-input {
+        flex: 2;
+      }
+      .metadata .extCssEdit pb-edit-xml {
+        width: 40px;
+      }
+
+      #jump-to {
+        margin-top: 1em;
+      }
+
+      odd-model {
+        border-bottom: 1px solid #e0e0e0;
+      }
+      odd-model h4 {
+        margin-top: 15px;
+        padding-top: 5px;
+        border-top: 1px solid #e0e0e0;
+      }
+      .renditions {
+        margin-top: 10px;
+      }
+      .icons {
+        display: inline-block;
+        white-space: nowrap;
+      }
 
+      /* todo: this doesn't work - should refactor to have the complete trigger exposed here (move out of pb-collapse) */
+      pb-collapse#meta ::slotted(.collapse-trigger) {
+        /*height:56px;*/
+      }
+
+      iron-collapse {
+        --iron-collapse-transition-duration: 0.8s;
+      }
 
-        <pb-message id="dialog" hidden></pb-message>
-        <pb-message id="errorMsg"></pb-message>
-        `}firstUpdated(e){this.shadowRoot.getElementById("useNamespace").checked=this.useNamespace,this.jumpCtrl=this.shadowRoot.getElementById("jumpTo"),this.jumpCtrl.addEventListener("autocomplete-selected",this.jumpTo.bind(this));const t=this.querySelector("odd-selector");this.odd&&t&&(t.selected=this.odd,t.addEventListener("odd-selected",e=>{confirm("Any unsaved changes will be lost. Continue?")&&(this.odd=e.detail.odd,window.history.pushState({},"","?odd="+this.odd)),t.selected=this.odd})),this.addEventListener("current-changed",this._changeSelection),this.addEventListener("odd-copy",e=>this._copy(e)),this.addEventListener("odd-paste",e=>this._paste(e)),this.addEventListener("element-spec-removed",this.removeElementSpec.bind(this)),window.addEventListener("beforeunload",()=>"Any unsaved changes will be lost. Continue?"),this.subscribeTo("pb-login",e=>{this.loggedIn=null!=e.detail.user}),this.focus(),this.loadContent=this.shadowRoot.getElementById("loadContent"),this.rootPath=this.getAttribute("root-path"),c("pb-page-ready",()=>{this.load(),this.inited=!0}),this.registerHotkey("save",()=>this.save(!1))}setUseNamespace(){this.useNamespace=this.shadowRoot.getElementById("useNamespace").checked}async load(){if(this.loading)return;if(this.loading=!0,""===this.rootPath||""===this.odd)return;this.elementSpecs=[],document.dispatchEvent(new CustomEvent("pb-start-update"));this.shadowRoot.getElementById("editSource").setPath(this.rootPath+"/"+this.odd);const e={odd:this.odd,root:this.rootPath};this.loadContent.params=e,this.loadContent.url=`${this.getEndpoint()}/${this.lessThanApiVersion("1.0.0")?"modules/editor.xql":"api/odd/"+this.odd}`;const t=this.loadContent.generateRequest();this._hasChanges=!1,t.completes.then(e=>this.handleOdd(e))}handleOdd(e){const t=e.response;if(this.loggedIn=t.canWrite,this.source=t.source,this.title=t.title,this.titleShort=t.titleShort,this.description=t.description,this.cssFile=null==t.cssFile?"":t.cssFile,this.namespace=null!=t.namespace?t.namespace:"",this.useNamespace=null!=t.namespace,this.cssFile){this.shadowRoot.getElementById("editCSS").setPath(this.rootPath+"/"+this.cssFile)}this.elementSpecs=t.elementSpecs.map(e=>this.mapElementSpec(e)),this._updateAutoComplete(),this.requestUpdate(),this.loading=!1,document.dispatchEvent(new CustomEvent("pb-end-update")),document.title=this.titleShort||this.title}_updateAutoComplete(){this.shadowRoot.getElementById("jumpTo").source=this.elementSpecs.map(this._specMapper)}_cssFileChanged(e){if(this.cssFile=e.composedPath()[0].value,this.cssFile){this.shadowRoot.getElementById("editCSS").setPath(this.rootPath+"/"+this.cssFile)}}_navlistActiveChanged(e,t){this.selectedNavIndex=t,this.requestUpdate()}_returnTabs(){return this.tabs}_selectTab(e,t){const o=this.elementSpecs.find(e=>e.ident===t);this._updateElementspec(o)}_openElementSpec(e,t){console.log("_openElementSpec ",e,t);const o=this.elementSpecs[t];this._updateElementspec(o);const i=o.ident;if(this.tabs.indexOf(i)>=0)return this.tabIndex=this.tabs.indexOf(i),void this.requestUpdate();this.tabs.push(i),this.tabIndex=this.tabs.length-1,this.requestUpdate()}_updateElementspec(e){const t=this.shadowRoot.getElementById("currentElement");t.innerHTML="";const o=new se;o.addEventListener("element-spec-changed",this.handleElementSpecChanged.bind(this)),o.ident=e.ident,o.models=e.models,o.mode=e.mode,o.endpoint=this._endpoint,o.apiVersion=this._apiVersion,o.hotkeys=this.hotkeys,t.appendChild(o)}_closeTabHandler(e,t){return console.log("_closeTabHandler ",t),e.preventDefault(),e.stopPropagation(),this._closeTab(t),!1}_closeTab(e){if(this.tabs.splice(e,1),0===this.tabs.length)this.shadowRoot.getElementById("currentElement").innerHTML="",this.tabIndex=0,this.tabs=[];else if(this.tabIndex>0&&this.tabIndex>=e){this.tabIndex-=1;const e=this.tabs[this.tabIndex];this._selectTab(null,e)}}attributeChangedCallback(e,t,o){super.attributeChangedCallback(e,t,o),"odd"==e&&t!==o&&this.inited&&this.load()}static get replaceCharMap(){return{'"':"&quot;","&":"&amp;","<":"&lt;",">":"&gt;"}}static get replaceCharRegexp(){return/"|&|<|>/g}static replaceChars(e){return re.replaceCharMap[e]}jumpTo(e){const t="#es_"+this.shadowRoot.getElementById("jumpTo").text,o=this.shadowRoot.querySelector(t);o&&(this.jumpCtrl.clear(),o.click())}_computedTitle(){return this.odd?this.title||this.titleShort||this.odd||"Loading ...":""}_copy(e){this.clipboard=e.detail.model;const t=JSON.parse(JSON.stringify(e.detail.model));this.clipboard=t}_paste(e){if(console.log("_paste ",e),console.log("_paste clipboard",this.clipboard),this.clipboard=={}||null==this.clipboard)return;const t=e.detail.target;t.addModel(this.clipboard),t.render()}_specMapper(e){return{text:e.ident,value:e.ident}}_specObserver(e){const t=this.elementSpecs.map(this._specMapper);this.jumpCtrl.source=t}mapElementSpec(e){return Object.assign({},e,{models:e.models.map(e=>this.addShowToModel(e))})}addShowToModel(e){if(e.models){const t=e.models.map(e=>this.addShowToModel(e));return Object.assign({},e,{models:t,show:!1})}return Object.assign({},e,{show:!1})}addElementSpec(e){const t=this.shadowRoot.getElementById("identNew").value;if(!t||0===t.length)return;if(this.elementSpecs.find(e=>e.ident===t)){console.log("<pb-odd-editor> element spec to be added already exists: %s",t);const e="#es_"+t,o=this.shadowRoot.querySelector(e);if(!o)return;return void o.click()}const o={action:"find",odd:this.odd,root:this.rootPath,ident:t},i={root:this.rootPath,ident:t},s=this.lessThanApiVersion("1.0.0")?o:i;this.loadContent.params=s,this.loadContent.url=`${this.getEndpoint()}/${this.lessThanApiVersion("1.0.0")?"modules/editor.xql":"api/odd/"+this.odd}`,this.loadContent.generateRequest().completes.then(this._handleElementSpecResponse.bind(this))}_handleElementSpecResponse(e){const t=this.shadowRoot.getElementById("identNew"),o=e.response,i=t.value,s={ident:i,mode:"not-found"===o.status?"add":"change",models:o.models||[]};this.elementSpecs.unshift(s),t.value="",this.tabs.push(i),this.tabIndex=this.tabs.length-1,this.elementSpecs.sort((e,t)=>e.ident.localeCompare(t.ident)),this.requestUpdate().then(()=>{const e=this.shadowRoot.querySelectorAll("paper-item"),t=this.elementSpecs.indexOf(s);this._updateAutoComplete(),e[t].click(),e[t].focus()})}removeElementSpec(e){const t=e.detail.target.ident;this.shadowRoot.getElementById("dialog").confirm(S("browse.delete"),S("odd.editor.delete-spec",{ident:t})).then(()=>{const e=this.elementSpecs.findIndex(e=>e.ident===t);this.elementSpecs.splice(e,1),this.requestUpdate();const o=this.shadowRoot.querySelector("vaadin-tab[selected]").getAttribute("name"),i=this.tabs.indexOf(o);this._closeTab(i)},()=>null)}serializeOdd(){const e=this.useNamespace?` ns="${this.namespace}"`:"",t=this.source?` source="${this.source}"`:"",o=this.description?` <desc>${this.description}</desc>`:"";return`<schemaSpec xmlns="http://www.tei-c.org/ns/1.0" xmlns:pb="http://teipublisher.com/1.0"${e}${t}>\n${`${this.indentString}<title>${this.title}${o}</title>\n`}${this.titleShort?`${this.indentString}<title type="short">${this.titleShort}</title>\n`:""}${this.cssFile?`${this.indentString}<rendition source="${this.cssFile}"/>\n`:""}\n${this.elementSpecs.map(e=>this.serializeElementSpec(this.indentString,e)).join("")}</schemaSpec>\n`}serializeElementSpec(e,t){const o=t.mode?` mode="${t.mode}"`:"",i=e+this.indentString,s=t.models.map(e=>this.serializeModel(i,e)).join("");return`${e}<elementSpec ident="${t.ident}"${o}>\n${s}${e}</elementSpec>\n`}serializeModel(e,t){if("model"===t.type&&!t.behaviour)return"";const o=e+this.indentString,i=[this.serializeAttribute("output",t.output),this.serializeAttribute("predicate",t.predicate),"model"===t.type?this.serializeAttribute("behaviour",t.behaviour):"",this.serializeAttribute("cssClass",t.css),this.serializeAttribute("useSourceRendition",t.sourcerend),this.serializeAttribute("pb:mode",t.mode)].join(""),s=t.desc?o+"<desc>"+t.desc+"</desc>\n":"",r=t.models.map(e=>this.serializeModel(o,e)).join(""),a=t.parameters.map(e=>this.serializeParameter(o,e)).join(""),n=t.renditions.map(e=>this.serializeRendition(o,e)).join(""),l=`${s}${r}${a}${re.serializeTemplate(o,t.template)}${n}`,d=l.length>0?`>\n${l}${e}</${t.type}`:"/";return`${e}<${t.type}${i}${d}>\n`}serializeParameter(e,t){if(!t.name)return"";const o=this.serializeAttribute("name",t.name),i=this.serializeAttribute("value",t.value);return t.set?`${e}<pb:set-param xmlns=""${o}${i}/>\n`:`${e}<param${o}${i}/>\n`}serializeRendition(e,t){return`${e}<outputRendition xml:space="preserve" ${t.scope&&"null"!==t.scope?this.serializeAttribute("scope",t.scope):""}>\n${e}${re.escape(t.css)}\n${e}</outputRendition>\n`}static serializeTemplate(e,t){return t?`${e}<pb:template xml:space="preserve" xmlns="">${t}</pb:template>\n`:""}serializeAttribute(e,t){return t?` ${e}="${re.escape(t)}"`:""}static escape(e){return e?"string"==typeof e?e.replace(re.replaceCharRegexp,re.replaceChars):e:""}save(e=!1){document.dispatchEvent(new CustomEvent("pb-start-update"));const t=this.serializeOdd();this.shadowRoot.getElementById("dialog").show(S("odd.editor.save"),S("odd.editor.saving"));const o=this.shadowRoot.getElementById("saveOdd");o.url=`${this.getEndpoint()}/${this.lessThanApiVersion("1.0.0")?"modules/editor.xql":"api/odd/"+this.odd}`,this.lessThanApiVersion("1.0.0")?(o.contentType="application/x-www-form-urlencoded",o.method="POST",o.params=null,o.body={action:"save",root:this.rootPath,"output-prefix":this.outputPrefix,"output-root":this.outputRoot,odd:this.odd,data:t}):(o.contentType="application/xml",o.method="PUT",o.params={root:this.rootPath,"output-prefix":this.outputPrefix,"output-root":this.outputRoot},o.body=t);o.generateRequest().completes.then(t=>{this.handleSaveComplete(t,e)}).catch(this.handleSaveError.bind(this))}static _renderReport(e){return e.error?`\n                        <div class="list-group-item-danger">\n                          <h4 class="list-group-item-heading">${e.file}</h4>\n                          <h5 class="list-group-item-heading">Compilation error on line ${e.line}:</h5>\n                          <pre class="list-group-item-text">${e.error}</pre>\n                          <pre class="list-group-item-text">${e.message}</pre>\n                        </div>\n                    `:`\n                    <div class="list-group-item-success">\n                      <p class="list-group-item-text">Generated ${e.file}</p>\n                    </div>\n                `}handleSaveComplete(e,t=!1){const o=e.response;if("denied"===o.status)return this.shadowRoot.getElementById("dialog").set(S("odd.editor.denied"),S("odd.editor.denied-message",{odd:this.odd})),void document.dispatchEvent(new CustomEvent("pb-end-update"));let i;if(this.lessThanApiVersion("1.0.0")){i=`<div class="list-group">${o.report.map(re._renderReport).join("")}</div>`}else{i=`<div class="list-group">${o.report}</div>`}if(this.shadowRoot.getElementById("dialog").set(S("odd.editor.saved"),i),this._hasChanges=!1,document.dispatchEvent(new CustomEvent("pb-end-update")),t){A(new Blob([o.source],{type:"application/xml"}),{fileName:this.odd,extensions:[".odd"]}).then(()=>console.log(`<pb-odd-editor> ${this.odd} exported`),()=>console.log("<pb-odd-editor> export aborted"))}}handleSaveError(e){this.shadowRoot.getElementById("dialog").set("Error",e.error),document.dispatchEvent(new CustomEvent("pb-end-update"))}_reload(){this.shadowRoot.getElementById("dialog").confirm(S("odd.editor.reload"),S("odd.editor.reload-confirm")).then(()=>{this.load(),this.tabs=[],this.tabIndex=0,this.shadowRoot.getElementById("currentElement").innerHTML=""},()=>null)}_setCurrentSelection(e){null!=this.currentSelection&&this.currentSelection.removeAttribute("currentselection"),this.currentSelection=e.target,this.currentSelection.setAttribute("currentselection","true")}_changeSelection(e){if(e.preventDefault(),e.stopPropagation(),e.detail.target===this)return;let t;this.currentSelection&&void 0!==this.currentSelection.tagName&&this.currentSelection.removeAttribute("currentselection"),t=e.detail.target?e.detail.target:e.target,t.setAttribute("currentselection","true"),this.currentSelection=t}_selectElementspec(e){this.currentElementSpec&&"PB-ODD-ELEMENTSPEC-EDITOR"===this.currentElementSpec.tagName&&this.currentElementSpec.removeAttribute("currentselection");const t=e.target;t.setAttribute("currentselection","true"),this.currentElementSpec=t}nsDisabled(){return!this.useNamespace}_handleLoadError(e){console.log("loading error occurred: ",e);const t=this.shadowRoot.getElementById("errorMsg");t.style.background="red";const o=this.shadowRoot.getElementById("loadContent").url;console.log("url ",o),t.show("Error: ","ODD file could not be loaded from "+o)}handleElementSpecChanged(e){this._hasChanges=!0;const t=this.elementSpecs.find(t=>t.ident===e.detail.ident),o=this.elementSpecs.indexOf(t),i=Object.assign({},t,{models:e.detail.models}),s=Array.from(this.elementSpecs);s.splice(o,1,i),this.elementSpecs=s}_inputTitle(e){this.title=e.composedPath()[0].value}}customElements.define("pb-odd-editor",re);export{re as PbOddEditor};
+      pb-message#errorMsg {
+        background: var(--paper-red-500);
+        color: white;
+      }
+      .card-content {
+        height: 100%;
+        overflow: auto;
+      }
+
+      paper-tab {
+        width: 100px;
+      }
+
+      .editingView {
+        width: 100%;
+      }
+
+      vaadin-tabs {
+        margin-top: 10px;
+      }
+
+      vaadin-tab {
+        background: var(--paper-grey-200);
+        padding: 0 6px;
+        border: thin solid var(--paper-grey-300);
+        border-bottom: none;
+      }
+      vaadin-tab[selected] {
+        background: white;
+        border-top-right-radius: 20px;
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
+          0 3px 1px -2px rgba(0, 0, 0, 0.2);
+      }
+    `}static get properties(){return Object.assign(Object.assign({},super.properties),{},{ident:{type:String},mode:{type:String},models:{type:Array},odd:{type:String,reflect:!0},elementSpecs:{type:Array},source:{type:String},title:{type:String},titleShort:{type:String,reflect:!0,attribute:"title-short"},description:{type:String},namespace:{type:String},rootPath:{type:String,attribute:"root-path"},loading:{type:Boolean},indentString:{type:String},outputPrefix:{type:String,attribute:"output-prefix"},outputRoot:{type:String,attribute:"output-root"},currentSelection:{type:Object},useNamespace:{type:Boolean},loggedIn:{type:Boolean},tabs:{type:Array},tabIndex:{type:Number,reflect:!0}})}constructor(){super(),this.ident="",this.mode="",this.models=()=>[],this.odd="",this.elementSpecs=[],this.source="",this.title="",this.titleShort="",this.description="",this.namespace="",this.rootPath="",this.loading=!1,this.indentString="    ",this.outputPrefix="",this.outputRoot="",this.currentSelection={},this.useNamespace=!1,this.loggedIn=!0,this.tabs=[],this.tabIndex=void 0,this.selectedNavIndex=0,this.cssFile="",this.hotkeys={save:"ctrl+shift+s,command+shift+s"},this._hasChanges=!1}render(){return l`
+      <iron-ajax
+        id="loadContent"
+        handle-as="json"
+        content-type="application/x-www-form-urlencoded"
+        with-credentials
+        method="GET"
+      ></iron-ajax>
+
+      <iron-ajax id="saveOdd" handle-as="json" with-credentials></iron-ajax>
+
+      <div id="layout">
+        <div id="drawer">
+          <slot id="slot"></slot>
+          <h3>
+            <span>${this.odd}</span>
+
+            <span class="icons">
+              <pb-edit-xml id="editSource"
+                ><paper-icon-button
+                  icon="code"
+                  title="${E("odd.editor.odd-source")}"
+                ></paper-icon-button
+              ></pb-edit-xml>
+              <paper-icon-button
+                @click="${()=>this.save(!0)}"
+                icon="icons:cloud-download"
+                title="${E(k?"odd.editor.save-as":"odd.editor.download")}"
+              ></paper-icon-button>
+              <paper-icon-button
+                @click="${this._reload}"
+                icon="refresh"
+                title="${E("odd.editor.reload")}"
+              ></paper-icon-button>
+              <paper-icon-button
+                @click="${()=>this.save(!1)}"
+                icon="save"
+                title="${E("odd.editor.save")} ${this.display("save")}"
+                ?disabled="${!this.loggedIn}"
+              ></paper-icon-button>
+            </span>
+          </h3>
+          <div id="new-element" class="input-group">
+            <paper-input
+              id="identNew"
+              label="${E("odd.editor.add-element")}"
+              always-float-label="always-float-label"
+            >
+              <paper-icon-button
+                slot="suffix"
+                @click="${this.addElementSpec}"
+                icon="add"
+                tabindex="-1"
+              ></paper-icon-button>
+            </paper-input>
+          </div>
+
+          <div id="jump-to">
+            <paper-autocomplete
+              id="jumpTo"
+              label="${E("odd.editor.jump-to")}"
+              always-float-label="always-float-label"
+            ></paper-autocomplete>
+          </div>
+
+          <h3>${E("odd.editor.specs")}</h3>
+        </div>
+        <div id="navlist">
+          ${H(this.elementSpecs,e=>e.ident,(e,t)=>l`
+                <paper-item
+                  id="es_${e.ident}"
+                  index="${t}"
+                  @click="${e=>this._openElementSpec(e,t)}"
+                  >${e.ident}</paper-item
+                >
+              `)}
+        </div>
+        <section class="specs" id="specs">
+          <paper-card class="metadata">
+            <pb-collapse id="meta">
+              <h4 slot="collapse-trigger" class="panel-title">${this._computedTitle()}</h4>
+              <div slot="collapse-content">
+                <paper-input
+                  id="title"
+                  name="title"
+                  value="${this.title}"
+                  label="${E("odd.editor.title")}"
+                  placeholder="[${E("odd.editor.title-placeholder")}]"
+                  @change="${this._inputTitle}"
+                ></paper-input>
+                <paper-input
+                  id="titleShort"
+                  name="short-title"
+                  .value="${this.titleShort}"
+                  label="${E("odd.editor.title-short")}"
+                  placeholder="[${E("odd.editor.title-short-placeholder")}]"
+                  @change="${e=>this.titleShort=e.composedPath()[0].value}"
+                ></paper-input>
+                <paper-input
+                  id="description"
+                  name="description"
+                  .value="${W(this.description)}"
+                  label="${E("odd.editor.description-label")}"
+                  placeholder="[${E("odd.editor.description-placeholder")}]"
+                  @change="${e=>this.description=e.composedPath()[0].value}"
+                ></paper-input>
+                <paper-input
+                  id="source"
+                  name="source"
+                  ?value="${this.source}"
+                  label="${E("odd.editor.source-label")}"
+                  placeholder="[${E("odd.editor.source-placeholder")}]"
+                  @change="${e=>this.source=e.composedPath()[0].value}"
+                ></paper-input>
+                <paper-checkbox id="useNamespace" @change="${this.setUseNamespace}"
+                  >${E("odd.editor.use-namespace")}</paper-checkbox
+                >
+                <paper-input
+                  id="namespace"
+                  name="namespace"
+                  value="${this.namespace}"
+                  label="Namespace"
+                  ?disabled="${!this.useNamespace}"
+                  placeholder="[${E("odd.editor.namespace-placeholder")}]"
+                  @change="${e=>this.namespace=e.composedPath()[0].value}"
+                ></paper-input>
+                <div class="extCssEdit">
+                  <paper-input
+                    name="cssFile"
+                    value="${this.cssFile}"
+                    label="External CSS File"
+                    placeholder="[External CSS file with additional class definitions]"
+                    @change="${this._cssFileChanged}"
+                  ></paper-input>
+                  <pb-edit-xml id="editCSS"
+                    ><paper-icon-button
+                      icon="create"
+                      title="${E("odd.editor.css-source")}"
+                    ></paper-icon-button
+                  ></pb-edit-xml>
+                </div>
+              </div>
+            </pb-collapse>
+          </paper-card>
+
+          <!-- todo: import elementspec to make it function  -->
+
+          <div class="editingView">
+            <vaadin-tabs id="tabs" selected="${this.tabIndex}">
+              ${H(this.tabs,e=>e.id,(e,t)=>l`
+                    <vaadin-tab name="${e}" @click="${t=>this._selectTab(t,e)}"
+                      ><span style="padding-right:20px;">${e}</span
+                      ><paper-icon-button
+                        icon="close"
+                        @click="${e=>this._closeTabHandler(e,t)}"
+                      ></paper-icon-button
+                    ></vaadin-tab>
+                  `)}
+            </vaadin-tabs>
+
+            <div id="currentElement"></div>
+          </div>
+        </section>
+      </div>
+
+      <pb-message id="dialog" hidden></pb-message>
+      <pb-message id="errorMsg"></pb-message>
+    `}firstUpdated(e){this.shadowRoot.getElementById("useNamespace").checked=this.useNamespace,this.jumpCtrl=this.shadowRoot.getElementById("jumpTo"),this.jumpCtrl.addEventListener("autocomplete-selected",this.jumpTo.bind(this));const t=this.querySelector("odd-selector");this.odd&&t&&(t.selected=this.odd,t.addEventListener("odd-selected",e=>{confirm("Any unsaved changes will be lost. Continue?")&&(this.odd=e.detail.odd,window.history.pushState({},"","?odd="+this.odd)),t.selected=this.odd})),this.addEventListener("current-changed",this._changeSelection),this.addEventListener("odd-copy",e=>this._copy(e)),this.addEventListener("odd-paste",e=>this._paste(e)),this.addEventListener("element-spec-removed",this.removeElementSpec.bind(this)),window.addEventListener("beforeunload",()=>"Any unsaved changes will be lost. Continue?"),this.subscribeTo("pb-login",e=>{this.loggedIn=null!=e.detail.user}),this.focus(),this.loadContent=this.shadowRoot.getElementById("loadContent"),this.rootPath=this.getAttribute("root-path"),c("pb-page-ready",()=>{this.load(),this.inited=!0}),this.registerHotkey("save",()=>this.save(!1))}setUseNamespace(){this.useNamespace=this.shadowRoot.getElementById("useNamespace").checked}async load(){if(this.loading)return;if(this.loading=!0,""===this.rootPath||""===this.odd)return;this.elementSpecs=[],document.dispatchEvent(new CustomEvent("pb-start-update"));this.shadowRoot.getElementById("editSource").setPath(`${this.rootPath}/${this.odd}`);const e={odd:this.odd,root:this.rootPath};this.loadContent.params=e,this.loadContent.url=`${this.getEndpoint()}/${this.lessThanApiVersion("1.0.0")?"modules/editor.xql":"api/odd/"+this.odd}`;const t=this.loadContent.generateRequest();this._hasChanges=!1,t.completes.then(e=>this.handleOdd(e))}handleOdd(e){const t=e.response;if(this.loggedIn=t.canWrite,this.source=t.source,this.title=t.title,this.titleShort=t.titleShort,this.description=t.description,this.cssFile=null==t.cssFile?"":t.cssFile,this.namespace=null!=t.namespace?t.namespace:"",this.useNamespace=null!=t.namespace,this.cssFile){this.shadowRoot.getElementById("editCSS").setPath(`${this.rootPath}/${this.cssFile}`)}this.elementSpecs=t.elementSpecs.map(e=>this.mapElementSpec(e)),this._updateAutoComplete(),this.requestUpdate(),this.loading=!1,document.dispatchEvent(new CustomEvent("pb-end-update")),document.title=this.titleShort||this.title}_updateAutoComplete(){this.shadowRoot.getElementById("jumpTo").source=this.elementSpecs.map(this._specMapper)}_cssFileChanged(e){if(this.cssFile=e.composedPath()[0].value,this.cssFile){this.shadowRoot.getElementById("editCSS").setPath(`${this.rootPath}/${this.cssFile}`)}}_navlistActiveChanged(e,t){this.selectedNavIndex=t,this.requestUpdate()}_returnTabs(){return this.tabs}_selectTab(e,t){const o=this.elementSpecs.find(e=>e.ident===t);this._updateElementspec(o)}_openElementSpec(e,t){console.log("_openElementSpec ",e,t);const o=this.elementSpecs[t];this._updateElementspec(o);const{ident:i}=o;if(this.tabs.indexOf(i)>=0)return this.tabIndex=this.tabs.indexOf(i),void this.requestUpdate();this.tabs.push(i),this.tabIndex=this.tabs.length-1,this.requestUpdate()}_updateElementspec(e){const t=this.shadowRoot.getElementById("currentElement");t.innerHTML="";const o=new se;o.addEventListener("element-spec-changed",this.handleElementSpecChanged.bind(this)),o.ident=e.ident,o.models=e.models,o.mode=e.mode,o.endpoint=this._endpoint,o.apiVersion=this._apiVersion,o.hotkeys=this.hotkeys,t.appendChild(o)}_closeTabHandler(e,t){return console.log("_closeTabHandler ",t),e.preventDefault(),e.stopPropagation(),this._closeTab(t),!1}_closeTab(e){if(this.tabs.splice(e,1),0===this.tabs.length)this.shadowRoot.getElementById("currentElement").innerHTML="",this.tabIndex=0,this.tabs=[];else if(this.tabIndex>0&&this.tabIndex>=e){this.tabIndex-=1;const e=this.tabs[this.tabIndex];this._selectTab(null,e)}}attributeChangedCallback(e,t,o){super.attributeChangedCallback(e,t,o),"odd"==e&&t!==o&&this.inited&&this.load()}static get replaceCharMap(){return{'"':"&quot;","&":"&amp;","<":"&lt;",">":"&gt;"}}static get replaceCharRegexp(){return/"|&|<|>/g}static replaceChars(e){return re.replaceCharMap[e]}jumpTo(e){const t="#es_"+this.shadowRoot.getElementById("jumpTo").text,o=this.shadowRoot.querySelector(t);o&&(this.jumpCtrl.clear(),o.click())}_computedTitle(){return this.odd?this.title||this.titleShort||this.odd||"Loading ...":""}_copy(e){this.clipboard=e.detail.model;const t=JSON.parse(JSON.stringify(e.detail.model));this.clipboard=t}_paste(e){if(console.log("_paste ",e),console.log("_paste clipboard",this.clipboard),this.clipboard=={}||null==this.clipboard)return;const t=e.detail.target;t.addModel(this.clipboard),t.render()}_specMapper(e){return{text:e.ident,value:e.ident}}_specObserver(e){const t=this.elementSpecs.map(this._specMapper);this.jumpCtrl.source=t}mapElementSpec(e){return Object.assign(Object.assign({},e),{},{models:e.models.map(e=>this.addShowToModel(e))})}addShowToModel(e){if(e.models){const t=e.models.map(e=>this.addShowToModel(e));return Object.assign(Object.assign({},e),{},{models:t,show:!1})}return Object.assign(Object.assign({},e),{},{show:!1})}addElementSpec(e){const t=this.shadowRoot.getElementById("identNew").value;if(!t||0===t.length)return;if(this.elementSpecs.find(e=>e.ident===t)){console.log("<pb-odd-editor> element spec to be added already exists: %s",t);const e="#es_"+t,o=this.shadowRoot.querySelector(e);if(!o)return;return void o.click()}const o={action:"find",odd:this.odd,root:this.rootPath,ident:t},i={root:this.rootPath,ident:t},s=this.lessThanApiVersion("1.0.0")?o:i;this.loadContent.params=s,this.loadContent.url=`${this.getEndpoint()}/${this.lessThanApiVersion("1.0.0")?"modules/editor.xql":"api/odd/"+this.odd}`;this.loadContent.generateRequest().completes.then(this._handleElementSpecResponse.bind(this))}_handleElementSpecResponse(e){const t=this.shadowRoot.getElementById("identNew"),o=e.response,i=t.value,s={ident:i,mode:"not-found"===o.status?"add":"change",models:o.models||[]};this.elementSpecs.unshift(s),t.value="",this.tabs.push(i),this.tabIndex=this.tabs.length-1,this.elementSpecs.sort((e,t)=>e.ident.localeCompare(t.ident)),this.requestUpdate().then(()=>{const e=this.shadowRoot.querySelectorAll("paper-item"),t=this.elementSpecs.indexOf(s);this._updateAutoComplete(),e[t].click(),e[t].focus()})}removeElementSpec(e){const{ident:t}=e.detail.target;this.shadowRoot.getElementById("dialog").confirm(S("browse.delete"),S("odd.editor.delete-spec",{ident:t})).then(()=>{const e=this.elementSpecs.findIndex(e=>e.ident===t);this.elementSpecs.splice(e,1),this.requestUpdate();const o=this.shadowRoot.querySelector("vaadin-tab[selected]").getAttribute("name"),i=this.tabs.indexOf(o);this._closeTab(i)},()=>null)}serializeOdd(){const e=this.useNamespace?` ns="${this.namespace}"`:"",t=this.source?` source="${this.source}"`:"",o=this.description?` <desc>${this.description}</desc>`:"";return`<schemaSpec xmlns="http://www.tei-c.org/ns/1.0" xmlns:pb="http://teipublisher.com/1.0"${e}${t}>\n${`${this.indentString}<title>${this.title}${o}</title>\n`}${this.titleShort?`${this.indentString}<title type="short">${this.titleShort}</title>\n`:""}${this.cssFile?`${this.indentString}<rendition source="${this.cssFile}"/>\n`:""}\n${this.elementSpecs.map(e=>this.serializeElementSpec(this.indentString,e)).join("")}</schemaSpec>\n`}serializeElementSpec(e,t){const o=t.mode?` mode="${t.mode}"`:"",i=e+this.indentString,s=t.models.map(e=>this.serializeModel(i,e)).join("");return`${e}<elementSpec ident="${t.ident}"${o}>\n${s}${e}</elementSpec>\n`}serializeModel(e,t){if("model"===t.type&&!t.behaviour)return"";const o=e+this.indentString,i=[this.serializeAttribute("output",t.output),this.serializeAttribute("predicate",t.predicate),"model"===t.type?this.serializeAttribute("behaviour",t.behaviour):"",this.serializeAttribute("cssClass",t.css),this.serializeAttribute("useSourceRendition",t.sourcerend),this.serializeAttribute("pb:mode",t.mode)].join(""),s=t.desc?`${o}<desc>${t.desc}</desc>\n`:"",r=t.models.map(e=>this.serializeModel(o,e)).join(""),a=t.parameters.map(e=>this.serializeParameter(o,e)).join(""),n=t.renditions.map(e=>this.serializeRendition(o,e)).join(""),l=`${s}${r}${a}${re.serializeTemplate(o,t.template)}${n}`,d=l.length>0?`>\n${l}${e}</${t.type}`:"/";return`${e}<${t.type}${i}${d}>\n`}serializeParameter(e,t){if(!t.name)return"";const o=this.serializeAttribute("name",t.name),i=this.serializeAttribute("value",t.value);return t.set?`${e}<pb:set-param xmlns=""${o}${i}/>\n`:`${e}<param${o}${i}/>\n`}serializeRendition(e,t){return`${e}<outputRendition xml:space="preserve" ${t.scope&&"null"!==t.scope?this.serializeAttribute("scope",t.scope):""}>\n${e}${re.escape(t.css)}\n${e}</outputRendition>\n`}static serializeTemplate(e,t){return t?`${e}<pb:template xml:space="preserve" xmlns="">${t}</pb:template>\n`:""}serializeAttribute(e,t){return t?` ${e}="${re.escape(t)}"`:""}static escape(e){return e?"string"==typeof e?e.replace(re.replaceCharRegexp,re.replaceChars):e:""}save(e=!1){document.dispatchEvent(new CustomEvent("pb-start-update"));const t=this.serializeOdd();this.shadowRoot.getElementById("dialog").show(S("odd.editor.save"),S("odd.editor.saving"));const o=this.shadowRoot.getElementById("saveOdd");o.url=`${this.getEndpoint()}/${this.lessThanApiVersion("1.0.0")?"modules/editor.xql":"api/odd/"+this.odd}`,this.lessThanApiVersion("1.0.0")?(o.contentType="application/x-www-form-urlencoded",o.method="POST",o.params=null,o.body={action:"save",root:this.rootPath,"output-prefix":this.outputPrefix,"output-root":this.outputRoot,odd:this.odd,data:t}):(o.contentType="application/xml",o.method="PUT",o.params={root:this.rootPath,"output-prefix":this.outputPrefix,"output-root":this.outputRoot},o.body=t);o.generateRequest().completes.then(t=>{this.handleSaveComplete(t,e)}).catch(this.handleSaveError.bind(this))}static _renderReport(e){return e.error?`\n                        <div class="list-group-item-danger">\n                          <h4 class="list-group-item-heading">${e.file}</h4>\n                          <h5 class="list-group-item-heading">Compilation error on line ${e.line}:</h5>\n                          <pre class="list-group-item-text">${e.error}</pre>\n                          <pre class="list-group-item-text">${e.message}</pre>\n                        </div>\n                    `:`\n                    <div class="list-group-item-success">\n                      <p class="list-group-item-text">Generated ${e.file}</p>\n                    </div>\n                `}handleSaveComplete(e,t=!1){const o=e.response;if("denied"===o.status)return this.shadowRoot.getElementById("dialog").set(S("odd.editor.denied"),S("odd.editor.denied-message",{odd:this.odd})),void document.dispatchEvent(new CustomEvent("pb-end-update"));let i;if(this.lessThanApiVersion("1.0.0")){i=`<div class="list-group">${o.report.map(re._renderReport).join("")}</div>`}else{const{report:e}=o;i=`<div class="list-group">${e}</div>`}if(this.shadowRoot.getElementById("dialog").set(S("odd.editor.saved"),i),this._hasChanges=!1,document.dispatchEvent(new CustomEvent("pb-end-update")),t){A(new Blob([o.source],{type:"application/xml"}),{fileName:this.odd,extensions:[".odd"]}).then(()=>console.log(`<pb-odd-editor> ${this.odd} exported`),()=>console.log("<pb-odd-editor> export aborted"))}}handleSaveError(e){this.shadowRoot.getElementById("dialog").set("Error",e.error),document.dispatchEvent(new CustomEvent("pb-end-update"))}_reload(){this.shadowRoot.getElementById("dialog").confirm(S("odd.editor.reload"),S("odd.editor.reload-confirm")).then(()=>{this.load(),this.tabs=[],this.tabIndex=0,this.shadowRoot.getElementById("currentElement").innerHTML=""},()=>null)}_setCurrentSelection(e){null!=this.currentSelection&&this.currentSelection.removeAttribute("currentselection"),this.currentSelection=e.target,this.currentSelection.setAttribute("currentselection","true")}_changeSelection(e){if(e.preventDefault(),e.stopPropagation(),e.detail.target===this)return;let t;this.currentSelection&&void 0!==this.currentSelection.tagName&&this.currentSelection.removeAttribute("currentselection"),t=e.detail.target?e.detail.target:e.target,t.setAttribute("currentselection","true"),this.currentSelection=t}_selectElementspec(e){this.currentElementSpec&&"PB-ODD-ELEMENTSPEC-EDITOR"===this.currentElementSpec.tagName&&this.currentElementSpec.removeAttribute("currentselection");const t=e.target;t.setAttribute("currentselection","true"),this.currentElementSpec=t}nsDisabled(){return!this.useNamespace}_handleLoadError(e){console.log("loading error occurred: ",e);const t=this.shadowRoot.getElementById("errorMsg");t.style.background="red";const{url:o}=this.shadowRoot.getElementById("loadContent");console.log("url ",o),t.show("Error: ","ODD file could not be loaded from "+o)}handleElementSpecChanged(e){this._hasChanges=!0;const t=this.elementSpecs.find(t=>t.ident===e.detail.ident),o=this.elementSpecs.indexOf(t),i=Object.assign(Object.assign({},t),{},{models:e.detail.models}),s=Array.from(this.elementSpecs);s.splice(o,1,i),this.elementSpecs=s}_inputTitle(e){this.title=e.composedPath()[0].value}}customElements.define("pb-odd-editor",re);export{re as PbOddEditor};