@operato/board 0.2.46 → 0.2.47

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

@@ -2,13 +2,13 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/i18n-base'
-import '@things-factory/modeller-ui/client/editors/things-editor-angle-input'
+import '@operato/input/dist/src/ox-input-angle'
 
-import { LitElement, html } from 'lit'
-import { Properties, Scene } from '@hatiolab/things-scene'
+import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators'
 
+import { Properties, Scene } from '@hatiolab/things-scene'
+
 import { EffectsSharedStyle } from './effects-shared-style'
 import { convert } from './value-converter'
 
@@ -25,7 +25,7 @@ Example:
 export default class PropertyAnimation extends LitElement {
   static styles = [EffectsSharedStyle]
 
-  @property({ type: Object }) value: Properties = {}
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
 
   firstUpdated() {
@@ -33,9 +33,11 @@ export default class PropertyAnimation extends LitElement {
   }
 
   render() {
+    const value = this.value || {}
+
     return html`
       <label>Animation Type</label>
-      <select value-key="type" .value=${this.value && this.value.type}>
+      <select value-key="type" .value=${value.type}>
         <option value="">None</option>
         <option value="rotation">Rotation</option>
         <option value="vibration">Vibration</option>
@@ -46,56 +48,56 @@ export default class PropertyAnimation extends LitElement {
       </select>
 
       <label> <i18n-msg msgid="label.waiting-time">waiting time</i18n-msg> </label>
-      <input type="number" value-key="delay" .value=${this.value.delay} placeholder="ms" />
+      <input type="number" value-key="delay" .value=${value.delay} placeholder="ms" />
 
       <label> <i18n-msg msgid="label.duration">duration</i18n-msg> </label>
-      <input type="number" value-key="duration" .value=${this.value.duration} placeholder="ms" />
+      <input type="number" value-key="duration" .value=${value.duration} placeholder="ms" />
 
-      ${this.value.type == 'rotation' || this.value.type == 'vibration'
+      ${value.type == 'rotation' || value.type == 'vibration'
         ? html`
             <label> <i18n-msg msgid="label.theta">theta</i18n-msg> </label>
-            <things-editor-angle-input value-key="theta" .radian=${this.value.theta}> </things-editor-angle-input>
+            <ox-input-angle value-key="theta" .radian=${value.theta}> </ox-input-angle>
           `
         : html``}
-      ${this.value.type == 'heartbeat'
+      ${value.type == 'heartbeat'
         ? html`
             <label> <i18n-msg msgid="label.scale">scale</i18n-msg> </label>
-            <input type="number" value-key="scale" .value=${this.value.scale} />
+            <input type="number" value-key="scale" .value=${value.scale} />
           `
         : html``}
-      ${this.value.type == 'moving'
+      ${value.type == 'moving'
         ? html`
             <label> <i18n-msg msgid="label.x-axes">X-axes</i18n-msg> </label>
-            <input type="number" value-key="x" .value=${this.value.x} />
+            <input type="number" value-key="x" .value=${value.x} />
 
             <label> <i18n-msg msgid="label.y-axes">Y-axes</i18n-msg> </label>
-            <input type="number" value-key="y" .value=${this.value.y} />
+            <input type="number" value-key="y" .value=${value.y} />
           `
         : html``}
-      ${this.value.type == 'fade'
+      ${value.type == 'fade'
         ? html`
             <label> <i18n-msg msgid="label.start-alpha">start alpha</i18n-msg> </label>
-            <input type="number" value-key="startAlpha" .value=${this.value.startAlpha} />
+            <input type="number" value-key="startAlpha" .value=${value.startAlpha} />
 
             <label> <i18n-msg msgid="label.end-alpha">end alpha</i18n-msg> </label>
-            <input type="number" value-key="endAlpha" .value=${this.value.endAlpha} />
+            <input type="number" value-key="endAlpha" .value=${value.endAlpha} />
           `
         : html``}
-      ${this.value.type == 'outline'
+      ${value.type == 'outline'
         ? html`
             <label> <i18n-msg msgid="label.target">target</i18n-msg> </label>
-            <input value-key="rideOn" .value=${this.value.rideOn || ''} list="target-list" />
+            <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> `)}
             </datalist>
           `
         : html``}
 
-      <input id="checkbox-repeat" value-key="repeat" type="checkbox" .checked=${this.value.repeat} />
+      <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>delta</label>
-      <select value-key="delta" .value=${this.value.delta}>
+      <select value-key="delta" .value=${value.delta}>
         <option value="linear">linear</option>
         <option value="quad">quad</option>
         <option value="circ">circ</option>
@@ -105,7 +107,7 @@ export default class PropertyAnimation extends LitElement {
       </select>
 
       <label>ease</label>
-      <select value-key="ease" .value=${this.value.ease}>
+      <select value-key="ease" .value=${value.ease}>
         <option value="in">in</option>
         <option value="out">out</option>
         <option value="inout">inout</option>

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

@@ -2,14 +2,14 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/i18n-base'
 import './property-animation'
 import '@material/mwc-icon'
 
-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'
 
+import { Properties, Scene } from '@hatiolab/things-scene'
+
 import { PropertySharedStyle } from '../property-shared-style'
 import { convert } from './value-converter'
 
@@ -36,7 +36,7 @@ class PropertyAnimations extends LitElement {
     `
   ]
 
-  @property({ type: Object }) value: Properties = {}
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene!: Scene
 
   @state() _expanded: boolean = false
@@ -46,6 +46,8 @@ class PropertyAnimations extends LitElement {
   }
 
   render() {
+    const value = this.value || {}
+
     return html`
       <fieldset collapsable ?collapsed=${!this._expanded}>
         <legend>
@@ -58,7 +60,7 @@ class PropertyAnimations extends LitElement {
           >
         </legend>
 
-        <property-animation value-key="oncreate" .scene=${this.scene} .value=${this.value.oncreate || {}}>
+        <property-animation value-key="oncreate" .scene=${this.scene} .value=${value.oncreate || {}}>
         </property-animation>
       </fieldset>
     `

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

@@ -2,11 +2,10 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/i18n-base'
+import { html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators'
 
-import { LitElement, html } from 'lit'
 import { Properties, Scene } from '@hatiolab/things-scene'
-import { customElement, property } from 'lit/decorators'
 
 import { EffectsSharedStyle } from './effects-shared-style'
 import { convert } from './value-converter'
@@ -15,7 +14,7 @@ import { convert } from './value-converter'
 class PropertyEventHover extends LitElement {
   static styles = [EffectsSharedStyle]
 
-  @property({ type: Object }) value: Properties = {}
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
 
   firstUpdated() {
@@ -23,7 +22,7 @@ class PropertyEventHover extends LitElement {
   }
 
   render() {
-    var { action, value = '', target = '', emphasize, restore } = this.value
+    var { action, value = '', target = '', emphasize, restore } = this.value || {}
 
     return html`
       <input id="checkbox-emphasize" type="checkbox" value-key="emphasize" .checked=${emphasize} />

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

@@ -2,11 +2,10 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/i18n-base'
+import { html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators'
 
-import { LitElement, html } from 'lit'
 import { Properties, Scene } from '@hatiolab/things-scene'
-import { customElement, property } from 'lit/decorators'
 
 import { EffectsSharedStyle } from './effects-shared-style'
 import { convert } from './value-converter'
@@ -15,7 +14,7 @@ import { convert } from './value-converter'
 class PropertyEventTap extends LitElement {
   static styles = [EffectsSharedStyle]
 
-  @property({ type: Object }) value: Properties = {}
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
 
   firstUpdated() {
@@ -23,7 +22,7 @@ class PropertyEventTap extends LitElement {
   }
 
   render() {
-    var { action, value = '', target = '', pressed } = this.value
+    var { action, value = '', target = '', pressed } = this.value || {}
 
     return html`
       <input id="checkbox-pressed" type="checkbox" value-key="pressed" .checked=${pressed} />

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

@@ -2,14 +2,14 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/i18n-base'
 import './property-event-hover'
 import './property-event-tap'
 
-import { LitElement, html } from 'lit'
-import { Properties, Scene } from '@hatiolab/things-scene'
+import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators'
 
+import { Properties, Scene } from '@hatiolab/things-scene'
+
 import { PropertySharedStyle } from '../property-shared-style'
 import { convert } from './value-converter'
 
@@ -17,7 +17,7 @@ import { convert } from './value-converter'
 class PropertyEvent extends LitElement {
   static styles = [PropertySharedStyle]
 
-  @property({ type: Object }) value: Properties = {}
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
 
   firstUpdated() {
@@ -25,13 +25,15 @@ class PropertyEvent extends LitElement {
   }
 
   render() {
+    const value = this.value || {}
+
     return html`
       <fieldset>
         <legend>
           <title-with-help msgid="label.hover-event" topic="board-modeller/effects/hover-event"></title-with-help>
         </legend>
 
-        <property-event-hover value-key="hover" .scene=${this.scene} .value=${this.value.hover || {}}>
+        <property-event-hover value-key="hover" .scene=${this.scene} .value=${value.hover || {}}>
         </property-event-hover>
       </fieldset>
 
@@ -40,7 +42,7 @@ class PropertyEvent extends LitElement {
           <title-with-help msgid="label.tap-event" topic="board-modeller/effects/tap-event"></title-with-help>
         </legend>
 
-        <property-event-tap value-key="tap" .scene=${this.scene} .value=${this.value.tap || {}}> </property-event-tap>
+        <property-event-tap value-key="tap" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>
       </fieldset>
     `
   }

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

@@ -2,13 +2,13 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/i18n-base'
 import '@things-factory/modeller-ui/client/editors/things-editor-color'
 
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators'
 
 import { Properties } from '@hatiolab/things-scene'
+
 import { convert } from './value-converter'
 
 /**
@@ -68,29 +68,31 @@ export default class PropertyShadow extends LitElement {
     `
   ]
 
-  @property({ type: Object }) value: Properties = {}
+  @property({ type: Object }) value?: Properties
 
   firstUpdated() {
     this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
   }
 
   render() {
+    const value = this.value || {}
+
     return html`
       <label> <i18n-msg msgid="label.shadowOffsetX">offset-X</i18n-msg> </label>
 
-      <input type="number" value-key="left" .value=${this.value.left} />
+      <input type="number" value-key="left" .value=${value.left} />
 
       <label> <i18n-msg msgid="label.shadowOffsetY">offset-Y</i18n-msg> </label>
 
-      <input type="number" value-key="top" .value=${this.value.top} />
+      <input type="number" value-key="top" .value=${value.top} />
 
       <label> <i18n-msg msgid="label.shadowSize">Size</i18n-msg> </label>
 
-      <input type="number" value-key="blurSize" .value=${this.value.blurSize} />
+      <input type="number" value-key="blurSize" .value=${value.blurSize} />
 
       <label class="icon-only-label color"></label>
 
-      <things-editor-color value-key="color" .value=${this.value.color}> </things-editor-color>
+      <things-editor-color value-key="color" .value=${value.color}> </things-editor-color>
     `
   }
 

package/src/modeller/property-sidebar/property-shared-style.ts

@@ -50,8 +50,8 @@ export const PropertySharedStyle = css`
   .property-grid > input,
   .property-grid > table,
   .property-grid > select,
-  .property-grid > things-editor-angle-input,
-  .property-grid > things-editor-buttons-radio,
+  .property-grid > ox-input-angle,
+  .property-grid > ox-buttons-radio,
   .property-grid > things-editor-color,
   [custom-editor] {
     grid-column: span 7;

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

@@ -2,18 +2,18 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/i18n-base'
-import '@things-factory/modeller-ui/client/editors/things-editor-angle-input'
-import '@things-factory/modeller-ui/client/editors/things-editor-buttons-radio'
+import '@operato/input/dist/src/ox-input-angle'
+import '@operato/input/dist/src/ox-buttons-radio'
 import '@material/mwc-icon'
 
-import { BOUNDS, Component, Properties } from '@hatiolab/things-scene'
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators'
 
+import { BOUNDS, Component, Properties } from '@hatiolab/things-scene'
+
 import { AbstractProperty } from '../abstract-property'
-import { BoxPaddingEditorStyles } from './box-padding-editor-styles'
 import { PropertySharedStyle } from '../property-shared-style'
+import { BoxPaddingEditorStyles } from './box-padding-editor-styles'
 
 @customElement('property-shape')
 class PropertyShapes extends AbstractProperty {
@@ -82,7 +82,7 @@ class PropertyShapes extends AbstractProperty {
         background-position: 5px -1496px;
       }
 
-      things-editor-buttons-radio > * {
+      ox-buttons-radio > * {
         width: 30px;
         height: 25px;
         min-width: initial;
@@ -93,39 +93,39 @@ class PropertyShapes extends AbstractProperty {
         border-bottom: 2px solid #fff;
       }
 
-      things-editor-buttons-radio div {
+      ox-buttons-radio div {
         background: url(/assets/images/icon-properties.png) no-repeat;
       }
 
-      things-editor-buttons-radio div[data-value='left'] {
+      ox-buttons-radio div[data-value='left'] {
         background-position: 50% 3px;
       }
 
-      things-editor-buttons-radio div[data-value='center'] {
+      ox-buttons-radio div[data-value='center'] {
         background-position: 50% -47px;
       }
 
-      things-editor-buttons-radio div[data-value='right'] {
+      ox-buttons-radio div[data-value='right'] {
         background-position: 50% -97px;
       }
 
-      things-editor-buttons-radio div[data-value='justify'] {
+      ox-buttons-radio div[data-value='justify'] {
         background-position: 50% -147px;
       }
 
-      things-editor-buttons-radio div[data-value='top'] {
+      ox-buttons-radio div[data-value='top'] {
         background-position: 50% -197px;
       }
 
-      things-editor-buttons-radio div[data-value='middle'] {
+      ox-buttons-radio div[data-value='middle'] {
         background-position: 50% -193px;
       }
 
-      things-editor-buttons-radio div[data-value='bottom'] {
+      ox-buttons-radio div[data-value='bottom'] {
         background-position: 50% -188px;
       }
 
-      things-editor-buttons-radio div[active] {
+      ox-buttons-radio div[active] {
         border-color: #f2471c;
       }
     `
@@ -206,8 +206,7 @@ class PropertyShapes extends AbstractProperty {
                   ? html``
                   : html`
                       <label class="rotate"> <i18n-msg msgid="label.rotate">rotate</i18n-msg> </label>
-                      <things-editor-angle-input value-key="rotation" .radian=${value.rotation}>
-                      </things-editor-angle-input>
+                      <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
                     `}
               </div>
             </fieldset>
@@ -233,16 +232,13 @@ class PropertyShapes extends AbstractProperty {
                 <input type="number" value-key="depth" .value=${value.depth} />
 
                 <label class="rotationX"> <i18n-msg msgid="label.rotation-x">rot. X</i18n-msg> </label>
-                <things-editor-angle-input value-key="rotationX" .radian=${value.rotationX}>
-                </things-editor-angle-input>
+                <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>
-                <things-editor-angle-input value-key="rotationY" .radian=${value.rotationY}>
-                </things-editor-angle-input>
+                <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>
-                <things-editor-angle-input value-key="rotation" .radian=${value.rotation}>
-                </things-editor-angle-input>
+                <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
               </div>
             </fieldset>
           `
@@ -258,19 +254,19 @@ class PropertyShapes extends AbstractProperty {
 
               <div class="property-grid">
                 <label> <i18n-msg msgid="label.horizontal">horizontal</i18n-msg> </label>
-                <things-editor-buttons-radio value-key="textAlign" .value=${value.textAlign}>
+                <ox-buttons-radio value-key="textAlign" .value=${value.textAlign}>
                   <div data-value="left"></div>
                   <div data-value="center"></div>
                   <div data-value="right"></div>
                   <div data-value="justify"></div>
-                </things-editor-buttons-radio>
+                </ox-buttons-radio>
 
                 <label> <i18n-msg msgid="label.vertical">vertical</i18n-msg> </label>
-                <things-editor-buttons-radio value-key="textBaseline" .value=${value.textBaseline}>
+                <ox-buttons-radio value-key="textBaseline" .value=${value.textBaseline}>
                   <div data-value="top"></div>
                   <div data-value="middle"></div>
                   <div data-value="bottom"></div>
-                </things-editor-buttons-radio>
+                </ox-buttons-radio>
 
                 <div class="checkbox-row">
                   <input id="checkbox-textwrap" type="checkbox" value-key="textWrap" .checked=${value.textWrap} />
@@ -308,7 +304,9 @@ 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>
+                <title-with-help topic="board-modeller/shapes/viewer-option" msgid="label.viewer-option"
+                  >Viewer Option</title-with-help
+                >
               </legend>
 
               <div class="property-grid">
@@ -320,12 +318,13 @@ class PropertyShapes extends AbstractProperty {
                   <option value="width">width</option>
                   <option value="height">height</option>
                 </select>
-                </things-editor-angle-input>
               </div>
             </fieldset>
             <fieldset class="icon-label">
               <legend>
-                <title-with-help topic="board-modeller/shapes/print-option" msgid="label.label-print">Print Option</title-with-help>
+                <title-with-help topic="board-modeller/shapes/print-option" msgid="label.label-print"
+                  >Print Option</title-with-help
+                >
               </legend>
 
               <div class="property-grid">
@@ -336,7 +335,6 @@ class PropertyShapes extends AbstractProperty {
                   <option value="I">180°</option>
                   <option value="R">270°</option>
                 </select>
-                </things-editor-angle-input>
               </div>
             </fieldset>
           `

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

@@ -4,7 +4,6 @@
 
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
 import '@things-factory/help'
-import '@things-factory/modeller-ui/client/editors/things-editor-angle-input'
 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'
@@ -12,8 +11,9 @@ import '@things-factory/modeller-ui/client/editors/things-editor-font-selector'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { AbstractProperty } from '../abstract-property'
 import { Component } from '@hatiolab/things-scene'
+
+import { AbstractProperty } from '../abstract-property'
 import { PropertySharedStyle } from '../property-shared-style'
 
 @customElement('property-style')