@things-factory/component-ui 7.0.1-alpha.0 → 7.0.1-alpha.105

package/client/calendar/calendar-grid/calendar-grid-overlay.js

@@ -1,4 +1,5 @@
-import '@material/mwc-button'
+import '@material/web/button/text-button.js'
+
 import { css, html, LitElement } from 'lit'
 
 class CalendarGridOverlay extends LitElement {
@@ -27,7 +28,7 @@ class CalendarGridOverlay extends LitElement {
         display: flex;
         flex-direction: column;
         margin: 20%;
-        background-color: white;
+        background-color: var(--md-sys-color-surface);
         padding: 10px;
         border-radius: 10px;
       }
@@ -40,10 +41,12 @@ class CalendarGridOverlay extends LitElement {
         border-bottom: 1px solid #f5f5f5;
         padding: 10px;
       }
-      #button-container {
+
+      .button-container {
         display: grid;
       }
-      #button-container #close-button {
+
+      #close-button {
         margin-left: auto;
       }
     `
@@ -67,29 +70,28 @@ class CalendarGridOverlay extends LitElement {
     return html`
       <div id="modal" @click="${this.close}">
         <div id="container">
-          <div id="button-container">
-            <mwc-button id="close-button" @click=${this.close}>X</mwc-button>
+          <div class="button-container">
+            <md-text-button id="close-button" @click=${this.close}>X</md-text-button>
           </div>
           <ul>
             ${(this.tasks || []).map(
-              task =>
-                html`
-                  <li
-                    @click="${event => {
-                      this.dispatchEvent(
-                        new CustomEvent('clickTask', {
-                          detail: {
-                            task
-                          }
-                        })
-                      )
+              task => html`
+                <li
+                  @click="${event => {
+                    this.dispatchEvent(
+                      new CustomEvent('clickTask', {
+                        detail: {
+                          task
+                        }
+                      })
+                    )
 
-                      event.stopPropagation()
-                    }}"
-                  >
-                    ${task.name}
-                  </li>
-                `
+                    event.stopPropagation()
+                  }}"
+                >
+                  ${task.name}
+                </li>
+              `
             )}
           </ul>
         </div>

package/client/popup/pop-up.js

@@ -31,7 +31,7 @@ class PopUp extends LitElement {
         flex-direction: column;
         flex: 1;
         border-radius: 5px;
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
       #content {
         display: flex;

package/client/quick-find/quick-find-content.js

@@ -1,9 +1,7 @@
-import { ScrollbarStyles } from '@things-factory/styles'
+import { ScrollbarStyles } from '@operato/styles'
 import { css, html, LitElement } from 'lit'
 import '@things-factory/i18n-base'
 import './quick-find-tabs'
-
-import '@material/mwc-icon'
 class QuickFindContent extends LitElement {
   static get styles() {
     return [

package/client/quick-find/quick-find-list.js

@@ -1,10 +1,9 @@
-import { ScrollbarStyles } from '@things-factory/styles'
+import { ScrollbarStyles } from '@operato/styles'
 import { css, html, LitElement } from 'lit'
 import '@things-factory/i18n-base'
 import './quick-find-tabs'
 import './quick-find-scroll'
 
-import '@material/mwc-icon'
 class QuickFindList extends LitElement {
   static get styles() {
     return [
@@ -78,8 +77,8 @@ class QuickFindList extends LitElement {
           opacity: 0.9;
           font: normal 14px/18px var(--theme-font);
         }
-        .header mwc-icon {
-          --mdc-icon-size: var(--fontsize-default);
+        .header md-icon {
+          --md-icon-size: var(--fontsize-default);
           margin-right: var(--padding-narrow);
         }
         @media screen and (max-width: 480px) {

package/client/quick-find/quick-find-scroll.js

@@ -1,6 +1,6 @@
-import { html, css, LitElement } from 'lit'
+import '@material/web/icon/icon.js'
 
-import '@material/mwc-icon'
+import { html, css, LitElement } from 'lit'
 
 class QuickFindScroll extends LitElement {
   static get styles() {
@@ -24,8 +24,8 @@ class QuickFindScroll extends LitElement {
         .nav-bar * {
           vertical-align: middle;
         }
-        mwc-icon {
-          --mdc-icon-size: 14px;
+        md-icon {
+          --md-icon-size: 14px;
           padding-left: var(--padding-narrow);
           position: relative;
           margin-top: -2px;
@@ -100,7 +100,7 @@ class QuickFindScroll extends LitElement {
     return html`
       ${scrollable
         ? html`<div class="nav-bar" ?scrolling=${scrolling}>
-            <mwc-icon>anchor</mwc-icon> <label>Quick Find :</label>
+            <md-icon>anchor</md-icon> <label>Quick Find :</label>
             ${this.indexes.map(idx => {
               const isActiveIndex = activeIndexes.indexOf(idx) >= 0
               return html` <span

package/client/quick-find/quick-find-tabs.js

@@ -1,5 +1,5 @@
 import { css, html, LitElement } from 'lit'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 
 class QuickFindTabs extends localize(i18next)(LitElement) {
   static get styles() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/component-ui",
-  "version": "7.0.1-alpha.0",
+  "version": "7.0.1-alpha.105",
   "browser": "client/index.js",
   "author": "",
   "description": "Consist of components such as calendar, infinite scroll, popup and selector",
@@ -16,7 +16,7 @@
   },
   "scripts": {},
   "dependencies": {
-    "@things-factory/styles": "^7.0.1-alpha.0"
+    "@things-factory/styles": "^7.0.1-alpha.71"
   },
-  "gitHead": "d18cdb7648bd2003f11278ec7bc8df74edbd31fc"
+  "gitHead": "a21c259168f66a9ce7c2b74a7e20f057779fa5b4"
 }