@operato/contact 7.1.27 → 7.1.32

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

package/src/ox-pfp-edit.ts

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