@operato/process 2.0.0-beta.2 → 2.0.0-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.21",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -68,18 +68,18 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^2.0.0-beta.2",
-    "@operato/board": "^2.0.0-beta.2",
-    "@operato/data-grist": "^2.0.0-beta.2",
-    "@operato/font": "^2.0.0-beta.2",
-    "@operato/graphql": "^2.0.0-beta.0",
-    "@operato/i18n": "^2.0.0-beta.0",
-    "@operato/input": "^2.0.0-beta.2",
-    "@operato/markdown": "^2.0.0-beta.0",
-    "@operato/popup": "^2.0.0-beta.0",
-    "@operato/property-editor": "^2.0.0-beta.2",
-    "@operato/styles": "^2.0.0-beta.0",
-    "@operato/utils": "^2.0.0-beta.0",
+    "@operato/app": "^2.0.0-beta.21",
+    "@operato/board": "^2.0.0-beta.21",
+    "@operato/data-grist": "^2.0.0-beta.20",
+    "@operato/font": "^2.0.0-beta.21",
+    "@operato/graphql": "^2.0.0-beta.13",
+    "@operato/i18n": "^2.0.0-beta.16",
+    "@operato/input": "^2.0.0-beta.20",
+    "@operato/markdown": "^2.0.0-beta.13",
+    "@operato/popup": "^2.0.0-beta.14",
+    "@operato/property-editor": "^2.0.0-beta.21",
+    "@operato/styles": "^2.0.0-beta.13",
+    "@operato/utils": "^2.0.0-beta.13",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
@@ -128,5 +128,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "df3ca9940501549fe8b59f294425d50962895965"
+  "gitHead": "9f53df29db8111881882793c369d83c4e452a48e"
 }

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

@@ -20,7 +20,8 @@ export class ComponentMenu extends ScopedElementsMixin(LitElement) {
         flex-direction: column;
         align-content: stretch;
 
-        background-color: var(--component-menu-background-color);
+        background-color: var(--component-menu-background-color, var(--md-sys-color-secondary-container));
+        color: var(--component-menu-color, var(--md-sys-color-on-secondary-container));
         margin: 0px;
         padding: 0px;
 
@@ -29,7 +30,7 @@ export class ComponentMenu extends ScopedElementsMixin(LitElement) {
 
         overflow: visible;
 
-        border: 2px solid var(--component-menu-border-color);
+        border: 2px solid var(--component-menu-border-color, var(--md-sys-color-secondary));
         box-sizing: border-box;
 
         position: absolute;
@@ -39,11 +40,11 @@ export class ComponentMenu extends ScopedElementsMixin(LitElement) {
       }
 
       h2 {
-        background-color: var(--component-menu-border-color);
+        background-color: var(--component-menu-border-color, var(--md-sys-color-secondary));
         padding: 1px 5px;
         margin: 0;
         font: var(--component-menu-title);
-        color: #fff;
+        color: var(--md-sys-color-on-secondary);
         text-transform: capitalize;
       }
 
@@ -55,7 +56,8 @@ export class ComponentMenu extends ScopedElementsMixin(LitElement) {
         padding: 0;
         overflow-y: auto;
 
-        background-color: var(--component-menu-background-color);
+        background-color: var(--component-menu-background-color, var(--md-sys-color-secondary-container));
+        color: var(--component-menu-color, var(--md-sys-color-on-secondary-container));
       }
 
       [template] {
@@ -65,13 +67,13 @@ export class ComponentMenu extends ScopedElementsMixin(LitElement) {
         padding: 0 5px 0 0;
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         font-size: 11px;
-        color: var(--component-menu-item-color);
+        color: var(--component-menu-item-color, var(--md-sys-color-on-secondary-container));
         text-transform: capitalize;
       }
 
       [template]:hover,
       [template]:focus {
-        color: var(--component-menu-item-hover-color);
+        color: var(--component-menu-item-hover-color, var(--md-sys-color-secondary));
         font-weight: bold;
         cursor: pointer;
       }

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

@@ -6,7 +6,8 @@ import { css } from 'lit'
 
 export const style = css`
   :host {
-    background-color: var(--edit-toolbar-background-color, #394e64);
+    background-color: var(--edit-toolbar-background-color, var(--md-sys-color-secondary-container, #394e64));
+    color: var(--edit-toolbar-color, var(--md-sys-color-on-secondary-container, #394e64));
 
     overflow-x: hidden;
   }

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

@@ -46,7 +46,8 @@ export class DataBindingMapper extends LitElement {
   static styles = [
     css`
       :host {
-        background-color: rgba(255, 255, 255, 0.5);
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
         overflow: hidden;
         padding: 7px 0 0 0;
         border: 1px solid rgba(0, 0, 0, 0.2);

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

@@ -113,14 +113,15 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
       }
 
       ox-buttons-radio > div.iron-selected {
-        background-color: rgba(255, 255, 255, 0.5);
-        color: #585858;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
       }
 
       div[binding] {
         display: flex;
         flex-direction: row-reverse;
-        background-color: rgba(255, 255, 255, 0.5);
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
         overflow: hidden;
         border-style: solid;
         border-color: rgba(0, 0, 0, 0.2);

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

@@ -10,13 +10,13 @@ export const PropertySharedStyle = css`
     margin: 4px;
     padding: 9px 4px 9px 4px;
     border-bottom: var(--property-sidebar-fieldset-border);
-    color: var(--property-sidebar-fieldset-legend-color);
+    color: var(--property-sidebar-fieldset-legend-color, var(--md-sys-color-on-secondary-container));
     font: var(--property-sidebar-fieldset-label);
   }
 
   fieldset legend {
     padding: 5px 0 0 5px;
-    color: var(--property-sidebar-fieldset-legend-color);
+    color: var(--property-sidebar-fieldset-legend-color, var(--md-sys-color-on-secondary-container));
     font: var(--property-sidebar-fieldset-legend);
     text-transform: capitalize;
   }

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

@@ -28,7 +28,7 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
         width: 270px;
         display: flex;
         flex-direction: column;
-        background-color: var(--property-sidebar-background-color);
+        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));
         user-select: none;
 
         --input-padding: var(--padding-narrow);
@@ -53,7 +53,7 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
       }
 
       [tab] [selected] {
-        background-color: var(--property-sidebar-background-color);
+        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));
         border-left: 1px solid rgba(255, 255, 255, 0.5);
         border-right: 1px solid rgba(0, 0, 0, 0.15);
         opacity: 1;
@@ -69,6 +69,10 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
       [content] > :not([active]) {
         display: none;
       }
+
+      [hidden] {
+        display: none !important;
+      }
     `
   ]
 
@@ -82,6 +86,13 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
   @property({ type: Array }) fonts: any[] = []
   @property({ type: Array }) propertyEditor: any[] = []
 
+  @property({ type: Boolean, attribute: 'hide-data-binding' }) hideDataBinding: boolean = false
+  @property({ type: Boolean, attribute: 'hide-effect' }) hideEffect: boolean = false
+  @property({ type: Boolean, attribute: 'hide-inspector' }) hideInspector: boolean = false
+  @property({ type: Boolean, attribute: 'hide-shape' }) hideShape: boolean = false
+  @property({ type: Boolean, attribute: 'hide-style' }) hideStyle: boolean = false
+  @property({ type: Boolean, attribute: 'hide-specific' }) hideSpecific: boolean = false
+
   propertyTarget: Component | null = null
 
   firstUpdated() {
@@ -116,12 +127,14 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
           this.tabName = (e.target as HTMLElement).getAttribute('name')
         }}
       >
-        <md-icon name="specific" ?selected=${tabName == 'specific'}>tune</md-icon>
-        <md-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</md-icon>
-        <md-icon name="style" ?selected=${tabName == 'style'}>palette</md-icon>
-        <md-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</md-icon>
-        <md-icon name="data-binding" ?selected=${tabName == 'data-binding'}>share</md-icon>
-        <md-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</md-icon>
+        <md-icon name="specific" ?selected=${tabName == 'specific'} ?hidden=${this.hideSpecific}>tune</md-icon>
+        <md-icon name="shape" ?selected=${tabName == 'shape'} ?hidden=${this.hideShape}>format_shapes</md-icon>
+        <md-icon name="style" ?selected=${tabName == 'style'} ?hidden=${this.hideStyle}>palette</md-icon>
+        <md-icon name="effect" ?selected=${tabName == 'effect'} ?hidden=${this.hideEffect}>movie_filter</md-icon>
+        <md-icon name="data-binding" ?selected=${tabName == 'data-binding'} ?hidden=${this.hideDataBinding}
+          >share</md-icon
+        >
+        <md-icon name="inspector" ?selected=${tabName == 'inspector'} ?hidden=${this.hideInspector}>visibility</md-icon>
       </div>
 
       <div content>

package/src/ox-process-list.ts

@@ -105,7 +105,7 @@ class ProcessList extends LitElement {
     #filters [type='text'] {
       background-color: transparent;
       border: 0;
-      border-bottom: var(--border-dark-color);
+      border-bottom: var(--border-dim-color);
       padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;
       font-size: var(--fontsize-large);
     }

package/src/ox-process-modeller.ts

@@ -161,6 +161,13 @@ export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
   @property({ type: Array }) fonts: any[] = []
   @property({ type: Array }) propertyEditor: any[] = []
 
+  @property({ type: Boolean, attribute: 'hide-data-binding' }) hideDataBinding: boolean = false
+  @property({ type: Boolean, attribute: 'hide-effect' }) hideEffect: boolean = false
+  @property({ type: Boolean, attribute: 'hide-inspector' }) hideInspector: boolean = false
+  @property({ type: Boolean, attribute: 'hide-shape' }) hideShape: boolean = false
+  @property({ type: Boolean, attribute: 'hide-style' }) hideStyle: boolean = false
+  @property({ type: Boolean, attribute: 'hide-specific' }) hideSpecific: boolean = false
+
   @query('process-edit-toolbar') private editToolbar!: EditToolbar
 
   private group: string = ''
@@ -288,6 +295,12 @@ export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
           .collapsed=${this.hideProperty}
           .fonts=${this.fonts}
           .propertyEditor=${this.propertyEditor}
+          ?hide-data-binding=${this.hideDataBinding}
+          ?hide-effect=${this.hideEffect}
+          ?hide-inspector=${this.hideInspector}
+          ?hide-shape=${this.hideShape}
+          ?hide-style=${this.hideStyle}
+          ?hide-specific=${this.hideSpecific}
         >
         </process-property-sidebar>
       </div>