{
  "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('{\"haunted\":\"https://cdn.pika.dev/haunted\",\"haunted/core\":\"https://cdn.pika.dev/haunted\",\"lighterhtml\":\"https://unpkg.com/lighterhtml?module\"}'.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, white);\n  border-right-color: var(--playground-snippet-outer-background-color, white);\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\"></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 = '/_merged_assets/_static/playground-elements/playground.js';\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('sandbox-base-url');\n    if (url)\n      this.playgroundIde.setAttribute('sandbox-base-url', new URL(url, location.origin).toString());\n    else\n      this.playgroundIde.setAttribute('sandbox-base-url', `${location.origin}/_merged_assets/_static/playground-elements/`);\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": []
}