@teipublisher/pb-components 2.10.2 → 2.10.4

package/dist/pb-odd-editor.js

@@ -1,4 +1,4 @@
-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-56ead3d4.js";import{E as d,T as l,D as p,p as c}from"./vaadin-element-mixin-67c5648d.js";import{f as h,N as m,j as u,k as b,l as g,A as v,L as f,c as w,h as y,b as _,w as x,p as $}from"./pb-mixin-d61c06b6.js";import{t as E,g as S}from"./pb-i18n-9000294c.js";import"./jinn-codemirror-da585937.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-56ead3d4.js";import{E as d,T as l,D as c,p}from"./vaadin-element-mixin-67c5648d.js";import{f as h,N as m,j as u,k as b,l as g,A as v,L as f,c as w,h as y,b as _,w as x,p as $}from"./pb-mixin-d61c06b6.js";import{t as E,g as S}from"./pb-i18n-9000294c.js";import"./jinn-codemirror-dc6c3c7c.js";
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -12,7 +12,7 @@ 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-chec
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-const C=(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},k=(e,t)=>(e.setValue(t),e.commit(),e),A=(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)},M=e=>{g(e.startNode.parentNode,e.startNode,e.endNode.nextSibling)},R=(e,t,o)=>{const i=new Map;for(let s=t;s<=o;s++)i.set(e[s],s);return i},I=new WeakMap,z=new WeakMap,P=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=I.get(t)||[],r=z.get(t)||[],a=[],n=[],d=[];let l,p,c=0;for(const t of e)d[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]===d[b])a[b]=k(s[h],n[b]),h++,b++;else if(r[u]===d[g])a[g]=k(s[u],n[g]),u--,g--;else if(r[h]===d[g])a[g]=k(s[h],n[g]),A(t,s[h],a[g+1]),h++,g--;else if(r[u]===d[b])a[b]=k(s[u],n[b]),A(t,s[u],s[h]),u--,b++;else if(void 0===l&&(l=R(d,b,g),p=R(r,h,u)),l.has(r[h]))if(l.has(r[u])){const e=p.get(d[b]),o=void 0!==e?s[e]:null;if(null===o){const e=C(t,s[h]);k(e,n[b]),a[b]=e}else a[b]=k(o,n[b]),A(t,o,s[h]),s[e]=null;b++}else M(s[u]),u--;else M(s[h]),h++;for(;b<=g;){const e=C(t,a[g+1]);k(e,n[b]),a[b++]=e}for(;h<=u;){const e=s[h++];null!==e&&M(e)}I.set(t,a),z.set(t,d)}}),B=new WeakMap,T=h(e=>t=>{const o=B.get(t);if(void 0===e&&t instanceof v){if(void 0!==o||!B.has(t)){const e=t.committer.name;t.committer.element.removeAttribute(e)}}else e!==o&&t.setValue(e);B.set(t,e)}),O=e`<dom-module id="lumo-tab" theme-for="vaadin-tab">
+const C=(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},k=(e,t)=>(e.setValue(t),e.commit(),e),A=(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)},M=e=>{g(e.startNode.parentNode,e.startNode,e.endNode.nextSibling)},R=(e,t,o)=>{const i=new Map;for(let s=t;s<=o;s++)i.set(e[s],s);return i},I=new WeakMap,z=new WeakMap,P=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=I.get(t)||[],r=z.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,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]===d[b])a[b]=k(s[h],n[b]),h++,b++;else if(r[u]===d[g])a[g]=k(s[u],n[g]),u--,g--;else if(r[h]===d[g])a[g]=k(s[h],n[g]),A(t,s[h],a[g+1]),h++,g--;else if(r[u]===d[b])a[b]=k(s[u],n[b]),A(t,s[u],s[h]),u--,b++;else if(void 0===l&&(l=R(d,b,g),c=R(r,h,u)),l.has(r[h]))if(l.has(r[u])){const e=c.get(d[b]),o=void 0!==e?s[e]:null;if(null===o){const e=C(t,s[h]);k(e,n[b]),a[b]=e}else a[b]=k(o,n[b]),A(t,o,s[h]),s[e]=null;b++}else M(s[u]),u--;else M(s[h]),h++;for(;b<=g;){const e=C(t,a[g+1]);k(e,n[b]),a[b++]=e}for(;h<=u;){const e=s[h++];null!==e&&M(e)}I.set(t,a),z.set(t,d)}}),B=new WeakMap,T=h(e=>t=>{const o=B.get(t);if(void 0===e&&t instanceof v){if(void 0!==o||!B.has(t)){const e=t.committer.name;t.committer.element.removeAttribute(e)}}else e!==o&&t.setValue(e);B.set(t,e)}),O=e`<dom-module id="lumo-tab" theme-for="vaadin-tab">
   <template>
     <style>
       :host {
@@ -483,7 +483,7 @@ This program is available under Apache License Version 2.0, available at https:/
 Copyright (c) 2017 Vaadin Ltd.
 This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
-const N=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)}}}
+const N=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=c.detectScrollType(),o=c.getNormalizedScrollLeft(t,this.getAttribute("dir")||"ltr",this._scrollerElement)+e;c.setNormalizedScrollLeft(t,this.getAttribute("dir")||"ltr",this._scrollerElement,o)}}}
 /**
 @license
 Copyright (c) 2017 Vaadin Ltd.
@@ -882,8 +882,7 @@ This program is available under Apache License Version 2.0, available at https:/
                                            title="move up"></paper-icon-button>
                         <paper-icon-button @click="${this._requestRemoval}" icon="delete" title="remove"></paper-icon-button>
                         <paper-icon-button @click="${this._copy}" icon="content-copy" title="copy"></paper-icon-button>
-                        <paper-icon-button @click="${this._paste}" icon="content-paste"
-                                           ?hidden="${this._isModel}"></paper-icon-button>
+                        <paper-icon-button @click="${this._paste}" icon="content-paste"></paper-icon-button>
 
                         ${this._isGroupOrSequence()?y`
                             <paper-menu-button horizontal-align="right">
@@ -1060,7 +1059,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._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(S("odd.editor.model.delete-model-label"),S("odd.editor.model.delete-model-message")).then(()=>{const e=this.model,t=Array.from(this.model.models);t.splice(o,1),this.model=Object.assign({},e,{models:t}),this.models=t,this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:e,newModel:this.model}}))},()=>null)}_moveModelDown(e){console.log("MODEL._moveModelDown ",e),e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);if(o===this.model.models.length)return;const i=this.model,s=Array.from(this.model.models);s.splice(o,1),s.splice(o+1,0,t),this.model=Object.assign({},i,{models:s});const r=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o+1];this._setCurrentSelection(o+1,r),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:i,newModel:this.model}})),this.requestUpdate()}_moveModelUp(e){e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);if(0===o)return;const i=this.model,s=Array.from(this.model.models);s.splice(o,1),s.splice(o-1,0,t),this.model=Object.assign({},i,{models:s});const r=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o-1];this._setCurrentSelection(o-1,r),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:i,newModel:this.model}}))}handleModelChanged(e){console.log("handleModelChanged ",e,this),e.stopPropagation();const t=this.model,o=this.model.models.indexOf(e.detail.oldModel),i=Array.from(this.model.models);i.splice(o,1,e.detail.newModel),this.model=Object.assign({},t,{models:i}),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:t,newModel:this.model}}))}setCurrentSelection(e,t){e.preventDefault(),e.stopPropagation(),this._setCurrentSelection(t,e.target)}_setCurrentSelection(e,t){const o=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[e];o&&(o.hasAttribute("currentselection")||(this.dispatchEvent(new CustomEvent("current-changed",{composed:!0,bubbles:!0,detail:{target:t}})),this.requestUpdate()))}_inputDesc(e){this.desc=e.composedPath()[0].value,this._fireModelChanged("desc",this.desc)}_selectOutput(e){this.output=e.composedPath()[0].selected,this._fireModelChanged("output",this.output)}_updatePredicate(){this.predicate=this.shadowRoot.getElementById("predicate").value,console.log("_updatePredicate ",this.predicate),this._fireModelChanged("predicate",this.predicate)}_selectBehaviour(e){this.behaviour=e.composedPath()[0].selected,this._fireModelChanged("behaviour",this.behaviour)}_inputCss(e){this.css=e.composedPath()[0].value,this._fireModelChanged("css",this.css)}_inputMode(e){this.mode=e.composedPath()[0].value,this._fireModelChanged("mode",this.mode)}_updateTemplate(e){this.template=this.shadowRoot.getElementById("template").content,this._fireModelChanged("template",this.template)}_addParameter(e){this.parameters.push({name:"",value:""}),this._fireModelChanged("parameters",this.parameters)}_updateParam(e,t){this.parameters[t].name=e.detail.name,this.parameters[t].value=e.detail.value,this.parameters[t].set=e.detail.set,this._fireModelChanged("parameters",this.parameters)}_removeParam(e,t){this.parameters.splice(t,1),this._fireModelChanged("parameters",this.parameters)}_addRendition(e){this.renditions.push({scope:"",css:""}),this._fireModelChanged("renditions",this.renditions)}_updateRendition(e,t){this.renditions[t].css=e.detail.css,this.renditions[t].scope=e.detail.scope,this._fireModelChanged("renditions",this.renditions)}_removeRendition(e,t){this.renditions.splice(t,1),this._fireModelChanged("renditions",this.renditions)}_fireModelChanged(e,t){const o=this.model;this.model=Object.assign({},this.model,{[e]:t}),console.log("model changed for %s: %o - %o",e,t,this.model),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:o,newModel:this.model}})),this.requestUpdate()}_copy(e){e.preventDefault(),e.stopPropagation(),console.log("odd-model.copy ",e),console.log("odd-model.copy data",this.model),this.dispatchEvent(new CustomEvent("odd-copy",{composed:!0,bubbles:!0,detail:{model:this.model}}))}_paste(e){console.log("model _paste ",e),this.dispatchEvent(new CustomEvent("odd-paste",{composed:!0,bubbles:!0,detail:{target:this}}))}_handleCustomBehaviour(e){this.behaviour=e.composedPath()[0].value,this._fireModelChanged("behaviour",this.behaviour),""===this.behaviour?(this.behaviour="inline",this.hasCustomBehaviour=!1):this.hasCustomBehaviour=!0,this.requestUpdate()}}customElements.define("pb-odd-model-editor",H);class K extends f{static get styles(){return w`
+        `}firstUpdated(){super.firstUpdated(),this.hasCustomBehaviour=this.behaviours.indexOf(this.behaviour)<0,this.hasCustomBehaviour&&(this.shadowRoot.getElementById("custombehaviour").value=this.behaviour)}updated(e){e.has("show")&&this.show&&this.refreshEditors()}refreshEditors(){if(console.log("refreshEditors"),this._isGroupOrSequence())return console.log("asfdfa");const e=this.shadowRoot.querySelectorAll("pb-odd-model-editor");for(let t=0;t<e.length;t++)e[t].refreshEditors();const t=this.shadowRoot.querySelectorAll("pb-odd-rendition-editor");for(let e=0;e<t.length;e++)t[e].refreshEditor();const o=this.shadowRoot.querySelectorAll("pb-odd-parameter-editor");for(let e=0;e<o.length;e++)o[e].refreshEditor()}toggle(e){this.show=!this.show,this.toggleButtonIcon();const t=this.model,o=Object.assign({},t,{show:this.show});this.model=o,this.refreshEditors(),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:t,newModel:o}}))}toggleButtonIcon(){this.show?this.icon="expand-less":this.icon="expand-more"}_isModel(){return"model"===this.type}_isGroupOrSequence(){return"model"!==this.type}static _templateMode(e){switch(e){case"latex":return"latex";case"web":default:return"xml"}}_changeSelection(e){if(e.detail.target==this)return;e.preventDefault(),e.stopPropagation(),null!=this.currentSelection&&this.currentSelection.removeAttribute("currentselection");const t=e.detail.target;t.setAttribute("currentselection","true"),this.currentSelection=t}_requestRemoval(e){e.preventDefault(),this.dispatchEvent(new CustomEvent("model-remove"))}_moveDown(e){e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent("model-move-down",{composed:!0,bubbles:!0,detail:{model:this}}))}_moveUp(e){e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent("model-move-up"))}_addNested(e){const t={behaviour:"inline",css:"",desc:"",predicate:"",type:e instanceof Event?e.detail.item.getAttribute("value"):e,output:"",sourcerend:!1,models:[],mode:"",parameters:[],renditions:[],template:"",show:!0},o=this.model,i=Array.from(this.model.models);i.unshift(t),this.model=Object.assign({},o,{models:i});this.shadowRoot.querySelector("#modelType").select(""),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:o,newModel:this.model}}))}addModel(e){"model"===e.type?(this.model.models.unshift(e),this.requestUpdate()):console.error("only models can be added to modelSequence or modelGrp")}_removeModel(e){console.log("_removeModel ",e),e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);this.shadowRoot.getElementById("dialog").confirm(S("odd.editor.model.delete-model-label"),S("odd.editor.model.delete-model-message")).then(()=>{const e=this.model,t=Array.from(this.model.models);t.splice(o,1),this.model=Object.assign({},e,{models:t}),this.models=t,this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:e,newModel:this.model}}))},()=>null)}_moveModelDown(e){console.log("MODEL._moveModelDown ",e),e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);if(o===this.model.models.length)return;const i=this.model,s=Array.from(this.model.models);s.splice(o,1),s.splice(o+1,0,t),this.model=Object.assign({},i,{models:s});const r=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o+1];this._setCurrentSelection(o+1,r),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:i,newModel:this.model}})),this.requestUpdate()}_moveModelUp(e){e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);if(0===o)return;const i=this.model,s=Array.from(this.model.models);s.splice(o,1),s.splice(o-1,0,t),this.model=Object.assign({},i,{models:s});const r=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o-1];this._setCurrentSelection(o-1,r),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:i,newModel:this.model}}))}handleModelChanged(e){console.log("handleModelChanged ",e,this),e.stopPropagation();const t=this.model,o=this.model.models.indexOf(e.detail.oldModel),i=Array.from(this.model.models);i.splice(o,1,e.detail.newModel),this.model=Object.assign({},t,{models:i}),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:t,newModel:this.model}}))}setCurrentSelection(e,t){e.preventDefault(),e.stopPropagation(),this._setCurrentSelection(t,e.target)}_setCurrentSelection(e,t){const o=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[e];o&&(o.hasAttribute("currentselection")||(this.dispatchEvent(new CustomEvent("current-changed",{composed:!0,bubbles:!0,detail:{target:t}})),this.requestUpdate()))}_inputDesc(e){this.desc=e.composedPath()[0].value,this._fireModelChanged("desc",this.desc)}_selectOutput(e){this.output=e.composedPath()[0].selected,this._fireModelChanged("output",this.output)}_updatePredicate(){this.predicate=this.shadowRoot.getElementById("predicate").value,console.log("_updatePredicate ",this.predicate),this._fireModelChanged("predicate",this.predicate)}_selectBehaviour(e){this.behaviour=e.composedPath()[0].selected,this._fireModelChanged("behaviour",this.behaviour)}_inputCss(e){this.css=e.composedPath()[0].value,this._fireModelChanged("css",this.css)}_inputMode(e){this.mode=e.composedPath()[0].value,this._fireModelChanged("mode",this.mode)}_updateTemplate(e){this.template=this.shadowRoot.getElementById("template").content,this._fireModelChanged("template",this.template)}_addParameter(e){this.parameters.push({name:"",value:""}),this._fireModelChanged("parameters",this.parameters)}_updateParam(e,t){this.parameters[t].name=e.detail.name,this.parameters[t].value=e.detail.value,this.parameters[t].set=e.detail.set,this._fireModelChanged("parameters",this.parameters)}_removeParam(e,t){this.parameters.splice(t,1),this._fireModelChanged("parameters",this.parameters)}_addRendition(e){this.renditions.push({scope:"",css:""}),this._fireModelChanged("renditions",this.renditions)}_updateRendition(e,t){this.renditions[t].css=e.detail.css,this.renditions[t].scope=e.detail.scope,this._fireModelChanged("renditions",this.renditions)}_removeRendition(e,t){this.renditions.splice(t,1),this._fireModelChanged("renditions",this.renditions)}_fireModelChanged(e,t){const o=this.model;this.model=Object.assign({},this.model,{[e]:t}),console.log("model changed for %s: %o - %o",e,t,this.model),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:o,newModel:this.model}})),this.requestUpdate()}_copy(e){e.preventDefault(),e.stopPropagation(),console.log("odd-model.copy ",e),console.log("odd-model.copy data",this.model),this.dispatchEvent(new CustomEvent("odd-copy",{composed:!0,bubbles:!0,detail:{model:this.model}}))}_paste(e){console.log("model _paste ",e),this.dispatchEvent(new CustomEvent("odd-paste",{composed:!0,bubbles:!0,detail:{target:this}}))}_handleCustomBehaviour(e){this.behaviour=e.composedPath()[0].value,this._fireModelChanged("behaviour",this.behaviour),""===this.behaviour?(this.behaviour="inline",this.hasCustomBehaviour=!1):this.hasCustomBehaviour=!0,this.requestUpdate()}}customElements.define("pb-odd-model-editor",H);class K extends f{static get styles(){return w`
             :host {
                 display: block;
                 padding: 4px 10px;
@@ -1183,7 +1182,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(S("odd.editor.model.delete-model-label"),S("odd.editor.model.delete-model-message")).then(()=>{const e=Array.from(this.models);e.splice(o,1),this.models=e,this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}}))},()=>null)}_moveModelDown(e){console.log("ELEMENTSPEC._moveModelDown ",e),e.stopPropagation();const{model:t}=e.target,o=this.models.indexOf(t);if(o===this.models.length)return;const i=Array.from(this.models);i.splice(o,1),i.splice(o+1,0,t),this.models=i;const s=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o+1];s&&(this._setCurrentSelection(o+1,s),this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}})))}_moveModelUp(e){e.stopPropagation();const{model:t}=e.target,o=this.models.indexOf(t);if(0===o)return;const i=Array.from(this.models);i.splice(o,1),i.splice(o-1,0,t),this.models=i;const s=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o-1];this._setCurrentSelection(o-1,s),this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}}))}handleModelChanged(e){e.stopPropagation();const t=this.models.indexOf(e.detail.oldModel),o=Array.from(this.models);o.splice(t,1,e.detail.newModel),this.models=o,this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}})),this.requestUpdate()}}customElements.define("pb-odd-elementspec-editor",K);class W extends(c($(f))){static get styles(){return w`
+        `}addModel(e){this.models.unshift(e),this.requestUpdate()}_addModel(e){console.log("ELEMENTSPEC._addModel ",e);const t=this.shadowRoot.getElementById("addModel"),o={behaviour:"inline",css:"",mode:"",predicate:"",desc:"",type:t.selected,output:"",template:"",sourcerend:!1,models:[],parameters:[],renditions:[],show:!0},i=Array.from(this.models);i.unshift(o),this.models=i,this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}})),t.selected="",this.requestUpdate()}_remove(e){this.dispatchEvent(new CustomEvent("element-spec-removed",{composed:!0,bubbles:!0,detail:{target:this}}))}_paste(e){console.log("_paste ",e),this.dispatchEvent(new CustomEvent("odd-paste",{composed:!0,bubbles:!0,detail:{target:this}}))}setCurrentSelection(e,t){e.preventDefault(),e.stopPropagation(),this._setCurrentSelection(t,e.target)}_setCurrentSelection(e,t){const o=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[e];o&&(o.hasAttribute("currentselection")||(this.dispatchEvent(new CustomEvent("current-changed",{composed:!0,bubbles:!0,detail:{target:t}})),this.requestUpdate()))}_removeModel(e){console.log("_removeModel ",e),e.stopPropagation();const{model:t}=e.target,o=this.models.indexOf(t);this.shadowRoot.getElementById("dialog").confirm(S("odd.editor.model.delete-model-label"),S("odd.editor.model.delete-model-message")).then(()=>{const e=Array.from(this.models);e.splice(o,1),this.models=e,this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}}))},()=>null)}_moveModelDown(e){console.log("ELEMENTSPEC._moveModelDown ",e),e.stopPropagation();const{model:t}=e.target,o=this.models.indexOf(t);if(o===this.models.length)return;const i=Array.from(this.models);i.splice(o,1),i.splice(o+1,0,t),this.models=i;const s=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o+1];s&&(this._setCurrentSelection(o+1,s),this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}})))}_moveModelUp(e){e.stopPropagation();const{model:t}=e.target,o=this.models.indexOf(t);if(0===o)return;const i=Array.from(this.models);i.splice(o,1),i.splice(o-1,0,t),this.models=i;const s=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o-1];this._setCurrentSelection(o-1,s),this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}}))}handleModelChanged(e){e.stopPropagation();const t=this.models.indexOf(e.detail.oldModel),o=Array.from(this.models);o.splice(t,1,e.detail.newModel),this.models=o,this.dispatchEvent(new CustomEvent("element-spec-changed",{composed:!0,bubbles:!0,detail:{action:"models",ident:this.ident,models:this.models}})),this.requestUpdate()}}customElements.define("pb-odd-elementspec-editor",K);class W extends(p($(f))){static get styles(){return w`
             :host {
                 display: flex;
                 /*margin: 30px 20px;*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@babel/runtime": "7.11.2",
     "@cwmr/paper-autocomplete": "^4.0.0",
-    "@jinntec/jinn-codemirror": "^1.13.4",
+    "@jinntec/jinn-codemirror": "^1.13.5",
     "@lrnwebcomponents/es-global-bridge": "^2.7.10",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-ajax": "^3.0.1",
@@ -87,7 +87,7 @@
     "prismjs": "^1.21.0",
     "tify": "^0.28.1",
     "tippy.js": "^6.2.7",
-    "tom-select": "^2.0.2",
+    "tom-select": "^2.2.2",
     "uniqolor": "^1.1.0",
     "web-animations-js": "^2.3.2"
   },

package/pb-elements.json

@@ -2722,6 +2722,12 @@
           "type": "string",
           "default": "\"pb-combo-box-change\""
         },
+        {
+          "name": "placeholder",
+          "description": "The placeholder text to display in the control. May contain text or an i18n key to be\ntranslated automatically.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -2804,6 +2810,13 @@
           "type": "string",
           "default": "\"pb-combo-box-change\""
         },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "The placeholder text to display in the control. May contain text or an i18n key to be\ntranslated automatically.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",

package/src/pb-combo-box.js

@@ -2,6 +2,7 @@ import { LitElement } from 'lit-element';
 import TomSelect from "tom-select";
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
+import { get as i18n } from "./pb-i18n.js";
 
 function importTheme(theme) {
     if (document.getElementById('__pb-multi-select-css')) {
@@ -16,7 +17,7 @@ function importTheme(theme) {
 }
 
 const renderDefault = (data) =>
-    data ? `<div>${data.text}</div>` : '';
+    data ? `<div>${i18n(data.text)}</div>` : '';
 
 /**
  * Provides a combo box, i.e. a combination of an input with a dropdown.
@@ -31,6 +32,13 @@ export class PbComboBox extends pbMixin(LitElement) {
     static get properties() {
         return {
             ...super.properties,
+            /**
+             * The placeholder text to display in the control. May contain text or an i18n key to be
+             * translated automatically.
+             */
+            placeholder: {
+                type: String
+            },
             /**
              * A remote data source to use. The component will pass the text entered by the user
              * in parameter `query`. It expects a JSON array of objects with each object describing
@@ -96,10 +104,24 @@ export class PbComboBox extends pbMixin(LitElement) {
         this.renderFunction = renderDefault;
         this.onBlur = 'pb-combo-box-blur';
         this.onChange = 'pb-combo-box-change';
+        this.placeholder = '';
     }
 
     connectedCallback() {
         super.connectedCallback();
+        this.subscribeTo('pb-i18n-update', () => {
+            if (this._select) {
+                this._select.settings.placeholder = i18n(this.placeholder);
+                this._select.inputState();
+
+                if (this.source) {
+                    this._select.refreshOptions(false);
+                } else {
+                    this._select.clearOptions();
+                    this._select.sync();
+                }
+            }
+        });
     }
 
     firstUpdated() {
@@ -140,9 +162,12 @@ export class PbComboBox extends pbMixin(LitElement) {
                     item: this.renderFunction
                 };
             }
+            options.placeholder = i18n(this.placeholder);
             options.closeAfterSelect = this.closeAfterSelect;
             options.onBlur = () => this.emitTo(this.onBlur);
             options.onChange = () => this.emitTo(this.onChange);
+            options.plugins = ['change_listener'];
+
             this._select = new TomSelect(input, options);
         });
     }

package/src/pb-odd-model-editor.js

@@ -440,8 +440,7 @@ export class PbOddModelEditor extends LitElement {
                                            title="move up"></paper-icon-button>
                         <paper-icon-button @click="${this._requestRemoval}" icon="delete" title="remove"></paper-icon-button>
                         <paper-icon-button @click="${this._copy}" icon="content-copy" title="copy"></paper-icon-button>
-                        <paper-icon-button @click="${this._paste}" icon="content-paste"
-                                           ?hidden="${this._isModel}"></paper-icon-button>
+                        <paper-icon-button @click="${this._paste}" icon="content-paste"></paper-icon-button>
 
                         ${this._isGroupOrSequence() ?
                 html`
@@ -759,7 +758,7 @@ export class PbOddModelEditor extends LitElement {
             css: '',
             desc: '',
             predicate: '',
-            type: e.detail.item.getAttribute('value'),
+            type: e instanceof Event ? e.detail.item.getAttribute('value') : e,
             output: '',
             sourcerend: false,
             models: [],
@@ -783,6 +782,15 @@ export class PbOddModelEditor extends LitElement {
         this.dispatchEvent(new CustomEvent('model-changed', { composed: true, bubbles: true, detail: { oldModel, newModel: this.model } }));
     }
 
+    addModel(newModel) {
+        if (newModel.type !== 'model') {
+            console.error('only models can be added to modelSequence or modelGrp');
+            return;
+        }
+        this.model.models.unshift(newModel);
+        this.requestUpdate();
+    }
+
     _removeModel(ev) {
         console.log('_removeModel ', ev);
         ev.stopPropagation();