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

package/src/ox-board-player-style.ts

@@ -73,7 +73,7 @@ export const style = css`
     grid-row: 1 / span 3;
   }
 
-  #joystick mwc-icon {
+  #joystick md-icon {
     position: absolute;
     display: block;
     width: 20px;
@@ -82,17 +82,17 @@ export const style = css`
     line-height: 0.7;
   }
 
-  mwc-icon#up {
+  md-icon#up {
     left: 29px;
   }
 
-  mwc-icon#left {
+  md-icon#left {
     top: 32px;
     left: -2px;
   }
 
-  mwc-icon#play,
-  mwc-icon#pause {
+  md-icon#play,
+  md-icon#pause {
     left: 20px;
     top: 20px;
     width: 40px;
@@ -104,17 +104,17 @@ export const style = css`
     line-height: 0.9;
   }
 
-  mwc-icon#right {
+  md-icon#right {
     top: 31px;
     left: 60px;
   }
 
-  mwc-icon#down {
+  md-icon#down {
     left: 29px;
     top: 63px;
   }
 
-  mwc-icon#pause {
+  md-icon#pause {
     text-indent: -2px;
   }
 
@@ -139,7 +139,7 @@ export const style = css`
     grid-gap: 0 10px;
   }
 
-  #setting mwc-icon {
+  #setting md-icon {
     font-size: 22px;
     color: rgba(255, 174, 53, 0.8);
   }
@@ -183,7 +183,7 @@ export const style = css`
     justify-items: center;
   }
 
-  #etc mwc-icon {
+  #etc md-icon {
     font-size: 30px;
   }
 

package/src/ox-board-player.ts

@@ -1,5 +1,4 @@
-import '@material/mwc-fab'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './player/ox-board-wrapper'
 import './player/ox-board-player-carousel'
 
@@ -43,11 +42,10 @@ export class BoardPlayer extends LitElement {
           ? html`
               <ox-board-player-carousel axis="y" .rows=${this.rows} .columns=${this.columns} player>
                 ${this.boards.map(
-                  item =>
-                    html`
-                      <ox-board-wrapper page .board=${item} .data=${this.data} .provider=${this.provider}>
-                      </ox-board-wrapper>
-                    `
+                  item => html`
+                    <ox-board-wrapper page .board=${item} .data=${this.data} .provider=${this.provider}>
+                    </ox-board-wrapper>
+                  `
                 )}
               </ox-board-player-carousel>
             `
@@ -56,18 +54,18 @@ export class BoardPlayer extends LitElement {
 
       <div id="control" @mouseover=${() => this.onMouseoverControl()} hidden>
         <div id="joystick">
-          <mwc-icon id="up" @click=${() => this.moveUp()}>keyboard_arrow_up</mwc-icon>
-          <mwc-icon id="left" @click=${() => this.moveLeft()}>keyboard_arrow_left</mwc-icon>
-          <mwc-icon id="play" @click=${() => this.play()} ?hidden=${this.playing}>play_arrow</mwc-icon>
-          <mwc-icon id="pause" @click=${() => this.pause()} ?hidden=${!this.playing}>pause</mwc-icon>
-          <mwc-icon id="right" @click=${() => this.moveRight()}>keyboard_arrow_right</mwc-icon>
-          <mwc-icon id="down" @click=${() => this.moveDown()}>keyboard_arrow_down</mwc-icon>
+          <md-icon id="up" @click=${() => this.moveUp()}>keyboard_arrow_up</md-icon>
+          <md-icon id="left" @click=${() => this.moveLeft()}>keyboard_arrow_left</md-icon>
+          <md-icon id="play" @click=${() => this.play()} ?hidden=${this.playing}>play_arrow</md-icon>
+          <md-icon id="pause" @click=${() => this.pause()} ?hidden=${!this.playing}>pause</md-icon>
+          <md-icon id="right" @click=${() => this.moveRight()}>keyboard_arrow_right</md-icon>
+          <md-icon id="down" @click=${() => this.moveDown()}>keyboard_arrow_down</md-icon>
         </div>
 
         <div id="setting-container">
           <div id="setting">
             <label id="schedule-container">
-              <mwc-icon id="schedule">schedule</mwc-icon>
+              <md-icon id="schedule">schedule</md-icon>
               <input
                 .value=${String(this.playtime)}
                 @change=${(e: Event) => {
@@ -82,7 +80,7 @@ export class BoardPlayer extends LitElement {
               sec.
             </label>
             <div id="grid-setting-container">
-              <mwc-icon id="view_module">view_module</mwc-icon>
+              <md-icon id="view_module">view_module</md-icon>
               <select
                 .value=${String(this.rows)}
                 @change=${(e: Event) => {
@@ -114,13 +112,13 @@ export class BoardPlayer extends LitElement {
           </div>
 
           <div id="etc">
-            <mwc-icon id="fullscreen" @click=${() => this.onTapFullscreen()} ?hidden=${this._fullscreened}
-              >fullscreen</mwc-icon
+            <md-icon id="fullscreen" @click=${() => this.onTapFullscreen()} ?hidden=${this._fullscreened}
+              >fullscreen</md-icon
             >
-            <mwc-icon id="fullscreen-exit" @click=${() => this.onTapFullscreen()} ?hidden=${!this._fullscreened}
-              >fullscreen_exit</mwc-icon
+            <md-icon id="fullscreen-exit" @click=${() => this.onTapFullscreen()} ?hidden=${!this._fullscreened}
+              >fullscreen_exit</md-icon
             >
-            <mwc-icon id="close" @click=${() => this.onTapClose()}>close</mwc-icon>
+            <md-icon id="close" @click=${() => this.onTapClose()}>close</md-icon>
           </div>
         </div>
       </div>

package/src/ox-board-viewer.ts

@@ -1,5 +1,5 @@
-import '@material/mwc-fab'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
 import './ox-board-component-info.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
@@ -67,7 +67,8 @@ export class BoardViewer extends LitElement {
       }
 
       /* navigation buttons */
-      mwc-icon {
+      #prev,
+      #next {
         z-index: 10;
         position: absolute;
         top: 45%;
@@ -79,14 +80,14 @@ export class BoardViewer extends LitElement {
         color: #fff;
         user-select: none;
 
-        --mdc-icon-size: 3em;
+        --md-icon-size: 3em;
       }
 
-      mwc-icon[hidden] {
+      md-icon[hidden] {
         display: none;
       }
 
-      mwc-icon:hover {
+      md-icon:hover {
         background-color: rgba(0, 0, 0, 0.2);
         border-radius: 50%;
       }
@@ -110,8 +111,8 @@ export class BoardViewer extends LitElement {
       }
 
       @media print {
-        mwc-fab,
-        mwc-icon {
+        md-fab,
+        md-icon {
           display: none;
         }
       }
@@ -146,39 +147,40 @@ export class BoardViewer extends LitElement {
     var fullscreen =
       !isIOS() && !this.hideFullscreen
         ? html`
-            <mwc-fab
+            <md-fab
               id="fullscreen"
-              .icon=${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}
               @click=${(e: Event) => this.onTapFullscreen()}
               @mouseover=${(e: Event) => this.transientShowButtons(true)}
               @mouseout=${(e: Event) => this.transientShowButtons()}
               title="fullscreen"
-            ></mwc-fab>
+            >
+              <md-icon slot="icon">${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}</md-icon>
+            </md-fab>
           `
         : html``
 
     var prev = !this.hideNavigation
       ? html`
-          <mwc-icon
+          <md-icon
             id="prev"
             @click=${(e: Event) => this.onTapPrev()}
             @mouseover=${(e: Event) => this.transientShowButtons(true)}
             @mouseout=${(e: Event) => this.transientShowButtons()}
             hidden
-            >keyboard_arrow_left</mwc-icon
+            >keyboard_arrow_left</md-icon
           >
         `
       : html``
 
     var next = !this.hideNavigation
       ? html`
-          <mwc-icon
+          <md-icon
             id="next"
             @click=${(e: Event) => this.onTapNext()}
             @mouseover=${(e: Event) => this.transientShowButtons(true)}
             @mouseout=${(e: Event) => this.transientShowButtons()}
             hidden
-            >keyboard_arrow_right</mwc-icon
+            >keyboard_arrow_right</md-icon
           >
         `
       : html``

package/src/ox-editor-board-selector.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './selector/ox-board-selector'
 
 import { css, html, LitElement } from 'lit'
@@ -28,7 +28,7 @@ export class BoardSelector extends LitElement {
           border: 1px solid rgba(0, 0, 0, 0.2);
         }
 
-        mwc-icon {
+        md-icon {
           position: absolute;
           top: 0;
           right: 0;
@@ -46,7 +46,7 @@ export class BoardSelector extends LitElement {
     return html`
       <input id="text" type="text" .value=${this.value || ''} @change=${(e: Event) => this._onInputChanged(e)} />
 
-      <mwc-icon @click=${(e: MouseEvent) => this.openSelector()}>dashboard</mwc-icon>
+      <md-icon @click=${(e: MouseEvent) => this.openSelector()}>dashboard</md-icon>
     `
   }
 

package/src/selector/board-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-board-template-list'
 
 import { css, html, LitElement } from 'lit'
@@ -45,8 +44,9 @@ export class BoardCreationPopup 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 BoardCreationPopup 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,16 @@ export class BoardCreationPopup extends localize(i18next)(LitElement) {
         </div>
       </div>
 
-      <mwc-button
-        raised
+      <md-text-button
         label=${String(i18next.t('button.create'))}
         @click=${(e: MouseEvent) => this.onClickSubmit()}
-      ></mwc-button>
+      ></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/board-thumbnail-card.ts

@@ -51,7 +51,7 @@ export class BoardThumbnailCard 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 BoardThumbnailCard 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 board</div>
+      <div @click=${(e: Event) => this.onClickFlip(e)} front><md-icon>add_circle_outline</md-icon>create board</div>
 
       <div @click=${(e: Event) => this.onClickFlip(e)} back>
         <form @submit=${(e: Event) => this.onClickSubmit(e)}>

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

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './board-creation-popup'
 
 import { css, html, LitElement } from 'lit'
@@ -24,13 +24,17 @@ export class BoardCreationCard extends localize(i18next)(LitElement) {
         }
 
         div {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
           text-align: center;
           font-size: 0.8em;
           color: var(--card-list-create-color);
           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,7 +50,7 @@ export class BoardCreationCard extends localize(i18next)(LitElement) {
   private popup: any
 
   render() {
-    return html`<div @click=${(e: Event) => this.onClick()}><mwc-icon>add_circle_outline</mwc-icon>create board</div> `
+    return html`<div @click=${(e: Event) => this.onClick()}><md-icon>add_circle_outline</md-icon>create board</div> `
   }
 
   onClick() {

package/stories/property-data-binding.stories.ts

@@ -1,3 +1,5 @@
+// import '@webcomponents/scoped-custom-element-registry' // later only for @open-wc/scoped-elements@3
+
 import { PropertyDataBinding } from '../src/modeller/property-sidebar/data-binding/data-binding.js'
 
 import { TemplateResult, html } from 'lit'