@operato/board - npm Package Compare versions

Comparing version 0.2.46 to 0.2.47

CHANGELOG.md

@@ -6,2 +6,12 @@ # Change Log
 
+### [0.2.47](https://github.com/hatiolab/operato/compare/v0.2.46...v0.2.47) (2021-12-13)
+
+
+### :bug: Bug Fix
+
+* @operato/board modeller's sidebar error escaping ([2b53418](https://github.com/hatiolab/operato/commit/2b534186dbd8e437e71707c07406b876fa23b1f3))
+* operato/board/board-modeller and operato/input/buttons-radio ([d2a4344](https://github.com/hatiolab/operato/commit/d2a4344ae2ad10c9ebfca919a0c9ff7de29d7c6a))
+
+
+
 ### [0.2.46](https://github.com/hatiolab/operato/compare/v0.2.45...v0.2.46) (2021-12-12)
@@ -8,0 +18,0 @@

dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.d.ts

 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
 import '@things-factory/modeller-ui/client/editors/things-editor-code';
 import '@things-factory/modeller-ui/client/editors/things-editor-value-map';
 import '@things-factory/modeller-ui/client/editors/things-editor-value-range';
-import '@things-factory/modeller-ui/client/editors/things-editor-buttons-radio';
+import '@operato/input/dist/src/ox-buttons-radio';
 import { LitElement, PropertyValues } from 'lit';
@@ -10,0 +9,0 @@ import { Properties, Scene } from '@hatiolab/things-scene';

dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js

@@ -5,8 +5,7 @@ /**
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
 import '@things-factory/modeller-ui/client/editors/things-editor-code';
 import '@things-factory/modeller-ui/client/editors/things-editor-value-map';
 import '@things-factory/modeller-ui/client/editors/things-editor-value-range';
-import '@things-factory/modeller-ui/client/editors/things-editor-buttons-radio';
-import { LitElement, css, html } from 'lit';
+import '@operato/input/dist/src/ox-buttons-radio';
+import { css, html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators';
@@ -55,2 +54,5 @@ /**
     render() {
+        const mapping = this.mapping || {
+            rule: 'value'
+        };
         return html `
@@ -63,3 +65,3 @@ <label for="accessor-input"> <i18n-msg msgid="label.accessor">accessor</i18n-msg> </label>
         data-mapping-accessor
-        .value=${this.mapping.accessor || ''}
+        .value=${mapping.accessor || ''}
       />
@@ -73,3 +75,3 @@
         list="target-list"
-        .value=${this.mapping.target || ''}
+        .value=${mapping.target || ''}
         @focusin=${() => {
@@ -90,8 +92,8 @@ if (!this.scene)
       <label for="property-input"> <i18n-msg msgid="label.property">property</i18n-msg> </label>
-      <select id="property-input" value-key="property" .value=${this.mapping.property}>
-        ${this.properties.map(item => html ` <option .value=${item.name} ?selected=${item.name == this.mapping.property}>${item.label}</option> `)}
+      <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>
-      <things-editor-buttons-radio .value=${this.mapping.rule} @change=${(e) => this._onChangeRule(e)}>
+      <ox-buttons-radio .value=${mapping.rule} @change=${(e) => this._onChangeRule(e)}>
         <div data-value="value"><i18n-msg msgid="label.value"></i18n-msg></div>
@@ -101,10 +103,10 @@ <div data-value="map"><i18n-msg msgid="label.map"></i18n-msg></div>
         <div data-value="eval"><i18n-msg msgid="label.eval"></i18n-msg></div>
-      </things-editor-buttons-radio>
+      </ox-buttons-radio>
 
-      <div rule-editors class="content" ?hidden=${this.mapping.rule == 'value'}>
+      <div rule-editors class="content" ?hidden=${mapping.rule == 'value'}>
         <things-editor-value-map
           value-key="map"
           .value=${this.rule.map || {}}
-          .valuetype=${this._valuetype(this.mapping.property)}
-          ?active=${this.mapping.rule == 'map'}
+          .valuetype=${this._valuetype(mapping.property)}
+          ?active=${mapping.rule == 'map'}
         >
@@ -116,4 +118,4 @@ </things-editor-value-map>
           .value=${this.rule.range || []}
-          .valuetype=${this._valuetype(this.mapping.property)}
-          ?active=${this.mapping.rule == 'range'}
+          .valuetype=${this._valuetype(mapping.property)}
+          ?active=${mapping.rule == 'range'}
         >
@@ -126,3 +128,3 @@ </things-editor-value-range>
           .value=${this.rule.eval || ''}
-          ?active=${this.mapping.rule == 'eval'}
+          ?active=${mapping.rule == 'eval'}
         >
@@ -271,3 +273,3 @@ </things-editor-code>
       select,
-      things-editor-buttons-radio,
+      ox-buttons-radio,
       [mapping-rule] {
@@ -281,3 +283,3 @@ grid-column: span 7;
 
-      things-editor-buttons-radio {
+      ox-buttons-radio {
         display: flex;
@@ -287,3 +289,3 @@ padding: 0 4px;
 
-      things-editor-buttons-radio > * {
+      ox-buttons-radio > * {
         text-align: center;
@@ -295,3 +297,3 @@ flex: 1;
 
-      things-editor-buttons-radio div[active] {
+      ox-buttons-radio div[active] {
         border-color: #f2471c;
@@ -298,0 +300,0 @@ }

dist/src/modeller/property-sidebar/data-binding/data-binding.d.ts

 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
 import './data-binding-mapper';
@@ -6,0 +5,0 @@ import '@material/mwc-icon';

dist/src/modeller/property-sidebar/data-binding/data-binding.js

@@ -5,3 +5,2 @@ /**
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
 import './data-binding-mapper';
@@ -42,5 +41,2 @@ import '@material/mwc-icon';
         super(...arguments);
-        this.value = {
-            mappings: []
-        };
         this.mappingIndex = 0;
@@ -51,3 +47,4 @@ this._dataExpanded = false;
     get mappings() {
-        return this.value.mappings || [];
+        var _a;
+        return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [];
     }
@@ -66,2 +63,5 @@ firstUpdated() {
     render() {
+        const value = this.value || {
+            mappings: []
+        };
         return html `
@@ -74,12 +74,12 @@ <fieldset>
           <label> <i18n-msg msgid="label.id">ID</i18n-msg> </label>
-          <input value-key="id" .value=${this.value.id || ''} />
+          <input value-key="id" .value=${value.id || ''} />
 
           <label> <i18n-msg msgid="label.class">Class</i18n-msg> </label>
-          <input value-key="class" .value=${this.value.class || ''} />
+          <input value-key="class" .value=${value.class || ''} />
 
           <label> <i18n-msg msgid="label.template-prefix">Template Prefix</i18n-msg> </label>
-          <input value-key="templatePrefix" .value=${this.value.templatePrefix || ''} />
+          <input value-key="templatePrefix" .value=${value.templatePrefix || ''} />
 
           <div class="checkbox-row">
-            <input id="checkbox-ndns" type="checkbox" value-key="ndns" .checked=${this.value.ndns} />
+            <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>
@@ -89,3 +89,3 @@ </div>
           <div class="checkbox-row">
-            <input id="checkbox-sensitive" type="checkbox" value-key="sensitive" .checked=${this.value.sensitive} />
+            <input id="checkbox-sensitive" type="checkbox" value-key="sensitive" .checked=${value.sensitive} />
             <label for="checkbox-sensitive">
@@ -108,3 +108,3 @@ <i18n-msg msgid="label.intent-sensitive">Intent Sensitive</i18n-msg>
         </legend>
-        <things-editor-data value-key="data" .value=${this.value.data}> </things-editor-data>
+        <things-editor-data value-key="data" .value=${value.data}> </things-editor-data>
       </fieldset>
@@ -132,4 +132,4 @@
           >
-            ${this.mappings.map((m, i) => html ` <div value=${i} data-mapping>${i + 1}</div> `)}
-            <div value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>
+            ${this.mappings.map((m, i) => html ` <div data-value=${i} data-mapping>${i + 1}</div> `)}
+            <div data-value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>
           </ox-buttons-radio>
@@ -160,3 +160,3 @@
           .scene=${this.scene}
-          .mapping=${(this.value.mappings && this.value.mappings[this.mappingIndex]) || {}}
+          .mapping=${(value.mappings && value.mappings[this.mappingIndex]) || {}}
           .properties=${PROPS}
@@ -173,3 +173,4 @@ >
     _clearDataBindingMapper() {
-        var mappings = [...(this.value.mappings || [])];
+        var _a;
+        var mappings = [...(((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [])];
         mappings.splice(this.mappingIndex, 1);
@@ -182,4 +183,5 @@ this._onAfterValueChange('mappings', mappings.filter(m => !!m));
     async _pasteDataBindingMapper() {
+        var _a;
         var index = this.mappingIndex;
-        var mappings = [...(this.value.mappings || [])];
+        var mappings = [...(((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [])];
         mappings[this.mappingIndex] = JSON.parse(clipboard);
@@ -218,2 +220,3 @@ this._onAfterValueChange('mappings', mappings);
     async _onMappingChanged(e) {
+        var _a;
         var mapping = e.target.mapping;
@@ -230,3 +233,3 @@ /* data spread target의 변경이 있는 경우, target 컴포넌트들의 태그를 블링크 시킨다 */
         /* mapping의 모든 속성이 편집되면, 모델에 반영한다. */
-        var mappings = [...(this.value.mappings || [])];
+        var mappings = [...(((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [])];
         if (mapping.target && mapping.property && mapping.rule) {
@@ -233,0 +236,0 @@ mappings[this.mappingIndex] = mapping;

dist/src/modeller/property-sidebar/effects/effects-shared-style.js

@@ -29,3 +29,3 @@ /**
   select,
-  things-editor-angle-input,
+  ox-input-angle,
   things-editor-color,
@@ -38,3 +38,3 @@ [custom-editor] {
   select,
-  things-editor-angle-input input,
+  ox-input-angle input,
   things-editor-color input,
@@ -41,0 +41,0 @@ [custom-editor] input {

dist/src/modeller/property-sidebar/effects/effects.d.ts

 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
 import './property-animations';
 import './property-event';
 import './property-shadow';

dist/src/modeller/property-sidebar/effects/effects.js

@@ -5,15 +5,10 @@ /**
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
 import './property-animations';
 import './property-event';
 import './property-shadow';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators';
 import { AbstractProperty } from '../abstract-property';
 import { PropertySharedStyle } from '../property-shared-style';
-import { html } from 'lit';
 let PropertyEffects = class PropertyEffects extends AbstractProperty {
-    constructor() {
-        super(...arguments);
-        this.value = {};
-    }
     firstUpdated() {
@@ -23,2 +18,3 @@ this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
     render() {
+        const value = this.value || {};
         return html `
@@ -30,3 +26,3 @@ <fieldset>
 
-        <property-shadow value-key="shadow" .value=${this.value.shadow || {}}> </property-shadow>
+        <property-shadow value-key="shadow" .value=${value.shadow || {}}> </property-shadow>
       </fieldset>
@@ -41,10 +37,10 @@
           <label> <i18n-msg msgid="label.retention">retention</i18n-msg> </label>
-          <input type="number" value-key="retention" .value=${this.value.retention} placeholder="ms" />
+          <input type="number" value-key="retention" .value=${value.retention} placeholder="ms" />
         </div>
       </fieldset>
 
-      <property-animations value-key="animation" .scene=${this.scene} .value=${this.value.animation || {}}>
+      <property-animations value-key="animation" .scene=${this.scene} .value=${value.animation || {}}>
       </property-animations>
 
-      <property-event value-key="event" .scene=${this.scene} .value=${this.value.event || {}}> </property-event>
+      <property-event value-key="event" .scene=${this.scene} .value=${value.event || {}}> </property-event>
     `;
@@ -51,0 +47,0 @@ }

dist/src/modeller/property-sidebar/effects/property-animation.d.ts

 /**
  * @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 } from 'lit';
@@ -18,3 +17,3 @@ import { Properties, Scene } from '@hatiolab/things-scene';
     static styles: import("lit").CSSResult[];
-    value: Properties;
+    value?: Properties;
     scene?: Scene;
@@ -21,0 +20,0 @@ firstUpdated(): void;

dist/src/modeller/property-sidebar/effects/property-animation.js

@@ -5,5 +5,4 @@ /**
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
-import '@things-factory/modeller-ui/client/editors/things-editor-angle-input';
-import { LitElement, html } from 'lit';
+import '@operato/input/dist/src/ox-input-angle';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators';
@@ -21,6 +20,2 @@ import { EffectsSharedStyle } from './effects-shared-style';
 let PropertyAnimation = class PropertyAnimation extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.value = {};
-    }
     firstUpdated() {
@@ -30,5 +25,6 @@ this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
     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>
@@ -44,41 +40,41 @@ <option value="rotation">Rotation</option>
       <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">
@@ -90,7 +86,7 @@ ${this.scene.ids.map(info => info.key).map(id => html ` <option value=${id}></option> `)}
 
-      <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>
@@ -105,3 +101,3 @@ <option value="quad">quad</option>
       <label>ease</label>
-      <select value-key="ease" .value=${this.value.ease}>
+      <select value-key="ease" .value=${value.ease}>
         <option value="in">in</option>
@@ -108,0 +104,0 @@ <option value="out">out</option>

dist/src/modeller/property-sidebar/effects/property-animations.d.ts

 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
 import './property-animation';
 import '@material/mwc-icon';

dist/src/modeller/property-sidebar/effects/property-animations.js

@@ -5,6 +5,5 @@ /**
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
 import './property-animation';
 import '@material/mwc-icon';
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators';
@@ -16,3 +15,2 @@ import { PropertySharedStyle } from '../property-shared-style';
         super(...arguments);
-        this.value = {};
         this._expanded = false;
@@ -24,2 +22,3 @@ }
     render() {
+        const value = this.value || {};
         return html `
@@ -37,3 +36,3 @@ <fieldset collapsable ?collapsed=${!this._expanded}>
 
-        <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>
@@ -40,0 +39,0 @@ </fieldset>

dist/src/modeller/property-sidebar/effects/property-event-hover.d.ts

 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
+export {};

dist/src/modeller/property-sidebar/effects/property-event-hover.js

@@ -5,4 +5,3 @@ /**
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators';
@@ -12,6 +11,2 @@ import { EffectsSharedStyle } from './effects-shared-style';
 let PropertyEventHover = class PropertyEventHover extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.value = {};
-    }
     firstUpdated() {
@@ -21,3 +16,3 @@ this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
     render() {
-        var { action, value = '', target = '', emphasize, restore } = this.value;
+        var { action, value = '', target = '', emphasize, restore } = this.value || {};
         return html `
@@ -24,0 +19,0 @@ <input id="checkbox-emphasize" type="checkbox" value-key="emphasize" .checked=${emphasize} />

dist/src/modeller/property-sidebar/effects/property-event-tap.d.ts

 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
+export {};

dist/src/modeller/property-sidebar/effects/property-event-tap.js

@@ -5,4 +5,3 @@ /**
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators';
@@ -12,6 +11,2 @@ import { EffectsSharedStyle } from './effects-shared-style';
 let PropertyEventTap = class PropertyEventTap extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.value = {};
-    }
     firstUpdated() {
@@ -21,3 +16,3 @@ this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
     render() {
-        var { action, value = '', target = '', pressed } = this.value;
+        var { action, value = '', target = '', pressed } = this.value || {};
         return html `
@@ -24,0 +19,0 @@ <input id="checkbox-pressed" type="checkbox" value-key="pressed" .checked=${pressed} />

dist/src/modeller/property-sidebar/effects/property-event.d.ts

 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
 import './property-event-hover';
 import './property-event-tap';

dist/src/modeller/property-sidebar/effects/property-event.js

@@ -5,6 +5,5 @@ /**
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
 import './property-event-hover';
 import './property-event-tap';
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators';
@@ -14,6 +13,2 @@ import { PropertySharedStyle } from '../property-shared-style';
 let PropertyEvent = class PropertyEvent extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.value = {};
-    }
     firstUpdated() {
@@ -23,2 +18,3 @@ this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
     render() {
+        const value = this.value || {};
         return html `
@@ -30,3 +26,3 @@ <fieldset>
 
-        <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>
@@ -40,3 +36,3 @@ </fieldset>
 
-        <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>
@@ -43,0 +39,0 @@ `;

dist/src/modeller/property-sidebar/effects/property-shadow.d.ts

 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
 import '@things-factory/modeller-ui/client/editors/things-editor-color';
@@ -19,3 +18,3 @@ import { LitElement } from 'lit';
     static styles: import("lit").CSSResult[];
-    value: Properties;
+    value?: Properties;
     firstUpdated(): void;
@@ -22,0 +21,0 @@ render(): import("lit-html").TemplateResult<1>;

dist/src/modeller/property-sidebar/effects/property-shadow.js

@@ -5,5 +5,4 @@ /**
 import { __decorate } from "tslib";
-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';
@@ -21,6 +20,2 @@ import { convert } from './value-converter';
 let PropertyShadow = class PropertyShadow extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.value = {};
-    }
     firstUpdated() {
@@ -30,18 +25,19 @@ 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>
     `;
@@ -48,0 +44,0 @@ }

dist/src/modeller/property-sidebar/inspector/inspector.d.ts

@@ -18,3 +18,3 @@ import { Component, Scene } from '@hatiolab/things-scene';
     get extendedMap(): any;
-    getNodeHandleClass(component: Component): "extended" | "collapsed" | "collapsespace";
+    getNodeHandleClass(component: Component): "collapsed" | "extended" | "collapsespace";
     isExtended(component: Component): boolean;
@@ -21,0 +21,0 @@ toggleExtended(component: Component): void;

dist/src/modeller/property-sidebar/property-shared-style.js

@@ -51,4 +51,4 @@ /**
   .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,
@@ -55,0 +55,0 @@ [custom-editor] {

dist/src/modeller/property-sidebar/shapes/shapes.d.ts

 /**
  * @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';

dist/src/modeller/property-sidebar/shapes/shapes.js

@@ -5,5 +5,4 @@ /**
 import { __decorate } from "tslib";
-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';
@@ -13,4 +12,4 @@ import { css, html } from 'lit';
 import { AbstractProperty } from '../abstract-property';
+import { PropertySharedStyle } from '../property-shared-style';
 import { BoxPaddingEditorStyles } from './box-padding-editor-styles';
-import { PropertySharedStyle } from '../property-shared-style';
 let PropertyShapes = class PropertyShapes extends AbstractProperty {
@@ -91,4 +90,3 @@ constructor() {
                       <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>
                     `}
@@ -119,12 +117,9 @@ </div>
                 <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>
@@ -145,3 +140,3 @@ </fieldset>
                 <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>
@@ -151,10 +146,10 @@ <div data-value="center"></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>
 
@@ -197,3 +192,5 @@ <div class="checkbox-row">
               <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>
@@ -210,3 +207,2 @@
                 </select>
-                </things-editor-angle-input>
               </div>
@@ -216,3 +212,5 @@ </fieldset>
               <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>
@@ -228,3 +226,2 @@
                 </select>
-                </things-editor-angle-input>
               </div>
@@ -356,3 +353,3 @@ </fieldset>
 
-      things-editor-buttons-radio > * {
+      ox-buttons-radio > * {
         width: 30px;
@@ -368,35 +365,35 @@ height: 25px;
 
-      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;
@@ -403,0 +400,0 @@ }

dist/src/modeller/property-sidebar/styles/styles.d.ts

@@ -6,5 +6,4 @@ /**
 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';

dist/src/modeller/property-sidebar/styles/styles.js

@@ -7,3 +7,2 @@ /**
 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';
@@ -10,0 +9,0 @@ import '@things-factory/modeller-ui/client/editors/things-editor-color-style';

package.json

 {
   "name": "@operato/board",
-  "version": "0.2.46",
+  "version": "0.2.47",
   "description": "Webcomponent for board following open-wc recommendations",
@@ -49,4 +49,4 @@ "author": "heartyoh",
   "dependencies": {
-    "@operato/input": "^0.2.46",
-    "@operato/layout": "^0.2.46",
+    "@operato/input": "^0.2.47",
+    "@operato/layout": "^0.2.47",
     "@types/file-saver": "^2.0.4",
@@ -97,3 +97,3 @@ "@types/sortablejs": "^1.10.7",
   },
-  "gitHead": "70591a39c0b794a2a7765e9fcddb3e716ae95ecf"
+  "gitHead": "4595e7f0f52d9fc0b97adc9cbbdb0a07f8c0ae00"
 }

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

@@ -5,12 +5,12 @@ /**
 
-import '@things-factory/i18n-base'
 import '@things-factory/modeller-ui/client/editors/things-editor-code'
 import '@things-factory/modeller-ui/client/editors/things-editor-value-map'
 import '@things-factory/modeller-ui/client/editors/things-editor-value-range'
-import '@things-factory/modeller-ui/client/editors/things-editor-buttons-radio'
+import '@operato/input/dist/src/ox-buttons-radio'
 
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { Properties, Scene } from '@hatiolab/things-scene'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators'
 
+import { Properties, Scene } from '@hatiolab/things-scene'
+
 export type Rule =
@@ -74,3 +74,3 @@ | {
       select,
-      things-editor-buttons-radio,
+      ox-buttons-radio,
       [mapping-rule] {
@@ -84,3 +84,3 @@ grid-column: span 7;
 
-      things-editor-buttons-radio {
+      ox-buttons-radio {
         display: flex;
@@ -90,3 +90,3 @@ padding: 0 4px;
 
-      things-editor-buttons-radio > * {
+      ox-buttons-radio > * {
         text-align: center;
@@ -98,3 +98,3 @@ flex: 1;
 
-      things-editor-buttons-radio div[active] {
+      ox-buttons-radio div[active] {
         border-color: #f2471c;
@@ -177,2 +177,6 @@ }
   render() {
+    const mapping = this.mapping || {
+      rule: 'value'
+    }
+
     return html`
@@ -185,3 +189,3 @@ <label for="accessor-input"> <i18n-msg msgid="label.accessor">accessor</i18n-msg> </label>
         data-mapping-accessor
-        .value=${this.mapping.accessor || ''}
+        .value=${mapping.accessor || ''}
       />
@@ -195,3 +199,3 @@
         list="target-list"
-        .value=${this.mapping.target || ''}
+        .value=${mapping.target || ''}
         @focusin=${() => {
@@ -211,6 +215,5 @@ if (!this.scene) this._componentIds = []
       <label for="property-input"> <i18n-msg msgid="label.property">property</i18n-msg> </label>
-      <select id="property-input" value-key="property" .value=${this.mapping.property}>
+      <select id="property-input" value-key="property" .value=${mapping.property}>
         ${this.properties.map(
-          item =>
-            html` <option .value=${item.name} ?selected=${item.name == this.mapping.property}>${item.label}</option> `
+          item => html` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `
         )}
@@ -220,3 +223,3 @@ </select>
       <label> <i18n-msg msgid="label.rule-type">rule type</i18n-msg> </label>
-      <things-editor-buttons-radio .value=${this.mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>
+      <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>
         <div data-value="value"><i18n-msg msgid="label.value"></i18n-msg></div>
@@ -226,10 +229,10 @@ <div data-value="map"><i18n-msg msgid="label.map"></i18n-msg></div>
         <div data-value="eval"><i18n-msg msgid="label.eval"></i18n-msg></div>
-      </things-editor-buttons-radio>
+      </ox-buttons-radio>
 
-      <div rule-editors class="content" ?hidden=${this.mapping.rule == 'value'}>
+      <div rule-editors class="content" ?hidden=${mapping.rule == 'value'}>
         <things-editor-value-map
           value-key="map"
           .value=${this.rule.map || {}}
-          .valuetype=${this._valuetype(this.mapping.property!)}
-          ?active=${this.mapping.rule == 'map'}
+          .valuetype=${this._valuetype(mapping.property!)}
+          ?active=${mapping.rule == 'map'}
         >
@@ -241,4 +244,4 @@ </things-editor-value-map>
           .value=${this.rule.range || []}
-          .valuetype=${this._valuetype(this.mapping.property!)}
-          ?active=${this.mapping.rule == 'range'}
+          .valuetype=${this._valuetype(mapping.property!)}
+          ?active=${mapping.rule == 'range'}
         >
@@ -251,3 +254,3 @@ </things-editor-value-range>
           .value=${this.rule.eval || ''}
-          ?active=${this.mapping.rule == 'eval'}
+          ?active=${mapping.rule == 'eval'}
         >
@@ -254,0 +257,0 @@ </things-editor-code>

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

@@ -5,3 +5,2 @@ /**
 
-import '@things-factory/i18n-base'
 import './data-binding-mapper'
@@ -12,6 +11,7 @@ import '@material/mwc-icon'
 
-import { Properties, Scene } from '@hatiolab/things-scene'
-import { PropertyValues, css, html } from 'lit'
+import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators'
 
+import { Properties, Scene } from '@hatiolab/things-scene'
+
 import { AbstractProperty } from '../abstract-property'
@@ -166,5 +166,3 @@ import { PropertySharedStyle } from '../property-shared-style'
 
-  @property({ type: Object }) value: Properties = {
-    mappings: []
-  }
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
@@ -183,3 +181,3 @@
   get mappings() {
-    return this.value.mappings || []
+    return this.value?.mappings || []
   }
@@ -202,2 +200,6 @@
   render() {
+    const value = this.value || {
+      mappings: []
+    }
+
     return html`
@@ -210,12 +212,12 @@ <fieldset>
           <label> <i18n-msg msgid="label.id">ID</i18n-msg> </label>
-          <input value-key="id" .value=${this.value.id || ''} />
+          <input value-key="id" .value=${value.id || ''} />
 
           <label> <i18n-msg msgid="label.class">Class</i18n-msg> </label>
-          <input value-key="class" .value=${this.value.class || ''} />
+          <input value-key="class" .value=${value.class || ''} />
 
           <label> <i18n-msg msgid="label.template-prefix">Template Prefix</i18n-msg> </label>
-          <input value-key="templatePrefix" .value=${this.value.templatePrefix || ''} />
+          <input value-key="templatePrefix" .value=${value.templatePrefix || ''} />
 
           <div class="checkbox-row">
-            <input id="checkbox-ndns" type="checkbox" value-key="ndns" .checked=${this.value.ndns} />
+            <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>
@@ -225,3 +227,3 @@ </div>
           <div class="checkbox-row">
-            <input id="checkbox-sensitive" type="checkbox" value-key="sensitive" .checked=${this.value.sensitive} />
+            <input id="checkbox-sensitive" type="checkbox" value-key="sensitive" .checked=${value.sensitive} />
             <label for="checkbox-sensitive">
@@ -244,3 +246,3 @@ <i18n-msg msgid="label.intent-sensitive">Intent Sensitive</i18n-msg>
         </legend>
-        <things-editor-data value-key="data" .value=${this.value.data}> </things-editor-data>
+        <things-editor-data value-key="data" .value=${value.data}> </things-editor-data>
       </fieldset>
@@ -268,4 +270,4 @@
           >
-            ${this.mappings.map((m: string, i: number) => html` <div value=${i} data-mapping>${i + 1}</div> `)}
-            <div value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>
+            ${this.mappings.map((m: string, i: number) => html` <div data-value=${i} data-mapping>${i + 1}</div> `)}
+            <div data-value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>
           </ox-buttons-radio>
@@ -296,3 +298,3 @@
           .scene=${this.scene}
-          .mapping=${(this.value.mappings && this.value.mappings[this.mappingIndex]) || {}}
+          .mapping=${(value.mappings && value.mappings[this.mappingIndex]) || {}}
           .properties=${PROPS}
@@ -312,3 +314,3 @@ >
   _clearDataBindingMapper() {
-    var mappings = [...(this.value.mappings || [])]
+    var mappings = [...(this.value?.mappings || [])]
     mappings.splice(this.mappingIndex, 1)
@@ -327,3 +329,3 @@ this._onAfterValueChange(
     var index = this.mappingIndex
-    var mappings = [...(this.value.mappings || [])]
+    var mappings = [...(this.value?.mappings || [])]
     mappings[this.mappingIndex] = JSON.parse(clipboard)
@@ -385,3 +387,3 @@
     /* mapping의 모든 속성이 편집되면, 모델에 반영한다. */
-    var mappings = [...(this.value.mappings || [])]
+    var mappings = [...(this.value?.mappings || [])]
 
@@ -388,0 +390,0 @@ if (mapping.target && mapping.property && mapping.rule) {

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

@@ -31,3 +31,3 @@ /**
   select,
-  things-editor-angle-input,
+  ox-input-angle,
   things-editor-color,
@@ -40,3 +40,3 @@ [custom-editor] {
   select,
-  things-editor-angle-input input,
+  ox-input-angle input,
   things-editor-color input,
@@ -43,0 +43,0 @@ [custom-editor] input {

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

@@ -5,3 +5,2 @@ /**
 
-import '@things-factory/i18n-base'
 import './property-animations'
@@ -11,8 +10,9 @@ import './property-event'
 
+import { html } from 'lit'
 import { customElement, property } from 'lit/decorators'
 
+import { Properties, Scene } from '@hatiolab/things-scene'
+
 import { AbstractProperty } from '../abstract-property'
 import { PropertySharedStyle } from '../property-shared-style'
-import { Scene } from '@hatiolab/things-scene'
-import { html } from 'lit'
 
@@ -23,3 +23,3 @@ @customElement('property-effect')
 
-  @property({ type: Object }) value: any = {}
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
@@ -32,2 +32,4 @@
   render() {
+    const value = this.value || {}
+
     return html`
@@ -39,3 +41,3 @@ <fieldset>
 
-        <property-shadow value-key="shadow" .value=${this.value.shadow || {}}> </property-shadow>
+        <property-shadow value-key="shadow" .value=${value.shadow || {}}> </property-shadow>
       </fieldset>
@@ -50,12 +52,12 @@
           <label> <i18n-msg msgid="label.retention">retention</i18n-msg> </label>
-          <input type="number" value-key="retention" .value=${this.value.retention} placeholder="ms" />
+          <input type="number" value-key="retention" .value=${value.retention} placeholder="ms" />
         </div>
       </fieldset>
 
-      <property-animations value-key="animation" .scene=${this.scene} .value=${this.value.animation || {}}>
+      <property-animations value-key="animation" .scene=${this.scene} .value=${value.animation || {}}>
       </property-animations>
 
-      <property-event value-key="event" .scene=${this.scene} .value=${this.value.event || {}}> </property-event>
+      <property-event value-key="event" .scene=${this.scene} .value=${value.event || {}}> </property-event>
     `
   }
 }

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

@@ -5,9 +5,9 @@ /**
 
-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'
@@ -29,3 +29,3 @@ import { convert } from './value-converter'
 
-  @property({ type: Object }) value: Properties = {}
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
@@ -38,5 +38,7 @@
   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>
@@ -52,41 +54,41 @@ <option value="rotation">Rotation</option>
       <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">
@@ -98,7 +100,7 @@ ${this.scene!.ids.map(info => info.key).map(id => html` <option value=${id}></option> `)}
 
-      <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>
@@ -113,3 +115,3 @@ <option value="quad">quad</option>
       <label>ease</label>
-      <select value-key="ease" .value=${this.value.ease}>
+      <select value-key="ease" .value=${value.ease}>
         <option value="in">in</option>
@@ -116,0 +118,0 @@ <option value="out">out</option>

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

@@ -5,10 +5,10 @@ /**
 
-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'
@@ -40,3 +40,3 @@ import { convert } from './value-converter'
 
-  @property({ type: Object }) value: Properties = {}
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene!: Scene
@@ -51,2 +51,4 @@
   render() {
+    const value = this.value || {}
+
     return html`
@@ -64,3 +66,3 @@ <fieldset collapsable ?collapsed=${!this._expanded}>
 
-        <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>
@@ -67,0 +69,0 @@ </fieldset>

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

@@ -5,7 +5,6 @@ /**
 
-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'
 
@@ -19,3 +18,3 @@ import { EffectsSharedStyle } from './effects-shared-style'
 
-  @property({ type: Object }) value: Properties = {}
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
@@ -28,3 +27,3 @@
   render() {
-    var { action, value = '', target = '', emphasize, restore } = this.value
+    var { action, value = '', target = '', emphasize, restore } = this.value || {}
 
@@ -31,0 +30,0 @@ return html`

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

@@ -5,7 +5,6 @@ /**
 
-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'
 
@@ -19,3 +18,3 @@ import { EffectsSharedStyle } from './effects-shared-style'
 
-  @property({ type: Object }) value: Properties = {}
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
@@ -28,3 +27,3 @@
   render() {
-    var { action, value = '', target = '', pressed } = this.value
+    var { action, value = '', target = '', pressed } = this.value || {}
 
@@ -31,0 +30,0 @@ return html`

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

@@ -5,10 +5,10 @@ /**
 
-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'
@@ -21,3 +21,3 @@ import { convert } from './value-converter'
 
-  @property({ type: Object }) value: Properties = {}
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
@@ -30,2 +30,4 @@
   render() {
+    const value = this.value || {}
+
     return html`
@@ -37,3 +39,3 @@ <fieldset>
 
-        <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>
@@ -47,3 +49,3 @@ </fieldset>
 
-        <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>
@@ -50,0 +52,0 @@ `

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

@@ -5,9 +5,9 @@ /**
 
-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'
@@ -72,3 +72,3 @@
 
-  @property({ type: Object }) value: Properties = {}
+  @property({ type: Object }) value?: Properties
 
@@ -80,18 +80,20 @@ firstUpdated() {
   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>
     `
@@ -98,0 +100,0 @@ }

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

@@ -53,4 +53,4 @@ /**
   .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,
@@ -57,0 +57,0 @@ [custom-editor] {

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

@@ -5,14 +5,14 @@ /**
 
-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 { PropertySharedStyle } from '../property-shared-style'
 import { BoxPaddingEditorStyles } from './box-padding-editor-styles'
-import { PropertySharedStyle } from '../property-shared-style'
 
@@ -86,3 +86,3 @@ @customElement('property-shape')
 
-      things-editor-buttons-radio > * {
+      ox-buttons-radio > * {
         width: 30px;
@@ -98,35 +98,35 @@ height: 25px;
 
-      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;
@@ -212,4 +212,3 @@ }
                       <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>
                     `}
@@ -240,12 +239,9 @@ </div>
                 <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>
@@ -266,3 +262,3 @@ </fieldset>
                 <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>
@@ -272,10 +268,10 @@ <div data-value="center"></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>
 
@@ -318,3 +314,5 @@ <div class="checkbox-row">
               <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>
@@ -331,3 +329,2 @@
                 </select>
-                </things-editor-angle-input>
               </div>
@@ -337,3 +334,5 @@ </fieldset>
               <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>
@@ -349,3 +348,2 @@
                 </select>
-                </things-editor-angle-input>
               </div>
@@ -352,0 +350,0 @@ </fieldset>

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

@@ -7,3 +7,2 @@ /**
 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'
@@ -16,4 +15,5 @@ import '@things-factory/modeller-ui/client/editors/things-editor-color-style'
 
+import { Component } from '@hatiolab/things-scene'
+
 import { AbstractProperty } from '../abstract-property'
-import { Component } from '@hatiolab/things-scene'
 import { PropertySharedStyle } from '../property-shared-style'
@@ -20,0 +20,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1057071

increased by0.17%

Number of package files

193

increased by0.52%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

19538

decreased by-0.29%

Dependency changes

• + Addedsortablejs@1.15.3(transitive)

• - Removedsortablejs@1.15.4(transitive)

• Updated@operato/input@^0.2.47

• Updated@operato/layout@^0.2.47