@operato/contact 2.0.0-alpha.8 → 2.0.0-alpha.80

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/contact",
   "description": "Webcomponent ox-contact following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.8",
+  "version": "2.0.0-alpha.80",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -55,28 +55,27 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@material/mwc-icon": "^0.27.0",
-    "@material/mwc-icon-button": "^0.27.0",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.8",
-    "lit": "^2.5.0"
+    "@material/web": "^1.4.0",
+    "@operato/styles": "^2.0.0-alpha.80",
+    "@operato/utils": "^2.0.0-alpha.68",
+    "lit": "^3.1.2"
   },
   "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",
-    "@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",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -93,5 +92,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "9b76564615d73b9da50d13d30d43cdaa0d4a6fa6"
+  "gitHead": "9405ad5252a157db9c9680256a6cb65f764a890b"
 }

package/src/ox-contact-edit.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon-button'
+import '@material/web/icon/icon.js'
 import './ox-pfp.js'
 
 import { html, css, LitElement, PropertyValues } from 'lit'
@@ -16,8 +16,7 @@ export class OxContactEdit extends LitElement {
         display: block;
         padding: 25px;
 
-        --mdc-icon-button-size: 16px;
-        --mdc-icon-size: 16px;
+        --md-icon-size: 16px;
       }
 
       :host > div {
@@ -33,6 +32,7 @@ export class OxContactEdit extends LitElement {
         display: flex;
         flex-direction: row;
         gap: 10px;
+        align-items: center;
       }
 
       :host > div > div:hover {
@@ -139,14 +139,14 @@ export class OxContactEdit extends LitElement {
               item =>
                 html`<div @change=${(e: Event) => this.onChangeItem(e, item)} .item=${item} item-field>
                   ${item.value
-                    ? html`<mwc-icon-button
-                        icon="cancel"
+                    ? html`<md-icon
                         @click=${() => {
                           item.value = ''
                           this.buildStageContact()
                         }}
-                      ></mwc-icon-button>`
-                    : html`<mwc-icon-button></mwc-icon-button>`}
+                        >cancel</md-icon
+                      >`
+                    : html`<md-icon></md-icon>`}
                   <select .value=${item.label} data-item="label">
                     ${['home', 'work', 'other', 'mobile'].map(
                       option => html` <option value=${option} ?selected=${option === item.label}>${option}</option>`

package/src/ox-contact-view.ts

@@ -9,7 +9,7 @@ export class OxContactView extends LitElement {
   static styles = css`
     :host {
       display: block;
-      --mdc-icon-size: 16px;
+      --md-icon-size: 16px;
     }
 
     :host > div {
@@ -78,28 +78,28 @@ export class OxContactView extends LitElement {
       display: flex;
       flex-direction: column;
     }
-    div[data-type='email'] mwc-icon::before {
+    div[data-type='email'] md-icon::before {
       content: 'mail_outline';
     }
-    div[data-type='phone'] mwc-icon::before {
+    div[data-type='phone'] md-icon::before {
       content: 'phone';
     }
-    div[data-type='address'] mwc-icon::before {
+    div[data-type='address'] md-icon::before {
       content: 'place';
     }
-    div[data-type='company'] mwc-icon::before {
+    div[data-type='company'] md-icon::before {
       content: 'business';
     }
-    div[data-type='etc'] mwc-icon::before {
+    div[data-type='etc'] md-icon::before {
       content: 'feed';
     }
-    div[note] mwc-icon::before {
+    div[note] md-icon::before {
       content: 'subject';
     }
     :host > div > [name-content] {
       gap: 3px;
     }
-    div mwc-icon {
+    div md-icon {
       position: relative;
       top: 3px;
       margin-right: 3px;
@@ -149,20 +149,21 @@ export class OxContactView extends LitElement {
         .map(type => sorted[type])
         .filter(items => items && items.length > 0)
         .map(
-          items => html`<div data-type=${items[0].type}>
-            <mwc-icon></mwc-icon>
-            ${items[0].type}
-            ${items.map(
-              item =>
-                html`<div>
-                  <label data-item="label"> ${item.label}</label>
-                  <span data-item="value">${item.value}</span>
-                </div>`
-            )}
-          </div>`
+          items =>
+            html`<div data-type=${items[0].type}>
+              <md-icon></md-icon>
+              ${items[0].type}
+              ${items.map(
+                item =>
+                  html`<div>
+                    <label data-item="label"> ${item.label}</label>
+                    <span data-item="value">${item.value}</span>
+                  </div>`
+              )}
+            </div>`
         )}
       <div note>
-        <mwc-icon></mwc-icon>
+        <md-icon></md-icon>
         note
         <div>${note || ''}</div>
       </div>

package/src/ox-pfp-edit.ts

@@ -118,11 +118,11 @@ export class OxPfpEdit extends LitElement {
       align-content: center;
     }
 
-    mwc-icon {
+    md-icon {
       align-self: center;
 
       color: var(--file-uploader-icon-color, black);
-      --mdc-icon-size: var(--file-uploader-icon-size, 20px);
+      --md-icon-size: var(--file-uploader-icon-size, 20px);
     }
   `
 
@@ -193,7 +193,7 @@ export class OxPfpEdit extends LitElement {
             capture="environment"
             @change=${(e: Event) => this.onChangeFile(e)}
           />
-          <mwc-icon title="select image">image_search</mwc-icon>
+          <md-icon title="select image">image_search</md-icon>
         </label>
       </div>
 

package/src/ox-pfp.ts

@@ -1,8 +1,8 @@
+import '@material/web/icon/icon.js'
+
 import './ox-pfp-edit.js'
 import './ox-pfp-view.js'
 
-import '@material/mwc-icon-button'
-
 import { html, css, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { Profile } from './ox-pfp-view.js'
@@ -14,9 +14,6 @@ export class OxPfp extends LitElement {
     :host {
       display: block;
       aspect-ratio: 1 / 1;
-
-      --mdc-icon-button-size: 20px;
-      --mdc-icon-size: 20px;
     }
 
     ox-pfp-edit,
@@ -33,32 +30,31 @@ export class OxPfp extends LitElement {
       display: flex;
     }
 
-    mwc-icon-button {
+    md-icon {
       position: absolute;
-      font-size: smaller;
     }
 
-    mwc-icon-button[icon='fit_screen'] {
+    md-icon[icon='fit_screen'] {
       bottom: 0;
       left: 0;
     }
 
-    mwc-icon-button[icon='save'] {
+    md-icon[icon='save'] {
       bottom: 0;
       right: 0;
     }
 
-    mwc-icon-button[icon='edit'] {
+    md-icon[icon='edit'] {
       bottom: 0;
       right: 0;
     }
 
-    mwc-icon-button[icon='cancel'] {
+    md-icon[icon='cancel'] {
       top: 0;
       right: 0;
     }
 
-    mwc-icon-button[icon='clear'] {
+    md-icon[icon='clear'] {
       top: 0;
       right: 16px;
     }
@@ -74,9 +70,9 @@ export class OxPfp extends LitElement {
   render() {
     return this.editMode
       ? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>
-          <mwc-icon-button title="fit size" icon="fit_screen" @click=${() => this.edit.fit()}></mwc-icon-button>
-          <mwc-icon-button title="clear" icon="clear" @click=${() => this.edit.clear()}></mwc-icon-button>
-          <mwc-icon-button
+          <md-icon title="fit size" icon="fit_screen" @click=${() => this.edit.fit()}>fit_screen</md-icon>
+          <md-icon title="clear" icon="clear" @click=${() => this.edit.clear()}>clear</md-icon>
+          <md-icon
             title="save"
             icon="save"
             @click=${() => {
@@ -88,12 +84,13 @@ export class OxPfp extends LitElement {
                 })
               )
             }}
-          ></mwc-icon-button>
-          <mwc-icon-button title="cancel" icon="cancel" @click=${() => (this.editMode = false)}></mwc-icon-button>
+            >save</md-icon
+          >
+          <md-icon title="cancel" icon="cancel" @click=${() => (this.editMode = false)}>cancel</md-icon>
         </ox-pfp-edit> `
       : html`
           <ox-pfp-view .profile=${this.profile} name=${this.name || ''}>
-            <mwc-icon-button title="edit" icon="edit" @click=${() => (this.editMode = true)}></mwc-icon-button>
+            <md-icon title="edit" icon="edit" @click=${() => (this.editMode = true)}>edit</md-icon>
           </ox-pfp-view>
         `
   }

package/stories/ox-contact.stories.ts

@@ -1,6 +1,5 @@
 import { html, TemplateResult } from 'lit'
-import '@material/mwc-icon'
-import '@material/mwc-icon-button'
+import '@material/web/icon/icon.js'
 import '../src/ox-contact.js'
 
 import { Contact, ContactField } from '../src/ox-contact.js'
@@ -25,7 +24,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ contact }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
   <style>
     body {
     }

package/stories/ox-pfp.stories.ts

@@ -1,6 +1,5 @@
 import { html, TemplateResult } from 'lit'
-import '@material/mwc-icon'
-import '@material/mwc-icon-button'
+import '@material/web/icon/icon.js'
 import '../src/ox-pfp.js'
 
 import { Profile } from '../src/ox-pfp-view.js'
@@ -27,7 +26,20 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ profile, name }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
   <style>
     body {
     }