{
  "version": 3,
  "sources": ["../../../../node_modules/rocket-preset-playground-elements/components/docs-playground/docs-playground.ts"],
  "sourcesContent": ["import type { ProjectManifest } from 'playground-elements/shared/worker-api';\nimport type { PlaygroundIde } from 'playground-elements/playground-ide';\n\nconst playgroundImportMap =\n  JSON.parse('{\"@apollo/client/core\":\"{{ORIGIN}}/_merged_assets/_static/apollo-elements/apollo-client.js\",\"@apollo/client/utilities\":\"{{ORIGIN}}/_merged_assets/_static/apollo-elements/apollo-client.js\",\"@apollo/client/utilities/graphql/storeUtils.js\":\"{{ORIGIN}}/_merged_assets/_static/apollo-elements/apollo-client.js\",\"@apollo/client/link/schema\":\"{{ORIGIN}}/_merged_assets/_static/apollo-elements/schema-link.js\",\"@graphql-tools/mock\":\"{{ORIGIN}}/_merged_assets/_static/apollo-elements/schema-link.js\",\"@graphql-tools/schema\":\"{{ORIGIN}}/_merged_assets/_static/apollo-elements/schema-link.js\",\"@graphql-tools/tools\":\"{{ORIGIN}}/_merged_assets/_static/apollo-elements/schema-link.js\",\"event-iterator\":\"{{ORIGIN}}/_merged_assets/_static/apollo-elements/schema-link.js\"}'.replace(/{{(\\s+)?ORIGIN(\\s+)?}}/ig, location.origin));\n\nconst template = document.createElement('template');\ntemplate.innerHTML = `<style>\n:host {\n  display: block;\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  height: auto;\n}\n\nplayground-ide {\n  display: none;\n  border: 0;\n  overflow: hidden;\n\n  --playground-code-font-family: monospace;\n  --playground-code-font-size: 14px;\n  --playground-border: none;\n}\n\n#snippet,\nplayground-ide {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--playground-snippet-border-radius, 6px);\n}\n\n#snippet {\n  display: block;\n}\n\n#snippet,\nbutton {\n  border: 1px solid var(--playground-snippet-border-color, transparent);\n  transition: border-color 0.2s ease-in-out;\n  will-change: border-color;\n}\n\n:host([show]) playground-ide {\n  display: flex;\n  width: var(--playground-ide-width, 100%);\n  height: var(--playground-ide-height, 600px);\n}\n\nbutton {\n  background: var(--playground-snippet-button-background);\n  border-end-end-radius: 6px;\n  border-start-start-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\nbutton:focus,\nbutton:hover {\n  color: var(--playground-snippet-button-focus-color, var(--code-button-focus-color));\n  background: var(--playground-snippet-button-focus-background, var(--code-button-focus-background));\n  border-bottom-color: var(--playground-snippet-button-focus-background, var(--code-button-focus-background)) !important;\n  border-right-color: var(--playground-snippet-button-focus-background, var(--code-button-focus-background)) !important;\n}\n\n:host([show]) #snippet,\n:host([show]) button {\n  display: none;\n}\n\n:host(:not([show]):focus-within) #snippet,\n:host(:not([show]):hover) #snippet {\n  border-color: var(--playground-snippet-focus-border-color, black);\n}\n\n:host(:not([show]):focus-within) button,\n:host(:not([show]):hover) button {\n  border-top-color: var(--playground-snippet-focus-border-color, black);\n  border-left-color: var(--playground-snippet-focus-border-color, black);\n  border-bottom-color: var(--playground-snippet-outer-background-color, var(--page-background));\n  border-right-color: var(--playground-snippet-outer-background-color, var(--page-background));\n}\n\n#snippet ::slotted(pre) {\n  margin-bottom: 0 !important;\n}\n\n:host([loading]) #edit,\n#loading {\n  display: none;\n}\n\n:host([loading]) #loading {\n  display: inline-block;\n}\n</style>\n\n<div id=\"snippet\"><slot></slot></div>\n\n<playground-ide part=\"playground-ide\" exportparts=\"lhs,rhs\"></playground-ide>\n\n<button part=\"button\">\n  <span id=\"edit\">\u25B6\uFE0F Edit Live</span>\n\n  <slot name=\"loader\">\n    <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->\n    <svg id=\"loading\" width=\"90\" height=\"20\" viewBox=\"0 0 120 30\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"var(--primary-text-color)\">\n        <circle cx=\"15\" cy=\"15\" r=\"15\">\n            <animate attributeName=\"r\" from=\"15\" to=\"15\"\n                     begin=\"0s\" dur=\"0.8s\"\n                     values=\"15;9;15\" calcMode=\"linear\"\n                     repeatCount=\"indefinite\" />\n            <animate attributeName=\"fill-opacity\" from=\"1\" to=\"1\"\n                     begin=\"0s\" dur=\"0.8s\"\n                     values=\"1;.5;1\" calcMode=\"linear\"\n                     repeatCount=\"indefinite\" />\n        </circle>\n        <circle cx=\"60\" cy=\"15\" r=\"9\" fill-opacity=\"0.3\">\n            <animate attributeName=\"r\" from=\"9\" to=\"9\"\n                     begin=\"0s\" dur=\"0.8s\"\n                     values=\"9;15;9\" calcMode=\"linear\"\n                     repeatCount=\"indefinite\" />\n            <animate attributeName=\"fill-opacity\" from=\"0.5\" to=\"0.5\"\n                     begin=\"0s\" dur=\"0.8s\"\n                     values=\".5;1;.5\" calcMode=\"linear\"\n                     repeatCount=\"indefinite\" />\n        </circle>\n        <circle cx=\"105\" cy=\"15\" r=\"15\">\n            <animate attributeName=\"r\" from=\"15\" to=\"15\"\n                     begin=\"0s\" dur=\"0.8s\"\n                     values=\"15;9;15\" calcMode=\"linear\"\n                     repeatCount=\"indefinite\" />\n            <animate attributeName=\"fill-opacity\" from=\"1\" to=\"1\"\n                     begin=\"0s\" dur=\"0.8s\"\n                     values=\"1;.5;1\" calcMode=\"linear\"\n                     repeatCount=\"indefinite\" />\n        </circle>\n    </svg>\n  </slot>\n</button>\n`;\n\n/**\n * @csspart button\n * @csspart playground-ide\n *\n * @slot loader\n *\n * @cssprop [--playground-code-font-family=monospace]\n * @cssprop [--playground-code-font-size=14px]\n * @cssprop [--playground-border=none]\n * @cssprop [--playground-ide-width=100%]\n * @cssprop [--playground-ide-height=100%]\n *\n * @cssprop [--playground-snippet-border-radius=6px]\n * @cssprop [--playground-snippet-border-color=transparent]\n * @cssprop [--playground-snippet-button-background]\n * @cssprop [--playground-snippet-outer-background-color=white]\n * @cssprop [--playground-snippet-button-focus-color=var(--code-button-focus-color)]\n * @cssprop [--playground-snippet-button-focus-background=var(--code-button-focus-background)]\n *\n * @cssprop --code-button-active-color - button background when focused\n * @cssprop [--code-button-background=var(--markdown-table-row-odd-background-color)] - button background\n * @cssprop [--code-button-color=inherit] - button text color\n * @cssprop [--code-button-focus-background=var(--primary-lines-color)] - button background when focused\n * @cssprop [--code-button-focus-color=inherit] - button text color when focused\n * @cssprop [--code-border-radius=6px] - border radius for code-copy and code-tabs\n */\nexport class DocsPlayground extends HTMLElement {\n  static get is(): 'docs-playground' { return 'docs-playground'; }\n\n  static get observedAttributes(): string[] { return ['show', 'playground-url']; }\n\n  static makePreview(content: string): string {\n    return `<!-- playground-hide -->\n<!doctype html>\n<head>\n  <link rel=\"stylesheet\" href=\"style.css\"/>\n</head>\n<body>\n<!-- playground-hide-end -->\n{{CONTENT}}\n<!-- playground-hide -->\n</body>\n<!-- playground-hide-end -->\n`.replace('{{CONTENT}}', content);\n  }\n\n  $(x: string): HTMLElement | null { return this.shadowRoot.querySelector(x); }\n\n  get playgroundIde(): PlaygroundIde {\n    return this.$('playground-ide') as PlaygroundIde;\n  }\n\n  get button(): HTMLButtonElement {\n    return this.$('button') as HTMLButtonElement;\n  }\n\n  get file(): string {\n    return this.getAttribute('file') ?? 'index.html';\n  }\n\n  playgroundUrl = 'https://unpkg.com/playground-elements@0.15.0-pre.1/playground-ide.js?module';\n\n  attributeChangedCallback(name: string, _: string, next: string): void {\n    switch (name) {\n      case 'playground-url':\n        if (this.playgroundUrl !== next)\n          this.playgroundUrl = next;\n    }\n  }\n\n  constructor() {\n    super();\n    this.show = this.show.bind(this);\n    this.attachShadow({ mode: 'open' }).append(template.content.cloneNode(true));\n    const url = this.getAttribute('playground-base-url');\n    const baseUrl =\n        url ? new URL(url, location.origin).toString()\n      : `${location.origin}/_merged_assets/_static/playground-elements/`;\n    if (url)\n      this.playgroundIde.setAttribute('playground-base-url', url);\n    this.playgroundIde.setAttribute('sandbox-base-url', baseUrl);\n    this.button.addEventListener('click', this.show);\n  }\n\n  connectedCallback(): void {\n    window.requestIdleCallback?.(() => this.importPlayground());\n    const files = Object.fromEntries(Array.from(document.querySelectorAll<HTMLTemplateElement>(\n      `[data-playground-id=\"${this.id}\"]`\n    ), e => [e.dataset.filename, {\n      content: e.content.textContent.trim(),\n      hidden: 'hidden' in e.dataset,\n      ...'lang' in e.dataset && {\n        contentType:\n            !e.dataset.lang.match(/^(j(ava)?|t(ype)?)s(cript)?$/) ? undefined\n          : 'application/javascript',\n      },\n    }]));\n    const importMapTemplate = document.querySelector<HTMLTemplateElement>(\n      `[data-import-map=\"${this.id}\"]`\n    );\n    const config: ProjectManifest = { files };\n    if (importMapTemplate)\n      config.importMap = JSON.parse(importMapTemplate.content.textContent);\n\n    config.importMap = {\n      imports: {\n        ...playgroundImportMap,\n        ...config.importMap?.imports,\n      },\n    };\n\n    this.init(config);\n    if (location.hash === `#${this.id}`)\n      this.show();\n  }\n\n  static async fetchScript(url: string): Promise<string> {\n    return fetch(new URL(url, location.origin).toString()).then(x => x.text());\n  }\n\n  init(config: ProjectManifest): void {\n    const content = this.textContent.trim();\n    const files = Object.fromEntries(Object.entries({\n      [this.file]: { content: content },\n      'style.css': {\n        hidden: !config?.files?.['style.css'],\n        content: `\n          html {\n            font-family: 'Open Sans', sans-serif;\n          }\n        `,\n      },\n      ...config.files,\n    }).map(([k, v]) => [k, k !== 'index.html' ? v : ({\n      ...v,\n      content: DocsPlayground.makePreview(v.content),\n    })]));\n    this.playgroundIde.config = { ...config, files };\n  }\n\n  async importPlayground(): Promise<void> {\n    await import(this.playgroundUrl);\n  }\n\n  async show(): Promise<void> {\n    this.setAttribute('loading', '');\n    this.button.disabled = true;\n    await this.importPlayground();\n    this.setAttribute('show', '');\n    this.button.disabled = false;\n  }\n\n  load(): void {\n    const { title = 'Snippet' } = this.dataset;\n    this.playgroundIde.title = title;\n  }\n}\n\ncustomElements.define(DocsPlayground.is, DocsPlayground);\n\ntype RequestIdleCallbackHandle = any;\ntype RequestIdleCallbackOptions = {\n  timeout: number;\n};\ntype RequestIdleCallbackDeadline = {\n  readonly didTimeout: boolean;\n  timeRemaining: (() => number);\n};\n\ndeclare global {\n  interface Window {\n    requestIdleCallback: ((\n      callback: ((deadline: RequestIdleCallbackDeadline) => void),\n      opts?: RequestIdleCallbackOptions,\n    ) => RequestIdleCallbackHandle);\n    cancelIdleCallback: ((handle: RequestIdleCallbackHandle) => void);\n  }\n}\n"],
  "mappings": "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",
  "names": []
}