@operato/board 0.3.22 → 0.3.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "0.3.22",
+  "version": "0.3.28",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -49,18 +49,17 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@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",
+    "@operato/data-grist": "^0.3.28",
+    "@operato/graphql": "^0.3.28",
+    "@operato/i18n": "^0.3.28",
+    "@operato/input": "^0.3.28",
+    "@operato/markdown": "^0.3.28",
+    "@operato/popup": "^0.3.28",
+    "@operato/property-editor": "^0.3.28",
+    "@operato/styles": "^0.3.28",
+    "@operato/utils": "^0.3.28",
     "@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.44",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
     "file-saver": "^2.0.5",
@@ -107,5 +106,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "368032e9ae07d6e82a2d7f35486f67a197db179c"
+  "gitHead": "5df96b8e79c130b4a85c83181ce83015ec2b1727"
 }

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

@@ -4,7 +4,7 @@
 
 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'
@@ -202,7 +202,9 @@ 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> <ox-i18n msgid="label.id">ID</ox-i18n> </label>

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

@@ -6,6 +6,7 @@ import './property-animations'
 import './property-event'
 import './property-shadow'
 import '@operato/i18n/ox-i18n.js'
+import '@operato/help/ox-title-with-help.js'
 
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -32,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>
@@ -40,7 +41,9 @@ 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">

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.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/shapes/shapes.ts

@@ -6,6 +6,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 '@operato/help/ox-title-with-help.js'
 
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -194,7 +195,7 @@ 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">
@@ -217,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
@@ -248,8 +249,8 @@ 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>
 
@@ -305,8 +306,8 @@ 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>
 
@@ -323,8 +324,8 @@ 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>
 

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,7 +3,7 @@
  */
 
 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'
@@ -357,15 +357,15 @@ 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>
 
@@ -401,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>
 
@@ -411,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">