import{LitElement as e,html as i,css as t}from"lit";import{classMap as o}from"lit/directives/class-map.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{createRef as n,ref as s}from"lit/directives/ref.js";import{iconRemixSettings_3Line as r,iconRemixInformationFill as c,iconRemixCloseLine as l}from"./assets/cc-remix.icons.js";import{LostFocusController as d}from"./controllers/lost-focus-controller.js";import{hasSlottedChildren as u}from"./directives/has-slotted-children.js";import{getAssetUrl as f}from"./lib/assets-url.js";import{fakeString as p}from"./lib/fake-strings.js";import{formSubmit as g}from"./lib/form/form-submit-directive.js";import{accessibilityStyles as m}from"./styles/accessibility.js";import{skeletonStyles as v}from"./styles/skeleton.js";import{i18n as h}from"./translation.js";import"./cc-block.js";import"./cc-link.js";import"./cc-notice.js";import"./cc-select.js";import{CcAddonVersionChangeEvent as b}from"./components/cc-addon-info/cc-addon-info.events.js";const _={"connection-limit":()=>h("cc-addon-info.feature.connection-limit"),cpu:()=>h("cc-addon-info.feature.cpu"),databases:()=>h("cc-addon-info.feature.databases"),dedicated:()=>h("cc-addon-info.feature.dedicated"),"disk-size":()=>h("cc-addon-info.feature.disk-size"),gpu:()=>h("cc-addon-info.feature.gpu"),"has-logs":()=>h("cc-addon-info.feature.has-logs"),"has-metrics":()=>h("cc-addon-info.feature.has-metrics"),"is-migratable":()=>h("cc-addon-info.feature.is-migratable"),"max-db-size":()=>h("cc-addon-info.feature.max-db-size"),memory:()=>h("cc-addon-info.feature.memory"),version:()=>h("cc-addon-info.feature.version"),"encryption-at-rest":()=>h("cc-addon-info.feature.encryption-at-rest"),users:()=>h("cc-addon-info.feature.users"),"data-exploration":()=>h("cc-addon-info.feature.data-exploration"),"db-analysis":()=>h("cc-addon-info.feature.db-analysis")},y=f("/logos/grafana.svg");class $ extends e{static get properties(){return{docLink:{type:Object,attribute:"doc-link"},state:{type:Object}}}constructor(){super(),this.docLink=null,this.state={type:"loading",creationDate:"2025-08-04 15:03:02"},this._versionDialogRef=n(),this._versionTextRef=n(),this._versionFormRef=n(),new d(this,"dialog",(()=>{this._versionTextRef.value?.focus()}))}_getFeatureValue(e){if(null==e)return"";switch(e.type){case"boolean":return h("cc-addon-info.type.boolean",{boolean:"true"===e.value});case"boolean-shared":return h("cc-addon-info.type.boolean-shared",{shared:"shared"===e.value});case"bytes":return"memory"===e.code&&"0"===e.value?h("cc-addon-info.type.boolean-shared",{shared:!0}):h("cc-addon-info.type.bytes",{bytes:Number(e.value)});case"number":return"cpu"===e.code&&"0"===e.value?h("cc-addon-info.type.boolean-shared",{shared:!0}):h("cc-addon-info.type.number",{number:Number(e.value)});case"number-cpu-runtime":return h("cc-addon-info.type.number-cpu-runtime",{cpu:e.value.cpu,shared:e.value.shared});case"string":return e.value?.toString()}}_getServiceType(e,i){if(i)return p(15);switch(e.type){case"app":return h("cc-addon-info.service.name.app",{name:e.name});case"addon":return h("cc-addon-info.service.name.addon",{name:e.name});default:return p(15)}}_onUpdateVersionRequested({version:e}){this.dispatchEvent(new b(e))}_onVersionDialogOpen(){this._versionDialogRef.value?.showModal()}_onVersionDialogClose(){this._versionDialogRef.value?.close()}updated(e){const i=e.get("state"),t="loaded"===i?.type&&"requesting-update"===i?.version?.stateType,o="loaded"===this.state.type&&"requesting-update"!==this.state.version?.stateType;t&&o&&(this._versionDialogRef.value?.close(),this._versionFormRef.value?.reset())}render(){if("error"===this.state.type)return i`<cc-notice intent="warning" message="${h("cc-addon-info.error")}"></cc-notice>`;const e="loading"===this.state.type;return i`
      <cc-block>
        <div slot="header-title">${h("cc-addon-info.heading")}</div>
        <div slot="content" class="main">
          ${null!=this.state.version?i`
                <div class="section" tabindex="-1" ${s(this._versionTextRef)}>
                  <strong class="heading">${h("cc-addon-info.version.heading")}</strong>
                  <div class="value version__content">
                    <p class="version__content__version ${o({skeleton:e})}">${this.state.version.installed}</p>
                    ${"up-to-date"!==this.state.version.stateType?i`
                          <cc-button
                            primary
                            outlined
                            ?waiting="${"requesting-update"===this.state.version.stateType}"
                            @cc-click="${this._onVersionDialogOpen}"
                            .icon="${r}"
                          >
                            ${h("cc-addon-info.version.btn")}
                          </cc-button>
                          ${this._renderVersionDialog(this.state.version)}
                        `:""}
                  </div>
                </div>
              `:""}
          ${null!=this.state.plan?i`
                <div class="section">
                  <strong class="heading">${h("cc-addon-info.plan.heading")}</strong>
                  <div class="value">
                    <p class="data-decoration ${o({skeleton:e})}">${this.state.plan}</p>
                  </div>
                </div>
              `:""}
          ${null!=this.state.features&&this.state.features.length>0?i`
                <div class="section">
                  <strong class="heading">${h("cc-addon-info.feature.heading")}</strong>
                  <dl class="value features__content">
                    ${this.state.features.map((i=>this._renderFeature(i,e)))}
                  </dl>
                </div>
              `:""}

          <div class="section">
            <strong class="heading">${h("cc-addon-info.creation-date.heading")}</strong>
            <div class="value">
              <p class="${o({skeleton:e})}">
                ${h("cc-addon-info.creation-date.human-friendly-date",{date:this.state.creationDate})}
              </p>
            </div>
          </div>

          ${null!=this.state.role?i`
                <div class="section">
                  <strong class="heading">${h("cc-addon-info.role.heading")}</strong>
                  <div class="value">
                    <p class="${o({skeleton:e})}">${this.state.role}</p>
                  </div>
                </div>
              `:""}
          ${null!=this.state.openGrafanaLink?i`
                <div class="section">
                  <strong class="heading">Grafana</strong>
                  <cc-link
                    class="value"
                    href="${this.state.openGrafanaLink}"
                    image="${y}"
                    ?skeleton=${e}
                    >${h("cc-addon-info.grafana.link")}
                  </cc-link>
                </div>
              `:""}
          ${null!=this.state.openScalabilityLink?i`
                <div class="section">
                  <strong class="heading">${h("cc-addon-info.scalability-link.heading")}</strong>
                  <cc-link
                    class="value"
                    href="${this.state.openScalabilityLink}"
                    .icon="${r}"
                    ?skeleton=${e}
                    >${h("cc-addon-info.scalability.link")}
                  </cc-link>
                </div>
              `:""}

          <div class="section section--billing" ${u()}>
            <strong class="heading">${h("cc-addon-info.billing.heading")}</strong>
            <div class="value">
              <slot name="billing"></slot>
            </div>
          </div>

          ${null!=this.state.linkedServices&&this.state.linkedServices.length>0?i`
                <div class="section">
                  <strong class="heading">${h("cc-addon-info.resources.heading")}</strong>
                  <div class="value linked-services__content">
                    <ul>
                      ${this.state.linkedServices.map((t=>i`
                          <li class="linked-service__li">
                            <cc-img
                              src="${a(e?void 0:t.logoUrl)}"
                              ?skeleton=${e}
                            ></cc-img>
                            <cc-link href="${t.link}" ?skeleton=${e}
                              >${this._getServiceType(t,e)}
                            </cc-link>
                          </li>
                        `))}
                    </ul>
                    <slot name="linked-services"></slot>
                  </div>
                </div>
              `:""}
        </div>
        ${null!=this.docLink?i`
              <div slot="footer-right">
                <cc-link href="${this.docLink.href}" .icon="${c}">${this.docLink.text}</cc-link>
              </div>
            `:""}
      </cc-block>
    `}_renderVersionDialog({stateType:e,available:t,installed:o,changelogLink:a,latest:n}){const r=t.map((e=>({label:e,value:e})));return i`
      <dialog aria-labelledby="dialog-heading" closedby="any" ${s(this._versionDialogRef)}>
        <button
          class="dialog-close"
          @click=${this._onVersionDialogClose}
          ?disabled="${"requesting-update"===e}"
        >
          <span class="visually-hidden">${h("cc-addon-info.version.dialog.close")}</span>
          <cc-icon .icon="${l}"></cc-icon>
        </button>
        <div class="dialog-heading" id="dialog-heading">${h("cc-addon-info.version.dialog.heading")}</div>
        <div class="dialog-desc">${h("cc-addon-info.version.dialog.desc",{url:a})}</div>
        <form ${g(this._onUpdateVersionRequested.bind(this))} ${s(this._versionFormRef)}>
          <div class="dialog-form">
            <p class="dialog-form__version-from">
              <strong>${h("cc-addon-info.version.dialog.select.desc")}</strong>
              <span>${o}</span>
            </p>
            <cc-select
              class="dialog-form__select"
              .options="${r}"
              .label="${h("cc-addon-info.version.dialog.select.label")}"
              .value="${n}"
              .resetValue="${n}"
              name="version"
              inline
            >
              <p slot="help" class="visually-hidden">
                ${h("cc-addon-info.version.dialog.select.help",{currentVersion:o})}
              </p>
            </cc-select>
          </div>
          <div class="dialog-form__actions">
            <cc-button
              primary
              outlined
              type="reset"
              @cc-click="${this._onVersionDialogClose}"
              ?disabled="${"requesting-update"===e}"
              >${h("cc-addon-info.version.dialog.btn.cancel")}</cc-button
            >
            <cc-button primary type="submit" ?waiting="${"requesting-update"===e}"
              >${h("cc-addon-info.version.dialog.btn.submit")}</cc-button
            >
          </div>
        </form>
      </dialog>
    `}_renderFeature({code:e,type:t,value:a},n){return i`
      <div class="features__content__item">
        <dt class="features__content__item__label ${o({skeleton:n})}">${_[e]()}</dt>
        <dd class="features__content__item__value data-decoration ${o({skeleton:n})}">
          ${this._getFeatureValue({code:e,type:t,value:a})}
        </dd>
      </div>
    `}static get styles(){return[m,v,t`
        :host {
          display: block;
        }

        .main {
          display: flex;
          flex-direction: column;
        }

        p,
        dl,
        dt,
        dd {
          margin: 0;
        }

        .section {
          align-items: flex-start;
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
          padding-block: 1em;
        }

        .section:focus-visible {
          outline: var(--cc-focus-outline);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .section:not(:first-child) {
          border-top: solid 1px var(--cc-color-border-neutral-weak);
        }

        .section.section--billing:not([billing-is-slotted]) {
          display: none;
        }

        .heading {
          flex: 1 1 33%;
          font-weight: bold;
          max-width: 21em;
        }

        .value {
          align-items: center;
          display: flex;
          flex: 1 1 21em;
          flex-wrap: wrap;
          gap: 0.5em;
        }

        .version__content {
          align-items: center;
          display: flex;
          gap: 1em;
        }

        .version__content__version {
          display: inline;
        }

        .data-decoration {
          border: solid 1px var(--cc-color-border-neutral, #bfbfbf);
          border-radius: var(--cc-border-radius-default, 0.25em);
          font-weight: bold;
          padding: 0.12em 0.4em;
        }

        .billing__container {
          display: none;
        }

        slot[name='linked-services'] {
          font-size: 0.9em;
        }

        ::slotted(p) {
          margin: 0;
        }

        .linked-services__content {
          gap: 0.75em;
        }

        .linked-services__content ul {
          column-gap: 1.5em;
          display: flex;
          flex-wrap: wrap;
          list-style: none;
          margin: 0;
          padding: 0;
          row-gap: 0.5em;
        }

        .linked-service__li {
          align-items: center;
          display: flex;
          gap: 0.5em;
        }

        .linked-service__li cc-img {
          border-radius: 0.19em;
          height: 1.5em;
          width: 1.5em;
        }

        .features__content {
          display: flex;
          flex-wrap: wrap;
          gap: 0.75em 1.5em;
        }

        .features__content__item {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
        }

        dialog {
          border: none;
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-shadow: 2px 4px 8px 0 rgb(0 0 0 / 12%);
          box-sizing: border-box;
          padding: 4em;
          width: min(38em, 80%);
        }

        /* stylelint-disable-next-line media-feature-range-notation */
        @media screen and (max-width: 38em) {
          dialog {
            padding: 1em;
          }
        }

        ::backdrop {
          background: rgb(30 30 30 / 55%);
        }

        @supports (backdrop-filter: blur(5px)) {
          ::backdrop {
            backdrop-filter: blur(5px);
            background: rgb(30 30 30 / 35%);
          }
        }

        .dialog-close {
          background: none;
          border: none;
          border-radius: var(--cc-border-radius-default, 0.25em);
          color: var(--cc-color-text-weak);
          cursor: pointer;
          padding: 0.5em;
          position: absolute;
          right: 1.5em;
          top: 1.5em;

          --cc-icon-size: 1.4em;
        }

        /* stylelint-disable-next-line media-feature-range-notation */
        @media screen and (max-width: 38em) {
          .dialog-close {
            right: 0.5em;
            top: 0.5em;
          }
        }

        .dialog-close:disabled {
          opacity: var(--cc-opacity-when-disabled);
        }

        .dialog-close:focus-visible {
          outline: var(--cc-focus-outline);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .dialog-heading {
          border-bottom: solid 1px var(--cc-color-border-neutral-weak);
          color: var(--cc-color-text-primary-strongest);
          font-weight: bold;
          margin-bottom: 1.25em;
          padding-bottom: 1.25em;
        }

        .dialog-desc {
          margin-bottom: 1.25em;
        }

        .dialog-form {
          align-items: baseline;
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em 1em;
        }

        .dialog-form__version-from {
          display: flex;
          gap: 1em;
        }

        .dialog-form__actions {
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
          justify-content: end;
          margin-top: 3.75em;
        }

        /* stylelint-disable-next-line media-feature-range-notation */
        @media screen and (max-width: 38em) {
          .dialog-form__actions {
            display: grid;
            justify-content: stretch;
            margin-top: 2em;
          }
        }

        .dialog-form cc-select {
          column-gap: 1em;
          flex: 1 1 auto;
        }

        .skeleton {
          background-color: #bbb;
          color: transparent;
        }
      `]}}customElements.define("cc-addon-info",$);export{$ as CcAddonInfo};
//# sourceMappingURL=cc-addon-info.js.map
