import{__decorate as t}from"tslib";import{LitElement as e,html as s}from"lit";import{property as i,state as n,customElement as o}from"lit/decorators.js";let r=class extends e{constructor(){super(...arguments),this.mode="foreColor",this.label="Text Color",this.value="#000000",this.palette=["#000000","#444444","#666666","#999999","#cccccc","#eeeeee","#ffffff","#d32f2f","#f44336","#ff9800","#ffeb3b","#4caf50","#2196f3","#3f51b5","#9c27b0","#03a9f4","#00bcd4","#009688","#8bc34a","#cddc39","#ffc107","#ff5722"],this.recentColors=[],this.pickCustom=()=>this.inputEl.click()}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.injectCss("\n      nile-button.rte-color-trigger::part(base){\n        width:32px; height:32px; padding:0px 6px;\n      }\n\n      .glyph-stack { display:grid; align-items:center; justify-items:center; line-height:1; }\n      .glyph { font-size:14px; margin-bottom:2px; }\n      .underline { width:18px; height:3px; border-radius:2px; }\n      .swatch-box { width:18px; height:16px; border-radius:4px; border:1px solid rgba(0,0,0,0.35); }\n\n      nile-popover::part(popover) {\n        min-width: 225px;\n        height: 250px;\n        padding: 0px;\n        gap: 0px;\n      }\n\n      .swatch-dropdown {\n        height: 245px;\n        width: 275px;\n        padding: 12px;\n        background: #fff;\n        border-radius: 8px;\n        box-sizing: border-box;\n        overflow-y: auto;\n      }\n\n      .section { margin-bottom: 12px; }\n      .title { font-size: 13px; font-weight: 600; margin-bottom: 8px; color:#111; }\n\n      .swatches {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 24px);\n        gap: 8px;\n      }\n\n      .swatch {\n        width: 24px;\n        height: 24px;\n        border-radius: 50%;\n        border: 1px solid rgba(0,0,0,0.25);\n        cursor: pointer;\n        position: relative;\n        background-clip: content-box;\n      }\n\n      .swatch.add {\n        display:flex;\n        align-items:center;\n        justify-content:center;\n        font-weight:bold;\n        font-size:16px;\n        background:#fff;\n      }\n\n      .checkmark {\n        position: absolute;\n        top: 50%; left: 50%;\n        transform: translate(-50%,-50%);\n        font-size: 13px;\n        color: white;\n        text-shadow: 0 0 2px rgba(0,0,0,0.6);\n      }\n    "),this.inputEl=document.createElement("input"),this.inputEl.type="color",this.inputEl.style.position="absolute",this.inputEl.style.opacity="0",this.inputEl.style.pointerEvents="none",this.inputEl.value=this.value,this.appendChild(this.inputEl),this.inputEl.addEventListener("input",(()=>this.setColor(this.inputEl.value)))}injectCss(t){if(this.querySelector("style[data-rte-color-style]"))return;const e=document.createElement("style");e.setAttribute("data-rte-color-style","true"),e.textContent=t,this.insertBefore(e,this.firstChild)}setColor(t){this.value=t,this.recentColors=[t,...this.recentColors.filter((e=>e!==t))].slice(0,8),this.dispatchEvent(new CustomEvent("change",{detail:{mode:this.mode,value:t},bubbles:!0,composed:!0}))}render(){return s`
      <nile-popover placement="bottom-start" distance="6" .arrow=${!1}>
        <nile-button
          slot="anchor"
          variant="ghost"
          aria-label=${this.label}
          class="rte-color-trigger"
        >
          ${"backColor"===this.mode?s`<span class="swatch-box" style="background:${this.value}"></span>`:s`
                <span class="glyph-stack">
                  <span class="glyph">A</span>
                  <span class="underline" style="background:${this.value}"></span>
                </span>
              `}
        </nile-button>

        <div part="base" class="swatch-dropdown">
          <div class="section">
            <div class="title">Default</div>
            <div class="swatches">
              ${this.palette.map((t=>s`
                <button class="swatch" style="background:${t}"
                  @click=${()=>this.setColor(t)}
                  title=${t}>
                  ${this.value===t?s`<span class="checkmark">✓</span>`:""}
                </button>
              `))}
            </div>
          </div>

          ${this.recentColors.length>0?s`
            <div class="section">
              <div class="title">Recently Used</div>
              <div class="swatches">
                ${this.recentColors.map((t=>s`
                  <button class="swatch" style="background:${t}"
                    @click=${()=>this.setColor(t)}
                    title=${t}></button>
                `))}
              </div>
            </div>
          `:""}

          <div class="section">
            <div class="title">Custom</div>
            <div class="swatches">
              <button class="swatch add" @click=${this.pickCustom}>+</button>
              <nile-icon name="eyedropper"></nile-icon>
            </div>
          </div>
        </div>
      </nile-popover>
    `}};t([i({type:String,attribute:!0,reflect:!0})],r.prototype,"mode",void 0),t([i({type:String,attribute:!0,reflect:!0})],r.prototype,"label",void 0),t([i({type:String,attribute:!0,reflect:!0})],r.prototype,"value",void 0),t([i({type:Array,attribute:!0,reflect:!0})],r.prototype,"palette",void 0),t([n()],r.prototype,"recentColors",void 0),r=t([o("nile-rte-color")],r);
