@teipublisher/pb-components 2.26.1-next.2 → 3.0.0-next-4.1

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

@@ -1,467 +1,524 @@
 // @ts-nocheck
-import { LitElement, html, css } from 'lit-element';
-
-import { repeat } from 'lit-html/directives/repeat';
-import { ifDefined } from 'lit-html/directives/if-defined';
-
-import '@polymer/paper-icon-button/paper-icon-button.js';
-import '@polymer/iron-icons/iron-icons.js';
-import '@polymer/iron-icon/iron-icon.js';
-import '@polymer/paper-input/paper-input.js';
-import '@polymer/paper-menu-button/paper-menu-button.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
-import '@polymer/paper-listbox/paper-listbox.js';
-import '@polymer/paper-item/paper-item.js';
-import '@polymer/paper-styles/color.js';
-import '@polymer/iron-collapse/iron-collapse.js';
-import "@jinntec/jinn-codemirror/dist/src/jinn-codemirror";
+import { LitElement, html, css, nothing } from 'lit';
+
+import { repeat } from 'lit/directives/repeat.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import './pb-icon-button.js';
+
+import '@jinntec/jinn-codemirror/dist/src/jinn-codemirror';
 
 import { cmpVersion } from './utils.js';
 import './pb-odd-rendition-editor.js';
 import './pb-odd-parameter-editor.js';
 import './pb-message.js';
 
-import { get as i18n, translate } from "./pb-i18n.js";
-
+import { get as i18n, translate } from './pb-i18n.js';
 
 /**
  * represents an odd model element for editing
  *
  * @customElement
- *
- * @polymer
  */
 export class PbOddModelEditor extends LitElement {
-
-    static get styles() {
-        return css`
-            :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 styles() {
+    return css`
+      :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;
+      }
+
+      .pb-input,
+      .pb-select,
+      pb-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);
+      }
+
+      .modelTypeMenu {
+        margin-left: 8px;
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+
+      .pb-input,
+      .pb-select {
+        width: 100%;
+        height: var(--pb-input-height, 48px);
+        padding: 0.5rem 0.75rem;
+        border: 1px solid rgba(0, 0, 0, 0.16);
+        border-radius: 8px;
+        font: inherit;
+        color: inherit;
+        background: #fff;
+        transition: border-color 120ms ease, box-shadow 120ms ease;
+      }
+
+      .pb-input::placeholder {
+        color: rgba(0, 0, 0, 0.4);
+      }
+
+      .pb-select {
+        appearance: none;
+        background-image: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.4) 50%),
+          linear-gradient(135deg, rgba(0, 0, 0, 0.4) 50%, transparent 50%),
+          linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
+        background-position: calc(100% - 18px) calc(0.6em + 2px),
+          calc(100% - 13px) calc(0.6em + 2px), calc(100% - 2.5rem) 0.5em;
+        background-size: 5px 5px, 5px 5px, 1px 2.25em;
+        background-repeat: no-repeat;
+      }
+
+      .pb-input:focus,
+      .pb-select:focus {
+        outline: none;
+        border-color: #1976d2;
+        box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.16);
+      }
+
+      /* need to play it save for FF */
+      :host([currentselection]) > form > header > h4 > .btn-group {
+        display: inline-block;
+      }
+      details {
+        display: block;
+      }
+
+      details summary {
+        display: none;
+      }
+
+      .renditions {
+        margin-top: 10px;
+      }
+
+      .details {
+        padding: 0px 50px 20px 20px;
+        background: var(--paper-grey-200);
+      }
+
+      details:not([open]) {
+        padding: 0;
+      }
+
+      .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 {
+      /**
+       * maps to ODD ´model` behaviour attribute
+       */
+      behaviour: {
+        type: String,
+      },
+      /**
+       * maps to ODD `model` predicate
+       */
+      predicate: {
+        type: String,
+        reflect: true,
+        converter: (value, type) => {
+          if (value.toLowerCase() === 'null') {
+            return '';
+          }
+          return value;
+        },
+      },
+      type: {
+        type: String,
+        reflect: true,
+      },
+      template: {
+        type: String,
+        reflect: true,
+        converter: (value, type) => {
+          if (value.toLowerCase() === 'null') {
+            return '';
+          }
+          return value;
+        },
+      },
+      output: {
+        type: String,
+        reflect: true,
+        converter: (value, type) => {
+          if (value.toLowerCase() === 'null') {
+            return '';
+          }
+          return value;
+        },
+      },
+      css: {
+        type: String,
+        converter: (value, type) => {
+          if (value.toLowerCase() === 'null') {
+            return '';
+          }
+          return value;
+        },
+      },
+      mode: {
+        type: String,
+      },
+      model: {
+        type: Object,
+      },
+      models: {
+        type: Array,
+      },
+      parameters: {
+        type: Array,
+      },
+      renditions: {
+        type: Array,
+      },
+      desc: {
+        type: String,
+        converter: (value, type) => {
+          if (value.toLowerCase() === 'null') {
+            return '';
+          }
+          return value;
+        },
+      },
+      sourcerend: {
+        type: String,
+      },
+      show: {
+        type: Boolean,
+        reflect: true,
+      },
+      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 = false;
+
+    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 = false;
+  }
+
+  render() {
+    let tmplSyntax;
+    switch (this.output) {
+      case 'web':
+      case 'epub':
+        tmplSyntax = 'html';
+        break;
+      case 'latex':
+        tmplSyntax = 'tex';
+        break;
+      case 'plain':
+        tmplSyntax = 'default';
+        break;
+      case 'fo':
+      case 'print':
+        tmplSyntax = 'xml';
+        break;
+      default:
+        tmplSyntax = 'html';
+        break;
     }
-
-    static get properties() {
-        return {
-            /**
-             * maps to ODD ´model` behaviour attribute
-             */
-            behaviour: {
-                type: String
-            },
-            /**
-             * maps to ODD `model` predicate
-             */
-            predicate: {
-                type: String,
-                reflect: true,
-                converter: (value, type) => {
-                    if (value.toLowerCase() === 'null') {
-                        return '';
-                    }
-                    return value;
-                }
-            },
-            type: {
-                type: String,
-                reflect: true
-            },
-            template: {
-                type: String,
-                reflect: true,
-                converter: (value, type) => {
-                    if (value.toLowerCase() === 'null') {
-                        return '';
-                    }
-                    return value;
-                }
-            },
-            output: {
-                type: String,
-                reflect: true,
-                converter: (value, type) => {
-                    if (value.toLowerCase() === 'null') {
-                        return '';
-                    }
-                    return value;
-                }
-            },
-            css: {
-                type: String,
-                converter: (value, type) => {
-                    if (value.toLowerCase() === 'null') {
-                        return '';
-                    }
-                    return value;
-                }
-            },
-            mode: {
-                type: String
-            },
-            model: {
-                type: Object
-            },
-            models: {
-                type: Array
-            },
-            parameters: {
-                type: Array
-            },
-            renditions: {
-                type: Array
-            },
-            desc: {
-                type: String,
-                converter: (value, type) => {
-                    if (value.toLowerCase() === 'null') {
-                        return '';
-                    }
-                    return value;
-                }
-            },
-            sourcerend: {
-                type: String
-            },
-            show: {
-                type: Boolean,
-                reflect: true
-            },
-            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 = false;
-
-        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 = false;
-    }
-
-    render() {
-        let tmplSyntax;
-        switch (this.output) {
-            case 'web':
-            case 'epub':
-                tmplSyntax = 'html';
-                break;
-            case 'latex':
-                tmplSyntax = 'tex';
-                break;
-            case 'plain':
-                tmplSyntax = 'default';
-                break;
-            case 'fo':
-            case 'print':
-                tmplSyntax = 'xml';
-                break;
-            default:
-                tmplSyntax = 'html';
-                break;
-        }
-        return html`
+    return html`
         <form>
-            <header> 
+            <header>
                 <h4>
-                    <paper-icon-button id="toggle"
+                    <pb-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>
+                                       class="model-collapse"></pb-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() ?
-                html`
-                            <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">
-                                   ${this.type === 'modelSequence' ?
-                        html`
-                                            <paper-item value="model">model</paper-item>
-                                        `: ''
-                    }
-                                   ${this.type === 'modelGrp' ?
-                        html`
-                                            <paper-item value="modelSequence">modelSequence</paper-item>
-                                            <paper-item value="model">model</paper-item>
-                                        `: ''
-                    }
-                                </paper-listbox>
-                            </paper-menu-button>
-                            `: ''}
+                        <pb-icon-button @click="${this._moveDown}" icon="arrow-downward"
+                                           title="move down"></pb-icon-button>
+                        <pb-icon-button @click="${this._moveUp}" icon="arrow-upward"
+                                           title="move up"></pb-icon-button>
+                        <pb-icon-button @click="${
+                          this._requestRemoval
+                        }" icon="delete" title="remove"></pb-icon-button>
+                        <pb-icon-button @click="${
+                          this._copy
+                        }" icon="content-copy" title="copy"></pb-icon-button>
+                        <pb-icon-button @click="${
+                          this._paste
+                        }" icon="content-paste"></pb-icon-button>
+
+                        ${
+                          this._isGroupOrSequence()
+                            ? html`
+                                <label class="modelTypeMenu">
+                                  <span class="sr-only">Add nested model</span>
+                                  <select class="pb-select" @change=${this._handleAddNested}>
+                                    <option value="">Add…</option>
+                                    ${this.type === 'modelSequence'
+                                      ? html`<option value="model">model</option>`
+                                      : nothing}
+                                    ${this.type === 'modelGrp'
+                                      ? html`
+                                          <option value="modelSequence">modelSequence</option>
+                                          <option value="model">model</option>
+                                        `
+                                      : nothing}
+                                  </select>
+                                </label>
+                              `
+                            : nothing
+                        }
                     </span>
                 </h4>
                 <div class="info">
@@ -470,548 +527,739 @@ export class PbOddModelEditor extends LitElement {
                     <div class="predicate">${this.predicate}</div>
                 </p>
             </header>
-            <iron-collapse id="details" ?opened="${this.show}" class="details">
+            <details ?open="${this.show}" class="details">
+                <summary style="display: none;"></summary>
                 <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((item) =>
-                            html`
-                                <paper-item value="${item}">${item}</paper-item>
-                            `)}
-
-                        </paper-listbox>
-                    </paper-dropdown-menu>
-                    <paper-input id="mode" .value="${this.mode}"
+                    <label class="pb-field selectOutput">
+                      <span class="pb-field__label">${translate('odd.editor.model.output')}</span>
+                      <select
+                        id="output"
+                        class="pb-select"
+                        .value=${this.output || ''}
+                        @change=${this._selectOutput}
+                      >
+                        ${this.outputs.map(item => html`<option value="${item}">${item}</option>`)}
+                      </select>
+                    </label>
+                    <label class="pb-field">
+                      <span class="pb-field__label">${translate(
+                        'odd.editor.model.mode-placeholder',
+                      )}</span>
+                      <input
+                        id="mode"
+                        class="pb-input"
+                        .value=${this.mode || ''}
                         placeholder="${translate('odd.editor.model.mode-placeholder')}"
-                        label="Mode"
-                        @change="${this._inputMode}"></paper-input>
+                        @change=${this._inputMode}
+                      />
+                    </label>
                 </div>
-                <paper-input id="desc" .value="${this.desc}" placeholder="${translate('odd.editor.model.description-placeholder')}"
-                    label="Description" @change="${this._inputDesc}"></paper-input>
+                <label class="pb-field">
+                  <span class="pb-field__label">${translate(
+                    'odd.editor.model.description-placeholder',
+                  )}</span>
+                  <input
+                    id="desc"
+                    class="pb-input"
+                    .value=${this.desc || ''}
+                    placeholder="${translate('odd.editor.model.description-placeholder')}"
+                    @change=${this._inputDesc}
+                  />
+                </label>
 
                 <div class="editor">
                     <label>Predicate</label>
                     <jinn-codemirror id="predicate"
-                        code="${this.predicate}"   
+                        code="${this.predicate}"
                         mode="xquery"
-                        linter="${this.endpoint}/${cmpVersion(this.apiVersion, '1.0.0') < 0 ? 'modules/editor.xql' : 'api/lint'}"
+                        linter="${this.endpoint}/${
+      cmpVersion(this.apiVersion, '1.0.0') < 0 ? 'modules/editor.xql' : 'api/lint'
+    }"
                         placeholder="${translate('odd.editor.model.predicate-placeholder')}"
                         @update="${this._updatePredicate}"></jinn-codemirror>
                 </div>
-               
-                ${this._isModel()
-                ? html`
-                        <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((item) =>
-                    html`
-                                            <paper-item value="${item}">${item}</paper-item>
-                                        `)}
-                                    </paper-listbox>
-                                </paper-dropdown-menu>
-                                <span style="align-self:center;justify-self: center;"> ${translate('odd.editor.model.link-with-or')} </span>
-                                <paper-input id="custombehaviour" label="" @input="${this._handleCustomBehaviour}" placeHolder="${translate('odd.editor.model.custom-behaviour-placeholder')}"></paper-input>
-                                <span></span>
-                            </div>
 
-                                
-    
-                            <paper-input id="css" .value="${this.css}"
-                                placeholder="${translate('odd.editor.model.css-class-placeholder')}"
-                                label="CSS Class"
-                                @change="${this._inputCss}"></paper-input>
-                            
-                            <div class="editor">
-                                <label>Template</label>
-                                <jinn-codemirror id="template"
-                                                 code="${this.template}"
-                                                 mode="${tmplSyntax}"
-                                                 placeholder="${translate('odd.editor.model.template-placeholder')}"
-                                                 @update="${this._updateTemplate}">
-                                    <div slot="toolbar">
-                                        <paper-button data-mode="xml" data-command="selectElement" data-key="mod-e mod-s"
-                                            title="Select element around current cursor position">&lt;|></paper-button>
-                                        <paper-button data-mode="xml" data-command="encloseWith" data-key="mod-e mod-e"
-                                            title="Enclose selection in new element">&lt;...&gt;</paper-button>
-                                        <paper-button data-mode="xml" data-command="removeEnclosing" title="Remove enclosing tags" 
-                                            data-key="mod-e mod-r" class="sep">&lt;X></paper-button>
-                                        <paper-button data-mode="html" data-command="selectElement" data-key="mod-e mod-s"
-                                            title="Select element around current cursor position">&lt;|></paper-button>
-                                        <paper-button data-mode="html" data-command="encloseWith" data-key="mod-e mod-e"
-                                            title="Enclose selection in new element">&lt;...&gt;</paper-button>
-                                        <paper-button data-mode="html" data-command="removeEnclosing" title="Remove enclosing tags" 
-                                            data-key="mod-e mod-r" class="sep">&lt;X></paper-button>
-                                        <paper-button data-key="mod-e mod-p" data-command="snippet" data-params="[[\${_}]]" title="Insert template variable">[[...]]</paper-button>
-                                    </div>
-                                </jinn-codemirror>
-                            </div>
+                ${
+                  this._isModel()
+                    ? html`
+                        <div>
+                          <div class="behaviourWrapper">
+                            <label class="pb-field">
+                              <span class="pb-field__label"
+                                >${translate('odd.editor.model.behaviour')}</span
+                              >
+                              <select
+                                id="behaviour"
+                                class="pb-select"
+                                .value=${this.behaviour || ''}
+                                ?disabled=${this.hasCustomBehaviour}
+                                @change=${this._selectBehaviour}
+                              >
+                                ${this.behaviours.map(
+                                  item => html`<option value="${item}">${item}</option>`,
+                                )}
+                              </select>
+                            </label>
+                            <span style="align-self:center;justify-self: center;">
+                              ${translate('odd.editor.model.link-with-or')}
+                            </span>
+                            <label class="pb-field">
+                              <span class="pb-field__label"
+                                >${translate('odd.editor.model.custom-behaviour-placeholder')}</span
+                              >
+                              <input
+                                id="custombehaviour"
+                                class="pb-input"
+                                @input=${this._handleCustomBehaviour}
+                                placeholder="${translate(
+                                  'odd.editor.model.custom-behaviour-placeholder',
+                                )}"
+                              />
+                            </label>
+                            <span></span>
+                          </div>
+
+                          <label class="pb-field">
+                            <span class="pb-field__label">CSS Class</span>
+                            <input
+                              id="css"
+                              class="pb-input"
+                              .value=${this.css || ''}
+                              placeholder="${translate('odd.editor.model.css-class-placeholder')}"
+                              @change=${this._inputCss}
+                            />
+                          </label>
+
+                          <div class="editor">
+                            <label>Template</label>
+                            <jinn-codemirror
+                              id="template"
+                              code="${this.template}"
+                              mode="${tmplSyntax}"
+                              placeholder="${translate('odd.editor.model.template-placeholder')}"
+                              @update="${this._updateTemplate}"
+                            >
+                              <div slot="toolbar">
+                                <button
+                                  type="button"
+                                  class="pb-button pb-button--text"
+                                  data-mode="xml"
+                                  data-command="selectElement"
+                                  data-key="mod-e mod-s"
+                                  title="Select element around current cursor position"
+                                >
+                                  &lt;|>
+                                </button>
+                                <button
+                                  type="button"
+                                  class="pb-button pb-button--text"
+                                  data-mode="xml"
+                                  data-command="encloseWith"
+                                  data-key="mod-e mod-e"
+                                  title="Enclose selection in new element"
+                                >
+                                  &lt;...&gt;
+                                </button>
+                                <button
+                                  type="button"
+                                  class="pb-button pb-button--text sep"
+                                  data-mode="xml"
+                                  data-command="removeEnclosing"
+                                  title="Remove enclosing tags"
+                                  data-key="mod-e mod-r"
+                                >
+                                  &lt;X>
+                                </button>
+                                <button
+                                  type="button"
+                                  class="pb-button pb-button--text"
+                                  data-mode="html"
+                                  data-command="selectElement"
+                                  data-key="mod-e mod-s"
+                                  title="Select element around current cursor position"
+                                >
+                                  &lt;|>
+                                </button>
+                                <button
+                                  type="button"
+                                  class="pb-button pb-button--text"
+                                  data-mode="html"
+                                  data-command="encloseWith"
+                                  data-key="mod-e mod-e"
+                                  title="Enclose selection in new element"
+                                >
+                                  &lt;...&gt;
+                                </button>
+                                <button
+                                  type="button"
+                                  class="pb-button pb-button--text sep"
+                                  data-mode="html"
+                                  data-command="removeEnclosing"
+                                  title="Remove enclosing tags"
+                                  data-key="mod-e mod-r"
+                                >
+                                  &lt;X>
+                                </button>
+                                <button
+                                  type="button"
+                                  class="pb-button pb-button--text"
+                                  data-key="mod-e mod-p"
+                                  data-command="snippet"
+                                  data-params="[[\${_}]]"
+                                  title="Insert template variable"
+                                >
+                                  [[...]]
+                                </button>
+                              </div>
+                            </jinn-codemirror>
+                          </div>
                         </div>
-        
+
                         <div class="parameters">
-                            <div class="group">
-                                <span class="title">Parameters</span>
-                                <paper-icon-button icon="add"
-                                                   @click="${this._addParameter}"></paper-icon-button>
-                            </div>
-                            ${repeat(this.parameters, (parameter) => parameter.name, (parameter, index) =>
-                        html`
-                                <pb-odd-parameter-editor 
-                                       behaviour="${this.behaviour}"
-                                       name="${parameter.name}"
-                                       value="${parameter.value}"
-                                       ?set="${parameter.set}"
-                                       endpoint="${this.endpoint}"
-                                       apiVersion="${this.apiVersion}"
-                                       @parameter-remove="${(e) => this._removeParam(e, index)}"
-                                       @parameter-changed="${(e) => this._updateParam(e, index)}"
-                                       ></pb-odd-parameter-editor>
-                            `)}
+                          <div class="group">
+                            <span class="title">Parameters</span>
+                            <pb-icon-button
+                              icon="add"
+                              @click="${this._addParameter}"
+                            ></pb-icon-button>
+                          </div>
+                          ${repeat(
+                            this.parameters || [],
+                            parameter => parameter.name,
+                            (parameter, index) =>
+                              html`
+                                <pb-odd-parameter-editor
+                                  behaviour="${this.behaviour}"
+                                  name="${parameter.name}"
+                                  value="${parameter.value}"
+                                  ?set="${parameter.set}"
+                                  endpoint="${this.endpoint}"
+                                  apiVersion="${this.apiVersion}"
+                                  @parameter-remove="${e => this._removeParam(e, index)}"
+                                  @parameter-changed="${e => this._updateParam(e, index)}"
+                                ></pb-odd-parameter-editor>
+                              `,
+                          )}
                         </div>
 
                         <div class="renditions">
-                            <div class="group">
-                                <div>
-                                    <span class="title">Renditions</span>
-                                    <paper-icon-button icon="add" @click="${this._addRendition}"></paper-icon-button>
-                                </div>
-                                <div class="source">
-                                    <paper-checkbox ?checked="${this.sourcerend}" id="sourcerend">Use source rendition</paper-checkbox>
-                                </div>
+                          <div class="group">
+                            <div>
+                              <span class="title">Renditions</span>
+                              <pb-icon-button
+                                icon="add"
+                                @click="${this._addRendition}"
+                              ></pb-icon-button>
                             </div>
-
-                            ${repeat(this.renditions, (rendition) => rendition.name, (rendition, index) =>
-                            html`
-                                <pb-odd-rendition-editor scope="${rendition.scope}"
-                                       css="${rendition.css}"
-                                       @remove-rendition="${(e) => this._removeRendition(e, index)}"
-                                       @rendition-changed="${(e) => this._updateRendition(e, index)}"
-                                       ></pb-odd-rendition-editor>
-                            `)}
-
+                            <div class="source">
+                              <paper-checkbox ?checked="${this.sourcerend}" id="sourcerend"
+                                >Use source rendition</paper-checkbox
+                              >
+                            </div>
+                          </div>
+
+                          ${repeat(
+                            this.renditions || [],
+                            rendition => rendition.name,
+                            (rendition, index) =>
+                              html`
+                                <pb-odd-rendition-editor
+                                  scope="${rendition.scope}"
+                                  css="${rendition.css}"
+                                  @remove-rendition="${e => this._removeRendition(e, index)}"
+                                  @rendition-changed="${e => this._updateRendition(e, index)}"
+                                ></pb-odd-rendition-editor>
+                              `,
+                          )}
                         </div>
-                    `
-                : ''
-            }
-            </iron-collapse>
-            
+                      `
+                    : ''
+                }
+            </details>
+
             <div class="models">
-                ${repeat(this.model.models, (model, index) => html`
-                <pb-odd-model-editor 
-                    behaviour="${model.behaviour || 'inline'}"
-                    predicate="${model.predicate}"
-                    type="${model.type}"
-                    output="${model.output}"
-                    css="${model.css}"
-                    mode="${model.mode}"
-                    .model="${model}"
-                    .parameters="${model.parameters}"
-                    desc="${model.desc}"
-                    sourcerend="${model.sourcerend}"
-                    .renditions="${model.renditions}"
-                    .template="${model.template}"
-                    .show="${model.show}"
-                    endpoint="${this.endpoint}"
-                    apiVersion="${this.apiVersion}"
-                    @model-remove="${this._removeModel}"
-                    @model-move-down="${this._moveModelDown}"
-                    @model-move-up="${this._moveModelUp}"
-                    @model-changed="${this.handleModelChanged}"
-                    @click="${ (e) => this.setCurrentSelection(e, index)}"
-                    hasParent
+                ${repeat(
+                  (this.model && this.model.models) || [],
+                  (model, index) => html`
+                    <pb-odd-model-editor
+                      behaviour="${model.behaviour || 'inline'}"
+                      predicate="${model.predicate}"
+                      type="${model.type}"
+                      output="${model.output}"
+                      css="${model.css}"
+                      mode="${model.mode}"
+                      .model="${model}"
+                      .parameters="${model.parameters}"
+                      desc="${model.desc}"
+                      sourcerend="${model.sourcerend}"
+                      .renditions="${model.renditions}"
+                      .template="${model.template}"
+                      .show="${model.show}"
+                      endpoint="${this.endpoint}"
+                      apiVersion="${this.apiVersion}"
+                      @model-remove="${this._removeModel}"
+                      @model-move-down="${this._moveModelDown}"
+                      @model-move-up="${this._moveModelUp}"
+                      @model-changed="${this.handleModelChanged}"
+                      @click="${e => this.setCurrentSelection(e, index)}"
+                      hasParent
                     ></pb-odd-model-editor>
-            `)}
-    
-            </div> 
-        </form> 
+                  `,
+                )}
+
+            </div>
+        </form>
         <pb-message id="dialog"></pb-message>
         `;
-    }
+  }
 
-    firstUpdated() {
-        super.firstUpdated();
+  firstUpdated() {
+    super.firstUpdated();
 
-        this.hasCustomBehaviour = this.behaviours.indexOf(this.behaviour) < 0;
-        if (this.hasCustomBehaviour) {
-            this.shadowRoot.getElementById('custombehaviour').value = this.behaviour;
-        }
+    this.hasCustomBehaviour = this.behaviours.indexOf(this.behaviour) < 0;
+    if (this.hasCustomBehaviour) {
+      this.shadowRoot.getElementById('custombehaviour').value = this.behaviour;
     }
+  }
 
-    updated(_changedProperties) {
-        if (_changedProperties.has('show') && this.show) {
-            this.refreshEditors();
-        }
+  updated(_changedProperties) {
+    if (_changedProperties.has('show') && this.show) {
+      this.refreshEditors();
     }
+  }
 
-    refreshEditors() {
-        console.log('refreshEditors');
-        // this.shadowRoot.getElementById('predicate').refresh();
-
-        if (this._isGroupOrSequence()) { return console.log("asfdfa"); }
-
-        // this.shadowRoot.getElementById('template').refresh();
-
-        const models = this.shadowRoot.querySelectorAll('pb-odd-model-editor');
-        for (let i = 0; i < models.length; i++) {
-            models[i].refreshEditors();
-        }
-        const renditions = this.shadowRoot.querySelectorAll('pb-odd-rendition-editor');
-        for (let i = 0; i < renditions.length; i++) {
-            renditions[i].refreshEditor();
-        }
-        const parameters = this.shadowRoot.querySelectorAll('pb-odd-parameter-editor');
-        for (let i = 0; i < parameters.length; i++) {
-            parameters[i].refreshEditor();
-        }
-    }
-
-    toggle(e) {
-        // e.stopPropagation()
-        // e.preventDefault()
-
-        this.show = !this.show;
-        this.toggleButtonIcon();
+  refreshEditors() {
+    console.log('refreshEditors');
+    // this.shadowRoot.getElementById('predicate').refresh();
 
-        const oldModel = this.model;
-        const newModel = Object.assign({}, oldModel, { show: this.show });
-        this.model = newModel;
-        this.refreshEditors();
-        this.dispatchEvent(new CustomEvent('model-changed', { composed: true, bubbles: true, detail: { oldModel, newModel } }));
+    if (this._isGroupOrSequence()) {
+      return console.log('asfdfa');
     }
 
-    toggleButtonIcon() {
-        if (this.show) {
-            this.icon = 'expand-less';
-        }
-        else {
-            this.icon = 'expand-more';
-        }
-    }
-
-    _isModel() {
-        return this.type === 'model';
-    }
+    // this.shadowRoot.getElementById('template').refresh();
 
-    _isGroupOrSequence() {
-        return this.type !== 'model';
+    const models = this.shadowRoot.querySelectorAll('pb-odd-model-editor');
+    for (let i = 0; i < models.length; i++) {
+      models[i].refreshEditors();
     }
-
-    static _templateMode(output) {
-        switch (output) {
-            case 'latex':
-                return 'latex';
-            case 'web':
-            default:
-                return 'xml';
-        }
+    const renditions = this.shadowRoot.querySelectorAll('pb-odd-rendition-editor');
+    for (let i = 0; i < renditions.length; i++) {
+      renditions[i].refreshEditor();
     }
-
-    _changeSelection(e) {
-        if (e.detail.target == this) return;
-        e.preventDefault();
-        e.stopPropagation();
-        if (this.currentSelection != undefined) {
-            this.currentSelection.removeAttribute('currentselection');
-        }
-        const newSelection = e.detail.target;
-        newSelection.setAttribute('currentselection', 'true');
-        this.currentSelection = newSelection;
+    const parameters = this.shadowRoot.querySelectorAll('pb-odd-parameter-editor');
+    for (let i = 0; i < parameters.length; i++) {
+      parameters[i].refreshEditor();
     }
-
-    _requestRemoval(e) {
-        e.preventDefault();
-        this.dispatchEvent(new CustomEvent('model-remove'));
+  }
+
+  toggle(e) {
+    // e.stopPropagation()
+    // e.preventDefault()
+
+    this.show = !this.show;
+    this.toggleButtonIcon();
+
+    const oldModel = this.model;
+    const newModel = { ...oldModel, show: this.show };
+    this.model = newModel;
+    this.refreshEditors();
+    this.dispatchEvent(
+      new CustomEvent('model-changed', {
+        composed: true,
+        bubbles: true,
+        detail: { oldModel, newModel },
+      }),
+    );
+  }
+
+  toggleButtonIcon() {
+    if (this.show) {
+      this.icon = 'expand-less';
+    } else {
+      this.icon = 'expand-more';
     }
-
-    /**
-     * move model down in list
-     *
-     * @param e
-     * @event model-move-down dispatched to request the model to move down
-     */
-    _moveDown(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        // this.dispatchEvent(new CustomEvent('model-move-down'));
-        this.dispatchEvent(new CustomEvent('model-move-down', { composed: true, bubbles: true, detail: { model: this } }));
+  }
+
+  _isModel() {
+    return this.type === 'model';
+  }
+
+  _isGroupOrSequence() {
+    return this.type !== 'model';
+  }
+
+  static _templateMode(output) {
+    switch (output) {
+      case 'latex':
+        return 'latex';
+      case 'web':
+      default:
+        return 'xml';
     }
-
-    /**
-     * move model up in list
-     *
-     * @param e
-     * @event model-move-up dispatched to request the model to move up
-     */
-    _moveUp(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.dispatchEvent(new CustomEvent('model-move-up'));
+  }
+
+  _changeSelection(e) {
+    if (e.detail.target == this) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.currentSelection != undefined) {
+      this.currentSelection.removeAttribute('currentselection');
     }
-
-    _addNested(e) {
-        const newNestedModel = {
-            behaviour: 'inline',
-            css: '',
-            desc: '',
-            predicate: '',
-            type: e instanceof Event ? e.detail.item.getAttribute('value') : e,
-            output: '',
-            sourcerend: false,
-            models: [],
-            mode: '',
-            parameters: [],
-            renditions: [],
-            template: '',
-            show: true
-        };
-
-        const oldModel = this.model;
-        const models = Array.from(this.model.models);
-        models.unshift(newNestedModel);
-        this.model = Object.assign({}, oldModel, { models });
-
-        // important to reset the listbox - otherwise next attempt to use it will fail if value has not changed
-        // use querySelector here instead of 'this.$' as listbox is in it's own <template>
-        const modelTypeSelector = this.shadowRoot.querySelector('#modelType')
-        modelTypeSelector.select("");
-
-        this.dispatchEvent(new CustomEvent('model-changed', { composed: true, bubbles: true, detail: { oldModel, newModel: this.model } }));
+    const newSelection = e.detail.target;
+    newSelection.setAttribute('currentselection', 'true');
+    this.currentSelection = newSelection;
+  }
+
+  _requestRemoval(e) {
+    e.preventDefault();
+    this.dispatchEvent(new CustomEvent('model-remove'));
+  }
+
+  /**
+   * move model down in list
+   *
+   * @param e
+   * @event model-move-down dispatched to request the model to move down
+   */
+  _moveDown(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    // this.dispatchEvent(new CustomEvent('model-move-down'));
+    this.dispatchEvent(
+      new CustomEvent('model-move-down', {
+        composed: true,
+        bubbles: true,
+        detail: { model: this },
+      }),
+    );
+  }
+
+  /**
+   * move model up in list
+   *
+   * @param e
+   * @event model-move-up dispatched to request the model to move up
+   */
+  _moveUp(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('model-move-up'));
+  }
+
+  _addNested(e) {
+    const newNestedModel = {
+      behaviour: 'inline',
+      css: '',
+      desc: '',
+      predicate: '',
+      type: e instanceof Event ? e.detail.item.getAttribute('value') : e,
+      output: '',
+      sourcerend: false,
+      models: [],
+      mode: '',
+      parameters: [],
+      renditions: [],
+      template: '',
+      show: true,
+    };
+
+    const oldModel = this.model;
+    const models = Array.from(this.model.models);
+    models.unshift(newNestedModel);
+    this.model = { ...oldModel, models };
+
+    // important to reset the listbox - otherwise next attempt to use it will fail if value has not changed
+    // use querySelector here instead of 'this.$' as listbox is in it's own <template>
+    const modelTypeSelector = this.shadowRoot.querySelector('#modelType');
+    modelTypeSelector.select('');
+
+    this.dispatchEvent(
+      new CustomEvent('model-changed', {
+        composed: true,
+        bubbles: true,
+        detail: { oldModel, newModel: this.model },
+      }),
+    );
+  }
+
+  _handleAddNested(event) {
+    const value = event.target.value;
+    if (!value) {
+      return;
     }
-
-    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();
+    this._addNested(value);
+    event.target.value = '';
+  }
+
+  addModel(newModel) {
+    if (newModel.type !== 'model') {
+      console.error('only models can be added to modelSequence or modelGrp');
+      return;
     }
-
-    _removeModel(ev) {
-        console.log('_removeModel ', ev);
-        ev.stopPropagation();
-        const { model } = ev.target;
-        const index = this.model.models.indexOf(model)
-
-        this.shadowRoot.getElementById('dialog')
-            .confirm(i18n('odd.editor.model.delete-model-label'), i18n('odd.editor.model.delete-model-message'))
-            .then(() => {
-                const oldModel = this.model;
-                const models = Array.from(this.model.models);
-                models.splice(index, 1);
-                this.model = Object.assign({}, oldModel, { models });
-                this.models = models;
-                this.dispatchEvent(new CustomEvent('model-changed', { composed: true, bubbles: true, detail: { oldModel, newModel: this.model } }));
-            }, () => null);
+    this.model.models.unshift(newModel);
+    this.requestUpdate();
+  }
+
+  _removeModel(ev) {
+    console.log('_removeModel ', ev);
+    ev.stopPropagation();
+    const { model } = ev.target;
+    const index = this.model.models.indexOf(model);
+
+    this.shadowRoot
+      .getElementById('dialog')
+      .confirm(
+        i18n('odd.editor.model.delete-model-label'),
+        i18n('odd.editor.model.delete-model-message'),
+      )
+      .then(
+        () => {
+          const oldModel = this.model;
+          const models = Array.from(this.model.models);
+          models.splice(index, 1);
+          this.model = { ...oldModel, models };
+          this.models = models;
+          this.dispatchEvent(
+            new CustomEvent('model-changed', {
+              composed: true,
+              bubbles: true,
+              detail: { oldModel, newModel: this.model },
+            }),
+          );
+        },
+        () => null,
+      );
+  }
+
+  _moveModelDown(ev) {
+    console.log('MODEL._moveModelDown ', ev);
+    ev.stopPropagation();
+    const { model } = ev.target;
+    const index = this.model.models.indexOf(model);
+    if (index === this.model.models.length) {
+      return;
     }
-
-    _moveModelDown(ev) {
-        console.log('MODEL._moveModelDown ', ev);
-        ev.stopPropagation();
-        const { model } = ev.target;
-        const index = this.model.models.indexOf(model)
-        if (index === this.model.models.length) {
-            return;
-        }
-        const oldModel = this.model;
-        const models = Array.from(this.model.models);
-        models.splice(index, 1);
-        models.splice(index + 1, 0, model);
-        this.model = Object.assign({}, oldModel, { models });
-
-        const targetModel = this.shadowRoot.querySelectorAll('pb-odd-model-editor')[index + 1];
-        this._setCurrentSelection(index + 1, targetModel);
-
-        this.dispatchEvent(new CustomEvent('model-changed', { composed: true, bubbles: true, detail: { oldModel, newModel: this.model } }));
-        this.requestUpdate();
+    const oldModel = this.model;
+    const models = Array.from(this.model.models);
+    models.splice(index, 1);
+    models.splice(index + 1, 0, model);
+    this.model = { ...oldModel, models };
+
+    const targetModel = this.shadowRoot.querySelectorAll('pb-odd-model-editor')[index + 1];
+    this._setCurrentSelection(index + 1, targetModel);
+
+    this.dispatchEvent(
+      new CustomEvent('model-changed', {
+        composed: true,
+        bubbles: true,
+        detail: { oldModel, newModel: this.model },
+      }),
+    );
+    this.requestUpdate();
+  }
+
+  _moveModelUp(ev) {
+    ev.stopPropagation();
+    const { model } = ev.target;
+    const index = this.model.models.indexOf(model);
+    if (index === 0) {
+      return;
     }
-
-    _moveModelUp(ev) {
-        ev.stopPropagation();
-        const { model } = ev.target;
-        const index = this.model.models.indexOf(model)
-        if (index === 0) {
-            return;
-        }
-        const oldModel = this.model;
-        const models = Array.from(this.model.models);
-        // remove element from models
-        models.splice(index, 1);
-        // add element to new index
-        models.splice(index - 1, 0, model);
-        this.model = Object.assign({}, oldModel, { models });
-
-        const targetModel = this.shadowRoot.querySelectorAll('pb-odd-model-editor')[index - 1];
-        this._setCurrentSelection(index - 1, targetModel);
-
-        this.dispatchEvent(new CustomEvent('model-changed', { composed: true, bubbles: true, detail: { oldModel, newModel: this.model } }));
-        // this.requestUpdate();
+    const oldModel = this.model;
+    const models = Array.from(this.model.models);
+    // remove element from models
+    models.splice(index, 1);
+    // add element to new index
+    models.splice(index - 1, 0, model);
+    this.model = { ...oldModel, models };
+
+    const targetModel = this.shadowRoot.querySelectorAll('pb-odd-model-editor')[index - 1];
+    this._setCurrentSelection(index - 1, targetModel);
+
+    this.dispatchEvent(
+      new CustomEvent('model-changed', {
+        composed: true,
+        bubbles: true,
+        detail: { oldModel, newModel: this.model },
+      }),
+    );
+    // this.requestUpdate();
+  }
+
+  handleModelChanged(ev) {
+    console.log('handleModelChanged ', ev, this);
+    ev.stopPropagation();
+    const oldModel = this.model;
+    const index = this.model.models.indexOf(ev.detail.oldModel);
+    const models = Array.from(this.model.models);
+    models.splice(index, 1, ev.detail.newModel);
+    this.model = { ...oldModel, models };
+    this.dispatchEvent(
+      new CustomEvent('model-changed', {
+        composed: true,
+        bubbles: true,
+        detail: { oldModel, newModel: this.model },
+      }),
+    );
+  }
+
+  // todo: setCurrentSelection functions are redundant in model and elementspec components - do better
+  setCurrentSelection(e, index) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // prevent event if model is already the current one
+    this._setCurrentSelection(index, e.target);
+  }
+
+  _setCurrentSelection(index, target) {
+    // console.log('_setCurrentSelection ', target);
+    const targetModel = this.shadowRoot.querySelectorAll('pb-odd-model-editor')[index];
+
+    if (!targetModel) {
+      return;
     }
 
-    handleModelChanged(ev) {
-        console.log('handleModelChanged ', ev, this);
-        ev.stopPropagation();
-        const oldModel = this.model;
-        const index = this.model.models.indexOf(ev.detail.oldModel);
-        const models = Array.from(this.model.models);
-        models.splice(index, 1, ev.detail.newModel);
-        this.model = Object.assign({}, oldModel, { models });
-        this.dispatchEvent(new CustomEvent('model-changed', { composed: true, bubbles: true, detail: { oldModel, newModel: this.model } }));
+    if (targetModel.hasAttribute('currentselection')) return;
+
+    this.dispatchEvent(
+      new CustomEvent('current-changed', { composed: true, bubbles: true, detail: { target } }),
+    );
+    this.requestUpdate();
+  }
+
+  _inputDesc(e) {
+    this.desc = e.target.value;
+    this._fireModelChanged('desc', this.desc);
+  }
+
+  _selectOutput(e) {
+    this.output = e.target.value;
+    this._fireModelChanged('output', this.output);
+  }
+
+  _updatePredicate() {
+    this.predicate = this.shadowRoot.getElementById('predicate').value;
+    console.log('_updatePredicate ', this.predicate);
+    this._fireModelChanged('predicate', this.predicate);
+  }
+
+  _selectBehaviour(ev) {
+    this.behaviour = ev.target.value;
+    this._fireModelChanged('behaviour', this.behaviour);
+  }
+
+  _inputCss(ev) {
+    this.css = ev.target.value;
+    this._fireModelChanged('css', this.css);
+  }
+
+  _inputMode(ev) {
+    this.mode = ev.target.value;
+    this._fireModelChanged('mode', this.mode);
+  }
+
+  _updateTemplate(ev) {
+    this.template = this.shadowRoot.getElementById('template').content;
+    this._fireModelChanged('template', this.template);
+  }
+
+  /**
+   * add a model parameter
+   *
+   * @param e
+   */
+  _addParameter(e) {
+    this.parameters.push({ name: '', value: '' });
+    this._fireModelChanged('parameters', this.parameters);
+  }
+
+  _updateParam(e, index) {
+    this.parameters[index].name = e.detail.name;
+    this.parameters[index].value = e.detail.value;
+    this.parameters[index].set = e.detail.set;
+    this._fireModelChanged('parameters', this.parameters);
+  }
+
+  /**
+   * remove a parameter
+   * @param e
+   * @param index
+   * @private
+   */
+  _removeParam(e, index) {
+    this.parameters.splice(index, 1);
+    this._fireModelChanged('parameters', this.parameters);
+  }
+
+  /**
+   * add a rendition
+   *
+   * @param ev
+   */
+  _addRendition(ev) {
+    this.renditions.push({
+      scope: '',
+      css: '',
+    });
+    this._fireModelChanged('renditions', this.renditions);
+  }
+
+  _updateRendition(e, index) {
+    this.renditions[index].css = e.detail.css;
+    this.renditions[index].scope = e.detail.scope;
+    this._fireModelChanged('renditions', this.renditions);
+  }
+
+  _removeRendition(e, index) {
+    this.renditions.splice(index, 1);
+    this._fireModelChanged('renditions', this.renditions);
+  }
+
+  _fireModelChanged(prop, value) {
+    const oldModel = this.model;
+    this.model = { ...this.model, [prop]: value };
+    console.log('model changed for %s: %o - %o', prop, value, this.model);
+    this.dispatchEvent(
+      new CustomEvent('model-changed', {
+        composed: true,
+        bubbles: true,
+        detail: { oldModel, newModel: this.model },
+      }),
+    );
+    this.requestUpdate();
+  }
+
+  _copy(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    console.log('odd-model.copy ', ev);
+    console.log('odd-model.copy data', this.model);
+
+    this.dispatchEvent(
+      new CustomEvent('odd-copy', { composed: true, bubbles: true, detail: { model: this.model } }),
+    );
+  }
+
+  _paste(ev) {
+    console.log('model _paste ', ev);
+    this.dispatchEvent(
+      new CustomEvent('odd-paste', { composed: true, bubbles: true, detail: { target: this } }),
+    );
+  }
+
+  _handleCustomBehaviour(e) {
+    this.behaviour = e.composedPath()[0].value;
+    this._fireModelChanged('behaviour', this.behaviour);
+
+    // en-/disable behaviour menu
+    if (this.behaviour === '') {
+      this.behaviour = 'inline';
+      this.hasCustomBehaviour = false;
+    } else {
+      this.hasCustomBehaviour = true;
     }
-
-
-    //todo: setCurrentSelection functions are redundant in model and elementspec components - do better
-    setCurrentSelection(e, index) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        //prevent event if model is already the current one
-        this._setCurrentSelection(index, e.target);
-    }
-
-    _setCurrentSelection(index, target) {
-        // console.log('_setCurrentSelection ', target);
-        const targetModel = this.shadowRoot.querySelectorAll('pb-odd-model-editor')[index];
-
-        if (!targetModel) { return; }
-
-        if (targetModel.hasAttribute('currentselection')) return;
-
-        this.dispatchEvent(new CustomEvent('current-changed', { composed: true, bubbles: true, detail: { target: target } }));
-        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(ev) {
-        this.behaviour = ev.composedPath()[0].selected;
-        this._fireModelChanged('behaviour', this.behaviour);
-    }
-
-    _inputCss(ev) {
-        this.css = ev.composedPath()[0].value;
-        this._fireModelChanged('css', this.css);
-    }
-
-    _inputMode(ev) {
-        this.mode = ev.composedPath()[0].value;
-        this._fireModelChanged('mode', this.mode);
-    }
-
-    _updateTemplate(ev) {
-        this.template = this.shadowRoot.getElementById('template').content;
-        this._fireModelChanged('template', this.template);
-    }
-
-    /**
-     * add a model parameter
-     *
-     * @param e
-     */
-    _addParameter(e) {
-        this.parameters.push({ name: "", value: "" });
-        this._fireModelChanged('parameters', this.parameters);
-    }
-
-    _updateParam(e, index) {
-        this.parameters[index].name = e.detail.name;
-        this.parameters[index].value = e.detail.value;
-        this.parameters[index].set = e.detail.set;
-        this._fireModelChanged('parameters', this.parameters);
-    }
-
-    /**
-     * remove a parameter
-     * @param e
-     * @param index
-     * @private
-     */
-    _removeParam(e, index) {
-        this.parameters.splice(index, 1);
-        this._fireModelChanged('parameters', this.parameters);
-    }
-
-    /**
-     * add a rendition
-     *
-     * @param ev
-     */
-    _addRendition(ev) {
-        this.renditions.push({
-            scope: '',
-            css: ''
-        });
-        this._fireModelChanged('renditions', this.renditions);
-    }
-
-    _updateRendition(e, index) {
-        this.renditions[index].css = e.detail.css;
-        this.renditions[index].scope = e.detail.scope;
-        this._fireModelChanged('renditions', this.renditions);
-    }
-
-    _removeRendition(e, index) {
-        this.renditions.splice(index, 1);
-        this._fireModelChanged('renditions', this.renditions);
-    }
-
-    _fireModelChanged(prop, value) {
-        const oldModel = this.model;
-        this.model = Object.assign({}, this.model, { [prop]: value });
-        console.log('model changed for %s: %o - %o', prop, value, this.model);
-        this.dispatchEvent(new CustomEvent('model-changed', { composed: true, bubbles: true, detail: { oldModel, newModel: this.model } }));
-        this.requestUpdate();
-    }
-
-    _copy(ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        console.log('odd-model.copy ', ev);
-        console.log('odd-model.copy data', this.model);
-
-        this.dispatchEvent(new CustomEvent('odd-copy', { composed: true, bubbles: true, detail: { model: this.model } }));
-    }
-
-    _paste(ev) {
-        console.log('model _paste ', ev);
-        this.dispatchEvent(new CustomEvent('odd-paste', { composed: true, bubbles: true, detail: { target: this } }));
-    }
-
-
-    _handleCustomBehaviour(e) {
-        this.behaviour = e.composedPath()[0].value;
-        this._fireModelChanged('behaviour', this.behaviour);
-
-        // en-/disable behaviour menu
-        if (this.behaviour === '') {
-            this.behaviour = 'inline';
-            this.hasCustomBehaviour = false;
-        } else {
-            this.hasCustomBehaviour = true;
-        }
-        this.requestUpdate();
-
-    }
-
-
-
+    this.requestUpdate();
+  }
 }
 customElements.define('pb-odd-model-editor', PbOddModelEditor);