@operato/process 2.0.0-alpha.71 → 2.0.0-alpha.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "2.0.0-alpha.71",
+  "version": "2.0.0-alpha.74",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -67,9 +67,9 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@open-wc/scoped-elements": "^2.1.3",
+    "@open-wc/scoped-elements": "^3.0.5",
     "@operato/app": "^2.0.0-alpha.71",
-    "@operato/board": "^2.0.0-alpha.71",
+    "@operato/board": "^2.0.0-alpha.74",
     "@operato/data-grist": "^2.0.0-alpha.68",
     "@operato/font": "^2.0.0-alpha.71",
     "@operato/graphql": "^2.0.0-alpha.57",
@@ -127,5 +127,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "d3111bf8a6d3b17cc22c104e8aee5fb195683f1e"
+  "gitHead": "2460e3386b888ee5e0eefc50cc16c6a8ada456aa"
 }

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

@@ -2,7 +2,7 @@ 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 { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element'
 import { ScrollbarStyles } from '@operato/styles'
 import { i18next } from '@operato/i18n'
 

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

@@ -6,7 +6,7 @@ import { css, html, LitElement, PropertyValues } from 'lit'
 import { property, query, queryAll } from 'lit/decorators.js'
 
 import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element'
 
 import { ComponentGroup } from '../../types'
 import { ComponentMenu } from './component-menu.js'
@@ -84,11 +84,14 @@ export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
 
       this.icons = (this.componentGroupList || [])
         .filter(group => group.templates?.length > 0)
-        .reduce((sum, group: ComponentGroup) => {
-          sum[group.name] =
-            'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))
-          return sum
-        }, {} as { [name: string]: string })
+        .reduce(
+          (sum, group: ComponentGroup) => {
+            sum[group.name] =
+              '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))

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

@@ -12,7 +12,7 @@ import { css, html, PropertyValues } from 'lit'
 import { property, query, state } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element'
 
 import { AbstractProperty } from '../abstract-property.js'
 import { PropertySharedStyle } from '../property-shared-style.js'

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

@@ -9,7 +9,7 @@ import { html } from 'lit'
 import { property } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element'
 
 import { AbstractProperty } from '../abstract-property.js'
 import { PropertySharedStyle } from '../property-shared-style.js'

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

@@ -8,7 +8,7 @@ import { html, LitElement } from 'lit'
 import { property } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element'
 
 import { PropertySharedStyle } from '../property-shared-style'
 import { PropertyEventHover } from './property-event-hover'

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

@@ -9,7 +9,7 @@ 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 { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element'
 import { ScrollbarStyles } from '@operato/styles'
 
 import { PropertyDataBinding } from './data-binding/data-binding.js'

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

@@ -8,7 +8,7 @@ import { css, html, LitElement } from 'lit'
 import { property } from 'lit/decorators.js'
 
 import { Component, Scene } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element'
 
 import { i18next } from '@operato/i18n'
 

package/src/ox-process-modeller.ts

@@ -13,7 +13,7 @@ import { css, html, LitElement, PropertyValues } 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 { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element'
 import { OxPopup } from '@operato/popup'
 import { isMacOS, togglefullscreen } from '@operato/utils'
 

package/src/selector/process-creation-popup.ts

@@ -1,8 +1,7 @@
-import '@material/mwc-textfield'
-import '@material/mwc-textarea'
-import '@material/mwc-select'
-import '@material/mwc-list/mwc-list-item'
-import '@material/web/button/elevated-button.js'
+import '@material/web/textfield/filled-text-field.js'
+import '@material/web/button/text-button.js'
+import '@material/web/select/filled-select.js'
+import '@material/web/select/select-option.js'
 import '../ox-process-template-list'
 
 import { css, html, LitElement } from 'lit'
@@ -45,8 +44,9 @@ export class ProcessCreationPopup extends localize(i18next)(LitElement) {
           overflow: auto;
         }
 
-        [content] > mwc-textarea {
+        [content] > md-filled-text-field[type='textarea'] {
           flex: 1;
+          resize: none;
         }
 
         [templates] {
@@ -75,25 +75,31 @@ export class ProcessCreationPopup extends localize(i18next)(LitElement) {
     return html`
       <div body>
         <div content>
-          <mwc-textfield label=${String(i18next.t('label.name'))} name="name" required field-name></mwc-textfield>
-          <mwc-textarea
+          <md-filled-text-field
+            label=${String(i18next.t('label.name'))}
+            name="name"
+            required
+            field-name
+          ></md-filled-text-field>
+          <md-filled-text-field
+            type="textarea"
             label=${String(i18next.t('label.description'))}
             name="description"
             field-description
-          ></mwc-textarea>
-          <mwc-select
+          ></md-filled-text-field>
+          <md-filled-select
             label=${String(i18next.t('label.group'))}
             field-group
             helper="If there is no group to choose, you can leave it empty."
           >
             ${groups.map(
               group => html`
-                <mwc-list-item value=${group.id} ?selected=${this.defaultGroup == group.id}
-                  >${group.name}</mwc-list-item
+                <md-select-option value=${group.id} ?selected=${this.defaultGroup == group.id}
+                  >${group.name}</md-select-option
                 >
               `
             )}
-          </mwc-select>
+          </md-filled-select>
         </div>
 
         <div templates>
@@ -102,15 +108,15 @@ export class ProcessCreationPopup extends localize(i18next)(LitElement) {
         </div>
       </div>
 
-      <md-elevated-button @click=${(e: MouseEvent) => this.onClickSubmit()}
-        >${String(i18next.t('button.create'))}</md-elevated-button
+      <md-text-button @click=${(e: MouseEvent) => this.onClickSubmit()}
+        >${String(i18next.t('button.create'))}</md-text-button
       >
     `
   }
 
   firstUpdated() {
     setTimeout(() => {
-      ;(this.renderRoot.querySelector('mwc-textfield') as any)?.focus()
+      ;(this.renderRoot.querySelector('md-filled-text-field') as any)?.focus()
     }, 100)
   }