"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[803],{80803:(t,e,i)=>{var o=i(50493),n=i(94430),a=i(56765);let r=class extends n.oi{constructor(){super(...arguments),this.profile={}}render(){var t,e;return n.dy`
      ${(null===(t=this.profile)||void 0===t?void 0:t.picture)?n.dy`<div circle></div>`:n.dy`<div monogram><div>${null===(e=this.name)||void 0===e?void 0:e.replace(/\s/g,"").slice(0,2)}</div></div>`}

      <slot></slot>
    `}updated(t){const{picture:e,zoom:i=1,left:o=0,top:n=0}=this.profile||{};if(e){const t=this.style;t.setProperty("--background-image",`url(${e})`),t.setProperty("--image-transform",`translate(${o}%, ${n}%) scale(${i}, ${i})`)}}};r.styles=n.iv`
    :host {
      display: inline-block;
      aspect-ratio: 1 / 1;
    }

    [circle] {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      position: relative;
      background-color: var(--primary-color, #999);

      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, #999), var(--secondary-color, #666))
      );
      transform: var(--image-transform, '');
      background-size: 100% 100%;
    }

    [monogram] {
      height: 100%;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,.1);
      box-sizing: border-box;
      padding: 0;
      overflow: hidden;
      background-color: var(--primary-color, #999);
      color: white;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    [monogram] div {
      flex: 1;
      text-transform: uppercase;
      font-size: 1.5em;
      font-family: system-ui;
      text-align: center;
      vertical-align: center;
    }
  `,(0,o.gn)([(0,a.Cb)({type:Object})],r.prototype,"profile",void 0),(0,o.gn)([(0,a.Cb)({type:String})],r.prototype,"name",void 0),(0,o.gn)([(0,a.IO)("[circle]")],r.prototype,"circle",void 0),r=(0,o.gn)([(0,a.Mo)("ox-pfp-view")],r);let c=class extends n.oi{constructor(){super(...arguments),this.contact={}}render(){const{profile:t,items:e=[],name:i,company:o,note:a}=this.contact||{};var r={};return e.forEach((t=>{r[t.type]?r[t.type].push(t):r[t.type]=[t]})),n.dy`
      <div name>
        <ox-pfp-view .profile=${t} .name=${i}></ox-pfp-view>

        <div name-content>
          <div>
            <span data-item="value">${i}</span>
          </div>
          <div company>
            <span data-item="value">${o}</span>
          </div>
        </div>
      </div>

      ${["email","phone","address","company","etc"].map((t=>r[t])).filter((t=>t&&t.length>0)).map((t=>n.dy`<div data-type=${t[0].type}><mwc-icon></mwc-icon>
            ${t[0].type}
            ${t.map((t=>n.dy`<div>
                  <label data-item="label"> ${t.label}</label>
                  <span data-item="value">${t.value}</span>
                </div>`))}
          </div>`))}
      <div note><mwc-icon></mwc-icon>
        note
        <div>${a||""}</div>
      </div>
    `}};c.styles=n.iv`
    :host {
      display: block;
      --mdc-icon-size:16px;
    }

    :host > div {
      padding: var(--padding-default, 10px);
      display: block;
      border-bottom:var(--border-dark-color, 1px solid rgba(0,0,0,.1));
      font-size:.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(--primary-color, gray), var(--primary-color, gray));
      z-index: -1;
    }

    [data-item='label'] {
      width: 80px;
      text-align:right;
      color:var(--secondary-text-color,#017e7f);
    }

    [data-item='value'] {
      flex: 1;
    }

    :host > div[name] {
      display: flex;
      align-items: center;
      gap: 15px;
      font-weight: bold;
      font-size: 1.4em;
    }

    :host ox-pfp-view {
      display: inline-block;
      height: 75px;
    }

    :host > div[name] > div[name-content] {
      flex: 1;

      display: flex;
      flex-direction: column;
    }
    div[data-type="email"] mwc-icon::before{
      content:'mail_outline'
    }
    div[data-type="phone"] mwc-icon::before{
      content:'phone'
    }
    div[data-type="address"] mwc-icon::before{
      content:'place'
    }
    div[data-type="company"] mwc-icon::before{
      content:'business'
    }
    div[data-type="etc"] mwc-icon::before{
      content:'feed'
    }
    div[note] mwc-icon::before{
      content:'subject'
    }
    :host > div > [name-content]{
      gap:3px;
    }
    div mwc-icon{
      position:relative;
      top:3px;
      margin-right:3px;
      opacity:.5;
      color:var(--primary-text-color, #333);
    }
    [name-content] div{
      color:var(--primary-text-color, #333);
      font-size:1.2em
    }
    [name-content] [company]{
      color:var(--secondary-text-color, #666);
      font-weight:normal;
      font-size:.9em
    }
  `,(0,o.gn)([(0,a.Cb)({type:Object})],c.prototype,"contact",void 0),c=(0,o.gn)([(0,a.Mo)("ox-contact-view")],c);i(89053);var d=i(36179);function l(t){var e;if(0==t.button)return{x:t.clientX,y:t.clientY};if(1==(null===(e=t.touches)||void 0===e?void 0:e.length)){const e=t.touches[0];return{x:e.clientX,y:e.clientY}}}let s=class extends n.oi{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),this.dropFileHandler=this.onDropFile.bind(this)}connectedCallback(){super.connectedCallback(),d.M$.set(this),this.addEventListener("mousewheel",this.wheelEventHandler,!1),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,!1),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(){var t,e;return n.dy`
      <div content>
        ${(null===(t=this.profile)||void 0===t?void 0:t.picture)?n.dy`<div circle></div>`:n.dy`<div monogram><div>${null===(e=this.name)||void 0===e?void 0:e.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=${t=>this.onChangeFile(t)}
          />
          <mwc-icon title="select image">image_search</mwc-icon>
        </label>
      </div>

      <slot></slot>
    `}updated(t){const{picture:e,zoom:i=1,left:o=0,top:n=0}=this.profile||{};if(e){const t=this.style;t.setProperty("--background-image",`url('${e}')`),t.setProperty("--image-transform",`translate(${o}%, ${n}%) scale(${i}, ${i})`)}}get value(){return this.profile}set value(t){this.profile=t}onWheelEvent(t){t.preventDefault();var e=Math.max(-1,Math.min(1,t.deltaY||-t.detail));const{top:i=0,left:o=0,zoom:n=1,picture:a,file:r}=this.profile||{};this.profile={top:i,left:o,zoom:n*(1-e/20),picture:a,file:r},this.dispatchEvent(new CustomEvent("change",{detail:this.profile}))}onDragStart(t){const e=l(t);if(e)return this.dragStart=e,t.stopPropagation(),!1}onDragMove(t){if(!this.dragStart)return!1;const e=l(t);if(!e)return!1;t.stopPropagation(),t.preventDefault();const i=e;var{x:o,y:n}=e;o-=this.dragStart.x,n-=this.dragStart.y,this.dragStart=i;const{top:a=0,left:r=0,zoom:c=1,picture:d,file:s}=this.profile||{},{offsetHeight:p,offsetWidth:h}=this;return this.profile={top:a+n/p*100,left:r+o/h*100,zoom:c,picture:d,file:s},this.dispatchEvent(new CustomEvent("change",{detail:this.profile})),!1}onDragEnd(t){this.dragStart&&(t.stopPropagation(),t.preventDefault(),delete this.dragStart)}onDropFile(t){const e=t.detail[0];if(!e)return;const i=URL.createObjectURL(e);this.profile={left:0,top:0,zoom:1,picture:i,file:e}}onChangeFile(t){const e=t.currentTarget,i=[...Array.from(e.files)][0];if(!i)return;const o=URL.createObjectURL(i);this.profile={left:0,top:0,zoom:1,picture:o,file:i},e.files=null}fit(){this.profile={...this.profile,left:0,top:0,zoom:1}}clear(){this.profile={}}};s.styles=n.iv`
    :host {
      display: inline-block;
      overflow: hidden;
    }

    [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(--primary-color, lightgray), var(--primary-color, 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;
      vertical-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;
    }

    mwc-icon {
      align-self: center;

      color: var(--file-uploader-icon-color, black);
      --mdc-icon-size: var(--file-uploader-icon-size, 20px);
    }
  `,(0,o.gn)([(0,a.Cb)({type:Object})],s.prototype,"profile",void 0),(0,o.gn)([(0,a.Cb)({type:String})],s.prototype,"name",void 0),(0,o.gn)([(0,a.IO)("[circle]")],s.prototype,"circle",void 0),s=(0,o.gn)([(0,a.Mo)("ox-pfp-edit")],s);let p=class extends n.oi{constructor(){super(...arguments),this.profile={},this.editMode=!1}render(){return this.editMode?n.dy`<ox-pfp-edit .profile=${this.profile} name=${this.name||""}>
          <mwc-icon-button title="fit size" icon="fit_screen" @click=${()=>this.edit.fit()}></mwc-icon-button>
          <mwc-icon-button title="clear" icon="clear" @click=${()=>this.edit.clear()}></mwc-icon-button>
          <mwc-icon-button
            title="save"
            icon="save"
            @click=${()=>{this.profile=this.edit.profile,this.editMode=!1,this.dispatchEvent(new CustomEvent("change",{detail:this.profile}))}}
          ></mwc-icon-button>
          <mwc-icon-button title="cancel" icon="cancel" @click=${()=>this.editMode=!1}></mwc-icon-button>
        </ox-pfp-edit> `:n.dy`
          <ox-pfp-view .profile=${this.profile} name=${this.name||""}>
            <mwc-icon-button title="edit" icon="edit" @click=${()=>this.editMode=!0}></mwc-icon-button>
          </ox-pfp-view>
        `}};p.styles=n.iv`
    :host {
      display: block;
      aspect-ratio: 1 / 1;

      --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;
      font-size: smaller;
    }

    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;
    }
  `,(0,o.gn)([(0,a.Cb)({type:Object})],p.prototype,"profile",void 0),(0,o.gn)([(0,a.Cb)({type:String})],p.prototype,"name",void 0),(0,o.gn)([(0,a.SB)()],p.prototype,"editMode",void 0),(0,o.gn)([(0,a.IO)("ox-pfp-edit")],p.prototype,"edit",void 0),p=(0,o.gn)([(0,a.Mo)("ox-pfp")],p);var h=i(15633);let v=class extends n.oi{constructor(){super(...arguments),this.contact={},this.stageContact=JSON.parse(JSON.stringify(this.contact))}render(){const{profile:t,items:e=[],name:i,company:o,note:a}=this.stageContact||{};var r={};return e.forEach((t=>{r[t.type]?r[t.type].push(t):r[t.type]=[t]})),n.dy`
      <div name>
        <ox-pfp .profile=${t} .name=${i}></ox-pfp>

        <div name-content>
          <div @change=${t=>this.buildStageContact()}>
            <span>name</span>
            <input type="text" id="name" .value=${null!=i?i:""} />
          </div>
          <div @change=${t=>this.buildStageContact()}>
            <span>company</span>
            <input type="text" id="company" .value=${null!=o?o:""} />
          </div>
        </div>
      </div>
      ${["email","phone","address"].map((t=>{var e=[...r[t]||[],{type:t,label:"work",value:""}];return n.dy`
          <div data-type=${t}>
            ${t}
            ${e.map((t=>n.dy`<div @change=${e=>this.onChangeItem(e,t)} .item=${t} item-field>
                  ${t.value?n.dy`<mwc-icon-button
                        icon="cancel"
                        @click=${()=>{t.value="",this.buildStageContact()}}
                      ></mwc-icon-button>`:n.dy`<mwc-icon-button></mwc-icon-button>`}
                  <select .value=${t.label} data-item="label">
                    ${["home","work","other","mobile"].map((e=>n.dy` <option value=${e} ?selected=${e===t.label}>${e}</option>`))}
                  </select>
                  <input type="text" .value=${t.value} data-item="value" />
                </div>`))}
          </div>
        `}))}
      <div note>
        note
        <textarea id="note" .value=${a||""} @change=${()=>this.buildStageContact()}></textarea>
      </div>
    `}updated(t){t.has("contact")&&(this.stageContact=JSON.parse(JSON.stringify(this.contact)))}buildItems(){const t=[];return this.fields.forEach((e=>{const i=e.item;i.value&&t.push(i)})),t}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(t,e){const i=t.currentTarget,o=i.querySelector('[data-item="label"]'),n=i.querySelector('[data-item="value"]');e.label=o.value,e.value=n.value,(t.target===n||e.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))}};v.styles=[h.Ix,n.iv`
      :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 ox-pfp {
        display: inline-block;
        width: 100px;
        height: 100px;
      }

      :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;
      }
    `],(0,o.gn)([(0,a.Cb)({type:Object})],v.prototype,"contact",void 0),(0,o.gn)([(0,a.SB)()],v.prototype,"stageContact",void 0),(0,o.gn)([(0,a.IO)("#name")],v.prototype,"name",void 0),(0,o.gn)([(0,a.IO)("#company")],v.prototype,"company",void 0),(0,o.gn)([(0,a.IO)("#note")],v.prototype,"note",void 0),(0,o.gn)([(0,a.IO)("ox-pfp")],v.prototype,"pfp",void 0),(0,o.gn)([(0,a.Kt)("[item-field]")],v.prototype,"fields",void 0),v=(0,o.gn)([(0,a.Mo)("ox-contact-edit")],v);var m=i(16682),u=i(27805),g=i(53421);let f=class extends n.oi{constructor(){super(...arguments),this.contact={},this.editMode=!1,this.detachable=!1}render(){return n.dy`
      <div content>
        ${this.editMode?n.dy`<ox-contact-edit
              .contact=${this.contact}
              @edit-cancel=${()=>this.editMode=!1}
              @edit-done=${t=>{this.updateContact(t.detail),this.editMode=!1}}
            ></ox-contact-edit>`:n.dy` <ox-contact-view .contact=${this.contact}></ox-contact-view>`}
      </div>

      <div class="button-container">
        ${this.editMode?n.dy`
              <mwc-button raised @click=${()=>this.editor.save()}>${g.z2.t("button.save")}</mwc-button>
              <mwc-button raised @click=${()=>this.editor.cancel()}>${g.z2.t("button.cancel")}</mwc-button>
              <mwc-button raised @click=${()=>this.editor.reset()}>${g.z2.t("button.reset")}</mwc-button>
            `:n.dy`
              ${this.detachable?n.dy`
                    <mwc-button
                      raised
                      danger
                      @click=${()=>{this.dispatchEvent(new CustomEvent("detach")),history.back()}}
                      >${g.z2.t("button.detach")}</mwc-button
                    >
                  `:n.dy``}
              <mwc-button raised @click=${()=>this.editMode=!0}>${g.z2.t("button.edit")}</mwc-button>
              <mwc-button raised @click=${()=>history.back()}>${g.z2.t("button.close")}</mwc-button>
            `}
      </div>
    `}async updateContact(t){if(t.id)var{id:e}=t,i=(0,o._T)(t,["id"]),n=await u.Lp.mutate({mutation:m.ZP`
          mutation ($id: String!, $patch: ContactPatch!) {
            contact: updateContact(id: $id, patch: $patch) {
              id
              name
              company
              email
              note
              items {
                label
                type
                value
              }
              profile {
                left
                top
                zoom
                picture
              }
            }
          }
        `,variables:{id:e,patch:i},context:{hasUpload:!0}});else n=await u.Lp.mutate({mutation:m.ZP`
          mutation ($contact: NewContact!) {
            contact: createContact(contact: $contact) {
              id
              name
              company
              email
              note
              items {
                label
                type
                value
              }
              profile {
                left
                top
                zoom
                picture
              }
            }
          }
        `,variables:{contact:t},context:{hasUpload:!0}});this.contact=n.data.contact,this.dispatchEvent(new CustomEvent("change",{detail:this.contact}))}};f.styles=[h.Ix,h.bx,n.iv`
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--popup-content-background-color);
      }

      [content] {
        flex: 1;
        padding: var(--padding-default);
        overflow: auto;
      }
    `],(0,o.gn)([(0,a.Cb)({type:Object}),(0,o.w6)("design:type",Object)],f.prototype,"contact",void 0),(0,o.gn)([(0,a.Cb)({type:Boolean,attribute:"edit-mode"}),(0,o.w6)("design:type",Boolean)],f.prototype,"editMode",void 0),(0,o.gn)([(0,a.Cb)({type:Boolean}),(0,o.w6)("design:type",Boolean)],f.prototype,"detachable",void 0),(0,o.gn)([(0,a.IO)("ox-contact-edit"),(0,o.w6)("design:type",v)],f.prototype,"editor",void 0),f=(0,o.gn)([(0,a.Mo)("contact-popup")],f)}}]);