@operato/contact 8.0.0-alpha.50 → 8.0.0-beta.1

package/dist/src/ox-zoomable-image.js

@@ -1,155 +0,0 @@
-import { __decorate } from "tslib";
-import { css, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-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 OxZoomableImage = class OxZoomableImage extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.zoom = 1;
-        this.left = 0;
-        this.top = 0;
-        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.resetHandler = this.onReset.bind(this);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('mousewheel', this.wheelEventHandler, false);
-        this.addEventListener('mousedown', this.dragStartHandler);
-        this.addEventListener('touchstart', this.dragStartHandler);
-        this.addEventListener('dblclick', this.resetHandler);
-        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);
-    }
-    disconnectedCallback() {
-        this.removeEventListener('mousewheel', this.wheelEventHandler, false);
-        this.removeEventListener('mousedown', this.dragStartHandler);
-        this.removeEventListener('touchstart', this.dragStartHandler);
-        this.removeEventListener('dblclick', this.resetHandler);
-        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);
-        super.disconnectedCallback();
-    }
-    updated(changes) {
-        const style = this.style;
-        if (changes.has('src') && this.src) {
-            style.setProperty('--background-image', `url('${this.src}')`);
-        }
-        style.setProperty('--image-transform', `translate(${this.left}%, ${this.top}%) scale(${this.zoom}, ${this.zoom})`);
-    }
-    onWheelEvent(e) {
-        e.preventDefault();
-        var delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail));
-        this.zoom *= 1 - delta / 20;
-    }
-    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 { offsetHeight, offsetWidth } = this;
-        this.top += (y / offsetHeight) * 100;
-        this.left += (x / offsetWidth) * 100;
-        return false;
-    }
-    onDragEnd(e) {
-        if (this.dragStart) {
-            e.stopPropagation();
-            e.preventDefault();
-            delete this.dragStart;
-        }
-    }
-    onReset(e) {
-        this.zoom = 1;
-        this.left = 0;
-        this.top = 0;
-    }
-};
-OxZoomableImage.styles = css `
-    :host {
-      display: block;
-      position: relative;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-
-    :host::before {
-      content: '';
-      display: block;
-
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 100%;
-      height: 100%;
-
-      background-image: var(
-        --background-image,
-        linear-gradient(var(--primary-color, lightgray), var(--primary-color, lightgray))
-      );
-      transform: var(--image-transform, '');
-      background-size: 100% 100%;
-    }
-  `;
-__decorate([
-    property({ type: String })
-], OxZoomableImage.prototype, "src", void 0);
-__decorate([
-    state()
-], OxZoomableImage.prototype, "zoom", void 0);
-__decorate([
-    state()
-], OxZoomableImage.prototype, "left", void 0);
-__decorate([
-    state()
-], OxZoomableImage.prototype, "top", void 0);
-OxZoomableImage = __decorate([
-    customElement('ox-zoomable-image')
-], OxZoomableImage);
-export { OxZoomableImage };
-//# sourceMappingURL=ox-zoomable-image.js.map

package/dist/src/ox-zoomable-image.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-zoomable-image.js","sourceRoot":"","sources":["../../src/ox-zoomable-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\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-zoomable-image')\nexport class OxZoomableImage extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      position: relative;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    :host::before {\n      content: '';\n      display: block;\n\n      position: absolute;\n      top: 0;\n      right: 0;\n      width: 100%;\n      height: 100%;\n\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\n  @property({ type: String }) src?: string\n\n  @state() zoom: number = 1\n  @state() left: number = 0\n  @state() top: number = 0\n\n  private dragStart?: { x: number; y: number }\n\n  private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n  private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n  private dragStartHandler = this.onDragStart.bind(this) as EventListener\n  private wheelEventHandler = this.onWheelEvent.bind(this) as EventListener\n  private resetHandler = this.onReset.bind(this) as EventListener\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.addEventListener('mousewheel', this.wheelEventHandler, false)\n\n    this.addEventListener('mousedown', this.dragStartHandler)\n    this.addEventListener('touchstart', this.dragStartHandler)\n    this.addEventListener('dblclick', this.resetHandler)\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\n  disconnectedCallback() {\n    this.removeEventListener('mousewheel', this.wheelEventHandler, false)\n\n    this.removeEventListener('mousedown', this.dragStartHandler!)\n    this.removeEventListener('touchstart', this.dragStartHandler!)\n    this.removeEventListener('dblclick', this.resetHandler!)\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    super.disconnectedCallback()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    const style = this.style\n\n    if (changes.has('src') && this.src) {\n      style.setProperty('--background-image', `url('${this.src}')`)\n    }\n\n    style.setProperty('--image-transform', `translate(${this.left}%, ${this.top}%) scale(${this.zoom}, ${this.zoom})`)\n  }\n\n  onWheelEvent(e: MouseEvent) {\n    e.preventDefault()\n\n    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n\n    this.zoom *= 1 - delta / 20\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 { offsetHeight, offsetWidth } = this\n\n    this.top += (y / offsetHeight) * 100\n    this.left += (x / offsetWidth) * 100\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  onReset(e: Event) {\n    this.zoom = 1\n    this.left = 0\n    this.top = 0\n  }\n}\n"]}

package/dist/stories/ox-zoomable-image.stories.d.ts

@@ -1,22 +0,0 @@
-import '@operato/i18n';
-import '../src/ox-zoomable-image.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        src: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    src?: string;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-zoomable-image.stories.js

@@ -1,27 +0,0 @@
-import '@operato/i18n';
-import '../src/ox-zoomable-image.js';
-import { html } from 'lit';
-export default {
-    title: 'ox-zoomable-image',
-    component: 'ox-zoomable-image',
-    argTypes: {
-        src: { control: 'text' }
-    }
-};
-const Template = ({ src = '' }) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-  <link href="/themes/grist-theme.css" rel="stylesheet" />
-  <link href="/themes/form-theme.css" rel="stylesheet" />
-
-  <div style="height: 300px">
-    <ox-zoomable-image src=${src} style="width: 300px; height: 300px"> </ox-zoomable-image>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    src: '/assets/sample-image.png'
-};
-//# sourceMappingURL=ox-zoomable-image.stories.js.map

package/dist/stories/ox-zoomable-image.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-zoomable-image.stories.js","sourceRoot":"","sources":["../../stories/ox-zoomable-image.stories.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AACtB,OAAO,6BAA6B,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE;QACR,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KACzB;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,GAAG,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;6BASrC,GAAG;;CAE/B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,GAAG,EAAE,0BAA0B;CAChC,CAAA","sourcesContent":["import '@operato/i18n'\nimport '../src/ox-zoomable-image.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-zoomable-image',\n  component: 'ox-zoomable-image',\n  argTypes: {\n    src: { control: 'text' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  src?: string\n}\n\nconst Template: Story<ArgTypes> = ({ src = '' }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n  <div style=\"height: 300px\">\n    <ox-zoomable-image src=${src} style=\"width: 300px; height: 300px\"> </ox-zoomable-image>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  src: '/assets/sample-image.png'\n}\n"]}

package/src/index.ts

@@ -1,3 +0,0 @@
-export { OxContact } from './ox-contact.js'
-export { OxPfp } from './ox-pfp.js'
-export { OxPfpView } from './ox-pfp-view.js'

package/src/ox-contact-edit.ts

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

package/src/ox-contact-view.ts

@@ -1,189 +0,0 @@
-import './ox-pfp-view.js'
-
-import { html, css, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { Contact, ContactField, ContactItem } from './ox-contact'
-
-@customElement('ox-contact-view')
-export class OxContactView extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      --md-icon-size: 16px;
-
-      color: var(--md-sys-color-on-surface);
-      background-color: var(--md-sys-color-surface);
-    }
-
-    :host > div {
-      padding: var(--spacing-medium, 8px);
-      display: block;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      font-size: 0.9em;
-      text-transform: capitalize;
-    }
-
-    :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.15;
-      background-image: linear-gradient(var(--md-sys-color-primary, gray), var(--md-sys-color-primary, gray));
-    }
-
-    [data-item='label'] {
-      width: 80px;
-      text-align: right;
-      color: var(--md-sys-color-primary, #017e7f);
-    }
-
-    [data-item='value'] {
-      flex: 1;
-      text-transform: none;
-    }
-
-    :host > div[name] {
-      display: flex;
-      align-items: center;
-      gap: 15px;
-      font-weight: bold;
-      font-size: 1.4em;
-    }
-
-    :host ox-pfp-view {
-      display: inline-block;
-
-      --ox-pfp-size: 75px;
-    }
-
-    :host > div[name] > div[name-content] {
-      flex: 1;
-
-      display: flex;
-      flex-direction: column;
-    }
-
-    div[data-type='email'] md-icon::before {
-      content: 'mail_outline';
-    }
-
-    div[data-type='phone'] md-icon::before {
-      content: 'phone';
-    }
-
-    div[data-type='address'] md-icon::before {
-      content: 'place';
-    }
-
-    div[data-type='department'] md-icon::before {
-      content: 'diversity_3';
-    }
-
-    div[data-type='company'] md-icon::before {
-      content: 'business';
-    }
-
-    div[data-type='etc'] md-icon::before {
-      content: 'feed';
-    }
-
-    div[note] md-icon::before {
-      content: 'subject';
-    }
-
-    :host > div > [name-content] {
-      gap: 3px;
-    }
-
-    div md-icon {
-      position: relative;
-      top: 3px;
-      margin-right: 3px;
-      opacity: 0.5;
-      color: var(--md-sys-color-on-primary-container, #333);
-    }
-
-    [name-content] div {
-      color: var(--md-sys-color-on-primary-container, #333);
-      font-size: 1.2em;
-    }
-
-    [name-content] [company] {
-      color: var(--md-sys-color-on-secondary-container, #666);
-      font-weight: normal;
-      font-size: 0.9em;
-    }
-  `
-
-  @property({ type: Object }) contact: Contact = {}
-
-  render() {
-    const { profile, items = [], name, company, note } = this.contact || {}
-    var sorted: { [type: string]: ContactItem[] } = {}
-
-    items.forEach(item => {
-      if (!sorted[item.type as string]) {
-        sorted[item.type] = [item]
-      } else {
-        sorted[item.type as string].push(item)
-      }
-    })
-
-    return html`
-      <div name>
-        <ox-pfp-view .profile=${profile} .name=${name}></ox-pfp-view>
-
-        <div name-content>
-          <div>
-            <span data-item="value">${name}</span>
-          </div>
-          <div company>
-            <span data-item="value">${company}</span>
-          </div>
-        </div>
-      </div>
-
-      ${['department', 'email', 'phone', 'address', 'company', 'etc']
-        .map(type => sorted[type])
-        .filter(items => items && items.length > 0)
-        .map(
-          items =>
-            html`<div data-type=${items[0].type}>
-              <md-icon></md-icon>
-              ${items[0].type}
-              ${items.map(
-                item =>
-                  html`<div>
-                    <label data-item="label"> ${item.label}</label>
-                    <span data-item="value">${item.value}</span>
-                  </div>`
-              )}
-            </div>`
-        )}
-      <div note>
-        <md-icon></md-icon>
-        note
-        <div>${note || ''}</div>
-      </div>
-    `
-  }
-}