@operato/font 2.0.0-alpha.8 → 2.0.0-alpha.81

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/font",
   "description": "User interface to select font and create font.",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.8",
+  "version": "2.0.0-alpha.81",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -47,35 +47,36 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@material/mwc-icon": "^0.27.0",
-    "@operato/attachment": "^2.0.0-alpha.8",
-    "@operato/headroom": "^2.0.0-alpha.0",
-    "@operato/i18n": "^2.0.0-alpha.0",
-    "@operato/layout": "^2.0.0-alpha.8",
-    "@operato/property-editor": "^2.0.0-alpha.8",
-    "@operato/pull-to-refresh": "^2.0.0-alpha.0",
-    "@operato/shell": "^2.0.0-alpha.8",
-    "@operato/utils": "^2.0.0-alpha.8",
+    "@material/web": "^1.4.0",
+    "@operato/attachment": "^2.0.0-alpha.81",
+    "@operato/headroom": "^2.0.0-alpha.57",
+    "@operato/i18n": "^2.0.0-alpha.59",
+    "@operato/input": "^2.0.0-alpha.81",
+    "@operato/layout": "^2.0.0-alpha.81",
+    "@operato/property-editor": "^2.0.0-alpha.81",
+    "@operato/pull-to-refresh": "^2.0.0-alpha.57",
+    "@operato/shell": "^2.0.0-alpha.81",
+    "@operato/utils": "^2.0.0-alpha.68",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
     "@types/webfontloader": "^1.6.34",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^8.0.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
     "json5": "^2.2.0",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -92,5 +93,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "9b76564615d73b9da50d13d30d43cdaa0d4a6fa6"
+  "gitHead": "df2dbdf533ea883e0c4d924a66ef9c0fcab833c3"
 }

package/src/font-creation-card.ts

@@ -56,7 +56,8 @@ export class FontCreationCard extends localize(i18next)(LitElement) {
         text-transform: capitalize;
       }
 
-      [front] mwc-icon {
+      [front] md-icon {
+        --md-icon-size: 42px;
         font-size: 3.5em;
         color: var(--card-list-create-icon-color);
       }
@@ -148,7 +149,7 @@ export class FontCreationCard extends localize(i18next)(LitElement) {
     let isFileAttached = this.files && this.files.length > 0 ? true : false
 
     return html`
-      <div @click=${(e: Event) => this.onClickFlip(e)} front><mwc-icon>add_circle_outline</mwc-icon>create font</div>
+      <div @click=${(e: Event) => this.onClickFlip(e)} front><md-icon>add_circle_outline</md-icon>create font</div>
 
       <div @click=${(e: Event) => this.onClickFlip(e)} back>
         <form @submit=${(e: Event) => this.onClickSubmit(e)}>

package/src/font-selector.ts

@@ -1,3 +1,5 @@
+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 +32,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 +62,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 +71,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 +115,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 +128,7 @@ export class FontSelector extends localize(i18next)(connect(store)(LitElement))
         font-size: 15px;
       }
 
-      select {
+      ox-select {
         text-transform: capitalize;
         float: right;
       }
@@ -149,14 +150,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 +184,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>
     `
   }