import { __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
let NileRteColor = class NileRteColor extends LitElement {
    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(`
      nile-button.rte-color-trigger::part(base){
        width:32px; height:32px; padding:0px 6px;
      }

      .glyph-stack { display:grid; align-items:center; justify-items:center; line-height:1; }
      .glyph { font-size:14px; margin-bottom:2px; }
      .underline { width:18px; height:3px; border-radius:2px; }
      .swatch-box { width:18px; height:16px; border-radius:4px; border:1px solid rgba(0,0,0,0.35); }

      nile-popover::part(popover) {
        min-width: 225px;
        height: 250px;
        padding: 0px;
        gap: 0px;
      }

      .swatch-dropdown {
        height: 245px;
        width: 275px;
        padding: 12px;
        background: #fff;
        border-radius: 8px;
        box-sizing: border-box;
        overflow-y: auto;
      }

      .section { margin-bottom: 12px; }
      .title { font-size: 13px; font-weight: 600; margin-bottom: 8px; color:#111; }

      .swatches {
        display: grid;
        grid-template-columns: repeat(auto-fill, 24px);
        gap: 8px;
      }

      .swatch {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid rgba(0,0,0,0.25);
        cursor: pointer;
        position: relative;
        background-clip: content-box;
      }

      .swatch.add {
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:bold;
        font-size:16px;
        background:#fff;
      }

      .checkmark {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%,-50%);
        font-size: 13px;
        color: white;
        text-shadow: 0 0 2px rgba(0,0,0,0.6);
      }
    `);
        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(cssText) {
        if (this.querySelector('style[data-rte-color-style]'))
            return;
        const style = document.createElement('style');
        style.setAttribute('data-rte-color-style', 'true');
        style.textContent = cssText;
        this.insertBefore(style, this.firstChild);
    }
    setColor(color) {
        this.value = color;
        this.recentColors = [color, ...this.recentColors.filter(c => c !== color)].slice(0, 8);
        this.dispatchEvent(new CustomEvent('change', {
            detail: { mode: this.mode, value: color },
            bubbles: true,
            composed: true
        }));
    }
    render() {
        return html `
      <nile-popover placement="bottom-start" distance="6" .arrow=${false}>
        <nile-button
          slot="anchor"
          variant="ghost"
          aria-label=${this.label}
          class="rte-color-trigger"
        >
          ${this.mode === 'backColor'
            ? html `<span class="swatch-box" style="background:${this.value}"></span>`
            : html `
                <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(c => html `
                <button class="swatch" style="background:${c}"
                  @click=${() => this.setColor(c)}
                  title=${c}>
                  ${this.value === c ? html `<span class="checkmark">✓</span>` : ''}
                </button>
              `)}
            </div>
          </div>

          ${this.recentColors.length > 0 ? html `
            <div class="section">
              <div class="title">Recently Used</div>
              <div class="swatches">
                ${this.recentColors.map(c => html `
                  <button class="swatch" style="background:${c}"
                    @click=${() => this.setColor(c)}
                    title=${c}></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>
    `;
    }
};
__decorate([
    property({ type: String, attribute: true, reflect: true })
], NileRteColor.prototype, "mode", void 0);
__decorate([
    property({ type: String, attribute: true, reflect: true })
], NileRteColor.prototype, "label", void 0);
__decorate([
    property({ type: String, attribute: true, reflect: true })
], NileRteColor.prototype, "value", void 0);
__decorate([
    property({ type: Array, attribute: true, reflect: true })
], NileRteColor.prototype, "palette", void 0);
__decorate([
    state()
], NileRteColor.prototype, "recentColors", void 0);
NileRteColor = __decorate([
    customElement('nile-rte-color')
], NileRteColor);
export { NileRteColor };
//# sourceMappingURL=nile-rte-color.js.map