@things-factory/meta-ui 7.0.0-alpha.24 → 7.0.0-alpha.26

package/client/actions/main.js

@@ -1,7 +1,88 @@
-import"../viewparts/dynamic-menu-part";import"@material/mwc-icon";import gql from"graphql-tag";import{html}from"lit";import{client}from"@operato/graphql";import{appendViewpart,toggleOverlay,TOOL_POSITION,VIEWPART_POSITION}from"@operato/layout";import{store}from"@operato/shell";import{isMobileDevice}from"@operato/utils";import{APPEND_APP_TOOL,REMOVE_APP_TOOL}from"@things-factory/apptool-base";import{clientSettingStore}from"@things-factory/shell";export const UPDATE_META_UI="UPDATE_META_UI";export const UPDATE_META_MENU_TEMPLATE="UPDATE_META_MENU_TEMPLATE";var HAMBURGER;export async function setupMenuPart(e){var{hovering:t=!!isMobileDevice(),slotTemplate:a,portraitSlotTemplate:i,landscapeSlotTemplate:o,position:r=VIEWPART_POSITION.NAVBAR}=e||{};const{hovering:n}=(await clientSettingStore.get("dynamic-menu"))?.value||{};void 0!==n&&(t=n);const p=r==VIEWPART_POSITION.HEADERBAR?"landscape":"portrait",l=("landscape"==p?o:i)||a||html``;appendViewpart({name:"dynamic-menu-part",viewpart:{show:!t,resizable:!0,hovering:!!isMobileDevice()||t,template:html`<dynamic-menu-part .orientation=${p}>${l}</dynamic-menu-part>`},position:r}),(t||isMobileDevice())&&"portrait"==p?HAMBURGER||(HAMBURGER={name:"hamburger",template:html`
-        <mwc-icon @click=${e=>toggleOverlay("dynamic-menu-part",{backdrop:!0})}
+import '../viewparts/dynamic-menu-part'
+import '@material/mwc-icon'
+
+import gql from 'graphql-tag'
+import { html } from 'lit'
+
+import { client } from '@operato/graphql'
+import { appendViewpart, toggleOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'
+import { store } from '@operato/shell'
+import { isMobileDevice } from '@operato/utils'
+import { APPEND_APP_TOOL, REMOVE_APP_TOOL } from '@things-factory/apptool-base'
+import { clientSettingStore } from '@things-factory/shell'
+
+export const UPDATE_META_UI = 'UPDATE_META_UI'
+export const UPDATE_META_MENU_TEMPLATE = 'UPDATE_META_MENU_TEMPLATE'
+
+var HAMBURGER
+
+export async function setupMenuPart(options) {
+  var {
+    hovering = isMobileDevice() ? true : false,
+    slotTemplate,
+    portraitSlotTemplate,
+    landscapeSlotTemplate,
+    position = VIEWPART_POSITION.NAVBAR
+  } = options || {}
+
+  const { hovering: hoveringSetting } = (await clientSettingStore.get('dynamic-menu'))?.value || {}
+  if (hoveringSetting !== undefined) {
+    hovering = hoveringSetting
+  }
+
+  const orientation = position == VIEWPART_POSITION.HEADERBAR ? 'landscape' : 'portrait'
+  const orientatedSlotTemplate =
+    (orientation == 'landscape' ? landscapeSlotTemplate : portraitSlotTemplate) || slotTemplate || html``
+
+  appendViewpart({
+    name: 'dynamic-menu-part',
+    viewpart: {
+      show: !hovering,
+      resizable: true,
+      hovering: isMobileDevice() ? true : hovering,
+      template: html`<dynamic-menu-part .orientation=${orientation}>${orientatedSlotTemplate}</dynamic-menu-part>`
+    },
+    position
+  })
+
+  if ((hovering || isMobileDevice()) && orientation == 'portrait') {
+    if (!HAMBURGER) {
+      HAMBURGER = {
+        name: 'hamburger',
+        template: html`
+        <mwc-icon @click=${e=>
+          toggleOverlay('dynamic-menu-part', {
+            backdrop: true
+          })}
         >view_headline</mwc-icon>
-        `,position:TOOL_POSITION.FRONT_END},store.dispatch({type:APPEND_APP_TOOL,tool:HAMBURGER})):HAMBURGER&&(store.dispatch({type:REMOVE_APP_TOOL,name:"hamburger"}),HAMBURGER=null)}export async function updateMenuTemplate(e){var t=document.querySelector('meta[name="application-name"]')?.content,a=(await client.query({query:gql`
+        `,
+        position: TOOL_POSITION.FRONT_END
+      }
+
+      store.dispatch({
+        /* incase of mobile : add hamburger tool */
+        type: APPEND_APP_TOOL,
+        tool: HAMBURGER
+      })
+    }
+  } else {
+    if (HAMBURGER) {
+      store.dispatch({
+        type: REMOVE_APP_TOOL,
+        name: 'hamburger'
+      })
+
+      HAMBURGER = null
+    }
+  }
+}
+
+export async function updateMenuTemplate(template) {
+  var applicationName = document.querySelector('meta[name="application-name"]')?.content
+
+  var liteMenus = (
+    await client.query({
+      query: gql`
         query ($filters: [Filter!], $sortings: [Sorting!]) {
           liteMenus: liteMenus(filters: $filters
               sortings: $sortings) {
@@ -20,4 +101,33 @@ import"../viewparts/dynamic-menu-part";import"@material/mwc-icon";import gql fro
             total
           }
         }
-      `,variables:{filters:[{name:"active",operator:"eq",value:!0},{name:"appName",operator:"in",value:["",t]}],sortings:[{name:"rank",desc:!1}]}})).data.liteMenus.items;store.dispatch({type:UPDATE_META_MENU_TEMPLATE,addon:a.filter((e=>!e.appName||e.appName===t)),template:e})}
+      `,
+      variables: {
+        filters: [
+          {
+            name: 'active',
+            operator: 'eq',
+            value: true
+          },
+          {
+            name: 'appName',
+            operator: 'in',
+            value: ['', applicationName]
+          }
+        ],
+        sortings:[
+          {
+              name: 'rank',
+              desc: false
+          }
+        ]
+      }
+    })
+  ).data.liteMenus.items
+
+  store.dispatch({
+    type: UPDATE_META_MENU_TEMPLATE,
+    addon: liteMenus.filter(menu => !menu.appName || menu.appName === applicationName),
+    template
+  })
+}

package/client/component/filter/filter-form-meta-code-select.js

@@ -1,16 +1,94 @@
-import"../popup/meta-object-selector-popup";import{html}from"lit-html";import{openPopup}from"@operato/layout";import{TermsUtil}from"./../../utils/terms-util";function openMetaCodeSelector(e,t,o){var l=html`
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from './../../utils/terms-util'
+
+function openMetaCodeSelector(filter, value, confirmCallback) {
+
+  var template = html`
     <meta-object-selector-popup
-      .value=${t}
-      .options=${e.options}
-      .confirmCallback=${o}
+      .value=${value}
+      .options=${filter.options}
+      .confirmCallback=${confirmCallback}
     ></meta-object-selector-popup>
-  `;openPopup(l,{backdrop:!0,size:"large",title:e.options.selectorName?TermsUtil.tMenu(e.options.selectorName):TermsUtil.tTitle("select_item")})}export const FilterFormMetaCodeSelect=(e,t,o)=>{const l=e.options,p=l.codes&&l.codes.length>0?l.codes:void 0,{operator:a="eq"}=e;let i=t||"",r=t||"";if(l.dispField&&t&&p){let e=p.filter((e=>e.value==t));e&&e.length>0&&(r=e[0].display)}return"eq"===a?html`
-        <input name='${e.name}' .value=${i} type="text" hidden></input>
+  `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: filter.options.selectorName ? TermsUtil.tMenu(filter.options.selectorName) : TermsUtil.tTitle('select_item')
+  })
+}
+
+
+export const FilterFormMetaCodeSelect = (filter, value, owner) =>{
+  const options = filter.options;
+  const codes = (options.codes && options.codes.length > 0) ? options.codes : undefined;
+  const { operator = 'eq' } = filter;
+  let hideText = value? value : '';
+  let text = value? value : '';
+
+  if(options.dispField && value && codes){
+    let dispCode = codes.filter(x=> x.value == value);
+
+    if(dispCode && dispCode.length > 0){
+      text = dispCode[0].display;
+    }
+  }
+
+  return operator === 'eq'
+    ? html`
+        <input name='${filter.name}' .value=${hideText} type="text" hidden></input>
         <input
           type="text"
           readonly
-          name='${e.name}_disp'
-          .value=${r}
-          @click=${p=>{p.stopPropagation();const i=p.target;openMetaCodeSelector(e,t,(t=>{let p=t?t[l.codeField]:"",r=p;if(t&&l.dispField){let e=l.dispField.split(",");r=t[e[0]],e.length>1&&(r+=`(${e.splice(1).map((e=>t[e])).join(",")})`)}i.value=r,("ox-grid-header"==o.tagName.toLowerCase()?o.renderRoot.querySelector(`[name="${e.name}"]`):o.renderRoot.querySelector(`form [name="${e.name}"]`)).value=p,i.dispatchEvent(new Event("change",{bubbles:!0})),i.dispatchEvent(new CustomEvent("filter-change",{bubbles:!0,composed:!0,detail:{name:e.name,operator:a,value:p}}))}))}}
+          name='${filter.name}_disp'
+          .value=${text}
+          @click=${(e) => {
+            e.stopPropagation();
+
+            const input = e.target;
+
+            const confirmCallback = (selected) => {
+              let code = selected ? selected[options.codeField] : '';
+              let disp = code;
+
+              if(selected && options.dispField){
+                let fields = options.dispField.split(",");
+                disp = selected[fields[0]];
+            
+                if(fields.length > 1){
+                  disp+= `(${fields.splice(1).map(field => { return selected[field]}).join(",")})` 
+                }
+              }
+
+              input.value = disp;
+
+              let codeInput = owner.tagName.toLowerCase() == 'ox-grid-header' 
+                            ? owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                            : owner.renderRoot.querySelector(`form [name="${filter.name}"]`);
+              
+              codeInput.value = code;
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))              
+
+              input.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    name: filter.name,
+                    operator,
+                    value: code
+                  }
+                })
+              )
+            }
+
+            openMetaCodeSelector(filter, value, confirmCallback)
+          }}
         />
-      `:html``};
+      `
+    : html``
+}

package/client/component/filter/filter-form-meta-object-select.js

@@ -1,16 +1,94 @@
-import"../popup/meta-object-selector-popup";import{html}from"lit-html";import{openPopup}from"@operato/layout";import{TermsUtil}from"./../../utils/terms-util";function openMetaObjectSelector(e,t,o){var l=html`
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from './../../utils/terms-util'
+
+function openMetaObjectSelector(filter, value, confirmCallback) {
+
+  var template = html`
     <meta-object-selector-popup
-      .value=${t}
-      .options=${e.options}
-      .confirmCallback=${o}
+      .value=${value}
+      .options=${filter.options}
+      .confirmCallback=${confirmCallback}
     ></meta-object-selector-popup>
-  `;openPopup(l,{backdrop:!0,size:"large",title:e.options.selectorName?TermsUtil.tMenu(e.options.selectorName):TermsUtil.tTitle("select_item")})}export const FilterFormMetaObjectSelect=(e,t,o)=>{const l=e.options,{operator:p="eq"}=e;let a=t?t.id:"",n="";if(t){let e=l.nameField.split(",");n=t[e[0]],e.length>1&&(n+=`(${e.splice(1).map((e=>t[e])).join(",")})`)}return"eq"===p?html`
-        <input name='${e.name}' .value=${a} type="text" hidden></input>
+  `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: filter.options.selectorName ? TermsUtil.tMenu(filter.options.selectorName) : TermsUtil.tTitle('select_item')
+  })
+}
+
+
+export const FilterFormMetaObjectSelect = (filter, value, owner) =>{
+  const options = filter.options;
+  const { operator = 'eq' } = filter;
+  let hideText = value ? value.id : '';
+  let text = '';
+
+  if(value){
+    let fields = options.nameField.split(",");
+    text = value[fields[0]];
+
+    if(fields.length > 1){
+      text+= `(${fields.splice(1).map(field => { return value[field]}).join(",")})` 
+    }
+  }
+
+  return operator === 'eq'
+    ? html`
+        <input name='${filter.name}' .value=${hideText} type="text" hidden></input>
         <input
           type="text"
           readonly
-          name='${e.name}_disp'
-          .value=${n}
-          @click=${a=>{a.stopPropagation();const n=a.target;openMetaObjectSelector(e,t,(t=>{let a=t?t.id:"",r="";if(t){let e=l.nameField.split(",");r=t[e[0]],e.length>1&&(r+=`(${e.splice(1).map((e=>t[e])).join(",")})`)}n.value=r,("ox-grid-header"==o.tagName.toLowerCase()?o.renderRoot.querySelector(`[name="${e.name}"]`):o.renderRoot.querySelector(`form [name="${e.name}"]`)).value=a,n.dispatchEvent(new Event("change",{bubbles:!0})),n.dispatchEvent(new CustomEvent("filter-change",{bubbles:!0,composed:!0,detail:{name:e.name,operator:p,value:a}}))}))}}
+          name='${filter.name}_disp'
+          .value=${text}
+          @click=${(e) => {
+            e.stopPropagation();
+
+            const input = e.target;
+
+            const confirmCallback = (selected) => {
+              let code = selected ? selected.id : '';
+              let disp = '';
+
+              if(selected){
+                let fields = options.nameField.split(",");
+                disp = selected[fields[0]];
+            
+                if(fields.length > 1){
+                  disp+= `(${fields.splice(1).map(field => { return selected[field]}).join(",")})` 
+                }
+              }
+
+              input.value = disp;
+
+              let codeInput = owner.tagName.toLowerCase() == 'ox-grid-header' 
+                            ? owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                            : owner.renderRoot.querySelector(`form [name="${filter.name}"]`);
+              
+              codeInput.value = code;
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))              
+
+              input.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    name: filter.name,
+                    operator,
+                    value: code
+                  }
+                })
+              )
+            }
+
+            openMetaObjectSelector(filter, value, confirmCallback)
+          }}
         />
-      `:html``};
+      `
+    : html``
+}

package/client/component/filter/filter-grist-meta-code-select.js

@@ -1,16 +1,95 @@
-import"../popup/meta-object-selector-popup";import{html}from"lit-html";import{openPopup}from"@operato/layout";import{TermsUtil}from"./../../utils/terms-util";function openMetaCodeSelector(e,t,o){var l=html`
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from './../../utils/terms-util'
+
+
+function openMetaCodeSelector(column, value, confirmCallback) {
+
+  var template = html`
     <meta-object-selector-popup
-      .value=${t}
-      .options=${e.record.options}
-      .confirmCallback=${o}
+      .value=${value}
+      .options=${column.record.options}
+      .confirmCallback=${confirmCallback}
     ></meta-object-selector-popup>
-  `;openPopup(l,{backdrop:!0,size:"large",title:e.record.options.selectorName?TermsUtil.tMenu(e.record.options.selectorName):TermsUtil.tTitle("select_item")})}export const FilterGristMetaCodeSelect=(e,t,o)=>{const l=e.filter,r=e.record.options,p=r.codes&&r.codes.length>0?r.codes:void 0,{operator:i="eq"}=l;let a=t||"",n=t||"";if(r.dispField&&t&&p){let e=p.filter((e=>e.value==t));e&&e.length>0&&(n=e[0].display)}return"eq"===i?html`
-        <input name='${e.name}' .value=${a} type="text" hidden></input>
+  `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: column.record.options.selectorName ? TermsUtil.tMenu(column.record.options.selectorName) : TermsUtil.tTitle('select_item')
+  })
+}
+
+export const FilterGristMetaCodeSelect = (column, value, owner) => {
+  const filter = column.filter;
+  const options = column.record.options;
+  const codes = (options.codes && options.codes.length > 0) ? options.codes : undefined;
+  const { operator = 'eq' } = filter;
+  let hideText = value? value : '';
+  let text = value? value : '';
+
+  if(options.dispField && value && codes){
+    let dispCode = codes.filter(x=> x.value == value);
+
+    if(dispCode && dispCode.length > 0){
+      text = dispCode[0].display;
+    }
+  }
+
+  return operator === 'eq'
+    ? html`
+        <input name='${column.name}' .value=${hideText} type="text" hidden></input>
         <input
           type="text"
           readonly
-          name='${e.name}_disp'
-          .value=${n}
-          @click=${p=>{p.stopPropagation();const a=p.target;openMetaCodeSelector(e,t,(t=>{let p=t?t[r.codeField]:"",n=p;if(t&&r.dispField){let e=r.dispField.split(",");n=t[e[0]],e.length>1&&(n+=`(${e.splice(1).map((e=>t[e])).join(",")})`)}a.value=n,("ox-grid-header"==o.tagName.toLowerCase()?o.renderRoot.querySelector(`[name="${l.name}"]`):o.renderRoot.querySelector(`form [name="${l.name}"]`)).value=p,a.dispatchEvent(new Event("change",{bubbles:!0})),a.dispatchEvent(new CustomEvent("filter-change",{bubbles:!0,composed:!0,detail:{name:e.name,operator:i,value:p}}))}))}}
+          name='${column.name}_disp'
+          .value=${text}
+          @click=${(e) => {
+            e.stopPropagation();
+
+            const input = e.target;
+
+            const confirmCallback = (selected) => {
+              let code = selected ? selected[options.codeField] : '';
+              let disp = code;
+
+              if(selected && options.dispField){
+                let fields = options.dispField.split(",");
+                disp = selected[fields[0]];
+            
+                if(fields.length > 1){
+                  disp+= `(${fields.splice(1).map(field => { return selected[field]}).join(",")})` 
+                }
+              }
+
+              input.value = disp;
+
+              let codeInput = owner.tagName.toLowerCase() == 'ox-grid-header' 
+                            ? owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                            : owner.renderRoot.querySelector(`form [name="${filter.name}"]`);
+              codeInput.value = code;
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))              
+
+              input.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    name: column.name,
+                    operator,
+                    value: code
+                  }
+                })
+              )
+            }
+
+            openMetaCodeSelector(column, value, confirmCallback)
+          }}
         />
-      `:html``};
+      `
+    : html``
+}

package/client/component/filter/filter-grist-meta-object-select.js

@@ -1,16 +1,95 @@
-import"../popup/meta-object-selector-popup";import{html}from"lit-html";import{openPopup}from"@operato/layout";import{TermsUtil}from"./../../utils/terms-util";function openMetaObjectSelector(e,t,o){var r=html`
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from './../../utils/terms-util'
+
+
+function openMetaObjectSelector(column, value, confirmCallback) {
+
+  var template = html`
     <meta-object-selector-popup
-      .value=${t}
-      .options=${e.record.options}
-      .confirmCallback=${o}
+      .value=${value}
+      .options=${column.record.options}
+      .confirmCallback=${confirmCallback}
     ></meta-object-selector-popup>
-  `;openPopup(r,{backdrop:!0,size:"large",title:e.record.options.selectorName?TermsUtil.tMenu(e.record.options.selectorName):TermsUtil.tTitle("select_item")})}export const FilterGristMetaObjectSelect=(e,t,o)=>{const r=e.filter,{operator:l="eq"}=r,p=e.record.options;let a=t?t.id:"",n="";if(t){let e=p.nameField.split(",");n=t[e[0]],e.length>1&&(n+=`(${e.splice(1).map((e=>t[e])).join(",")})`)}return"eq"===l?html`
-        <input name='${e.name}' .value=${a} type="text" hidden></input>
+  `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: column.record.options.selectorName ? TermsUtil.tMenu(column.record.options.selectorName) : TermsUtil.tTitle('select_item')
+  })
+}
+
+export const FilterGristMetaObjectSelect = (column, value, owner) => {
+  const filter = column.filter;
+  const { operator = 'eq' } = filter;
+  const options = column.record.options;
+  let hideText = value? value.id : '';
+  let text = '';
+
+  if(value){
+    let fields = options.nameField.split(",");
+    text = value[fields[0]];
+
+    if(fields.length > 1){
+      text+= `(${fields.splice(1).map(field => { return value[field]}).join(",")})` 
+    }
+  }
+
+  return operator === 'eq'
+    ? html`
+        <input name='${column.name}' .value=${hideText} type="text" hidden></input>
         <input
           type="text"
           readonly
-          name='${e.name}_disp'
-          .value=${n}
-          @click=${a=>{a.stopPropagation();const n=a.target;openMetaObjectSelector(e,t,(t=>{let a=t?t.id:"",i="";if(t){let e=p.nameField.split(",");i=t[e[0]],e.length>1&&(i+=`(${e.splice(1).map((e=>t[e])).join(",")})`)}n.value=i,("ox-grid-header"==o.tagName.toLowerCase()?o.renderRoot.querySelector(`[name="${r.name}"]`):o.renderRoot.querySelector(`form [name="${r.name}"]`)).value=a,n.dispatchEvent(new Event("change",{bubbles:!0})),n.dispatchEvent(new CustomEvent("filter-change",{bubbles:!0,composed:!0,detail:{name:e.name,operator:l,value:a}}))}))}}
+          name='${column.name}_disp'
+          .value=${text}
+          @click=${(e) => {
+            e.stopPropagation();
+
+            const input = e.target;
+
+            const confirmCallback = (selected) => {
+              let code = selected ? selected.id : '';
+              let disp = '';
+
+              if(selected){
+                let fields = options.nameField.split(",");
+                disp = selected[fields[0]];
+            
+                if(fields.length > 1){
+                  disp+= `(${fields.splice(1).map(field => { return selected[field]}).join(",")})` 
+                }
+              }
+
+              input.value = disp;
+
+              let codeInput = owner.tagName.toLowerCase() == 'ox-grid-header' 
+                            ? owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                            : owner.renderRoot.querySelector(`form [name="${filter.name}"]`);
+              codeInput.value = code;
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))              
+
+              input.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    name: column.name,
+                    operator,
+                    value: code
+                  }
+                })
+              )
+            }
+
+            openMetaObjectSelector(column, value, confirmCallback)
+          }}
         />
-      `:html``};
+      `
+    : html``
+}

package/client/component/grist/editor/grist-editor-code-input.js

@@ -1,8 +1,96 @@
-import{html}from"lit";import{OxGristEditor}from"@operato/data-grist";import{openPopup}from"@operato/layout";import{TermsUtil}from"../../../utils/terms-util";import"../../popup/code-input-editor-popup";export class GristEditorCodeInput extends OxGristEditor{static get properties(){return{value:Object,column:Object,record:Object,rowIndex:Number,field:Object,popup:Object}}get editorTemplate(){let t;return this.value&&(t="object"==typeof this.value?JSON.stringify(this.value,0,2):this.value,t=t.length>20?`${t.substring(0,20)}...`:t),html`
-      ${t?html` <span tabindex="0" style="flex:1;">${t}</span> `:html`<span tabindex="0" ></span>`}
-    `}async firstUpdated(){super.firstUpdated()}_onclick(t){t.stopPropagation(),this.openEditor()}_onkeydown(t){"Enter"==t.key&&(t.stopPropagation(),this.openEditor())}openEditor(){this.popup&&delete this.popup;var t=html`
+import { html } from 'lit'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { openPopup } from '@operato/layout'
+import { TermsUtil } from '../../../utils/terms-util';
+
+import '../../popup/code-input-editor-popup'
+
+export class GristEditorCodeInput extends OxGristEditor {
+  static get properties() {
+    return {
+      value: Object,
+      column: Object,
+      record: Object,
+      rowIndex: Number,
+      field: Object,
+      popup: Object
+    }
+  }
+  
+  get editorTemplate() {
+    let text = undefined;
+
+    if(this.value){
+      if(typeof this.value === 'object'){
+        text = JSON.stringify(this.value, 0, 2);
+      } else {
+        text = this.value;
+      }
+
+      text = text.length > 20 ? `${text.substring(0,20)}...` : text;
+    }
+      
+    return html`
+      ${!text
+        ? html`<span tabindex="0" ></span>`
+        : html` <span tabindex="0" style="flex:1;">${text}</span> `}
+    `
+  }
+  
+  async firstUpdated() {
+    super.firstUpdated()
+  }
+
+  _onclick(e) {
+    e.stopPropagation()
+    this.openEditor()
+  }
+  
+  _onkeydown(e) {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openEditor()
+    }
+  }
+  
+  openEditor() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const confirmCallback = (chageValue) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: chageValue
+              ? (typeof this.value === 'object' ? JSON.parse(chageValue) : chageValue)
+              : null,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    var template = html`
         <code-input-editor-popup
           .value=${this.value}
-          .confirmCallback=${(t=>{this.dispatchEvent(new CustomEvent("field-change",{bubbles:!0,composed:!0,detail:{before:this.value,after:t?"object"==typeof this.value?JSON.parse(t):t:null,record:this.record,column:this.column,row:this.row}}))}).bind(this)}
+          .confirmCallback=${confirmCallback.bind(this)}
         ></code-input-editor-popup>
-      `;this.popup=openPopup(t,{backdrop:!0,size:"large",title:TermsUtil.tTitle("code-editor")})}}customElements.define("grist-editor-code-input",GristEditorCodeInput);
+      `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: TermsUtil.tTitle('code-editor')
+    })
+  }    
+}
+  
+customElements.define('grist-editor-code-input', GristEditorCodeInput)