import{LitElement as t,html as e,css as n}from"../../../lit/index.js";class CodePenButton extends t{static get styles(){return[n`
        :host {
          display: block;
        }
      `]}render(){return e`
      <form action="${this.endPoint}" method="post" target="_blank">
        <input type="hidden" name="data" value="${this.dataString}" />
        <input
          type="image"
          src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cp-arrow-right.svg"
          width="40"
          height="40"
          value="Open code pen in a new window"
          class="codepen-mover-button"
          part="button"
        />
      </form>
    `}static get tag(){return"code-pen-button"}firstUpdated(){this.setAttribute("title",this.checkItOut)}constructor(){super(),this.checkItOut="Check it out on codepen",this.endPoint="https://codepen.io/pen/define",this.data={},this.dataString=""}updated(t){t.forEach(((t,e)=>{"data"==e&&this[e]&&""==this.dataString&&(this.dataString=this._getDataString(this[e]))}))}static get properties(){return{checkItOut:{type:String,attribute:"check-it-out"},endPoint:{type:String,attribute:"end-point"},dataString:{type:String,attribute:"data-string"},data:{type:Object}}}_getDataString(t){return JSON.stringify(t).replace(/"/g,"&quot;").replace(/'/g,"&apos;")}}customElements.define(CodePenButton.tag,CodePenButton);export{CodePenButton};