import{LitElement as t,html as e,css as o}from"lit";import{classMap as i}from"lit/directives/class-map.js";import{createRef as a,ref as n}from"lit/directives/ref.js";import{iconRemixInformationFill as s,iconRemixHistoryLine as r,iconRemixCalendar_2Fill as c,iconRemixInformationLine as d,iconRemixDeleteBinLine as l}from"./assets/cc-remix.icons.js";import{LostFocusController as p}from"./controllers/lost-focus-controller.js";import{ResizeController as m}from"./controllers/resize-controller.js";import{getDevHubUrl as u}from"./lib/dev-hub-url.js";import{isExpirationClose as h}from"./lib/tokens.js";import{i18n as g}from"./translation.js";import"./cc-badge.js";import"./cc-block.js";import"./cc-link.js";import"./cc-loader.js";import"./cc-notice.js";import{CcTokensRevokeAllEvent as k,CcTokenRevokeEvent as f}from"./components/common.events.js";class _ extends t{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"},this._emptyMessageRef=a(),new m(this,{widthBreakpoints:[995,730]}),new p(this,".oauth-token-card__action-revoke, .revoke-all-tokens-button",(({suggestedElement:t})=>{t instanceof HTMLElement?t.focus():this._emptyMessageRef.value.focus()}))}_onRevokeAllOauthTokens(){this.dispatchEvent(new k)}_onRevokeToken(t){this.dispatchEvent(new f(t))}render(){if("error"===this.state.type)return e`<cc-notice intent="warning" message="${g("cc-token-oauth-list.error")}"></cc-notice>`;const t="loaded"===this.state.type&&0===this.state.oauthTokens.length,o="revoking-all"===this.state.type||!t&&"loading"!==this.state.type,i="loaded"===this.state.type||"revoking-all"===this.state.type?[...this.state.oauthTokens].sort(((t,e)=>e.creationDate.getTime()-t.creationDate.getTime())):[];return e`
      <cc-block>
        <div slot="header-title">${g("cc-token-oauth-list.main-heading")}</div>
        <div slot="header-right">
          ${o?e`
                <cc-button
                  class="revoke-all-tokens-button"
                  danger
                  outlined
                  ?waiting=${"revoking-all"===this.state.type}
                  @cc-click=${this._onRevokeAllOauthTokens}
                >
                  ${g("cc-token-oauth-list.revoke-all-tokens")}
                </cc-button>
              `:""}
        </div>
        <div slot="content">
          <p>${g("cc-token-oauth-list.intro")}</p>
          <div class="oauth-token-list-wrapper">
            ${"loading"===this.state.type?e`<cc-loader></cc-loader>`:""}
            ${t?e`<p class="empty" tabindex="-1" ${n(this._emptyMessageRef)}>
                  ${g("cc-token-oauth-list.empty")}
                </p>`:""}
            ${t?"":e`
                  <div class="oauth-token-list-wrapper__list">
                    ${i.map((t=>this._renderTokenCard(t)))}
                  </div>
                `}
          </div>
        </div>
        <div slot="footer-right">
          <cc-link slot="link" href="${u("/api/howto/#oauth1")}" .icon="${s}">
            <span>${g("cc-token-oauth-list.link.doc")}</span>
          </cc-link>
        </div>
      </cc-block>
    `}_renderTokenCard({type:t,id:o,consumerName:a,imageUrl:n,lastUsedDate:s,creationDate:p,expirationDate:m}){const u=h({creationDate:p,expirationDate:m});return e`
      <div class="oauth-token-card ${i({"is-revoking":"revoking"===t})}">
        <div class="oauth-token-card__header">
          <div class="oauth-token-card__header__logo-name">
            <cc-img src="${n}"></cc-img>
            <span>${a}</span>
          </div>
          ${u?e` <cc-badge intent="warning">${g("cc-token-oauth-list.card.expires-soon")}</cc-badge> `:""}
        </div>
        <dl class="oauth-token-card__info-list">
          <div class="oauth-token-card__info-list__item oauth-token-card__info-list__item--italic">
            <dt>
              <cc-icon .icon=${r}></cc-icon>
              <span>${g("cc-token-oauth-list.card.label.last-used")}</span>
            </dt>
            <dd>${g("cc-token-oauth-list.card.human-friendly-date",{date:s})}</dd>
          </div>
          <div class="oauth-token-card__info-list__item">
            <dt>
              <cc-icon .icon=${c}></cc-icon>
              <span>${g("cc-token-oauth-list.card.label.creation")}</span>
            </dt>
            <dd>${g("cc-token-oauth-list.card.human-friendly-date",{date:p})}</dd>
          </div>
          <div class="oauth-token-card__info-list__item oauth-token-card__info-list__item--bold">
            <dt>
              <cc-icon .icon=${d}></cc-icon>
              <span>${g("cc-token-oauth-list.card.label.expiration")}</span>
            </dt>
            <dd>
              <span>${g("cc-token-oauth-list.card.human-friendly-date",{date:m})}</span>
            </dd>
          </div>
        </dl>
        <cc-button
          class="oauth-token-card__action-revoke"
          danger
          outlined
          hide-text
          .icon=${l}
          circle
          ?waiting=${"revoking"===t}
          @cc-click=${()=>this._onRevokeToken(o)}
        >
          ${g("cc-token-oauth-list.revoke-token",{consumerName:a})}
        </cc-button>
      </div>
    `}static get styles(){return[o`
        :host {
          display: block;
        }

        [slot='link'] {
          align-items: center;
          color: var(--cc-color-text-primary-highlight, blue);
          display: flex;
          flex-direction: row;
          gap: 0.5em;
        }

        /* Reset default margins and paddings */
        dl,
        dd,
        dt {
          margin: 0;
          padding: 0;
        }

        p {
          margin: 0;
        }

        .is-revoking > :not(cc-button) {
          opacity: var(--cc-opacity-when-disabled, 0.65);
        }

        .empty {
          border: 1px solid var(--cc-color-border-neutral-weak);
          font-weight: bold;
          padding: 1em;
          text-align: center;
        }

        /* When all sessions are revoked, focus goes to the empty message container */
        .empty:focus-visible {
          outline: var(--cc-focus-outline);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .oauth-token-list-wrapper {
          margin-top: 2.5em;
        }

        .oauth-token-list-wrapper__list {
          display: grid;
          gap: 1.5em;
        }

        @supports (grid-template-columns: subgrid) {
          .oauth-token-list-wrapper__list {
            grid-template-columns: [card-start info-start] max-content max-content 1fr [info-end actions-start] auto [actions-end card-end];
          }

          :host([w-lt-995]) .oauth-token-list-wrapper__list {
            grid-template-columns: [card-start info-start] 1fr 1fr 1fr [info-end actions-start] auto [actions-end card-end];
          }
        }

        .oauth-token-card {
          align-items: center;
          border: solid 1px var(--cc-color-border-neutral-weak, #e6e6e6);
          border-radius: var(--cc-border-radius-default, 0.25em);
          display: grid;
          grid-template-columns: [card-start info-start] 1fr [info-end actions-start] auto [actions-end card-end];
          padding: 1em;
        }

        :host([w-lt-730]) .oauth-token-card {
          grid-template-columns: [card-start info-start] 1fr [info-end actions-start] max-content [actions-end card-end];
        }

        @supports (grid-template-columns: subgrid) {
          .oauth-token-card {
            display: grid;
            grid-column: card-start / card-end;
            grid-template-columns: subgrid;
          }

          :host([w-lt-730]) .oauth-token-card {
            grid-template-columns: [card-start info-start] 1fr [info-end actions-start] auto [actions-end card-end];
          }
        }

        .oauth-token-card__header {
          --cc-icon-size: 1.2em;

          align-items: center;
          column-gap: 1em;
          display: flex;
          flex-wrap: wrap;
          grid-column: info-start / info-end;
          margin-bottom: 1em;
          row-gap: 0.5em;
        }

        .oauth-token-card__header__logo-name {
          align-items: center;
          display: flex;
          font-weight: bold;
          gap: 0.5em;
        }

        .oauth-token-card__header__logo-name cc-img {
          border-radius: var(--cc-border-radius-default, 0.25em);
          height: 2em;
          width: 2em;

          --cc-img-fit: contain;
        }

        .oauth-token-card__info-list {
          display: flex;
          gap: 1em;
          grid-column: info-start / info-end;
        }

        :host([w-lt-730]) .oauth-token-card__info-list {
          display: grid;
          row-gap: 0.5em;
        }

        @supports (grid-template-columns: subgrid) {
          .oauth-token-card__info-list {
            display: grid;
            grid-column: info-start / info-end;
            grid-template-columns: subgrid;
          }

          :host([w-lt-730]) .oauth-token-card__info-list {
            row-gap: 0.5em;
          }
        }

        .oauth-token-card__info-list__item {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
        }

        :host([w-lt-995]) .oauth-token-card__info-list__item {
          display: grid;
        }

        @supports (grid-template-columns: subgrid) {
          :host([w-lt-730]) .oauth-token-card__info-list__item {
            display: flex;
          }
        }

        .oauth-token-card__info-list__item--italic {
          font-style: italic;
        }

        .oauth-token-card__info-list__item--bold {
          font-weight: bold;
        }

        dt {
          --line-height: 1.2em;
          --cc-icon-size: var(--line-height);

          align-items: center;
          display: flex;
          gap: 0.5em;
          line-height: var(--line-height);
        }

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

        .oauth-token-card cc-button {
          align-self: start;
          grid-column: actions-start / actions-end;
          grid-row: 1 / -1;
          justify-self: end;
        }
      `]}}window.customElements.define("cc-token-oauth-list",_);export{_ as CcTokenOauthList};
//# sourceMappingURL=cc-token-oauth-list.js.map
