import{LitElement as e,html as t,css as i}from"lit";import{classMap as l}from"lit/directives/class-map.js";import{iconRemixCheckboxCircleLine as o,iconRemixCloseCircleLine as r}from"./assets/cc-remix.icons.js";import{analyzePalette as s}from"./lib/ansi/ansi-palette-analyser.js";import{ansiPaletteStyle as a}from"./lib/ansi/ansi-palette-style.js";import{i18n as c}from"./translation.js";import"./cc-icon.js";import"./cc-input-text.js";const n=["red","green","yellow","blue","magenta","cyan"];class p extends e{static get properties(){return{name:{type:String},palette:{type:Object}}}constructor(){super(),this.name="",this.palette=null,this._style="",this._analysis=null}willUpdate(e){e.has("palette")&&(this._style=a(this.palette).replaceAll(";",";\n").slice(0,-1),this._analysis=s(this.palette))}render(){return null==this.palette?"":t`
      <div class="main" style="${this._style}">
        <div class="top">
          <div class="title">${this.name}</div>
          <div class="title--right">
            ${c("cc-ansi-palette.fg-bg",{foreground:this.palette.foreground,background:this.palette.background})}
          </div>
        </div>
        <div class="hover">${c("cc-ansi-palette.hover",{color:this.palette["background-hover"]})}</div>
        <div class="selected">${c("cc-ansi-palette.selected",{color:this.palette["background-selected"]})}</div>

        <div class="colors-grid">${n.map((e=>this.renderColorGridLine(e)))}</div>
      </div>

      <cc-input-text readonly multi clipboard .value=${this._style}></cc-input-text>
    `}renderColorGridLine(e){const i=`bright-${e}`;return t`
      <div class="color color--left">${this.renderColor(e)}</div>
      ${this.renderSquare(e)} ${this.renderSquare(i)}
      <div class="color color--right">${this.renderColor(i)}</div>
    `}renderSquare(e){return t`<div class="square" style="background-color: var(--cc-color-ansi-${e});"></div>`}renderColor(e){const i=this.palette[e],s=this._analysis.contrasts[e],a=s.compliant?o:r,n=s.compliant?c("cc-ansi-palette.compliant"):c("cc-ansi-palette.not-compliant");return t`
      <span style="color: var(--cc-color-ansi-${e});">AaBbMmYyZz</span>
      <span>${i}</span>
      <div class="ratio ${l({compliant:s.compliant,"not-compliant":!s.compliant})}">
        <cc-icon .icon=${a} size="lg" a11y-name="${n}"></cc-icon>
        ${c("cc-ansi-palette.ratio",{ratio:s.ratio})}
      </div>
    `}static get styles(){return[i`
        :host {
          display: block;
          font-family: var(--cc-ff-monospace, monospace);
        }

        .top {
          display: flex;
        }

        .top,
        .hover,
        .selected {
          padding: 0.2em;
        }

        .title {
          flex: 1;
          font-weight: bold;
        }

        .title--right {
          flex-shrink: 0;
        }

        .hover {
          background-color: var(--cc-color-ansi-background-hover);
        }

        .selected {
          background-color: var(--cc-color-ansi-background-selected);
        }

        .colors-grid {
          align-items: center;
          display: grid;
          grid-column-gap: 0.5em;
          grid-template-columns: 1fr min-content min-content 1fr;
          padding-bottom: 1em;
          padding-top: 1em;
        }

        .color-line {
          align-items: center;
          display: flex;
          gap: 0.5em;
        }

        .palette-squares {
          display: inline-flex;
        }

        .palette-colors {
          display: flex;
        }

        .square {
          height: 3em;
          width: 3em;
        }

        .color {
          align-items: center;
          display: inline-flex;
          gap: 1em;
          justify-content: center;
        }

        .color--left {
          justify-self: end;
        }

        .color--right {
          justify-self: start;
        }

        .ratio {
          align-items: center;
          display: inline-flex;
          gap: 0.3em;
          justify-content: center;
        }

        .compliant {
          color: var(--cc-color-text-success, green);
        }

        .not-compliant {
          color: var(--cc-color-text-danger, red);
        }

        cc-input-text {
          margin-top: 1em;
          max-height: 200px;
          overflow: auto;
        }
      `]}}window.customElements.define("cc-ansi-palette",p);export{p as CcAnsiPalette};
//# sourceMappingURL=cc-ansi-palette.js.map
