@things-factory/integration-ui 7.0.1-alpha.97 → 7.0.1-beta.0

package/client/analysis/graph-viewer-style.ts

@@ -32,7 +32,7 @@ export const GraphViewerStyles = css`
   }
 
   .graph-info a.property {
-    background-color: #fff;
+    background-color: var(--md-sys-color-surface);
     border-color: #ccc;
     color: #333;
   }

package/client/editors/entity-selector.ts

@@ -21,7 +21,7 @@ export class EntitySelector extends LitElement {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
@@ -65,7 +65,12 @@ export class EntitySelector extends LitElement {
         .fields="${this.searchFields}"
       ></search-form>
 
-      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.config} .data=${this.data} .fetchHandler="${this.fetchHandler.bind(this)}"></ox-grist>
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.config}
+        .data=${this.data}
+        .fetchHandler="${this.fetchHandler.bind(this)}"
+      ></ox-grist>
 
       <div class="button-container">
         <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
@@ -160,9 +165,21 @@ export class EntitySelector extends LitElement {
         return {
           label: selectField.header || i18next.t(`field.${selectField.name}`),
           name: selectField.name,
-          type: fieldType === 'string' ? 'text' : numberTypes.indexOf(fieldType) >= 0 ? 'number' : fieldType === 'boolean' ? 'checkbox' : fieldType,
+          type:
+            fieldType === 'string'
+              ? 'text'
+              : numberTypes.indexOf(fieldType) >= 0
+                ? 'number'
+                : fieldType === 'boolean'
+                  ? 'checkbox'
+                  : fieldType,
           queryName: selectField.queryName,
-          props: fieldType === 'string' ? { searchOper: 'i_like' } : fieldType === 'object' ? { searchOper: 'in' } : { searchOper: 'eq' },
+          props:
+            fieldType === 'string'
+              ? { searchOper: 'i_like' }
+              : fieldType === 'object'
+                ? { searchOper: 'in' }
+                : { searchOper: 'eq' },
           attrs: fieldType === 'boolean' ? ['indeterminated'] : []
         }
       })

package/client/editors/things-editor-oracle-procedure.ts

@@ -106,7 +106,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
 
       input:focus {
         outline: none;
-        border-bottom: 1px solid var(--primary-color);
+        border-bottom: 1px solid var(--md-sys-color-primary);
       }
 
       button.hidden {
@@ -286,7 +286,13 @@ export class ThingsEditorProcedureParameters extends OxFormField {
       accessor: accessor && String(accessor).trim()
     } as ProcedureParameterType
 
-    if (dir != 'In' && (type == 'String' || type == 'Buffer') && maxSize !== null && maxSize !== undefined && !isNaN(maxSize)) {
+    if (
+      dir != 'In' &&
+      (type == 'String' || type == 'Buffer') &&
+      maxSize !== null &&
+      maxSize !== undefined &&
+      !isNaN(maxSize)
+    ) {
       entry.maxSize = maxSize
     }
 
@@ -316,7 +322,9 @@ export class ThingsEditorProcedureParameters extends OxFormField {
       const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value
       const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber
 
-      const inputs = record.querySelectorAll('[data-type]:not([style*="display: none"])') as NodeListOf<HTMLInputElement>
+      const inputs = record.querySelectorAll(
+        '[data-type]:not([style*="display: none"])'
+      ) as NodeListOf<HTMLInputElement>
 
       if (!inputs || inputs.length == 0) {
         continue
@@ -346,7 +354,9 @@ export class ThingsEditorProcedureParameters extends OxFormField {
   _add() {
     this._build(true)
 
-    const inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])') as NodeListOf<HTMLInputElement & { value: any }>
+    const inputs = this.renderRoot.querySelectorAll(
+      '[data-record-new] input:not([style*="display: none"])'
+    ) as NodeListOf<HTMLInputElement & { value: any }>
 
     for (var i = 0; i < inputs.length; i++) {
       let input = inputs[i]

package/client/editors/things-editor-tag-scenarios.ts

@@ -79,7 +79,7 @@ export default class ThingsEditorTagScenarios extends LitElement {
       input:not([type='checkbox']) {
         border: 1px solid rgba(0, 0, 0, 0.2);
         border-radius: 4px;
-        background-color: white;
+        background-color: var(--md-sys-color-surface);
       }
     `
   ]

package/client/pages/connection-importer.ts

@@ -20,7 +20,7 @@ export class ConnectionImporter extends LitElement {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
@@ -63,7 +63,11 @@ export class ConnectionImporter extends LitElement {
 
   render() {
     return html`
-      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.columns} .data=${{ records: this.connections }}></ox-grist>
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.columns}
+        .data=${{ records: this.connections }}
+      ></ox-grist>
 
       <div class="button-container">
         <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>

package/client/pages/connection.ts

@@ -38,7 +38,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
         flex-direction: row;
         justify-content: space-between;
 
-        background-color: white;
+        background-color: var(--md-sys-color-surface);
       }
 
       #filters > * {
@@ -93,7 +93,14 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
   }
 
   render() {
-    return html` <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}> </ox-grist> `
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      >
+      </ox-grist>
+    `
   }
 
   async pageInitialized() {

package/client/pages/integration-analysis.ts

@@ -22,7 +22,7 @@ export class IntegrationAnalysis extends localize(i18next)(PageView) {
         flex-direction: column;
 
         overflow: hidden;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: 0;
       }
 

package/client/pages/integration-monitor.ts

@@ -43,7 +43,7 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
         flex-direction: column;
 
         overflow: hidden;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
       }
 
@@ -108,9 +108,18 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
 
   render() {
     return html`
-      <integration-summary .pendings=${this.pendings} .scenarios=${this.scenarios} .connections=${this.connections}></integration-summary>
+      <integration-summary
+        .pendings=${this.pendings}
+        .scenarios=${this.scenarios}
+        .connections=${this.connections}
+      ></integration-summary>
       <content>
-        <scenarios-monitor .scenarios=${this.scenarios} .pendings=${this.pendings} .colorIndex=${this.colorIndex || {}} .running=${!!this.active}></scenarios-monitor>
+        <scenarios-monitor
+          .scenarios=${this.scenarios}
+          .pendings=${this.pendings}
+          .colorIndex=${this.colorIndex || {}}
+          .running=${!!this.active}
+        ></scenarios-monitor>
         <connections-monitor .connections=${this.connections}></connections-monitor>
       </content>
     `

package/client/pages/scenario-detail.ts

@@ -23,7 +23,7 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
@@ -40,9 +40,15 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
 
   render() {
     return html`
-      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      ></ox-grist>
       <div class="button-container">
-        <button danger @click=${this._deleteSteps.bind(this)}><md-icon>delete</md-icon>${i18next.t('button.delete')}</button>
+        <button danger @click=${this._deleteSteps.bind(this)}>
+          <md-icon>delete</md-icon>${i18next.t('button.delete')}
+        </button>
         <button @click=${this._updateSteps.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `

package/client/pages/scenario-importer.ts

@@ -20,7 +20,7 @@ export class ScenarioImporter extends LitElement {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
@@ -69,7 +69,11 @@ export class ScenarioImporter extends LitElement {
 
   render() {
     return html`
-      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.columns} .data=${{ records: this.scenarios }}></ox-grist>
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.columns}
+        .data=${{ records: this.scenarios }}
+      ></ox-grist>
 
       <div class="button-container">
         <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>

package/client/pages/scenario.ts

@@ -47,7 +47,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
           flex-direction: row;
           justify-content: space-between;
 
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
 
         #filters > * {
@@ -115,7 +115,14 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
   }
 
   render() {
-    return html` <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}> </ox-grist> `
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      >
+      </ox-grist>
+    `
   }
 
   async pageInitialized(lifecycle) {
@@ -174,12 +181,21 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
           handlers: {
             click: (columns, data, column, record, rowIndex) => {
               if (!record.id) return
-              openPopup(html` <scenario-detail .scenario=${record} .taskTypes=${this.taskTypes} @requestRefresh="${() => this.grist.fetch()}"></scenario-detail> `, {
-                backdrop: true,
-                help: 'integration/ui/scenario-detail',
-                size: 'large',
-                title: i18next.t('title.scenario-detail')
-              })
+              openPopup(
+                html`
+                  <scenario-detail
+                    .scenario=${record}
+                    .taskTypes=${this.taskTypes}
+                    @requestRefresh="${() => this.grist.fetch()}"
+                  ></scenario-detail>
+                `,
+                {
+                  backdrop: true,
+                  help: 'integration/ui/scenario-detail',
+                  size: 'large',
+                  title: i18next.t('title.scenario-detail')
+                }
+              )
             }
           }
         },

package/client/viewparts/connections-monitor.ts

@@ -17,7 +17,7 @@ export class ConnectionsMonitor extends LitElement {
         flex-direction: column;
 
         overflow: hidden;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         border-radius: var(--border-radius);
         border: var(--border-dark-color);
       }
@@ -26,7 +26,7 @@ export class ConnectionsMonitor extends LitElement {
         padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
         border-bottom: var(--border-dark-color);
         font: var(--subtitle-font);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         text-transform: capitalize;
       }
 
@@ -43,7 +43,7 @@ export class ConnectionsMonitor extends LitElement {
         flex-direction: column;
         padding: var(--padding-default);
         border-bottom: var(--border-dark-color);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
       [card] * {
         overflow: hidden;
@@ -51,7 +51,7 @@ export class ConnectionsMonitor extends LitElement {
         white-space: nowrap;
       }
       [card] strong {
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
       [card] span {
         font-size: var(--fontsize-default);
@@ -64,7 +64,7 @@ export class ConnectionsMonitor extends LitElement {
         width: 10px;
         height: 10px;
         border-radius: 50%;
-        background-color: var(--primary-color);
+        background-color: var(--md-sys-color-primary);
         margin-left: var(--margin-narrow);
       }
 
@@ -116,7 +116,9 @@ export class ConnectionsMonitor extends LitElement {
         <span>${description}</span>
         <span>Type : ${type}</span>
         <div buttons>
-          <md-icon @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))} title=${connected ? 'disconnect' : 'connect'}
+          <md-icon
+            @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))}
+            title=${connected ? 'disconnect' : 'connect'}
             >${connected ? 'link_off' : 'link'}</md-icon
           >
         </div>

package/client/viewparts/scenario-instance-log-view.ts

@@ -19,7 +19,7 @@ export class ScenarioInstanceLogView extends connect(store)(LitElement) {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         padding: var(--padding-wide);
       }
 
@@ -82,7 +82,11 @@ export class ScenarioInstanceLogView extends connect(store)(LitElement) {
       <div options></div>
       <div content>
         ${logs.map(
-          ({ timestamp, message, level }) => html` <div class="${level}"><span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}</div> `
+          ({ timestamp, message, level }) => html`
+            <div class="${level}">
+              <span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}
+            </div>
+          `
         )}
       </div>
       ${this.startable

package/client/viewparts/scenario-instance-monitor.ts

@@ -25,7 +25,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
         overflow: hidden;
         position: relative;
         padding: var(--padding-narrow);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
 
       [running] {
@@ -48,7 +48,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
 
         border: var(--border-dark-color);
         border-radius: 10px;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
       }
       [progress-wrap] {
         display: flex;
@@ -57,7 +57,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
       }
 
       [running] [progress] {
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface-variant);
       }
 
       [steps] {
@@ -80,7 +80,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
       }
 
       [buttons] md-icon {
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
 
       @keyframes width {
@@ -115,7 +115,9 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
       <div buttons>
         <span><strong>${rounds}</strong> round</span>
         <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>
-        <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}>${running ? 'pause' : 'play_arrow'}</md-icon>
+        <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}
+          >${running ? 'pause' : 'play_arrow'}</md-icon
+        >
       </div>
     `
   }
@@ -163,9 +165,14 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
 
   async showInstanceDetail() {
     const { instanceName, scenarioName } = this.instance
-    openPopup(html` <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view> `, {
-      size: 'large',
-      title: `${i18next.t('title.scenario-instance')}`
-    })
+    openPopup(
+      html`
+        <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view>
+      `,
+      {
+        size: 'large',
+        title: `${i18next.t('title.scenario-instance')}`
+      }
+    )
   }
 }

package/client/viewparts/scenario-instance-view.ts

@@ -17,7 +17,7 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
       }
 
       [diagram] {
@@ -42,18 +42,18 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
         display: inline;
         padding: var(--padding-wide) var(--padding-wide) var(--padding-narrow) var(--padding-wide);
         border-bottom: 3px solid transparent;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         text-transform: capitalize;
       }
 
       [tab] span[active] {
-        border-color: var(--primary-color);
+        border-color: var(--md-sys-color-primary);
         font-weight: bold;
       }
 
       [detail] {
         flex: 1;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         border-top: var(--border-dark-color);
         overflow: hidden;
         padding: var(--padding-wide);
@@ -63,7 +63,7 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
         display: none;
         width: 100%;
         height: 100%;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
 
       [detail] > [active] {

package/client/viewparts/scenario-monitor.ts

@@ -26,7 +26,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         flex-direction: row;
 
         border: var(--border-dark-color);
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         box-shadow: var(--box-shadow);
         border-radius: var(--border-radius);
         position: relative;
@@ -38,7 +38,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
         padding: var(--padding-default);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         font-size: var(--fontsize-small);
         width: 100%;
         box-sizing: border-box;
@@ -101,7 +101,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
       [buttons] md-icon {
         --md-icon-size: 22px;
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
 
       [buttons][detail] {
@@ -234,7 +234,13 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
   async popupLogView(scenario) {
     const popup = openPopup(
-      html` <scenario-instance-log-view .scenarioName=${scenario.name} @start=${() => this.startScenario(scenario)} startable></scenario-instance-log-view> `,
+      html`
+        <scenario-instance-log-view
+          .scenarioName=${scenario.name}
+          @start=${() => this.startScenario(scenario)}
+          startable
+        ></scenario-instance-log-view>
+      `,
       {
         size: 'large',
         title: `${i18next.t('title.scenario-log')} (${scenario.name})`

package/client/viewparts/scenarios-monitor.ts

@@ -27,12 +27,12 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
         padding: var(--padding-narrow) 0;
         flex-direction: row;
         align-items: center;
-        border-bottom: 2px solid var(--secondary-color);
+        border-bottom: 2px solid var(--md-sys-color-secondary);
       }
       [info] h2 {
         margin: 0;
         font: var(--subtitle-font);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         text-transform: capitalize;
       }
 
@@ -55,7 +55,7 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
         cursor: pointer;
       }
       [info] md-icon[active] {
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
 
       [content] {
@@ -131,7 +131,11 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
       </div>
 
       <div content>
-        <pending-q-monitor .pendings=${this.pendings} .colorIndex=${this.colorIndex || {}} .running=${this.running}></pending-q-monitor>
+        <pending-q-monitor
+          .pendings=${this.pendings}
+          .colorIndex=${this.colorIndex || {}}
+          .running=${this.running}
+        ></pending-q-monitor>
 
         <div scenarios mode=${mode}>
           <div flowbox>

package/dist-client/analysis/graph-viewer-style.js

@@ -31,7 +31,7 @@ export const GraphViewerStyles = css `
   }
 
   .graph-info a.property {
-    background-color: #fff;
+    background-color: var(--md-sys-color-surface);
     border-color: #ccc;
     color: #333;
   }

package/dist-client/analysis/graph-viewer-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-viewer-style.js","sourceRoot":"","sources":["../../client/analysis/graph-viewer-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const GraphViewerStyles = css`\n  * {\n    margin: 0;\n    padding: 0;\n  }\n\n  .graph-viewer {\n    border: 1px solid #ddd;\n    border-radius: 5px;\n  }\n\n  .graph-info {\n    font-size: 16px;\n    padding: 10px;\n    position: absolute;\n  }\n\n  .graph-info a {\n    border: 1px solid;\n    display: inline-block;\n    font-size: 14px;\n    line-height: 1.428571429;\n    margin-left: 5px;\n    margin-top: 5px;\n    padding: 6px 12px;\n  }\n\n  .graph-info a.class {\n    color: #fff;\n  }\n\n  .graph-info a.property {\n    background-color: #fff;\n    border-color: #ccc;\n    color: #333;\n  }\n\n  .graph-info a.btn {\n    margin-left: 5px;\n    margin-top: 5px;\n    opacity: 1;\n  }\n\n  .graph-info a.info {\n    background-color: #a5abb6;\n    border: 1px solid #9aa1ac;\n    color: #fff;\n  }\n\n  .node.node-highlighted .ring {\n    filter: alpha(opacity=50);\n    opacity: 0.5;\n    stroke: #888;\n    stroke-width: 12px;\n  }\n\n  .node .outline {\n    cursor: pointer;\n    fill: #a5abb6;\n    pointer-events: all;\n    stroke: #9aa1ac;\n    stroke-width: 2px;\n  }\n\n  .node .ring {\n    fill: none;\n    filter: alpha(opacity=0);\n    opacity: 0;\n    stroke: #6ac6ff;\n    stroke-width: 8px;\n  }\n\n  .node .text.icon {\n    font-family: FontAwesome;\n  }\n\n  .node.selected .ring,\n  .node:hover .ring {\n    filter: alpha(opacity=30);\n    opacity: 0.3;\n  }\n\n  .relationship {\n    cursor: default;\n  }\n\n  .relationship line {\n    stroke: #aaa;\n  }\n\n  .relationship .outline {\n    cursor: default;\n  }\n\n  .relationship .overlay {\n    cursor: default;\n    fill: #6ac6ff;\n    filter: alpha(opacity=0);\n    opacity: 0;\n  }\n\n  .relationship text {\n    cursor: default;\n  }\n\n  .relationship.selected .overlay,\n  .relationship:hover .overlay {\n    filter: alpha(opacity=30);\n    opacity: 0.3;\n  }\n\n  svg {\n    cursor: move;\n  }\n`\n"]}
+{"version":3,"file":"graph-viewer-style.js","sourceRoot":"","sources":["../../client/analysis/graph-viewer-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const GraphViewerStyles = css`\n  * {\n    margin: 0;\n    padding: 0;\n  }\n\n  .graph-viewer {\n    border: 1px solid #ddd;\n    border-radius: 5px;\n  }\n\n  .graph-info {\n    font-size: 16px;\n    padding: 10px;\n    position: absolute;\n  }\n\n  .graph-info a {\n    border: 1px solid;\n    display: inline-block;\n    font-size: 14px;\n    line-height: 1.428571429;\n    margin-left: 5px;\n    margin-top: 5px;\n    padding: 6px 12px;\n  }\n\n  .graph-info a.class {\n    color: #fff;\n  }\n\n  .graph-info a.property {\n    background-color: var(--md-sys-color-surface);\n    border-color: #ccc;\n    color: #333;\n  }\n\n  .graph-info a.btn {\n    margin-left: 5px;\n    margin-top: 5px;\n    opacity: 1;\n  }\n\n  .graph-info a.info {\n    background-color: #a5abb6;\n    border: 1px solid #9aa1ac;\n    color: #fff;\n  }\n\n  .node.node-highlighted .ring {\n    filter: alpha(opacity=50);\n    opacity: 0.5;\n    stroke: #888;\n    stroke-width: 12px;\n  }\n\n  .node .outline {\n    cursor: pointer;\n    fill: #a5abb6;\n    pointer-events: all;\n    stroke: #9aa1ac;\n    stroke-width: 2px;\n  }\n\n  .node .ring {\n    fill: none;\n    filter: alpha(opacity=0);\n    opacity: 0;\n    stroke: #6ac6ff;\n    stroke-width: 8px;\n  }\n\n  .node .text.icon {\n    font-family: FontAwesome;\n  }\n\n  .node.selected .ring,\n  .node:hover .ring {\n    filter: alpha(opacity=30);\n    opacity: 0.3;\n  }\n\n  .relationship {\n    cursor: default;\n  }\n\n  .relationship line {\n    stroke: #aaa;\n  }\n\n  .relationship .outline {\n    cursor: default;\n  }\n\n  .relationship .overlay {\n    cursor: default;\n    fill: #6ac6ff;\n    filter: alpha(opacity=0);\n    opacity: 0;\n  }\n\n  .relationship text {\n    cursor: default;\n  }\n\n  .relationship.selected .overlay,\n  .relationship:hover .overlay {\n    filter: alpha(opacity=30);\n    opacity: 0.3;\n  }\n\n  svg {\n    cursor: move;\n  }\n`\n"]}

package/dist-client/editors/entity-selector.js

@@ -23,7 +23,12 @@ let EntitySelector = class EntitySelector extends LitElement {
         .fields="${this.searchFields}"
       ></search-form>
 
-      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.config} .data=${this.data} .fetchHandler="${this.fetchHandler.bind(this)}"></ox-grist>
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.config}
+        .data=${this.data}
+        .fetchHandler="${this.fetchHandler.bind(this)}"
+      ></ox-grist>
 
       <div class="button-container">
         <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
@@ -108,9 +113,19 @@ let EntitySelector = class EntitySelector extends LitElement {
                 return {
                     label: selectField.header || i18next.t(`field.${selectField.name}`),
                     name: selectField.name,
-                    type: fieldType === 'string' ? 'text' : numberTypes.indexOf(fieldType) >= 0 ? 'number' : fieldType === 'boolean' ? 'checkbox' : fieldType,
+                    type: fieldType === 'string'
+                        ? 'text'
+                        : numberTypes.indexOf(fieldType) >= 0
+                            ? 'number'
+                            : fieldType === 'boolean'
+                                ? 'checkbox'
+                                : fieldType,
                     queryName: selectField.queryName,
-                    props: fieldType === 'string' ? { searchOper: 'i_like' } : fieldType === 'object' ? { searchOper: 'in' } : { searchOper: 'eq' },
+                    props: fieldType === 'string'
+                        ? { searchOper: 'i_like' }
+                        : fieldType === 'object'
+                            ? { searchOper: 'in' }
+                            : { searchOper: 'eq' },
                     attrs: fieldType === 'boolean' ? ['indeterminated'] : []
                 };
             });
@@ -217,7 +232,7 @@ EntitySelector.styles = [
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {