apollo-elements/apollo-elements

{
  "version": 3,
  "sources": ["../../../private/rocket-plugin/wcd-snippet.ts"],
  "sourcesContent": ["const template = document.createElement('template');\ntemplate.innerHTML = `\n  <style>\n  :host {\n    display: block;\n    box-sizing: border-box;\n    position: relative;\n    width: 100%;\n    height: auto;\n\n    --_-button-focus-background: hsla(0 100% 0% / 0.75);\n  }\n\n  iframe {\n    display: none;\n    border: 0;\n    overflow: hidden;\n  }\n\n  #snippet,\n  iframe {\n    width: 100%;\n    height: 100%;\n    border-radius: var(--wcd-snippet-border-radius, 6px);\n  }\n\n  #snippet {\n    display: block;\n  }\n\n  #snippet,\n  button {\n    border: 1px solid var(--wcd-snippet-border-color, transparent);\n    transition: border-color 0.2s ease-in-out;\n    will-change: border-color;\n  }\n\n  :host([live]) iframe {\n    display: block;\n    width: var(--iframe-width, 100%);\n    height: var(--iframe-height, 600px);\n  }\n\n  :host([live]) #snippet,\n  :host([live]) button {\n    display: none;\n  }\n\n  :host(:not([live]):focus-within) #snippet,\n  :host(:not([live]):hover) #snippet {\n    border-color: var(--wcd-snippet-focus-border-color, black);\n  }\n\n  button {\n    background: var(--wcd-snippet-button-background, hsla(0 100% 100% / 0.9));\n    border-bottom-right-radius: 6px;\n    border-top-left-radius: 6px;\n    color: inherit;\n    cursor: pointer;\n    display: block;\n    font-size: 16px;\n    outline: none;\n    padding: 9px 16px;\n    position: absolute;\n    bottom: 0;\n    right: -2px;\n    transition:\n      border-color 0.2s ease-in-out,\n      background 0.1s ease,\n      color 0.1s ease;\n  }\n\n  :host(:not([live]):focus-within) button,\n  :host(:not([live]):hover) button {\n    border-top-color: var(--wcd-snippet-focus-border-color, black);\n    border-left-color: var(--wcd-snippet-focus-border-color, black);\n    border-bottom-color: var(--wcd-snippet-outer-background-color, white);\n    border-right-color: var(--wcd-snippet-outer-background-color, white);\n  }\n\n  button:focus,\n  button:hover {\n    color: var(--wcd-snippet-button-focus-color, hsla(0 100% 100% / 0.75));\n    background: var(--wcd-snippet-button-focus-background, var(--_-button-focus-background));\n    border-bottom-color: var(--wcd-snippet-button-focus-background, var(--_-button-focus-background)) !important;\n    border-right-color: var(--wcd-snippet-button-focus-background, var(--_-button-focus-background)) !important;\n  }\n\n  </style>\n\n  <div id=\"snippet\"><slot></slot></div>\n\n  <iframe part=\"iframe\" sandbox=\"allow-scripts allow-same-origin allow-forms\"></iframe>\n\n  <button part=\"button\">\u25B6\uFE0F Live Demo</button>\n`;\n\nexport class WcdSnippet extends HTMLElement {\n  static get observedAttributes() {\n    return ['live', 'data-id', 'file'];\n  }\n\n  constructor() {\n    super();\n    this.show = this.show.bind(this);\n    this.attachShadow({ mode: 'open' }).append(template.content.cloneNode(true));\n    this.button.addEventListener('click', this.show);\n  }\n\n  $(x: string) { return this.shadowRoot.querySelector(x); }\n\n  get iframe(): HTMLIFrameElement { return this.$('iframe') as HTMLIFrameElement; }\n  get button(): HTMLButtonElement { return this.$('button') as HTMLButtonElement; }\n\n  get url() {\n    const { id } = this.dataset;\n    const file = this.getAttribute('file');\n    const url = new URL(`https://webcomponents.dev/edit/${id}`);\n    url.searchParams.set('embed', '1');\n    url.searchParams.set('sv', '1');\n    url.searchParams.set('pm', '1');\n    if (file)\n      url.searchParams.set('file', file);\n    return url;\n  }\n\n  attributeChangedCallback() {\n    if (this.hasAttribute('live'))\n      return this.load();\n  }\n\n  show() {\n    this.setAttribute('live', '');\n  }\n\n  load() {\n    const { title = 'Snippet' } = this.dataset;\n    this.iframe.title = title;\n    this.iframe.src = this.url.toString();\n  }\n}\n\ncustomElements.define('wcd-snippet', WcdSnippet);\n"],
  "mappings": ";AAAA,IAAM,WAAW,SAAS,cAAc;AACxC,SAAS,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgGd,+BAAyB,YAAY;AAAA,aAC/B,qBAAqB;AAC9B,WAAO,CAAC,QAAQ,WAAW;AAAA;AAAA,EAG7B,cAAc;AACZ;AACA,SAAK,OAAO,KAAK,KAAK,KAAK;AAC3B,SAAK,aAAa,EAAE,MAAM,UAAU,OAAO,SAAS,QAAQ,UAAU;AACtE,SAAK,OAAO,iBAAiB,SAAS,KAAK;AAAA;AAAA,EAG7C,EAAE,GAAW;AAAE,WAAO,KAAK,WAAW,cAAc;AAAA;AAAA,MAEhD,SAA4B;AAAE,WAAO,KAAK,EAAE;AAAA;AAAA,MAC5C,SAA4B;AAAE,WAAO,KAAK,EAAE;AAAA;AAAA,MAE5C,MAAM;AACR,UAAM,EAAE,OAAO,KAAK;AACpB,UAAM,OAAO,KAAK,aAAa;AAC/B,UAAM,MAAM,IAAI,IAAI,kCAAkC;AACtD,QAAI,aAAa,IAAI,SAAS;AAC9B,QAAI,aAAa,IAAI,MAAM;AAC3B,QAAI,aAAa,IAAI,MAAM;AAC3B,QAAI;AACF,UAAI,aAAa,IAAI,QAAQ;AAC/B,WAAO;AAAA;AAAA,EAGT,2BAA2B;AACzB,QAAI,KAAK,aAAa;AACpB,aAAO,KAAK;AAAA;AAAA,EAGhB,OAAO;AACL,SAAK,aAAa,QAAQ;AAAA;AAAA,EAG5B,OAAO;AACL,UAAM,EAAE,QAAQ,cAAc,KAAK;AACnC,SAAK,OAAO,QAAQ;AACpB,SAAK,OAAO,MAAM,KAAK,IAAI;AAAA;AAAA;AAI/B,eAAe,OAAO,eAAe;",
  "names": []
}