@operato/board 1.2.24 → 1.2.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.2.24",
+  "version": "1.2.25",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -87,16 +87,16 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.0.0-next.6",
-    "@operato/app": "^1.2.24",
-    "@operato/data-grist": "^1.2.17",
-    "@operato/font": "^1.2.24",
+    "@operato/app": "^1.2.25",
+    "@operato/data-grist": "^1.2.25",
+    "@operato/font": "^1.2.25",
     "@operato/graphql": "^1.2.6",
     "@operato/i18n": "^1.2.0",
-    "@operato/input": "^1.2.11",
+    "@operato/input": "^1.2.25",
     "@operato/layout": "^1.2.16",
     "@operato/markdown": "^1.2.0",
     "@operato/popup": "^1.2.11",
-    "@operato/property-editor": "^1.2.24",
+    "@operato/property-editor": "^1.2.25",
     "@operato/styles": "^1.2.0",
     "@operato/utils": "^1.2.11",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -147,5 +147,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "711e61fd82f4a112dc11091970bf2aeb0430bd85"
+  "gitHead": "73998868ecf0925a0691da776f8fd6df40e7a554"
 }

package/src/modeller/property-sidebar/data-binding/data-binding-mapper.ts

@@ -2,12 +2,12 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@operato/input/ox-input-value-map.js'
-import '@operato/input/ox-input-value-ranges.js'
 import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-code.js'
 import '@operato/i18n/ox-i18n.js'
 import '@operato/help/ox-help-icon.js'
+import './data-binding-value-map.js'
+import './data-binding-value-range.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { property, query, state } from 'lit/decorators.js'
@@ -170,7 +170,7 @@ export class DataBindingMapper extends LitElement {
     fontColor: 'color',
 
     data: 'object',
-    source: 'object',
+    source: 'attachment',
     location: 'object',
     dimension: 'object',
 
@@ -196,7 +196,9 @@ export class DataBindingMapper extends LitElement {
     }
 
     return html`
-      <label for="accessor-input"> <ox-i18n msgid="label.accessor">accessor</ox-i18n><ox-help-icon topic="board-modeller/accessor"> </label>
+      <label for="accessor-input">
+        <ox-i18n msgid="label.accessor">accessor</ox-i18n><ox-help-icon topic="board-modeller/accessor"></ox-help-icon>
+      </label>
       <input
         id="accessor-input"
         value-key="accessor"
@@ -226,19 +228,17 @@ export class DataBindingMapper extends LitElement {
         <option value="(self)"></option>
         <option value="(key)"></option>
         <option value="[propkey]"></option>
-        ${
-          this._componentIds.length
-            ? html`
-                ${this._componentIds.map(
-                  ({ value, description }) => html` <option value=${value}>${description}</option> `
-                )}
-              `
-            : html``
-        }
+        ${this._componentIds.length
+          ? html`
+              ${this._componentIds.map(
+                ({ value, description }) => html` <option value=${value}>${description}</option> `
+              )}
+            `
+          : html``}
       </datalist>
 
       <label for="property-input"> <ox-i18n msgid="label.property">property</ox-i18n> </label>
-      <select id="property-input" value-key="property" .value=${mapping.property}>
+      <select id="property-input" value-key="property" .value=${mapping.property || ''}>
         ${this.properties.map(
           item => html` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `
         )}
@@ -253,21 +253,21 @@ export class DataBindingMapper extends LitElement {
       </ox-buttons-radio>
 
       <div rule-editors ?hidden=${mapping.rule == 'value'}>
-        <ox-input-value-map
+        <data-binding-value-map
           value-key="map"
           .value=${this.rule.map || {}}
           .valuetype=${this._valuetype(mapping.property!)}
           ?active=${mapping.rule == 'map'}
         >
-        </ox-input-value-map>
+        </data-binding-value-map>
 
-        <ox-input-value-ranges
+        <data-binding-value-ranges
           value-key="range"
           .value=${this.rule.range || []}
           .valuetype=${this._valuetype(mapping.property!)}
           ?active=${mapping.rule == 'range'}
         >
-        </ox-input-value-ranges>
+        </data-binding-value-ranges>
 
         <ox-input-code
           value-key="eval"

package/src/modeller/property-sidebar/data-binding/data-binding-value-map.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+import { OxInputValueMap } from '@operato/input'
+
+import '@operato/attachment/ox-attachment-selector.js'
+
+@customElement('data-binding-value-map')
+export class DataBindingValueMap extends OxInputValueMap {
+  static styles = OxInputValueMap.styles
+
+  valueInputTemplate(value?: any) {
+    if (this.valuetype == 'attachment') {
+      return html`<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`
+    }
+    return super.valueInputTemplate(value)
+  }
+}

package/src/modeller/property-sidebar/data-binding/data-binding-value-range.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+import { OxInputValueRange } from '@operato/input'
+
+import '@operato/attachment/ox-attachment-selector.js'
+
+@customElement('data-binding-value-range')
+export class DataBindingValueRange extends OxInputValueRange {
+  static styles = OxInputValueRange.styles
+
+  valueInputTemplate(value?: any) {
+    if (this.valuetype == 'attachment') {
+      return html`<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`
+    }
+    return super.valueInputTemplate(value)
+  }
+}