@operato/app 1.0.0-beta.7 → 1.0.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "WebApplication production supporting components following open-wc recommendations",
   "license": "MIT",
   "author": "heartyoh",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -20,15 +20,11 @@
     "./grist-editor/ox-grist-renderer-resource-id.js": "./dist/src/grist-editor/ox-grist-renderer-resource-id.js",
     "./grist-editor/ox-selector-resource-object.js": "./dist/src/grist-editor/ox-selector-resource-object.js",
     "./grist-editor/ox-grist-renderer-resource-object.js": "./dist/src/grist-editor/ox-grist-renderer-resource-object.js",
-    "./grist-editor/ox-grist-editor-crontab.js": "./dist/src/grist-editor/ox-grist-editor-crontab.js",
     "./grist-editor/ox-grist-renderer-crontab.js": "./dist/src/grist-editor/ox-grist-renderer-crontab.js",
     "./grist-editor/ox-grist-editor-json.js": "./dist/src/grist-editor/ox-grist-editor-json.js",
     "./grist-editor/ox-grist-editor-code.js": "./dist/src/grist-editor/ox-grist-editor-code.js",
     "./grist-editor/ox-grist-editor-resource-object.js": "./dist/src/grist-editor/ox-grist-editor-resource-object.js",
     "./grist-editor/ox-grist-editor-resource-code.js": "./dist/src/grist-editor/ox-grist-editor-resource-code.js",
-    "./grist-editor/ox-grist-editor-parameters.js": "./dist/src/grist-editor/ox-grist-editor-parameters.js",
-    "./grist-editor/ox-grist-editor-value-map.js": "./dist/src/grist-editor/ox-grist-editor-value-map.js",
-    "./grist-editor/ox-grist-editor-partition-keys.js": "./dist/src/grist-editor/ox-grist-editor-partition-keys.js",
     "./filter-renderer.js": "./dist/src/filter-renderer/index.js"
   },
   "publishConfig": {
@@ -53,31 +49,29 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@graphql-tools/load": "^7.3.2",
-    "@graphql-tools/url-loader": "^7.2.0",
-    "@graphql-tools/wrap": "^8.1.1",
-    "@material/mwc-button": "^0.25.3",
-    "@material/mwc-icon": "^0.25.3",
-    "@material/mwc-icon-button": "^0.25.3",
-    "@operato/attachment": "^1.0.0-beta.7",
-    "@operato/data-grist": "^1.0.0-beta.7",
-    "@operato/font": "^1.0.0-beta.7",
-    "@operato/form": "^1.0.0-beta.7",
-    "@operato/graphql": "^1.0.0-beta.7",
-    "@operato/i18n": "^1.0.0-beta.7",
-    "@operato/input": "^1.0.0-beta.7",
-    "@operato/layout": "^1.0.0-beta.7",
-    "@operato/property-editor": "^1.0.0-beta.7",
-    "@operato/shell": "^1.0.0-beta.7",
-    "@operato/styles": "^1.0.0-beta.7",
-    "@operato/utils": "^1.0.0-beta.7",
-    "codemirror": "^5.59.1",
-    "codemirror-graphql": "^0.15.2",
+    "@graphql-tools/wrap": "^8.5.0",
+    "@material/mwc-button": "^0.26.1",
+    "@material/mwc-icon": "^0.26.1",
+    "@material/mwc-icon-button": "^0.26.1",
+    "@operato/attachment": "^1.0.0",
+    "@operato/data-grist": "^1.0.0",
+    "@operato/font": "^1.0.0",
+    "@operato/form": "^1.0.0",
+    "@operato/graphql": "^1.0.0",
+    "@operato/i18n": "^1.0.0",
+    "@operato/input": "^1.0.0",
+    "@operato/layout": "^1.0.0",
+    "@operato/property-editor": "^1.0.0",
+    "@operato/shell": "^1.0.0",
+    "@operato/styles": "^1.0.0",
+    "@operato/utils": "^1.0.0",
+    "codemirror": "^5.64.0",
+    "codemirror-graphql": "^1.3.2",
     "cronstrue": "^2.2.0",
     "cross-fetch": "^3.1.5",
-    "graphql": "^15.7.2",
+    "graphql": "^16.5.0",
     "graphql-tag": "^2.12.6",
-    "lit": "^2.2.1"
+    "lit": "^2.2.7"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
@@ -87,12 +81,12 @@
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.29",
-    "@web/dev-server-storybook": "next",
+    "@web/dev-server-storybook": "^0.5.0",
     "@web/test-runner": "next",
     "concurrently": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "husky": "^4.3.8",
+    "husky": "^7.0.2",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "tslib": "^2.3.1",
@@ -111,5 +105,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "feabccbb32d6d8487d761e5c9f1d21a22ab1c34a"
+  "gitHead": "c383e4b11cb4195f32be9b0daa4342dda0bbb2ab"
 }

package/src/filters-form/filter-resource-select.ts

@@ -0,0 +1,94 @@
+import '@operato/input/ox-checkbox.js'
+import '../grist-editor/ox-selector-resource-id'
+
+import { html } from 'lit-html'
+
+import { FilterConfig, FilterSelectRenderer } from '@operato/form'
+import { i18next } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+
+type SelectedCallback = (value: { id: string; name: string; description: string }) => void
+
+function openResourceSelector(filter: FilterConfig, value: any, confirmCallback: SelectedCallback) {
+  const { queryName, select, list, basicArgs, valueField = 'id' } = filter.options || {}
+
+  var actualValue
+  if (typeof valueField === 'function') {
+    actualValue = valueField(value)
+  } else {
+    actualValue = value?.[valueField]
+  }
+
+  var template = html`
+    <ox-selector-resource-id
+      .value=${actualValue}
+      .confirmCallback=${confirmCallback}
+      .queryName=${queryName}
+      .select=${select}
+      .list=${list}
+      .basicArgs=${basicArgs}
+      .valueField=${valueField}
+    ></ox-selector-resource-id>
+  `
+
+  const popup = openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: i18next.t('title.select_item')
+  })
+}
+
+export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner) => {
+  const { name, operator = 'like' } = filter
+
+  return operator === 'like'
+    ? html` <input
+        type="text"
+        name=${name}
+        .value=${value}
+        @change=${(e: CustomEvent) => {
+          const input = e.target as HTMLInputElement
+          input.dispatchEvent(
+            new CustomEvent('filter-change', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                name,
+                operator,
+                value: input.value
+              }
+            })
+          )
+        }}
+      />`
+    : operator == 'in'
+    ? html``
+    : operator === 'eq'
+    ? html`
+        <input
+          style="min-width: 100px; min-height: 24px"
+          type="text"
+          name=${name}
+          .value=${value}
+          readonly
+          @click=${(e: Event) => {
+            e.stopPropagation()
+
+            const confirmCallback = (selected?: { [field: string]: any }) => {
+              var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {}
+
+              owner.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: selected ? selected[idField] : ''
+                })
+              )
+            }
+
+            openResourceSelector(filter, value, confirmCallback)
+          }}
+        />
+      `
+    : html``
+}

package/src/filters-form/index.ts

@@ -0,0 +1,6 @@
+import { registerFilterRenderer } from '@operato/form'
+
+import { FilterResourceSelect } from './filter-resource-select.js'
+
+registerFilterRenderer('resource-object', [FilterResourceSelect])
+registerFilterRenderer('resource-id', [FilterResourceSelect])

package/src/grist-editor/index.ts

@@ -1,14 +1,10 @@
 import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist'
 
-import { OxGristEditorCrontab } from './ox-grist-editor-crontab.js'
 import { OxGristEditorJson } from './ox-grist-editor-json.js'
-import { OxGristEditorParameters } from './ox-grist-editor-parameters.js'
-import { OxGristEditorPartitionKeys } from './ox-grist-editor-partition-keys.js'
 import { OxGristEditorResourceCode } from './ox-grist-editor-resource-code.js'
 import { OxGristEditorResourceId } from './ox-grist-editor-resource-id.js'
 import { OxGristEditorResourceObject } from './ox-grist-editor-resource-object.js'
-import { OxGristEditorValueMap } from './ox-grist-editor-value-map.js'
-import { OxGristRendererCrontab } from './ox-grist-renderer-crontab.js'
+import { OxGristRendererCrontab } from './ox-grist-renderer-crontab'
 import { OxGristRendererResourceId } from './ox-grist-renderer-resource-id.js'
 import { OxGristRendererResourceObject } from './ox-grist-renderer-resource-object.js'
 
@@ -16,10 +12,6 @@ import { OxGristRendererResourceObject } from './ox-grist-renderer-resource-obje
 registerEditor('resource-id', OxGristEditorResourceId)
 registerEditor('resource-object', OxGristEditorResourceObject)
 registerEditor('resource-code', OxGristEditorResourceCode)
-registerEditor('parameters', OxGristEditorParameters)
-registerEditor('value-map', OxGristEditorValueMap)
-registerEditor('partition-keys', OxGristEditorPartitionKeys)
-registerEditor('crontab', OxGristEditorCrontab)
 registerEditor('json', OxGristEditorJson)
 
 registerRenderer('resource-id', OxGristRendererResourceId)

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

@@ -1,4 +1,3 @@
-import '@material/mwc-icon'
 import './ox-selector-resource-object.js'
 
 import { html, TemplateResult } from 'lit'
@@ -30,10 +29,7 @@ export class OxGristEditorResourceObject extends OxGristEditor {
       description = value[descriptionField] && `(${value[descriptionField]})`
     }
 
-    return html`
-      ${!value ? html`` : html` <span>${name || ''}${description || ''}</span> `}
-      <mwc-icon>arrow_drop_down</mwc-icon>
-    `
+    return html` ${!value ? html`` : html` <span style="flex:1">${name || ''}${description || ''}</span> `} `
   }
 
   async firstUpdated() {
@@ -55,9 +51,18 @@ export class OxGristEditorResourceObject extends OxGristEditor {
       delete this.popup
     }
 
-    const confirmCallback = (selected?: { [field: string]: any }) => {
-      var { idField = 'id', nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
+    var {
+      idField = 'id',
+      nameField = 'name',
+      descriptionField = 'description',
+      valueField = 'id',
+      queryName,
+      basicArgs,
+      select,
+      list
+    } = this.column.record.options || {}
 
+    const confirmCallback = (selected?: { [field: string]: any }) => {
       this.dispatchEvent(
         new CustomEvent('field-change', {
           bubbles: true,
@@ -88,7 +93,6 @@ export class OxGristEditorResourceObject extends OxGristEditor {
     }
 
     var value = this.value || {}
-    var valueField: string | ((item: any) => any) = this.column.record.options.valueField || 'id'
     var actualValue
     if (typeof valueField === 'function') {
       actualValue = valueField(value)
@@ -102,11 +106,11 @@ export class OxGristEditorResourceObject extends OxGristEditor {
         <ox-selector-resource-object
           .value=${actualValue}
           .confirmCallback=${confirmCallback.bind(this)}
-          .queryName=${this.column.record.options.queryName}
-          .select=${this.column.record.options.select}
-          .list=${this.column.record.options.list}
-          .basicArgs=${this.column.record.options.basicArgs}
-          .valueField=${this.column.record.options.valueField}
+          .queryName=${queryName}
+          .select=${select}
+          .list=${list}
+          .basicArgs=${basicArgs}
+          .valueField=${valueField}
         ></ox-selector-resource-object>
       `
 

package/src/grist-editor/ox-grist-renderer-crontab.ts

@@ -1,8 +1,9 @@
-import { FieldRenderer } from '@operato/data-grist'
 import cronstrue from 'cronstrue/i18n'
-import { detectOverflow } from '@operato/utils'
-import { html } from 'lit'
 import i18next from 'i18next'
+import { html } from 'lit'
+
+import { FieldRenderer } from '@operato/data-grist'
+import { detectOverflow } from '@operato/utils'
 
 function onmouseover(e: Event) {
   const element = e.target as HTMLSpanElement
@@ -21,7 +22,7 @@ export const OxGristRendererCrontab: FieldRenderer = (value, column, record, row
 
   try {
     const language = (i18next.language || 'en').substring(0, 2)
-    text = value === undefined ? '' : cronstrue.toString(value, { locale: language || 'en' })
+    text = !value ? '' : cronstrue.toString(value, { locale: language || 'en' })
   } catch (e) {
     console.error(e)
   }

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

@@ -7,7 +7,11 @@ export const OxGristRendererResourceId: FieldRenderer = (value, column, record,
     return ''
   }
 
-  var { nameField = 'name', descriptionField = 'description' } = column.record.options || {}
+  const { nameField = 'name', descriptionField = 'description' } = column.record.options || {}
 
-  return html`<span>${value[nameField] || ''}(${value[descriptionField] || ''})</span> `
+  const name = value[nameField] || ''
+  const description = value[descriptionField] || ''
+  const suffix = description ? `(${description})` : ''
+
+  return html`<span>${name}${suffix}</span> `
 }

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

@@ -1,10 +1,11 @@
 import '@operato/input/ox-input-code.js'
 
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { ScrollbarStyles } from '@operato/styles'
 import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import { ScrollbarStyles } from '@operato/styles'
 
 @customElement('ox-popup-code-input')
 export class OxPopupCodeInput extends LitElement {
@@ -55,11 +56,11 @@ export class OxPopupCodeInput extends LitElement {
   }
 
   private onCancel(e: Event) {
-    history.back()
+    closePopup(this)
   }
 
   private onConfirm(e: Event) {
     this.confirmCallback && this.confirmCallback(this.value)
-    history.back()
+    closePopup(this)
   }
 }

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

@@ -7,6 +7,7 @@ import { customElement, property, query } from 'lit/decorators.js'
 import { DataGrist, FetchOption, GristData, GristRecord, ZERO_DATA } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
 import { isMobileDevice } from '@operato/utils'
 
 @customElement('ox-selector-resource-id')
@@ -75,16 +76,16 @@ export class OxSelectorResourceId extends LitElement {
 
   onempty() {
     this.confirmCallback && this.confirmCallback()
-    history.back()
+    closePopup(this)
   }
 
   oncancel() {
-    history.back()
+    closePopup(this)
   }
 
   onconfirm() {
     this.confirmCallback && this.confirmCallback(this.selected)
-    history.back()
+    closePopup(this)
   }
 
   async firstUpdated() {

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

@@ -18,6 +18,7 @@ import {
 import { MultiColumnFormStyles, SearchForm } from '@operato/form'
 import { buildArgs, client, gqlContext } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
 import { isMobileDevice } from '@operato/utils'
 
 @customElement('ox-selector-resource-object')
@@ -88,6 +89,7 @@ export class OxSelectorResourceObject extends LitElement {
         }}
         @submit=${(e: SubmitEvent) => this.grist.fetch()}
         .fields=${this.searchFields}
+        autofocus
       ></ox-search-form>
 
       <ox-grist
@@ -108,16 +110,16 @@ export class OxSelectorResourceObject extends LitElement {
 
   onempty() {
     this.confirmCallback && this.confirmCallback()
-    history.back()
+    closePopup(this)
   }
 
   oncancel() {
-    history.back()
+    closePopup(this)
   }
 
   onconfirm() {
     this.confirmCallback && this.confirmCallback(this.selected)
-    history.back()
+    closePopup(this)
   }
 
   fetchHandler: FetchHandler = async ({ filters, page, limit, sorters = [] }) => {

package/src/input/ox-input-background-pattern.ts

@@ -3,6 +3,7 @@
  */
 
 import '@operato/i18n/ox-i18n.js'
+import '@operato/input/ox-input-color.js'
 import '@operato/attachment/ox-attachment-selector.js'
 
 import { css, html } from 'lit'
@@ -12,12 +13,14 @@ import { OxFormField } from '@operato/input'
 
 export type BackgroundPatternOption = {
   image?: HTMLImageElement | string
+  color?: string
   align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'
   offsetX?: number
   offsetY?: number
   width?: number
   height?: number
   fitPattern?: boolean
+  noRepeat?: boolean
 }
 
 /**
@@ -89,6 +92,23 @@ export class OxInputBackgroundPattern extends OxFormField {
       grid-column: span 2;
       text-align: right;
     }
+
+    .grid-10 > .icon-only-label {
+      grid-column: span 2;
+
+      background: var(--url-icon-properties-label) no-repeat;
+      float: left;
+      margin: 0;
+      align-self: stretch;
+    }
+
+    .icon-only-label.color {
+      background-position: 100% -500px;
+    }
+
+    .grid-10 > ox-input-color {
+      grid-column: span 8;
+    }
   `
 
   @property({ type: Object }) value?: BackgroundPatternOption
@@ -112,13 +132,13 @@ export class OxInputBackgroundPattern extends OxFormField {
 
       <select value-key="align" class="select-content" .value=${value.align}>
         <option value="left-top">Left Top</option>
-        <option value="top">Top</option>
+        <option value="top">Center Top</option>
         <option value="right-top">Right Top</option>
-        <option value="left">Left</option>
-        <option value="center">Center</option>
-        <option value="right">Right</option>
+        <option value="left">Left Center</option>
+        <option value="center">Center Center</option>
+        <option value="right">Right Center</option>
         <option value="left-bottom">Left Bottom</option>
-        <option value="bottom">Bottom</option>
+        <option value="bottom">Center Bottom</option>
         <option value="right-bottom">Right Bottom</option>
       </select>
 
@@ -136,9 +156,19 @@ export class OxInputBackgroundPattern extends OxFormField {
         <input type="number" value-key="height" .value=${value.height} />
       </div>
 
+      <div class="grid-10">
+        <label class="icon-only-label color"></label>
+        <ox-input-color value-key="color" .value=${value.color}> </ox-input-color>
+      </div>
+
       <div class="grid-10">
         <input value-key="fitPattern" type="checkbox" .checked=${value.fitPattern} required />
-        <label> <ox-i18n msgid="label.fit" auto="">Fit</ox-i18n> </label>
+        <label> <ox-i18n msgid="label.fit" auto="">fit</ox-i18n> </label>
+      </div>
+
+      <div class="grid-10">
+        <input value-key="noRepeat" type="checkbox" .checked=${value.noRepeat} required />
+        <label> <ox-i18n msgid="label.no-repeat" auto="">no repeat</ox-i18n> </label>
       </div>
     `
   }
@@ -152,7 +182,7 @@ export class OxInputBackgroundPattern extends OxFormField {
     var key = element.getAttribute('value-key')
     var value: any = element.value
 
-    if (key == 'fitPattern') {
+    if (key === 'fitPattern' || key === 'noRepeat') {
       value = element.checked
     }
 

package/src/input/ox-input-fill-style.ts

@@ -8,10 +8,12 @@ import '@operato/input/ox-input-color-stops.js'
 import '@operato/input/ox-input-color-gradient.js'
 import './ox-input-background-pattern.js'
 
-import { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'
+import { css, html, PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
 import { ColorStop, GradientOption, OxFormField, OxInputColorGradient } from '@operato/input'
-import { PropertyValues, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+
+import { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'
 
 export type FillStyle =
   | {
@@ -27,6 +29,8 @@ export type FillStyle =
       height?: number
       align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'
       fitPattern?: boolean
+      noRepeat?: boolean
+      color?: string
     }
   | 'no'
   | string
@@ -66,13 +70,13 @@ export class OxInputColorStyle extends OxFormField {
     .grid-10 > .icon-only-label {
       grid-column: span 1;
 
-      background: url(/assets/images/icon-properties-label.png) no-repeat;
+      background: var(--url-icon-properties-label) no-repeat;
       float: left;
       margin: 0;
     }
 
     .icon-only-label.color {
-      background-position: 70% -498px;
+      background-position: 100% -500px;
     }
 
     [editors] > :not([active]) {
@@ -206,7 +210,9 @@ export class OxInputColorStyle extends OxFormField {
             width: Number(value.width),
             height: Number(value.height),
             align: value.align,
-            fitPattern: value.fitPattern
+            fitPattern: value.fitPattern,
+            noRepeat: value.noRepeat,
+            color: value.color
           }
 
           if (!this._block_reset) {
@@ -275,7 +281,9 @@ export class OxInputColorStyle extends OxFormField {
           width: Number(this.pattern.width),
           height: Number(this.pattern.height),
           align: this.pattern.align,
-          fitPattern: this.pattern.fitPattern
+          fitPattern: this.pattern.fitPattern,
+          noRepeat: this.pattern.noRepeat,
+          color: this.pattern.color
         }
         break
 
@@ -350,7 +358,9 @@ export class OxInputColorStyle extends OxFormField {
       width: Number(this.pattern?.width),
       height: Number(this.pattern?.height),
       align: this.pattern?.align,
-      fitPattern: this.pattern?.fitPattern
+      fitPattern: this.pattern?.fitPattern,
+      noRepeat: this.pattern?.noRepeat,
+      color: this.pattern?.color
     }
 
     this._block_reset = true

package/src/input/ox-input-graphql.ts

@@ -10,19 +10,19 @@ import 'codemirror-graphql/hint'
 import 'codemirror-graphql/lint'
 import 'codemirror-graphql/mode'
 
-import { GRAPHQL_URI, client } from '@operato/graphql'
-import { LitElement, PropertyValues, css, html, unsafeCSS } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { introspectSchema, wrapSchema } from '@graphql-tools/wrap'
-
-import CodeMirror from 'codemirror'
-import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'
 import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'
+import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css'
 import LintStyle from '!!text-loader!codemirror/addon/lint/lint.css'
+import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'
 import NightThemeStyle from '!!text-loader!codemirror/theme/night.css'
-import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css'
+import CodeMirror from 'codemirror'
 import { fetch } from 'cross-fetch'
 import { print } from 'graphql'
+import { css, html, LitElement, PropertyValues, unsafeCSS } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { introspectSchema, wrapSchema } from '@graphql-tools/wrap'
+import { GRAPHQL_URI } from '@operato/graphql'
 
 /**
  WEB Component for code-mirror graphql editor.

package/src/property-editor/index.ts

@@ -13,9 +13,10 @@ import '@operato/property-editor/ox-property-editor-color.js'
 import '@operato/property-editor/ox-property-editor-multiple-colors.js'
 import '@operato/property-editor/ox-property-editor-solid-colorstops.js'
 import '@operato/property-editor/ox-property-editor-gradient-colorstops.js'
-import '@operato/property-editor/ox-property-editor-gradient-colorstops.js'
 import '@operato/property-editor/ox-property-editor-textarea.js'
 import '@operato/property-editor/ox-property-editor-table.js'
+import '@operato/property-editor/ox-property-editor-key-values.js'
+import '@operato/property-editor/ox-property-editor-partition-keys.js'
 import '@operato/property-editor/ox-property-editor-value-map.js'
 import '@operato/property-editor/ox-property-editor-value-ranges.js'
 import '@operato/attachment/ox-property-editor-attachment-selector.js'
@@ -55,5 +56,7 @@ OxPropertyEditor.register({
   graphql: 'ox-property-editor-graphql',
   'editor-table': 'ox-property-editor-table',
   'id-input': 'ox-property-editor-scene-component-id',
-  'font-selector': 'ox-property-editor-font-selector'
+  'font-selector': 'ox-property-editor-font-selector',
+  'partition-keys': 'ox-property-editor-partion-keys',
+  'key-values': 'ox-property-editor-key-values'
 })

package/src/property-editor/ox-property-editor-graphql.ts

@@ -1,12 +1,13 @@
 import '../input/ox-input-graphql.js'
 
-import { OxPropertyEditor } from '@operato/property-editor'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
 
 @customElement('ox-property-editor-graphql')
 export class OxPropertyEditorGraphQL extends OxPropertyEditor {
-  editorTemplate() {
-    return html` <ox-input-graphql id="editor" .value=${this.value} fullwidth> </ox-input-graphql> `
+  editorTemplate(value: any, spec: PropertySpec) {
+    return html` <ox-input-graphql id="editor" .value=${value} fullwidth> </ox-input-graphql> `
   }
 }