import e from"dedent";import{LitElement as t,html as o,css as r}from"lit";import"./cc-clipboard.js";import"./cc-icon.js";class s extends t{static get properties(){return{_formattedCode:{type:String,state:!0}}}constructor(){super(),this._formattedCode="",this._mutationObserver=new MutationObserver((()=>{this._formatCode()}))}_onSlotchange(e){this._mutationObserver.disconnect(),e.target.assignedNodes().forEach((e=>{this._mutationObserver.observe(e,{characterData:!0,subtree:!0})})),this._formatCode()}disconnectedCallback(){super.disconnectedCallback(),this._mutationObserver.disconnect()}render(){return o`
      <slot @slotchange="${this._onSlotchange}"></slot>
      <code tabindex="0">${this._formattedCode}</code>
      <cc-clipboard value="${this._formattedCode}"></cc-clipboard>
    `}_formatCode(){const t=this.shadowRoot.querySelector("slot").assignedNodes().map((e=>e.textContent)).join("");this._formattedCode=e(t)}static get styles(){return[r`
        :host {
          align-items: start;
          background-color: var(--cc-color-bg-neutral);
          border: 1px solid var(--cc-color-border-neutral, #bfbfbf);
          border-radius: var(--cc-border-radius-default, 0.25em);
          display: flex;
          font-family: var(--cc-ff-monospace), serif;
          gap: 0.5em;
          padding: 0.5em;
          word-break: break-all;
        }

        slot {
          display: none;
        }

        code {
          flex: 1 1 0;
          font-size: calc(1em); /* Force font size to 14px */
          line-height: 1.5;
          overflow-x: auto;
          padding-left: 0.25em;
          white-space: pre;
        }
      `]}}window.customElements.define("cc-code",s);export{s as CcCode};
//# sourceMappingURL=cc-code.js.map
