@operato/contact 7.0.60 → 7.0.62

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [7.0.62](https://github.com/hatiolab/operato/compare/v7.0.61...v7.0.62) (2024-08-22)
+
+
+### :bug: Bug Fix
+
+* add department for contact ([7925d9d](https://github.com/hatiolab/operato/commit/7925d9d71c92dd330533ef8836c26896941ffac4))
+
+
+
+### [7.0.61](https://github.com/hatiolab/operato/compare/v7.0.60...v7.0.61) (2024-08-22)
+
+
+### :bug: Bug Fix
+
+* ox-contact ([7779110](https://github.com/hatiolab/operato/commit/777911012bca0c88387877254005ac456dc712c9))
+
+
+
 ### [7.0.60](https://github.com/hatiolab/operato/compare/v7.0.59...v7.0.60) (2024-08-21)
 
 

package/dist/src/ox-contact-edit.js

@@ -4,6 +4,7 @@ import './ox-pfp.js';
 import { html, css, LitElement } from 'lit';
 import { customElement, property, state, query, queryAll } from 'lit/decorators.js';
 import { ScrollbarStyles } from '@operato/styles';
+import { i18next } from '@operato/i18n';
 let OxContactEdit = class OxContactEdit extends LitElement {
     constructor() {
         super(...arguments);
@@ -26,17 +27,13 @@ let OxContactEdit = class OxContactEdit extends LitElement {
         <ox-pfp .profile=${profile} .name=${name}></ox-pfp>
 
         <div name-content>
-          <div @change=${(e) => this.buildStageContact()}>
-            <span>name</span>
-            <input type="text" id="name" .value=${name !== null && name !== void 0 ? name : ''} />
-          </div>
-          <div @change=${(e) => this.buildStageContact()}>
-            <span>company</span>
-            <input type="text" id="company" .value=${company !== null && company !== void 0 ? company : ''} />
-          </div>
+          <span>${i18next.t('label.name')}</span>
+          <input type="text" id="name" .value=${name !== null && name !== void 0 ? name : ''} @change=${(e) => this.buildStageContact()} />
+          <span>${i18next.t('label.company')}</span>
+          <input type="text" id="company" .value=${company !== null && company !== void 0 ? company : ''} @change=${(e) => this.buildStageContact()} />
         </div>
       </div>
-      ${['email', 'phone', 'address'].map(type => {
+      ${['department', 'email', 'phone', 'address'].map(type => {
             var items = [...(sorted[type] || []), { type: type, label: 'work', value: '' }];
             return html `
           <div data-type=${type}>
@@ -122,8 +119,29 @@ OxContactEdit.styles = [
       :host {
         display: block;
         padding: 25px;
+      }
+
+      input,
+      select,
+      textarea {
+        padding: 8px;
+        border-radius: 4px;
+        border: 1px solid var(--md-sys-color-outline, #ccc);
+        background-color: #fff;
+        color: var(--md-sys-color-on-surface);
+        font-size: 16px; /* for iPhone */
+        box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.1);
+        transition:
+          border-color 0.3s ease,
+          box-shadow 0.3s ease;
+      }
 
-        --md-icon-size: 16px;
+      input:focus,
+      select:focus,
+      textarea:focus {
+        border-color: var(--md-sys-color-primary, #6200ea);
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+        outline: none;
       }
 
       :host > div {
@@ -172,8 +190,14 @@ OxContactEdit.styles = [
       :host > div[name] > div[name-content] {
         flex: 1;
 
-        display: flex;
-        flex-direction: column;
+        display: grid;
+        grid-template-columns: minmax(auto, 160px) 1fr;
+        gap: var(--spacing-medium);
+        align-items: center;
+
+        span {
+          text-align: right;
+        }
       }
 
       div[field] {
@@ -194,7 +218,9 @@ OxContactEdit.styles = [
 
       textarea {
         width: 100%;
-        height: 100px;
+        min-height: 100px;
+        box-sizing: border-box;
+        resize: none;
       }
     `
 ];

package/dist/src/ox-contact-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-contact-edit.js","sourceRoot":"","sources":["../../src/ox-contact-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-pfp.js'\n\nimport { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state, query, queryAll } from 'lit/decorators.js'\nimport { Contact, ContactField, ContactItem } from './ox-contact'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { OxPfp } from './ox-pfp.js'\n\n@customElement('ox-contact-edit')\nexport class OxContactEdit extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        padding: 25px;\n\n        --md-icon-size: 16px;\n      }\n\n      :host > div {\n        padding: 10px 0;\n        display: block;\n        border-bottom: 1px solid blue;\n      }\n\n      :host > div > div {\n        padding: 4px 0;\n        box-sizing: border-box;\n\n        display: flex;\n        flex-direction: row;\n        gap: 10px;\n        align-items: center;\n      }\n\n      :host > div > div:hover {\n        position: relative;\n      }\n\n      [data-item='label'] {\n        width: 100px;\n        text-align: right;\n      }\n\n      [data-item='value'] {\n        flex: 1;\n      }\n\n      :host > div[name] {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        font-weight: bold;\n        font-size: 1.4em;\n      }\n\n      :host ox-pfp {\n        display: inline-block;\n        width: 100px;\n        height: 100px;\n      }\n\n      :host > div[name] > div[name-content] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n      }\n\n      div[field] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 10px;\n      }\n\n      div[field] > span {\n        width: 100px;\n        text-align: right;\n      }\n\n      div[field] > input {\n        flex: 1;\n      }\n\n      textarea {\n        width: 100%;\n        height: 100px;\n      }\n    `\n  ]\n\n  @property({ type: Object }) contact: Contact = {}\n\n  @state() private stageContact: Contact = JSON.parse(JSON.stringify(this.contact))\n\n  @query('#name') name!: HTMLTextAreaElement\n  @query('#company') company!: HTMLTextAreaElement\n  @query('#note') note!: HTMLTextAreaElement\n  @query('ox-pfp') pfp!: OxPfp\n  @queryAll('[item-field]') fields!: NodeListOf<HTMLDivElement>\n\n  render() {\n    const { profile, items = [], name, company, note } = this.stageContact || {}\n    var sorted: { [type: string]: ContactItem[] } = {}\n\n    items.forEach(item => {\n      if (!sorted[item.type as string]) {\n        sorted[item.type] = [item]\n      } else {\n        sorted[item.type as string].push(item)\n      }\n    })\n\n    return html`\n      <div name>\n        <ox-pfp .profile=${profile} .name=${name}></ox-pfp>\n\n        <div name-content>\n          <div @change=${(e: Event) => this.buildStageContact()}>\n            <span>name</span>\n            <input type=\"text\" id=\"name\" .value=${name ?? ''} />\n          </div>\n          <div @change=${(e: Event) => this.buildStageContact()}>\n            <span>company</span>\n            <input type=\"text\" id=\"company\" .value=${company ?? ''} />\n          </div>\n        </div>\n      </div>\n      ${['email', 'phone', 'address'].map(type => {\n        var items = [...(sorted[type] || []), { type: type as ContactField, label: 'work', value: '' }]\n\n        return html`\n          <div data-type=${type}>\n            ${type}\n            ${items.map(\n              item =>\n                html`<div @change=${(e: Event) => this.onChangeItem(e, item)} .item=${item} item-field>\n                  ${item.value\n                    ? html`<md-icon\n                        @click=${() => {\n                          item.value = ''\n                          this.buildStageContact()\n                        }}\n                        >cancel</md-icon\n                      >`\n                    : html`<md-icon></md-icon>`}\n                  <select .value=${item.label} data-item=\"label\">\n                    ${['home', 'work', 'other', 'mobile'].map(\n                      option => html` <option value=${option} ?selected=${option === item.label}>${option}</option>`\n                    )}\n                  </select>\n                  <input type=\"text\" .value=${item.value} data-item=\"value\" />\n                </div>`\n            )}\n          </div>\n        `\n      })}\n      <div note>\n        note\n        <textarea id=\"note\" .value=${note || ''} @change=${() => this.buildStageContact()}></textarea>\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('contact')) {\n      this.stageContact = JSON.parse(JSON.stringify(this.contact))\n    }\n  }\n\n  buildItems() {\n    const items: ContactItem[] = []\n\n    this.fields.forEach(fieldElement => {\n      const item = (fieldElement as any).item\n      if (item.value) {\n        items.push(item)\n      }\n    })\n\n    return items\n  }\n\n  buildStageContact() {\n    this.stageContact = {\n      ...this.stageContact,\n      profile: this.pfp.profile,\n      name: this.name.value,\n      company: this.company.value,\n      note: this.note.value,\n      items: this.buildItems()\n    }\n  }\n\n  onChangeItem(e: Event, item: ContactItem) {\n    const target = e.currentTarget as HTMLElement\n    const labelElement = target.querySelector('[data-item=\"label\"]') as HTMLSelectElement\n    const valueElement = target.querySelector('[data-item=\"value\"]') as HTMLInputElement\n\n    item.label = labelElement.value\n    item.value = valueElement.value\n\n    if (e.target === valueElement || item.value) {\n      this.buildStageContact()\n    }\n  }\n\n  save() {\n    this.buildStageContact()\n\n    this.dispatchEvent(\n      new CustomEvent('edit-done', {\n        detail: this.stageContact\n      })\n    )\n  }\n\n  cancel() {\n    this.dispatchEvent(\n      new CustomEvent('edit-cancel', {\n        detail: this.stageContact\n      })\n    )\n  }\n\n  reset() {\n    this.buildStageContact()\n\n    this.stageContact = JSON.parse(JSON.stringify(this.contact))\n  }\n}\n"]}
+{"version":3,"file":"ox-contact-edit.js","sourceRoot":"","sources":["../../src/ox-contact-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-pfp.js'\n\nimport { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state, query, queryAll } from 'lit/decorators.js'\nimport { Contact, ContactField, ContactItem } from './ox-contact'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\nimport { OxPfp } from './ox-pfp.js'\n\n@customElement('ox-contact-edit')\nexport class OxContactEdit extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        padding: 25px;\n      }\n\n      input,\n      select,\n      textarea {\n        padding: 8px;\n        border-radius: 4px;\n        border: 1px solid var(--md-sys-color-outline, #ccc);\n        background-color: #fff;\n        color: var(--md-sys-color-on-surface);\n        font-size: 16px; /* for iPhone */\n        box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.1);\n        transition:\n          border-color 0.3s ease,\n          box-shadow 0.3s ease;\n      }\n\n      input:focus,\n      select:focus,\n      textarea:focus {\n        border-color: var(--md-sys-color-primary, #6200ea);\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);\n        outline: none;\n      }\n\n      :host > div {\n        padding: 10px 0;\n        display: block;\n        border-bottom: 1px solid blue;\n      }\n\n      :host > div > div {\n        padding: 4px 0;\n        box-sizing: border-box;\n\n        display: flex;\n        flex-direction: row;\n        gap: 10px;\n        align-items: center;\n      }\n\n      :host > div > div:hover {\n        position: relative;\n      }\n\n      [data-item='label'] {\n        width: 100px;\n        text-align: right;\n      }\n\n      [data-item='value'] {\n        flex: 1;\n      }\n\n      :host > div[name] {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        font-weight: bold;\n        font-size: 1.4em;\n      }\n\n      :host ox-pfp {\n        display: inline-block;\n        width: 100px;\n        height: 100px;\n      }\n\n      :host > div[name] > div[name-content] {\n        flex: 1;\n\n        display: grid;\n        grid-template-columns: minmax(auto, 160px) 1fr;\n        gap: var(--spacing-medium);\n        align-items: center;\n\n        span {\n          text-align: right;\n        }\n      }\n\n      div[field] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 10px;\n      }\n\n      div[field] > span {\n        width: 100px;\n        text-align: right;\n      }\n\n      div[field] > input {\n        flex: 1;\n      }\n\n      textarea {\n        width: 100%;\n        min-height: 100px;\n        box-sizing: border-box;\n        resize: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) contact: Contact = {}\n\n  @state() private stageContact: Contact = JSON.parse(JSON.stringify(this.contact))\n\n  @query('#name') name!: HTMLTextAreaElement\n  @query('#company') company!: HTMLTextAreaElement\n  @query('#note') note!: HTMLTextAreaElement\n  @query('ox-pfp') pfp!: OxPfp\n  @queryAll('[item-field]') fields!: NodeListOf<HTMLDivElement>\n\n  render() {\n    const { profile, items = [], name, company, note } = this.stageContact || {}\n    var sorted: { [type: string]: ContactItem[] } = {}\n\n    items.forEach(item => {\n      if (!sorted[item.type as string]) {\n        sorted[item.type] = [item]\n      } else {\n        sorted[item.type as string].push(item)\n      }\n    })\n\n    return html`\n      <div name>\n        <ox-pfp .profile=${profile} .name=${name}></ox-pfp>\n\n        <div name-content>\n          <span>${i18next.t('label.name')}</span>\n          <input type=\"text\" id=\"name\" .value=${name ?? ''} @change=${(e: Event) => this.buildStageContact()} />\n          <span>${i18next.t('label.company')}</span>\n          <input type=\"text\" id=\"company\" .value=${company ?? ''} @change=${(e: Event) => this.buildStageContact()} />\n        </div>\n      </div>\n      ${['department', 'email', 'phone', 'address'].map(type => {\n        var items = [...(sorted[type] || []), { type: type as ContactField, label: 'work', value: '' }]\n\n        return html`\n          <div data-type=${type}>\n            ${type}\n            ${items.map(\n              item =>\n                html`<div @change=${(e: Event) => this.onChangeItem(e, item)} .item=${item} item-field>\n                  ${item.value\n                    ? html`<md-icon\n                        @click=${() => {\n                          item.value = ''\n                          this.buildStageContact()\n                        }}\n                        >cancel</md-icon\n                      >`\n                    : html`<md-icon></md-icon>`}\n                  <select .value=${item.label} data-item=\"label\">\n                    ${['home', 'work', 'other', 'mobile'].map(\n                      option => html` <option value=${option} ?selected=${option === item.label}>${option}</option>`\n                    )}\n                  </select>\n                  <input type=\"text\" .value=${item.value} data-item=\"value\" />\n                </div>`\n            )}\n          </div>\n        `\n      })}\n      <div note>\n        note\n        <textarea id=\"note\" .value=${note || ''} @change=${() => this.buildStageContact()}></textarea>\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('contact')) {\n      this.stageContact = JSON.parse(JSON.stringify(this.contact))\n    }\n  }\n\n  buildItems() {\n    const items: ContactItem[] = []\n\n    this.fields.forEach(fieldElement => {\n      const item = (fieldElement as any).item\n      if (item.value) {\n        items.push(item)\n      }\n    })\n\n    return items\n  }\n\n  buildStageContact() {\n    this.stageContact = {\n      ...this.stageContact,\n      profile: this.pfp.profile,\n      name: this.name.value,\n      company: this.company.value,\n      note: this.note.value,\n      items: this.buildItems()\n    }\n  }\n\n  onChangeItem(e: Event, item: ContactItem) {\n    const target = e.currentTarget as HTMLElement\n    const labelElement = target.querySelector('[data-item=\"label\"]') as HTMLSelectElement\n    const valueElement = target.querySelector('[data-item=\"value\"]') as HTMLInputElement\n\n    item.label = labelElement.value\n    item.value = valueElement.value\n\n    if (e.target === valueElement || item.value) {\n      this.buildStageContact()\n    }\n  }\n\n  save() {\n    this.buildStageContact()\n\n    this.dispatchEvent(\n      new CustomEvent('edit-done', {\n        detail: this.stageContact\n      })\n    )\n  }\n\n  cancel() {\n    this.dispatchEvent(\n      new CustomEvent('edit-cancel', {\n        detail: this.stageContact\n      })\n    )\n  }\n\n  reset() {\n    this.buildStageContact()\n\n    this.stageContact = JSON.parse(JSON.stringify(this.contact))\n  }\n}\n"]}

package/dist/src/ox-contact-view.js

@@ -32,7 +32,7 @@ let OxContactView = class OxContactView extends LitElement {
         </div>
       </div>
 
-      ${['email', 'phone', 'address', 'company', 'etc']
+      ${['department', 'email', 'phone', 'address', 'company', 'etc']
             .map(type => sorted[type])
             .filter(items => items && items.length > 0)
             .map(items => html `<div data-type=${items[0].type}>
@@ -55,12 +55,15 @@ OxContactView.styles = css `
     :host {
       display: block;
       --md-icon-size: 16px;
+
+      color: var(--md-sys-color-on-surface);
+      background-color: var(--md-sys-color-surface);
     }
 
     :host > div {
-      padding: var(--padding-default, 10px);
+      padding: var(--spacing-medium, 8px);
       display: block;
-      border-bottom: var(--border-dim-color, 1px solid rgba(0, 0, 0, 0.1));
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       font-size: 0.9em;
       text-transform: capitalize;
     }
@@ -89,17 +92,13 @@ OxContactView.styles = css `
       width: 100%;
       height: 100%;
       opacity: 0.15;
-      background-image: linear-gradient(
-        var(--md-sys-color-on-primary-container, gray),
-        var(--md-sys-color-on-primary-container, gray)
-      );
-      z-index: -1;
+      background-image: linear-gradient(var(--md-sys-color-primary, gray), var(--md-sys-color-primary, gray));
     }
 
     [data-item='label'] {
       width: 80px;
       text-align: right;
-      color: var(--md-sys-color-on-secondary-container, #017e7f);
+      color: var(--md-sys-color-primary, #017e7f);
     }
 
     [data-item='value'] {
@@ -126,27 +125,39 @@ OxContactView.styles = css `
       display: flex;
       flex-direction: column;
     }
+
     div[data-type='email'] md-icon::before {
       content: 'mail_outline';
     }
+
     div[data-type='phone'] md-icon::before {
       content: 'phone';
     }
+
     div[data-type='address'] md-icon::before {
       content: 'place';
     }
+
+    div[data-type='department'] md-icon::before {
+      content: 'diversity_3';
+    }
+
     div[data-type='company'] md-icon::before {
       content: 'business';
     }
+
     div[data-type='etc'] md-icon::before {
       content: 'feed';
     }
+
     div[note] md-icon::before {
       content: 'subject';
     }
+
     :host > div > [name-content] {
       gap: 3px;
     }
+
     div md-icon {
       position: relative;
       top: 3px;
@@ -154,10 +165,12 @@ OxContactView.styles = css `
       opacity: 0.5;
       color: var(--md-sys-color-on-primary-container, #333);
     }
+
     [name-content] div {
       color: var(--md-sys-color-on-primary-container, #333);
       font-size: 1.2em;
     }
+
     [name-content] [company] {
       color: var(--md-sys-color-on-secondary-container, #666);
       font-weight: normal;

package/dist/src/ox-contact-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-contact-view.js","sourceRoot":"","sources":["../../src/ox-contact-view.ts"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAmHuB,YAAO,GAAY,EAAE,CAAA;IAoDnD,CAAC;IAlDC,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QACvE,IAAI,MAAM,GAAsC,EAAE,CAAA;QAElD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACnB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,EAAE,CAAC;gBACjC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;YAC5B,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACxC,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,IAAI,CAAA;;gCAEiB,OAAO,UAAU,IAAI;;;;sCAIf,IAAI;;;sCAGJ,OAAO;;;;;QAKrC,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC;aAC9C,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;aACzB,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;aAC1C,GAAG,CACF,KAAK,CAAC,EAAE,CACN,IAAI,CAAA,kBAAkB,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;;gBAE/B,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;gBACb,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;gDAC0B,IAAI,CAAC,KAAK;8CACZ,IAAI,CAAC,KAAK;yBAC/B,CACV;mBACI,CACV;;;;eAIM,IAAI,IAAI,EAAE;;KAEpB,CAAA;IACH,CAAC;;AArKM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgHlB,AAhHY,CAgHZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAsB;AAnHtC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAuKzB","sourcesContent":["import './ox-pfp-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { Contact, ContactField, ContactItem } from './ox-contact'\n\n@customElement('ox-contact-view')\nexport class OxContactView extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      --md-icon-size: 16px;\n    }\n\n    :host > div {\n      padding: var(--padding-default, 10px);\n      display: block;\n      border-bottom: var(--border-dim-color, 1px solid rgba(0, 0, 0, 0.1));\n      font-size: 0.9em;\n      text-transform: capitalize;\n    }\n\n    :host > div > div {\n      padding: 4px 0;\n      box-sizing: border-box;\n\n      display: flex;\n      flex-direction: row;\n      gap: 10px;\n    }\n\n    :host > div > div:hover {\n      position: relative;\n    }\n\n    :host > div > div:hover::before {\n      content: '';\n      display: block;\n      position: absolute;\n      text-align: left;\n      line-height: 24px;\n      top: 0;\n      right: 0;\n      width: 100%;\n      height: 100%;\n      opacity: 0.15;\n      background-image: linear-gradient(\n        var(--md-sys-color-on-primary-container, gray),\n        var(--md-sys-color-on-primary-container, gray)\n      );\n      z-index: -1;\n    }\n\n    [data-item='label'] {\n      width: 80px;\n      text-align: right;\n      color: var(--md-sys-color-on-secondary-container, #017e7f);\n    }\n\n    [data-item='value'] {\n      flex: 1;\n      text-transform: none;\n    }\n\n    :host > div[name] {\n      display: flex;\n      align-items: center;\n      gap: 15px;\n      font-weight: bold;\n      font-size: 1.4em;\n    }\n\n    :host ox-pfp-view {\n      display: inline-block;\n      height: 75px;\n    }\n\n    :host > div[name] > div[name-content] {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n    div[data-type='email'] md-icon::before {\n      content: 'mail_outline';\n    }\n    div[data-type='phone'] md-icon::before {\n      content: 'phone';\n    }\n    div[data-type='address'] md-icon::before {\n      content: 'place';\n    }\n    div[data-type='company'] md-icon::before {\n      content: 'business';\n    }\n    div[data-type='etc'] md-icon::before {\n      content: 'feed';\n    }\n    div[note] md-icon::before {\n      content: 'subject';\n    }\n    :host > div > [name-content] {\n      gap: 3px;\n    }\n    div md-icon {\n      position: relative;\n      top: 3px;\n      margin-right: 3px;\n      opacity: 0.5;\n      color: var(--md-sys-color-on-primary-container, #333);\n    }\n    [name-content] div {\n      color: var(--md-sys-color-on-primary-container, #333);\n      font-size: 1.2em;\n    }\n    [name-content] [company] {\n      color: var(--md-sys-color-on-secondary-container, #666);\n      font-weight: normal;\n      font-size: 0.9em;\n    }\n  `\n\n  @property({ type: Object }) contact: Contact = {}\n\n  render() {\n    const { profile, items = [], name, company, note } = this.contact || {}\n    var sorted: { [type: string]: ContactItem[] } = {}\n\n    items.forEach(item => {\n      if (!sorted[item.type as string]) {\n        sorted[item.type] = [item]\n      } else {\n        sorted[item.type as string].push(item)\n      }\n    })\n\n    return html`\n      <div name>\n        <ox-pfp-view .profile=${profile} .name=${name}></ox-pfp-view>\n\n        <div name-content>\n          <div>\n            <span data-item=\"value\">${name}</span>\n          </div>\n          <div company>\n            <span data-item=\"value\">${company}</span>\n          </div>\n        </div>\n      </div>\n\n      ${['email', 'phone', 'address', 'company', 'etc']\n        .map(type => sorted[type])\n        .filter(items => items && items.length > 0)\n        .map(\n          items =>\n            html`<div data-type=${items[0].type}>\n              <md-icon></md-icon>\n              ${items[0].type}\n              ${items.map(\n                item =>\n                  html`<div>\n                    <label data-item=\"label\"> ${item.label}</label>\n                    <span data-item=\"value\">${item.value}</span>\n                  </div>`\n              )}\n            </div>`\n        )}\n      <div note>\n        <md-icon></md-icon>\n        note\n        <div>${note || ''}</div>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-contact-view.js","sourceRoot":"","sources":["../../src/ox-contact-view.ts"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAgIuB,YAAO,GAAY,EAAE,CAAA;IAoDnD,CAAC;IAlDC,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QACvE,IAAI,MAAM,GAAsC,EAAE,CAAA;QAElD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACnB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,EAAE,CAAC;gBACjC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;YAC5B,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACxC,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,IAAI,CAAA;;gCAEiB,OAAO,UAAU,IAAI;;;;sCAIf,IAAI;;;sCAGJ,OAAO;;;;;QAKrC,CAAC,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC;aAC5D,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;aACzB,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;aAC1C,GAAG,CACF,KAAK,CAAC,EAAE,CACN,IAAI,CAAA,kBAAkB,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;;gBAE/B,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;gBACb,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;gDAC0B,IAAI,CAAC,KAAK;8CACZ,IAAI,CAAC,KAAK;yBAC/B,CACV;mBACI,CACV;;;;eAIM,IAAI,IAAI,EAAE;;KAEpB,CAAA;IACH,CAAC;;AAlLM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HlB,AA7HY,CA6HZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAsB;AAhItC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAoLzB","sourcesContent":["import './ox-pfp-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { Contact, ContactField, ContactItem } from './ox-contact'\n\n@customElement('ox-contact-view')\nexport class OxContactView extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      --md-icon-size: 16px;\n\n      color: var(--md-sys-color-on-surface);\n      background-color: var(--md-sys-color-surface);\n    }\n\n    :host > div {\n      padding: var(--spacing-medium, 8px);\n      display: block;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n      font-size: 0.9em;\n      text-transform: capitalize;\n    }\n\n    :host > div > div {\n      padding: 4px 0;\n      box-sizing: border-box;\n\n      display: flex;\n      flex-direction: row;\n      gap: 10px;\n    }\n\n    :host > div > div:hover {\n      position: relative;\n    }\n\n    :host > div > div:hover::before {\n      content: '';\n      display: block;\n      position: absolute;\n      text-align: left;\n      line-height: 24px;\n      top: 0;\n      right: 0;\n      width: 100%;\n      height: 100%;\n      opacity: 0.15;\n      background-image: linear-gradient(var(--md-sys-color-primary, gray), var(--md-sys-color-primary, gray));\n    }\n\n    [data-item='label'] {\n      width: 80px;\n      text-align: right;\n      color: var(--md-sys-color-primary, #017e7f);\n    }\n\n    [data-item='value'] {\n      flex: 1;\n      text-transform: none;\n    }\n\n    :host > div[name] {\n      display: flex;\n      align-items: center;\n      gap: 15px;\n      font-weight: bold;\n      font-size: 1.4em;\n    }\n\n    :host ox-pfp-view {\n      display: inline-block;\n      height: 75px;\n    }\n\n    :host > div[name] > div[name-content] {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n\n    div[data-type='email'] md-icon::before {\n      content: 'mail_outline';\n    }\n\n    div[data-type='phone'] md-icon::before {\n      content: 'phone';\n    }\n\n    div[data-type='address'] md-icon::before {\n      content: 'place';\n    }\n\n    div[data-type='department'] md-icon::before {\n      content: 'diversity_3';\n    }\n\n    div[data-type='company'] md-icon::before {\n      content: 'business';\n    }\n\n    div[data-type='etc'] md-icon::before {\n      content: 'feed';\n    }\n\n    div[note] md-icon::before {\n      content: 'subject';\n    }\n\n    :host > div > [name-content] {\n      gap: 3px;\n    }\n\n    div md-icon {\n      position: relative;\n      top: 3px;\n      margin-right: 3px;\n      opacity: 0.5;\n      color: var(--md-sys-color-on-primary-container, #333);\n    }\n\n    [name-content] div {\n      color: var(--md-sys-color-on-primary-container, #333);\n      font-size: 1.2em;\n    }\n\n    [name-content] [company] {\n      color: var(--md-sys-color-on-secondary-container, #666);\n      font-weight: normal;\n      font-size: 0.9em;\n    }\n  `\n\n  @property({ type: Object }) contact: Contact = {}\n\n  render() {\n    const { profile, items = [], name, company, note } = this.contact || {}\n    var sorted: { [type: string]: ContactItem[] } = {}\n\n    items.forEach(item => {\n      if (!sorted[item.type as string]) {\n        sorted[item.type] = [item]\n      } else {\n        sorted[item.type as string].push(item)\n      }\n    })\n\n    return html`\n      <div name>\n        <ox-pfp-view .profile=${profile} .name=${name}></ox-pfp-view>\n\n        <div name-content>\n          <div>\n            <span data-item=\"value\">${name}</span>\n          </div>\n          <div company>\n            <span data-item=\"value\">${company}</span>\n          </div>\n        </div>\n      </div>\n\n      ${['department', 'email', 'phone', 'address', 'company', 'etc']\n        .map(type => sorted[type])\n        .filter(items => items && items.length > 0)\n        .map(\n          items =>\n            html`<div data-type=${items[0].type}>\n              <md-icon></md-icon>\n              ${items[0].type}\n              ${items.map(\n                item =>\n                  html`<div>\n                    <label data-item=\"label\"> ${item.label}</label>\n                    <span data-item=\"value\">${item.value}</span>\n                  </div>`\n              )}\n            </div>`\n        )}\n      <div note>\n        <md-icon></md-icon>\n        note\n        <div>${note || ''}</div>\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/ox-contact.js

@@ -75,7 +75,8 @@ OxContact.styles = [
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--md-sys-color-background);
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-contact-view,

package/dist/src/ox-contact.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-contact.js","sourceRoot":"","sources":["../../src/ox-contact.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAKpD,MAAM,CAAN,IAAY,YAUX;AAVD,WAAY,YAAY;IACtB,sCAAsB,CAAA;IACtB,+BAAe,CAAA;IACf,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,qCAAqB,CAAA;IACrB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,yCAAyB,CAAA;IACzB,qCAAqB,CAAA;AACvB,CAAC,EAVW,YAAY,KAAZ,YAAY,QAUvB;AAED,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,6BAAa,CAAA;IACb,+BAAe,CAAA;IACf,iCAAiB,CAAA;AACnB,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAmBM,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAkBuB,YAAO,GAAY,EAAE,CAAA;QAExC,aAAQ,GAAa,KAAK,CAAA;IA6CrC,CAAC;IAzCC,MAAM;QACJ,OAAO,IAAI,CAAA;;QAGP,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA;yBACS,IAAI,CAAC,OAAO;6BACR,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;2BAC/B,CAAC,CAAc,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAA;gBACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;YACvB,CAAC;gCACiB;YACtB,CAAC,CAAC,IAAI,CAAA,8BAA8B,IAAI,CAAC,OAAO,sBACpD;;;;UAKI,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA;iCACe,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;kDACR,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;;iCAG1C,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;6CACd,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;iCAEtC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;2CACd,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;eAEvD;YACH,CAAC,CAAC,IAAI,CAAA;iCACe,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;2CAClB,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;eAG3D;;WAEG,CAAA;IACT,CAAC;;AA/DM,gBAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;;;;;;;;;KAYF;CACF,AAfY,CAeZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsB;AAExC;IAAR,KAAK,EAAE;2CAA2B;AAET;IAAzB,KAAK,CAAC,iBAAiB,CAAC;yCAAuB;AAtBrC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAiErB","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-contact-edit.js'\nimport './ox-contact-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { CommonHeaderStyles } from '@operato/styles'\n\nimport { OxContactEdit } from './ox-contact-edit.js'\nimport { Profile } from './ox-pfp-view.js'\n\nexport enum ContactField {\n  JobTitle = 'job-title',\n  Phone = 'phone',\n  Address = 'address',\n  Email = 'email',\n  Birthday = 'birthday',\n  Profile = 'profile',\n  Picture = 'picture',\n  Department = 'department',\n  Homepage = 'homepage'\n}\n\nexport enum ContactLabel {\n  home = 'home',\n  work = 'work',\n  other = 'other',\n  mobile = 'mobile'\n}\n\nexport type ContactItem = {\n  id?: string\n  type: ContactField\n  label: string\n  value: string\n}\n\nexport type Contact = {\n  id?: string\n  profile?: Profile\n  name?: string\n  company?: string\n  items?: ContactItem[]\n  note?: string\n}\n\n@customElement('ox-contact')\nexport class OxContact extends LitElement {\n  static styles = [\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-background);\n      }\n\n      ox-contact-view,\n      ox-contact-edit {\n        padding: var(--pading-default);\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) contact: Contact = {}\n\n  @state() editMode?: boolean = false\n\n  @query('ox-contact-edit') editor!: OxContactEdit\n\n  render() {\n    return html` \n    <div container>\n      ${\n        this.editMode\n          ? html`<ox-contact-edit\n              .contact=${this.contact}\n              @edit-cancel=${() => (this.editMode = false)}\n              @edit-done=${(e: CustomEvent) => {\n                this.contact = e.detail\n                this.editMode = false\n              }}\n            ></ox-contact-edit>`\n          : html` <ox-contact-view .contact=${this.contact}></ox-contact-view> `\n      }\n      </div>\n      \n      <div class=\"footer\">\n        ${\n          this.editMode\n            ? html`\n                <button @click=${() => this.editor.reset()}>\n                  <md-icon>restart_alt</md-icon>${i18next.t('button.reset')}\n                </button>\n                <div filler></div>\n                <button @click=${() => this.editor.cancel()}>\n                  <md-icon>cancel</md-icon>${i18next.t('button.cancel')}\n                </button>\n                <button @click=${() => this.editor.save()}>\n                  <md-icon>done</md-icon>${i18next.t('button.confirm')}\n                </button>\n              `\n            : html`\n                <button @click=${() => (this.editMode = true)}>\n                  <md-icon>edit</md-icon>${i18next.t('button.edit')}\n                </button>\n              `\n        }\n      </div>\n    </div>`\n  }\n}\n"]}
+{"version":3,"file":"ox-contact.js","sourceRoot":"","sources":["../../src/ox-contact.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAKpD,MAAM,CAAN,IAAY,YAUX;AAVD,WAAY,YAAY;IACtB,sCAAsB,CAAA;IACtB,+BAAe,CAAA;IACf,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,qCAAqB,CAAA;IACrB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,yCAAyB,CAAA;IACzB,qCAAqB,CAAA;AACvB,CAAC,EAVW,YAAY,KAAZ,YAAY,QAUvB;AAED,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,6BAAa,CAAA;IACb,+BAAe,CAAA;IACf,iCAAiB,CAAA;AACnB,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAmBM,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAmBuB,YAAO,GAAY,EAAE,CAAA;QAExC,aAAQ,GAAa,KAAK,CAAA;IA6CrC,CAAC;IAzCC,MAAM;QACJ,OAAO,IAAI,CAAA;;QAGP,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA;yBACS,IAAI,CAAC,OAAO;6BACR,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;2BAC/B,CAAC,CAAc,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAA;gBACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;YACvB,CAAC;gCACiB;YACtB,CAAC,CAAC,IAAI,CAAA,8BAA8B,IAAI,CAAC,OAAO,sBACpD;;;;UAKI,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA;iCACe,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;kDACR,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;;iCAG1C,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;6CACd,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;iCAEtC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;2CACd,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;eAEvD;YACH,CAAC,CAAC,IAAI,CAAA;iCACe,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;2CAClB,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;eAG3D;;WAEG,CAAA;IACT,CAAC;;AAhEM,gBAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,AAhBY,CAgBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsB;AAExC;IAAR,KAAK,EAAE;2CAA2B;AAET;IAAzB,KAAK,CAAC,iBAAiB,CAAC;yCAAuB;AAvBrC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAkErB","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-contact-edit.js'\nimport './ox-contact-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { CommonHeaderStyles } from '@operato/styles'\n\nimport { OxContactEdit } from './ox-contact-edit.js'\nimport { Profile } from './ox-pfp-view.js'\n\nexport enum ContactField {\n  JobTitle = 'job-title',\n  Phone = 'phone',\n  Address = 'address',\n  Email = 'email',\n  Birthday = 'birthday',\n  Profile = 'profile',\n  Picture = 'picture',\n  Department = 'department',\n  Homepage = 'homepage'\n}\n\nexport enum ContactLabel {\n  home = 'home',\n  work = 'work',\n  other = 'other',\n  mobile = 'mobile'\n}\n\nexport type ContactItem = {\n  id?: string\n  type: ContactField\n  label: string\n  value: string\n}\n\nexport type Contact = {\n  id?: string\n  profile?: Profile\n  name?: string\n  company?: string\n  items?: ContactItem[]\n  note?: string\n}\n\n@customElement('ox-contact')\nexport class OxContact extends LitElement {\n  static styles = [\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface);\n      }\n\n      ox-contact-view,\n      ox-contact-edit {\n        padding: var(--pading-default);\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) contact: Contact = {}\n\n  @state() editMode?: boolean = false\n\n  @query('ox-contact-edit') editor!: OxContactEdit\n\n  render() {\n    return html` \n    <div container>\n      ${\n        this.editMode\n          ? html`<ox-contact-edit\n              .contact=${this.contact}\n              @edit-cancel=${() => (this.editMode = false)}\n              @edit-done=${(e: CustomEvent) => {\n                this.contact = e.detail\n                this.editMode = false\n              }}\n            ></ox-contact-edit>`\n          : html` <ox-contact-view .contact=${this.contact}></ox-contact-view> `\n      }\n      </div>\n      \n      <div class=\"footer\">\n        ${\n          this.editMode\n            ? html`\n                <button @click=${() => this.editor.reset()}>\n                  <md-icon>restart_alt</md-icon>${i18next.t('button.reset')}\n                </button>\n                <div filler></div>\n                <button @click=${() => this.editor.cancel()}>\n                  <md-icon>cancel</md-icon>${i18next.t('button.cancel')}\n                </button>\n                <button @click=${() => this.editor.save()}>\n                  <md-icon>done</md-icon>${i18next.t('button.confirm')}\n                </button>\n              `\n            : html`\n                <button @click=${() => (this.editMode = true)}>\n                  <md-icon>edit</md-icon>${i18next.t('button.edit')}\n                </button>\n              `\n        }\n      </div>\n    </div>`\n  }\n}\n"]}

package/dist/src/ox-pfp-edit.js

@@ -302,7 +302,7 @@ OxPfpEdit.styles = css `
       align-self: center;
 
       color: var(--file-uploader-icon-color, black);
-      --md-icon-size: var(--file-uploader-icon-size, 20px);
+      --md-icon-size: var(--file-uploader-icon-size, 24px);
     }
   `;
 __decorate([

package/dist/src/ox-pfp-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-pfp-edit.js","sourceRoot":"","sources":["../../src/ox-pfp-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view'\nimport { FileDropHelper } from '@operato/utils'\n\nfunction getPoint(e: Event): { x: number; y: number } | undefined {\n  if ((e as MouseEvent).button == 0) {\n    return {\n      x: (e as MouseEvent).clientX,\n      y: (e as MouseEvent).clientY\n    }\n  } else if ((e as TouchEvent).touches?.length == 1) {\n    const touch = (e as TouchEvent).touches[0]\n    return {\n      x: touch.clientX,\n      y: touch.clientY\n    }\n  } else {\n    return\n  }\n}\n\n@customElement('ox-pfp-edit')\nexport class OxPfpEdit extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n      overflow: hidden;\n    }\n\n    [content] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n    }\n\n    [circle] {\n      width: 90%;\n      height: 90%;\n      position: relative;\n    }\n\n    [circle]::after {\n      position: absolute;\n      content: '';\n      width: 100%;\n      height: 100%;\n      box-shadow: 0 0 0 1000px lightgray;\n      border-radius: 50%;\n      opacity: 0.9;\n    }\n\n    [circle]::before {\n      content: '';\n      display: block;\n      position: absolute;\n      text-align: left;\n      line-height: 24px;\n      top: 0;\n      right: 0;\n      width: 100%;\n      height: 100%;\n      background-repeat: no-repeat;\n      background-image: var(\n        --background-image,\n        linear-gradient(\n          var(--md-sys-color-on-primary-container, lightgray),\n          var(--md-sys-color-on-primary-container, lightgray)\n        )\n      );\n      transform: var(--image-transform, '');\n      background-size: 100% 100%;\n    }\n\n    [monogram] {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: 1px solid darkgray;\n      box-sizing: border-box;\n      padding: 0;\n      overflow: hidden;\n      background-color: gray;\n      color: white;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    [monogram] div {\n      flex: 1;\n      text-transform: uppercase;\n      font-size: 2em;\n      font-family: system-ui;\n      text-align: center;\n      vertical-align: center;\n    }\n\n    [file-load] {\n      position: absolute;\n      left: 0;\n      top: 0;\n\n      display: flex;\n      place-content: center;\n    }\n\n    [file-load]:hover {\n      opacity: 50%;\n    }\n\n    #input-file {\n      display: none;\n    }\n\n    label {\n      display: flex;\n      align-content: center;\n    }\n\n    md-icon {\n      align-self: center;\n\n      color: var(--file-uploader-icon-color, black);\n      --md-icon-size: var(--file-uploader-icon-size, 20px);\n    }\n  `\n\n  @property({ type: Object }) profile: Profile = {}\n  @property({ type: String }) name?: string\n\n  @query('[circle]') circle!: HTMLDivElement\n\n  private dragStart?: { x: number; y: number }\n\n  private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n  private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n  private dragStartHandler = this.onDragStart.bind(this) as EventListener\n  private wheelEventHandler = this.onWheelEvent.bind(this) as EventListener\n  private dropFileHandler = this.onDropFile.bind(this) as EventListener\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    FileDropHelper.set(this)\n\n    this.addEventListener('mousewheel', this.wheelEventHandler, false)\n\n    this.addEventListener('mousedown', this.dragStartHandler)\n    this.addEventListener('touchstart', this.dragStartHandler)\n\n    document.addEventListener('mouseup', this.dragEndHandler)\n    document.addEventListener('touchend', this.dragEndHandler)\n    document.addEventListener('touchcancel', this.dragEndHandler)\n    document.addEventListener('mousemove', this.dragMoveHandler)\n    document.addEventListener('touchmove', this.dragMoveHandler)\n\n    this.addEventListener('file-drop', this.dropFileHandler)\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('mousewheel', this.wheelEventHandler, false)\n\n    this.removeEventListener('mousedown', this.dragStartHandler!)\n    this.removeEventListener('touchstart', this.dragStartHandler!)\n\n    document.removeEventListener('mouseup', this.dragEndHandler!)\n    document.removeEventListener('touchend', this.dragEndHandler!)\n    document.removeEventListener('touchcancel', this.dragEndHandler!)\n    document.removeEventListener('mousemove', this.dragMoveHandler!)\n    document.removeEventListener('touchmove', this.dragMoveHandler!)\n\n    this.removeEventListener('file-drop', this.dropFileHandler)\n\n    super.disconnectedCallback()\n  }\n\n  render() {\n    return html`\n      <div content>\n        ${this.profile?.picture\n          ? html`<div circle></div>`\n          : html`<div monogram><div>${this.name?.replace(/\\s/g, '').slice(0, 2)}</div></div>`}\n      </div>\n\n      <div file-load>\n        <label>\n          <input\n            id=\"input-file\"\n            type=\"file\"\n            accept=\"image/*\"\n            hidden\n            capture=\"environment\"\n            @change=${(e: Event) => this.onChangeFile(e)}\n          />\n          <md-icon title=\"select image\">image_search</md-icon>\n        </label>\n      </div>\n\n      <slot></slot>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}\n\n    if (picture) {\n      const style = this.style\n\n      style.setProperty('--background-image', `url('${picture}')`)\n      style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)\n    }\n  }\n\n  get value() {\n    return this.profile\n  }\n\n  set value(value: Profile) {\n    this.profile = value\n  }\n\n  onWheelEvent(e: Event) {\n    e.preventDefault()\n\n    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n\n    const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n    this.profile = {\n      top,\n      left,\n      zoom: zoom * (1 - delta / 20),\n      picture,\n      file\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.profile\n      })\n    )\n  }\n\n  onDragStart(e: Event) {\n    const point = getPoint(e)\n\n    if (point) {\n      this.dragStart = point\n      e.stopPropagation()\n      return false\n    }\n  }\n\n  onDragMove(e: Event) {\n    if (!this.dragStart) {\n      return false\n    }\n\n    const point = getPoint(e)\n\n    if (!point) {\n      return false\n    }\n\n    e.stopPropagation()\n    e.preventDefault()\n\n    const dragStart = point\n    var { x, y } = point\n\n    x -= this.dragStart.x\n    y -= this.dragStart.y\n\n    this.dragStart = dragStart\n\n    const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n    const { offsetHeight, offsetWidth } = this\n\n    this.profile = {\n      top: top + (y / offsetHeight) * 100,\n      left: left + (x / offsetWidth) * 100,\n      zoom,\n      picture,\n      file\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.profile\n      })\n    )\n\n    return false\n  }\n\n  onDragEnd(e: Event) {\n    if (this.dragStart) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      delete this.dragStart\n    }\n  }\n\n  onDropFile(e: Event) {\n    const dropFiles = (e as CustomEvent).detail\n    const imageFile = dropFiles[0]\n    if (!imageFile) {\n      return\n    }\n\n    const picture = URL.createObjectURL(imageFile)\n\n    this.profile = {\n      left: 0,\n      top: 0,\n      zoom: 1,\n      picture,\n      file: imageFile\n    }\n  }\n\n  onChangeFile(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n    const imageFile = [...Array.from(fileInput.files as FileList)][0]\n    if (!imageFile) {\n      return\n    }\n\n    const picture = URL.createObjectURL(imageFile)\n\n    this.profile = {\n      left: 0,\n      top: 0,\n      zoom: 1,\n      picture,\n      file: imageFile\n    }\n\n    fileInput.files = null\n  }\n\n  fit() {\n    this.profile = {\n      ...this.profile,\n      left: 0,\n      top: 0,\n      zoom: 1\n    }\n  }\n\n  clear() {\n    this.profile = {}\n  }\n}\n"]}
+{"version":3,"file":"ox-pfp-edit.js","sourceRoot":"","sources":["../../src/ox-pfp-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view'\nimport { FileDropHelper } from '@operato/utils'\n\nfunction getPoint(e: Event): { x: number; y: number } | undefined {\n  if ((e as MouseEvent).button == 0) {\n    return {\n      x: (e as MouseEvent).clientX,\n      y: (e as MouseEvent).clientY\n    }\n  } else if ((e as TouchEvent).touches?.length == 1) {\n    const touch = (e as TouchEvent).touches[0]\n    return {\n      x: touch.clientX,\n      y: touch.clientY\n    }\n  } else {\n    return\n  }\n}\n\n@customElement('ox-pfp-edit')\nexport class OxPfpEdit extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n      overflow: hidden;\n    }\n\n    [content] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n    }\n\n    [circle] {\n      width: 90%;\n      height: 90%;\n      position: relative;\n    }\n\n    [circle]::after {\n      position: absolute;\n      content: '';\n      width: 100%;\n      height: 100%;\n      box-shadow: 0 0 0 1000px lightgray;\n      border-radius: 50%;\n      opacity: 0.9;\n    }\n\n    [circle]::before {\n      content: '';\n      display: block;\n      position: absolute;\n      text-align: left;\n      line-height: 24px;\n      top: 0;\n      right: 0;\n      width: 100%;\n      height: 100%;\n      background-repeat: no-repeat;\n      background-image: var(\n        --background-image,\n        linear-gradient(\n          var(--md-sys-color-on-primary-container, lightgray),\n          var(--md-sys-color-on-primary-container, lightgray)\n        )\n      );\n      transform: var(--image-transform, '');\n      background-size: 100% 100%;\n    }\n\n    [monogram] {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: 1px solid darkgray;\n      box-sizing: border-box;\n      padding: 0;\n      overflow: hidden;\n      background-color: gray;\n      color: white;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    [monogram] div {\n      flex: 1;\n      text-transform: uppercase;\n      font-size: 2em;\n      font-family: system-ui;\n      text-align: center;\n      vertical-align: center;\n    }\n\n    [file-load] {\n      position: absolute;\n      left: 0;\n      top: 0;\n\n      display: flex;\n      place-content: center;\n    }\n\n    [file-load]:hover {\n      opacity: 50%;\n    }\n\n    #input-file {\n      display: none;\n    }\n\n    label {\n      display: flex;\n      align-content: center;\n    }\n\n    md-icon {\n      align-self: center;\n\n      color: var(--file-uploader-icon-color, black);\n      --md-icon-size: var(--file-uploader-icon-size, 24px);\n    }\n  `\n\n  @property({ type: Object }) profile: Profile = {}\n  @property({ type: String }) name?: string\n\n  @query('[circle]') circle!: HTMLDivElement\n\n  private dragStart?: { x: number; y: number }\n\n  private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n  private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n  private dragStartHandler = this.onDragStart.bind(this) as EventListener\n  private wheelEventHandler = this.onWheelEvent.bind(this) as EventListener\n  private dropFileHandler = this.onDropFile.bind(this) as EventListener\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    FileDropHelper.set(this)\n\n    this.addEventListener('mousewheel', this.wheelEventHandler, false)\n\n    this.addEventListener('mousedown', this.dragStartHandler)\n    this.addEventListener('touchstart', this.dragStartHandler)\n\n    document.addEventListener('mouseup', this.dragEndHandler)\n    document.addEventListener('touchend', this.dragEndHandler)\n    document.addEventListener('touchcancel', this.dragEndHandler)\n    document.addEventListener('mousemove', this.dragMoveHandler)\n    document.addEventListener('touchmove', this.dragMoveHandler)\n\n    this.addEventListener('file-drop', this.dropFileHandler)\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('mousewheel', this.wheelEventHandler, false)\n\n    this.removeEventListener('mousedown', this.dragStartHandler!)\n    this.removeEventListener('touchstart', this.dragStartHandler!)\n\n    document.removeEventListener('mouseup', this.dragEndHandler!)\n    document.removeEventListener('touchend', this.dragEndHandler!)\n    document.removeEventListener('touchcancel', this.dragEndHandler!)\n    document.removeEventListener('mousemove', this.dragMoveHandler!)\n    document.removeEventListener('touchmove', this.dragMoveHandler!)\n\n    this.removeEventListener('file-drop', this.dropFileHandler)\n\n    super.disconnectedCallback()\n  }\n\n  render() {\n    return html`\n      <div content>\n        ${this.profile?.picture\n          ? html`<div circle></div>`\n          : html`<div monogram><div>${this.name?.replace(/\\s/g, '').slice(0, 2)}</div></div>`}\n      </div>\n\n      <div file-load>\n        <label>\n          <input\n            id=\"input-file\"\n            type=\"file\"\n            accept=\"image/*\"\n            hidden\n            capture=\"environment\"\n            @change=${(e: Event) => this.onChangeFile(e)}\n          />\n          <md-icon title=\"select image\">image_search</md-icon>\n        </label>\n      </div>\n\n      <slot></slot>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}\n\n    if (picture) {\n      const style = this.style\n\n      style.setProperty('--background-image', `url('${picture}')`)\n      style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)\n    }\n  }\n\n  get value() {\n    return this.profile\n  }\n\n  set value(value: Profile) {\n    this.profile = value\n  }\n\n  onWheelEvent(e: Event) {\n    e.preventDefault()\n\n    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n\n    const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n    this.profile = {\n      top,\n      left,\n      zoom: zoom * (1 - delta / 20),\n      picture,\n      file\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.profile\n      })\n    )\n  }\n\n  onDragStart(e: Event) {\n    const point = getPoint(e)\n\n    if (point) {\n      this.dragStart = point\n      e.stopPropagation()\n      return false\n    }\n  }\n\n  onDragMove(e: Event) {\n    if (!this.dragStart) {\n      return false\n    }\n\n    const point = getPoint(e)\n\n    if (!point) {\n      return false\n    }\n\n    e.stopPropagation()\n    e.preventDefault()\n\n    const dragStart = point\n    var { x, y } = point\n\n    x -= this.dragStart.x\n    y -= this.dragStart.y\n\n    this.dragStart = dragStart\n\n    const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n    const { offsetHeight, offsetWidth } = this\n\n    this.profile = {\n      top: top + (y / offsetHeight) * 100,\n      left: left + (x / offsetWidth) * 100,\n      zoom,\n      picture,\n      file\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.profile\n      })\n    )\n\n    return false\n  }\n\n  onDragEnd(e: Event) {\n    if (this.dragStart) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      delete this.dragStart\n    }\n  }\n\n  onDropFile(e: Event) {\n    const dropFiles = (e as CustomEvent).detail\n    const imageFile = dropFiles[0]\n    if (!imageFile) {\n      return\n    }\n\n    const picture = URL.createObjectURL(imageFile)\n\n    this.profile = {\n      left: 0,\n      top: 0,\n      zoom: 1,\n      picture,\n      file: imageFile\n    }\n  }\n\n  onChangeFile(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n    const imageFile = [...Array.from(fileInput.files as FileList)][0]\n    if (!imageFile) {\n      return\n    }\n\n    const picture = URL.createObjectURL(imageFile)\n\n    this.profile = {\n      left: 0,\n      top: 0,\n      zoom: 1,\n      picture,\n      file: imageFile\n    }\n\n    fileInput.files = null\n  }\n\n  fit() {\n    this.profile = {\n      ...this.profile,\n      left: 0,\n      top: 0,\n      zoom: 1\n    }\n  }\n\n  clear() {\n    this.profile = {}\n  }\n}\n"]}

package/dist/src/ox-pfp.js

@@ -12,9 +12,8 @@ let OxPfp = class OxPfp extends LitElement {
     }
     render() {
         return this.editMode
-            ? html `<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>
-          <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>
+            ? html `<ox-pfp-edit .profile=${this.profile} name=${this.name || ''} @dblclick=${() => this.edit.fit()}>
+          <md-icon title="clear" icon="clear" @click=${() => this.edit.clear()}>delete</md-icon>
           <md-icon
             title="save"
             icon="save"
@@ -58,11 +57,9 @@ OxPfp.styles = css `
 
     md-icon {
       position: absolute;
-    }
 
-    md-icon[icon='fit_screen'] {
-      bottom: 0;
-      left: 0;
+      color: var(--md-sys-color-primary);
+      --md-icon-size: 24px;
     }
 
     md-icon[icon='save'] {
@@ -81,8 +78,8 @@ OxPfp.styles = css `
     }
 
     md-icon[icon='clear'] {
-      top: 0;
-      right: 16px;
+      bottom: 0;
+      left: 0;
     }
   `;
 __decorate([

package/dist/src/ox-pfp.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-pfp.js","sourceRoot":"","sources":["../../src/ox-pfp.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,kBAAkB,CAAA;AACzB,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAKlE,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QAmDuB,YAAO,GAAY,EAAE,CAAA;QAGxC,aAAQ,GAAa,KAAK,CAAA;IA+BrC,CAAC;IA3BC,MAAM;QACJ,OAAO,IAAI,CAAC,QAAQ;YAClB,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE;+DACV,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;uDAC7B,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;;;;qBAIzD,GAAG,EAAE;gBACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;gBAChC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;gBACrB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,MAAM,EAAE,IAAI,CAAC,OAAO;iBACrB,CAAC,CACH,CAAA;YACH,CAAC;;;yDAG4C,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;wBAC9D;YAClB,CAAC,CAAC,IAAI,CAAA;kCACsB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE;uDACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;SAE1E,CAAA;IACP,CAAC;;AAnFM,YAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDlB,AAhDY,CAgDZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAc;AAEhC;IAAR,KAAK,EAAE;uCAA2B;AAEb;IAArB,KAAK,CAAC,aAAa,CAAC;mCAAiB;AAxD3B,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAqFjB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport './ox-pfp-edit.js'\nimport './ox-pfp-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view.js'\nimport { OxPfpEdit } from './ox-pfp-edit.js'\n\n@customElement('ox-pfp')\nexport class OxPfp extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      aspect-ratio: 1 / 1;\n    }\n\n    ox-pfp-edit,\n    ox-pfp-view {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    [buttons] {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      display: flex;\n    }\n\n    md-icon {\n      position: absolute;\n    }\n\n    md-icon[icon='fit_screen'] {\n      bottom: 0;\n      left: 0;\n    }\n\n    md-icon[icon='save'] {\n      bottom: 0;\n      right: 0;\n    }\n\n    md-icon[icon='edit'] {\n      bottom: 0;\n      right: 0;\n    }\n\n    md-icon[icon='cancel'] {\n      top: 0;\n      right: 0;\n    }\n\n    md-icon[icon='clear'] {\n      top: 0;\n      right: 16px;\n    }\n  `\n\n  @property({ type: Object }) profile: Profile = {}\n  @property({ type: String }) name?: string\n\n  @state() editMode?: boolean = false\n\n  @query('ox-pfp-edit') edit!: OxPfpEdit\n\n  render() {\n    return this.editMode\n      ? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>\n          <md-icon title=\"fit size\" icon=\"fit_screen\" @click=${() => this.edit.fit()}>fit_screen</md-icon>\n          <md-icon title=\"clear\" icon=\"clear\" @click=${() => this.edit.clear()}>clear</md-icon>\n          <md-icon\n            title=\"save\"\n            icon=\"save\"\n            @click=${() => {\n              this.profile = this.edit.profile\n              this.editMode = false\n              this.dispatchEvent(\n                new CustomEvent('change', {\n                  detail: this.profile\n                })\n              )\n            }}\n            >save</md-icon\n          >\n          <md-icon title=\"cancel\" icon=\"cancel\" @click=${() => (this.editMode = false)}>cancel</md-icon>\n        </ox-pfp-edit> `\n      : html`\n          <ox-pfp-view .profile=${this.profile} name=${this.name || ''}>\n            <md-icon title=\"edit\" icon=\"edit\" @click=${() => (this.editMode = true)}>edit</md-icon>\n          </ox-pfp-view>\n        `\n  }\n}\n"]}
+{"version":3,"file":"ox-pfp.js","sourceRoot":"","sources":["../../src/ox-pfp.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,kBAAkB,CAAA;AACzB,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAKlE,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QAiDuB,YAAO,GAAY,EAAE,CAAA;QAGxC,aAAQ,GAAa,KAAK,CAAA;IA8BrC,CAAC;IA1BC,MAAM;QACJ,OAAO,IAAI,CAAC,QAAQ;YAClB,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE,cAAc,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;uDACrD,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;;;;qBAIzD,GAAG,EAAE;gBACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;gBAChC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;gBACrB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,MAAM,EAAE,IAAI,CAAC,OAAO;iBACrB,CAAC,CACH,CAAA;YACH,CAAC;;;yDAG4C,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;wBAC9D;YAClB,CAAC,CAAC,IAAI,CAAA;kCACsB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE;uDACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;SAE1E,CAAA;IACP,CAAC;;AAhFM,YAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8ClB,AA9CY,CA8CZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAc;AAEhC;IAAR,KAAK,EAAE;uCAA2B;AAEb;IAArB,KAAK,CAAC,aAAa,CAAC;mCAAiB;AAtD3B,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAkFjB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport './ox-pfp-edit.js'\nimport './ox-pfp-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view.js'\nimport { OxPfpEdit } from './ox-pfp-edit.js'\n\n@customElement('ox-pfp')\nexport class OxPfp extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      aspect-ratio: 1 / 1;\n    }\n\n    ox-pfp-edit,\n    ox-pfp-view {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    [buttons] {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      display: flex;\n    }\n\n    md-icon {\n      position: absolute;\n\n      color: var(--md-sys-color-primary);\n      --md-icon-size: 24px;\n    }\n\n    md-icon[icon='save'] {\n      bottom: 0;\n      right: 0;\n    }\n\n    md-icon[icon='edit'] {\n      bottom: 0;\n      right: 0;\n    }\n\n    md-icon[icon='cancel'] {\n      top: 0;\n      right: 0;\n    }\n\n    md-icon[icon='clear'] {\n      bottom: 0;\n      left: 0;\n    }\n  `\n\n  @property({ type: Object }) profile: Profile = {}\n  @property({ type: String }) name?: string\n\n  @state() editMode?: boolean = false\n\n  @query('ox-pfp-edit') edit!: OxPfpEdit\n\n  render() {\n    return this.editMode\n      ? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''} @dblclick=${() => this.edit.fit()}>\n          <md-icon title=\"clear\" icon=\"clear\" @click=${() => this.edit.clear()}>delete</md-icon>\n          <md-icon\n            title=\"save\"\n            icon=\"save\"\n            @click=${() => {\n              this.profile = this.edit.profile\n              this.editMode = false\n              this.dispatchEvent(\n                new CustomEvent('change', {\n                  detail: this.profile\n                })\n              )\n            }}\n            >save</md-icon\n          >\n          <md-icon title=\"cancel\" icon=\"cancel\" @click=${() => (this.editMode = false)}>cancel</md-icon>\n        </ox-pfp-edit> `\n      : html`\n          <ox-pfp-view .profile=${this.profile} name=${this.name || ''}>\n            <md-icon title=\"edit\" icon=\"edit\" @click=${() => (this.editMode = true)}>edit</md-icon>\n          </ox-pfp-view>\n        `\n  }\n}\n"]}

package/dist/stories/ox-contact.stories.d.ts

@@ -1,5 +1,6 @@
 import { TemplateResult } from 'lit';
 import '@material/web/icon/icon.js';
+import '@operato/i18n';
 import '../src/ox-contact.js';
 import { Contact } from '../src/ox-contact.js';
 declare const _default: {

package/dist/stories/ox-contact.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import '@material/web/icon/icon.js';
+import '@operato/i18n';
 import '../src/ox-contact.js';
 import { ContactField } from '../src/ox-contact.js';
 export default {
@@ -32,6 +33,7 @@ const Template = ({ contact }) => html `
 
   <style>
     body {
+      background-color: var(--md-sys-color-surface);
     }
   </style>
 

package/dist/stories/ox-contact.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-contact.stories.js","sourceRoot":"","sources":["../../stories/ox-contact.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,4BAA4B,CAAA;AACnC,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAW,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAE5D,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC/B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;yBA0BxC,OAAO;CAC/B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,UAAU;QACnB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,KAAK;gBACxB,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,eAAe;aACvB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,KAAK;gBACxB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,eAAe;aACvB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,KAAK;gBACxB,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,uBAAuB;aAC/B;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,KAAK;gBACxB,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,mBAAmB;aAC3B;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,OAAO;gBAC1B,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,iBAAiB;aACzB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,OAAO;gBAC1B,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,iBAAiB;aACzB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,OAAO;gBAC1B,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,eAAe;aACvB;SACF;KACF;CACF,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport '@material/web/icon/icon.js'\nimport '../src/ox-contact.js'\n\nimport { Contact, ContactField } from '../src/ox-contact.js'\n\nexport default {\n  title: 'OxContact',\n  component: 'ox-contact',\n  argTypes: {\n    contact: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  contact?: Contact\n}\n\nconst Template: Story<ArgTypes> = ({ contact }: ArgTypes) => html`\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-contact .contact=${contact}> </ox-contact>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  contact: {\n    note: 'abcdefg',\n    name: '남 상혁',\n    company: 'Hatiolab',\n    items: [\n      {\n        id: '2',\n        type: ContactField.Phone,\n        label: 'home',\n        value: '010-1223-3443'\n      },\n      {\n        id: '3',\n        type: ContactField.Phone,\n        label: 'mobile',\n        value: '010-1122-3344'\n      },\n      {\n        id: '4',\n        type: ContactField.Email,\n        label: 'work',\n        value: 'heartyoh@hatiolab.com'\n      },\n      {\n        id: '5',\n        type: ContactField.Email,\n        label: 'home',\n        value: 'shnam2k@gmail.com'\n      },\n      {\n        id: '6',\n        type: ContactField.Address,\n        label: 'home',\n        value: '경기도 성남시 분당구 123'\n      },\n      {\n        id: '7',\n        type: ContactField.Address,\n        label: 'work',\n        value: '경기도 성남시 분당구 234'\n      },\n      {\n        id: '8',\n        type: ContactField.Address,\n        label: 'work',\n        value: '서울특별시 종로구 123'\n      }\n    ]\n  }\n}\n"]}
+{"version":3,"file":"ox-contact.stories.js","sourceRoot":"","sources":["../../stories/ox-contact.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,4BAA4B,CAAA;AACnC,OAAO,eAAe,CAAA;AACtB,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAW,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAE5D,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC/B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA2BxC,OAAO;CAC/B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,UAAU;QACnB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,KAAK;gBACxB,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,eAAe;aACvB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,KAAK;gBACxB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,eAAe;aACvB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,KAAK;gBACxB,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,uBAAuB;aAC/B;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,KAAK;gBACxB,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,mBAAmB;aAC3B;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,OAAO;gBAC1B,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,iBAAiB;aACzB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,OAAO;gBAC1B,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,iBAAiB;aACzB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,OAAO;gBAC1B,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,eAAe;aACvB;SACF;KACF;CACF,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n'\nimport '../src/ox-contact.js'\n\nimport { Contact, ContactField } from '../src/ox-contact.js'\n\nexport default {\n  title: 'OxContact',\n  component: 'ox-contact',\n  argTypes: {\n    contact: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  contact?: Contact\n}\n\nconst Template: Story<ArgTypes> = ({ contact }: ArgTypes) => html`\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n  <style>\n    body {\n      background-color: var(--md-sys-color-surface);\n    }\n  </style>\n\n  <ox-contact .contact=${contact}> </ox-contact>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  contact: {\n    note: 'abcdefg',\n    name: '남 상혁',\n    company: 'Hatiolab',\n    items: [\n      {\n        id: '2',\n        type: ContactField.Phone,\n        label: 'home',\n        value: '010-1223-3443'\n      },\n      {\n        id: '3',\n        type: ContactField.Phone,\n        label: 'mobile',\n        value: '010-1122-3344'\n      },\n      {\n        id: '4',\n        type: ContactField.Email,\n        label: 'work',\n        value: 'heartyoh@hatiolab.com'\n      },\n      {\n        id: '5',\n        type: ContactField.Email,\n        label: 'home',\n        value: 'shnam2k@gmail.com'\n      },\n      {\n        id: '6',\n        type: ContactField.Address,\n        label: 'home',\n        value: '경기도 성남시 분당구 123'\n      },\n      {\n        id: '7',\n        type: ContactField.Address,\n        label: 'work',\n        value: '경기도 성남시 분당구 234'\n      },\n      {\n        id: '8',\n        type: ContactField.Address,\n        label: 'work',\n        value: '서울특별시 종로구 123'\n      }\n    ]\n  }\n}\n"]}

package/dist/stories/ox-pfp.stories.d.ts

@@ -1,5 +1,6 @@
 import { TemplateResult } from 'lit';
 import '@material/web/icon/icon.js';
+import '@operato/i18n';
 import '../src/ox-pfp.js';
 import { Profile } from '../src/ox-pfp-view.js';
 declare const _default: {

package/dist/stories/ox-pfp.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import '@material/web/icon/icon.js';
+import '@operato/i18n';
 import '../src/ox-pfp.js';
 export default {
     title: 'OxPfp',