@operato/contact 1.1.52

package/dist/src/OxContactEdit.js

@@ -0,0 +1,235 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon-button';
+import { html, css, LitElement } from 'lit';
+import { property, state, query, queryAll } from 'lit/decorators.js';
+import { ContactField } from './OxContact';
+import { ScrollbarStyles } from '@operato/styles';
+export class OxContactEdit extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.contact = {};
+        this.stageContact = JSON.parse(JSON.stringify(this.contact));
+    }
+    render() {
+        var _a;
+        const { items = [], note } = this.stageContact || {};
+        var sorted = {};
+        items.forEach(item => {
+            if (!sorted[item.type]) {
+                sorted[item.type] = [item];
+            }
+            else {
+                sorted[item.type].push(item);
+            }
+        });
+        const names = [...(sorted[ContactField.Name] || [{ type: ContactField.Name, label: 'name', value: '' }])];
+        const companies = [
+            ...(sorted[ContactField.Company] || [{ type: ContactField.Company, label: 'company', value: '' }])
+        ];
+        return html `
+      <div name>
+        <div monogram>${(_a = names[0]) === null || _a === void 0 ? void 0 : _a.value.replace(/\s/g, '').slice(0, 2)}</div>
+        <div name-content>
+          ${names.map(item => html `<div @change=${(e) => this.onChangeItem(e, item)} .item=${item} field>
+              <span>name</span>
+              <input type="hidden" .value=${item.label} data-item="label" disabled />
+              <input type="text" .value=${item.value} data-item="value" />
+            </div>`)}
+          ${companies.map(item => html `<div @change=${(e) => this.onChangeItem(e, item)} .item=${item} field>
+              <span>company</span>
+              <input type="hidden" .value=${item.label} data-item="label" disabled />
+              <input type="text" .value=${item.value} data-item="value" />
+            </div>`)}
+        </div>
+      </div>
+      ${['email', 'phone', 'address'].map(type => {
+            var items = [...(sorted[type] || []), { type: type, label: 'work', value: '' }];
+            return html `
+          <div data-type=${type}>
+            ${type}
+            ${items.map(item => html `<div @change=${(e) => this.onChangeItem(e, item)} .item=${item} field>
+                  ${item.value
+                ? html `<mwc-icon-button icon="cancel"></mwc-icon-button>`
+                : html `<mwc-icon-button></mwc-icon-button>`}
+                  <select .value=${item.label} data-item="label">
+                    ${['home', 'work', 'other', 'mobile'].map(option => html ` <option value=${option} ?selected=${option === item.label}>${option}</option>`)}
+                  </select>
+                  <input type="text" .value=${item.value} data-item="value" />
+                </div>`)}
+          </div>
+        `;
+        })}
+      <div note>
+        note
+        <textarea id="note" .value=${note || ''} @change=${() => this.buildStageContact()}></textarea>
+      </div>
+
+      <div buttons>
+        <button value="Done" @click=${() => this.onSave()}>Done</button>
+        <button value="Cancel" @click=${() => this.onCancel()}>Cancel</button>
+        <button value="Reset" @click=${() => this.onReset()}>Reset</button>
+      </div>
+    `;
+    }
+    updated(changes) {
+        if (changes.has('contact')) {
+            this.stageContact = JSON.parse(JSON.stringify(this.contact));
+        }
+    }
+    buildItems() {
+        const items = [];
+        this.fields.forEach(fieldElement => {
+            const item = fieldElement.item;
+            if (item.value) {
+                items.push(item);
+            }
+        });
+        return items;
+    }
+    buildStageContact() {
+        this.stageContact = {
+            ...this.stageContact,
+            note: this.note.value,
+            items: this.buildItems()
+        };
+    }
+    onChangeItem(e, item) {
+        const target = e.currentTarget;
+        const labelElement = target.querySelector('[data-item="label"');
+        const valueElement = target.querySelector('[data-item="value"');
+        item.label = labelElement.value;
+        item.value = valueElement.value;
+        if (e.target === valueElement || item.value) {
+            this.buildStageContact();
+        }
+    }
+    onSave() {
+        this.buildStageContact();
+        this.dispatchEvent(new CustomEvent('edit-done', {
+            detail: this.stageContact
+        }));
+    }
+    onCancel() {
+        this.dispatchEvent(new CustomEvent('edit-cancel', {
+            detail: this.stageContact
+        }));
+    }
+    onReset() {
+        this.buildStageContact();
+        this.stageContact = JSON.parse(JSON.stringify(this.contact));
+    }
+}
+OxContactEdit.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: block;
+        padding: 25px;
+
+        --mdc-icon-button-size: 16px;
+        --mdc-icon-size: 16px;
+      }
+
+      :host > div {
+        padding: 10px 0;
+        display: block;
+        border-bottom: 1px solid blue;
+      }
+
+      :host > div > div {
+        padding: 4px 0;
+        box-sizing: border-box;
+
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+      }
+
+      :host > div > div:hover {
+        position: relative;
+      }
+
+      [data-item='label'] {
+        width: 100px;
+        text-align: right;
+      }
+
+      [data-item='value'] {
+        flex: 1;
+      }
+
+      :host > div[name] {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-weight: bold;
+        font-size: 1.4em;
+      }
+
+      :host > div[name] > [monogram] {
+        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] {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+      }
+
+      div[field] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
+      }
+
+      div[field] > span {
+        width: 100px;
+        text-align: right;
+      }
+
+      div[field] > input {
+        flex: 1;
+      }
+
+      textarea {
+        width: 100%;
+        height: 100px;
+      }
+
+      div[buttons] {
+        display: flex;
+        flex-direction: row-reverse;
+        gap: 10px;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], OxContactEdit.prototype, "contact", void 0);
+__decorate([
+    state()
+], OxContactEdit.prototype, "stageContact", void 0);
+__decorate([
+    query('#note')
+], OxContactEdit.prototype, "note", void 0);
+__decorate([
+    queryAll('[field]')
+], OxContactEdit.prototype, "fields", void 0);
+//# sourceMappingURL=OxContactEdit.js.map

package/dist/src/OxContactEdit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OxContactEdit.js","sourceRoot":"","sources":["../../src/OxContactEdit.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon-button'\n\nimport { html, css, LitElement, PropertyValues } from 'lit'\nimport { property, state, query, queryAll } from 'lit/decorators.js'\nimport { Contact, ContactField, ContactItem } from './OxContact'\nimport { ScrollbarStyles } from '@operato/styles'\n\nexport class OxContactEdit extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        padding: 25px;\n\n        --mdc-icon-button-size: 16px;\n        --mdc-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      }\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 > 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      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      div[buttons] {\n        display: flex;\n        flex-direction: row-reverse;\n        gap: 10px;\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('#note') note!: HTMLTextAreaElement\n  @queryAll('[field]') fields!: NodeListOf<HTMLDivElement>\n\n  render() {\n    const { items = [], 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    const names = [...(sorted[ContactField.Name] || [{ type: ContactField.Name, label: 'name', value: '' }])]\n    const companies = [\n      ...(sorted[ContactField.Company] || [{ type: ContactField.Company, label: 'company', value: '' }])\n    ]\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 => html`<div @change=${(e: Event) => this.onChangeItem(e, item)} .item=${item} field>\n              <span>name</span>\n              <input type=\"hidden\" .value=${item.label} data-item=\"label\" disabled />\n              <input type=\"text\" .value=${item.value} data-item=\"value\" />\n            </div>`\n          )}\n          ${companies.map(\n            item => html`<div @change=${(e: Event) => this.onChangeItem(e, item)} .item=${item} field>\n              <span>company</span>\n              <input type=\"hidden\" .value=${item.label} data-item=\"label\" disabled />\n              <input type=\"text\" .value=${item.value} data-item=\"value\" />\n            </div>`\n          )}\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} field>\n                  ${item.value\n                    ? html`<mwc-icon-button icon=\"cancel\"></mwc-icon-button>`\n                    : html`<mwc-icon-button></mwc-icon-button>`}\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      <div buttons>\n        <button value=\"Done\" @click=${() => this.onSave()}>Done</button>\n        <button value=\"Cancel\" @click=${() => this.onCancel()}>Cancel</button>\n        <button value=\"Reset\" @click=${() => this.onReset()}>Reset</button>\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      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  onSave() {\n    this.buildStageContact()\n\n    this.dispatchEvent(\n      new CustomEvent('edit-done', {\n        detail: this.stageContact\n      })\n    )\n  }\n\n  onCancel() {\n    this.dispatchEvent(\n      new CustomEvent('edit-cancel', {\n        detail: this.stageContact\n      })\n    )\n  }\n\n  onReset() {\n    this.buildStageContact()\n\n    this.stageContact = JSON.parse(JSON.stringify(this.contact))\n  }\n}\n"]}

package/dist/src/OxContactView copy.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+export declare enum ContactField {
+    Name = "name",
+    JobTitle = "job-title",
+    Phone = "phone",
+    Address = "address",
+    Email = "email",
+    Birthday = "birthday",
+    Profile = "profile",
+    Picture = "picture",
+    Department = "department",
+    Company = "company",
+    Homepage = "homepage"
+}
+export declare enum ContactLabel {
+    home = "home",
+    work = "work",
+    other = "other",
+    mobile = "mobile"
+}
+export type ContactItem = {
+    id?: string;
+    type: ContactField;
+    label: string;
+    value: string;
+};
+export type Contact = {
+    items?: ContactItem[];
+    note?: string;
+};
+export declare class OxContactView extends LitElement {
+    static styles: import("lit").CSSResult;
+    contact: Contact;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/OxContactView copy.js

@@ -0,0 +1,143 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+export var ContactField;
+(function (ContactField) {
+    ContactField["Name"] = "name";
+    ContactField["JobTitle"] = "job-title";
+    ContactField["Phone"] = "phone";
+    ContactField["Address"] = "address";
+    ContactField["Email"] = "email";
+    ContactField["Birthday"] = "birthday";
+    ContactField["Profile"] = "profile";
+    ContactField["Picture"] = "picture";
+    ContactField["Department"] = "department";
+    ContactField["Company"] = "company";
+    ContactField["Homepage"] = "homepage";
+})(ContactField || (ContactField = {}));
+export var ContactLabel;
+(function (ContactLabel) {
+    ContactLabel["home"] = "home";
+    ContactLabel["work"] = "work";
+    ContactLabel["other"] = "other";
+    ContactLabel["mobile"] = "mobile";
+})(ContactLabel || (ContactLabel = {}));
+export class OxContactView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.contact = {};
+    }
+    render() {
+        var _a;
+        const { items = [], note } = this.contact;
+        var sorted = {};
+        items.forEach(item => {
+            if (!sorted[item.type]) {
+                sorted[item.type] = [item];
+            }
+            else {
+                sorted[item.type].push(item);
+            }
+        });
+        const names = sorted[ContactField.Name];
+        return html `
+      <div name>
+        <div monogram>${(_a = names[0]) === null || _a === void 0 ? void 0 : _a.value.replace(/\s/g, '').slice(0, 2)}</div>
+        ${names.map(item => html `<div>
+              <span data-item="value">${item.value}</span>
+            </div>`)}
+      </div>
+      ${['email', 'phone', 'address', 'company', 'etc']
+            .map(type => sorted[type])
+            .filter(items => items && items.length > 0)
+            .map(items => html `<div data-type=${items[0].type}>
+            ${items.map(item => html `<div>
+                  <label data-item="label">${item.label}</label>
+                  <span data-item="value">${item.value}</span>
+                </div>`)}
+          </div>`)}
+      <div note>${note || ''}</div>
+    `;
+    }
+}
+OxContactView.styles = css `
+    :host {
+      display: block;
+      padding: 25px;
+    }
+
+    :host > div {
+      padding: 10px 0;
+      display: block;
+      border-bottom: 1px solid blue;
+    }
+
+    :host > div > div {
+      padding: 4px 0;
+      box-sizing: border-box;
+
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+    }
+
+    :host > div > div:hover {
+      position: relative;
+    }
+
+    :host > div > div:hover::before {
+      font-family: 'Material Icons';
+      content: 'edit';
+      display: block;
+      position: absolute;
+      text-align: left;
+      line-height: 24px;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0.5;
+      background-image: linear-gradient(var(--primary-color, gray), var(--primary-color, gray));
+      z-index: -1;
+    }
+
+    [data-item='label'] {
+      width: 100px;
+      text-align: right;
+    }
+
+    [data-item='value'] {
+      flex: 1;
+    }
+
+    :host > div[name] {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-weight: bold;
+      font-size: 1.4em;
+    }
+
+    :host > div[name] > [monogram] {
+      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;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxContactView.prototype, "contact", void 0);
+//# sourceMappingURL=OxContactView%20copy.js.map

package/dist/src/OxContactView copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OxContactView copy.js","sourceRoot":"","sources":["../../src/OxContactView copy.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAEnD,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;AAcD,MAAM,OAAO,aAAc,SAAQ,UAAU;IAA7C;;QA+E8B,YAAO,GAAY,EAAE,CAAA;IA2CnD,CAAC;IAzCC,MAAM;;QACJ,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA;QACzC,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,CAAA;QAEvC,OAAO,IAAI,CAAA;;wBAES,MAAA,KAAK,CAAC,CAAC,CAAC,0CAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;UAC5D,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;wCACwB,IAAI,CAAC,KAAK;mBAC/B,CACV;;QAED,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,GAAG,CACT,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;6CACyB,IAAI,CAAC,KAAK;4CACX,IAAI,CAAC,KAAK;uBAC/B,CACV;iBACI,CACR;kBACS,IAAI,IAAI,EAAE;KACvB,CAAA;IACH,CAAC;;AAxHM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4ElB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAsB","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.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  items?: ContactItem[]\n  note?: string\n}\n\nexport class OxContactView extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      padding: 25px;\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      font-family: 'Material Icons';\n      content: 'edit';\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.5;\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\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\n    return html`\n      <div name>\n        <div monogram>${names[0]?.value.replace(/\\s/g, '').slice(0, 2)}</div>\n        ${names.map(\n          item =>\n            html`<div>\n              <span data-item=\"value\">${item.value}</span>\n            </div>`\n        )}\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.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>${note || ''}</div>\n    `\n  }\n}\n"]}

package/dist/src/OxContactView.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+import { Contact } from './OxContact';
+export declare class OxContactView extends LitElement {
+    static styles: import("lit").CSSResult;
+    contact: Contact;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/OxContactView.js

@@ -0,0 +1,138 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ContactField } from './OxContact';
+export class OxContactView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.contact = {};
+    }
+    render() {
+        var _a;
+        const { items = [], note } = this.contact;
+        var sorted = {};
+        items.forEach(item => {
+            if (!sorted[item.type]) {
+                sorted[item.type] = [item];
+            }
+            else {
+                sorted[item.type].push(item);
+            }
+        });
+        const names = sorted[ContactField.Name] || [];
+        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>
+        <div name-content>
+          ${names.map(item => html `<div>
+                <span data-item="value">${item.value}</span>
+              </div>`)}
+          ${companies.map(item => html `<div>
+                <span data-item="value">${item.value}</span>
+              </div>`)}
+        </div>
+      </div>
+      ${['email', 'phone', 'address', 'company', 'etc']
+            .map(type => sorted[type])
+            .filter(items => items && items.length > 0)
+            .map(items => html `<div data-type=${items[0].type}>
+            ${items[0].type}
+            ${items.map(item => html `<div>
+                  <label data-item="label">${item.label}</label>
+                  <span data-item="value">${item.value}</span>
+                </div>`)}
+          </div>`)}
+      <div note>
+        note
+        <div>${note || ''}</div>
+      </div>
+    `;
+    }
+}
+OxContactView.styles = css `
+    :host {
+      display: block;
+    }
+
+    :host > div {
+      padding: 10px 0;
+      display: block;
+      border-bottom: 1px solid blue;
+    }
+
+    :host > div > div {
+      padding: 4px 0;
+      box-sizing: border-box;
+
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+    }
+
+    :host > div > div:hover {
+      position: relative;
+    }
+
+    :host > div > div:hover::before {
+      content: '';
+      display: block;
+      position: absolute;
+      text-align: left;
+      line-height: 24px;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0.3;
+      background-image: linear-gradient(var(--primary-color, gray), var(--primary-color, gray));
+      z-index: -1;
+    }
+
+    [data-item='label'] {
+      width: 100px;
+      text-align: right;
+    }
+
+    [data-item='value'] {
+      flex: 1;
+    }
+
+    :host > div[name] {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-weight: bold;
+      font-size: 1.4em;
+    }
+
+    :host > div[name] > [monogram] {
+      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] {
+      flex: 1;
+
+      display: flex;
+      flex-direction: column;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxContactView.prototype, "contact", void 0);
+//# sourceMappingURL=OxContactView.js.map

package/dist/src/OxContactView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OxContactView.js","sourceRoot":"","sources":["../../src/OxContactView.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAW,YAAY,EAAe,MAAM,aAAa,CAAA;AAEhE,MAAM,OAAO,aAAc,SAAQ,UAAU;IAA7C;;QAoF8B,YAAO,GAAY,EAAE,CAAA;IAwDnD,CAAC;IAtDC,MAAM;;QACJ,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA;QACzC,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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { Contact, ContactField, ContactItem } from './OxContact'\n\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"]}

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export { OxContact } from './ox-contact.js';

package/dist/src/index.js

@@ -0,0 +1,2 @@
+export { OxContact } from './ox-contact.js';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA","sourcesContent":["export { OxContact } from './ox-contact.js'\n"]}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import { OxContact } from './OxContact.js';
+window.customElements.define('ox-contact', OxContact);
+//# sourceMappingURL=ox-contact%20copy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-contact copy.js","sourceRoot":"","sources":["../../src/ox-contact copy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import { OxContact } from './OxContact.js';\n\nwindow.customElements.define('ox-contact', OxContact);\n"]}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import { OxContactEdit } from './OxContactEdit.js';
+window.customElements.define('ox-contact-edit', OxContactEdit);
+//# sourceMappingURL=ox-contact-edit%20copy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-contact-edit copy.js","sourceRoot":"","sources":["../../src/ox-contact-edit copy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAA","sourcesContent":["import { OxContactEdit } from './OxContactEdit.js'\n\nwindow.customElements.define('ox-contact-edit', OxContactEdit)\n"]}

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

@@ -0,0 +1,18 @@
+import '@material/mwc-icon-button';
+import { LitElement, PropertyValues } from 'lit';
+import { Contact, ContactItem } from './ox-contact';
+export declare class OxContactEdit extends LitElement {
+    static styles: import("lit").CSSResult[];
+    contact: Contact;
+    private stageContact;
+    note: HTMLTextAreaElement;
+    fields: NodeListOf<HTMLDivElement>;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+    buildItems(): ContactItem[];
+    buildStageContact(): void;
+    onChangeItem(e: Event, item: ContactItem): void;
+    onSave(): void;
+    onCancel(): void;
+    onReset(): void;
+}