@operato/app 1.1.45 → 1.1.47

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -114,15 +114,15 @@
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/attachment": "^1.1.45",
-    "@operato/data-grist": "^1.1.45",
-    "@operato/font": "^1.1.45",
+    "@operato/attachment": "^1.1.47",
+    "@operato/data-grist": "^1.1.47",
+    "@operato/font": "^1.1.47",
     "@operato/form": "^1.1.42",
     "@operato/graphql": "^1.1.13",
     "@operato/i18n": "^1.1.13",
-    "@operato/input": "^1.1.45",
-    "@operato/layout": "^1.1.45",
-    "@operato/property-editor": "^1.1.45",
+    "@operato/input": "^1.1.46",
+    "@operato/layout": "^1.1.46",
+    "@operato/property-editor": "^1.1.47",
     "@operato/shell": "^1.1.42",
     "@operato/styles": "^1.1.28",
     "@operato/utils": "^1.1.42",
@@ -166,5 +166,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f617b7df489725b78e7119ab97b02420426166a4"
+  "gitHead": "8241178dd84d4864ec17a181f37dc9b530a38dac"
 }

package/src/grist-editor/ox-grist-editor-code.ts

@@ -10,19 +10,20 @@ import { openPopup } from '@operato/layout'
 @customElement('ox-grist-editor-code')
 export class OxGristEditorCode extends OxGristEditor {
   get editorTemplate() {
-    return html` <input type="text" .value=${this.value || ''} /> `
+    return html` <div tabindex="0">${this.value || ''}</div> `
   }
 
-  async firstUpdated() {
-    await this.updateComplete
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.showEditorPopup()
+  }
 
-    this.renderRoot.addEventListener('click', e => {
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
       e.stopPropagation()
-
       this.showEditorPopup()
-    })
-
-    this.showEditorPopup()
+    }
   }
 
   showEditorPopup() {

package/src/grist-editor/ox-grist-editor-json.ts

@@ -9,19 +9,20 @@ import { openPopup } from '@operato/layout'
 @customElement('ox-grist-editor-json')
 export class OxGristEditorJson extends OxGristEditor {
   get editorTemplate() {
-    return html` <input type="text" .value=${this.value || ''} /> `
+    return html` <div tabindex="0">${this.value || ''}</div> `
   }
 
-  async firstUpdated() {
-    await this.updateComplete
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.showEditorPopup()
+  }
 
-    this.renderRoot.addEventListener('click', e => {
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
       e.stopPropagation()
-
       this.showEditorPopup()
-    })
-
-    this.showEditorPopup()
+    }
   }
 
   showEditorPopup() {

package/src/grist-editor/ox-grist-editor-resource-id.ts

@@ -16,21 +16,24 @@ export class OxGristEditorResourceId extends OxGristEditor {
     var value = this.value
 
     return html`
-      ${!value ? html`` : html` <span>${value[nameField]} (${value[descriptionField]})</span> `}
+      ${!value
+        ? html`<span tabindex="0"></span>`
+        : html` <span tabindex="0">${value[nameField]} (${value[descriptionField]})</span> `}
       <mwc-icon>arrow_drop_down</mwc-icon>
     `
   }
 
-  async firstUpdated() {
-    await this.updateComplete
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.openSelector()
+  }
 
-    this.renderRoot.addEventListener('click', e => {
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
       e.stopPropagation()
-
       this.openSelector()
-    })
-
-    this.openSelector()
+    }
   }
 
   openSelector() {

package/src/grist-editor/ox-grist-editor-resource-object-legacy.ts

@@ -29,21 +29,29 @@ export class OxGristEditorResourceObjectLegacy extends OxGristEditor {
       description = value[descriptionField] && `(${value[descriptionField]})`
     }
 
-    return html` ${!value ? html`` : html` <span style="flex:1">${name || ''}${description || ''}</span> `} `
+    return html`
+      ${!value
+        ? html`<span tabindex="0"></span>`
+        : html` <span tabindex="0" style="flex:1">${name || ''}${description || ''}</span> `}
+    `
   }
 
   async firstUpdated() {
+    super.firstUpdated()
     this.template = ((this.column.record || {}).options || {}).template
+  }
 
-    await this.updateComplete
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.openSelector()
+  }
 
-    this.renderRoot.addEventListener('click', e => {
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
       e.stopPropagation()
-
       this.openSelector()
-    })
-
-    this.openSelector()
+    }
   }
 
   openSelector() {

package/src/grist-editor/ox-grist-editor-resource-object.ts

@@ -29,21 +29,29 @@ export class OxGristEditorResourceObject extends OxGristEditor {
       description = value[descriptionField] && `(${value[descriptionField]})`
     }
 
-    return html` ${!value ? html`` : html` <span style="flex:1">${name || ''}${description || ''}</span> `} `
+    return html`
+      ${!value
+        ? html`<span tabindex="0"></span>`
+        : html` <span tabindex="0" style="flex:1">${name || ''}${description || ''}</span> `}
+    `
   }
 
   async firstUpdated() {
+    super.firstUpdated()
     this.template = ((this.column.record || {}).options || {}).template
+  }
 
-    await this.updateComplete
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.openSelector()
+  }
 
-    this.renderRoot.addEventListener('click', e => {
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
       e.stopPropagation()
-
       this.openSelector()
-    })
-
-    this.openSelector()
+    }
   }
 
   openSelector() {