@teipublisher/pb-components/dist/pb-odd-editor.js

Collection of webcomponents underlying TEI Publisher

import{h as e,g as t,F as o,D as i,x as s,y as r,c as a}from"./paper-checkbox-c9177e35.js";import{a as n}from"./paper-listbox-1fc346ac.js";import{E as l,T as d,D as c,p}from"./vaadin-element-mixin-96dff806.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 y,h as w,b as _,w as x,p as E}from"./pb-mixin-e1183270.js";import{t as $,g as S}from"./pb-i18n-b62828ba.js";import"./paper-icon-button-c15eb1cf.js";import"./jinn-codemirror-63cf45e9.js";const k=(()=>{if("undefined"==typeof self)return!1;if("top"in self&&self!==top)try{top}catch(e){return!1}return"showOpenFilePicker"in self})(),C=(k?Promise.resolve().then((function(){return P})):Promise.resolve().then((function(){return B})),k?Promise.resolve().then((function(){return T})):Promise.resolve().then((function(){return z})),k?Promise.resolve().then((function(){return O})):Promise.resolve().then((function(){return j})));async function A(...e){return(await C).default(...e)}const R=async e=>{const t=await e.getFile();return t.handle=e,t};var P={__proto__:null,default:async(e=[{}])=>{Array.isArray(e)||(e=[e]);const t=[];e.forEach((e,o)=>{t[o]={description:e.description||"Files",accept:{}},e.mimeTypes?e.mimeTypes.map(i=>{t[o].accept[i]=e.extensions||[]}):t[o].accept["*/*"]=e.extensions||[]});const o=await window.showOpenFilePicker({id:e[0].id,startIn:e[0].startIn,types:t,multiple:e[0].multiple||!1,excludeAcceptAllOption:e[0].excludeAcceptAllOption||!1}),i=await Promise.all(o.map(R));return e[0].multiple?i:i[0]}};function M(e){function t(e){if(Object(e)!==e)return Promise.reject(new TypeError(e+" is not an object."));var t=e.done;return Promise.resolve(e.value).then((function(e){return{value:e,done:t}}))}return(M=function(e){this.s=e,this.n=e.next}).prototype={s:null,n:null,next:function(){return t(this.n.apply(this.s,arguments))},return:function(e){var o=this.s.return;return void 0===o?Promise.resolve({value:e,done:!0}):t(o.apply(this.s,arguments))},throw:function(e){var o=this.s.return;return void 0===o?Promise.reject(e):t(o.apply(this.s,arguments))}},new M(e)}const I=async(e,t,o=e.name,i)=>{const s=[],r=[];var a,n=!1,l=!1;try{for(var d,c=function(e){var t,o,i,s=2;for("undefined"!=typeof Symbol&&(o=Symbol.asyncIterator,i=Symbol.iterator);s--;){if(o&&null!=(t=e[o]))return t.call(e);if(i&&null!=(t=e[i]))return new M(t.call(e));o="@@asyncIterator",i="@@iterator"}throw new TypeError("Object is not async iterable")}(e.values());n=!(d=await c.next()).done;n=!1){const a=d.value,n=`${o}/${a.name}`;"file"===a.kind?r.push(a.getFile().then(t=>(t.directoryHandle=e,t.handle=a,Object.defineProperty(t,"webkitRelativePath",{configurable:!0,enumerable:!0,get:()=>n})))):"directory"!==a.kind||!t||i&&i(a)||s.push(I(a,t,n,i))}}catch(e){l=!0,a=e}finally{try{n&&null!=c.return&&await c.return()}finally{if(l)throw a}}return[...(await Promise.all(s)).flat(),...await Promise.all(r)]};var T={__proto__:null,default:async(e={})=>{e.recursive=e.recursive||!1,e.mode=e.mode||"read";const t=await window.showDirectoryPicker({id:e.id,startIn:e.startIn,mode:e.mode});return(await(await t.values()).next()).done?[t]:I(t,e.recursive,void 0,e.skipDirectory)}},O={__proto__:null,default:async(e,t=[{}],o=null,i=!1,s=null)=>{Array.isArray(t)||(t=[t]),t[0].fileName=t[0].fileName||"Untitled";const r=[];let a=null;if(e instanceof Blob&&e.type?a=e.type:e.headers&&e.headers.get("content-type")&&(a=e.headers.get("content-type")),t.forEach((e,t)=>{r[t]={description:e.description||"Files",accept:{}},e.mimeTypes?(0===t&&a&&e.mimeTypes.push(a),e.mimeTypes.map(o=>{r[t].accept[o]=e.extensions||[]})):a?r[t].accept[a]=e.extensions||[]:r[t].accept["*/*"]=e.extensions||[]}),o)try{await o.getFile()}catch(e){if(o=null,i)throw e}const n=o||await window.showSaveFilePicker({suggestedName:t[0].fileName,id:t[0].id,startIn:t[0].startIn,types:r,excludeAcceptAllOption:t[0].excludeAcceptAllOption||!1});!o&&s&&s(n);const l=await n.createWritable();if("stream"in e){const t=e.stream();return await t.pipeTo(l),n}return"body"in e?(await e.body.pipeTo(l),n):(await l.write(await e),await l.close(),n)}},B={__proto__:null,default:async(e=[{}])=>(Array.isArray(e)||(e=[e]),new Promise((t,o)=>{const i=document.createElement("input");i.type="file";const s=[...e.map(e=>e.mimeTypes||[]),...e.map(e=>e.extensions||[])].join();i.multiple=e[0].multiple||!1,i.accept=s||"",i.style.display="none",document.body.append(i);const r=e=>{"function"==typeof a&&a(),t(e)},a=e[0].legacySetup&&e[0].legacySetup(r,()=>a(o),i),n=()=>{window.removeEventListener("focus",n),i.remove()};i.addEventListener("click",()=>{window.addEventListener("focus",n)}),i.addEventListener("change",()=>{window.removeEventListener("focus",n),i.remove(),r(i.multiple?Array.from(i.files):i.files[0])}),"showPicker"in HTMLInputElement.prototype?i.showPicker():i.click()}))},z={__proto__:null,default:async(e=[{}])=>(Array.isArray(e)||(e=[e]),e[0].recursive=e[0].recursive||!1,new Promise((t,o)=>{const i=document.createElement("input");i.type="file",i.webkitdirectory=!0;const s=e=>{"function"==typeof r&&r(),t(e)},r=e[0].legacySetup&&e[0].legacySetup(s,()=>r(o),i);i.addEventListener("change",()=>{let t=Array.from(i.files);e[0].recursive?e[0].recursive&&e[0].skipDirectory&&(t=t.filter(t=>t.webkitRelativePath.split("/").every(t=>!e[0].skipDirectory({name:t,kind:"directory"})))):t=t.filter(e=>2===e.webkitRelativePath.split("/").length),s(t)}),"showPicker"in HTMLInputElement.prototype?i.showPicker():i.click()}))},j={__proto__:null,default:async(e,t={})=>{Array.isArray(t)&&(t=t[0]);const o=document.createElement("a");let i=e;"body"in e&&(i=await async function(e,t){const o=e.getReader(),i=new ReadableStream({start:e=>async function t(){return o.read().then(({done:o,value:i})=>{if(!o)return e.enqueue(i),t();e.close()})}()}),s=new Response(i),r=await s.blob();return o.releaseLock(),new Blob([r],{type:t})}(e.body,e.headers.get("content-type"))),o.download=t.fileName||"Untitled",o.href=URL.createObjectURL(await i);const s=()=>{"function"==typeof r&&r()},r=t.legacySetup&&t.legacySetup(s,()=>r(),o);return o.addEventListener("click",()=>{setTimeout(()=>URL.revokeObjectURL(o.href),3e4),s()}),o.click(),null}};
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */const L=(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},q=(e,t)=>(e.setValue(t),e.commit(),e),N=(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)},D=e=>{g(e.startNode.parentNode,e.startNode,e.endNode.nextSibling)},U=(e,t,o)=>{const i=new Map;for(let s=t;s<=o;s++)i.set(e[s],s);return i},F=new WeakMap,V=new WeakMap,H=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=F.get(t)||[],r=V.get(t)||[],a=[],n=[],l=[];let d,c,p=0;for(const t of e)l[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]===l[b])a[b]=q(s[h],n[b]),h++,b++;else if(r[u]===l[g])a[g]=q(s[u],n[g]),u--,g--;else if(r[h]===l[g])a[g]=q(s[h],n[g]),N(t,s[h],a[g+1]),h++,g--;else if(r[u]===l[b])a[b]=q(s[u],n[b]),N(t,s[u],s[h]),u--,b++;else if(void 0===d&&(d=U(l,b,g),c=U(r,h,u)),d.has(r[h]))if(d.has(r[u])){const e=c.get(l[b]),o=void 0!==e?s[e]:null;if(null===o){const e=L(t,s[h]);q(e,n[b]),a[b]=e}else a[b]=q(o,n[b]),N(t,o,s[h]),s[e]=null;b++}else D(s[u]),u--;else D(s[h]),h++;for(;b<=g;){const e=L(t,a[g+1]);q(e,n[b]),a[b++]=e}for(;h<=u;){const e=s[h++];null!==e&&D(e)}F.set(t,a),V.set(t,l)}}),K=new WeakMap,W=h(e=>t=>{const o=K.get(t);if(void 0===e&&t instanceof v){if(void 0!==o||!K.has(t)){const e=t.committer.name;t.committer.element.removeAttribute(e)}}else e!==o&&t.setValue(e);K.set(t,e)}),G=e`<dom-module id="lumo-tab" theme-for="vaadin-tab">
  <template>
    <style>
      :host {
        box-sizing: border-box;
        padding: 0.5rem 0.75rem;
        font-family: var(--lumo-font-family);
        font-size: var(--lumo-font-size-m);
        line-height: var(--lumo-line-height-xs);
        font-weight: 500;
        opacity: 1;
        color: var(--lumo-contrast-60pct);
        transition: 0.15s color, 0.2s transform;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        transform-origin: 50% 100%;
        outline: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow: hidden;
        min-width: var(--lumo-size-m);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      :host(:not([orientation="vertical"])) {
        text-align: center;
      }

      :host([orientation="vertical"]) {
        transform-origin: 0% 50%;
        padding: 0.25rem 1rem;
        min-height: var(--lumo-size-m);
        min-width: 0;
      }

      :host(:hover),
      :host([focus-ring]) {
        color: var(--lumo-body-text-color);
      }

      :host([selected]) {
        color: var(--lumo-primary-text-color);
        transition: 0.6s color;
      }

      :host([active]:not([selected])) {
        color: var(--lumo-primary-text-color);
        transition-duration: 0.1s;
      }

      :host::before,
      :host::after {
        content: "";
        position: absolute;
        display: var(--_lumo-tab-marker-display, block);
        bottom: 0;
        left: 50%;
        width: var(--lumo-size-s);
        height: 2px;
        background-color: var(--lumo-contrast-60pct);
        border-radius: var(--lumo-border-radius) var(--lumo-border-radius) 0 0;
        transform: translateX(-50%) scale(0);
        transform-origin: 50% 100%;
        transition: 0.14s transform cubic-bezier(.12, .32, .54, 1);
        will-change: transform;
      }

      :host([selected])::before,
      :host([selected])::after {
        background-color: var(--lumo-primary-color);
      }

      :host([orientation="vertical"])::before,
      :host([orientation="vertical"])::after {
        left: 0;
        bottom: 50%;
        transform: translateY(50%) scale(0);
        width: 2px;
        height: var(--lumo-size-xs);
        border-radius: 0 var(--lumo-border-radius) var(--lumo-border-radius) 0;
        transform-origin: 100% 50%;
      }

      :host::after {
        box-shadow: 0 0 0 4px var(--lumo-primary-color);
        opacity: 0.15;
        transition: 0.15s 0.02s transform, 0.8s 0.17s opacity;
      }

      :host([selected])::before,
      :host([selected])::after {
        transform: translateX(-50%) scale(1);
        transition-timing-function: cubic-bezier(.12, .32, .54, 1.5);
      }

      :host([orientation="vertical"][selected])::before,
      :host([orientation="vertical"][selected])::after {
        transform: translateY(50%) scale(1);
      }

      :host([selected]:not([active]))::after {
        opacity: 0;
      }

      :host(:not([orientation="vertical"])) ::slotted(a[href]) {
        justify-content: center;
      }

      :host ::slotted(a) {
        display: flex;
        width: 100%;
        align-items: center;
        height: 100%;
        margin: -0.5rem -0.75rem;
        padding: 0.5rem 0.75rem;
        outline: none;

        /*
          Override the CSS inherited from \`lumo-color\` and \`lumo-typography\`.
          Note: \`!important\` is needed because of the \`:slotted\` specificity.
        */
        text-decoration: none !important;
        color: inherit !important;
      }

      :host ::slotted(iron-icon) {
        margin: 0 4px;
        width: var(--lumo-icon-size-m);
        height: var(--lumo-icon-size-m);
      }

      /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
      :host ::slotted(iron-icon[icon^="vaadin:"]) {
        padding: 0.25rem;
        box-sizing: border-box !important;
      }

      :host(:not([dir="rtl"])) ::slotted(iron-icon:first-child) {
        margin-left: 0;
      }

      :host(:not([dir="rtl"])) ::slotted(iron-icon:last-child) {
        margin-right: 0;
      }

      :host([theme~="icon-on-top"]) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        text-align: center;
        padding-bottom: 0.5rem;
        padding-top: 0.25rem;
      }

      :host([theme~="icon-on-top"]) ::slotted(a) {
        flex-direction: column;
        align-items: center;
        margin-top: -0.25rem;
        padding-top: 0.25rem;
      }

      :host([theme~="icon-on-top"]) ::slotted(iron-icon) {
        margin: 0;
      }

      /* Disabled */

      :host([disabled]) {
        pointer-events: none;
        opacity: 1;
        color: var(--lumo-disabled-text-color);
      }

      /* Focus-ring */

      :host([focus-ring]) {
        box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
        border-radius: var(--lumo-border-radius);
      }

      /* RTL specific styles */

      :host([dir="rtl"])::before,
      :host([dir="rtl"])::after {
        left: auto;
        right: 50%;
        transform: translateX(50%) scale(0);
      }

      :host([dir="rtl"][selected]:not([orientation="vertical"]))::before,
      :host([dir="rtl"][selected]:not([orientation="vertical"]))::after {
        transform: translateX(50%) scale(1);
      }

      :host([dir="rtl"]) ::slotted(iron-icon:first-child) {
        margin-right: 0;
      }

      :host([dir="rtl"]) ::slotted(iron-icon:last-child) {
        margin-left: 0;
      }

      :host([orientation="vertical"][dir="rtl"]) {
        transform-origin: 100% 50%;
      }

      :host([dir="rtl"][orientation="vertical"])::before,
      :host([dir="rtl"][orientation="vertical"])::after {
        left: auto;
        right: 0;
        border-radius: var(--lumo-border-radius) 0 0 var(--lumo-border-radius);
        transform-origin: 0% 50%;
      }
    </style>
  </template>
</dom-module>`;document.head.appendChild(G.content);
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
const X=e=>class extends e{static get properties(){return{_hasVaadinItemMixin:{value:!0},disabled:{type:Boolean,value:!1,observer:"_disabledChanged",reflectToAttribute:!0},selected:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"_selectedChanged"},_value:String}}get value(){return void 0!==this._value?this._value:this.textContent.trim()}set value(e){this._value=e}ready(){super.ready();const e=this.getAttribute("value");null!==e&&(this.value=e),this.addEventListener("focus",e=>this._setFocused(!0),!0),this.addEventListener("blur",e=>this._setFocused(!1),!0),this.addEventListener("mousedown",e=>{this._setActive(this._mousedown=!0);const t=()=>{this._setActive(this._mousedown=!1),document.removeEventListener("mouseup",t)};document.addEventListener("mouseup",t)}),this.addEventListener("keydown",e=>this._onKeydown(e)),this.addEventListener("keyup",e=>this._onKeyup(e))}disconnectedCallback(){super.disconnectedCallback(),this.hasAttribute("active")&&this._setFocused(!1)}_selectedChanged(e){this.setAttribute("aria-selected",e)}_disabledChanged(e){e?(this.selected=!1,this.setAttribute("aria-disabled","true"),this.blur()):this.removeAttribute("aria-disabled")}_setFocused(e){e?(this.setAttribute("focused",""),this._mousedown||this.setAttribute("focus-ring","")):(this.removeAttribute("focused"),this.removeAttribute("focus-ring"),this._setActive(!1))}_setActive(e){e?this.setAttribute("active",""):this.removeAttribute("active")}_onKeydown(e){/^( |SpaceBar|Enter)$/.test(e.key)&&!e.defaultPrevented&&(e.preventDefault(),this._setActive(!0))}_onKeyup(e){this.hasAttribute("active")&&(this._setActive(!1),this.click())}}
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/;class Z extends(l(d(X(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(Z.is,Z);const J=e`<dom-module id="lumo-tabs" theme-for="vaadin-tabs">
  <template>
    <style>
      :host {
        -webkit-tap-highlight-color: transparent;
      }

      :host(:not([orientation="vertical"])) {
        box-shadow: inset 0 -1px 0 0 var(--lumo-contrast-10pct);
        position: relative;
        min-height: var(--lumo-size-l);
      }

      :host([orientation="horizontal"]) [part="tabs"] ::slotted(vaadin-tab:not([theme~="icon-on-top"])) {
        justify-content: center;
      }

      :host([orientation="vertical"]) {
        box-shadow: -1px 0 0 0 var(--lumo-contrast-10pct);
      }

      :host([orientation="horizontal"]) [part="tabs"] {
        margin: 0 0.75rem;
      }

      :host([orientation="vertical"]) [part="tabs"] {
        width: 100%;
        margin: 0.5rem 0;
      }

      [part="forward-button"],
      [part="back-button"] {
        position: absolute;
        z-index: 1;
        font-family: lumo-icons;
        color: var(--lumo-tertiary-text-color);
        font-size: var(--lumo-icon-size-m);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5em;
        height: 100%;
        transition: 0.2s opacity;
        top: 0;
      }

      [part="forward-button"]:hover,
      [part="back-button"]:hover {
        color: inherit;
      }

      :host(:not([dir="rtl"])) [part="forward-button"] {
        right: 0;
      }

      [part="forward-button"]::after {
        content: var(--lumo-icons-angle-right);
      }

      [part="back-button"]::after {
        content: var(--lumo-icons-angle-left);
      }

      /* Tabs overflow */

      [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: none;
        -webkit-mask-image: var(--_lumo-tabs-overflow-mask-image);
        /* For IE11 */
        min-height: var(--lumo-size-l);
      }

      /*
        TODO: CSS custom property in \`mask-image\` causes crash in Edge
        see https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15415089/
      */
      @-moz-document url-prefix() {
        [part="tabs"] {
          mask-image: var(--_lumo-tabs-overflow-mask-image);
        }
      }

      /* Horizontal tabs overflow */

      /* Both ends overflowing */
      :host([overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent 2em, #000 4em, #000 calc(100% - 4em), transparent calc(100% - 2em));
      }

      /* End overflowing */
      :host([overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
      }

      /* Start overflowing */
      :host([overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent 2em, #000 4em);
      }

      /* Vertical tabs overflow */

      /* Both ends overflowing */
      :host([overflow~="start"][overflow~="end"][orientation="vertical"]) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em, #000 calc(100% - 2em), transparent);
      }

      /* End overflowing */
      :host([overflow~="end"][orientation="vertical"]) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(#000 calc(100% - 2em), transparent);
      }

      /* Start overflowing */
      :host([overflow~="start"][orientation="vertical"]) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em);
      }

      :host [part="tabs"] ::slotted(:not(vaadin-tab)) {
        margin-left: var(--lumo-space-m);
      }

      /* Centered */

      :host([theme~="centered"][orientation="horizontal"]) [part="tabs"] {
        justify-content: center;
      }

      /* Small */

      :host([theme~="small"]),
      :host([theme~="small"]) [part="tabs"] {
        min-height: var(--lumo-size-m);
      }

      :host([theme~="small"]) [part="tabs"] ::slotted(vaadin-tab) {
        font-size: var(--lumo-font-size-s);
      }

      /* Minimal */

      :host([theme~="minimal"]) {
        box-shadow: none;
        /* This doesn't work with ShadyCSS */
        --_lumo-tab-marker-display: none;
      }

      /* Workaround for the above ShadyCSS issue */
      :host([theme~="minimal"]) [part="tabs"] ::slotted(vaadin-tab[selected])::before,
      :host([theme~="minimal"]) [part="tabs"] ::slotted(vaadin-tab[selected])::after {
        display: none;
      }

      /* Hide-scroll-buttons */

      :host([theme~="hide-scroll-buttons"]) [part="back-button"],
      :host([theme~="hide-scroll-buttons"]) [part="forward-button"] {
        display: none;
      }

      :host([theme~="hide-scroll-buttons"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent, #000 2em, #000 calc(100% - 2em), transparent 100%);
      }

      :host([theme~="hide-scroll-buttons"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 2em), transparent 100%);
      }

      :host([theme~="hide-scroll-buttons"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent, #000 2em);
      }

      /* Equal-width tabs */
      :host([theme~="equal-width-tabs"]) {
        flex: auto;
      }

      :host([theme~="equal-width-tabs"]) [part="tabs"] ::slotted(vaadin-tab) {
        flex: 1 0 0%;
      }

      /* RTL specific styles */

      :host([dir="rtl"]) [part="forward-button"]::after {
        content: var(--lumo-icons-angle-left);
      }

      :host([dir="rtl"]) [part="back-button"]::after {
        content: var(--lumo-icons-angle-right);
      }

      :host([orientation="vertical"][dir="rtl"]) {
        box-shadow: 1px 0 0 0 var(--lumo-contrast-10pct);
      }

      :host([dir="rtl"]) [part="forward-button"] {
        left: 0;
      }

      :host([dir="rtl"]) [part="tabs"] ::slotted(:not(vaadin-tab)) {
        margin-left: 0;
        margin-right: var(--lumo-space-m);
      }

      /* Both ends overflowing */
      :host([dir="rtl"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em, #000 calc(100% - 4em), transparent calc(100% - 2em));
      }

      /* End overflowing */
      :host([dir="rtl"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
      }

      /* Start overflowing */
      :host([dir="rtl"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em);
      }

      :host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em, #000 calc(100% - 2em), transparent 100%);
      }

      :host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 2em), transparent 100%);
      }

      :host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em);
      }
    </style>
  </template>
</dom-module>`;document.head.appendChild(J.content);
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
const Y=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.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/,Q=/Apple.* Version\/(9|10)/.test(navigator.userAgent);class ee extends(l(Y(d(r([n],t))))){static get template(){return e`
    <style>
      :host {
        display: flex;
        align-items: center;
      }

      :host([hidden]) {
        display: none !important;
      }

      :host([orientation="vertical"]) {
        display: block;
      }

      :host([orientation="horizontal"]) [part="tabs"] {
        flex-grow: 1;
        display: flex;
        align-self: stretch;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
      }

      /* This seems more future-proof than \`overflow: -moz-scrollbars-none\` which is marked obsolete
         and is no longer guaranteed to work:
         https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Mozilla_Extensions */
      @-moz-document url-prefix() {
        :host([orientation="horizontal"]) [part="tabs"] {
          overflow: hidden;
        }
      }

      :host([orientation="horizontal"]) [part="tabs"]::-webkit-scrollbar {
        display: none;
      }

      :host([orientation="vertical"]) [part="tabs"] {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      [part="back-button"],
      [part="forward-button"] {
        pointer-events: none;
        opacity: 0;
        cursor: default;
      }

      :host([overflow~="start"]) [part="back-button"],
      :host([overflow~="end"]) [part="forward-button"] {
        pointer-events: auto;
        opacity: 1;
      }

      [part="back-button"]::after {
        content: '◀';
      }

      [part="forward-button"]::after {
        content: '▶';
      }

      :host([orientation="vertical"]) [part="back-button"],
      :host([orientation="vertical"]) [part="forward-button"] {
        display: none;
      }

      /* RTL specific styles */

      :host([dir="rtl"]) [part="back-button"]::after {
        content: '▶';
      }

      :host([dir="rtl"]) [part="forward-button"]::after {
        content: '◀';
      }
    </style>
    <div on-click="_scrollBack" part="back-button"></div>

    <div id="scroll" part="tabs">
      <slot></slot>
    </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(Q&&this.root){const e="-webkit-backface-visibility";this.root.querySelectorAll("*").forEach(t=>{t.style[e]="visible",t.style[e]=""})}}}customElements.define(ee.is,ee);class te extends f{static get styles(){return y`
            :host {
                display: block;
            }
            .wrapper{
                display:grid;
                grid-template-columns:150px auto 50px;
                grid-column-gap:20px;
                grid-row-gap:20px;
                margin-bottom:10px;
            }

            .editor label {
                margin-bottom:5px;
                font-size: 12px;
                font-weight: 400;
                color: var(--paper-grey-500);
            }

            paper-dropdown-menu{
            }
            
            paper-icon-button{
                align-self:center;
            }
        `}render(){return w`
        <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=>w`
                            <paper-item value="${e}">${e}</paper-item>
                        `)}
                </paper-listbox>
            </paper-dropdown-menu>
            <div class="editor">
                <label>Rendition</label>
                <jinn-codemirror
                    id="editor"
                    label="Rendition"
                    code="${this.css||""}"
                    mode="css"
                    @update="${this._handleCodeChange}"></jinn-codemirror>
            </div>
            <paper-icon-button @click="${this._remove}" icon="delete" title="delete this rendition"></paper-icon-button>
        </div>



        <slot></slot>

        `}static get properties(){return{scopes:{type:Array},css:{type:String,reflect:!0},scope:{type:String,reflect:!0},selected:{type:String}}}constructor(){super(),this.scopes=["","before","after"],this.css="",this.scope="",this.selected="",this._initialized=!1}connectedCallback(){super.connectedCallback(),this.css=this.css.trim(),this.dispatchEvent(new CustomEvent("rendition-connected",{composed:!0,bubbles:!0,detail:{target:this}}))}firstUpdated(e){this.refreshEditor(),this._initialized=!0}refreshEditor(){console.log("refreshEditor");this.shadowRoot.getElementById("editor")}_remove(e){e.preventDefault(),this.dispatchEvent(new CustomEvent("remove-rendition",{}))}_handleCodeChange(){this.css=this.shadowRoot.getElementById("editor").value,this.dispatchEvent(new CustomEvent("rendition-changed",{composed:!0,bubbles:!0,detail:{name:this.name,css:this.css,scope:this.scope}}))}_listchanged(e){const t=this.shadowRoot.getElementById("scopeList");this.scope=t.selected}}customElements.define("pb-odd-rendition-editor",te);class oe extends f{static get styles(){return y`
            :host {
                display: block;
            }
            .wrapper{
                display:grid;
                grid-template-columns:150px auto 50px 50px;
                grid-column-gap:20px;
                grid-row-gap:20px;
                margin-bottom:10px;
            }
            paper-dropdown-menu{
                align-self:start;
            }
            paper-icon-button, paper-checkbox {
                align-self: center;
                margin-top: 16px;
            }

            .editor label {
                margin-bottom:5px;
                font-size: 12px;
                font-weight: 400;
                color: var(--paper-grey-500);
            }
        `}render(){return w`
        <div class="wrapper">
            
            <paper-autocomplete id="combo" text="${this.name}" placeholder="${$("odd.editor.model.param-name-placeholder")}" label="Name" 
                .source="${this._currentParameters}"></paper-autocomplete>

            <div class="editor">
                <label>Parameter</label>
                <jinn-codemirror id="editor"
                        mode="xquery"
                        code="${this.value}"
                        linter="${this.endpoint}/${_(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("update",this._handleCodeChange.bind(this))}refreshEditor(){this.shadowRoot.getElementById("editor")}_delete(e){console.log("parameter delete ",e),e.preventDefault(),this.dispatchEvent(new CustomEvent("parameter-remove",{}))}_handleCodeChange(e){console.log("_handleCodeChange ",e),this.value=this.shadowRoot.getElementById("editor").content||"",console.log("value %s",this.value),this.name=this.shadowRoot.getElementById("combo").text,this.setParam=this.shadowRoot.getElementById("set").checked,this.dispatchEvent(new CustomEvent("parameter-changed",{composed:!0,bubbles:!0,detail:{name:this.name,value:this.value,set:this.setParam}}))}}customElements.define("pb-odd-parameter-editor",oe);class ie extends f{static get styles(){return y`
            :host {
                display: flex;
                flex-direction:column;
            }
            h1, h2, h3, h4, h5, h6 {
                font-family: "Oswald", Verdana, "Helvetica", sans-serif;
                font-weight: 400 !important;
            }

            form {
                margin-bottom: 8px;
            }

            paper-input, paper-autocomplete {
                margin-bottom: 16px;
            }

            .models {
                margin-left:20px;
                margin-top:10px;
            }

            .btn, .btn-group {
                margin-top: 0;
                margin-bottom: 0;
            }

            header {
                // background-color: #d1dae0;
                background:var(--paper-grey-300);
                margin:0;
            }

            header div {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }

            header h4 {
                padding: 4px 8px;
                margin: 0;
                display: grid;
                grid-template-columns: 40px 40% auto;
            }
            h4 .btn-group{
                text-align: right;
                display: none;
            }

            #toggle, .modelType{
                align-self:center;
            }

            header div.info {
                padding: 0 16px 4px;
                margin: 0;
                font-size: 85%;
                display: block;
                margin:0 0 0 32px;
            }
            header div.info *{
                display: block;
                line-height: 1.2;
            }

            header .outputDisplay{
                text-transform: uppercase ;
            }
            header .description{
                font-style: italic;
            }

            header .predicate {
                color: #ff5722;
            }

            .predicate label, .template label {
                display: block;
                font-size: 12px;
                font-weight: 300;
                color: rgb(115, 115, 115);
            }

            .model-collapse {
                color: #000000;
                cursor: pointer;
            }

            .model-collapse:hover {
                text-decoration: none;
            }

            .behaviour {
                color: #ff5722;
            }

            .behaviour:before {
                content: ' [';
            }

            .behaviour:after {
                content: ']';
            }

            .behaviourWrapper{
                display:grid;
                grid-template-columns: 140px 40px 140px auto;
            }
            .behaviourWrapper > *{
                display:inline;
                align-self:stretch;
            }
            
            .group {
                margin: 0;
                font-size: 16px;
                font-weight: bold;
            }

            .group .title {
                /*text-decoration: underline;*/
            }

            .renditions, .parameters {
                padding-left: 16px;
                border-left: 3px solid #e0e0e0;
                margin-bottom:20px;
            }

            .renditions .group {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }

            .predicate .form-control {
                width: 100%;
            }

            .source {
                text-decoration: none;
                margin-bottom: 8px;
            }

            .selectOutput {
                margin-right: 10px;
            }

            :host([currentselection]) > form > header{
                @apply --shadow-elevation-4dp;
                border-left:3px solid var(--paper-blue-500);
            }

            paper-menu-button paper-icon-button{
                margin-left:-10px;
            }

            /* need to play it save for FF */
            :host([currentselection]) > form > header > h4 > .btn-group{
                display: inline-block;
            }
            iron-collapse{
            }

            .renditions{
                margin-top:10px;
            }
            
            .details{
                padding:0px 50px 20px 20px;
                background:var(--paper-grey-200);
            }
            
            .editor {
                margin-bottom: 20px;
            }

            .editor label {
                margin-bottom:5px;
                font-size: 12px;
                font-weight: 400;
                color: var(--paper-grey-500);
            }

            .horizontal {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            #mode {
                min-width: 18em;
            }
        `}static get properties(){return{behaviour:{type:String},predicate:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},type:{type:String,reflect:!0},template:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},output:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},css:{type:String,converter:(e,t)=>"null"===e.toLowerCase()?"":e},mode:{type:String},model:{type:Object},models:{type:Array},parameters:{type:Array},renditions:{type:Array},desc:{type:String,converter:(e,t)=>"null"===e.toLowerCase()?"":e},sourcerend:{type:String},show:{type:Boolean,reflect:!0},outputs:{type:Array},behaviours:{type:Array},icon:{type:String},open:{type:String},hasCustomBehaviour:{type:Boolean},endpoint:{type:String},apiVersion:{type:String}}}constructor(){super(),this.behaviour="inline",this.predicate="",this.type="",this.template="",this.output="",this.css="",this.mode="",this.model={},this.model.models=[],this.parameters=[],this.renditions=[],this.desc="",this.sourcerend="",this.show=!1,this.outputs=["","web","print","epub","fo","latex","plain"],this.parentModel=[],this.behaviours=["alternate","anchor","block","body","break","cell","cit","document","figure","graphic","heading","inline","link","list","listItem","metadata","note","omit","paragraph","pass-through","row","section","table","text","title","webcomponent"],this.icon="expand-more",this.hasCustomBehaviour=!1}render(){let e;switch(this.output){case"web":case"epub":e="html";break;case"latex":e="tex";break;case"plain":e="default";break;case"fo":case"print":e="xml";break;default:e="html"}return w`
        <form>
            <header> 
                <h4>
                    <paper-icon-button id="toggle"
                                       icon="${this.icon}" @click="${this.toggle}"
                                       class="model-collapse"></paper-icon-button>
                                       
                    <span class="modelType">${this.type}<span class="behaviour" ?hidden="${this._isGroupOrSequence()}">${this.behaviour}</span></span>

                    <span class="btn-group">
                        <paper-icon-button @click="${this._moveDown}" icon="arrow-downward"
                                           title="move down"></paper-icon-button>
                        <paper-icon-button @click="${this._moveUp}" icon="arrow-upward"
                                           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"></paper-icon-button>

                        ${this._isGroupOrSequence()?w`
                            <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?w`
                                            <paper-item value="model">model</paper-item>
                                        `:""}
                                   ${"modelGrp"===this.type?w`
                                            <paper-item value="modelSequence">modelSequence</paper-item>
                                            <paper-item value="model">model</paper-item>
                                        `:""}
                                </paper-listbox>
                            </paper-menu-button>
                            `:""}
                    </span>
                </h4>
                <div class="info">
                    <div class="outputDisplay">${this.output}</div>
                    <div class="description">${this.desc}</div>
                    <div class="predicate">${this.predicate}</div>
                </p>
            </header>
            <iron-collapse id="details" ?opened="${this.show}" class="details">
                <div class="horizontal">
                    <paper-dropdown-menu class="selectOutput" label="Output">
                        <paper-listbox id="output" slot="dropdown-content" attr-for-selected="value"
                                    selected="${this.output}" @iron-select="${this._selectOutput}">

                            ${this.outputs.map(e=>w`
                                <paper-item value="${e}">${e}</paper-item>
                            `)}

                        </paper-listbox>
                    </paper-dropdown-menu>
                    <paper-input id="mode" .value="${this.mode}"
                        placeholder="${$("odd.editor.model.mode-placeholder")}"
                        label="Mode"
                        @change="${this._inputMode}"></paper-input>
                </div>
                <paper-input id="desc" .value="${this.desc}" placeholder="${$("odd.editor.model.description-placeholder")}"
                    label="Description" @change="${this._inputDesc}"></paper-input>

                <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.predic