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

package/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+	"recommendations": [
+		"esbenp.prettier-vscode", 
+		"runem.lit-plugin",
+		"dbaeumer.vscode-eslint"
+	],
+	"unwantedRecommendations": [
+	]
+}

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
+
+
+
 ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
 
 **Note:** Version bump only for package @operato/contact

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/contact",
   "description": "Webcomponent ox-contact following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -58,8 +58,8 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/styles": "^8.0.0-beta.0",
-    "@operato/utils": "^8.0.0-beta.0",
+    "@operato/styles": "^8.0.0-beta.1",
+    "@operato/utils": "^8.0.0-beta.1",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -94,5 +94,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

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