@operato/contact 1.1.77 → 1.2.0

package/dist/src/OxContactEdit.d.ts

@@ -1,18 +0,0 @@
-import '@material/mwc-icon-button';
-import { LitElement, PropertyValues } from 'lit';
-import { Contact, ContactItem } from './OxContact';
-export declare class OxContactEdit extends LitElement {
-    static styles: import("lit").CSSResult[];
-    contact: Contact;
-    private stageContact;
-    note: HTMLTextAreaElement;
-    fields: NodeListOf<HTMLDivElement>;
-    render(): import("lit-html").TemplateResult<1>;
-    updated(changes: PropertyValues<this>): void;
-    buildItems(): ContactItem[];
-    buildStageContact(): void;
-    onChangeItem(e: Event, item: ContactItem): void;
-    onSave(): void;
-    onCancel(): void;
-    onReset(): void;
-}

package/dist/src/OxContactEdit.js

@@ -1,235 +0,0 @@
-import { __decorate } from "tslib";
-import '@material/mwc-icon-button';
-import { html, css, LitElement } from 'lit';
-import { property, state, query, queryAll } from 'lit/decorators.js';
-import { ContactField } from './OxContact';
-import { ScrollbarStyles } from '@operato/styles';
-export 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"></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);
-//# sourceMappingURL=OxContactEdit.js.map

package/dist/src/OxContactEdit.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OxContactEdit.js","sourceRoot":"","sources":["../../src/OxContactEdit.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon-button'\n\nimport { html, css, LitElement, PropertyValues } from 'lit'\nimport { property, state, query, queryAll } from 'lit/decorators.js'\nimport { Contact, ContactField, ContactItem } from './OxContact'\nimport { ScrollbarStyles } from '@operato/styles'\n\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 icon=\"cancel\"></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/OxContactView copy.d.ts

@@ -1,35 +0,0 @@
-import { LitElement } from 'lit';
-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 OxContactView extends LitElement {
-    static styles: import("lit").CSSResult;
-    contact: Contact;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/src/OxContactView copy.js

@@ -1,143 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-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 = {}));
-export 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];
-        return html `
-      <div name>
-        <div monogram>${(_a = names[0]) === null || _a === void 0 ? void 0 : _a.value.replace(/\s/g, '').slice(0, 2)}</div>
-        ${names.map(item => html `<div>
-              <span data-item="value">${item.value}</span>
-            </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.map(item => html `<div>
-                  <label data-item="label">${item.label}</label>
-                  <span data-item="value">${item.value}</span>
-                </div>`)}
-          </div>`)}
-      <div note>${note || ''}</div>
-    `;
-    }
-}
-OxContactView.styles = css `
-    :host {
-      display: block;
-      padding: 25px;
-    }
-
-    :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 {
-      font-family: 'Material Icons';
-      content: 'edit';
-      display: block;
-      position: absolute;
-      text-align: left;
-      line-height: 24px;
-      top: 0;
-      right: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0.5;
-      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;
-    }
-  `;
-__decorate([
-    property({ type: Object })
-], OxContactView.prototype, "contact", void 0);
-//# sourceMappingURL=OxContactView%20copy.js.map

package/dist/src/OxContactView copy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OxContactView copy.js","sourceRoot":"","sources":["../../src/OxContactView copy.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAEnD,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;AAcD,MAAM,OAAO,aAAc,SAAQ,UAAU;IAA7C;;QA+E8B,YAAO,GAAY,EAAE,CAAA;IA2CnD,CAAC;IAzCC,MAAM;;QACJ,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA;QACzC,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,CAAA;QAEvC,OAAO,IAAI,CAAA;;wBAES,MAAA,KAAK,CAAC,CAAC,CAAC,0CAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;UAC5D,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;wCACwB,IAAI,CAAC,KAAK;mBAC/B,CACV;;QAED,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,GAAG,CACT,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;6CACyB,IAAI,CAAC,KAAK;4CACX,IAAI,CAAC,KAAK;uBAC/B,CACV;iBACI,CACR;kBACS,IAAI,IAAI,EAAE;KACvB,CAAA;IACH,CAAC;;AAxHM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4ElB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAsB","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\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\nexport class OxContactView extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      padding: 25px;\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      font-family: 'Material Icons';\n      content: 'edit';\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.5;\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\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\n    return html`\n      <div name>\n        <div monogram>${names[0]?.value.replace(/\\s/g, '').slice(0, 2)}</div>\n        ${names.map(\n          item =>\n            html`<div>\n              <span data-item=\"value\">${item.value}</span>\n            </div>`\n        )}\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.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>${note || ''}</div>\n    `\n  }\n}\n"]}

package/dist/src/OxContactView.d.ts

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

package/dist/src/OxContactView.js

@@ -1,138 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import { ContactField } from './OxContact';
-export 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);
-//# sourceMappingURL=OxContactView.js.map

package/dist/src/OxContactView.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OxContactView.js","sourceRoot":"","sources":["../../src/OxContactView.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAW,YAAY,EAAe,MAAM,aAAa,CAAA;AAEhE,MAAM,OAAO,aAAc,SAAQ,UAAU;IAA7C;;QAoF8B,YAAO,GAAY,EAAE,CAAA;IAwDnD,CAAC;IAtDC,MAAM;;QACJ,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA;QACzC,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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { Contact, ContactField, ContactItem } from './OxContact'\n\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 copy.d.ts

@@ -1,38 +0,0 @@
-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>;
-}