"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[8855],{68855:(e,t,r)=>{r.r(t);var i=r(50493),a=(r(81925),r(27683),r(16682)),o=r(94430),n=r(56765),d=r(27805),l=r(53421),s=r(80692);let c=class extends((0,l.NC)(l.z2)(o.oi)){render(){return o.dy`
      <mwc-textfield
        type="text"
        name="name"
        label=${l.z2.t("label.x name",{x:l.z2.t("label.role")})}
      ></mwc-textfield>
      <mwc-textfield
        type="text"
        name="description"
        label=${l.z2.t("label.x description",{x:l.z2.t("label.role")})}
      ></mwc-textfield>

      <mwc-button @click=${this.onCreateRole.bind(this)} outlined label="${l.z2.t("button.create")}"></mwc-button>
    `}async onCreateRole(){let e={};const t=this.nameInput.value.trim(),r=this.descriptionInput.value;if(!t)return this.showToast(l.z2.t("error.value is empty",{value:l.z2.t("field.name")}));e.name=t,e.description=r;if(!(await(0,s.ID)({title:l.z2.t("text.are_you_sure"),text:l.z2.t("text.do_you_want_to_create_x",{x:l.z2.t("label.role")}),confirmButton:{text:l.z2.t("button.confirm")},cancelButton:{text:l.z2.t("button.cancel")}})).value)return;(await d.Lp.mutate({mutation:a.ZP`
        mutation createRole($role: NewRole!) {
          createRole(role: $role) {
            name
          }
        }
      `,variables:{role:e},context:(0,d.Bn)()})).errors||(await this.dispatchEvent(new CustomEvent("fetch-roles")),await(0,s.ID)({type:"success",title:l.z2.t("text.completed"),text:l.z2.t("text.data_uploaded_successfully"),confirmButton:{text:l.z2.t("button.confirm")}}),this.nameInput.value="",this.descriptionInput.value="")}showToast(e){document.dispatchEvent(new CustomEvent("notify",{detail:{message:e,option:{timer:1e3}}}))}};c.styles=o.iv`
    :host {
      --mdc-text-field-fill-color: var(--theme-white-color);
      background-color: var(--theme-white-color);
      margin: var(--margin-wide) 0;
      padding: var(--padding-wide);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);

      display: grid;
      grid-template-columns: 1fr 2fr auto;
      gap: 5px 15px;
      clear: both;
      max-width: var(--input-container-max-width);

      align-items: center;
    }

    mwc-button {
      margin: var(--input-margin);
    }

    @media screen and (max-width: 480px) {
      :host {
        grid-template-columns: 1fr 1fr;
      }

      mwc-button {
        grid-column: span 2;

        margin: var(--input-margin);
      }
    }
  `,(0,i.gn)([(0,n.IO)("[name=name]"),(0,i.w6)("design:type",HTMLInputElement)],c.prototype,"nameInput",void 0),(0,i.gn)([(0,n.IO)("[name=description]"),(0,i.w6)("design:type",HTMLInputElement)],c.prototype,"descriptionInput",void 0),c=(0,i.gn)([(0,n.Mo)("create-role")],c);let p=class extends((0,l.NC)(l.z2)(o.oi)){render(){const e=this.role||{name:"",description:""};return o.dy`
      <form field-2column @input="${this.dispatchRoleChanged.bind(this)}">
        <div field>
          <label
            >role name
            <input name="name" value="${e.name}" @click="${e=>e.stopPropagation()}" />
          </label>
        </div>

        <div field>
          <label
            >role description
            <input name="description" .value="${e.description}" @click="${e=>e.stopPropagation()}" />
          </label>
        </div>
      </form>
    `}getRole(){const e=this.nameInput.value,t=this.descriptionInput.value;return e?{name:e,description:t}:this.showToast(l.z2.t("error.value is empty",{value:l.z2.t("field.name")}))}dispatchRoleChanged(){this.dispatchEvent(new CustomEvent("roleChanged",{detail:this.getRole()}))}showToast(e){document.dispatchEvent(new CustomEvent("notify",{detail:{message:e,option:{timer:1e3}}}))}};p.styles=o.iv`
    [field-2column] {
      border-radius: var(--border-radius);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px 15px;
      clear: both;
      max-width: var(--input-container-max-width);
    }
    [field] {
      display: flex;
      flex-direction: column;
      padding-bottom: var(--padding-default);
    }
    input {
      border: var(--border-dark-color);
      border-radius: var(--border-radius);
      margin: var(--input-margin);
      padding: var(--input-padding);
      min-width: 250px;
      font: var(--input-font);
    }
    label {
      display: flex;
      flex-direction: column;
      font: var(--label-font);
      color: var(--theme-white-color);
      text-transform: var(--label-text-transform);
    }
    @media screen and (max-width: 480px) {
      [field] {
        grid-column: span 2;
      }
    }
  `,(0,i.gn)([(0,n.Cb)({type:Object}),(0,i.w6)("design:type",Object)],p.prototype,"role",void 0),(0,i.gn)([(0,n.IO)("input[name=name]"),(0,i.w6)("design:type",HTMLInputElement)],p.prototype,"nameInput",void 0),(0,i.gn)([(0,n.IO)("input[name=description]"),(0,i.w6)("design:type",HTMLInputElement)],p.prototype,"descriptionInput",void 0),p=(0,i.gn)([(0,n.Mo)("role-edit-form")],p);let u=class extends((0,l.NC)(l.z2)(o.oi)){constructor(){super(...arguments),this.allPrivileges=[],this.privileges=[]}render(){const e=this.allPrivileges||[],t=this.privileges||[];return o.dy`
      <div>
        <input id="checkAll" type="checkbox" @change=${e=>this.oncheckAll(e)} />
        <label for="checkAll">Check all</label>
      </div>

      <ul privileges>
        ${e.map((e=>o.dy`
            <li>
              <input
                type="checkbox"
                id="${e.id}"
                .checked=${t.map((e=>e.id)).indexOf(e.id)>-1}
                .data-privilege=${e}
              />
              <label for="${e.id}">${e.description}</label>
            </li>
          `))}
      </ul>

      <div buttons>
        <mwc-button @click=${e=>this.onSave()} outlined label="${l.z2.t("button.save")}"></mwc-button>
        <mwc-button
          @click=${e=>this.onDeleteRole()}
          raised
          danger
          label="${l.z2.t("button.delete role")}"
        ></mwc-button>
      </div>
    `}async firstUpdated(){this.allPrivileges=await this.fetchPrivileges()}async updated(e){e.has("role")&&(this.privileges=await this.fetchPrivilegesOnRole(this.role.name))}checkAll(e){Array.from(this.renderRoot.querySelectorAll("ul[privileges] input[type=checkbox]")).forEach((t=>t.checked=e))}oncheckAll(e){this.checkAll(e.target.checked)}async onSave(){const e=this.updateRoleObj,t=Array.from(this.renderRoot.querySelectorAll("ul[privileges] input[type=checkbox]:checked")).map((e=>e["data-privilege"])),r=Object.assign(Object.assign({},e),{privileges:t});if(this.role){(await d.Lp.mutate({mutation:a.ZP`
          mutation ($id: String!, $patch: RolePatch!) {
            updateRole(id: $id, patch: $patch) {
              id
              name
              description
              privileges {
                id
                description
              }
            }
          }
        `,variables:{id:this.role.id,patch:r},context:(0,d.Bn)()})).errors||(await this.dispatchEvent(new CustomEvent("fetch-roles")),this.showToast(l.z2.t("text.data_updated_successfully")))}}async onDeleteRole(){if(!(await(0,s.ID)({title:l.z2.t("text.are_you_sure"),text:l.z2.t("text.are_you_sure_to_delete_x",{x:l.z2.t("label.role")}),confirmButton:{text:l.z2.t("button.delete")},cancelButton:{text:l.z2.t("button.cancel")}})).value)return;(await d.Lp.mutate({mutation:a.ZP`
        mutation ($id: String!) {
          deleteRole(id: $id)
        }
      `,variables:{id:this.role.id},context:(0,d.Bn)()})).errors||(await this.dispatchEvent(new CustomEvent("fetch-roles")),await(0,s.ID)({type:"success",title:l.z2.t("text.completed"),text:l.z2.t("text.x_deleted_successfully",{x:l.z2.t("label.role")}),confirmButton:{text:l.z2.t("button.confirm")}}))}async fetchPrivileges(){return(await d.Lp.query({query:a.ZP`
        query privileges {
          privileges {
            items {
              id
              name
              description
            }
            total
          }
        }
      `})).data.privileges.items}async fetchPrivilegesOnRole(e){var t;return null===(t=(await d.Lp.query({query:a.ZP`
        query ($name: String!) {
          role(name: $name) {
            id
            name
            privileges {
              id
              description
            }
          }
        }
      `,variables:{name:e},context:(0,d.Bn)()})).data.role)||void 0===t?void 0:t.privileges}showToast(e){document.dispatchEvent(new CustomEvent("notify",{detail:{message:e,option:{timer:1e3}}}))}};u.styles=[o.iv`
      :host {
        display: flex;
        flex-direction: column;

        border: 1px solid var(--primary-color);
        font: normal 15px var(--theme-font);
        color: var(--secondary-color);
      }
      div {
        margin: var(--margin-default);
      }
      ul {
        flex: 1;
        background-color: var(--theme-white-color);
        overflow: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0;
        padding: var(--padding-default);
        list-style: none;
        border: 1px dashed rgba(0, 0, 0, 0.1);
        border-width: 1px 0;
      }

      input[type='checkbox'] {
        display: inline;
      }

      li {
        padding: var(--padding-narrow);
      }

      #checkAll,
      [for='checkAll'] {
        margin-bottom: var(--margin-default);
        padding-bottom: var(--padding-narrow);
        font-weight: bold;
      }

      [buttons] {
        margin: 0;
        padding: var(--padding-default);
        background-color: rgba(var(--primary-color-rgb), 0.2);
      }

      mwc-button {
        background-color: var(--theme-white-color);
        overflow: hidden;
      }
      [danger] {
        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
      }
      [outlined] {
        background-color: var(--theme-white-color);
      }

      @media screen and (max-width: 480px) {
        ul {
          grid-template-columns: 1fr;
        }
      }
    `],(0,i.gn)([(0,n.Cb)({type:Object}),(0,i.w6)("design:type",Object)],u.prototype,"role",void 0),(0,i.gn)([(0,n.Cb)({type:Array}),(0,i.w6)("design:type",Array)],u.prototype,"allPrivileges",void 0),(0,i.gn)([(0,n.Cb)({type:Array}),(0,i.w6)("design:type",Array)],u.prototype,"privileges",void 0),(0,i.gn)([(0,n.Cb)({type:Object}),(0,i.w6)("design:type",Object)],u.prototype,"updateRoleObj",void 0),u=(0,i.gn)([(0,n.Mo)("role-privilege-editor")],u);var h=r(28120),m=r(77675);let b=class extends((0,h.$)(m.h)(m.B4)){constructor(){super(...arguments),this.title="",this.roles=[]}get context(){return{title:l.z2.t("text.role_management"),help:"auth/roles"}}render(){const e={roles:this.roles||[]};return o.dy`
      <h2>Roles</h2>
      <div subtitle>${l.z2.t("text.create role")}</div>
      <create-role
        @fetch-roles=${async()=>{this.roles=await this.fetchRoles()}}
      ></create-role>

      <div subtitle>${l.z2.t("text.registered roles")}</div>
      <div id="roles-privileges">
        <quick-find-list
          .data="${e}"
          .openHeaderRenderer=${e=>o.dy`
              <role-edit-form .role="${e}" @roleChanged="${e=>this.updateRoleObj=e.detail}"></role-edit-form>
            `}
          .contentRenderer="${(e,t)=>o.dy`
            <role-privilege-editor
              .updateRoleObj=${this.updateRoleObj||{}}
              .role=${e}
              @fetch-roles=${async()=>{this.roles=await this.fetchRoles(),await this.updateComplete,this.quickFindList.openByKey(e.id)}}
            ></role-privilege-editor>
          `}"
        ></quick-find-list>
      </div>
    `}async pageUpdated(e,t,r){this.active&&(this.roles=await this.fetchRoles(),this.role=this.roles&&this.roles[0])}async fetchRoles(){return(await d.Lp.query({query:a.ZP`
        query roles($sortings: [Sorting!]) {
          roles(sortings: $sortings) {
            items {
              id
              name
              description
              privileges {
                id
                name
              }
            }
            total
          }
        }
      `,variables:{sortings:[{name:"name"}]},context:(0,d.Bn)()})).data.roles.items}};b.styles=[o.iv`
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--main-section-background-color);
        padding: var(--padding-wide);
        overflow: auto;
      }
      h2 {
        margin: var(--title-margin);
        font: var(--title-font);
        color: var(--title-text-color);
      }
      [subtitle] {
        padding: var(--subtitle-padding);
        font: var(--subtitle-font);
        color: var(--subtitle-text-color);
      }
      input {
        display: block;
      }
      #roles-privileges {
        flex: 1;
        display: flex;
        margin-top: var(--margin-default);
        max-width: var(--content-container-max-width);
        flex-direction: row;
        overflow: auto;
        border-top: var(--border-dark-color);
      }
    `],(0,i.gn)([(0,n.Cb)({type:String}),(0,i.w6)("design:type",String)],b.prototype,"title",void 0),(0,i.gn)([(0,n.Cb)({type:Object}),(0,i.w6)("design:type",Object)],b.prototype,"role",void 0),(0,i.gn)([(0,n.Cb)({type:Array}),(0,i.w6)("design:type",Array)],b.prototype,"roles",void 0),(0,i.gn)([(0,n.Cb)({type:Object}),(0,i.w6)("design:type",Object)],b.prototype,"updateRoleObj",void 0),(0,i.gn)([(0,n.IO)("quick-find-list"),(0,i.w6)("design:type",Object)],b.prototype,"quickFindList",void 0),b=(0,i.gn)([(0,n.Mo)("role-management")],b)},81925:(e,t,r)=>{var i=r(9201),a=r(94430),o=r(15494);class n extends((0,o.N)(o.z)(a.oi)){static get styles(){return[a.iv`
        .tabs {
          display: flex;
        }
        .tab {
          background-color: var(--secondary-background-color);
          margin-top: var(--margin-default);
          padding: var(--padding-narrow) var(--padding-wide) 0 var(--padding-wide);
          border-radius: 9px 9px 0 0;
          border-right: 1px solid rgba(0, 0, 0, 0.4);
          text-transform: capitalize;
          color: var(--theme-white-color);
          opacity: 0.7;
          cursor: pointer;
          white-space: nowrap;
        }
        .tab[activate] {
          background-color: var(--primary-color);
          box-shadow: 2px -2px 2px 0px rgba(0, 0, 0, 0.15);
          opacity: 1;
          font-weight: bold;
        }
        .tab[disabledTab] {
          pointer-events: none;
        }
        .tab span,
        .tab span[activate] {
          font-weight: normal;
          font-size: var(--fontsize-default);
        }

        @media screen and (max-width: 480px) {
          .tab {
            margin-top: var(--margin-narrow);
            padding: var(--padding-narrow) var(--padding-default);
            text-align: center;
          }
          .tab[disabledTab] {
            pointer-events: none;
          }
          .tab span,
          .tab span[activate] {
            font-size: var(--fontsize-default);
            margin-top: -4px;
          }
        }
      `]}static get properties(){return{data:Object,currentTabKey:String,disabledKey:Object}}render(){const e=this.data||{},t=Object.keys(e),r=this.currentTabKey||t[0];return a.dy`
      ${t?.length>1?a.dy`
            <div class="tabs">
              ${t.map(((t,i)=>{const o=e[t];return a.dy`
                  <div
                    class="tab"
                    ?activate="${t===r}"
                    ?disabledTab="${!!Object.keys(this.disabledKey||{}).includes(t)&&!this.disabledKey[t]}"
                    @click="${()=>this.currentTabKey=t}"
                  >
                    ${t} ${o?.length>0?a.dy`<span>(${o.length})</span>`:""}
                  </div>
                `}))}
            </div>
          `:""}
    `}updated(e){e.has("currentTabKey")&&this.dispatchEvent(new CustomEvent("tabChanged",{detail:{currentTabKey:this.currentTabKey},bubbles:!0,composed:!0,cancelable:!0}))}}customElements.define("quick-find-tabs",n);r(77198);class d extends a.oi{static get styles(){return[a.iv`
        .nav-bar {
          background-color: var(--theme-white-color);
          border: 1px solid var(--primary-color);
          border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
          margin: 0 0 var(--margin-wide) 0;
          padding: var(--padding-narrow);
          transition: opacity ease-in-out 0.3s;
          opacity: 100%;
          color: var(--secondary-color);
          font-size: var(--fontsize-default);
        }
        .nav-bar[scrolling] {
          opacity: 100%;
          transition: opacity ease-in-out 0.3s;
        }
        .nav-bar * {
          vertical-align: middle;
        }
        mwc-icon {
          --mdc-icon-size: 14px;
          padding-left: var(--padding-narrow);
          position: relative;
          margin-top: -2px;
        }
        .nav-bar span {
          border-right: var(--border-dark-color);
          border-width: 0 1px;
          padding: 0 var(--padding-default) 0 var(--padding-narrow);
          opacity: 0.8;
          color: var(--secondary-color);
          font-size: var(--fontsize-small);
        }
        .nav-bar span[activate] {
          font-weight: bold;
          cursor: pointer;
          color: var(--secondary-text-color);
          font-size: var(--fontsize-default);
        }

        @media screen and (max-width: 480px) {
          :host {
            width: 25px;
          }
          .nav-bar {
            position: absolute;
            right: 25px;
            z-index: 100;

            background-color: rgba(var(--primary-color-rgb), 0.2);
            border: none;
            border-radius: 15px;
            margin-top: initial;
            padding: var(--padding-narrow) 0;
            opacity: 0%;
            text-align: center;
          }
          .nav-bar span {
            display: block;
            border: none;
            margin: auto;
            padding: 2px var(--padding-narrow) 0 var(--padding-narrow);
            font-size: 12px;
          }
        }
      `]}static get properties(){return{scrolling:Boolean,indexes:Array,activeIndexes:Array}}constructor(){super(),this.indexes=[...Array(26).fill(65).map(((e,t)=>String.fromCharCode(e+=t))),"#"]}render(){const e=this.activeIndexes||[],t=Boolean(this.scrolling),r=this.scrollable;return a.dy`
      ${r?a.dy`<div class="nav-bar" ?scrolling=${t}>
            <mwc-icon>anchor</mwc-icon> <label>Quick Find :</label>
            ${this.indexes.map((t=>{const r=e.indexOf(t)>=0;return a.dy` <span
                ?activate="${r}"
                class="nav-cursor"
                @click=${e=>{r&&this.onclickNavCursor(t)}}
                >${t}</span
              >`}))}
          </div>`:""}
    `}onclickNavCursor(e){this.dispatchEvent(new CustomEvent("navigateTo",{detail:e,composed:!0}))}}customElements.define("quick-find-scroll",d);class l extends a.oi{static get styles(){return[i.Ix,a.iv`
        :host {
          display: flex;
          flex: 1;
          flex-direction: column;
          overflow: hidden;
          max-width: var(--content-container-max-width);
        }
        .list-container {
          flex: 1;

          display: flex;
          flex-direction: column;
          background-color: var(--theme-white-color);
          border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
          border: var(--border-dark-color);
          border-width: 0 1px 1px 1px;
          box-shadow: var(--box-shadow);
          overflow: auto;
        }
        ul {
          margin: 0;
          padding: 0;
          flex: 1;
          list-style: none;
        }
        li {
          border-bottom: var(--border-dark-color);
          margin-bottom: -1px;
          color: var(--secondary-color);
        }
        li:nth-child(even) {
          background-color: rgba(0, 0, 0, 0.025);
        }
        li:hover {
          background-color: rgba(var(--primary-color-rgb), 0.2);
        }
        li div {
          font: bold 16px var(--theme-font);
        }
        li div.header {
          padding: var(--padding-default) var(--padding-wide);
        }
        [opened] {
          border-left: 4px solid var(--google-green-300);
          border-bottom: 3px solid rgba(0, 0, 0, 0.1);
        }
        [opened] .header {
          background-color: var(--primary-color);
          box-shadow: var(--box-shadow);
          color: var(--theme-white-color);
        }
        [opened] .header::after {
          display: block;
          margin-bottom: -16px;
          position: relative;
          margin-top: 9px;
          content: '';
          width: 0px;
          height: 0px;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-top: 7px solid var(--primary-color);
        }
        li span {
          display: block;
          opacity: 0.9;
          font: normal 14px/18px var(--theme-font);
        }
        .header mwc-icon {
          --mdc-icon-size: var(--fontsize-default);
          margin-right: var(--padding-narrow);
        }
        @media screen and (max-width: 480px) {
          .list-container {
            border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
            border-width: 0 1px 1px 1px;
          }
        }
      `]}static get properties(){return{data:Object,nameField:String,currentTabKey:String,list:Array,contentRenderer:Object,floatingDelay:Number,currentOpenedItemIdx:Number,scrollable:Boolean,headerRenderer:Function}}constructor(){super(),this.nameField="name",this.floatingDelay=1,this.headerRenderer=e=>a.dy`${e.name}<span>${e.description}</span>`}render(){const e=this.nameField,t=this.data||{},r=t[this.currentTabKey]?this.currentTabKey:Object.keys(t)[0];let i=this.data[r];i=this.sortByNameField(i);const o=this.currentOpenedItemIdx,n=this.computeActiveIndexes(i,e),d=this.scrollable;return a.dy`
      <quick-find-tabs
        .currentTabKey="${r}"
        .data="${t}"
        @tabChanged="${e=>{this.currentOpenedItemIdx=null,this.currentTabKey=e.detail.currentTabKey}}"
      ></quick-find-tabs>

      <quick-find-scroll
        @navigateTo="${this.navigateTo}"
        .scrollable="${d}"
        .activeIndexes="${n}"
      ></quick-find-scroll>

      <div class="list-container" @scroll=${this.onscroll.bind(this)}>
        <ul>
          ${i?.length?a.dy`
                ${i.map(((e,t)=>{const r=o===t;return a.dy`
                    <li
                      class="list-item"
                      ?opened="${r}"
                      .item="${e}"
                      @click="${()=>{this.currentOpenedItemIdx===t?this.currentOpenedItemIdx=-1:this.currentOpenedItemIdx=t}}"
                    >
                      <div class="header">
                        ${r&&"function"==typeof this.openHeaderRenderer?this.openHeaderRenderer(e):this.headerRenderer(e)}
                      </div>

                      ${r&&"function"==typeof this.contentRenderer?a.dy`<div @click="${e=>e.stopPropagation()}">
                            ${this.contentRenderer(e,this.currentTabKey)}
                          </div>`:""}
                    </li>
                  `}))}
              `:""}
        </ul>
      </div>
    `}get listItems(){return Array.from(this.renderRoot.querySelectorAll(".list-container li.list-item"))}get quickFindScroll(){return this.renderRoot.querySelector("quick-find-scroll")}async updated(e){(e.has("data")||e.has("currentTabKey"))&&(await this.updateComplete,this.scrollable=this.computeScrollable())}computeActiveIndexes(e,t){return Array.from(new Set(e?.map((e=>e[t][0].toUpperCase()))))}computeScrollable(){const e=this.renderRoot.querySelector("ul");return e.clientHeight<e.scrollHeight}navigateTo(e){const t=this.nameField,r=e.detail.toLowerCase(),i=this.sortByNameField(this.data[this.currentTabKey]).findIndex((e=>0===e[t].toLowerCase().indexOf(r))),a=this.renderRoot.querySelector(`ul :nth-child(${i+1})`);a?.scrollIntoView()}onscroll(){this.quickFindScroll.scrolling||(this.quickFindScroll.scrolling=!0),null!==this.timer&&clearTimeout(this.timer),this.timer=setTimeout((()=>{this.quickFindScroll.scrolling=!1}),1e3*this.floatingDelay)}sortByNameField(e){const t=this.nameField;return e?.sort(((e,r)=>e[t]>r[t]?1:e[t]<r[t]?-1:0))}close(){this.currentOpenedItemIdx=-1}openByKey(e,t="id"){this.currentOpenedItemIdx=this.listItems.findIndex((r=>r.item[t]===e))}}customElements.define("quick-find-list",l);class s extends a.oi{static get styles(){return[i.Ix,a.iv`
        :host {
          display: flex;
          flex: 1;
          flex-direction: column;
          overflow: hidden;
          max-width: var(--content-container-max-width);
        }
        .content-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          background-color: var(--theme-white-color);
          border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
          border: var(--border-dark-color);
          border-width: 0 1px 1px 1px;
          box-shadow: var(--box-shadow);
          overflow: auto;
        }
        @media screen and (max-width: 480px) {
          .content-container {
            border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
            border-width: 0 1px 1px 1px;
          }
        }
      `]}static get properties(){return{data:Object,currentTabKey:String,contentRenderer:Object,item:Object,disabledKey:Object}}render(){const e=this.data||{},t=e[this.currentTabKey]?this.currentTabKey:Object.keys(e)[0];let r=this.data[t];const i=this.disabledKey;return a.dy`
      <quick-find-tabs
        .currentTabKey="${t}"
        .data="${e}"
        .disabledKey="${i}"
        @tabChanged="${e=>{this.currentTabKey=e.detail.currentTabKey}}"
      ></quick-find-tabs>
      <div class="content-container">
        ${"function"==typeof this.contentRenderer?a.dy` <div>${this.contentRenderer(r,this.currentTabKey||t)}</div> `:""}
      </div>
    `}async updated(e){(e.has("data")||e.has("currentTabKey"))&&await this.updateComplete}}customElements.define("quick-find-content",s)}}]);