@operato/contact 1.1.52 → 1.1.53

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

@@ -1,4 +1,5 @@
 import { __decorate } from "tslib";
+import './ox-pfp-view.js';
 import { html, css, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ContactField } from './ox-contact';
@@ -9,7 +10,7 @@ let OxContactView = class OxContactView extends LitElement {
     }
     render() {
         var _a;
-        const { items = [], note } = this.contact || {};
+        const { profile, items = [], note } = this.contact || {};
         var sorted = {};
         items.forEach(item => {
             if (!sorted[item.type]) {
@@ -23,7 +24,8 @@ let OxContactView = class OxContactView extends LitElement {
         const companies = sorted[ContactField.Company] || [];
         return html `
       <div name>
-        <div monogram>${(_a = names[0]) === null || _a === void 0 ? void 0 : _a.value.replace(/\s/g, '').slice(0, 2)}</div>
+        <ox-pfp-view .profile=${profile} .name=${(_a = names[0]) === null || _a === void 0 ? void 0 : _a.value}></ox-pfp-view>
+
         <div name-content>
           ${names.map(item => html `<div>
                 <span data-item="value">${item.value}</span>
@@ -106,23 +108,10 @@ OxContactView.styles = css `
       font-size: 1.4em;
     }
 
-    :host > div[name] > [monogram] {
+    :host ox-pfp-view {
       display: inline-block;
       width: 100px;
       height: 100px;
-      line-height: 100px;
-      border-radius: 999px;
-      border: 1px solid darkgray;
-      box-sizing: border-box;
-      padding: 0;
-      font-size: 40px;
-      font-family: system-ui;
-      overflow: hidden;
-      text-align: center;
-      vertical-align: center;
-      background-color: gray;
-      color: white;
-      text-transform: uppercase;
     }
 
     :host > div[name] > div[name-content] {

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,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAW,YAAY,EAAe,MAAM,cAAc,CAAA;AAG1D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAoFuB,YAAO,GAAY,EAAE,CAAA;IAwDnD,CAAC;IAtDC,MAAM;;QACJ,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAC/C,IAAI,MAAM,GAAsC,EAAE,CAAA;QAElD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACnB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,EAAE;gBAChC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;aAC3B;iBAAM;gBACL,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;aACvC;QACH,CAAC,CAAC,CAAA;QAEF,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;QAC7C,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;QAEpD,OAAO,IAAI,CAAA;;wBAES,MAAA,KAAK,CAAC,CAAC,CAAC,0CAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;;YAE1D,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;0CACwB,IAAI,CAAC,KAAK;qBAC/B,CACV;YACC,SAAS,CAAC,GAAG,CACb,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;0CACwB,IAAI,CAAC,KAAK;qBAC/B,CACV;;;QAGH,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,CAAC,IAAI,CAAA,kBAAkB,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;cACxC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;cACb,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;6CACyB,IAAI,CAAC,KAAK;4CACX,IAAI,CAAC,KAAK;uBAC/B,CACV;iBACI,CACR;;;eAGM,IAAI,IAAI,EAAE;;KAEpB,CAAA;IACH,CAAC;;AA1IM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAsB;AApFtC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA4IzB;SA5IY,aAAa","sourcesContent":["import { 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    }\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    }\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.3;\n      background-image: linear-gradient(var(--primary-color, gray), var(--primary-color, gray));\n      z-index: -1;\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 > div[name] > [monogram] {\n      display: inline-block;\n      width: 100px;\n      height: 100px;\n      line-height: 100px;\n      border-radius: 999px;\n      border: 1px solid darkgray;\n      box-sizing: border-box;\n      padding: 0;\n      font-size: 40px;\n      font-family: system-ui;\n      overflow: hidden;\n      text-align: center;\n      vertical-align: center;\n      background-color: gray;\n      color: white;\n      text-transform: uppercase;\n    }\n\n    :host > div[name] > div[name-content] {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n  `\n\n  @property({ type: Object }) contact: Contact = {}\n\n  render() {\n    const { items = [], 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    const names = sorted[ContactField.Name] || []\n    const companies = sorted[ContactField.Company] || []\n\n    return html`\n      <div name>\n        <div monogram>${names[0]?.value.replace(/\\s/g, '').slice(0, 2)}</div>\n        <div name-content>\n          ${names.map(\n            item =>\n              html`<div>\n                <span data-item=\"value\">${item.value}</span>\n              </div>`\n          )}\n          ${companies.map(\n            item =>\n              html`<div>\n                <span data-item=\"value\">${item.value}</span>\n              </div>`\n          )}\n        </div>\n      </div>\n      ${['email', 'phone', 'address', 'company', 'etc']\n        .map(type => sorted[type])\n        .filter(items => items && items.length > 0)\n        .map(\n          items => html`<div data-type=${items[0].type}>\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        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;AAC3D,OAAO,EAAW,YAAY,EAAe,MAAM,cAAc,CAAA;AAG1D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAuEuB,YAAO,GAAY,EAAE,CAAA;IAyDnD,CAAC;IAvDC,MAAM;;QACJ,MAAM,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QACxD,IAAI,MAAM,GAAsC,EAAE,CAAA;QAElD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACnB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,EAAE;gBAChC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;aAC3B;iBAAM;gBACL,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;aACvC;QACH,CAAC,CAAC,CAAA;QAEF,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;QAC7C,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;QAEpD,OAAO,IAAI,CAAA;;gCAEiB,OAAO,UAAU,MAAA,KAAK,CAAC,CAAC,CAAC,0CAAE,KAAK;;;YAGpD,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;0CACwB,IAAI,CAAC,KAAK;qBAC/B,CACV;YACC,SAAS,CAAC,GAAG,CACb,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;0CACwB,IAAI,CAAC,KAAK;qBAC/B,CACV;;;QAGH,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,CAAC,IAAI,CAAA,kBAAkB,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;cACxC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;cACb,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;6CACyB,IAAI,CAAC,KAAK;4CACX,IAAI,CAAC,KAAK;uBAC/B,CACV;iBACI,CACR;;;eAGM,IAAI,IAAI,EAAE;;KAEpB,CAAA;IACH,CAAC;;AA9HM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoElB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAsB;AAvEtC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAgIzB;SAhIY,aAAa","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    }\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    }\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.3;\n      background-image: linear-gradient(var(--primary-color, gray), var(--primary-color, gray));\n      z-index: -1;\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-view {\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\n  @property({ type: Object }) contact: Contact = {}\n\n  render() {\n    const { profile, items = [], 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    const names = sorted[ContactField.Name] || []\n    const companies = sorted[ContactField.Company] || []\n\n    return html`\n      <div name>\n        <ox-pfp-view .profile=${profile} .name=${names[0]?.value}></ox-pfp-view>\n\n        <div name-content>\n          ${names.map(\n            item =>\n              html`<div>\n                <span data-item=\"value\">${item.value}</span>\n              </div>`\n          )}\n          ${companies.map(\n            item =>\n              html`<div>\n                <span data-item=\"value\">${item.value}</span>\n              </div>`\n          )}\n        </div>\n      </div>\n      ${['email', 'phone', 'address', 'company', 'etc']\n        .map(type => sorted[type])\n        .filter(items => items && items.length > 0)\n        .map(\n          items => html`<div data-type=${items[0].type}>\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        note\n        <div>${note || ''}</div>\n      </div>\n    `\n  }\n}\n"]}

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

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
 import './ox-contact-edit';
 import './ox-contact-view';
+import { Profile } from './ox-pfp-view.js';
 export declare enum ContactField {
     Name = "name",
     JobTitle = "job-title",
@@ -27,6 +28,7 @@ export type ContactItem = {
     value: string;
 };
 export type Contact = {
+    profile?: Profile;
     items?: ContactItem[];
     note?: string;
 };

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,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,mBAAmB,CAAA;AAC1B,OAAO,mBAAmB,CAAA;AAE1B,MAAM,CAAN,IAAY,YAYX;AAZD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,sCAAsB,CAAA;IACtB,+BAAe,CAAA;IACf,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,qCAAqB,CAAA;IACrB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,yCAAyB,CAAA;IACzB,mCAAmB,CAAA;IACnB,qCAAqB,CAAA;AACvB,CAAC,EAZW,YAAY,KAAZ,YAAY,QAYvB;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;AAeM,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAYuB,YAAO,GAAY,EAAE,CAAA;QAExC,aAAQ,GAAa,KAAK,CAAA;IAerC,CAAC;IAbC,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,QAAQ;YACzB,CAAC,CAAC,IAAI,CAAA;qBACS,IAAI,CAAC,OAAO;yBACR,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;uBAC/B,CAAC,CAAc,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAA;gBACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;YACvB,CAAC;4BACiB;YACtB,CAAC,CAAC,IAAI,CAAA,8BAA8B,IAAI,CAAC,OAAO;wCACd,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAA;IACrF,CAAC;;AA3BM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;GASlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsB;AAExC;IAAR,KAAK,EAAE;2CAA2B;AAdxB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA6BrB;SA7BY,SAAS","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport './ox-contact-edit'\nimport './ox-contact-view'\n\nexport enum ContactField {\n  Name = 'name',\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  Company = 'company',\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  items?: ContactItem[]\n  note?: string\n}\n\n@customElement('ox-contact')\nexport class OxContact extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    button {\n      display: block;\n      margin-left: auto;\n    }\n  `\n\n  @property({ type: Object }) contact: Contact = {}\n\n  @state() editMode?: boolean = false\n\n  render() {\n    return html`${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          <button value=\"Edit\" @click=${() => (this.editMode = true)}>Edit</button>`} `\n  }\n}\n"]}
+{"version":3,"file":"ox-contact.js","sourceRoot":"","sources":["../../src/ox-contact.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,mBAAmB,CAAA;AAC1B,OAAO,mBAAmB,CAAA;AAG1B,MAAM,CAAN,IAAY,YAYX;AAZD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,sCAAsB,CAAA;IACtB,+BAAe,CAAA;IACf,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,qCAAqB,CAAA;IACrB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,yCAAyB,CAAA;IACzB,mCAAmB,CAAA;IACnB,qCAAqB,CAAA;AACvB,CAAC,EAZW,YAAY,KAAZ,YAAY,QAYvB;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;AAgBM,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAYuB,YAAO,GAAY,EAAE,CAAA;QAExC,aAAQ,GAAa,KAAK,CAAA;IAerC,CAAC;IAbC,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,QAAQ;YACzB,CAAC,CAAC,IAAI,CAAA;qBACS,IAAI,CAAC,OAAO;yBACR,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;uBAC/B,CAAC,CAAc,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAA;gBACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;YACvB,CAAC;4BACiB;YACtB,CAAC,CAAC,IAAI,CAAA,8BAA8B,IAAI,CAAC,OAAO;wCACd,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAA;IACrF,CAAC;;AA3BM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;GASlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsB;AAExC;IAAR,KAAK,EAAE;2CAA2B;AAdxB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA6BrB;SA7BY,SAAS","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport './ox-contact-edit'\nimport './ox-contact-view'\nimport { Profile } from './ox-pfp-view.js'\n\nexport enum ContactField {\n  Name = 'name',\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  Company = 'company',\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  profile?: Profile\n  items?: ContactItem[]\n  note?: string\n}\n\n@customElement('ox-contact')\nexport class OxContact extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    button {\n      display: block;\n      margin-left: auto;\n    }\n  `\n\n  @property({ type: Object }) contact: Contact = {}\n\n  @state() editMode?: boolean = false\n\n  render() {\n    return html`${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          <button value=\"Edit\" @click=${() => (this.editMode = true)}>Edit</button>`} `\n  }\n}\n"]}

package/dist/src/ox-pfp-edit.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, PropertyValues } from 'lit';
+import { Profile } from './ox-pfp-view';
+export declare class OxPfpEdit extends LitElement {
+    static styles: import("lit").CSSResult;
+    profile: Profile;
+    name?: string;
+    circle: HTMLDivElement;
+    private dragStart?;
+    private dragEndHandler;
+    private dragMoveHandler;
+    private dragStartHandler;
+    private wheelEventHandler;
+    private dropFileHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+    get value(): Profile;
+    set value(value: Profile);
+    onWheelEvent(e: Event): void;
+    onDragStart(e: Event): false | undefined;
+    onDragMove(e: Event): boolean;
+    onDragEnd(e: Event): void;
+    onDropFile(e: Event): void;
+    onChangeFile(e: Event): void;
+    fit(): void;
+    clear(): void;
+}

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

@@ -0,0 +1,314 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { FileDropHelper } from '@operato/utils';
+function getPoint(e) {
+    var _a;
+    if (e.button == 0) {
+        return {
+            x: e.clientX,
+            y: e.clientY
+        };
+    }
+    else if (((_a = e.touches) === null || _a === void 0 ? void 0 : _a.length) == 1) {
+        const touch = e.touches[0];
+        return {
+            x: touch.clientX,
+            y: touch.clientY
+        };
+    }
+    else {
+        return;
+    }
+}
+let OxPfpEdit = class OxPfpEdit extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.profile = {};
+        this.dragEndHandler = this.onDragEnd.bind(this);
+        this.dragMoveHandler = this.onDragMove.bind(this);
+        this.dragStartHandler = this.onDragStart.bind(this);
+        this.wheelEventHandler = this.onWheelEvent.bind(this);
+        this.dropFileHandler = this.onDropFile.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        FileDropHelper.set(this);
+        this.addEventListener('mousewheel', this.wheelEventHandler, false);
+        this.addEventListener('mousedown', this.dragStartHandler);
+        this.addEventListener('touchstart', this.dragStartHandler);
+        document.addEventListener('mouseup', this.dragEndHandler);
+        document.addEventListener('touchend', this.dragEndHandler);
+        document.addEventListener('touchcancel', this.dragEndHandler);
+        document.addEventListener('mousemove', this.dragMoveHandler);
+        document.addEventListener('touchmove', this.dragMoveHandler);
+        this.addEventListener('file-drop', this.dropFileHandler);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('mousewheel', this.wheelEventHandler, false);
+        this.removeEventListener('mousedown', this.dragStartHandler);
+        this.removeEventListener('touchstart', this.dragStartHandler);
+        document.removeEventListener('mouseup', this.dragEndHandler);
+        document.removeEventListener('touchend', this.dragEndHandler);
+        document.removeEventListener('touchcancel', this.dragEndHandler);
+        document.removeEventListener('mousemove', this.dragMoveHandler);
+        document.removeEventListener('touchmove', this.dragMoveHandler);
+        this.removeEventListener('file-drop', this.dropFileHandler);
+        super.disconnectedCallback();
+    }
+    render() {
+        var _a, _b;
+        return html `
+      <div content>
+        ${((_a = this.profile) === null || _a === void 0 ? void 0 : _a.picture)
+            ? html `<div circle></div>`
+            : html `<div monogram><div>${(_b = this.name) === null || _b === void 0 ? void 0 : _b.replace(/\s/g, '').slice(0, 2)}</div></div>`}
+      </div>
+
+      <div file-load>
+        <label>
+          <input
+            id="input-file"
+            type="file"
+            accept="image/*"
+            hidden
+            capture="environment"
+            @change=${(e) => this.onChangeFile(e)}
+          />
+          <mwc-icon>image_search</mwc-icon>
+        </label>
+      </div>
+
+      <slot></slot>
+    `;
+    }
+    updated(changes) {
+        const { picture, zoom = 1, left = 0, top = 0 } = this.profile;
+        if (picture) {
+            const style = this.style;
+            style.setProperty('--background-image', `url(${picture})`);
+            style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`);
+        }
+    }
+    get value() {
+        return this.profile;
+    }
+    set value(value) {
+        this.profile = value;
+    }
+    onWheelEvent(e) {
+        e.preventDefault();
+        var delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail));
+        const { top = 0, left = 0, zoom = 1, picture } = this.profile;
+        this.profile = {
+            top,
+            left,
+            zoom: zoom * (1 - delta / 20),
+            picture
+        };
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.profile
+        }));
+    }
+    onDragStart(e) {
+        const point = getPoint(e);
+        if (point) {
+            this.dragStart = point;
+            e.stopPropagation();
+            return false;
+        }
+    }
+    onDragMove(e) {
+        if (!this.dragStart) {
+            return false;
+        }
+        const point = getPoint(e);
+        if (!point) {
+            return false;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        const dragStart = point;
+        var { x, y } = point;
+        x -= this.dragStart.x;
+        y -= this.dragStart.y;
+        this.dragStart = dragStart;
+        const { top = 0, left = 0, zoom = 1, picture } = this.profile;
+        const { offsetHeight, offsetWidth } = this;
+        this.profile = {
+            top: top + (y / offsetHeight) * 100,
+            left: left + (x / offsetWidth) * 100,
+            zoom,
+            picture
+        };
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.profile
+        }));
+        return false;
+    }
+    onDragEnd(e) {
+        if (this.dragStart) {
+            e.stopPropagation();
+            e.preventDefault();
+            delete this.dragStart;
+        }
+    }
+    onDropFile(e) {
+        const dropFiles = e.detail;
+        const imageFile = dropFiles[0];
+        if (!imageFile) {
+            return;
+        }
+        const picture = URL.createObjectURL(imageFile);
+        this.profile = {
+            left: 0,
+            top: 0,
+            zoom: 1,
+            picture
+        };
+    }
+    onChangeFile(e) {
+        const fileInput = e.currentTarget;
+        const imageFile = [...Array.from(fileInput.files)][0];
+        if (!imageFile) {
+            return;
+        }
+        const picture = URL.createObjectURL(imageFile);
+        this.profile = {
+            left: 0,
+            top: 0,
+            zoom: 1,
+            picture
+        };
+        fileInput.files = null;
+    }
+    fit() {
+        this.profile = {
+            ...this.profile,
+            left: 0,
+            top: 0,
+            zoom: 1
+        };
+    }
+    clear() {
+        this.profile = {};
+    }
+};
+OxPfpEdit.styles = css `
+    :host {
+      display: inline-block;
+      overflow: hidden;
+    }
+
+    [content] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    [circle] {
+      width: 90%;
+      height: 90%;
+      position: relative;
+    }
+
+    [circle]::after {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 100%;
+      box-shadow: 0 0 0 1000px lightgray;
+      border-radius: 50%;
+      opacity: 0.9;
+    }
+
+    [circle]::before {
+      content: '';
+      display: block;
+      position: absolute;
+      text-align: left;
+      line-height: 24px;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background-repeat: no-repeat;
+      background-image: var(
+        --background-image,
+        linear-gradient(var(--primary-color, lightgray), var(--primary-color, lightgray))
+      );
+      transform: var(--image-transform, '');
+      background-size: 100% 100%;
+    }
+
+    [monogram] {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      border: 1px solid darkgray;
+      box-sizing: border-box;
+      padding: 0;
+      overflow: hidden;
+      background-color: gray;
+      color: white;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    [monogram] div {
+      flex: 1;
+      text-transform: uppercase;
+      font-size: 2em;
+      font-family: system-ui;
+      text-align: center;
+      vertical-align: center;
+    }
+
+    [file-load] {
+      position: absolute;
+      left: 0;
+      top: 0;
+
+      display: flex;
+      place-content: center;
+    }
+
+    [file-load]:hover {
+      opacity: 50%;
+    }
+
+    #input-file {
+      display: none;
+    }
+
+    label {
+      display: flex;
+      align-content: center;
+    }
+
+    mwc-icon {
+      align-self: center;
+
+      color: var(--file-uploader-icon-color, black);
+      --mdc-icon-size: var(--file-uploader-icon-size, 20px);
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxPfpEdit.prototype, "profile", void 0);
+__decorate([
+    property({ type: String })
+], OxPfpEdit.prototype, "name", void 0);
+__decorate([
+    query('[circle]')
+], OxPfpEdit.prototype, "circle", void 0);
+OxPfpEdit = __decorate([
+    customElement('ox-pfp-edit')
+], OxPfpEdit);
+export { OxPfpEdit };
+//# sourceMappingURL=ox-pfp-edit.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-pfp-edit.js","sourceRoot":"","sources":["../../src/ox-pfp-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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      z-index: -1;\n      background-repeat: no-repeat;\n      background-image: var(\n        --background-image,\n        linear-gradient(var(--primary-color, lightgray), var(--primary-color, lightgray))\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    mwc-icon {\n      align-self: center;\n\n      color: var(--file-uploader-icon-color, black);\n      --mdc-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  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          <mwc-icon>image_search</mwc-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 } = this.profile\n    this.profile = {\n      top,\n      left,\n      zoom: zoom * (1 - delta / 20),\n      picture\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 } = 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    }\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    }\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    }\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-editor copy.d.ts

@@ -0,0 +1,11 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare class OxPfpEditor extends LitElement {
+    static styles: import("lit").CSSResult;
+    picture?: string;
+    zoom: number;
+    left: number;
+    top: number;
+    container: HTMLDivElement;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+}

package/dist/src/ox-pfp-editor copy.js

@@ -0,0 +1,71 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+let OxPfpEditor = class OxPfpEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.zoom = 1;
+        this.left = 0;
+        this.top = 0;
+    }
+    render() {
+        return html ` <div container style="background-image: url(${this.picture})"></div> `;
+    }
+    updated(changes) {
+        if (changes.has('picture')) {
+            const style = this.container.style;
+            style.backgroundImage = `url($this.picture})`;
+            style.backgroundPositionX = `${this.left}px`;
+            style.backgroundPositionY = `${this.top}px`;
+        }
+    }
+};
+OxPfpEditor.styles = css `
+    :host {
+      display: block;
+      background-color: black;
+    }
+
+    [container] {
+      width: 200px;
+      height: 250px;
+      margin: 1em auto;
+      -webkit-filter: drop-shadow(0px -4px 4px black);
+      filter: drop-shadow(0px -4px 4px black);
+      overflow: hidden;
+      position: relative;
+      background-repeat: no-repeat;
+    }
+
+    [container]:after {
+      position: absolute;
+      content: '';
+      width: 100px;
+      height: 100px;
+      box-shadow: 0 0 0 1000px #fff7;
+      border-radius: 50%;
+      left: 50px;
+      top: 35px;
+      opacity: 0.5;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], OxPfpEditor.prototype, "picture", void 0);
+__decorate([
+    state()
+], OxPfpEditor.prototype, "zoom", void 0);
+__decorate([
+    state()
+], OxPfpEditor.prototype, "left", void 0);
+__decorate([
+    state()
+], OxPfpEditor.prototype, "top", void 0);
+__decorate([
+    query('[container]')
+], OxPfpEditor.prototype, "container", void 0);
+OxPfpEditor = __decorate([
+    customElement('ox-pfp-edit')
+], OxPfpEditor);
+export { OxPfpEditor };
+//# sourceMappingURL=ox-pfp-edit%20copy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-pfp-edit copy.js","sourceRoot":"","sources":["../../src/ox-pfp-edit copy.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGlE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAiCI,SAAI,GAAW,CAAC,CAAA;QAChB,SAAI,GAAW,CAAC,CAAA;QAChB,QAAG,GAAW,CAAC,CAAA;IAgB1B,CAAC;IAZC,MAAM;QACJ,OAAO,IAAI,CAAA,gDAAgD,IAAI,CAAC,OAAO,YAAY,CAAA;IACrF,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;YAClC,KAAK,CAAC,eAAe,GAAG,qBAAqB,CAAA;YAC7C,KAAK,CAAC,mBAAmB,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAA;YAC5C,KAAK,CAAC,mBAAmB,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;SAC5C;IACH,CAAC;;AAjDM,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAiB;AAEnC;IAAR,KAAK,EAAE;yCAAiB;AAChB;IAAR,KAAK,EAAE;yCAAiB;AAChB;IAAR,KAAK,EAAE;wCAAgB;AAEF;IAArB,KAAK,CAAC,aAAa,CAAC;8CAA2B;AArCrC,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAmDvB;SAnDY,WAAW","sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\n@customElement('ox-pfp-edit')\nexport class OxPfpEditor extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      background-color: black;\n    }\n\n    [container] {\n      width: 200px;\n      height: 250px;\n      margin: 1em auto;\n      -webkit-filter: drop-shadow(0px -4px 4px black);\n      filter: drop-shadow(0px -4px 4px black);\n      overflow: hidden;\n      position: relative;\n      background-repeat: no-repeat;\n    }\n\n    [container]:after {\n      position: absolute;\n      content: '';\n      width: 100px;\n      height: 100px;\n      box-shadow: 0 0 0 1000px #fff7;\n      border-radius: 50%;\n      left: 50px;\n      top: 35px;\n      opacity: 0.5;\n    }\n  `\n\n  @property({ type: String }) picture?: string\n\n  @state() zoom: number = 1\n  @state() left: number = 0\n  @state() top: number = 0\n\n  @query('[container]') container!: HTMLDivElement\n\n  render() {\n    return html` <div container style=\"background-image: url(${this.picture})\"></div> `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('picture')) {\n      const style = this.container.style\n      style.backgroundImage = `url($this.picture})`\n      style.backgroundPositionX = `${this.left}px`\n      style.backgroundPositionY = `${this.top}px`\n    }\n  }\n}\n"]}

package/dist/src/ox-pfp-editor.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, PropertyValues } from 'lit';
+import { Profile } from './ox-pfp-viewer';
+export declare class OxPfpEditor extends LitElement {
+    static styles: import("lit").CSSResult;
+    profile: Profile;
+    circle: HTMLDivElement;
+    private dragStart?;
+    private dragEndHandler;
+    private dragMoveHandler;
+    private dragStartHandler;
+    private wheelEventHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    onWheelEvent(e: Event): void;
+    onDragStart(e: Event): false | undefined;
+    onDragMove(e: Event): boolean;
+    onDragEnd(e: Event): void;
+    updated(changes: PropertyValues<this>): void;
+}