@operato/board 0.3.18 → 0.3.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "0.3.18",
+  "version": "0.3.22",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -49,14 +49,15 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@operato/data-grist": "^0.3.18",
-    "@operato/graphql": "^0.3.18",
-    "@operato/input": "^0.3.18",
-    "@operato/markdown": "^0.3.18",
-    "@operato/popup": "^0.3.18",
-    "@operato/property-editor": "^0.3.18",
-    "@operato/styles": "^0.3.18",
-    "@operato/utils": "^0.3.18",
+    "@operato/data-grist": "^0.3.22",
+    "@operato/graphql": "^0.3.22",
+    "@operato/i18n": "^0.3.22",
+    "@operato/input": "^0.3.22",
+    "@operato/markdown": "^0.3.22",
+    "@operato/popup": "^0.3.22",
+    "@operato/property-editor": "^0.3.22",
+    "@operato/styles": "^0.3.22",
+    "@operato/utils": "^0.3.22",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@things-factory/help": "^4.0.27",
     "@things-factory/modeller-ui": "^4.0.27",
@@ -70,7 +71,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@hatiolab/things-scene": "^2.7.31",
+    "@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 +82,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 +107,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "aa4a9074d7f2fabf8f4d789eeb4ec5e5a9d2f6fb"
+  "gitHead": "368032e9ae07d6e82a2d7f35486f67a197db179c"
 }

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

@@ -7,6 +7,7 @@ import '@material/mwc-icon'
 import '@things-factory/help'
 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'
@@ -204,24 +205,24 @@ class PropertyDataBinding extends AbstractProperty {
           <title-with-help topic="board-modeller/data-binding" msgid="label.identifier">identifier</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 +230,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 +242,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,15 @@
 import './property-animations'
 import './property-event'
 import './property-shadow'
+import '@operato/i18n/ox-i18n.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 {
@@ -42,7 +44,7 @@ class PropertyEffects extends AbstractProperty {
         </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-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-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} />
 

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

@@ -5,6 +5,7 @@
 import '@operato/input/ox-input-angle.js'
 import '@operato/input/ox-buttons-radio.js'
 import '@material/mwc-icon'
+import '@operato/i18n/ox-i18n.js'
 
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -149,21 +150,21 @@ class PropertyShapes extends AbstractProperty {
         <div class="property-grid">
           ${this._isIdentifiable(this.selected)
             ? html`
-                <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 || ''} />
               `
             : html``}
           ${this._isClassIdentifiable(this.selected)
             ? html`
-                <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 || ''} />
               `
             : html``}
           ${this._hasTextProperty(this.selected)
             ? html`
-                <label> <i18n-msg msgid="label.text">Text</i18n-msg> </label>
+                <label> <ox-i18n msgid="label.text">Text</ox-i18n> </label>
                 <input value-key="text" .value=${value.text || ''} />
-                <label> <i18n-msg msgid="label.text-format">Text Format</i18n-msg> </label>
+                <label> <ox-i18n msgid="label.text-format">Text Format</ox-i18n> </label>
                 <input value-key="textFormat" .value=${value.textFormat || ''} list="format-list" />
                 <datalist id="format-list">
                   <option value="#,###."></option>
@@ -179,10 +180,10 @@ class PropertyShapes extends AbstractProperty {
             ? html`
                 <div class="checkbox-row">
                   <input id="checkbox-hidden" value-key="hidden" type="checkbox" .checked=${value.hidden} />
-                  <label for="checkbox-hidden"> <i18n-msg msgid="label.item-hidden">Item Hidden</i18n-msg> </label>
+                  <label for="checkbox-hidden"> <ox-i18n msgid="label.item-hidden">Item Hidden</ox-i18n> </label>
 
                   <input id="checkbox-locked" value-key="locked" type="checkbox" .checked=${value.locked} />
-                  <label for="checkbox-locked"> <i18n-msg msgid="label.locked">Locked</i18n-msg> </label>
+                  <label for="checkbox-locked"> <ox-i18n msgid="label.locked">Locked</ox-i18n> </label>
                 </div>
               `
             : html``}
@@ -197,15 +198,15 @@ class PropertyShapes extends AbstractProperty {
               </legend>
 
               <div class="property-grid">
-                <label class="width"> <i18n-msg msgid="label.width">width</i18n-msg> </label>
+                <label class="width"> <ox-i18n msgid="label.width">width</ox-i18n> </label>
                 <input type="number" value-key="bounds.width" .value=${this.bounds?.width} />
-                <label class="height"> <i18n-msg msgid="label.height">height</i18n-msg> </label>
+                <label class="height"> <ox-i18n msgid="label.height">height</ox-i18n> </label>
                 <input type="number" value-key="bounds.height" .value=${this.bounds?.height} />
 
                 ${this.selected.length && this.selected[0].isRootModel()
                   ? html``
                   : html`
-                      <label class="rotate"> <i18n-msg msgid="label.rotate">rotate</i18n-msg> </label>
+                      <label class="rotate"> <ox-i18n msgid="label.rotate">rotate</ox-i18n> </label>
                       <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
                     `}
               </div>
@@ -226,18 +227,18 @@ class PropertyShapes extends AbstractProperty {
               </legend>
 
               <div class="property-grid">
-                <label class="zPos"> <i18n-msg msgid="label.z-pos">pos. Z</i18n-msg> </label>
+                <label class="zPos"> <ox-i18n msgid="label.z-pos">pos. Z</ox-i18n> </label>
                 <input type="number" value-key="zPos" .value=${value.zPos} />
-                <label class="depth"> <i18n-msg msgid="label.depth">depth</i18n-msg> </label>
+                <label class="depth"> <ox-i18n msgid="label.depth">depth</ox-i18n> </label>
                 <input type="number" value-key="depth" .value=${value.depth} />
 
-                <label class="rotationX"> <i18n-msg msgid="label.rotation-x">rot. X</i18n-msg> </label>
+                <label class="rotationX"> <ox-i18n msgid="label.rotation-x">rot. X</ox-i18n> </label>
                 <ox-input-angle value-key="rotationX" .radian=${value.rotationX}> </ox-input-angle>
 
-                <label class="rotationY"> <i18n-msg msgid="label.rotation-y">rot. Y</i18n-msg> </label>
+                <label class="rotationY"> <ox-i18n msgid="label.rotation-y">rot. Y</ox-i18n> </label>
                 <ox-input-angle value-key="rotationY" .radian=${value.rotationY}> </ox-input-angle>
 
-                <label class="rotationZ"> <i18n-msg msgid="label.rotation-z">rot. Z</i18n-msg> </label>
+                <label class="rotationZ"> <ox-i18n msgid="label.rotation-z">rot. Z</ox-i18n> </label>
                 <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
               </div>
             </fieldset>
@@ -253,7 +254,7 @@ class PropertyShapes extends AbstractProperty {
               </legend>
 
               <div class="property-grid">
-                <label> <i18n-msg msgid="label.horizontal">horizontal</i18n-msg> </label>
+                <label> <ox-i18n msgid="label.horizontal">horizontal</ox-i18n> </label>
                 <ox-buttons-radio value-key="textAlign" .value=${value.textAlign}>
                   <div data-value="left"></div>
                   <div data-value="center"></div>
@@ -261,7 +262,7 @@ class PropertyShapes extends AbstractProperty {
                   <div data-value="justify"></div>
                 </ox-buttons-radio>
 
-                <label> <i18n-msg msgid="label.vertical">vertical</i18n-msg> </label>
+                <label> <ox-i18n msgid="label.vertical">vertical</ox-i18n> </label>
                 <ox-buttons-radio value-key="textBaseline" .value=${value.textBaseline}>
                   <div data-value="top"></div>
                   <div data-value="middle"></div>
@@ -270,10 +271,10 @@ class PropertyShapes extends AbstractProperty {
 
                 <div class="checkbox-row">
                   <input id="checkbox-textwrap" type="checkbox" value-key="textWrap" .checked=${value.textWrap} />
-                  <label for="checkbox-textwrap"> <i18n-msg msgid="label.text-wrap">Text Wrap</i18n-msg> </label>
+                  <label for="checkbox-textwrap"> <ox-i18n msgid="label.text-wrap">Text Wrap</ox-i18n> </label>
                 </div>
 
-                <label> <i18n-msg msgid="label.padding">padding</i18n-msg> </label>
+                <label> <ox-i18n msgid="label.padding">padding</ox-i18n> </label>
                 <table class="box-padding">
                   <tr>
                     <td class="slide1"></td>
@@ -310,7 +311,7 @@ class PropertyShapes extends AbstractProperty {
               </legend>
 
               <div class="property-grid">
-                <label><i18n-msg msgid="label.fit">Fit</i18n-msg></label>
+                <label><ox-i18n msgid="label.fit">Fit</ox-i18n></label>
                 <select value-key="fitMode" .value=${value.fitMode || 'ratio'}>
                   <option value="none">none</option>
                   <option value="ratio" selected>ratio</option>
@@ -328,7 +329,7 @@ class PropertyShapes extends AbstractProperty {
               </legend>
 
               <div class="property-grid">
-                <label class="rotate"><i18n-msg msgid="label.label-rotation">Label Rotation</i18n-msg></label>
+                <label class="rotate"><ox-i18n msgid="label.label-rotation">Label Rotation</ox-i18n></label>
                 <select value-key="labelRotation" .value=${value.labelRotation || 'N'}>
                   <option value="N" selected>0°</option>
                   <option value="B">90°</option>

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

@@ -7,6 +7,7 @@ import '@things-factory/help'
 import '@things-factory/modeller-ui/client/editors/things-editor-color'
 import '@things-factory/modeller-ui/client/editors/things-editor-color-style'
 import '@things-factory/modeller-ui/client/editors/things-editor-font-selector'
+import '@operato/i18n/ox-i18n.js'
 
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -370,7 +371,7 @@ class PropertyStyles extends AbstractProperty {
 
         <div class="property-grid">
           <label class="property-full-label">
-            <i18n-msg msgid="label.font-family">Font Family</i18n-msg>
+            <ox-i18n msgid="label.font-family">Font Family</ox-i18n>
           </label>
 
           <things-editor-font-selector
@@ -422,7 +423,7 @@ class PropertyStyles extends AbstractProperty {
           </things-editor-color>
 
           <label class="property-full-label">
-            <i18n-msg msgid="label.line-type">line type</i18n-msg>
+            <ox-i18n msgid="label.line-type">line type</ox-i18n>
           </label>
           <paper-dropdown-menu no-label-float="true" class="property-full-input line-type solid">
             <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
@@ -445,26 +446,26 @@ class PropertyStyles extends AbstractProperty {
           </paper-dropdown-menu>
 
           <label class="property-full-label">
-            <i18n-msg msgid="label.cap-type">cap type</i18n-msg>
+            <ox-i18n msgid="label.cap-type">cap type</ox-i18n>
           </label>
           <select class="property-full-input select-content" value-key="lineCap" .value=${lineCap}>
-            <option value="butt"><i18n-msg msgid="label.square">square</i18n-msg></option>
-            <option value="round"><i18n-msg msgid="label.round">round</i18n-msg></option>
+            <option value="butt"><ox-i18n msgid="label.square">square</ox-i18n></option>
+            <option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
           </select>
 
           <label class="property-full-label">
-            <i18n-msg msgid="label.join-type">join type</i18n-msg>
+            <ox-i18n msgid="label.join-type">join type</ox-i18n>
           </label>
           <select class="property-full-input select-content" value-key="lineJoin" .value=${lineJoin}>
-            <option value="miter"><i18n-msg msgid="label.miter">miter</i18n-msg></option>
-            <option value="round"><i18n-msg msgid="label.round">round</i18n-msg></option>
-            <option value="bevel"><i18n-msg msgid="label.bevel">bevel</i18n-msg></option>
+            <option value="miter"><ox-i18n msgid="label.miter">miter</ox-i18n></option>
+            <option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
+            <option value="bevel"><ox-i18n msgid="label.bevel">bevel</ox-i18n></option>
           </select>
 
           ${this._isLine(this.selected)
             ? html`
                 <label class="property-full-label">
-                  <i18n-msg msgid="label.begin-type">begin type</i18n-msg>
+                  <ox-i18n msgid="label.begin-type">begin type</ox-i18n>
                 </label>
                 <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type begin-no">
                   <!-- begin-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
@@ -485,7 +486,7 @@ class PropertyStyles extends AbstractProperty {
                 </paper-dropdown-menu>
 
                 <label class="property-full-label">
-                  <i18n-msg msgid="label.begin-size">begin size</i18n-msg>
+                  <ox-i18n msgid="label.begin-size">begin size</ox-i18n>
                 </label>
                 <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type begin-size1">
                   <!-- begin-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
@@ -509,7 +510,7 @@ class PropertyStyles extends AbstractProperty {
                 </paper-dropdown-menu>
 
                 <label class="property-full-label">
-                  <i18n-msg msgid="label.end-type">end type</i18n-msg>
+                  <ox-i18n msgid="label.end-type">end type</ox-i18n>
                 </label>
                 <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type end-no">
                   <!-- end-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
@@ -530,7 +531,7 @@ class PropertyStyles extends AbstractProperty {
                 </paper-dropdown-menu>
 
                 <label class="property-full-label">
-                  <i18n-msg msgid="label.end-size">end size</i18n-msg>
+                  <ox-i18n msgid="label.end-size">end size</ox-i18n>
                 </label>
                 <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type end-size1">
                   <!-- end-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->