@operato/process 2.0.0-alpha.13 → 2.0.0-alpha.131

package/src/selector/ox-process-creation-card.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './process-creation-popup'
 
 import { css, html, LitElement } from 'lit'
@@ -30,7 +30,8 @@ export class ProcessCreationCard extends localize(i18next)(LitElement) {
           text-transform: capitalize;
         }
 
-        mwc-icon {
+        md-icon {
+          --md-icon-size: 42px;
           display: block;
           font-size: 3.5em;
           color: var(--card-list-create-icon-color);
@@ -46,9 +47,7 @@ export class ProcessCreationCard extends localize(i18next)(LitElement) {
   private popup: any
 
   render() {
-    return html`<div @click=${(e: Event) => this.onClick()}>
-      <mwc-icon>add_circle_outline</mwc-icon>create process
-    </div> `
+    return html`<div @click=${(e: Event) => this.onClick()}><md-icon>add_circle_outline</md-icon>create process</div> `
   }
 
   onClick() {

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/mwc-button'
+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,17 +108,15 @@ export class ProcessCreationPopup extends localize(i18next)(LitElement) {
         </div>
       </div>
 
-      <mwc-button
-        raised
-        label=${String(i18next.t('button.create'))}
-        @click=${(e: MouseEvent) => this.onClickSubmit()}
-      ></mwc-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)
   }
 

package/src/selector/process-thumbnail-card.ts

@@ -51,7 +51,7 @@ export class ProcessThumbnailCard extends localize(i18next)(LitElement) {
           text-transform: capitalize;
         }
 
-        [front] mwc-icon {
+        [front] md-icon {
           margin-top: 15%;
           display: block;
           font-size: 3.5em;
@@ -110,7 +110,7 @@ export class ProcessThumbnailCard extends localize(i18next)(LitElement) {
     var groups = this.groups || []
 
     return html`
-      <div @click=${(e: Event) => this.onClickFlip(e)} front><mwc-icon>add_circle_outline</mwc-icon>create process</div>
+      <div @click=${(e: Event) => this.onClickFlip(e)} front><md-icon>add_circle_outline</md-icon>create process</div>
 
       <div @click=${(e: Event) => this.onClickFlip(e)} back>
         <form @submit=${(e: Event) => this.onClickSubmit(e)}>

package/stories/index.stories.ts

@@ -1,3 +1,5 @@
+// import '@webcomponents/scoped-custom-element-registry' // later only for @open-wc/scoped-elements@3
+
 import '../index.js.js'
 
 import { TemplateResult, html } from 'lit'