@operato/board 1.0.13 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.0.13",
+  "version": "1.0.16",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -55,15 +55,16 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@operato/app": "^1.0.9",
+    "@open-wc/scoped-elements": "^2.0.0-next.6",
+    "@operato/app": "^1.0.16",
     "@operato/data-grist": "^1.0.8",
-    "@operato/font": "^1.0.8",
-    "@operato/graphql": "^1.0.6",
+    "@operato/font": "^1.0.16",
+    "@operato/graphql": "^1.0.16",
     "@operato/i18n": "^1.0.6",
     "@operato/input": "^1.0.6",
     "@operato/markdown": "^1.0.6",
     "@operato/popup": "^1.0.6",
-    "@operato/property-editor": "^1.0.8",
+    "@operato/property-editor": "^1.0.16",
     "@operato/styles": "^1.0.6",
     "@operato/utils": "^1.0.6",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -86,6 +87,7 @@
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@types/bwip-js": "^2.1.1",
+    "@types/lodash-es": "^4.17.6",
     "@types/w3c-web-usb": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
@@ -114,5 +116,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "708bac1eb001bd2aad5b289056031b841558eba6"
+  "gitHead": "3e0514a3903e5a0278a0df8e4dd368ec4daf812c"
 }

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

@@ -4,13 +4,12 @@
 
 import '@operato/markdown'
 
-import { LitElement, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { css, html, LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
 
 import { ScrollbarStyles } from '@operato/styles'
 
-@customElement('component-detail')
-class ComponentDetail extends LitElement {
+export class ComponentDetail extends LitElement {
   static styles = [
     ScrollbarStyles,
     css`

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

@@ -2,19 +2,19 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import './component-detail'
-
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { Pallet, PalletItem } from '../../types'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { property, query, state } from 'lit/decorators.js'
 
 import { Scene } from '@hatiolab/things-scene'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { ScrollbarStyles } from '@operato/styles'
 
+import { Pallet, PalletItem } from '../../types'
+import { ComponentDetail } from './component-detail'
+
 const noImage = new URL('../../../../icons/components/no-image.png', import.meta.url).href
 
-@customElement('component-menu')
-class ComponentMenu extends LitElement {
+export class ComponentMenu extends ScopedElementsMixin(LitElement) {
   static styles = [
     ScrollbarStyles,
     css`
@@ -107,6 +107,12 @@ class ComponentMenu extends LitElement {
 
   @query('component-detail') detail!: HTMLElement
 
+  static get scopedElements() {
+    return {
+      'component-detail': ComponentDetail
+    }
+  }
+
   render() {
     return this.group
       ? html`

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

@@ -2,17 +2,17 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import './component-menu'
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { property, query, queryAll } from 'lit/decorators.js'
 
-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'
+import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 
 import { ComponentGroup } from '../../types'
+import { ComponentMenu } from './component-menu.js'
+import { ICON_EDIT_MODE, ICON_SHIFT_MODE } from './mode-icons'
 
-@customElement('component-toolbar')
-class ComponentToolbar extends LitElement {
+export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
   static styles = [
     css`
       :host {
@@ -96,6 +96,12 @@ class ComponentToolbar extends LitElement {
     }
   }
 
+  static get scopedElements() {
+    return {
+      'component-menu': ComponentMenu
+    }
+  }
+
   render() {
     const componentList = this.componentGroupList || []
     const modeIcon = this.icons[this.mode === SCENE_MODE.SHIFT ? 'mode-shift' : 'mode-edit']

package/src/modeller/edit-toolbar.ts

@@ -3,7 +3,7 @@
  */
 
 import { html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, queryAll } from 'lit/decorators.js'
+import { property, query, queryAll } from 'lit/decorators.js'
 
 import { Component, Scene } from '@hatiolab/things-scene'
 import { copyToClipboard, isMacOS } from '@operato/utils'
@@ -12,7 +12,6 @@ import { style } from './edit-toolbar-style'
 
 const MACOS = isMacOS()
 
-@customElement('edit-toolbar')
 export class EditToolbar extends LitElement {
   static styles = [style]
 

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

@@ -9,7 +9,7 @@ import '@operato/input/ox-input-code.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { property, query, state } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
 
@@ -39,8 +39,7 @@ Example:
   </data-binding-mapper>
 */
 
-@customElement('data-binding-mapper')
-export default class DataBindingMapper extends LitElement {
+export class DataBindingMapper extends LitElement {
   static styles = [
     css`
       :host {

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

@@ -2,7 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import './data-binding-mapper'
 import '@material/mwc-icon'
 import '@operato/help/ox-title-with-help.js'
 import '@operato/input/ox-buttons-radio.js'
@@ -10,12 +9,14 @@ import '@operato/input/ox-input-data.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { css, html, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { property, query, state } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 
-import { AbstractProperty } from '../abstract-property'
-import { PropertySharedStyle } from '../property-shared-style'
+import { AbstractProperty } from '../abstract-property.js'
+import { PropertySharedStyle } from '../property-shared-style.js'
+import { DataBindingMapper } from './data-binding-mapper.js'
 
 var clipboard = '{}'
 
@@ -43,8 +44,7 @@ const PROPS = [
   return typeof prop == 'string' ? { name: prop, label: prop } : { name: prop[0], label: prop[1] }
 })
 
-@customElement('property-data-binding')
-class PropertyDataBinding extends AbstractProperty {
+export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
   static styles = [
     PropertySharedStyle,
     css`
@@ -194,6 +194,12 @@ class PropertyDataBinding extends AbstractProperty {
     }
   }
 
+  static get scopedElements() {
+    return {
+      'data-binding-mapper': DataBindingMapper
+    }
+  }
+
   render() {
     const value = this.value || {
       mappings: []

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

@@ -2,22 +2,22 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import './property-animations'
-import './property-event'
-import './property-shadow'
 import '@operato/i18n/ox-i18n.js'
 import '@operato/help/ox-title-with-help.js'
 
 import { html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 
-import { AbstractProperty } from '../abstract-property'
-import { PropertySharedStyle } from '../property-shared-style'
+import { AbstractProperty } from '../abstract-property.js'
+import { PropertySharedStyle } from '../property-shared-style.js'
+import { PropertyAnimations } from './property-animations.js'
+import { PropertyEvent } from './property-event.js'
+import { PropertyShadow } from './property-shadow.js'
 
-@customElement('property-effect')
-class PropertyEffects extends AbstractProperty {
+export class PropertyEffects extends ScopedElementsMixin(AbstractProperty) {
   static styles = [PropertySharedStyle]
 
   @property({ type: Object }) value?: Properties
@@ -27,6 +27,14 @@ class PropertyEffects extends AbstractProperty {
     this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
   }
 
+  static get scopedElements() {
+    return {
+      'property-shadow': PropertyShadow,
+      'property-animations': PropertyAnimations,
+      'property-event': PropertyEvent
+    }
+  }
+
   render() {
     const value = this.value || {}
 

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

@@ -6,12 +6,12 @@ import '@operato/input/ox-input-angle.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
 
-import { EffectsSharedStyle } from './effects-shared-style'
-import { convert } from './value-converter'
+import { EffectsSharedStyle } from './effects-shared-style.js'
+import { convert } from './value-converter.js'
 
 /**
  * 컴포넌트의 animation 속성을 편집하는 element
@@ -22,8 +22,7 @@ Example:
     </property-animation>
 */
 
-@customElement('property-animation')
-export default class PropertyAnimation extends LitElement {
+export class PropertyAnimation extends LitElement {
   static styles = [EffectsSharedStyle]
 
   @property({ type: Object }) value?: Properties

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

@@ -2,20 +2,20 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import './property-animation'
 import '@material/mwc-icon'
 import '@operato/help/ox-title-with-help.js'
 
 import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 
-import { PropertySharedStyle } from '../property-shared-style'
-import { convert } from './value-converter'
+import { PropertySharedStyle } from '../property-shared-style.js'
+import { PropertyAnimation } from './property-animation.js'
+import { convert } from './value-converter.js'
 
-@customElement('property-animations')
-class PropertyAnimations extends LitElement {
+export class PropertyAnimations extends ScopedElementsMixin(LitElement) {
   static styles = [
     PropertySharedStyle,
     css`
@@ -46,6 +46,12 @@ class PropertyAnimations extends LitElement {
     this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
   }
 
+  static get scopedElements() {
+    return {
+      'property-animation': PropertyAnimation
+    }
+  }
+
   render() {
     const value = this.value || {}
 

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

@@ -6,15 +6,14 @@ import '@operato/input/ox-input-data.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
 
-import { EffectsSharedStyle } from './effects-shared-style'
+import { EffectsSharedStyle } from './effects-shared-style.js'
 import { convert } from './value-converter'
 
-@customElement('property-event-hover')
-class PropertyEventHover extends LitElement {
+export class PropertyEventHover extends LitElement {
   static styles = [EffectsSharedStyle]
 
   @property({ type: Object }) value?: Properties

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

@@ -6,7 +6,7 @@ import '@operato/input/ox-input-data.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
 
@@ -14,8 +14,7 @@ import { scenarios } from '../../../graphql/scenario'
 import { EffectsSharedStyle } from './effects-shared-style'
 import { convert } from './value-converter'
 
-@customElement('property-event-tap')
-class PropertyEventTap extends LitElement {
+export class PropertyEventTap extends LitElement {
   static styles = [EffectsSharedStyle]
 
   @property({ type: Object }) value?: Properties

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

@@ -2,20 +2,20 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import './property-event-hover'
-import './property-event-tap'
 import '@operato/help/ox-title-with-help.js'
 
 import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 
 import { PropertySharedStyle } from '../property-shared-style'
+import { PropertyEventHover } from './property-event-hover'
+import { PropertyEventTap } from './property-event-tap'
 import { convert } from './value-converter'
 
-@customElement('property-event')
-class PropertyEvent extends LitElement {
+export class PropertyEvent extends ScopedElementsMixin(LitElement) {
   static styles = [PropertySharedStyle]
 
   @property({ type: Object }) value?: Properties
@@ -25,6 +25,13 @@ class PropertyEvent extends LitElement {
     this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
   }
 
+  static get scopedElements() {
+    return {
+      'property-event-hover': PropertyEventHover,
+      'property-event-tap': PropertyEventTap
+    }
+  }
+
   render() {
     const value = this.value || {}
 

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

@@ -5,10 +5,11 @@
 import '@operato/i18n/ox-i18n.js'
 import '@operato/input/ox-input-color.js'
 
-import { LitElement, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { css, html, LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
 
 import { Properties } from '@hatiolab/things-scene'
+
 import { convert } from './value-converter'
 
 /**
@@ -21,8 +22,7 @@ import { convert } from './value-converter'
  *  ></property-shadow>
  */
 
-@customElement('property-shadow')
-export default class PropertyShadow extends LitElement {
+export class PropertyShadow extends LitElement {
   static styles = [
     css`
       :host {

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

@@ -1,11 +1,10 @@
 import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { 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 {
+export class SceneInspector extends LitElement {
   static styles = [
     css`
       :host {

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

@@ -3,22 +3,23 @@
  */
 
 import '@material/mwc-icon'
-import './shapes/shapes'
-import './styles/styles'
-import './effects/effects'
-import './specifics/specifics'
-import './data-binding/data-binding'
-import './inspector/inspector'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 import deepClone from 'lodash-es/cloneDeep'
 
 import { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { ScrollbarStyles } from '@operato/styles'
 
-@customElement('property-sidebar')
-class PropertySidebar extends LitElement {
+import { PropertyDataBinding } from './data-binding/data-binding.js'
+import { PropertyEffects } from './effects/effects.js'
+import { SceneInspector } from './inspector/inspector'
+import { PropertyShapes } from './shapes/shapes.js'
+import { PropertySpecific } from './specifics/specifics.js'
+import { PropertyStyles } from './styles/styles.js'
+
+export class PropertySidebar extends ScopedElementsMixin(LitElement) {
   static styles = [
     ScrollbarStyles,
     css`
@@ -93,6 +94,17 @@ class PropertySidebar extends LitElement {
     change.has('collapsed') && this._onCollapsed(this.collapsed)
   }
 
+  static get scopedElements() {
+    return {
+      'property-shape': PropertyShapes,
+      'property-style': PropertyStyles,
+      'property-effect': PropertyEffects,
+      'property-specific': PropertySpecific,
+      'property-data-binding': PropertyDataBinding,
+      'scene-inspector': SceneInspector
+    }
+  }
+
   render() {
     var tabName = this.tabName ? this.tabName : 'shape'
 

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

@@ -9,7 +9,7 @@ import '@operato/i18n/ox-i18n.js'
 import '@operato/help/ox-title-with-help.js'
 
 import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 
 import { BOUNDS, Component, Properties } from '@hatiolab/things-scene'
 
@@ -17,8 +17,7 @@ import { AbstractProperty } from '../abstract-property'
 import { PropertySharedStyle } from '../property-shared-style'
 import { BoxPaddingEditorStyles } from './box-padding-editor-styles'
 
-@customElement('property-shape')
-class PropertyShapes extends AbstractProperty {
+export class PropertyShapes extends AbstractProperty {
   static styles = [
     PropertySharedStyle,
     BoxPaddingEditorStyles,

package/src/modeller/property-sidebar/specifics/specific-properties-builder.ts

@@ -5,7 +5,7 @@
 import '@operato/app/property-editor.js' /* for registering property editors */
 
 import { html, LitElement, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 
 import { Properties } from '@hatiolab/things-scene'
 import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
@@ -57,8 +57,7 @@ function convertValue(type: string, value: any) {
   return converted
 }
 
-@customElement('specific-properties-builder')
-class SpecificPropertiesBuilder extends LitElement {
+export class SpecificPropertiesBuilder extends LitElement {
   @property({ type: Object }) value: any
   @property({ type: Array }) props: any[] = []
   @property({ type: Object }) propertyEditor: any

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

@@ -3,17 +3,17 @@
  */
 
 import '@operato/help/ox-help-icon.js'
-import './specific-properties-builder'
 
 import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 
 import { Component, Scene } from '@hatiolab/things-scene'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 
 import { PropertySharedStyle } from '../property-shared-style'
+import { SpecificPropertiesBuilder } from './specific-properties-builder.js'
 
-@customElement('property-specific')
-class PropertySpecific extends LitElement {
+export class PropertySpecific extends ScopedElementsMixin(LitElement) {
   static styles = [
     PropertySharedStyle,
     css`
@@ -48,7 +48,11 @@ class PropertySpecific extends LitElement {
 
     this.removeEventListener('i-need-selected', this.boundINeedSelected)
   }
-
+  static get scopedElements() {
+    return {
+      'specific-properties-builder': SpecificPropertiesBuilder
+    }
+  }
   render() {
     const selected = this.selected && this.selected[0]
     const value = this.value || {}

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

@@ -11,14 +11,14 @@ import '@operato/font/ox-font-selector.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 
-import { AbstractProperty } from '../abstract-property'
 import { Component } from '@hatiolab/things-scene'
-import { PropertySharedStyle } from '../property-shared-style'
 
-@customElement('property-style')
-class PropertyStyles extends AbstractProperty {
+import { AbstractProperty } from '../abstract-property.js'
+import { PropertySharedStyle } from '../property-shared-style.js'
+
+export class PropertyStyles extends AbstractProperty {
   static styles = [
     PropertySharedStyle,
     css`

package/src/ox-board-modeller.ts

@@ -1,20 +1,21 @@
 import '@material/mwc-fab'
 import './modeller/scene-viewer/ox-scene-viewer'
-import './modeller/component-toolbar/component-toolbar'
-import './modeller/property-sidebar/property-sidebar'
-import './modeller/edit-toolbar'
 import '@hatiolab/things-scene'
 import './ox-board-viewer'
 
-import { ComponentGroup, ComponentTemplate } from './types'
-import { LitElement, css, html } from 'lit'
-import { SCENE_MODE, Scene } from '@hatiolab/things-scene'
+import { saveAs } from 'file-saver'
+import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
+
+import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { OxPopup } from '@operato/popup'
 import { isMacOS, togglefullscreen } from '@operato/utils'
 
+import { ComponentToolbar } from './modeller/component-toolbar/component-toolbar'
 import { EditToolbar } from './modeller/edit-toolbar'
-import { OxPopup } from '@operato/popup'
-import { saveAs } from 'file-saver'
+import { PropertySidebar } from './modeller/property-sidebar/property-sidebar'
+import { ComponentGroup, ComponentTemplate } from './types'
 
 const MACOS = isMacOS()
 
@@ -34,7 +35,7 @@ const ICON_SHELL_INSPECTOR = new URL('../../icons/icon-shell-inspector.png', imp
 var Registry: ComponentGroup[] = []
 
 @customElement('ox-board-modeller')
-export class BoardModeller extends LitElement {
+export class BoardModeller extends ScopedElementsMixin(LitElement) {
   static styles = [
     css`
       :host {
@@ -193,6 +194,14 @@ export class BoardModeller extends LitElement {
     this.style.setProperty('--url-icon-shell-inspector', `url(${ICON_SHELL_INSPECTOR})`)
   }
 
+  static get scopedElements() {
+    return {
+      'edit-toolbar': EditToolbar,
+      'property-sidebar': PropertySidebar,
+      'component-toolbar': ComponentToolbar
+    }
+  }
+
   render() {
     return html`
       <edit-toolbar