@operato/board 0.2.52 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "0.2.52",
+  "version": "0.3.7",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -16,9 +16,12 @@
     "directory": "webcomponents/board"
   },
   "exports": {
-    "./ox-board-viewer": "./dist/src/ox-board-viewer.js",
-    "./ox-board-player": "./dist/src/ox-board-player.js",
-    "./ox-board-modeller": "./dist/src/ox-board-modeller.js"
+    ".": "./dist/src/index.js",
+    "./ox-board-list.js": "./dist/src/ox-board-list.js",
+    "./ox-board-viewer.js": "./dist/src/ox-board-viewer.js",
+    "./ox-board-player.js": "./dist/src/ox-board-player.js",
+    "./ox-board-modeller.js": "./dist/src/ox-board-modeller.js",
+    "./register-default-groups.js": "./dist/src/component/register-default-groups.js"
   },
   "typesVersions": {
     "*": {
@@ -46,14 +49,16 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@operato/data-grist": "^0.2.52",
-    "@operato/graphql": "^0.2.52",
-    "@operato/input": "^0.2.52",
-    "@operato/layout": "^0.2.52",
-    "@operato/markdown": "^0.2.52",
-    "@operato/popup": "^0.2.52",
-    "@operato/property-editor": "^0.2.52",
-    "@operato/styles": "^0.2.52",
+    "@operato/data-grist": "^0.3.7",
+    "@operato/graphql": "^0.3.7",
+    "@operato/input": "^0.3.7",
+    "@operato/markdown": "^0.3.7",
+    "@operato/popup": "^0.3.7",
+    "@operato/property-editor": "^0.3.7",
+    "@operato/styles": "^0.3.7",
+    "@polymer/paper-dropdown-menu": "^3.2.0",
+    "@things-factory/help": "^4.0.27",
+    "@things-factory/modeller-ui": "^4.0.27",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
     "file-saver": "^2.0.5",
@@ -65,11 +70,13 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@hatiolab/things-scene": "^2.7.30",
+    "@hatiolab/things-scene": "^2.7.31",
     "@material/mwc-fab": "^0.25.3",
     "@material/mwc-icon": "^0.25.3",
     "@open-wc/eslint-config": "^4.3.0",
     "@open-wc/testing": "next",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-json": "^4.1.0",
     "@types/bwip-js": "^2.1.1",
     "@types/w3c-web-usb": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
@@ -99,5 +106,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "d3471af1da5375cc9f8078d4b6e5a9c81231c54b"
+  "gitHead": "4cc91580b763e2f4f38d95cadef5b18509393bc6"
 }

package/src/component/container.ts

@@ -1,6 +1,7 @@
 import { ComponentGroup } from '../types'
-import iconContainer from '../../../assets/images/components/container.png'
-import popup from '../../../assets/images/components/popup.png'
+
+const iconContainer = new URL('../../../icons/components/container.png', import.meta.url).href
+const popup = new URL('../../../icons/components/popup.png', import.meta.url).href
 
 const icon = `
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">

package/src/component/etc.ts

@@ -1,7 +1,8 @@
 import { ComponentGroup } from '../types'
-import globalReference from '../../../assets/images/components/global-reference.png'
-import infoWindow from '../../../assets/images/components/info-window.png'
-import localReference from '../../../assets/images/components/local-reference.png'
+
+const globalReference = new URL('../../../icons/components/global-reference.png', import.meta.url).href
+const infoWindow = new URL('../../../icons/components/info-window.png', import.meta.url).href
+const localReference = new URL('../../../icons/components/local-reference.png', import.meta.url).href
 
 const icon = `
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">

package/src/component/line.ts

@@ -1,9 +1,10 @@
 import { ComponentGroup } from '../types'
-import bothArrow from '../../../assets/images/components/both-arrow.png'
-import dash from '../../../assets/images/components/dash.png'
-import lineIcon from '../../../assets/images/components/line.png'
-import polyline from '../../../assets/images/components/polyline.png'
-import singleArrow from '../../../assets/images/components/single-arrow.png'
+
+const bothArrow = new URL('../../../icons/components/both-arrow.png', import.meta.url).href
+const dash = new URL('../../../icons/components/dash.png', import.meta.url).href
+const lineIcon = new URL('../../../icons/components/line.png', import.meta.url).href
+const polyline = new URL('../../../icons/components/polyline.png', import.meta.url).href
+const singleArrow = new URL('../../../icons/components/single-arrow.png', import.meta.url).href
 
 const icon = `
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">

package/src/component/shape.ts

@@ -1,10 +1,11 @@
 import { ComponentGroup } from '../types'
-import donut from '../../../assets/images/components/donut.png'
-import ellipse from '../../../assets/images/components/ellipse.png'
-import polygon from '../../../assets/images/components/polygon.png'
-import rect from '../../../assets/images/components/rect.png'
-import star from '../../../assets/images/components/star.png'
-import triangle from '../../../assets/images/components/triangle.png'
+
+const donut = new URL('../../../icons/components/donut.png', import.meta.url).href
+const ellipse = new URL('../../../icons/components/ellipse.png', import.meta.url).href
+const polygon = new URL('../../../icons/components/polygon.png', import.meta.url).href
+const rect = new URL('../../../icons/components/rect.png', import.meta.url).href
+const star = new URL('../../../icons/components/star.png', import.meta.url).href
+const triangle = new URL('../../../icons/components/triangle.png', import.meta.url).href
 
 const icon = `
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">

package/src/component/text-and-media.ts

@@ -1,9 +1,10 @@
 import { ComponentGroup } from '../types'
-import audio from '../../../assets/images/components/audio.png'
-import colorImage from '../../../assets/images/components/color-image.png'
-import gifImage from '../../../assets/images/components/gif-image.png'
-import grayImage from '../../../assets/images/components/gray-image.png'
-import text from '../../../assets/images/components/text.png'
+
+const audio = new URL('../../../icons/components/audio.png', import.meta.url).href
+const colorImage = new URL('../../../icons/components/color-image.png', import.meta.url).href
+const gifImage = new URL('../../../icons/components/gif-image.png', import.meta.url).href
+const grayImage = new URL('../../../icons/components/gray-image.png', import.meta.url).href
+const text = new URL('../../../icons/components/text.png', import.meta.url).href
 
 const icon = `
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">

package/src/index.ts

@@ -1,3 +1,8 @@
+export * from './types'
+
+export { registerDefaultGroups } from './component/register-default-groups'
+
 export * from './ox-board-viewer'
 export * from './ox-board-player'
 export * from './ox-board-modeller'
+export * from './ox-board-list'

package/src/modeller/component-toolbar/component-menu.ts

@@ -4,13 +4,15 @@
 
 import './component-detail'
 
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { Pallet, PalletItem } from '../../types'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { Scene } from '@hatiolab/things-scene'
 import { ScrollbarStyles } from '@operato/styles'
-import noImage from '../../../../assets/images/components/no-image.png'
+
+import { Pallet, PalletItem } from '../../types'
+
+const noImage = new URL('../../../../icons/components/no-image.png', import.meta.url).href
 
 @customElement('component-menu')
 class ComponentMenu extends LitElement {

package/src/modeller/component-toolbar/component-toolbar.ts

@@ -4,6 +4,7 @@
 
 import './component-menu'
 
+import { ICON_EDIT_MODE, ICON_SHIFT_MODE } from './mode-icons'
 import { LitElement, PropertyValues, css, html } from 'lit'
 import { SCENE_MODE, Scene } from '@hatiolab/things-scene'
 import { customElement, property, query, queryAll } from 'lit/decorators.js'
@@ -37,6 +38,10 @@ class ComponentToolbar extends LitElement {
         box-sizing: border-box;
       }
 
+      #shift[active] {
+        background-color: #beb9b3;
+      }
+
       component-menu {
         position: absolute;
         top: 0;
@@ -54,8 +59,9 @@ class ComponentToolbar extends LitElement {
   @property({ type: Array }) componentGroupList: ComponentGroup[] = []
   @property({ type: String }) group?: string | null
   @property({ type: Object }) scene!: Scene
-  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW
+  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT
 
+  @query('#shift') shift!: HTMLImageElement
   @query('component-menu') private menu!: HTMLElement
   @queryAll('[data-group]') private groups!: NodeListOf<HTMLElement>
 
@@ -72,6 +78,11 @@ class ComponentToolbar extends LitElement {
             'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))
           return sum
         }, {} as { [name: string]: string })
+
+      this.icons['mode-edit'] =
+        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_EDIT_MODE.replace(/{{strokeColor}}/g, color))
+      this.icons['mode-shift'] =
+        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_SHIFT_MODE.replace(/{{strokeColor}}/g, color))
     }
 
     if (changes.has('group')) {
@@ -87,8 +98,11 @@ class ComponentToolbar extends LitElement {
 
   render() {
     const componentList = this.componentGroupList || []
+    const modeIcon = this.icons[this.mode === SCENE_MODE.EDIT ? 'mode-edit' : 'mode-shift']
 
     return html`
+      <img id="shift" .src=${modeIcon} @click=${(e: MouseEvent) => this._onClickShift(e)} />
+
       ${componentList
         .filter(group => group.templates?.length > 0)
         .map(
@@ -115,6 +129,30 @@ class ComponentToolbar extends LitElement {
     `
   }
 
+  _setMode(mode: SCENE_MODE) {
+    this.mode = mode
+
+    this.dispatchEvent(
+      new CustomEvent('mode-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { value: mode }
+      })
+    )
+  }
+
+  _onClickShift(e: MouseEvent) {
+    const shift = this.shift
+
+    if (shift.hasAttribute('active')) {
+      shift.removeAttribute('active')
+      this._setMode(SCENE_MODE.EDIT)
+    } else {
+      shift.setAttribute('active', '')
+      this._setMode(SCENE_MODE.SHIFT)
+    }
+  }
+
   async _onClickGroup(e: MouseEvent) {
     var button = e.target as HTMLElement
 

package/src/modeller/component-toolbar/mode-icons.ts

@@ -0,0 +1,86 @@
+export const ICON_EDIT_MODE = `
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 30 30"
+    style="enable-background:new 0 0 30 30;"
+    xml:space="preserve"
+  >
+    <style type="text/css">
+      .st0 {
+        fill: {{strokeColor}};
+      }
+      .st1 {
+        fill: none;
+        stroke: {{strokeColor}};
+        stroke-width: 0.75;
+        stroke-linejoin: round;
+        stroke-miterlimit: 10;
+      }
+    </style>
+    <g>
+      <polygon class="st0" points="2.7,3.9 2.7,22.8 7.8,17.2 16.1,16.9 	" />
+      <path
+        class="st1"
+        d="M27.7,20.1L26.1,19c-0.1,0-0.2,0-0.2,0c0,0.1,0,0.2,0,0.2l1.2,0.9h-4.9v-5l0.9,1.2c0,0,0.1,0.1,0.1,0.1
+      c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0-0.2l-1.1-1.6c-0.1-0.1-0.2-0.1-0.2,0L20.8,16c0,0.1,0,0.2,0,0.2s0.2,0,0.2,0l0.9-1.2v5h-5
+      l1.2-0.9c0.1,0,0.1-0.1,0-0.2c0-0.1-0.1-0.1-0.2,0l-1.6,1.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1,0.1,0.1l1.6,1.1c0,0,0.1,0,0.1,0
+      c0,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.2l-1.2-0.9h5v5L21,24.2c0-0.1-0.1-0.1-0.2,0c-0.1,0-0.1,0.1,0,0.2l1.1,1.6c0,0,0.1,0.1,0.1,0.1
+      s0.1,0,0.1-0.1l1.1-1.6c0-0.1,0-0.2,0-0.2c-0.1,0-0.2,0-0.2,0l-0.9,1.2v-5h4.9l-1.2,0.9c-0.1,0-0.1,0.1,0,0.2c0,0,0.1,0.1,0.1,0.1
+      c0,0,0.1,0,0.1,0l1.6-1.1c0,0,0.1-0.1,0.1-0.1C27.7,20.2,27.7,20.1,27.7,20.1z"
+      />
+    </g>
+  </svg>
+`
+
+export const ICON_SHIFT_MODE = `
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 30 30"
+    style="enable-background:new 0 0 30 30;"
+    xml:space="preserve"
+  >
+    <style type="text/css">
+      .st0 {
+        fill-rule: evenodd;
+        clip-rule: evenodd;
+      }
+      .st1 {
+        fill: {{strokeColor}};
+        stroke: {{strokeColor}};
+        stroke-width: 0.75;
+        stroke-linejoin: round;
+        stroke-miterlimit: 10;
+      }
+    </style>
+    <g>
+      <path
+        class="st0"
+        d="M7.8,23.2c1.6,0,3.8,0,5.7,0c0.8,0,1.3-0.3,1.6-1.2c0.4-2.9,1.5-4.9,2.4-6.9s1.4-2.5,1.6-3.4
+      c0.1-0.5,0.2-1.6-0.4-1.9c-0.6-0.3-1.2,0.1-1.9,1.3c-0.8,1.6-1,2-1.4,2c-0.3,0-0.1-4,0-5.4c0.1-1.3-0.6-1.8-1.3-1.8
+      c-0.8-0.1-1.5,0.4-1.5,1.5c0,1.5-0.2,5.2-0.7,5.2c-0.4,0-0.3-4.3-0.6-6.7c-0.1-1-0.6-1.8-1.5-1.8C9.1,4.2,8.4,4.7,8.3,5.8
+      c-0.1,1.3,1,6.7,0.5,6.7c-0.4,0-1.4-3.3-2.3-5.1C6,6.5,5.6,6,4.6,6.4C3.9,6.7,3.5,7.6,3.8,8.5c0.5,1.2,2.7,6.8,2.2,6.8
+      c-0.4,0-1.4-1.4-2.7-2.1c-1.1-0.6-1.8-0.4-2.1-0.1c-0.4,0.3-0.7,1,0.9,2.8c0.6,0.6,3.1,2.3,3.7,3.2c0.7,1.3,0.6,1,0.8,2.8
+      C6.7,22.7,7,23.2,7.8,23.2z"
+      />
+      <path
+        class="st1"
+        d="M28.7,20.1L27.1,19c-0.1,0-0.2,0-0.2,0c0,0.1,0,0.2,0,0.2l1.2,0.9h-4.9v-5l0.9,1.2c0,0,0.1,0.1,0.1,0.1
+      c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0-0.2l-1.1-1.6c-0.1-0.1-0.2-0.1-0.2,0L21.8,16c0,0.1,0,0.2,0,0.2s0.2,0,0.2,0l0.9-1.2v5h-5
+      l1.2-0.9c0.1,0,0.1-0.1,0-0.2c0-0.1-0.1-0.1-0.2,0l-1.6,1.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1,0.1,0.1l1.6,1.1c0,0,0.1,0,0.1,0
+      c0,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.2l-1.2-0.9h5v5L22,24.2c0-0.1-0.1-0.1-0.2,0c-0.1,0-0.1,0.1,0,0.2l1.1,1.6c0,0,0.1,0.1,0.1,0.1
+      s0.1,0,0.1-0.1l1.1-1.6c0-0.1,0-0.2,0-0.2c-0.1,0-0.2,0-0.2,0l-0.9,1.2v-5h4.9l-1.2,0.9c-0.1,0-0.1,0.1,0,0.2c0,0,0.1,0.1,0.1,0.1
+      c0,0,0.1,0,0.1,0l1.6-1.1c0,0,0.1-0.1,0.1-0.1C28.7,20.2,28.7,20.1,28.7,20.1z"
+      />
+    </g>
+  </svg>
+`

package/src/modeller/edit-toolbar-style.ts

@@ -43,7 +43,7 @@ export const style = css`
   span[button] {
     min-height: 35px;
 
-    background: url('/assets/images/icon-htoolbar.png') no-repeat;
+    background: var(--url-icon-htoolbar) no-repeat;
     background-position-x: 50%;
     opacity: 0.8;
   }
@@ -209,20 +209,20 @@ export const style = css`
 
   /* bigger buttons */
   #fullscreen {
-    background: url('/assets/images/icon-fullscreen.png') 50% 10px no-repeat;
+    background: var(--url-icon-fullscreen) 50% 10px no-repeat;
     width: var(--edit-toolbar-bigger-icon-size);
     height: var(--edit-toolbar-bigger-icon-size);
     border-left: var(--edit-toolbar-bigger-icon-line);
   }
 
   #toggle-property {
-    background: url('/assets/images/icon-collapse.png') 80% 10px no-repeat;
+    background: var(--url-icon-collapse) 80% 10px no-repeat;
     width: var(--edit-toolbar-bigger-icon-size);
     height: var(--edit-toolbar-bigger-icon-size);
     border-left: var(--edit-toolbar-bigger-icon-line);
   }
 
   #toggle-property[active] {
-    background: url(/assets/images/icon-collapse-active.png) 80% 10px no-repeat;
+    background: var(--url-icon-collapse-active) 80% 10px no-repeat;
   }
 `

package/src/modeller/edit-toolbar.ts

@@ -2,9 +2,10 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
+import { html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, queryAll } from 'lit/decorators.js'
+
 import { Component, Scene } from '@hatiolab/things-scene'
-import { LitElement, PropertyValues, html } from 'lit'
-import { customElement, property, query, queryAll, state } from 'lit/decorators.js'
 
 import { style } from './edit-toolbar-style'
 

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

@@ -2,15 +2,15 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-// 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 '@operato/input/dist/src/ox-buttons-radio'
-import '@operato/input/dist/src/ox-input-code'
+import '@operato/input/ox-buttons-radio.js'
+import '@operato/input/ox-input-code.js'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
-import { LitElement, PropertyValues, css, html } from 'lit'
 import { Properties, Scene } from '@hatiolab/things-scene'
-import { customElement, property, query, state } from 'lit/decorators'
 
 export type Rule =
   | {

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

@@ -5,12 +5,13 @@
 import './data-binding-mapper'
 import '@material/mwc-icon'
 import '@things-factory/help'
-import '@operato/input/dist/src/ox-buttons-radio.js'
-import '@operato/input/dist/src/ox-input-data'
+import '@operato/input/ox-buttons-radio.js'
+import '@operato/input/ox-input-data.js'
+
+import { css, html, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
-import { PropertyValues, css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators'
 
 import { AbstractProperty } from '../abstract-property'
 import { PropertySharedStyle } from '../property-shared-style'

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

@@ -6,13 +6,12 @@ import './property-animations'
 import './property-event'
 import './property-shadow'
 
-import { html } from 'lit'
-import { customElement, property } from 'lit/decorators'
-
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { customElement, property } from 'lit/decorators.js'
 
 import { AbstractProperty } from '../abstract-property'
 import { PropertySharedStyle } from '../property-shared-style'
+import { html } from 'lit'
 
 @customElement('property-effect')
 class PropertyEffects extends AbstractProperty {

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

@@ -2,10 +2,10 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@operato/input/dist/src/ox-input-angle'
+import '@operato/input/ox-input-angle.js'
 
 import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators'
+import { customElement, property } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
 

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

@@ -5,10 +5,9 @@
 import './property-animation'
 import '@material/mwc-icon'
 
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators'
-
+import { LitElement, css, html } from 'lit'
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import { PropertySharedStyle } from '../property-shared-style'
 import { convert } from './value-converter'

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

@@ -2,11 +2,12 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@operato/input/dist/src/ox-input-data'
+import '@operato/input/ox-input-data.js'
+
+import { html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 
-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'

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

@@ -2,11 +2,12 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@operato/input/dist/src/ox-input-data'
+import '@operato/input/ox-input-data.js'
+
+import { html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 
-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'

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

@@ -5,10 +5,9 @@
 import './property-event-hover'
 import './property-event-tap'
 
-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.js'
 
 import { PropertySharedStyle } from '../property-shared-style'
 import { convert } from './value-converter'

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

@@ -5,7 +5,7 @@
 import '@things-factory/modeller-ui/client/editors/things-editor-color'
 
 import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators'
+import { customElement, property } from 'lit/decorators.js'
 
 import { Properties } from '@hatiolab/things-scene'
 
@@ -56,7 +56,7 @@ export default class PropertyShadow extends LitElement {
 
       .icon-only-label {
         grid-column: span 3;
-        background: url(/assets/images/icon-properties-label.png) no-repeat;
+        background: var(--url-icon-properties-label) no-repeat;
         float: left;
         margin: 0;
         align-self: stretch;

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

@@ -1,9 +1,9 @@
-import { Component, Container, Properties, Scene } from '@hatiolab/things-scene'
-import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators'
-
+import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 import Sortable from 'sortablejs'
 
+import { Component, Container, Scene } from '@hatiolab/things-scene'
+
 @customElement('scene-inspector')
 export default class SceneInspector extends LitElement {
   static styles = [
@@ -56,7 +56,7 @@ export default class SceneInspector extends LitElement {
       .collapsed::before,
       .extended::before,
       .collapsespace::before {
-        background: url(/assets/images/icon-shell-inspector.png) no-repeat;
+        background: var(--url-icon-shell-inspector) no-repeat;
         width: 16px;
         height: 18px;
         display: inline-block;