@operato/contact 8.0.0-beta.0 → 8.0.0-beta.2

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>
-    `
-  }
-}

package/src/ox-contact.ts

@@ -1,116 +0,0 @@
-import '@material/web/icon/icon.js'
-import './ox-contact-edit.js'
-import './ox-contact-view.js'
-
-import { html, css, LitElement } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { CommonHeaderStyles } from '@operato/styles'
-
-import { OxContactEdit } from './ox-contact-edit.js'
-import { Profile } from './ox-pfp-view.js'
-
-export enum ContactField {
-  JobTitle = 'job-title',
-  Phone = 'phone',
-  Address = 'address',
-  Email = 'email',
-  Birthday = 'birthday',
-  Profile = 'profile',
-  Picture = 'picture',
-  Department = 'department',
-  Homepage = 'homepage'
-}
-
-export enum ContactLabel {
-  home = 'home',
-  work = 'work',
-  other = 'other',
-  mobile = 'mobile'
-}
-
-export type ContactItem = {
-  id?: string
-  type: ContactField
-  label: string
-  value: string
-}
-
-export type Contact = {
-  id?: string
-  profile?: Profile
-  name?: string
-  company?: string
-  items?: ContactItem[]
-  note?: string
-}
-
-@customElement('ox-contact')
-export class OxContact extends LitElement {
-  static styles = [
-    CommonHeaderStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        color: var(--md-sys-color-on-surface);
-        background-color: var(--md-sys-color-surface);
-      }
-
-      ox-contact-view,
-      ox-contact-edit {
-        padding: var(--pading-default);
-        flex: 1;
-      }
-    `
-  ]
-
-  @property({ type: Object }) contact: Contact = {}
-
-  @state() editMode?: boolean = false
-
-  @query('ox-contact-edit') editor!: OxContactEdit
-
-  render() {
-    return html` 
-    <div container>
-      ${
-        this.editMode
-          ? html`<ox-contact-edit
-              .contact=${this.contact}
-              @edit-cancel=${() => (this.editMode = false)}
-              @edit-done=${(e: CustomEvent) => {
-                this.contact = e.detail
-                this.editMode = false
-              }}
-            ></ox-contact-edit>`
-          : html` <ox-contact-view .contact=${this.contact}></ox-contact-view> `
-      }
-      </div>
-      
-      <div class="footer">
-        ${
-          this.editMode
-            ? html`
-                <button @click=${() => this.editor.reset()}>
-                  <md-icon>restart_alt</md-icon>${i18next.t('button.reset')}
-                </button>
-                <div filler></div>
-                <button @click=${() => this.editor.cancel()}>
-                  <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
-                </button>
-                <button @click=${() => this.editor.save()}>
-                  <md-icon>done</md-icon>${i18next.t('button.confirm')}
-                </button>
-              `
-            : html`
-                <button @click=${() => (this.editMode = true)}>
-                  <md-icon>edit</md-icon>${i18next.t('button.edit')}
-                </button>
-              `
-        }
-      </div>
-    </div>`
-  }
-}