@operato/board 1.0.11 → 1.0.15

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