@operato/contact 1.1.52 → 1.1.53

package/dist/src/ox-pfp-editor.js

@@ -0,0 +1,165 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, property, query } 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 OxPfpEditor = class OxPfpEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.profile = {};
+        this.dragEndHandler = this.onDragEnd.bind(this);
+        this.dragMoveHandler = this.onDragMove.bind(this);
+        this.dragStartHandler = this.onDragStart.bind(this);
+        this.wheelEventHandler = this.onWheelEvent.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        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);
+    }
+    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);
+        super.disconnectedCallback();
+    }
+    render() {
+        return html ` <div circle></div> `;
+    }
+    onWheelEvent(e) {
+        e.preventDefault();
+        var delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail));
+        const { top = 0, left = 0, zoom = 1, picture } = this.profile;
+        this.profile = {
+            top,
+            left,
+            zoom: zoom * (1 - delta / 20),
+            picture
+        };
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.profile
+        }));
+    }
+    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 { top = 0, left = 0, zoom = 1, picture } = this.profile;
+        const { offsetHeight, offsetWidth } = this;
+        this.profile = {
+            top: top + (y / offsetHeight) * 100,
+            left: left + (x / offsetWidth) * 100,
+            zoom,
+            picture
+        };
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.profile
+        }));
+        return false;
+    }
+    onDragEnd(e) {
+        if (this.dragStart) {
+            e.stopPropagation();
+            e.preventDefault();
+            delete this.dragStart;
+        }
+    }
+    updated(changes) {
+        const { picture = 'linear-gradient(var(--primary-color, gray), var(--primary-color, gray)', zoom = 1, left = 0, top = 0 } = this.profile;
+        const style = this.style;
+        style.setProperty('--background-image', `url(${picture})`);
+        style.setProperty('--image-transform', ` translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`);
+    }
+};
+OxPfpEditor.styles = css `
+    :host {
+      display: inline-block;
+    }
+
+    [circle] {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      position: relative;
+      background-color: lightgray;
+
+      overflow: hidden;
+    }
+
+    [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(--primary-color, gray), var(--primary-color, gray))
+      );
+      transform: var(--image-transform, '');
+      background-size: 100% 100%;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxPfpEditor.prototype, "profile", void 0);
+__decorate([
+    query('[circle]')
+], OxPfpEditor.prototype, "circle", void 0);
+OxPfpEditor = __decorate([
+    customElement('ox-pfp-edit')
+], OxPfpEditor);
+export { OxPfpEditor };
+//# sourceMappingURL=ox-pfp-edit.js.map

package/dist/src/ox-pfp-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-pfp-edit.js","sourceRoot":"","sources":["../../src/ox-pfp-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view'\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-pfp-edit')\nexport class OxPfpEditor extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n    }\n\n    [circle] {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      position: relative;\n      background-color: lightgray;\n\n      overflow: hidden;\n    }\n\n    [circle]::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      background-repeat: no-repeat;\n      background-image: var(\n        --background-image,\n        linear-gradient(var(--primary-color, gray), var(--primary-color, gray))\n      );\n      transform: var(--image-transform, '');\n      background-size: 100% 100%;\n    }\n  `\n\n  @property({ type: Object }) profile: Profile = {}\n\n  @query('[circle]') circle!: HTMLDivElement\n\n  private dragStart?: { x: number; y: number }\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\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\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\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  render() {\n    return html` <div circle></div> `\n  }\n\n  onWheelEvent(e: Event) {\n    e.preventDefault()\n\n    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n\n    const { top = 0, left = 0, zoom = 1, picture } = this.profile\n    this.profile = {\n      top,\n      left,\n      zoom: zoom * (1 - delta / 20),\n      picture\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.profile\n      })\n    )\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 { top = 0, left = 0, zoom = 1, picture } = this.profile\n    const { offsetHeight, offsetWidth } = this\n\n    this.profile = {\n      top: top + (y / offsetHeight) * 100,\n      left: left + (x / offsetWidth) * 100,\n      zoom,\n      picture\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.profile\n      })\n    )\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  updated(changes: PropertyValues<this>) {\n    const {\n      picture = 'linear-gradient(var(--primary-color, gray), var(--primary-color, gray)',\n      zoom = 1,\n      left = 0,\n      top = 0\n    } = this.profile\n    const style = this.style\n\n    style.setProperty('--background-image', `url(${picture})`)\n    style.setProperty('--image-transform', ` translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)\n  }\n}\n"]}

package/dist/src/ox-pfp-view.d.ts

@@ -0,0 +1,15 @@
+import { LitElement, PropertyValues } from 'lit';
+export type Profile = {
+    left?: number;
+    top?: number;
+    zoom?: number;
+    picture?: string;
+};
+export declare class OxPfpView extends LitElement {
+    static styles: import("lit").CSSResult;
+    profile: Profile;
+    name?: string;
+    circle: HTMLDivElement;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+}

package/dist/src/ox-pfp-view.js

@@ -0,0 +1,100 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+let OxPfpView = class OxPfpView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.profile = {};
+    }
+    render() {
+        var _a, _b;
+        return html `
+      ${((_a = this.profile) === null || _a === void 0 ? void 0 : _a.picture)
+            ? html `<div circle></div>`
+            : html `<div monogram><div>${(_b = this.name) === null || _b === void 0 ? void 0 : _b.replace(/\s/g, '').slice(0, 2)}</div></div>`}
+
+      <slot></slot>
+    `;
+    }
+    updated(changes) {
+        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})`);
+        }
+    }
+};
+OxPfpView.styles = css `
+    :host {
+      display: inline-block;
+    }
+
+    [circle] {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      position: relative;
+      background-color: lightgray;
+
+      overflow: hidden;
+    }
+
+    [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(--primary-color, gray), var(--primary-color, gray))
+      );
+      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;
+      vertical-align: center;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxPfpView.prototype, "profile", void 0);
+__decorate([
+    property({ type: String })
+], OxPfpView.prototype, "name", void 0);
+__decorate([
+    query('[circle]')
+], OxPfpView.prototype, "circle", void 0);
+OxPfpView = __decorate([
+    customElement('ox-pfp-view')
+], OxPfpView);
+export { OxPfpView };
+//# sourceMappingURL=ox-pfp-view.js.map

package/dist/src/ox-pfp-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-pfp-view.js","sourceRoot":"","sources":["../../src/ox-pfp-view.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAUlE,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QA6DuB,YAAO,GAAY,EAAE,CAAA;IAyBnD,CAAC;IApBC,MAAM;;QACJ,OAAO,IAAI,CAAA;QACP,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO;YACrB,CAAC,CAAC,IAAI,CAAA,oBAAoB;YAC1B,CAAC,CAAC,IAAI,CAAA,sBAAsB,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc;;;KAGtF,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEnE,IAAI,OAAO,EAAE;YACX,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;YAExB,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,OAAO,OAAO,GAAG,CAAC,CAAA;YAC1D,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,aAAa,IAAI,MAAM,GAAG,YAAY,IAAI,KAAK,IAAI,GAAG,CAAC,CAAA;SAC/F;IACH,CAAC;;AApFM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAc;AAEtB;IAAlB,KAAK,CAAC,UAAU,CAAC;yCAAwB;AAhE/B,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CAsFrB;SAtFY,SAAS","sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nexport type Profile = {\n  left?: number\n  top?: number\n  zoom?: number\n  picture?: string\n}\n\n@customElement('ox-pfp-view')\nexport class OxPfpView extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n    }\n\n    [circle] {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      position: relative;\n      background-color: lightgray;\n\n      overflow: hidden;\n    }\n\n    [circle]::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      background-repeat: no-repeat;\n      background-image: var(\n        --background-image,\n        linear-gradient(var(--primary-color, gray), var(--primary-color, gray))\n      );\n      transform: var(--image-transform, '');\n      background-size: 100% 100%;\n    }\n\n    [monogram] {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: 1px solid darkgray;\n      box-sizing: border-box;\n      padding: 0;\n      overflow: hidden;\n      background-color: gray;\n      color: white;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    [monogram] div {\n      flex: 1;\n      text-transform: uppercase;\n      font-size: 2em;\n      font-family: system-ui;\n      text-align: center;\n      vertical-align: center;\n    }\n  `\n\n  @property({ type: Object }) profile: Profile = {}\n  @property({ type: String }) name?: string\n\n  @query('[circle]') circle!: HTMLDivElement\n\n  render() {\n    return html`\n      ${this.profile?.picture\n        ? html`<div circle></div>`\n        : html`<div monogram><div>${this.name?.replace(/\\s/g, '').slice(0, 2)}</div></div>`}\n\n      <slot></slot>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}\n\n    if (picture) {\n      const style = this.style\n\n      style.setProperty('--background-image', `url(${picture})`)\n      style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)\n    }\n  }\n}\n"]}

package/dist/src/ox-pfp-viewer.d.ts

@@ -0,0 +1,14 @@
+import { LitElement, PropertyValues } from 'lit';
+export type Profile = {
+    left?: number;
+    top?: number;
+    zoom?: number;
+    picture?: string;
+};
+export declare class OxPfpViewer extends LitElement {
+    static styles: import("lit").CSSResult;
+    profile: Profile;
+    circle: HTMLDivElement;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+}

package/dist/src/ox-pfp-viewer.js

@@ -0,0 +1,63 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+let OxPfpViewer = class OxPfpViewer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.profile = {};
+    }
+    render() {
+        return html ` <div circle></div> `;
+    }
+    updated(changes) {
+        const { picture = 'linear-gradient(var(--primary-color, gray), var(--primary-color, gray)', zoom = 1, left = 0, top = 0 } = this.profile;
+        const style = this.style;
+        style.setProperty('--background-image', `url(${picture})`);
+        style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`);
+    }
+};
+OxPfpViewer.styles = css `
+    :host {
+      display: inline-block;
+    }
+
+    [circle] {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      position: relative;
+      background-color: lightgray;
+
+      overflow: hidden;
+    }
+
+    [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(--primary-color, gray), var(--primary-color, gray))
+      );
+      transform: var(--image-transform, '');
+      background-size: 100% 100%;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxPfpViewer.prototype, "profile", void 0);
+__decorate([
+    query('[circle]')
+], OxPfpViewer.prototype, "circle", void 0);
+OxPfpViewer = __decorate([
+    customElement('ox-pfp-view')
+], OxPfpViewer);
+export { OxPfpViewer };
+//# sourceMappingURL=ox-pfp-view.js.map

package/dist/src/ox-pfp-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-pfp-view.js","sourceRoot":"","sources":["../../src/ox-pfp-view.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAUlE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAoCuB,YAAO,GAAY,EAAE,CAAA;IAoBnD,CAAC;IAhBC,MAAM;QACJ,OAAO,IAAI,CAAA,sBAAsB,CAAA;IACnC,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,MAAM,EACJ,OAAO,GAAG,wEAAwE,EAClF,IAAI,GAAG,CAAC,EACR,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACR,GAAG,IAAI,CAAC,OAAO,CAAA;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,OAAO,OAAO,GAAG,CAAC,CAAA;QAC1D,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,aAAa,IAAI,MAAM,GAAG,YAAY,IAAI,KAAK,IAAI,GAAG,CAAC,CAAA;IAChG,CAAC;;AAtDM,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiClB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAsB;AAE9B;IAAlB,KAAK,CAAC,UAAU,CAAC;2CAAwB;AAtC/B,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAwDvB;SAxDY,WAAW","sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nexport type Profile = {\n  left?: number\n  top?: number\n  zoom?: number\n  picture?: string\n}\n\n@customElement('ox-pfp-view')\nexport class OxPfpViewer extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n    }\n\n    [circle] {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      position: relative;\n      background-color: lightgray;\n\n      overflow: hidden;\n    }\n\n    [circle]::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      background-repeat: no-repeat;\n      background-image: var(\n        --background-image,\n        linear-gradient(var(--primary-color, gray), var(--primary-color, gray))\n      );\n      transform: var(--image-transform, '');\n      background-size: 100% 100%;\n    }\n  `\n\n  @property({ type: Object }) profile: Profile = {}\n\n  @query('[circle]') circle!: HTMLDivElement\n\n  render() {\n    return html` <div circle></div> `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    const {\n      picture = 'linear-gradient(var(--primary-color, gray), var(--primary-color, gray)',\n      zoom = 1,\n      left = 0,\n      top = 0\n    } = this.profile\n    const style = this.style\n\n    style.setProperty('--background-image', `url(${picture})`)\n    style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)\n  }\n}\n"]}

package/dist/src/ox-pfp.d.ts

@@ -0,0 +1,14 @@
+import './ox-pfp-edit.js';
+import './ox-pfp-view.js';
+import '@material/mwc-icon-button';
+import { LitElement } from 'lit';
+import { Profile } from './ox-pfp-view.js';
+import { OxPfpEdit } from './ox-pfp-edit.js';
+export declare class OxPfp extends LitElement {
+    static styles: import("lit").CSSResult;
+    profile: Profile;
+    name?: string;
+    editMode?: boolean;
+    edit: OxPfpEdit;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/ox-pfp.js

@@ -0,0 +1,104 @@
+import { __decorate } from "tslib";
+import './ox-pfp-edit.js';
+import './ox-pfp-view.js';
+import '@material/mwc-icon-button';
+import { html, css, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+let OxPfp = class OxPfp extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.profile = {};
+        this.editMode = false;
+    }
+    render() {
+        return this.editMode
+            ? html `<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>
+          <mwc-icon-button icon="fit_screen" @click=${() => this.edit.fit()}></mwc-icon-button>
+          <mwc-icon-button icon="clear" @click=${() => this.edit.clear()}></mwc-icon-button>
+          <mwc-icon-button
+            icon="save"
+            @click=${() => {
+                this.profile = this.edit.profile;
+                this.editMode = false;
+                this.dispatchEvent(new CustomEvent('change', {
+                    detail: this.profile
+                }));
+            }}
+          ></mwc-icon-button>
+          <mwc-icon-button icon="cancel" @click=${() => (this.editMode = false)}></mwc-icon-button>
+        </ox-pfp-edit> `
+            : html `
+          <ox-pfp-view .profile=${this.profile} name=${this.name || ''}>
+            <mwc-icon-button icon="edit" @click=${() => (this.editMode = true)}></mwc-icon-button>
+          </ox-pfp-view>
+        `;
+    }
+};
+OxPfp.styles = css `
+    :host {
+      display: block;
+
+      --mdc-icon-button-size: 20px;
+      --mdc-icon-size: 20px;
+    }
+
+    ox-pfp-edit,
+    ox-pfp-view {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    [buttons] {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      display: flex;
+    }
+
+    mwc-icon-button {
+      position: absolute;
+    }
+
+    mwc-icon-button[icon='fit_screen'] {
+      bottom: 0;
+      left: 0;
+    }
+
+    mwc-icon-button[icon='save'] {
+      bottom: 0;
+      right: 0;
+    }
+
+    mwc-icon-button[icon='edit'] {
+      bottom: 0;
+      right: 0;
+    }
+
+    mwc-icon-button[icon='cancel'] {
+      top: 0;
+      right: 0;
+    }
+
+    mwc-icon-button[icon='clear'] {
+      top: 0;
+      right: 16px;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxPfp.prototype, "profile", void 0);
+__decorate([
+    property({ type: String })
+], OxPfp.prototype, "name", void 0);
+__decorate([
+    state()
+], OxPfp.prototype, "editMode", void 0);
+__decorate([
+    query('ox-pfp-edit')
+], OxPfp.prototype, "edit", void 0);
+OxPfp = __decorate([
+    customElement('ox-pfp')
+], OxPfp);
+export { OxPfp };
+//# sourceMappingURL=ox-pfp.js.map

package/dist/src/ox-pfp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-pfp.js","sourceRoot":"","sources":["../../src/ox-pfp.ts"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAA;AACzB,OAAO,kBAAkB,CAAA;AAEzB,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAKlE,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QAqDuB,YAAO,GAAY,EAAE,CAAA;QAGxC,aAAQ,GAAa,KAAK,CAAA;IA6BrC,CAAC;IAzBC,MAAM;QACJ,OAAO,IAAI,CAAC,QAAQ;YAClB,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE;sDACnB,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;iDAC1B,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;;;qBAGnD,GAAG,EAAE;gBACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;gBAChC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;gBACrB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,MAAM,EAAE,IAAI,CAAC,OAAO;iBACrB,CAAC,CACH,CAAA;YACH,CAAC;;kDAEqC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;wBACvD;YAClB,CAAC,CAAC,IAAI,CAAA;kCACsB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE;kDACpB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;SAErE,CAAA;IACP,CAAC;;AAnFM,YAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAc;AAEhC;IAAR,KAAK,EAAE;uCAA2B;AAEb;IAArB,KAAK,CAAC,aAAa,CAAC;mCAAiB;AA1D3B,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAqFjB;SArFY,KAAK","sourcesContent":["import './ox-pfp-edit.js'\nimport './ox-pfp-view.js'\n\nimport '@material/mwc-icon-button'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view.js'\nimport { OxPfpEdit } from './ox-pfp-edit.js'\n\n@customElement('ox-pfp')\nexport class OxPfp extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n\n      --mdc-icon-button-size: 20px;\n      --mdc-icon-size: 20px;\n    }\n\n    ox-pfp-edit,\n    ox-pfp-view {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    [buttons] {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      display: flex;\n    }\n\n    mwc-icon-button {\n      position: absolute;\n    }\n\n    mwc-icon-button[icon='fit_screen'] {\n      bottom: 0;\n      left: 0;\n    }\n\n    mwc-icon-button[icon='save'] {\n      bottom: 0;\n      right: 0;\n    }\n\n    mwc-icon-button[icon='edit'] {\n      bottom: 0;\n      right: 0;\n    }\n\n    mwc-icon-button[icon='cancel'] {\n      top: 0;\n      right: 0;\n    }\n\n    mwc-icon-button[icon='clear'] {\n      top: 0;\n      right: 16px;\n    }\n  `\n\n  @property({ type: Object }) profile: Profile = {}\n  @property({ type: String }) name?: string\n\n  @state() editMode?: boolean = false\n\n  @query('ox-pfp-edit') edit!: OxPfpEdit\n\n  render() {\n    return this.editMode\n      ? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>\n          <mwc-icon-button icon=\"fit_screen\" @click=${() => this.edit.fit()}></mwc-icon-button>\n          <mwc-icon-button icon=\"clear\" @click=${() => this.edit.clear()}></mwc-icon-button>\n          <mwc-icon-button\n            icon=\"save\"\n            @click=${() => {\n              this.profile = this.edit.profile\n              this.editMode = false\n              this.dispatchEvent(\n                new CustomEvent('change', {\n                  detail: this.profile\n                })\n              )\n            }}\n          ></mwc-icon-button>\n          <mwc-icon-button icon=\"cancel\" @click=${() => (this.editMode = false)}></mwc-icon-button>\n        </ox-pfp-edit> `\n      : html`\n          <ox-pfp-view .profile=${this.profile} name=${this.name || ''}>\n            <mwc-icon-button icon=\"edit\" @click=${() => (this.editMode = true)}></mwc-icon-button>\n          </ox-pfp-view>\n        `\n  }\n}\n"]}

package/dist/stories/index.stories copy.d.ts

@@ -0,0 +1,24 @@
+import { TemplateResult } from 'lit';
+import '@material/mwc-icon';
+import '@material/mwc-icon-button';
+import '../src/ox-contact.js';
+import { Contact } from '../src/ox-contact.js';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        contact: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    contact?: Contact;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/index.stories copy.js

@@ -0,0 +1,79 @@
+import { html } from 'lit';
+import '@material/mwc-icon';
+import '@material/mwc-icon-button';
+import '../src/ox-contact.js';
+import { ContactField } from '../src/ox-contact.js';
+export default {
+    title: 'OxContact',
+    component: 'ox-contact',
+    argTypes: {
+        contact: { control: 'object' }
+    }
+};
+const Template = ({ contact }) => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-contact .contact=${contact}> </ox-contact>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    contact: {
+        note: 'abcdefg',
+        items: [
+            {
+                id: '1',
+                type: ContactField.Name,
+                label: 'name',
+                value: '남 상혁'
+            },
+            {
+                id: '2',
+                type: ContactField.Phone,
+                label: 'home',
+                value: '010-1223-3443'
+            },
+            {
+                id: '3',
+                type: ContactField.Phone,
+                label: 'mobile',
+                value: '010-1122-3344'
+            },
+            {
+                id: '4',
+                type: ContactField.Email,
+                label: 'work',
+                value: 'heartyoh@hatiolab.com'
+            },
+            {
+                id: '5',
+                type: ContactField.Email,
+                label: 'home',
+                value: 'shnam2k@gmail.com'
+            },
+            {
+                id: '6',
+                type: ContactField.Address,
+                label: 'home',
+                value: '경기도 성남시 분당구 123'
+            },
+            {
+                id: '7',
+                type: ContactField.Address,
+                label: 'work',
+                value: '경기도 성남시 분당구 234'
+            },
+            {
+                id: '8',
+                type: ContactField.Address,
+                label: 'work',
+                value: '서울특별시 종로구 123'
+            }
+        ]
+    }
+};
+//# sourceMappingURL=index.stories%20copy.js.map

package/dist/stories/index.stories copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories copy.js","sourceRoot":"","sources":["../../stories/index.stories copy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,oBAAoB,CAAA;AAC3B,OAAO,2BAA2B,CAAA;AAClC,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAW,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAE5D,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC/B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;yBAQxC,OAAO;CAC/B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;QACf,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,IAAI;gBACvB,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,MAAM;aACd;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,KAAK;gBACxB,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,eAAe;aACvB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,KAAK;gBACxB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,eAAe;aACvB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,KAAK;gBACxB,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,uBAAuB;aAC/B;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,KAAK;gBACxB,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,mBAAmB;aAC3B;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,OAAO;gBAC1B,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,iBAAiB;aACzB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,OAAO;gBAC1B,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,iBAAiB;aACzB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY,CAAC,OAAO;gBAC1B,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,eAAe;aACvB;SACF;KACF;CACF,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport '@material/mwc-icon'\nimport '@material/mwc-icon-button'\nimport '../src/ox-contact.js'\n\nimport { Contact, ContactField } from '../src/ox-contact.js'\n\nexport default {\n  title: 'OxContact',\n  component: 'ox-contact',\n  argTypes: {\n    contact: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  contact?: Contact\n}\n\nconst Template: Story<ArgTypes> = ({ contact }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-contact .contact=${contact}> </ox-contact>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  contact: {\n    note: 'abcdefg',\n    items: [\n      {\n        id: '1',\n        type: ContactField.Name,\n        label: 'name',\n        value: '남 상혁'\n      },\n      {\n        id: '2',\n        type: ContactField.Phone,\n        label: 'home',\n        value: '010-1223-3443'\n      },\n      {\n        id: '3',\n        type: ContactField.Phone,\n        label: 'mobile',\n        value: '010-1122-3344'\n      },\n      {\n        id: '4',\n        type: ContactField.Email,\n        label: 'work',\n        value: 'heartyoh@hatiolab.com'\n      },\n      {\n        id: '5',\n        type: ContactField.Email,\n        label: 'home',\n        value: 'shnam2k@gmail.com'\n      },\n      {\n        id: '6',\n        type: ContactField.Address,\n        label: 'home',\n        value: '경기도 성남시 분당구 123'\n      },\n      {\n        id: '7',\n        type: ContactField.Address,\n        label: 'work',\n        value: '경기도 성남시 분당구 234'\n      },\n      {\n        id: '8',\n        type: ContactField.Address,\n        label: 'work',\n        value: '서울특별시 종로구 123'\n      }\n    ]\n  }\n}\n"]}

package/dist/stories/ox-contact.stories.d.ts

@@ -0,0 +1,24 @@
+import { TemplateResult } from 'lit';
+import '@material/mwc-icon';
+import '@material/mwc-icon-button';
+import '../src/ox-contact.js';
+import { Contact } from '../src/ox-contact.js';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        contact: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    contact?: Contact;
+}
+export declare const Regular: Story<ArgTypes>;