@teipublisher/pb-components 1.40.1 → 1.41.0

package/dist/pb-odd-editor.js

@@ -1,4 +1,4 @@
-import{h as e,o as t,F as o,D as i,E as s,H as r,l as a,f as n,t as d,g as l}from"./paper-checkbox-f6a70487.js";import{E as c,T as p,D as h,p as m}from"./pb-message-1a0c0c52.js";import{d as u,N as b,e as g,f as v,j as f,A as w,L as y,c as _,h as x,a as $,p as E}from"./pb-mixin-15ff531f.js";
+import{h as e,m as t,F as o,D as i,z as s,A as r,j as a,f as n}from"./paper-checkbox-102e3b43.js";import{E as l,T as d,D as p,p as c}from"./pb-message-0fb0b538.js";import{d as h,N as m,e as u,f as b,j as g,A as v,L as f,c as w,h as y,a as _,p as x}from"./pb-mixin-15ff531f.js";import{t as $,g as E}from"./pb-i18n-6ad23bcf.js";import"./jinn-codemirror-c1a4b755.js";
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -12,7 +12,7 @@ import{h as e,o as t,F as o,D as i,E as s,H as r,l as a,f as n,t as d,g as l}fro
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-const S=(e,t)=>{const o=e.startNode.parentNode,i=void 0===t?e.endNode:t.startNode,s=o.insertBefore(g(),i);o.insertBefore(g(),i);const r=new b(e.options);return r.insertAfterNode(s),r},C=(e,t)=>(e.setValue(t),e.commit(),e),k=(e,t,o)=>{const i=e.startNode.parentNode,s=o?o.startNode:e.endNode,r=t.endNode.nextSibling;r!==s&&v(i,t.startNode,r,s)},A=e=>{f(e.startNode.parentNode,e.startNode,e.endNode.nextSibling)},M=(e,t,o)=>{const i=new Map;for(let s=t;s<=o;s++)i.set(e[s],s);return i},R=new WeakMap,I=new WeakMap,B=u((e,t,o)=>{let i;return void 0===o?o=t:void 0!==t&&(i=t),t=>{if(!(t instanceof b))throw new Error("repeat can only be used in text bindings");const s=R.get(t)||[],r=I.get(t)||[],a=[],n=[],d=[];let l,c,p=0;for(const t of e)d[p]=i?i(t,p):p,n[p]=o(t,p),p++;let h=0,m=s.length-1,u=0,g=n.length-1;for(;h<=m&&u<=g;)if(null===s[h])h++;else if(null===s[m])m--;else if(r[h]===d[u])a[u]=C(s[h],n[u]),h++,u++;else if(r[m]===d[g])a[g]=C(s[m],n[g]),m--,g--;else if(r[h]===d[g])a[g]=C(s[h],n[g]),k(t,s[h],a[g+1]),h++,g--;else if(r[m]===d[u])a[u]=C(s[m],n[u]),k(t,s[m],s[h]),m--,u++;else if(void 0===l&&(l=M(d,u,g),c=M(r,h,m)),l.has(r[h]))if(l.has(r[m])){const e=c.get(d[u]),o=void 0!==e?s[e]:null;if(null===o){const e=S(t,s[h]);C(e,n[u]),a[u]=e}else a[u]=C(o,n[u]),k(t,o,s[h]),s[e]=null;u++}else A(s[m]),m--;else A(s[h]),h++;for(;u<=g;){const e=S(t,a[g+1]);C(e,n[u]),a[u++]=e}for(;h<=m;){const e=s[h++];null!==e&&A(e)}R.set(t,a),I.set(t,d)}}),P=new WeakMap,z=u(e=>t=>{const o=P.get(t);if(void 0===e&&t instanceof w){if(void 0!==o||!P.has(t)){const e=t.committer.name;t.committer.element.removeAttribute(e)}}else e!==o&&t.setValue(e);P.set(t,e)}),T=e`<dom-module id="lumo-tab" theme-for="vaadin-tab">
+const S=(e,t)=>{const o=e.startNode.parentNode,i=void 0===t?e.endNode:t.startNode,s=o.insertBefore(u(),i);o.insertBefore(u(),i);const r=new m(e.options);return r.insertAfterNode(s),r},C=(e,t)=>(e.setValue(t),e.commit(),e),k=(e,t,o)=>{const i=e.startNode.parentNode,s=o?o.startNode:e.endNode,r=t.endNode.nextSibling;r!==s&&b(i,t.startNode,r,s)},A=e=>{g(e.startNode.parentNode,e.startNode,e.endNode.nextSibling)},M=(e,t,o)=>{const i=new Map;for(let s=t;s<=o;s++)i.set(e[s],s);return i},R=new WeakMap,I=new WeakMap,z=h((e,t,o)=>{let i;return void 0===o?o=t:void 0!==t&&(i=t),t=>{if(!(t instanceof m))throw new Error("repeat can only be used in text bindings");const s=R.get(t)||[],r=I.get(t)||[],a=[],n=[],l=[];let d,p,c=0;for(const t of e)l[c]=i?i(t,c):c,n[c]=o(t,c),c++;let h=0,u=s.length-1,b=0,g=n.length-1;for(;h<=u&&b<=g;)if(null===s[h])h++;else if(null===s[u])u--;else if(r[h]===l[b])a[b]=C(s[h],n[b]),h++,b++;else if(r[u]===l[g])a[g]=C(s[u],n[g]),u--,g--;else if(r[h]===l[g])a[g]=C(s[h],n[g]),k(t,s[h],a[g+1]),h++,g--;else if(r[u]===l[b])a[b]=C(s[u],n[b]),k(t,s[u],s[h]),u--,b++;else if(void 0===d&&(d=M(l,b,g),p=M(r,h,u)),d.has(r[h]))if(d.has(r[u])){const e=p.get(l[b]),o=void 0!==e?s[e]:null;if(null===o){const e=S(t,s[h]);C(e,n[b]),a[b]=e}else a[b]=C(o,n[b]),k(t,o,s[h]),s[e]=null;b++}else A(s[u]),u--;else A(s[h]),h++;for(;b<=g;){const e=S(t,a[g+1]);C(e,n[b]),a[b++]=e}for(;h<=u;){const e=s[h++];null!==e&&A(e)}R.set(t,a),I.set(t,l)}}),P=new WeakMap,B=h(e=>t=>{const o=P.get(t);if(void 0===e&&t instanceof v){if(void 0!==o||!P.has(t)){const e=t.committer.name;t.committer.element.removeAttribute(e)}}else e!==o&&t.setValue(e);P.set(t,e)}),T=e`<dom-module id="lumo-tab" theme-for="vaadin-tab">
   <template>
     <style>
       :host {
@@ -245,9 +245,9 @@ const O=e=>class extends e{static get properties(){return{_hasVaadinItemMixin:{v
 @license
 Copyright (c) 2017 Vaadin Ltd.
 This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/;class q extends(c(p(O(t)))){static get template(){return e`
+*/;class j extends(l(d(O(t)))){static get template(){return e`
     <slot></slot>
-`}static get is(){return"vaadin-tab"}static get version(){return"3.2.0"}ready(){super.ready(),this.setAttribute("role","tab")}_onKeyup(e){const t=this.hasAttribute("active");if(super._onKeyup(e),t){const e=this.querySelector("a");e&&e.click()}}}customElements.define(q.is,q);const L=e`<dom-module id="lumo-tabs" theme-for="vaadin-tabs">
+`}static get is(){return"vaadin-tab"}static get version(){return"3.2.0"}ready(){super.ready(),this.setAttribute("role","tab")}_onKeyup(e){const t=this.hasAttribute("active");if(super._onKeyup(e),t){const e=this.querySelector("a");e&&e.click()}}}customElements.define(j.is,j);const q=e`<dom-module id="lumo-tabs" theme-for="vaadin-tabs">
   <template>
     <style>
       :host {
@@ -477,18 +477,18 @@ This program is available under Apache License Version 2.0, available at https:/
       }
     </style>
   </template>
-</dom-module>`;document.head.appendChild(L.content);
+</dom-module>`;document.head.appendChild(q.content);
 /**
 @license
 Copyright (c) 2017 Vaadin Ltd.
 This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
-const j=e=>class extends e{static get properties(){return{_hasVaadinListMixin:{value:!0},selected:{type:Number,reflectToAttribute:!0,notify:!0},orientation:{type:String,reflectToAttribute:!0,value:""},items:{type:Array,readOnly:!0,notify:!0},_searchBuf:{type:String,value:""}}}static get observers(){return["_enhanceItems(items, orientation, selected, disabled)"]}ready(){super.ready(),this.addEventListener("keydown",e=>this._onKeydown(e)),this.addEventListener("click",e=>this._onClick(e)),this._observer=new o(this,e=>{this._setItems(this._filterItems(Array.from(this.children)))})}_enhanceItems(e,t,o,i){if(!i&&e){this.setAttribute("aria-orientation",t||"vertical"),this.items.forEach(e=>{t?e.setAttribute("orientation",t):e.removeAttribute("orientation"),e.updateStyles()}),this._setFocusable(o);const i=e[o];e.forEach(e=>e.selected=e===i),i&&!i.disabled&&this._scrollToItem(o)}}get focused(){return this.getRootNode().activeElement}_filterItems(e){return e.filter(e=>e._hasVaadinItemMixin)}_onClick(e){if(e.metaKey||e.shiftKey||e.ctrlKey||e.defaultPrevented)return;const t=this._filterItems(e.composedPath())[0];let o;t&&!t.disabled&&(o=this.items.indexOf(t))>=0&&(this.selected=o)}_searchKey(e,t){this._searchReset=i.debounce(this._searchReset,s.after(500),()=>this._searchBuf=""),this._searchBuf+=t.toLowerCase();const o=1,r=e=>!(e.disabled||this._isItemHidden(e))&&0===e.textContent.replace(/[^a-zA-Z0-9]/g,"").toLowerCase().indexOf(this._searchBuf);this.items.some(e=>0===e.textContent.replace(/[^a-zA-Z0-9]/g,"").toLowerCase().indexOf(this._searchBuf))||(this._searchBuf=t.toLowerCase());const a=1===this._searchBuf.length?e+1:e;return this._getAvailableIndex(a,o,r)}get _isRTL(){return!this._vertical&&"rtl"===this.getAttribute("dir")}_onKeydown(e){if(e.metaKey||e.ctrlKey)return;const t=e.key.replace(/^Arrow/,""),o=this.items.indexOf(this.focused);if(/[a-zA-Z0-9]/.test(t)&&1===t.length){const e=this._searchKey(o,t);return void(e>=0&&this._focus(e))}const i=e=>!(e.disabled||this._isItemHidden(e));let s,r;const a=this._isRTL?-1:1;this._vertical&&"Up"===t||!this._vertical&&"Left"===t?(r=-a,s=o-a):this._vertical&&"Down"===t||!this._vertical&&"Right"===t?(r=a,s=o+a):"Home"===t?(r=1,s=0):"End"===t&&(r=-1,s=this.items.length-1),s=this._getAvailableIndex(s,r,i),s>=0&&(this._focus(s),e.preventDefault())}_getAvailableIndex(e,t,o){const i=this.items.length;for(let s=0;"number"==typeof e&&s<i;s++,e+=t||1){e<0?e=i-1:e>=i&&(e=0);if(o(this.items[e]))return e}return-1}_isItemHidden(e){return"none"===getComputedStyle(e).display}_setFocusable(e){e=this._getAvailableIndex(e,1,e=>!e.disabled);const t=this.items[e]||this.items[0];this.items.forEach(e=>e.tabIndex=e===t?0:-1)}_focus(e){const t=this.items[e];this.items.forEach(e=>e.focused=e===t),this._setFocusable(e),this._scrollToItem(e),t.focus()}focus(){this._observer&&this._observer.flush();const e=this.querySelector('[tabindex="0"]')||(this.items?this.items[0]:null);e&&e.focus()}get _scrollerElement(){}_scrollToItem(e){const t=this.items[e];if(!t)return;const o=this._vertical?["top","bottom"]:this._isRTL?["right","left"]:["left","right"],i=this._scrollerElement.getBoundingClientRect(),s=(this.items[e+1]||t).getBoundingClientRect(),r=(this.items[e-1]||t).getBoundingClientRect();let a=0;!this._isRTL&&s[o[1]]>=i[o[1]]||this._isRTL&&s[o[1]]<=i[o[1]]?a=s[o[1]]-i[o[1]]:(!this._isRTL&&r[o[0]]<=i[o[0]]||this._isRTL&&r[o[0]]>=i[o[0]])&&(a=r[o[0]]-i[o[0]]),this._scroll(a)}get _vertical(){return"horizontal"!==this.orientation}_scroll(e){if(this._vertical)this._scrollerElement.scrollTop+=e;else{const t=h.detectScrollType(),o=h.getNormalizedScrollLeft(t,this.getAttribute("dir")||"ltr",this._scrollerElement)+e;h.setNormalizedScrollLeft(t,this.getAttribute("dir")||"ltr",this._scrollerElement,o)}}}
+const L=e=>class extends e{static get properties(){return{_hasVaadinListMixin:{value:!0},selected:{type:Number,reflectToAttribute:!0,notify:!0},orientation:{type:String,reflectToAttribute:!0,value:""},items:{type:Array,readOnly:!0,notify:!0},_searchBuf:{type:String,value:""}}}static get observers(){return["_enhanceItems(items, orientation, selected, disabled)"]}ready(){super.ready(),this.addEventListener("keydown",e=>this._onKeydown(e)),this.addEventListener("click",e=>this._onClick(e)),this._observer=new o(this,e=>{this._setItems(this._filterItems(Array.from(this.children)))})}_enhanceItems(e,t,o,i){if(!i&&e){this.setAttribute("aria-orientation",t||"vertical"),this.items.forEach(e=>{t?e.setAttribute("orientation",t):e.removeAttribute("orientation"),e.updateStyles()}),this._setFocusable(o);const i=e[o];e.forEach(e=>e.selected=e===i),i&&!i.disabled&&this._scrollToItem(o)}}get focused(){return this.getRootNode().activeElement}_filterItems(e){return e.filter(e=>e._hasVaadinItemMixin)}_onClick(e){if(e.metaKey||e.shiftKey||e.ctrlKey||e.defaultPrevented)return;const t=this._filterItems(e.composedPath())[0];let o;t&&!t.disabled&&(o=this.items.indexOf(t))>=0&&(this.selected=o)}_searchKey(e,t){this._searchReset=i.debounce(this._searchReset,s.after(500),()=>this._searchBuf=""),this._searchBuf+=t.toLowerCase();const o=1,r=e=>!(e.disabled||this._isItemHidden(e))&&0===e.textContent.replace(/[^a-zA-Z0-9]/g,"").toLowerCase().indexOf(this._searchBuf);this.items.some(e=>0===e.textContent.replace(/[^a-zA-Z0-9]/g,"").toLowerCase().indexOf(this._searchBuf))||(this._searchBuf=t.toLowerCase());const a=1===this._searchBuf.length?e+1:e;return this._getAvailableIndex(a,o,r)}get _isRTL(){return!this._vertical&&"rtl"===this.getAttribute("dir")}_onKeydown(e){if(e.metaKey||e.ctrlKey)return;const t=e.key.replace(/^Arrow/,""),o=this.items.indexOf(this.focused);if(/[a-zA-Z0-9]/.test(t)&&1===t.length){const e=this._searchKey(o,t);return void(e>=0&&this._focus(e))}const i=e=>!(e.disabled||this._isItemHidden(e));let s,r;const a=this._isRTL?-1:1;this._vertical&&"Up"===t||!this._vertical&&"Left"===t?(r=-a,s=o-a):this._vertical&&"Down"===t||!this._vertical&&"Right"===t?(r=a,s=o+a):"Home"===t?(r=1,s=0):"End"===t&&(r=-1,s=this.items.length-1),s=this._getAvailableIndex(s,r,i),s>=0&&(this._focus(s),e.preventDefault())}_getAvailableIndex(e,t,o){const i=this.items.length;for(let s=0;"number"==typeof e&&s<i;s++,e+=t||1){e<0?e=i-1:e>=i&&(e=0);if(o(this.items[e]))return e}return-1}_isItemHidden(e){return"none"===getComputedStyle(e).display}_setFocusable(e){e=this._getAvailableIndex(e,1,e=>!e.disabled);const t=this.items[e]||this.items[0];this.items.forEach(e=>e.tabIndex=e===t?0:-1)}_focus(e){const t=this.items[e];this.items.forEach(e=>e.focused=e===t),this._setFocusable(e),this._scrollToItem(e),t.focus()}focus(){this._observer&&this._observer.flush();const e=this.querySelector('[tabindex="0"]')||(this.items?this.items[0]:null);e&&e.focus()}get _scrollerElement(){}_scrollToItem(e){const t=this.items[e];if(!t)return;const o=this._vertical?["top","bottom"]:this._isRTL?["right","left"]:["left","right"],i=this._scrollerElement.getBoundingClientRect(),s=(this.items[e+1]||t).getBoundingClientRect(),r=(this.items[e-1]||t).getBoundingClientRect();let a=0;!this._isRTL&&s[o[1]]>=i[o[1]]||this._isRTL&&s[o[1]]<=i[o[1]]?a=s[o[1]]-i[o[1]]:(!this._isRTL&&r[o[0]]<=i[o[0]]||this._isRTL&&r[o[0]]>=i[o[0]])&&(a=r[o[0]]-i[o[0]]),this._scroll(a)}get _vertical(){return"horizontal"!==this.orientation}_scroll(e){if(this._vertical)this._scrollerElement.scrollTop+=e;else{const t=p.detectScrollType(),o=p.getNormalizedScrollLeft(t,this.getAttribute("dir")||"ltr",this._scrollerElement)+e;p.setNormalizedScrollLeft(t,this.getAttribute("dir")||"ltr",this._scrollerElement,o)}}}
 /**
 @license
 Copyright (c) 2017 Vaadin Ltd.
 This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/,N=/Apple.* Version\/(9|10)/.test(navigator.userAgent);class D extends(c(j(p(r([n],t))))){static get template(){return e`
+*/,N=/Apple.* Version\/(9|10)/.test(navigator.userAgent);class D extends(l(L(d(r([n],t))))){static get template(){return e`
     <style>
       :host {
         display: flex;
@@ -574,7 +574,7 @@ This program is available under Apache License Version 2.0, available at https:/
     </div>
 
     <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"),a(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(N&&this.root){const e="-webkit-backface-visibility";this.root.querySelectorAll("*").forEach(t=>{t.style[e]="visible",t.style[e]=""})}}}customElements.define(D.is,D);class V extends y{static get styles(){return _`
+`}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"),a(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(N&&this.root){const e="-webkit-backface-visibility";this.root.querySelectorAll("*").forEach(t=>{t.style[e]="visible",t.style[e]=""})}}}customElements.define(D.is,D);class U extends f{static get styles(){return w`
             :host {
                 display: block;
             }
@@ -586,28 +586,38 @@ This program is available under Apache License Version 2.0, available at https:/
                 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 x`
+        `}render(){return y`
         <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=>x`
+                      ${this.scopes.map(e=>y`
                             <paper-item value="${e}">${e}</paper-item>
                         `)}
                 </paper-listbox>
             </paper-dropdown-menu>
-            <pb-code-editor
-                id="editor"
-                label="Rendition"
-                code="${this.css}"
-                mode="css"
-                @code-changed="${this._handleCodeChange}"></pb-code-editor>
+            <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>
 
@@ -615,7 +625,7 @@ This program is available under Apache License Version 2.0, available at https:/
 
         <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");const e=this.shadowRoot.getElementById("editor");e&&e.refresh()}_remove(e){e.preventDefault(),this.dispatchEvent(new CustomEvent("remove-rendition",{}))}_handleCodeChange(){this.css=this.shadowRoot.getElementById("editor").getSource(),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",V);class U extends y{static get styles(){return _`
+        `}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",U);class V extends f{static get styles(){return w`
             :host {
                 display: block;
             }
@@ -633,24 +643,32 @@ This program is available under Apache License Version 2.0, available at https:/
                 align-self: center;
                 margin-top: 16px;
             }
-        `}render(){return x`
+
+            .editor label {
+                margin-bottom:5px;
+                font-size: 12px;
+                font-weight: 400;
+                color: var(--paper-grey-500);
+            }
+        `}render(){return y`
         <div class="wrapper">
             
-            <paper-autocomplete id="combo" text="${this.name}" placeholder="${d("odd.editor.model.param-name-placeholder")}" label="Name" 
+            <paper-autocomplete id="combo" text="${this.name}" placeholder="${$("odd.editor.model.param-name-placeholder")}" label="Name" 
                 .source="${this._currentParameters}"></paper-autocomplete>
 
-            <pb-code-editor id="editor"
-                        label="Parameter"
+            <div class="editor">
+                <label>Parameter</label>
+                <jinn-codemirror id="editor"
                         mode="xquery"
                         code="${this.value}"
-                        linter="${this.endpoint}/${$(this.apiVersion,"1.0.0")?"modules/editor.xql":"api/lint"}"
-                        apiVersion="${this.apiVersion}"></pb-code-editor>
-            <paper-checkbox id="set" ?checked="${this.setParam}" @change="${this._handleCodeChange}">${d("odd.editor.model.set-param")}</paper-checkbox>
+                        linter="${this.endpoint}/${_(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>
 
         
-        `}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("code-changed",this._handleCodeChange.bind(this))}refreshEditor(){const e=this.shadowRoot.getElementById("editor");e&&e.refresh()}_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").getSource(),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",U);class F extends y{static get styles(){return _`
+        `}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",V);class F extends f{static get styles(){return w`
             :host {
                 display: flex;
                 flex-direction:column;
@@ -827,10 +845,17 @@ This program is available under Apache License Version 2.0, available at https:/
                 background:var(--paper-grey-200);
             }
             
-            pb-code-editor {
+            .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;
@@ -840,7 +865,7 @@ This program is available under Apache License Version 2.0, available at https:/
             #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(){return x`
+        `}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(){return y`
         <form>
             <header> 
                 <h4>
@@ -860,15 +885,15 @@ This program is available under Apache License Version 2.0, available at https:/
                         <paper-icon-button @click="${this._paste}" icon="content-paste"
                                            ?hidden="${this._isModel}"></paper-icon-button>
 
-                        ${this._isGroupOrSequence()?x`
+                        ${this._isGroupOrSequence()?y`
                             <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?x`
+                                   ${"modelSequence"===this.type?y`
                                             <paper-item value="model">model</paper-item>
                                         `:""}
-                                   ${"modelGrp"===this.type?x`
+                                   ${"modelGrp"===this.type?y`
                                             <paper-item value="modelSequence">modelSequence</paper-item>
                                             <paper-item value="model">model</paper-item>
                                         `:""}
@@ -889,59 +914,62 @@ 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=>x`
+                            ${this.outputs.map(e=>y`
                                 <paper-item value="${e}">${e}</paper-item>
                             `)}
 
                         </paper-listbox>
                     </paper-dropdown-menu>
                     <paper-input id="mode" .value="${this.mode}"
-                        placeholder="${d("odd.editor.model.mode-placeholder")}"
+                        placeholder="${$("odd.editor.model.mode-placeholder")}"
                         label="Mode"
                         @change="${this._inputMode}"></paper-input>
                 </div>
-                <paper-input id="desc" .value="${this.desc}" placeholder="${d("odd.editor.model.description-placeholder")}"
+                <paper-input id="desc" .value="${this.desc}" placeholder="${$("odd.editor.model.description-placeholder")}"
                     label="Description" @change="${this._inputDesc}"></paper-input>
 
-                <pb-code-editor id="predicate"
-                     code="${this.predicate}"   
-                     mode="xquery"
-                     linter="${this.endpoint}/${$(this.apiVersion,"1.0.0")<0?"modules/editor.xql":"api/lint"}"
-                     label="Predicate"
-                     placeholder="${d("odd.editor.model.predicate-placeholder")}"
-                     @code-changed="${this._updatePredicate}"
-                     apiVersion="${this.apiVersion}"></pb-code-editor>
+                <div class="editor">
+                    <label>Predicate</label>
+                    <jinn-codemirror id="predicate"
+                        code="${this.predicate}"   
+                        mode="xquery"
+                        linter="${this.endpoint}/${_(this.apiVersion,"1.0.0")<0?"modules/editor.xql":"api/lint"}"
+                        placeholder="${$("odd.editor.model.predicate-placeholder")}"
+                        @update="${this._updatePredicate}"></jinn-codemirror>
+                </div>
                
-                ${this._isModel()?x`
+                ${this._isModel()?y`
                         <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=>x`
+                                        ${this.behaviours.map(e=>y`
                                             <paper-item value="${e}">${e}</paper-item>
                                         `)}
                                     </paper-listbox>
                                 </paper-dropdown-menu>
-                                <span style="align-self:center;justify-self: center;"> ${d("odd.editor.model.link-with-or")} </span>
-                                <paper-input id="custombehaviour" label="" @input="${this._handleCustomBehaviour}" placeHolder="${d("odd.editor.model.custom-behaviour-placeholder")}"></paper-input>
+                                <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="${d("odd.editor.model.css-class-placeholder")}"
+                                placeholder="${$("odd.editor.model.css-class-placeholder")}"
                                 label="CSS Class"
                                 @change="${this._inputCss}"></paper-input>
-                                
-                            <pb-code-editor id="template"
-                                             code="${this.template}"
-                                             mode="${"latex"===this.output?"stex":"xml"}"
-                                             label="Template"
-                                             placeholder="${d("odd.editor.model.template-placeholder")}"
-                                             @code-changed="${this._updateTemplate}"
-                                             apiVersion="${this.apiVersion}"></pb-code-editor>
+                            
+                            <div class="editor">
+                                <label>Template</label>
+                                <jinn-codemirror id="template"
+                                                 code="${this.template}"
+                                                 mode="${"latex"===this.output?"tex":"xml"}"
+                                                 placeholder="${$("odd.editor.model.template-placeholder")}"
+                                                 @update="${this._updateTemplate}">
+                                </jinn-codemirror>
+                            </div>
                         </div>
         
                         <div class="parameters">
@@ -950,7 +978,7 @@ This program is available under Apache License Version 2.0, available at https:/
                                 <paper-icon-button icon="add"
                                                    @click="${this._addParameter}"></paper-icon-button>
                             </div>
-                            ${B(this.parameters,e=>e.name,(e,t)=>x`
+                            ${z(this.parameters,e=>e.name,(e,t)=>y`
                                 <pb-odd-parameter-editor 
                                        behaviour="${this.behaviour}"
                                        name="${e.name}"
@@ -975,7 +1003,7 @@ This program is available under Apache License Version 2.0, available at https:/
                                 </div>
                             </div>
 
-                            ${B(this.renditions,e=>e.name,(e,t)=>x`
+                            ${z(this.renditions,e=>e.name,(e,t)=>y`
                                 <pb-odd-rendition-editor scope="${e.scope}"
                                        css="${e.css}"
                                        @remove-rendition="${e=>this._removeRendition(e,t)}"
@@ -988,7 +1016,7 @@ This program is available under Apache License Version 2.0, available at https:/
             </iron-collapse>
             
             <div class="models">
-                ${B(this.model.models,(e,t)=>x`
+                ${z(this.model.models,(e,t)=>y`
                 <pb-odd-model-editor 
                     behaviour="${e.behaviour||"inline"}"
                     predicate="${e.predicate}"
@@ -1017,7 +1045,7 @@ This program is available under Apache License Version 2.0, available at https:/
             </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.shadowRoot.getElementById("predicate").refresh(),this._isGroupOrSequence())return console.log("asfdfa");this.shadowRoot.getElementById("template").refresh();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.detail.item.getAttribute("value"),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}}))}_removeModel(e){console.log("_removeModel ",e),e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);this.shadowRoot.getElementById("dialog").confirm(l("odd.editor.model.delete-model-label"),l("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(e){this.predicate=this.shadowRoot.getElementById("predicate").getSource(),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").getSource(),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",F);class H extends y{static get styles(){return _`
+        `}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.detail.item.getAttribute("value"),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}}))}_removeModel(e){console.log("_removeModel ",e),e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);this.shadowRoot.getElementById("dialog").confirm(E("odd.editor.model.delete-model-label"),E("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").value,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",F);class H extends f{static get styles(){return w`
             :host {
                 display: block;
                 padding: 4px 10px;
@@ -1091,7 +1119,7 @@ This program is available under Apache License Version 2.0, available at https:/
             .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 x`   
+        `}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 y`   
         <h3>
             <span class="ident">${this.ident}<span class="mode">mode: ${this.mode}</span></span>
             <span class="spacer"></span>
@@ -1114,7 +1142,7 @@ This program is available under Apache License Version 2.0, available at https:/
         </h3>
 
         <div>
-            ${B(this.models,(e,t)=>x`
+            ${z(this.models,(e,t)=>y`
             <pb-odd-model-editor
                 behaviour="${e.behaviour||""}"
                 predicate="${e.predicate}"
@@ -1140,7 +1168,7 @@ This program is available under Apache License Version 2.0, available at https:/
             `)}
         </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(l("odd.editor.model.delete-model-label"),l("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",H);class K extends(m(E(y))){static get styles(){return _`
+        `}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(E("odd.editor.model.delete-model-label"),E("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",H);class K extends(c(x(f))){static get styles(){return w`
             :host {
                 display: flex;
                 /*margin: 30px 20px;*/
@@ -1279,7 +1307,7 @@ This program is available under Apache License Version 2.0, available at https:/
 
             }
 
-        `}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"}}render(){return x`
+        `}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"}}render(){return y`
         <iron-ajax id="loadContent"
                 handle-as="json" content-type="application/x-www-form-urlencoded"
                 with-credentials
@@ -1296,26 +1324,26 @@ This program is available under Apache License Version 2.0, available at https:/
                         <span>${this.odd}</span>
 
                         <span class="icons">
-                            <pb-edit-xml id="editSource"><paper-icon-button icon="code" title="${d("odd.editor.odd-source")}"></paper-icon-button></pb-edit-xml>
-                            <paper-icon-button @click="${this._reload}" icon="refresh" title="${d("odd.editor.reload")}"></paper-icon-button>
-                            <paper-icon-button @click="${this.save}" icon="save" title="${d("odd.editor.save")} ${this.display("save")}" 
+                            <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._reload}" icon="refresh" title="${$("odd.editor.reload")}"></paper-icon-button>
+                            <paper-icon-button @click="${this.save}" 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="${d("odd.editor.add-element")}" always-float-label="always-float-label">
+                        <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="${d("odd.editor.jump-to")}" always-float-label="always-float-label"></paper-autocomplete>
+                        <paper-autocomplete id="jumpTo" label="${$("odd.editor.jump-to")}" always-float-label="always-float-label"></paper-autocomplete>
                     </div>
                     
-                    <h3>${d("odd.editor.specs")}</h3>
+                    <h3>${$("odd.editor.specs")}</h3>
             </div>
             <div id="navlist">
-                ${B(this.elementSpecs,e=>e.ident,(e,t)=>x`
+                ${z(this.elementSpecs,e=>e.ident,(e,t)=>y`
                     <paper-item id="es_${e.ident}"
                         index="${t}"
                         @click="${e=>this._openElementSpec(e,t)}">${e.ident}</paper-item>
@@ -1329,27 +1357,27 @@ This program is available under Apache License Version 2.0, available at https:/
                             ${this._computedTitle()}
                         </h4>
                         <div slot="collapse-content">
-                            <paper-input id="title" name="title" value="${this.title}" label="${d("odd.editor.title")}"
-                                         placeholder="[${d("odd.editor.title-placeholder")}]"
+                            <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="${d("odd.editor.title-short")}"
-                                         placeholder="[${d("odd.editor.title-short-placeholder")}]"
+                            <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="${z(this.description)}" label="${d("odd.editor.description-label")}"
-                                      placeholder="[${d("odd.editor.description-placeholder")}]"
+                            <paper-input id="description" name="description" .value="${B(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="${d("odd.editor.source-label")}"
-                                         placeholder="[${d("odd.editor.source-placeholder")}]"
+                            <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}">${d("odd.editor.use-namespace")}</paper-checkbox>
+                            <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="[${d("odd.editor.namespace-placeholder")}]"
+                                         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="${d("odd.editor.css-source")}"></paper-icon-button></pb-edit-xml>
+                                <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>
@@ -1359,7 +1387,7 @@ This program is available under Apache License Version 2.0, available at https:/
     
                 <div class="editingView">
                     <vaadin-tabs id="tabs" selected="${this.tabIndex}">
-                        ${B(this.tabs,e=>e.id,(e,t)=>x`
+                        ${z(this.tabs,e=>e.id,(e,t)=>y`
                             <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>
@@ -1373,4 +1401,4 @@ This program is available under Apache License Version 2.0, available at https:/
 
         <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"),K.waitOnce("pb-page-ready",()=>{this.load(),this.inited=!0}),this.registerHotkey("save",this.save.bind(this))}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}`;this.loadContent.generateRequest().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 H;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 K.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(l("browse.delete"),l("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(""),d=`${s}${r}${a}${K.serializeTemplate(o,t.template)}${n}`,l=d.length>0?`>\n${d}${e}</${t.type}`:"/";return`${e}<${t.type}${i}${l}>\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}${K.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}="${K.escape(t)}"`:""}static escape(e){return e?"string"==typeof e?e.replace(K.replaceCharRegexp,K.replaceChars):e:""}save(e){document.dispatchEvent(new CustomEvent("pb-start-update"));const t=this.serializeOdd();console.log("serialised ODD:",t),this.shadowRoot.getElementById("dialog").show(l("odd.editor.save"),l("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(this.handleSaveComplete.bind(this)).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){const t=e.response;if("denied"===t.status)return this.shadowRoot.getElementById("dialog").set(l("odd.editor.denied"),l("odd.editor.denied-message",{odd:this.odd})),void document.dispatchEvent(new CustomEvent("pb-end-update"));let o;if(this.lessThanApiVersion("1.0.0")){o=`<div class="list-group">${t.report.map(K._renderReport).join("")}</div>`}else{o=`<div class="list-group">${t.report}</div>`}this.shadowRoot.getElementById("dialog").set(l("odd.editor.saved"),o),document.dispatchEvent(new CustomEvent("pb-end-update"))}handleSaveError(e){this.shadowRoot.getElementById("dialog").set("Error",e.error),document.dispatchEvent(new CustomEvent("pb-end-update"))}_reload(){this.shadowRoot.getElementById("dialog").confirm(l("odd.editor.reload"),l("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){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",K);export{K as PbOddEditor};
+        `}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"),K.waitOnce("pb-page-ready",()=>{this.load(),this.inited=!0}),this.registerHotkey("save",this.save.bind(this))}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}`;this.loadContent.generateRequest().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 H;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 K.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(E("browse.delete"),E("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}${K.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}${K.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}="${K.escape(t)}"`:""}static escape(e){return e?"string"==typeof e?e.replace(K.replaceCharRegexp,K.replaceChars):e:""}save(e){document.dispatchEvent(new CustomEvent("pb-start-update"));const t=this.serializeOdd();console.log("serialised ODD:",t),this.shadowRoot.getElementById("dialog").show(E("odd.editor.save"),E("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(this.handleSaveComplete.bind(this)).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){const t=e.response;if("denied"===t.status)return this.shadowRoot.getElementById("dialog").set(E("odd.editor.denied"),E("odd.editor.denied-message",{odd:this.odd})),void document.dispatchEvent(new CustomEvent("pb-end-update"));let o;if(this.lessThanApiVersion("1.0.0")){o=`<div class="list-group">${t.report.map(K._renderReport).join("")}</div>`}else{o=`<div class="list-group">${t.report}</div>`}this.shadowRoot.getElementById("dialog").set(E("odd.editor.saved"),o),document.dispatchEvent(new CustomEvent("pb-end-update"))}handleSaveError(e){this.shadowRoot.getElementById("dialog").set("Error",e.error),document.dispatchEvent(new CustomEvent("pb-end-update"))}_reload(){this.shadowRoot.getElementById("dialog").confirm(E("odd.editor.reload"),E("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){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",K);export{K as PbOddEditor};