@things-factory/integration-ui 7.0.1-alpha.9 → 7.0.1-alpha.90

package/client/bootstrap.ts

@@ -1,14 +1,9 @@
-import '@material/mwc-icon'
 import './editors/entity-editor'
 import './editors/property-editor'
 
 import { OxGristEditorJson } from '@operato/app/grist-editor/ox-grist-editor-json.js'
 import { OxGristRendererCrontab } from '@operato/app/grist-editor/ox-grist-renderer-crontab.js'
-import {
-  registerEditor as registerGristEditor,
-  registerRenderer as registerGristRenderer,
-  OxGristRendererJson5
-} from '@operato/data-grist'
+import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer, OxGristRendererJson5 } from '@operato/data-grist'
 import { OxGristEditorCrontab } from '@operato/grist-editor/ox-grist-editor-crontab.js'
 import { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'
 import { OxGristEditorParameters } from '@operato/grist-editor/ox-grist-editor-parameters.js'

package/client/editors/entity-selector.ts

@@ -8,11 +8,13 @@ import { DataGrist } from '@operato/data-grist/ox-grist.js'
 import { buildArgs, client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { MultiColumnFormStyles } from '@things-factory/form-ui'
+import { MultiColumnFormStyles } from '@operato/form'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('entity-selector')
 export class EntitySelector extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     MultiColumnFormStyles,
     css`
       :host {
@@ -26,11 +28,6 @@ export class EntitySelector extends LitElement {
         flex: 1;
       }
 
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
-
       form {
         position: relative;
       }
@@ -68,16 +65,11 @@ 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">
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>check</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }
@@ -168,21 +160,9 @@ 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'] : []
         }
       })
@@ -273,11 +253,7 @@ export class EntitySelector extends LitElement {
       return `items {
         ${this.select.map(selectField => {
           return selectField.type === 'object'
-            ? `${selectField.name} { ${
-                selectField.subFields && selectField.subFields.length > 0
-                  ? selectField.subFields.join(' ')
-                  : `id name description`
-              } }`
+            ? `${selectField.name} { ${selectField.subFields && selectField.subFields.length > 0 ? selectField.subFields.join(' ') : `id name description`} }`
             : `${selectField.name}`
         })}
       }

package/client/editors/things-editor-entity-selector.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './entity-selector'
 
 import { css, html, LitElement } from 'lit'
@@ -26,7 +26,7 @@ export default class ThingsEditorEntitySelector extends LitElement {
         height: 100%;
       }
 
-      mwc-icon {
+      md-icon {
         position: absolute;
         top: 0;
         right: 0;
@@ -50,7 +50,7 @@ export default class ThingsEditorEntitySelector extends LitElement {
     return html`
       <input id="text" type="text" .value=${this.value || ''} @change=${e => this._onInputChanged(e)} />
 
-      <mwc-icon @click=${e => this.openSelector()}>dashboard</mwc-icon>
+      <md-icon @click=${e => this.openSelector()}>dashboard</md-icon>
     `
   }
 

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

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import '@operato/i18n/ox-i18n.js'
 import { css, html } from 'lit'
@@ -82,8 +82,8 @@ export class ThingsEditorProcedureParameters extends OxFormField {
         margin-left: -5px;
       }
 
-      button mwc-icon {
-        font-size: var(--fontsize-default);
+      button md-icon {
+        --md-icon-size: var(--fontsize-default);
       }
 
       button:focus,
@@ -194,13 +194,13 @@ export class ThingsEditorProcedureParameters extends OxFormField {
             <input type="number" data-max-size placeholder="max-size" .value=${String(item.maxSize)} />
 
             <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
             <button class="record-action" @click=${(e: MouseEvent) => this._up(e)} tabindex="-1">
-              <mwc-icon>arrow_upward</mwc-icon>
+              <md-icon>arrow_upward</md-icon>
             </button>
             <button class="record-action" @click=${(e: MouseEvent) => this._down(e)} tabindex="-1">
-              <mwc-icon>arrow_downward</mwc-icon>
+              <md-icon>arrow_downward</md-icon>
             </button>
           </div>
         `
@@ -231,10 +231,10 @@ export class ThingsEditorProcedureParameters extends OxFormField {
         <input type="number" data-max-size placeholder="max-size" value="" />
 
         <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-          <mwc-icon>add</mwc-icon>
+          <md-icon>add</md-icon>
         </button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
+        <button class="hidden"><md-icon>add</md-icon></button>
+        <button class="hidden"><md-icon>add</md-icon></button>
       </div>
 
       <datalist id="step-list">${steps.map(id => html` <option value=${id}></option> `)}</datalist>

package/client/grist/connection-selector.ts

@@ -1,5 +1,3 @@
-import '@material/mwc-icon'
-
 import gql from 'graphql-tag'
 import { customElement } from 'lit/decorators.js'
 

package/client/grist/connector-selector.ts

@@ -1,5 +1,3 @@
-import '@material/mwc-icon'
-
 import gql from 'graphql-tag'
 import { customElement } from 'lit/decorators.js'
 

package/client/grist/dynamic-selector.ts

@@ -1,5 +1,3 @@
-import '@material/mwc-icon'
-
 import { OxGristEditor } from '@operato/data-grist'
 import { html } from 'lit'
 
@@ -35,9 +33,7 @@ export class DynamicSelector extends OxGristEditor {
 
     return html`
       <select>
-        ${options.map(
-          option => html` <option ?selected=${option.name == this.value} value=${option.name}>${option.name}</option> `
-        )}
+        ${options.map(option => html` <option ?selected=${option.name == this.value} value=${option.name}>${option.name}</option> `)}
       </select>
     `
   }

package/client/pages/connection-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,11 +8,12 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { CommonGristStyles } from '@operato/styles'
+import { ButtonContainerStyles, CommonGristStyles } from '@operato/styles'
 
 @customElement('connection-importer')
 export class ConnectionImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     CommonGristStyles,
     css`
       :host {
@@ -20,17 +22,10 @@ export class ConnectionImporter extends LitElement {
 
         background-color: #fff;
       }
+
       ox-grist {
         flex: 1;
       }
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -68,14 +63,10 @@ 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">
-        <mwc-button raised @click=${this.save.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/connection.ts

@@ -214,7 +214,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           width: 100
         },
         {
-          type: 'object',
+          type: 'resource-object',
           name: 'edge',
           header: i18next.t('field.edge-server'),
           record: {
@@ -227,7 +227,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           width: 120
         },
         {
-          type: 'object',
+          type: 'resource-object',
           name: 'updater',
           header: i18next.t('field.updater'),
           record: {
@@ -321,6 +321,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
                 label
                 placeholder
                 property
+                styles
               }
             }
           }

package/client/pages/scenario-detail.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist/ox-grist.js'
 
 import gql from 'graphql-tag'
@@ -9,12 +10,14 @@ import { client } from '@operato/graphql'
 import { HelpDecoratedRenderer } from '@operato/help/help-decorated-renderer.js'
 import { i18next, localize } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 const SelectFields = ['name', 'description', 'sequence', 'task', 'connection', 'params', 'result', 'skip', 'log']
 
 @customElement('scenario-detail')
 class ScenarioDetail extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -26,22 +29,6 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      form {
-        position: relative;
-      }
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -53,14 +40,10 @@ 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">
-        <mwc-button raised danger @click=${this._deleteSteps.bind(this)}>${i18next.t('button.delete')}</mwc-button>
-        <mwc-button raised @click=${this._updateSteps.bind(this)}>${i18next.t('button.save')}</mwc-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>
     `
   }
@@ -253,6 +236,7 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
               label
               placeholder
               property
+              styles
             }
           }
         }

package/client/pages/scenario-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,11 +8,12 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { CommonGristStyles } from '@operato/styles'
+import { ButtonContainerStyles, CommonGristStyles } from '@operato/styles'
 
 @customElement('scenario-importer')
 export class ScenarioImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     CommonGristStyles,
     css`
       :host {
@@ -20,17 +22,10 @@ export class ScenarioImporter extends LitElement {
 
         background-color: #fff;
       }
+
       ox-grist {
         flex: 1;
       }
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -74,14 +69,10 @@ 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">
-        <mwc-button raised @click=${this.save.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/scenario.ts

@@ -5,7 +5,7 @@ import './scenario-importer'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
-import moment from 'moment-timezone'
+import moment from '@operato/moment-timezone-es'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { DataGrist } from '@operato/data-grist/ox-grist.js'
@@ -115,14 +115,7 @@ 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) {
@@ -181,21 +174,12 @@ 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')
+              })
             }
           }
         },
@@ -396,6 +380,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
                 label
                 placeholder
                 property
+                styles
               }
             }
           }

package/client/viewparts/connections-monitor.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon-button'
+import '@material/web/icon/icon.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -67,21 +67,24 @@ export class ConnectionsMonitor extends LitElement {
         background-color: var(--primary-color);
         margin-left: var(--margin-narrow);
       }
+
       [buttons] {
-        --mdc-icon-button-size: 20px;
-        --mdc-icon-size: 20px;
+        --md-icon-size: 20px;
         border-top: 1px dashed rgba(0, 0, 0, 0.1);
         margin: var(--margin-narrow) 0 0 0;
         padding: var(--padding-narrow) 0 0 0;
         text-align: right;
       }
-      [buttons] mwc-icon-button {
+
+      [buttons] md-icon {
         color: rgba(var(--secondary-color-rgb), 0.8);
       }
+
       @media screen and (max-width: 480px) {
         h2 {
           padding: var(--padding-narrow);
         }
+
         [card] span {
           display: none;
         }
@@ -113,11 +116,9 @@ export class ConnectionsMonitor extends LitElement {
         <span>${description}</span>
         <span>Type : ${type}</span>
         <div buttons>
-          <mwc-icon-button
-            @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))}
-            .icon=${connected ? 'link_off' : 'link'}
-            label=${connected ? 'disconnect' : 'connect'}
-          ></mwc-icon-button>
+          <md-icon @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))} title=${connected ? 'disconnect' : 'connect'}
+            >${connected ? 'link_off' : 'link'}</md-icon
+          >
         </div>
       </div>
     `

package/client/viewparts/monitoring-summary.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import { css, html, LitElement } from 'lit'
@@ -56,8 +57,8 @@ export class IntegrationMonitoringSummary extends localize(i18next)(LitElement)
         [card]:nth-child(4) {
           border-right: none;
         }
-        mwc-icon {
-          font-size: var(--fontsize-large);
+        md-icon {
+          --md-icon-size: var(--fontsize-large);
         }
         span {
           line-height: 1;
@@ -124,7 +125,7 @@ export class IntegrationMonitoringSummary extends localize(i18next)(LitElement)
     return html`
       <div card>
         <span>${title}</span>
-        <mwc-icon>${icon}</mwc-icon>
+        <md-icon>${icon}</md-icon>
         <strong> ${value}</strong>
       </div>
     `

package/client/viewparts/pending-q-monitor.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { asyncReplace } from 'lit/directives/async-replace.js'
@@ -23,9 +25,9 @@ export class PendingQMonitor extends LitElement {
         display: flex;
         align-items: center;
       }
-      [tags] mwc-icon {
+      [tags] md-icon {
+        --md-icon-size: var(--fontsize-large);
         margin: 0 var(--margin-narrow) 0 0;
-        font-size: var(--fontsize-large);
       }
 
       select {
@@ -123,7 +125,7 @@ export class PendingQMonitor extends LitElement {
 
     return html`
       <div tags>
-        <mwc-icon>bookmark_border</mwc-icon>
+        <md-icon>bookmark_border</md-icon>
         <select @change=${e => (this.tag = e.target.value)} .value=${tag}>
           <option value="(*)">*</option>
           ${Object.keys(this.tags || {})

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

@@ -1,4 +1,5 @@
-import '@material/mwc-fab'
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
 
 import gql from 'graphql-tag'
 
@@ -84,7 +85,11 @@ export class ScenarioInstanceLogView extends connect(store)(LitElement) {
           ({ timestamp, message, level }) => html` <div class="${level}"><span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}</div> `
         )}
       </div>
-      ${this.startable ? html`<mwc-fab id="start" icon="play_arrow" title="start" @click=${() => this.dispatchEvent(new CustomEvent('start'))}> </mwc-fab>` : nothing}
+      ${this.startable
+        ? html`<md-fab id="start" title="start" @click=${() => this.dispatchEvent(new CustomEvent('start'))}>
+            <md-icon slot="icon">play_arrow</md-icon>
+          </md-fab>`
+        : nothing}
     `
   }
 

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

@@ -1,5 +1,5 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
-import '@material/mwc-icon'
 import './scenario-instance-view'
 
 import gql from 'graphql-tag'
@@ -59,6 +59,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
       [running] [progress] {
         background-color: var(--theme-white-color);
       }
+
       [steps] {
         padding: 0 0 0 var(--padding-narrow);
       }
@@ -69,14 +70,16 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
         border-radius: 5px;
         animation: width 1s linear ease-out;
       }
+
       [buttons] {
-        --mdc-icon-button-size: 18px;
-        --mdc-icon-size: 18px;
+        --md-icon-size: 18px;
+
         border-top: var(--border-dark-color);
         padding: var(--padding-narrow) 0 0 0;
         text-align: right;
       }
-      [buttons] mwc-icon-button {
+
+      [buttons] md-icon {
         color: var(--primary-color);
       }
 
@@ -111,8 +114,8 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
       </div>
       <div buttons>
         <span><strong>${rounds}</strong> round</span>
-        <mwc-icon-button @click=${e => this.showInstanceDetail()} icon="wysiwyg"></mwc-icon-button>
-        <mwc-icon-button @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))} icon=${running ? 'pause' : 'play_arrow'}></mwc-icon-button>
+        <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>
       </div>
     `
   }