@operato/font 2.0.0-alpha.0 → 2.0.0-alpha.100

package/src/font-selector.ts

@@ -1,3 +1,6 @@
+import '@material/web/icon/icon.js'
+import '@operato/input/ox-select.js'
+import '@operato/popup/ox-popup-list.js'
 import './font-creation-card'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
@@ -30,12 +33,12 @@ export class FontSelector extends localize(i18next)(connect(store)(LitElement))
 
       #main {
         overflow: auto;
-        padding: var(--popup-content-padding);
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
         grid-auto-rows: var(--card-list-rows-height);
         grid-gap: 20px;
         box-sizing: border-box;
+        padding: var(--popup-content-padding);
       }
 
       #main .card {
@@ -60,7 +63,7 @@ export class FontSelector extends localize(i18next)(connect(store)(LitElement))
         flex-wrap: wrap;
       }
 
-      .card .button-container > mwc-icon {
+      .card .button-container > md-icon {
         background-color: var(--font-selector-icon-background-color);
         text-align: center;
         width: var(--font-selector-icon-size);
@@ -69,12 +72,12 @@ export class FontSelector extends localize(i18next)(connect(store)(LitElement))
         color: var(--font-selector-icon-color);
       }
 
-      .card .button-container > mwc-icon:last-child {
+      .card .button-container > md-icon:last-child {
         border-bottom-left-radius: 12px;
       }
 
-      .card .button-container > mwc-icon:hover,
-      .card .button-container > mwc-icon:active {
+      .card .button-container > md-icon:hover,
+      .card .button-container > md-icon:active {
         background-color: var(--primary-color);
         color: #fff;
       }
@@ -113,7 +116,6 @@ export class FontSelector extends localize(i18next)(connect(store)(LitElement))
       }
 
       #filter {
-        padding: var(--popup-content-padding);
         background-color: var(--font-tools-background-color);
         box-shadow: var(--box-shadow);
 
@@ -127,7 +129,7 @@ export class FontSelector extends localize(i18next)(connect(store)(LitElement))
         font-size: 15px;
       }
 
-      select {
+      ox-select {
         text-transform: capitalize;
         float: right;
       }
@@ -149,14 +151,17 @@ export class FontSelector extends localize(i18next)(connect(store)(LitElement))
 
     return html`
       <div id="filter">
-        <select
+        <ox-select
+          .placeholder=${i18next.t('text.please choose a provider')}
+          .value=${this.provider}
           @change=${(e: Event) => {
             this.provider = (e.currentTarget as HTMLInputElement).value
           }}
         >
-          <option value="">--${i18next.t('text.please choose a provider')}--</option>
-          ${['google', 'custom'].map(provider => html` <option value=${provider}>${provider}</option> `)}
-        </select>
+          <ox-popup-list>
+            ${['', 'google', 'custom'].map(provider => html` <div option value=${provider}>${provider}&nbsp;</div> `)}
+          </ox-popup-list>
+        </ox-select>
       </div>
 
       <div id="main">
@@ -180,19 +185,19 @@ export class FontSelector extends localize(i18next)(connect(store)(LitElement))
                 <div name>${font.name}</div>
                 <div provider>${font.provider}</div>
                 <div class="button-container">
-                  <mwc-icon
+                  <md-icon
                     @click=${(e: Event) => {
                       e.stopPropagation()
                       this.toggleActive(font)
                     }}
-                    >${font.active ? 'check_box' : 'check_box_outline_blank'}</mwc-icon
+                    >${font.active ? 'check_box' : 'check_box_outline_blank'}</md-icon
                   >
-                  <mwc-icon
+                  <md-icon
                     @click=${(e: Event) => {
                       e.stopPropagation()
                       this.deleteFont(font)
                     }}
-                    >delete</mwc-icon
+                    >delete</md-icon
                   >
                 </div>
               </div>

package/src/ox-file-selector.ts

@@ -1,5 +1,4 @@
-import '@material/mwc-icon'
-import '@material/mwc-icon-button'
+import '@material/web/icon/icon.js'
 
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'

package/src/ox-font-selector.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './font-selector'
 
 import { css, html, LitElement } from 'lit'
@@ -27,7 +27,7 @@ export default class OxFontSelector extends LitElement {
         border: 1px solid rgba(0, 0, 0, 0.2);
       }
 
-      mwc-icon {
+      md-icon {
         position: absolute;
         top: 0;
         right: 0;
@@ -50,7 +50,7 @@ export default class OxFontSelector extends LitElement {
         .placeholder=${this.getAttribute('placeholder') || ''}
       />
 
-      <mwc-icon @click=${() => this.openSelector()}>font_download</mwc-icon>
+      <md-icon @click=${() => this.openSelector()}>font_download</md-icon>
     `
   }