@operato/board 0.3.20 → 0.3.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "0.3.20",
+  "version": "0.3.26",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -49,17 +49,17 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@operato/data-grist": "^0.3.20",
-    "@operato/graphql": "^0.3.20",
-    "@operato/input": "^0.3.20",
-    "@operato/markdown": "^0.3.20",
-    "@operato/popup": "^0.3.20",
-    "@operato/property-editor": "^0.3.20",
-    "@operato/styles": "^0.3.20",
-    "@operato/utils": "^0.3.20",
+    "@operato/data-grist": "^0.3.26",
+    "@operato/graphql": "^0.3.26",
+    "@operato/i18n": "^0.3.26",
+    "@operato/input": "^0.3.26",
+    "@operato/markdown": "^0.3.26",
+    "@operato/popup": "^0.3.26",
+    "@operato/property-editor": "^0.3.26",
+    "@operato/styles": "^0.3.26",
+    "@operato/utils": "^0.3.26",
     "@polymer/paper-dropdown-menu": "^3.2.0",
-    "@things-factory/help": "^4.0.27",
-    "@things-factory/modeller-ui": "^4.0.27",
+    "@things-factory/modeller-ui": "^4.0.41",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
     "file-saver": "^2.0.5",
@@ -70,7 +70,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@hatiolab/things-scene": "^2.7.33",
+    "@hatiolab/things-scene": "^2.7.34",
     "@material/mwc-fab": "^0.25.3",
     "@material/mwc-icon": "^0.25.3",
     "@open-wc/eslint-config": "^4.3.0",
@@ -81,7 +81,7 @@
     "@types/w3c-web-usb": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "@web/dev-server": "^0.1.28",
+    "@web/dev-server": "^0.1.29",
     "@web/dev-server-storybook": "next",
     "@web/test-runner": "next",
     "concurrently": "^5.3.0",
@@ -106,5 +106,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ed1910cc0377b9253c9b07d09d27c0d9788fe222"
+  "gitHead": "45a8d381255eb8691cf1e22101741b0674284e01"
 }

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

@@ -6,6 +6,7 @@ import '@things-factory/modeller-ui/client/editors/things-editor-value-map'
 import '@things-factory/modeller-ui/client/editors/things-editor-value-range'
 import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-code.js'
+import '@operato/i18n/ox-i18n.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
@@ -174,7 +175,7 @@ export default class DataBindingMapper extends LitElement {
     }
 
     return html`
-      <label for="accessor-input"> <i18n-msg msgid="label.accessor">accessor</i18n-msg> </label>
+      <label for="accessor-input"> <ox-i18n msgid="label.accessor">accessor</ox-i18n> </label>
       <input
         id="accessor-input"
         value-key="accessor"
@@ -183,7 +184,7 @@ export default class DataBindingMapper extends LitElement {
         .value=${mapping.accessor || ''}
       />
 
-      <label for="target-input"> <i18n-msg msgid="label.target">target</i18n-msg> </label>
+      <label for="target-input"> <ox-i18n msgid="label.target">target</ox-i18n> </label>
       <input
         id="target-input"
         type="text"
@@ -203,19 +204,19 @@ export default class DataBindingMapper extends LitElement {
           : html``}
       </datalist>
 
-      <label for="property-input"> <i18n-msg msgid="label.property">property</i18n-msg> </label>
+      <label for="property-input"> <ox-i18n msgid="label.property">property</ox-i18n> </label>
       <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> `
         )}
       </select>
 
-      <label> <i18n-msg msgid="label.rule-type">rule type</i18n-msg> </label>
+      <label> <ox-i18n msgid="label.rule-type">rule type</ox-i18n> </label>
       <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>
-        <div data-value="value"><i18n-msg msgid="label.value"></i18n-msg></div>
-        <div data-value="map"><i18n-msg msgid="label.map"></i18n-msg></div>
-        <div data-value="range"><i18n-msg msgid="label.range"></i18n-msg></div>
-        <div data-value="eval"><i18n-msg msgid="label.eval"></i18n-msg></div>
+        <div data-value="value"><ox-i18n msgid="label.value"></ox-i18n></div>
+        <div data-value="map"><ox-i18n msgid="label.map"></ox-i18n></div>
+        <div data-value="range"><ox-i18n msgid="label.range"></ox-i18n></div>
+        <div data-value="eval"><ox-i18n msgid="label.eval"></ox-i18n></div>
       </ox-buttons-radio>
 
       <div rule-editors class="content" ?hidden=${mapping.rule == 'value'}>

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

@@ -4,9 +4,10 @@
 
 import './data-binding-mapper'
 import '@material/mwc-icon'
-import '@things-factory/help'
+import '@operato/help/ox-title-with-help.js'
 import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-data.js'
+import '@operato/i18n/ox-i18n.js'
 
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
@@ -201,27 +202,29 @@ class PropertyDataBinding extends AbstractProperty {
     return html`
       <fieldset>
         <legend>
-          <title-with-help topic="board-modeller/data-binding" msgid="label.identifier">identifier</title-with-help>
+          <ox-title-with-help topic="board-modeller/data-binding" msgid="label.identifier"
+            >identifier</ox-title-with-help
+          >
         </legend>
         <div class="property-grid">
-          <label> <i18n-msg msgid="label.id">ID</i18n-msg> </label>
+          <label> <ox-i18n msgid="label.id">ID</ox-i18n> </label>
           <input value-key="id" .value=${value.id || ''} />
 
-          <label> <i18n-msg msgid="label.class">Class</i18n-msg> </label>
+          <label> <ox-i18n msgid="label.class">Class</ox-i18n> </label>
           <input value-key="class" .value=${value.class || ''} />
 
-          <label> <i18n-msg msgid="label.template-prefix">Template Prefix</i18n-msg> </label>
+          <label> <ox-i18n msgid="label.template-prefix">Template Prefix</ox-i18n> </label>
           <input value-key="templatePrefix" .value=${value.templatePrefix || ''} />
 
           <div class="checkbox-row">
             <input id="checkbox-ndns" type="checkbox" value-key="ndns" .checked=${value.ndns} />
-            <label for="checkbox-ndns"> <i18n-msg msgid="label.ndns">No Data No Show</i18n-msg> </label>
+            <label for="checkbox-ndns"> <ox-i18n msgid="label.ndns">No Data No Show</ox-i18n> </label>
           </div>
 
           <div class="checkbox-row">
             <input id="checkbox-sensitive" type="checkbox" value-key="sensitive" .checked=${value.sensitive} />
             <label for="checkbox-sensitive">
-              <i18n-msg msgid="label.intent-sensitive">Intent Sensitive</i18n-msg>
+              <ox-i18n msgid="label.intent-sensitive">Intent Sensitive</ox-i18n>
             </label>
           </div>
         </div>
@@ -229,7 +232,7 @@ class PropertyDataBinding extends AbstractProperty {
 
       <fieldset collapsable ?collapsed=${!this._dataExpanded}>
         <legend>
-          <i18n-msg msgid="label.initial-data">initial value</i18n-msg>
+          <ox-i18n msgid="label.initial-data">initial value</ox-i18n>
           <mwc-icon
             @click=${() => {
               this._dataExpanded = !this._dataExpanded
@@ -241,7 +244,7 @@ class PropertyDataBinding extends AbstractProperty {
       </fieldset>
 
       <fieldset>
-        <legend><i18n-msg msgid="label.data-spread">Data Spread</i18n-msg></legend>
+        <legend><ox-i18n msgid="label.data-spread">Data Spread</ox-i18n></legend>
         <div id="tab-header">
           <mwc-icon
             id="tab-nav-left-button"

package/src/modeller/property-sidebar/effects/effects.ts

@@ -5,13 +5,16 @@
 import './property-animations'
 import './property-event'
 import './property-shadow'
+import '@operato/i18n/ox-i18n.js'
+import '@operato/help/ox-title-with-help.js'
 
-import { Properties, Scene } from '@hatiolab/things-scene'
+import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { Properties, Scene } from '@hatiolab/things-scene'
+
 import { AbstractProperty } from '../abstract-property'
 import { PropertySharedStyle } from '../property-shared-style'
-import { html } from 'lit'
 
 @customElement('property-effect')
 class PropertyEffects extends AbstractProperty {
@@ -30,7 +33,7 @@ class PropertyEffects extends AbstractProperty {
     return html`
       <fieldset>
         <legend>
-          <title-with-help topic="board-modeller/effects/shadow" msgid="label.shadow">shadow</title-with-help>
+          <ox-title-with-help topic="board-modeller/effects/shadow" msgid="label.shadow">shadow</ox-title-with-help>
         </legend>
 
         <property-shadow value-key="shadow" .value=${value.shadow || {}}> </property-shadow>
@@ -38,11 +41,13 @@ class PropertyEffects extends AbstractProperty {
 
       <fieldset>
         <legend>
-          <title-with-help topic="board-modeller/effects/retention" msgid="label.retention">retention</title-with-help>
+          <ox-title-with-help topic="board-modeller/effects/retention" msgid="label.retention"
+            >retention</ox-title-with-help
+          >
         </legend>
 
         <div class="property-grid">
-          <label> <i18n-msg msgid="label.retention">retention</i18n-msg> </label>
+          <label> <ox-i18n msgid="label.retention">retention</ox-i18n> </label>
           <input type="number" value-key="retention" .value=${value.retention} placeholder="ms" />
         </div>
       </fieldset>

package/src/modeller/property-sidebar/effects/property-animation.ts

@@ -3,6 +3,7 @@
  */
 
 import '@operato/input/ox-input-angle.js'
+import '@operato/i18n/ox-i18n.js'
 
 import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -47,45 +48,45 @@ export default class PropertyAnimation extends LitElement {
         <option value="outline">Outline</option>
       </select>
 
-      <label> <i18n-msg msgid="label.waiting-time">waiting time</i18n-msg> </label>
+      <label> <ox-i18n msgid="label.waiting-time">waiting time</ox-i18n> </label>
       <input type="number" value-key="delay" .value=${value.delay} placeholder="ms" />
 
-      <label> <i18n-msg msgid="label.duration">duration</i18n-msg> </label>
+      <label> <ox-i18n msgid="label.duration">duration</ox-i18n> </label>
       <input type="number" value-key="duration" .value=${value.duration} placeholder="ms" />
 
       ${value.type == 'rotation' || value.type == 'vibration'
         ? html`
-            <label> <i18n-msg msgid="label.theta">theta</i18n-msg> </label>
+            <label> <ox-i18n msgid="label.theta">theta</ox-i18n> </label>
             <ox-input-angle value-key="theta" .radian=${value.theta}> </ox-input-angle>
           `
         : html``}
       ${value.type == 'heartbeat'
         ? html`
-            <label> <i18n-msg msgid="label.scale">scale</i18n-msg> </label>
+            <label> <ox-i18n msgid="label.scale">scale</ox-i18n> </label>
             <input type="number" value-key="scale" .value=${value.scale} />
           `
         : html``}
       ${value.type == 'moving'
         ? html`
-            <label> <i18n-msg msgid="label.x-axes">X-axes</i18n-msg> </label>
+            <label> <ox-i18n msgid="label.x-axes">X-axes</ox-i18n> </label>
             <input type="number" value-key="x" .value=${value.x} />
 
-            <label> <i18n-msg msgid="label.y-axes">Y-axes</i18n-msg> </label>
+            <label> <ox-i18n msgid="label.y-axes">Y-axes</ox-i18n> </label>
             <input type="number" value-key="y" .value=${value.y} />
           `
         : html``}
       ${value.type == 'fade'
         ? html`
-            <label> <i18n-msg msgid="label.start-alpha">start alpha</i18n-msg> </label>
+            <label> <ox-i18n msgid="label.start-alpha">start alpha</ox-i18n> </label>
             <input type="number" value-key="startAlpha" .value=${value.startAlpha} />
 
-            <label> <i18n-msg msgid="label.end-alpha">end alpha</i18n-msg> </label>
+            <label> <ox-i18n msgid="label.end-alpha">end alpha</ox-i18n> </label>
             <input type="number" value-key="endAlpha" .value=${value.endAlpha} />
           `
         : html``}
       ${value.type == 'outline'
         ? html`
-            <label> <i18n-msg msgid="label.target">target</i18n-msg> </label>
+            <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
             <input value-key="rideOn" .value=${value.rideOn || ''} list="target-list" />
             <datalist id="target-list">
               ${this.scene!.ids.map(info => info.key).map(id => html` <option value=${id}></option> `)}
@@ -94,7 +95,7 @@ export default class PropertyAnimation extends LitElement {
         : html``}
 
       <input id="checkbox-repeat" value-key="repeat" type="checkbox" .checked=${value.repeat} />
-      <label for="checkbox-repeat" class="checkbox-label"> <i18n-msg msgid="label.repeat">repeat</i18n-msg> </label>
+      <label for="checkbox-repeat" class="checkbox-label"> <ox-i18n msgid="label.repeat">repeat</ox-i18n> </label>
 
       <label>delta</label>
       <select value-key="delta" .value=${value.delta}>

package/src/modeller/property-sidebar/effects/property-animations.ts

@@ -4,11 +4,13 @@
 
 import './property-animation'
 import '@material/mwc-icon'
+import '@operato/help/ox-title-with-help.js'
 
-import { LitElement, css, html } from 'lit'
-import { Properties, Scene } from '@hatiolab/things-scene'
+import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
+import { Properties, Scene } from '@hatiolab/things-scene'
+
 import { PropertySharedStyle } from '../property-shared-style'
 import { convert } from './value-converter'
 
@@ -50,7 +52,9 @@ class PropertyAnimations extends LitElement {
     return html`
       <fieldset collapsable ?collapsed=${!this._expanded}>
         <legend>
-          <title-with-help topic="board-modeller/effects/animation" msgid="label.animation">animation</title-with-help>
+          <ox-title-with-help topic="board-modeller/effects/animation" msgid="label.animation"
+            >animation</ox-title-with-help
+          >
           <mwc-icon
             @click=${() => {
               this._expanded = !this._expanded

package/src/modeller/property-sidebar/effects/property-event-hover.ts

@@ -3,6 +3,7 @@
  */
 
 import '@operato/input/ox-input-data.js'
+import '@operato/i18n/ox-i18n.js'
 
 import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -29,10 +30,10 @@ class PropertyEventHover extends LitElement {
     return html`
       <input id="checkbox-emphasize" type="checkbox" value-key="emphasize" .checked=${emphasize} />
       <label for="checkbox-emphasize" class="checkbox-label">
-        <i18n-msg msgid="label.emphasize">emphasize</i18n-msg>
+        <ox-i18n msgid="label.emphasize">emphasize</ox-i18n>
       </label>
 
-      <label> <i18n-msg msgid="label.action">action</i18n-msg> </label>
+      <label> <ox-i18n msgid="label.action">action</ox-i18n> </label>
       <select id="tap-select" value-key="action" .value=${action || ''}>
         <option value=""></option>
         <option value="popup">popup target board</option>
@@ -43,7 +44,7 @@ class PropertyEventHover extends LitElement {
         <option value="value-set">set value to target component value</option>
       </select>
 
-      <label> <i18n-msg msgid="label.target">target</i18n-msg> </label>
+      <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
 
       ${action == 'popup'
         ? html`
@@ -67,14 +68,14 @@ class PropertyEventHover extends LitElement {
           `}
       ${action == 'data-set' || action == 'value-set'
         ? html`
-            <label> <i18n-msg msgid="label.value">value</i18n-msg> </label>
+            <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
             <ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>
           `
         : html``}
 
       <input id="checkbox-restore" type="checkbox" value-key="restore" .checked=${restore} />
       <label for="checkbox-restore" class="checkbox-label">
-        <i18n-msg msgid="label.restore-on-leave">restore on leave</i18n-msg>
+        <ox-i18n msgid="label.restore-on-leave">restore on leave</ox-i18n>
       </label>
     `
   }

package/src/modeller/property-sidebar/effects/property-event-tap.ts

@@ -3,6 +3,7 @@
  */
 
 import '@operato/input/ox-input-data.js'
+import '@operato/i18n/ox-i18n.js'
 
 import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -28,9 +29,9 @@ class PropertyEventTap extends LitElement {
 
     return html`
       <input id="checkbox-pressed" type="checkbox" value-key="pressed" .checked=${pressed} />
-      <label for="checkbox-pressed" class="checkbox-label"> <i18n-msg msgid="label.pressed">pressed</i18n-msg> </label>
+      <label for="checkbox-pressed" class="checkbox-label"> <ox-i18n msgid="label.pressed">pressed</ox-i18n> </label>
 
-      <label> <i18n-msg msgid="label.action">action</i18n-msg> </label>
+      <label> <ox-i18n msgid="label.action">action</ox-i18n> </label>
       <select id="tap-select" value-key="action" .value=${action || ''}>
         <option value=""></option>
         <option value="goto">go to target board</option>
@@ -48,7 +49,7 @@ class PropertyEventTap extends LitElement {
         <option value="value-set">set value to target component value</option>
       </select>
 
-      <label> <i18n-msg msgid="label.target">target</i18n-msg> </label>
+      <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
 
       ${action == 'goto' || action == 'popup'
         ? html`
@@ -67,7 +68,7 @@ class PropertyEventTap extends LitElement {
           `}
       ${action == 'data-set' || action == 'value-set'
         ? html`
-            <label> <i18n-msg msgid="label.value">value</i18n-msg> </label>
+            <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
             <ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>
           `
         : html``}

package/src/modeller/property-sidebar/effects/property-event.ts

@@ -4,11 +4,13 @@
 
 import './property-event-hover'
 import './property-event-tap'
+import '@operato/help/ox-title-with-help.js'
 
-import { LitElement, html } from 'lit'
-import { Properties, Scene } from '@hatiolab/things-scene'
+import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { Properties, Scene } from '@hatiolab/things-scene'
+
 import { PropertySharedStyle } from '../property-shared-style'
 import { convert } from './value-converter'
 
@@ -29,7 +31,7 @@ class PropertyEvent extends LitElement {
     return html`
       <fieldset>
         <legend>
-          <title-with-help msgid="label.hover-event" topic="board-modeller/effects/hover-event"></title-with-help>
+          <ox-title-with-help msgid="label.hover-event" topic="board-modeller/effects/hover-event"></ox-title-with-help>
         </legend>
 
         <property-event-hover value-key="hover" .scene=${this.scene} .value=${value.hover || {}}>
@@ -38,7 +40,7 @@ class PropertyEvent extends LitElement {
 
       <fieldset>
         <legend>
-          <title-with-help msgid="label.tap-event" topic="board-modeller/effects/tap-event"></title-with-help>
+          <ox-title-with-help msgid="label.tap-event" topic="board-modeller/effects/tap-event"></ox-title-with-help>
         </legend>
 
         <property-event-tap value-key="tap" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>

package/src/modeller/property-sidebar/effects/property-shadow.ts

@@ -3,6 +3,7 @@
  */
 
 import '@things-factory/modeller-ui/client/editors/things-editor-color'
+import '@operato/i18n/ox-i18n.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -78,15 +79,15 @@ export default class PropertyShadow extends LitElement {
     const value = this.value || {}
 
     return html`
-      <label> <i18n-msg msgid="label.shadowOffsetX">offset-X</i18n-msg> </label>
+      <label> <ox-i18n msgid="label.shadowOffsetX">offset-X</ox-i18n> </label>
 
       <input type="number" value-key="left" .value=${value.left} />
 
-      <label> <i18n-msg msgid="label.shadowOffsetY">offset-Y</i18n-msg> </label>
+      <label> <ox-i18n msgid="label.shadowOffsetY">offset-Y</ox-i18n> </label>
 
       <input type="number" value-key="top" .value=${value.top} />
 
-      <label> <i18n-msg msgid="label.shadowSize">Size</i18n-msg> </label>
+      <label> <ox-i18n msgid="label.shadowSize">Size</ox-i18n> </label>
 
       <input type="number" value-key="blurSize" .value=${value.blurSize} />