@operato/contact 1.1.52

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

@@ -0,0 +1,245 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon-button';
+import { html, css, LitElement } from 'lit';
+import { customElement, property, state, query, queryAll } from 'lit/decorators.js';
+import { ContactField } from './ox-contact';
+import { ScrollbarStyles } from '@operato/styles';
+let OxContactEdit = 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"
+                        @click=${() => {
+                    item.value = '';
+                    this.buildStageContact();
+                }}
+                      ></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);
+OxContactEdit = __decorate([
+    customElement('ox-contact-edit')
+], OxContactEdit);
+export { OxContactEdit };
+//# sourceMappingURL=ox-contact-edit.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-contact-edit.js","sourceRoot":"","sources":["../../src/ox-contact-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon-button'\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'\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        --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\n                        icon=\"cancel\"\n                        @click=${() => {\n                          item.value = ''\n                          this.buildStageContact()\n                        }}\n                      ></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/ox-contact-view.d.ts

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

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

@@ -0,0 +1,142 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ContactField } from './ox-contact';
+let OxContactView = 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);
+OxContactView = __decorate([
+    customElement('ox-contact-view')
+], OxContactView);
+export { OxContactView };
+//# sourceMappingURL=ox-contact-view.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+import './ox-contact-edit';
+import './ox-contact-view';
+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 OxContact extends LitElement {
+    static styles: import("lit").CSSResult;
+    contact: Contact;
+    editMode?: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/ox-contact.js

@@ -0,0 +1,67 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import './ox-contact-edit';
+import './ox-contact-view';
+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 = {}));
+let OxContact = class OxContact extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.contact = {};
+        this.editMode = false;
+    }
+    render() {
+        return html `${this.editMode
+            ? html `<ox-contact-edit
+          .contact=${this.contact}
+          @edit-cancel=${() => (this.editMode = false)}
+          @edit-done=${(e) => {
+                this.contact = e.detail;
+                this.editMode = false;
+            }}
+        ></ox-contact-edit>`
+            : html ` <ox-contact-view .contact=${this.contact}></ox-contact-view>
+          <button value="Edit" @click=${() => (this.editMode = true)}>Edit</button>`} `;
+    }
+};
+OxContact.styles = css `
+    :host {
+      display: block;
+    }
+
+    button {
+      display: block;
+      margin-left: auto;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxContact.prototype, "contact", void 0);
+__decorate([
+    state()
+], OxContact.prototype, "editMode", void 0);
+OxContact = __decorate([
+    customElement('ox-contact')
+], OxContact);
+export { OxContact };
+//# sourceMappingURL=ox-contact.js.map

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

@@ -0,0 +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"]}

package/dist/stories/index.stories.d.ts

@@ -0,0 +1,24 @@
+import { TemplateResult } from 'lit';
+import '@material/mwc-icon';
+import '@material/mwc-icon-button';
+import '../src/ox-contact.js';
+import { Contact } from '../src/ox-contact.js';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        contact: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    contact?: Contact;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/index.stories.js

@@ -0,0 +1,79 @@
+import { html } from 'lit';
+import '@material/mwc-icon';
+import '@material/mwc-icon-button';
+import '../src/ox-contact.js';
+import { ContactField } from '../src/ox-contact.js';
+export default {
+    title: 'OxContact',
+    component: 'ox-contact',
+    argTypes: {
+        contact: { control: 'object' }
+    }
+};
+const Template = ({ contact }) => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-contact .contact=${contact}> </ox-contact>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    contact: {
+        note: 'abcdefg',
+        items: [
+            {
+                id: '1',
+                type: ContactField.Name,
+                label: 'name',
+                value: '남 상혁'
+            },
+            {
+                id: '2',
+                type: ContactField.Phone,
+                label: 'home',
+                value: '010-1223-3443'
+            },
+            {
+                id: '3',
+                type: ContactField.Phone,
+                label: 'mobile',
+                value: '010-1122-3344'
+            },
+            {
+                id: '4',
+                type: ContactField.Email,
+                label: 'work',
+                value: 'heartyoh@hatiolab.com'
+            },
+            {
+                id: '5',
+                type: ContactField.Email,
+                label: 'home',
+                value: 'shnam2k@gmail.com'
+            },
+            {
+                id: '6',
+                type: ContactField.Address,
+                label: 'home',
+                value: '경기도 성남시 분당구 123'
+            },
+            {
+                id: '7',
+                type: ContactField.Address,
+                label: 'work',
+                value: '경기도 성남시 분당구 234'
+            },
+            {
+                id: '8',
+                type: ContactField.Address,
+                label: 'work',
+                value: '서울특별시 종로구 123'
+            }
+        ]
+    }
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,oBAAoB,CAAA;AAC3B,OAAO,2BAA2B,CAAA;AAClC,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;;;;;;;;yBAQxC,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,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,IAAI;gBACvB,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,MAAM;aACd;YACD;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/mwc-icon'\nimport '@material/mwc-icon-button'\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 href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\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    items: [\n      {\n        id: '1',\n        type: ContactField.Name,\n        label: 'name',\n        value: '남 상혁'\n      },\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/test/ox-contact.test.d.ts

@@ -0,0 +1 @@
+import '../src/ox-contact.js';