@operato/board 0.3.20 → 0.3.26

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

@@ -5,6 +5,8 @@
 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 '@operato/help/ox-title-with-help.js'
 
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -149,21 +151,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 +181,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``}
@@ -193,19 +195,19 @@ class PropertyShapes extends AbstractProperty {
         ? html`
             <fieldset class="icon-label unit ratio">
               <legend>
-                <title-with-help topic="board-modeller/shapes/size" msgid="label.size">size</title-with-help>
+                <ox-title-with-help topic="board-modeller/shapes/size" msgid="label.size">size</ox-title-with-help>
               </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>
@@ -216,7 +218,7 @@ class PropertyShapes extends AbstractProperty {
         ? html`
             <fieldset class="icon-label unit ratio" collapsable ?collapsed=${!this._3dExpanded}>
               <legend>
-                <title-with-help topic="board-modeller/shapes/3dish" msgid="label.3dish">3D</title-with-help>
+                <ox-title-with-help topic="board-modeller/shapes/3dish" msgid="label.3dish">3D</ox-title-with-help>
                 <mwc-icon
                   @click=${(e: Event) => {
                     this._3dExpanded = !this._3dExpanded
@@ -226,18 +228,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>
@@ -247,13 +249,13 @@ class PropertyShapes extends AbstractProperty {
         ? html`
             <fieldset>
               <legend>
-                <title-with-help topic="board-modeller/shapes/text-box" msgid="label.text-box"
-                  >text box</title-with-help
+                <ox-title-with-help topic="board-modeller/shapes/text-box" msgid="label.text-box"
+                  >text box</ox-title-with-help
                 >
               </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 +263,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 +272,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>
@@ -304,13 +306,13 @@ class PropertyShapes extends AbstractProperty {
         ? html`
             <fieldset class="icon-label">
               <legend>
-                <title-with-help topic="board-modeller/shapes/viewer-option" msgid="label.viewer-option"
-                  >Viewer Option</title-with-help
+                <ox-title-with-help topic="board-modeller/shapes/viewer-option" msgid="label.viewer-option"
+                  >Viewer Option</ox-title-with-help
                 >
               </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>
@@ -322,13 +324,13 @@ class PropertyShapes extends AbstractProperty {
             </fieldset>
             <fieldset class="icon-label">
               <legend>
-                <title-with-help topic="board-modeller/shapes/print-option" msgid="label.label-print"
-                  >Print Option</title-with-help
+                <ox-title-with-help topic="board-modeller/shapes/print-option" msgid="label.label-print"
+                  >Print Option</ox-title-with-help
                 >
               </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/specifics/specifics.ts

@@ -2,13 +2,14 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/help'
+import '@operato/help/ox-help-icon.js'
 import './specific-properties-builder'
 
-import { Component, Scene } from '@hatiolab/things-scene'
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { Component, Scene } from '@hatiolab/things-scene'
+
 import { PropertySharedStyle } from '../property-shared-style'
 
 @customElement('property-specific')
@@ -53,7 +54,7 @@ class PropertySpecific extends LitElement {
     const value = this.value || {}
 
     return html`
-      <label>${value.type}<help-icon .topic=${selected?.nature?.help}></help-icon></label>
+      <label>${value.type}<ox-help-icon .topic=${selected?.nature?.help}></ox-help-icon></label>
 
       <specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>
       </specific-properties-builder>

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

@@ -3,10 +3,11 @@
  */
 
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
-import '@things-factory/help'
+import '@operato/help/ox-title-with-help.js'
 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'
@@ -356,21 +357,21 @@ class PropertyStyles extends AbstractProperty {
     return html`
       <fieldset>
         <legend>
-          <title-with-help topic="board-modeller/styles/opacity" msgid="label.opacity">opacity</title-with-help>
+          <ox-title-with-help topic="board-modeller/styles/opacity" msgid="label.opacity">opacity</ox-title-with-help>
         </legend>
         <paper-slider min="0" max="1" step="0.1" value-key="alpha" .value=${alpha || 1} editable> </paper-slider>
       </fieldset>
 
       <fieldset>
         <legend>
-          <title-with-help topic="board-modeller/styles/text-style" msgid="label.text-style"
-            >text style</title-with-help
+          <ox-title-with-help topic="board-modeller/styles/text-style" msgid="label.text-style"
+            >text style</ox-title-with-help
           >
         </legend>
 
         <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
@@ -400,8 +401,8 @@ class PropertyStyles extends AbstractProperty {
 
       <fieldset>
         <legend>
-          <title-with-help topic="board-modeller/styles/fill-style" msgid="label.fill-style"
-            >fill style</title-with-help
+          <ox-title-with-help topic="board-modeller/styles/fill-style" msgid="label.fill-style"
+            >fill style</ox-title-with-help
           >
         </legend>
 
@@ -410,7 +411,7 @@ class PropertyStyles extends AbstractProperty {
 
       <fieldset>
         <legend>
-          <title-with-help msgid="label.line-style" topic="board-modeller/styles/line-style"></title-with-help>
+          <ox-title-with-help msgid="label.line-style" topic="board-modeller/styles/line-style"></ox-title-with-help>
         </legend>
 
         <div class="property-grid">
@@ -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와 동일하게 -->