@mdn/fred 0.0.1

package/dist/client/5531.3f07c9b4290520c7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"5531.3f07c9b4290520c7.js","sources":["webpack://@mdn/fred/./components/observatory/assets/stars.svg","webpack://@mdn/fred/./components/observatory/assets/tooltip-arrow.svg","webpack://@mdn/fred/./components/observatory-results/csp.js","webpack://@mdn/fred/./components/observatory-results/element.js","webpack://@mdn/fred/./components/observatory-results/rating.js","webpack://@mdn/fred/./components/observatory-results/tooltip.js","webpack://@mdn/fred/./components/observatory-results/trend.js","webpack://@mdn/fred/./components/observatory-results/tabs.js","webpack://@mdn/fred/./components/observatory-results/scoring.js","webpack://@mdn/fred/./components/observatory-results/cookies.js","webpack://@mdn/fred/./components/observatory-results/raw-headers.js","webpack://@mdn/fred/./components/observatory-results/history.js","webpack://@mdn/fred/./components/observatory-results/comparison.js","webpack://@mdn/fred/./components/observatory-results/element.css"],"sourcesContent":["import { svg } from \"lit\"; export default svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" fill=\"none\" viewBox=\"0 0 22 22\"><path fill=\"#DFD172\" d=\"m18 0-1.26 2.75L14 4l2.74 1.26L18 8l1.25-2.74L22 4l-2.75-1.25M8 3 5.5 8.5 0 11l5.5 2.5L8 19l2.5-5.5L16 11l-5.5-2.5M18 14l-1.26 2.74L14 18l2.74 1.25L18 22l1.25-2.75L22 18l-2.75-1.26\"/></svg>`;","import { svg } from \"lit\"; export default svg`<svg width=\"22\" height=\"22\" class=\"arrow\" viewBox=\"0 0 22 22\"><path d=\"M12.124 1.733a1 1 0 0 1 1.673 0l8.811 13.423a1 1 0 0 1-.835 1.548l-17.614.007a1 1 0 0 1-.837-1.548Z\"/></svg>`;","import { html } from \"lit\";\n\nimport { PassIcon } from \"../observatory/utils.js\";\n\n/** @type {(keyof import(\"@observatory\").CSPPolicy)[]} */\nconst policyTests = [\n  \"unsafeInline\",\n  \"unsafeEval\",\n  \"unsafeObjects\",\n  \"unsafeInlineStyle\",\n  \"insecureSchemeActive\",\n  \"insecureSchemePassive\",\n  \"antiClickjacking\",\n  \"defaultNone\",\n  \"insecureBaseUri\",\n  \"insecureFormAction\",\n  \"strictDynamic\",\n];\n\n// Policies where pass means bad\nconst negatedPolicies = new Set([\n  \"insecureBaseUri\",\n  \"insecureFormAction\",\n  \"insecureSchemeActive\",\n  \"insecureSchemePassive\",\n  \"unsafeEval\",\n  \"unsafeInline\",\n  \"unsafeInlineStyle\",\n  \"unsafeObjects\",\n]);\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result}} props\n * @returns { import(\"@lit\").TemplateResult }\n */\nexport function CSP({ result }) {\n  const policy = result.tests[\"content-security-policy\"]?.policy;\n  const pass = result.tests[\"content-security-policy\"]?.pass || false;\n\n  if (!policy) {\n    if (\n      result.tests[\"content-security-policy\"]?.result ===\n      \"csp-not-implemented-but-reporting-enabled\"\n    ) {\n      return html`\n        <table class=\"csp\">\n          <tbody>\n            <tr>\n              <td>\n                <p>\n                  <code>Content-Security-Policy-Report-Only</code> header\n                  detected. Implement an enforced policy; see\n                  <a href=\"/en-US/docs/Web/HTTP/CSP\" target=\"_blank\">\n                    MDN's Content Security Policy (CSP) documentation </a\n                  >.\n                </p>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      `;\n    }\n\n    return html`\n      <table class=\"csp\">\n        <tbody>\n          <tr>\n            <td>\n              <p>No CSP headers detected</p>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    `;\n  }\n\n  const rows = policyTests.map((pt) => {\n    if (!policy[pt]) return null;\n    /** @type {import(\"@observatory\").PolicyItem} */\n    const p = policy[pt];\n\n    return html`\n      <tr>\n        <td data-header=\"Test\" .innerHTML=${p.description}></td>\n        <td data-header=\"Pass\">\n          ${PassIcon({\n            pass: negatedPolicies.has(pt) ? !p.pass : p.pass,\n          })}\n        </td>\n        <td data-header=\"Info\" .innerHTML=${p.info}></td>\n      </tr>\n    `;\n  });\n\n  return html`\n    <div class=\"detail-header\">\n      <p class=\"arrow\">${PassIcon({ pass })}</p>\n      <div\n        class=\"detail-header-content\"\n        .innerHTML=${result.tests[\"content-security-policy\"]\n          ?.score_description ?? `<p class=\"obs-none\">None</p>`}\n      ></div>\n    </div>\n\n    <table class=\"csp\">\n      <thead>\n        <tr>\n          <th>Test</th>\n          <th>Result</th>\n          <th>Info</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n  `;\n}\n","import { Task } from \"@lit/task\";\nimport { LitElement, html } from \"lit\";\nimport { nothing } from \"lit\";\n\nimport { OBSERVATORY_API_URL } from \"../observatory/constants.js\";\n\nimport styles from \"./element.css?lit\";\nimport { Rating } from \"./rating.js\";\nimport { Tabs } from \"./tabs.js\";\n\nimport \"../../components/progress-bar/element.js\";\nimport \"../../components/observatory-comparison-table/element.js\";\nimport \"../../components/observatory-human-duration/element.js\";\n\nexport class MDNObservatoryResults extends LitElement {\n  static styles = styles;\n\n  constructor() {\n    super();\n    /** @type { string | null } */\n    this.host = null;\n    /** @type { number } */\n    this.selectedTab = 0;\n    /** @type { boolean } */\n    this._usePostInApi = false;\n  }\n\n  /**\n   * @type { import(\"@lit\").PropertyDeclarations }\n   */\n  static properties = {\n    host: { type: String },\n    selectedTab: { state: true, type: Number },\n    _usePostInApi: { state: true, type: Boolean },\n  };\n\n  _apiTask = new Task(this, {\n    args: () => [this.host],\n    task: async ([host], { signal }) => {\n      if (!host) {\n        throw new Error(\"No host provided\");\n      }\n      try {\n        const res = await fetch(\n          `${OBSERVATORY_API_URL}/api/v2/analyze?host=${encodeURIComponent(\n            host,\n          )}`,\n          { signal, method: this._usePostInApi ? \"POST\" : \"GET\" },\n        );\n        if (!res.ok) {\n          let message = `${res.status}: ${res.statusText}`;\n          try {\n            const data = await res.json();\n            if (data.error) {\n              message = data.message;\n            }\n          } catch {\n            // Ignore.\n          }\n          throw new Error(message);\n        }\n        return await res.json();\n      } catch (error) {\n        throw new Error(\"Observatory API request for scan data failed\", {\n          cause: error,\n        });\n      }\n    },\n  });\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._updateSelectedTab = this._updateSelectedTab.bind(this);\n    this.selectedTab = this._getSelectedTab();\n    globalThis.addEventListener(\"hashchange\", this._updateSelectedTab);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    globalThis.removeEventListener(\"hashchange\", this._updateSelectedTab);\n  }\n\n  firstUpdated() {\n    const params = new URLSearchParams(globalThis.location.search);\n    this.host = params.get(\"host\");\n  }\n\n  _updateSelectedTab() {\n    this.selectedTab = this._getSelectedTab();\n  }\n\n  /**\n   * @returns {number}\n   */\n  _getSelectedTab() {\n    const hash = globalThis.location.hash.replace(\"#\", \"\");\n    const tabs = [\n      \"scoring\",\n      \"csp\",\n      \"cookies\",\n      \"headers\",\n      \"history\",\n      \"benchmark\",\n    ];\n    const index = tabs.indexOf(hash);\n    return index === -1 ? 0 : index;\n  }\n\n  /**\n   *\n   * @param {Event} e\n   */\n  async _rescan(e) {\n    e.preventDefault();\n    if (!this.host) {\n      return;\n    }\n    this._usePostInApi = true;\n    this._apiTask.run();\n  }\n\n  /**\n   *\n   * @param {number} index\n   * @param {string} key\n   */\n  _handleTabSelect(index, key) {\n    this.selectedTab = index;\n    globalThis.history.replaceState(\n      \"\",\n      \"\",\n      globalThis.location.pathname + globalThis.location.search + \"#\" + key,\n    );\n  }\n\n  render() {\n    if (!this.host) {\n      return nothing;\n    }\n    return this._apiTask.render({\n      pending: () =>\n        html` <label class=\"visually-hidden\" for=\"progress-bar\">\n            Rescanning ${this.host} </label\n          ><mdn-progress-bar id=\"progress-bar\"></mdn-progress-bar>`,\n\n      complete: (data) => html`\n        <section class=\"summary\">\n          ${Rating({\n            result: data,\n            host: this.host || \"\",\n            rescan: this._rescan,\n          })}\n        </section>\n        <section class=\"results\">\n          ${Tabs({\n            result: data,\n            selectedTab: this.selectedTab,\n            onTabSelect: (index, key) => this._handleTabSelect(index, key),\n          })}\n        </section>\n      </div>`,\n\n      error: (e) => html`<div class=\"error\">${e}</div>`,\n    });\n  }\n}\n\ncustomElements.define(\"mdn-observatory-results\", MDNObservatoryResults);\n","import { html } from \"lit\";\n\nimport { formatMinus, hostAsRedirectChain } from \"../observatory/utils.js\";\n\nimport { Tooltip } from \"./tooltip.js\";\nimport { Trend } from \"./trend.js\";\n\nimport \"../observatory-rescan-button/element.js\";\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result, host: string, rescan: Function}} props\n * @returns {import(\"@lit\").TemplateResult}\n */\nexport function Rating({ result, host, rescan }) {\n  return html`\n    <h2 class=\"summary\">\n      Scan summary:\n      <span class=\"host\">${hostAsRedirectChain(host, result)}</span>\n    </h2>\n    <section class=\"scan-result\">\n      <section class=\"grade-trend\">\n        <div class=\"overall\">\n          <button\n            popovertarget=\"grade-popover\"\n            aria-label=\"show info tooltip\"\n            class=\"info-tooltip\"\n            tabindex=\"0\"\n          >\n            <div\n              class=${`grade grade-${result.scan.grade?.[0]?.toLowerCase()}`}\n            >\n              ${formatMinus(result.scan.grade)}\n            </div>\n            ${Tooltip(result)}\n          </button>\n        </div>\n        ${Trend({ result })}\n      </section>\n      <section class=\"data\">\n        <div>\n          <a href=\"/en-US/observatory/docs/tests_and_scoring\" target=\"_blank\">\n            <span class=\"label\">Score</span></a\n          >: ${result.scan.score}&thinsp;/&thinsp;100\n        </div>\n        <div>\n          <a href=\"#history\"> <span class=\"label\">Scan Time</span></a\n          >:\n          <mdn-observatory-human-duration\n            .date=${new Date(result.scan.scanned_at)}\n          ></mdn-observatory-human-duration>\n        </div>\n        <a href=\"/en-US/observatory/docs/tests_and_scoring\" target=\"_blank\">\n          <span class=\"label\">Tests Passed</span></a\n        >: ${result.scan.tests_passed}&thinsp;/&thinsp;\n        ${result.scan.tests_quantity}\n      </section>\n      <section class=\"actions\">\n        <mdn-observatory-rescan-button\n          .from=${new Date(result.scan.scanned_at)}\n          .duration=${60}\n          @click=${rescan}\n        ></mdn-observatory-rescan-button>\n        <div class=\"scan-another\">\n          <a href=\"/en-US/observatory\"> Scan another website </a>\n        </div>\n      </section>\n    </section>\n  `;\n}\n","import { html } from \"lit\";\n\nimport starsSvg from \"../observatory/assets/stars.svg?lit\";\nimport arrowSvg from \"../observatory/assets/tooltip-arrow.svg?lit\";\nimport { SCORING_TABLE } from \"../observatory/constants.js\";\nimport { formatMinus } from \"../observatory/utils.js\";\n\n/**\n */\n\n/**\n *\n * @param {import(\"@observatory\").Result} result\n */\nexport function Tooltip(result) {\n  const rows = SCORING_TABLE.map((st) => {\n    return html`\n      <tr class=${result.scan.grade === st.grade ? \"current\" : \"\"}>\n        <td>${formatMinus(st.grade)}</td>\n        <td>\n          ${st.scoreText}\n          ${result.scan.grade === st.grade && st.stars ? starsSvg : \"\"}\n        </td>\n      </tr>\n    `;\n  });\n\n  return html`\n    <span\n      popover\n      id=\"grade-popover\"\n      aria-describedby=\"grade-table\"\n      class=\"tooltip-popup\"\n    >\n      ${arrowSvg}\n      <table class=\"grade-tooltip\" id=\"grades-table\" role=\"tooltip\">\n        <thead>\n          <tr>\n            <th>Grade</th>\n            <th>Score</th>\n          </tr>\n        </thead>\n        <tbody>\n          ${rows}\n        </tbody>\n      </table>\n    </span>\n  `;\n}\n","import { html, nothing } from \"lit\";\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result}} props\n * @returns {import(\"@lit\").TemplateResult | nothing}\n */\nexport function Trend({ result }) {\n  switch (arrowState(result)) {\n    case \"up\": {\n      return html`\n        <div class=\"trend\">\n          <span class=\"arrow-up\" aria-hidden=\"true\"> ↗︎ </span>\n          since last scan\n        </div>\n      `;\n    }\n    case \"down\": {\n      return html`\n        <div class=\"trend\">\n          <span class=\"arrow-down\" aria-hidden=\"true\"> ↘︎ </span>\n          since last scan\n        </div>\n      `;\n    }\n    default: {\n      return nothing;\n    }\n  }\n}\n\n/**\n *\n * @param {import(\"@observatory\").Result} result\n * @returns {\"up\" | \"down\" | \"none\"}\n */\nfunction arrowState(result) {\n  const [oldScore, oldGrade] =\n    result.history.length > 0\n      ? [result.history.at(-2)?.score, result.history.at(-2)?.grade]\n      : [undefined, undefined];\n  const newScore = result.scan.score;\n  const newGrade = result.scan.grade;\n  if (\n    typeof newScore === \"number\" &&\n    typeof oldScore === \"number\" &&\n    newGrade !== oldGrade &&\n    newScore !== oldScore\n  ) {\n    return oldScore < newScore ? \"up\" : \"down\";\n  } else {\n    return \"none\";\n  }\n}\n","import { html } from \"lit\";\n\nimport { Comparison } from \"./comparison.js\";\nimport { Cookies } from \"./cookies.js\";\nimport { CSP } from \"./csp.js\";\nimport { History } from \"./history.js\";\nimport { RawHeaders } from \"./raw-headers.js\";\nimport { Scoring } from \"./scoring.js\";\n\n/**\n * @param {{\n *   result: import(\"@observatory\").Result,\n *   selectedTab: number,\n *   onTabSelect: (index: number, key: string) => void\n * }} props\n * @returns {import(\"@lit\").TemplateResult}\n */\nexport function Tabs({ result, selectedTab = 0, onTabSelect }) {\n  const tabs = [\n    {\n      label: \"Scoring\",\n      key: \"scoring\",\n      element: html`${Scoring({ result })}`,\n    },\n    {\n      label: \"CSP analysis\",\n      key: \"csp\",\n      element: html`${CSP({ result })}`,\n    },\n    {\n      label: \"Cookies\",\n      key: \"cookies\",\n      element: html`${Cookies({ result })}`,\n    },\n    {\n      label: \"Raw server headers\",\n      key: \"headers\",\n      element: html`${RawHeaders({ result })}`,\n    },\n    {\n      label: \"Scan history\",\n      key: \"history\",\n      element: html`${History({ result })}`,\n    },\n    {\n      label: \"Benchmark comparison\",\n      key: \"benchmark\",\n      element: html`${Comparison({ result })}`,\n    },\n  ];\n\n  const tabElements = tabs.map((tab, i) => {\n    const onChange = () => onTabSelect(i, tab.key);\n    return html`\n      <li id=\"tabs-${i}\" class=\"tabs-list-item\">\n        <input\n          class=\"visually-hidden\"\n          id=\"tab-${i}\"\n          name=\"selected\"\n          type=\"radio\"\n          role=\"tab\"\n          .checked=${i === selectedTab}\n          aria-controls=\"tab-container-${i}\"\n          @change=${onChange}\n        />\n        <label for=\"tab-${i}\" id=\"tab-label-${i}\">${tab.label}</label>\n        <section\n          class=\"tab-content\"\n          role=\"tabpanel\"\n          aria-labelledby=\"tab-label-${i}\"\n          id=\"tab-container-${i}\"\n        >\n          <div class=\"scroll-container\">${tab.element}</div>\n        </section>\n      </li>\n    `;\n  });\n\n  return html`\n    <section class=\"scan-results\">\n      <h2 class=\"result\" id=\"scan-results-header\">Scan results</h2>\n      <ol\n        class=\"tabs-list\"\n        role=\"tablist\"\n        aria-labelledby=\"scan-results-header\"\n      >\n        ${tabElements}\n      </ol>\n    </section>\n  `;\n}\n","import { html } from \"lit\";\n\nimport { TEST_NAMES_IN_ORDER } from \"../observatory/constants.js\";\nimport { PassIcon, formatMinus } from \"../observatory/utils.js\";\n\n/**\n * @param {{overallScore: number, scoreModifier: number}} props\n * @returns {import(\"@lit\").TemplateResult}\n */\nfunction ScoreModifier({ overallScore, scoreModifier }) {\n  const bonusEligible = overallScore >= 90;\n  const formattedScoreModifier = formatMinus(\n    `${scoreModifier > 0 ? `+${scoreModifier}` : scoreModifier}`,\n  );\n\n  return html`\n    <span class=${!bonusEligible && scoreModifier > 0 ? \"not-counted\" : \"\"}>\n      ${!bonusEligible && scoreModifier > 0\n        ? html`0<sup><a href=\"#bonus-points-explanation\">*</a></sup>`\n        : formattedScoreModifier}\n    </span>\n  `;\n}\n\n/**\n *\n * @param {{ result: import(\"@observatory\").Result}} result\n * @returns {import(\"@lit\").TemplateResult}\n */\nexport function Scoring({ result }) {\n  const showFootnote =\n    (result.scan.score || 0) <= 90 &&\n    Object.entries(result.tests).find(([_n, t]) => t.score_modifier > 0);\n\n  // empty case, should not happen\n  if (Object.keys(result.tests).length === 0) {\n    return html`No tests found.`;\n  }\n\n  const rows = TEST_NAMES_IN_ORDER.map((name) => {\n    const test = result.tests[name];\n    if (!test) return null;\n\n    return html`\n      <tr>\n        <td data-header=\"Test\">\n          <a\n            href=${test.link}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            class=${test.link.startsWith(\"/\") ? \"\" : \"external\"}\n          >\n            ${test.title}\n          </a>\n        </td>\n        ${test.pass === null\n          ? html`<td data-header=\"Score\">-</td>`\n          : html` <td class=\"score\" data-header=\"Score\">\n              <span>\n                <span class=\"obs-score-value\">\n                  ${ScoreModifier({\n                    overallScore: result.scan.score || 0,\n                    scoreModifier: test.score_modifier,\n                  })}\n                </span>\n                ${PassIcon({ pass: test.pass })}\n              </span>\n            </td>`}\n        <td data-header=\"Reason\" .innerHTML=${test.score_description}></td>\n        <td\n          data-header=\"Advice\"\n          .innerHTML=${test.recommendation || `<p class=\"obs-none\">None</p>`}\n        ></td>\n      </tr>\n    `;\n  });\n\n  return html`\n    <table class=\"tests\">\n      <thead>\n        <tr>\n          <th>Test</th>\n          <th>Score</th>\n          <th>Reason</th>\n          <th>Recommendation</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n    ${showFootnote\n      ? html` <section class=\"footnote\" id=\"bonus-points-explanation\">\n          <sup>*</sup> Normally awards bonus points, however, in this case they\n          are not included in the overall score (\n          <a href=\"/en-US/observatory/docs/tests_and_scoring\" target=\"_blank\">\n            find out why\n          </a>\n          ).\n        </section>`\n      : null}\n  `;\n}\n","import { html } from \"lit\";\n\nimport {\n  CookiePrefix,\n  PassIcon,\n  Timestamp,\n  upperCaseHeaderName,\n} from \"../observatory/utils.js\";\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result}} props\n * @returns { import(\"@lit\").TemplateResult }\n */\nexport function Cookies({ result }) {\n  const cookies = result.tests[\"cookies\"]?.data;\n  const pass = result.tests[\"cookies\"]?.pass;\n\n  if (!cookies || Object.keys(cookies).length === 0) {\n    return html`\n      <table class=\"cookies\">\n        <tbody>\n          <tr>\n            <td>No cookies detected</td>\n          </tr>\n        </tbody>\n      </table>\n    `;\n  }\n\n  const rows = Object.entries(cookies).map(\n    ([key, value]) => html`\n      <tr>\n        <td data-header=\"Name\" class=\"cookie-name\">${key}</td>\n        <td data-header=\"Expires\">\n          ${value.expires ? Timestamp({ expires: value.expires }) : \"Session\"}\n        </td>\n        <td data-header=\"Path\">\n          <code>${value.path}</code>\n        </td>\n        <td data-header=\"Secure\">${PassIcon({ pass: value.secure })}</td>\n        <td data-header=\"HttpOnly\">${PassIcon({ pass: value.httponly })}</td>\n        <td data-header=\"SameSite\">\n          ${value.samesite\n            ? html`<code>${upperCaseHeaderName(value.samesite)}</code>`\n            : \"-\"}\n        </td>\n        <td data-header=\"Prefixed\">${CookiePrefix({ cookieName: key })}</td>\n      </tr>\n    `,\n  );\n\n  return html`\n    <div class=\"detail-header\">\n      <p class=\"arrow\">\n        ${PassIcon({ pass: pass === undefined ? null : pass })}\n      </p>\n      <div\n        class=\"detail-header-content\"\n        .innerHTML=${result.tests[\"cookies\"]?.score_description ??\n        `<p class=\"obs-none\">None</p>`}\n      ></div>\n    </div>\n    <table class=\"cookies\">\n      <thead>\n        <tr>\n          <th>Name</th>\n          <th>\n            <a\n              target=\"_blank\"\n              href=\"/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#expires\"\n              >Expires</a\n            >\n          </th>\n          <th>\n            <a\n              target=\"_blank\"\n              href=\"/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#path\"\n              >Path</a\n            >\n          </th>\n          <th>\n            <a\n              target=\"_blank\"\n              href=\"/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#secure\"\n              >Secure</a\n            >\n          </th>\n          <th>\n            <a\n              target=\"_blank\"\n              href=\"/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#httponly\"\n              >HttpOnly</a\n            >\n          </th>\n          <th>\n            <a\n              target=\"_blank\"\n              href=\"/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#samesite\"\n              >SameSite</a\n            >\n          </th>\n          <th>\n            <a\n              target=\"_blank\"\n              href=\"/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#name\"\n              >Prefix</a\n            >\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n  `;\n}\n","import { html } from \"lit\";\n\nimport { headerLink } from \"../observatory/utils.js\";\n\nimport \"../observatory-header-link/element.js\";\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result}} props\n * @returns { import(\"@lit\").TemplateResult }\n */\nexport function RawHeaders({ result }) {\n  if (!result.scan.response_headers) {\n    return html`\n      <table class=\"headers\">\n        <tbody>\n          <tr>\n            <td>No headers detected</td>\n          </tr>\n        </tbody>\n      </table>\n    `;\n  }\n\n  const rows = Object.entries(result.scan.response_headers).map(\n    ([header, value]) => html`\n      <tr>\n        <td data-header=\"Header\">\n          <mdn-observatory-header-link header=${header}>\n            ${headerLink(header)}\n          </mdn-observatory-header-link>\n        </td>\n        <td data-header=\"Value\">${value}</td>\n      </tr>\n    `,\n  );\n\n  return html`\n    <table class=\"headers\">\n      <thead>\n        <tr>\n          <th>Header</th>\n          <th>Value</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n  `;\n}\n","import { html, nothing } from \"lit\";\n\nimport { formatDateTime, formatMinus } from \"../observatory/utils.js\";\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result}} props\n * @returns { import(\"@lit\").TemplateResult | nothing }\n */\nexport function History({ result }) {\n  if (result.history.length === 0) {\n    return nothing;\n  }\n\n  const rows = [...result.history].reverse().map(\n    ({ scanned_at, score, grade }) => html`\n      <tr>\n        <td data-header=\"Date\">${formatDateTime(new Date(scanned_at))}</td>\n        <td data-header=\"Score\">${score}</td>\n        <td data-header=\"Grade\">${formatMinus(grade)}</td>\n      </tr>\n    `,\n  );\n\n  return html`\n    <h2>Changes in score over time</h2>\n    <table class=\"history\">\n      <thead>\n        <tr>\n          <th>Date</th>\n          <th>Score</th>\n          <th>Grade</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n  `;\n}\n","import { html } from \"lit\";\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result}} result\n * @returns { import(\"@lit\").TemplateResult }\n */\nexport function Comparison({ result }) {\n  return html`\n    <h2>Performance trends from the past year</h2>\n    <mdn-observatory-comparison-table\n      .result=${result}\n    ></mdn-observatory-comparison-table>\n    <p>\n      Refer to this graph to assess the website's current status. By following\n      the recommendations provided and rescanning, you can expect an improvement\n      in the website's grade.\n    </p>\n  `;\n}\n","import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../visually-hidden/global.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_1___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../button/server.css\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.scan-result{background-color:var(--color-background-primary);border-radius:var(--border-radius);column-gap:var(--spacing);display:grid;grid-template-areas:\"grade data actions\";grid-template-columns:auto 3fr 1fr;justify-content:space-between;margin-bottom:3rem;max-width:var(--max-width);padding:var(--spacing)}@media (max-width:1200px){.scan-result{align-items:flex-start;grid-template-areas:\"grade data actions\";grid-template-columns:auto 1fr auto;justify-content:space-between;row-gap:calc(var(--spacing)/2)}}@media (max-width:992px){.scan-result{grid-template-areas:\"grade data   \" \".     actions\";grid-template-columns:min-content 1fr}}:host{line-height:var(--font-line-content)}.trend{margin-top:1rem}.arrow-down{color:var(--observatory-arrow-down-color)}.arrow-up{color:var(--observatory-arrow-up-color)}h2{font-size:1.375rem;font-weight:600;margin-bottom:1rem;margin-top:1.5rem}h2:before{background-color:var(--color-text-primary);content:\"\";display:inline-block;-webkit-mask-position:left;mask-position:left;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}h2 .host{font-weight:400}h2.summary:before{height:1.4rem;-webkit-mask-image:var(--summary-icon);mask-image:var(--summary-icon);width:2rem}h2.result:before{height:1.2rem;-webkit-mask-image:var(--results-icon);mask-image:var(--results-icon);width:2rem}code{font-weight:600}.grade-trend{grid-area:grade;justify-self:start}.data{grid-area:data}.actions{grid-area:actions}mdn-observatory-rescan-button{min-width:30rem}.info-tooltip{background:none;border:none;cursor:pointer;display:inline-block;position:relative}.scan-another{font-size:var(--font-size-small);font-weight:400;margin-top:1.2rem}.label{font-weight:600}a{color:var(--color-text-primary);-webkit-text-decoration:none;text-decoration:none}a:hover{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:var(--color-text-secondary)}.grade{background:var(--grade-bg);border:1px solid var(--grade-border);border-radius:.2em;color:var(--grade-border);display:inline-block;font-size:1.7rem;font-weight:600;height:5rem;line-height:5rem;text-align:center;width:5rem}.grade-a{--grade-bg:var(--observatory-grade-a-bg);--grade-border:var(--observatory-grade-a-border)}.grade-b{--grade-bg:var(--observatory-grade-b-bg);--grade-border:var(--observatory-grade-b-border)}.grade-c{--grade-bg:var(--observatory-grade-c-bg);--grade-border:var(--observatory-grade-c-border)}.grade-d{--grade-bg:var(--observatory-grade-d-bg);--grade-border:var(--observatory-grade-d-border)}.grade-f{--grade-bg:var(--observatory-grade-f-bg);--grade-border:var(--observatory-grade-f-border)}.tooltip-popup{--tooltip-offset:-6.3rem;--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) #696969;--color-tooltip:var(--csstools-light-dark-toggle--0,#b3b3b3);--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) #1b1b1b;--color-tooltip-highlight:var(--csstools-light-dark-toggle--1,#fff);--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) #fff;--color-bg-tooltip:var(--csstools-light-dark-toggle--2,#1b1b1b);background-color:var(--color-bg-tooltip);border-radius:var(--border-radius);border-width:0;color:var(--color-tooltip);inset:unset;line-height:var(--font-line-content);margin-top:.5rem;max-width:min(100vw,20rem);overflow:visible;padding:1.5rem;position:relative;text-align:center;transform:translateX(var(--tooltip-offset));width:max-content;z-index:1}@supports (color:light-dark(red,red)){.tooltip-popup{--color-tooltip:light-dark(#b3b3b3,#696969);--color-tooltip-highlight:light-dark(#fff,#1b1b1b);--color-bg-tooltip:light-dark(#1b1b1b,#fff)}}@supports not (color:light-dark(tan,tan)){.tooltip-popup *{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) #696969;--color-tooltip:var(--csstools-light-dark-toggle--0,#b3b3b3);--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) #1b1b1b;--color-tooltip-highlight:var(--csstools-light-dark-toggle--1,#fff);--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) #fff;--color-bg-tooltip:var(--csstools-light-dark-toggle--2,#1b1b1b)}}.tooltip-popup .arrow{margin-left:-1rem;margin-top:-2rem;padding:0;position:absolute;fill:var(--color-bg-tooltip)}.tooltip-popup table{border:0;border-collapse:collapse;white-space:nowrap;width:10rem}:is(.tooltip-popup table) tr{color:var(--color-tooltip);font-size:.875rem}.current:is(:is(.tooltip-popup table) tr){color:var(--color-tooltip-highlight)}:is(.tooltip-popup table) td,:is(.tooltip-popup table) th{background-color:unset;border:0;font-weight:var(--font-body);text-align:left;width:50%}:is(.tooltip-popup table) th{font-size:1rem;padding:0 0 .75rem}:is(.tooltip-popup table) td{padding:0}:is(:is(.tooltip-popup table) td) svg{vertical-align:-.3rem}.scroll-container{margin-bottom:1.5rem;margin-top:.8rem;overflow-x:auto;overscroll-behavior-x:none}.detail-header{display:flex;gap:.5rem;padding:0 1.5rem 0 0}.detail-header .arrow{color:var(--color-text-secondary)}.detail-header .detail-header-title{font-weight:600;padding-right:.2rem}.detail-header p{margin:1rem 0}:is(.obs-pass-icon svg.pass) path{fill:var(--observatory-pass-icon-bg)}:is(.obs-pass-icon svg.pass) circle{fill:var(--observatory-pass-icon-color)}:is(.obs-pass-icon svg.fail) path{fill:var(--observatory-fail-icon-bg)}:is(.obs-pass-icon svg.fail) circle{fill:var(--observatory-fail-icon-color)}.footnote{font-size:var(--type-smaller-font-size);margin-top:1rem}.scan-results table{background:var(--observatory-table-bg);border:none;border-collapse:collapse;min-width:calc(992px - 14rem);width:100%}:is(.scan-results table) th{background:var(--observatory-table-header-bg);color:var(--color-text-secondary);font-weight:500;vertical-align:top}:is(:is(.scan-results table) th) tr{background-color:unset}:is(.scan-results table) tr:nth-child(2n){background-color:var(--observatory-table-bg-alternate)}:is(.scan-results table) td{overflow-wrap:anywhere;padding:.5rem 1.5rem;vertical-align:top}.cookie-name:is(:is(.scan-results table) td):first-child{max-width:15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score:is(:is(.scan-results table) td)>span{display:flex;flex-direction:row;justify-content:space-between}:is(.scan-results table) a{color:var(--color-text-primary);-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:var(--color-text-secondary)}:is(:is(.scan-results table) a):active,:is(:is(.scan-results table) a):hover{-webkit-text-decoration:none;text-decoration:none}:is(.scan-results table) span.not-counted{color:var(--color-text-secondary)}:is(:is(.scan-results table) span.not-counted) a{-webkit-text-decoration:none;text-decoration:none}:is(.tests:is(.scan-results table) th,.tests:is(.scan-results table) td):first-of-type{width:25%}.tests:is(.scan-results table) td.score{white-space:nowrap}:is(.csp:is(.scan-results table) th,.csp:is(.scan-results table) td):first-of-type{width:45%}:is(.headers:is(.scan-results table) th,.headers:is(.scan-results table) td):first-of-type{width:30%}:is(.cookies:is(.scan-results table) th,.cookies:is(.scan-results table) td):nth-of-type(n+3){text-align:center}:is(.scan-results table) td,:is(.scan-results table) th{border:none;padding:1.5rem}:is(:is(.scan-results table) th,:is(.scan-results table) td) :first-child{margin-top:0}:is(:is(.scan-results table) th,:is(.scan-results table) td) :last-child{margin-bottom:0}:is(.scan-results table) .icon{height:1.3rem;width:1.3rem}@media (max-width:426px){:is(:is(:is(.scan-results table) td) .iso-date) code{font-size:x-small}}@media (max-width:992px){.scan-results table{min-width:0}:is(.scan-results table) thead{display:none}:is(.scan-results table) tbody{display:block}:is(.scan-results table) tr{display:grid;grid-template-columns:max-content auto}:is(.scan-results table) tr:nth-of-type(odd){background:var(--observatory-table-header-bg)}:is(.scan-results table) td{column-gap:2em;display:grid;grid-auto-flow:column;grid-column:span 2;grid-template-columns:subgrid}:is(:is(.scan-results table) td) .humanized-duration{display:none}:is(.scan-results table) td:before{content:attr(data-header);display:inline;font-weight:600}:is(.tests:is(.scan-results table),.csp:is(.scan-results table),.headers:is(.scan-results table),.cookies:is(.scan-results table)) td:first-of-type{width:auto}:is(.scan-results table) td:not(:last-of-type){padding-bottom:0}:is(.scan-results table) td:nth-of-type(n+2){padding-top:.75rem}.cookies:is(.scan-results table) td:nth-of-type(n+3){text-align:left}:is(.scan-results table) td.score{display:grid}:is(:is(.scan-results table) td.score)>span{display:block}:is(:is(.scan-results table) td.score) .obs-pass-icon{display:inline-block;height:1.5em;vertical-align:top}}ol.tabs-list{column-gap:3rem;display:grid;grid-template-areas:\"tab-0 tab-1 tab-2 tab-3 tab-4 tab-5 .\" \"hr    hr    hr    hr    hr    hr    hr \" \"mod   mod   mod   mod   mod   mod   mod\";grid-template-columns:repeat(6,max-content) 1fr;margin:0;overflow-x:auto;overscroll-behavior-x:none;padding:0}@media (max-width:992px){ol.tabs-list{column-gap:1.75rem;grid-template-columns:repeat(6,max-content) auto}}ol.tabs-list:before{border:none;border-top:1px solid var(--color-border-primary);content:\"\";grid-area:hr;margin:0;width:100%}ol.tabs-list input[type=radio]:not(:checked)~.tab-content{display:none}ol.tabs-list li.tabs-list-item{display:contents}:is(ol.tabs-list li.tabs-list-item)>input:checked+label{border-bottom:2px solid var(--observatory-accent);color:var(--color-text-primary)}:is(ol.tabs-list li.tabs-list-item)>input:not(:checked)+label:hover{border-bottom:2px solid var(--observatory-accent-light);color:var(--color-text-primary)}:is(ol.tabs-list li.tabs-list-item)>input:checked:focus-visible+label{outline-color:var(--accent-primary);outline-offset:1px;outline-style:auto}:is(ol.tabs-list li.tabs-list-item)>input:not(:checked)+label{color:var(--color-text-secondary);opacity:.775}:is(ol.tabs-list li.tabs-list-item)>label{cursor:pointer;height:2.2rem;width:max-content}#tabs-0:is(ol.tabs-list li.tabs-list-item)>input,#tabs-0:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-0}#tabs-1:is(ol.tabs-list li.tabs-list-item)>input,#tabs-1:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-1}#tabs-2:is(ol.tabs-list li.tabs-list-item)>input,#tabs-2:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-2}#tabs-3:is(ol.tabs-list li.tabs-list-item)>input,#tabs-3:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-3}#tabs-4:is(ol.tabs-list li.tabs-list-item)>input,#tabs-4:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-4}#tabs-5:is(ol.tabs-list li.tabs-list-item)>input,#tabs-5:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-5}:is(ol.tabs-list li.tabs-list-item)>section.tab-content{grid-area:mod;left:0;margin:0;position:sticky}@media (max-width:992px){:is(ol.tabs-list li.tabs-list-item)>section.tab-content{width:calc(100vw - 15rem)}}@media (max-width:769px){:is(ol.tabs-list li.tabs-list-item)>section.tab-content{width:calc(100vw - 2rem)}}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["Set","MDNObservatoryResults","String","Number","Boolean","Error","fetch","encodeURIComponent","globalThis","URLSearchParams","Date","Object","t","customElements"],"mappings":"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"}

package/dist/client/5564.8962dc781ac6917d.js

@@ -0,0 +1,63 @@
+export const __webpack_ids__=["5564"];export const __webpack_modules__={51462:function(t,e,o){o.r(e),o.d(e,{MDNCollectionSaveButton:()=>MDNCollectionSaveButton});var i=o(35470),s=o(14703),l=o(69535);let n=(0,s.YP)`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z"/><path d="m9 10 2 2 4-4"/></svg>`,a=(0,s.YP)`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>`;var c=o(13117),r=o(1045);o(86499),o(50272);let MDNCollectionSaveButton=class MDNCollectionSaveButton extends(0,l.q)(s.oi){static ssr=!1;static styles=r.Z;static properties={docUrl:{type:String,attribute:"doc-url"},docTitle:{type:String,attribute:"doc-title"},_item:{state:!0},_pending:{state:!0},_lastAction:{state:!0}};constructor(){super(),this.docUrl="",this.docTitle="",this._item=void 0,this._pending=!1,this._lastAction=void 0}_user=new i.iQ(this,{task:async()=>{let t=await (0,c.s)();return t.isAuthenticated&&this._bookmarks.run(),t}});_collections=new i.iQ(this,{task:async()=>{let t=await fetch("/api/v2/collections/");if(!t.ok)throw Error(`${t.status}: ${t.statusText}`);return await t.json()}});_bookmarks=new i.iQ(this,{autoRun:!1,args:()=>[this.docUrl],task:async([t])=>{let e=await fetch(`/api/v2/collections/lookup/?url=${encodeURIComponent(t)}`);if(!e.ok)throw Error(`${e.status}: ${e.statusText}`);let o=await e.json(),i=o?.results,s=i&&i.map(t=>({...t.item,collection_id:t.collection_id}));if(s[0]){let{collection_id:t,title:e,notes:o}=s[0];this._item={collection_id:t,title:e,notes:o}}return s}});_open(){this._bookmarks.run(),this._collections.run(),this.shadowRoot?.querySelector("mdn-modal")?.showModal()}_selectChange({target:t}){if(t instanceof HTMLSelectElement){let{value:e}=t;if("add"===e)this.shadowRoot?.querySelector("mdn-modal")?.close(),open("/en-US/plus/collections");else{let t=this._bookmarks.value?.find(t=>t.collection_id===e);this._item=t||{collection_id:e}}}}_cancel(){this.shadowRoot?.querySelector("mdn-modal")?.close()}async _delete(){let t=this.shadowRoot?.querySelector("select")?.value,e=this._bookmarks.value?.find(e=>e.collection_id===t);if(t&&e){this._pending=!0,this._lastAction="delete";let o=await fetch(`/api/v2/collections/${t}/items/${e.id}/`,{method:"DELETE"});o.ok||console.error(`${o.status}: ${o.statusText}`),this.shadowRoot?.querySelector("mdn-modal")?.close(),this._pending=!1,this._bookmarks.run()}}async _submit(){let t=this.shadowRoot?.querySelector("select")?.value,e=this._bookmarks.value?.find(e=>e.collection_id===t);if(t){this._pending=!0,this._lastAction="save";let o=`/api/v2/collections/${t}/items/${e?`${e.id}/`:""}`,i=await fetch(o,{body:JSON.stringify({url:this.docUrl,title:this.shadowRoot?.querySelector("input")?.value,notes:this.shadowRoot?.querySelector("textarea")?.value}),method:"POST",headers:{"content-type":"application/json"}});i.ok||console.error(`${i.status}: ${i.statusText}`),this.shadowRoot?.querySelector("mdn-modal")?.close(),this._pending=!1,this._bookmarks.run()}}connectedCallback(){super.connectedCallback(),this._user.run()}willUpdate(t){(t.has("docUrl")||t.has("docTitle"))&&(this._item={url:this.docUrl,title:this.docTitle})}render(){let t=this._bookmarks.value?.some(t=>t.collection_id===this._item?.collection_id)||!1;return this._user.render({complete:e=>e.isAuthenticated?(0,s.dy)`
+              <button
+                class="collection-save-button"
+                title=${this.l10n`Save in Collection`}
+                @click=${this._open}
+              >
+                ${this._bookmarks.value?.length?n:a} <span>${this.l10n`Save`}</span>
+              </button>
+              <mdn-modal modal-title="Add to collection">
+                ${this._bookmarks.render({initial:()=>(0,s.dy)`<progress></progress>`,pending:()=>(0,s.dy)`<progress></progress>`,complete:e=>this._collections.render({initial:()=>(0,s.dy)`<progress></progress>`,pending:()=>(0,s.dy)`<progress></progress>`,complete:o=>(0,s.dy)`
+                        <label>
+                          Collection:
+                          <select
+                            .value=${this._item?.collection_id}
+                            @change=${this._selectChange}
+                          >
+                            ${o.map(t=>(0,s.dy)`
+                                <option
+                                  value=${t.id}
+                                  ?selected=${t.id===this._item?.collection_id}
+                                >
+                                  ${e.some(e=>e.collection_id===t.id)?"★":"☆"}
+                                  ${"Default"===t.name?"Saved Articles":t.name}
+                                </option>
+                              `)}
+                            <option disabled role="separator">
+                              ——————————
+                            </option>
+                            <option value=${"add"}>+ New Collection</option>
+                          </select>
+                        </label>
+                        <label>
+                          Name:
+                          <input .value=${this._item?.title||this.docTitle} />
+                        </label>
+                        <label>
+                          Note:
+                          <textarea
+                            .value=${this._item?.notes||""}
+                          ></textarea>
+                        </label>
+                        <mdn-button @click=${this._submit}>
+                          ${this._pending&&"save"===this._lastAction?"Saving...":"Save"}
+                        </mdn-button>
+                        <mdn-button
+                          @click=${this._cancel}
+                          ?disabled=${this._pending}
+                          variant="secondary"
+                        >
+                          Cancel
+                        </mdn-button>
+                        ${e?.length?(0,s.dy)`<mdn-button
+                              @click=${this._delete}
+                              variant="plain"
+                              id="bookmark-delete"
+                              ?disabled=${this._pending||!t}
+                            >
+                              ${this._pending&&"delete"===this._lastAction?"Deleting...":"Delete"}
+                            </mdn-button>`:s.Ld}
+                      `})})}
+              </mdn-modal>
+            `:s.Ld})}};customElements.define("mdn-collection-save-button",MDNCollectionSaveButton)},1045:function(t,e,o){o.d(e,{Z:()=>c});var i=o(14703),s=o(8081),l=o.n(s),n=o(23645),a=o.n(n)()(l());a.push([t.id,".collection-save-button{align-items:center;background-color:initial;border:none;column-gap:.25rem;display:flex;font:inherit;margin:0;padding:0 .5rem}.collection-save-button:hover{background-color:var(--color-background-secondary)}@media (max-width:769px){.collection-save-button>span{display:none}}label{display:block}",""]);let c=(0,i.iv)([a.toString()])}};
+//# sourceMappingURL=5564.8962dc781ac6917d.js.map

package/dist/client/5564.8962dc781ac6917d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"5564.8962dc781ac6917d.js","sources":["webpack://@mdn/fred/./components/icon/bookmark-check.svg","webpack://@mdn/fred/./components/icon/bookmark.svg","webpack://@mdn/fred/./components/collection-save-button/element.js","webpack://@mdn/fred/./components/collection-save-button/element.css"],"sourcesContent":["import { svg } from \"lit\"; export default svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z\"/><path d=\"m9 10 2 2 4-4\"/></svg>`;","import { svg } from \"lit\"; export default svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"/></svg>`;","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport bookmarkCheckSvg from \"../icon/bookmark-check.svg?lit\";\nimport bookmarkSvg from \"../icon/bookmark.svg?lit\";\nimport { globalUser } from \"../user/context.js\";\n\nimport styles from \"./element.css?lit\";\n\nimport \"../modal/element.js\";\nimport \"../button/element.js\";\n\nconst ADD_VALUE = \"add\";\n\nexport class MDNCollectionSaveButton extends L10nMixin(LitElement) {\n  static ssr = false;\n  static styles = styles;\n\n  static properties = {\n    docUrl: { type: String, attribute: \"doc-url\" },\n    docTitle: { type: String, attribute: \"doc-title\" },\n    _item: { state: true },\n    _pending: { state: true },\n    _lastAction: { state: true },\n  };\n\n  constructor() {\n    super();\n    this.docUrl = \"\";\n    this.docTitle = \"\";\n    /** @type {Partial<import(\"./types.js\").NewItem> | undefined} */\n    this._item = undefined;\n    this._pending = false;\n    /** @type {string | undefined} */\n    this._lastAction = undefined;\n  }\n\n  _user = new Task(this, {\n    task: async () => {\n      const user = await globalUser();\n      if (user.isAuthenticated) {\n        this._bookmarks.run();\n      }\n      return user;\n    },\n  });\n\n  _collections = new Task(this, {\n    task: async () => {\n      const res = await fetch(\"/api/v2/collections/\");\n      if (!res.ok) {\n        throw new Error(`${res.status}: ${res.statusText}`);\n      }\n      return /** @type {import(\"./rust-types.js\").MultipleCollectionInfo[]} */ (\n        await res.json()\n      );\n    },\n  });\n\n  _bookmarks = new Task(this, {\n    autoRun: false,\n    args: () => [this.docUrl],\n    task: async ([docUrl]) => {\n      const res = await fetch(\n        `/api/v2/collections/lookup/?url=${encodeURIComponent(docUrl)}`,\n      );\n      if (!res.ok) {\n        throw new Error(`${res.status}: ${res.statusText}`);\n      }\n      const data =\n        /** @type {import(\"./rust-types.js\").MultipleCollectionLookupQueryResponse} */ (\n          await res.json()\n        );\n      const entries = data?.results;\n      const bookmarks =\n        entries &&\n        entries.map((entry) => {\n          return { ...entry.item, collection_id: entry.collection_id };\n        });\n      if (bookmarks[0]) {\n        const { collection_id, title, notes } = bookmarks[0];\n        this._item = {\n          collection_id,\n          title,\n          notes,\n        };\n      }\n      return bookmarks;\n    },\n  });\n\n  _open() {\n    this._bookmarks.run();\n    this._collections.run();\n    this.shadowRoot?.querySelector(\"mdn-modal\")?.showModal();\n  }\n\n  /** @param {Event} event */\n  _selectChange({ target }) {\n    if (target instanceof HTMLSelectElement) {\n      const { value } = target;\n      if (value === ADD_VALUE) {\n        this.shadowRoot?.querySelector(\"mdn-modal\")?.close();\n        open(\"/en-US/plus/collections\");\n      } else {\n        const item = this._bookmarks.value?.find(\n          (item) => item.collection_id === value,\n        );\n        this._item = item || {\n          collection_id: value,\n        };\n      }\n    }\n  }\n\n  _cancel() {\n    this.shadowRoot?.querySelector(\"mdn-modal\")?.close();\n  }\n\n  async _delete() {\n    const collectionId = this.shadowRoot?.querySelector(\"select\")?.value;\n    const item = this._bookmarks.value?.find(\n      (item) => item.collection_id === collectionId,\n    );\n    if (collectionId && item) {\n      this._pending = true;\n      this._lastAction = \"delete\";\n\n      const res = await fetch(\n        `/api/v2/collections/${collectionId}/items/${item.id}/`,\n        { method: \"DELETE\" },\n      );\n      if (!res.ok) {\n        console.error(`${res.status}: ${res.statusText}`);\n      }\n\n      this.shadowRoot?.querySelector(\"mdn-modal\")?.close();\n      this._pending = false;\n      this._bookmarks.run();\n    }\n  }\n\n  async _submit() {\n    const collectionId = this.shadowRoot?.querySelector(\"select\")?.value;\n    const item = this._bookmarks.value?.find(\n      (item) => item.collection_id === collectionId,\n    );\n    if (collectionId) {\n      this._pending = true;\n      this._lastAction = \"save\";\n\n      const url = `/api/v2/collections/${collectionId}/items/${item ? `${item.id}/` : \"\"}`;\n      const res = await fetch(url, {\n        body: JSON.stringify({\n          url: this.docUrl,\n          title: this.shadowRoot?.querySelector(\"input\")?.value,\n          notes: this.shadowRoot?.querySelector(\"textarea\")?.value,\n        }),\n        method: \"POST\",\n        headers: {\n          \"content-type\": \"application/json\",\n        },\n      });\n      if (!res.ok) {\n        console.error(`${res.status}: ${res.statusText}`);\n      }\n\n      this.shadowRoot?.querySelector(\"mdn-modal\")?.close();\n      this._pending = false;\n      this._bookmarks.run();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._user.run();\n  }\n\n  /**\n   * @param {import(\"lit\").PropertyValues<this>} changedProperties\n   */\n  willUpdate(changedProperties) {\n    if (changedProperties.has(\"docUrl\") || changedProperties.has(\"docTitle\")) {\n      this._item = {\n        url: this.docUrl,\n        title: this.docTitle,\n      };\n    }\n  }\n\n  render() {\n    const isCurrentInCollection =\n      this._bookmarks.value?.some(\n        (item) => item.collection_id === this._item?.collection_id,\n      ) || false;\n    return this._user.render({\n      complete: (user) =>\n        user.isAuthenticated\n          ? html`\n              <button\n                class=\"collection-save-button\"\n                title=${this.l10n`Save in Collection`}\n                @click=${this._open}\n              >\n                ${this._bookmarks.value?.length\n                  ? bookmarkCheckSvg\n                  : bookmarkSvg} <span>${this.l10n`Save`}</span>\n              </button>\n              <mdn-modal modal-title=\"Add to collection\">\n                ${this._bookmarks.render({\n                  initial: () => html`<progress></progress>`,\n                  pending: () => html`<progress></progress>`,\n                  complete: (bookmarks) =>\n                    this._collections.render({\n                      initial: () => html`<progress></progress>`,\n                      pending: () => html`<progress></progress>`,\n                      complete: (collections) => html`\n                        <label>\n                          Collection:\n                          <select\n                            .value=${this._item?.collection_id}\n                            @change=${this._selectChange}\n                          >\n                            ${collections.map(\n                              (collection) => html`\n                                <option\n                                  value=${collection.id}\n                                  ?selected=${collection.id ===\n                                  this._item?.collection_id}\n                                >\n                                  ${bookmarks.some(\n                                    (item) =>\n                                      item.collection_id === collection.id,\n                                  )\n                                    ? \"★\"\n                                    : \"☆\"}\n                                  ${collection.name === \"Default\"\n                                    ? \"Saved Articles\"\n                                    : collection.name}\n                                </option>\n                              `,\n                            )}\n                            <option disabled role=\"separator\">\n                              ——————————\n                            </option>\n                            <option value=${ADD_VALUE}>+ New Collection</option>\n                          </select>\n                        </label>\n                        <label>\n                          Name:\n                          <input .value=${this._item?.title || this.docTitle} />\n                        </label>\n                        <label>\n                          Note:\n                          <textarea\n                            .value=${this._item?.notes || \"\"}\n                          ></textarea>\n                        </label>\n                        <mdn-button @click=${this._submit}>\n                          ${this._pending && this._lastAction === \"save\"\n                            ? \"Saving...\"\n                            : \"Save\"}\n                        </mdn-button>\n                        <mdn-button\n                          @click=${this._cancel}\n                          ?disabled=${this._pending}\n                          variant=\"secondary\"\n                        >\n                          Cancel\n                        </mdn-button>\n                        ${bookmarks?.length\n                          ? html`<mdn-button\n                              @click=${this._delete}\n                              variant=\"plain\"\n                              id=\"bookmark-delete\"\n                              ?disabled=${this._pending ||\n                              !isCurrentInCollection}\n                            >\n                              ${this._pending && this._lastAction === \"delete\"\n                                ? \"Deleting...\"\n                                : \"Delete\"}\n                            </mdn-button>`\n                          : nothing}\n                      `,\n                    }),\n                })}\n              </mdn-modal>\n            `\n          : nothing,\n    });\n  }\n}\n\ncustomElements.define(\"mdn-collection-save-button\", MDNCollectionSaveButton);\n","import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.collection-save-button{align-items:center;background-color:initial;border:none;column-gap:.25rem;display:flex;font:inherit;margin:0;padding:0 .5rem}.collection-save-button:hover{background-color:var(--color-background-secondary)}@media (max-width:769px){.collection-save-button>span{display:none}}label{display:block}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["s","MDNCollectionSaveButton","String","fetch","Error","encodeURIComponent","t","HTMLSelectElement","open","console","JSON","customElements"],"mappings":"uMAA2B,MAAe,GAAAA,EAAA,GAAG,CAAC,gRAAgR,CAAC,CCApS,EAAe,GAAAA,EAAA,GAAG,CAAC,uPAAuP,CAAC,C,2CCe/R,IAAMC,wBAAN,MAAMA,+BAAgC,QAAU,IAAU,EAC/D,OAAO,IAAM,EAAM,AACnB,QAAO,OAAS,GAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,OAAQ,CAAE,KAAMC,OAAQ,UAAW,SAAU,EAC7C,SAAU,CAAE,KAAMA,OAAQ,UAAW,WAAY,EACjD,MAAO,CAAE,MAAO,EAAK,EACrB,SAAU,CAAE,MAAO,EAAK,EACxB,YAAa,CAAE,MAAO,EAAK,CAC7B,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,MAAM,CAAG,GACd,IAAI,CAAC,QAAQ,CAAG,GAEhB,IAAI,CAAC,KAAK,CAAG,OACb,IAAI,CAAC,QAAQ,CAAG,GAEhB,IAAI,CAAC,WAAW,CAAG,MACrB,CAEA,MAAQ,IAAI,IAAI,CAAC,IAAI,CAAE,CACrB,KAAM,UACJ,IAAM,EAAO,MAAM,UAInB,OAHI,EAAK,eAAe,EACtB,IAAI,CAAC,UAAU,CAAC,GAAG,GAEd,CACT,CACF,EAAG,AAEH,cAAe,IAAI,IAAI,CAAC,IAAI,CAAE,CAC5B,KAAM,UACJ,IAAM,EAAM,MAAMC,MAAM,wBACxB,GAAI,CAAC,EAAI,EAAE,CACT,MAAM,AAAIC,MAAM,CAAC,EAAE,EAAI,MAAM,CAAC,EAAE,EAAE,EAAI,UAAU,CAAC,CAAC,EAEpD,OACE,MAAM,EAAI,IAAI,EAElB,CACF,EAAG,AAEH,YAAa,IAAI,IAAI,CAAC,IAAI,CAAE,CAC1B,QAAS,GACT,KAAM,IAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CACzB,KAAM,MAAO,CAAC,EAAO,IACnB,IAAM,EAAM,MAAMD,MAChB,CAAC,gCAAgC,EAAEE,mBAAmB,GAAQ,CAAC,EAEjE,GAAI,CAAC,EAAI,EAAE,CACT,MAAM,AAAID,MAAM,CAAC,EAAE,EAAI,MAAM,CAAC,EAAE,EAAE,EAAI,UAAU,CAAC,CAAC,EAEpD,IAAM,EAEF,MAAM,EAAI,IAAI,GAEZ,EAAU,GAAM,QAChB,EACJ,GACA,EAAQ,GAAG,CAAC,AAAC,GACJ,EAAE,GAAG,EAAM,IAAI,CAAE,cAAe,EAAM,aAAa,AAAC,IAE/D,GAAI,CAAS,CAAC,EAAE,CAAE,CAChB,GAAM,CAAE,eAAa,CAAE,OAAK,CAAE,OAAK,CAAE,CAAG,CAAS,CAAC,EAAE,AACpD,KAAI,CAAC,KAAK,CAAG,CACX,gBACA,QACA,OACF,CACF,CACA,OAAO,CACT,CACF,EAAG,AAEH,QAAQ,CACN,IAAI,CAAC,UAAU,CAAC,GAAG,GACnB,IAAI,CAAC,YAAY,CAAC,GAAG,GACrB,IAAI,CAAC,UAAU,EAAE,cAAc,cAAc,WAC/C,CAGA,cAAc,CAAEE,OAAAA,CAAM,CAAE,CAAE,CACxB,GAAIA,aAAkBC,kBAAmB,CACvC,GAAM,CAAE,OAAK,CAAE,CAAGD,EAClB,GAAI,AAzFQ,QAyFR,EACF,IAAI,CAAC,UAAU,EAAE,cAAc,cAAc,QAC7CE,KAAK,+BACA,CACL,IAAM,EAAO,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,KAClC,AAAC,GAAS,EAAK,aAAa,GAAK,EAEnC,KAAI,CAAC,KAAK,CAAG,GAAQ,CACnB,cAAe,CACjB,CACF,CACF,CACF,CAEA,SAAU,CACR,IAAI,CAAC,UAAU,EAAE,cAAc,cAAc,OAC/C,CAEA,MAAM,SAAU,CACd,IAAM,EAAe,IAAI,CAAC,UAAU,EAAE,cAAc,WAAW,MACzD,EAAO,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,KAClC,AAAC,GAAS,EAAK,aAAa,GAAK,GAEnC,GAAI,GAAgB,EAAM,CACxB,IAAI,CAAC,QAAQ,CAAG,GAChB,IAAI,CAAC,WAAW,CAAG,SAEnB,IAAM,EAAM,MAAML,MAChB,CAAC,oBAAoB,EAAE,EAAa,OAAO,EAAE,EAAK,EAAE,CAAC,CAAC,CAAC,CACvD,CAAE,OAAQ,QAAS,EAEjB,AAAC,GAAI,EAAE,EACTM,QAAQ,KAAK,CAAC,CAAC,EAAE,EAAI,MAAM,CAAC,EAAE,EAAE,EAAI,UAAU,CAAC,CAAC,EAGlD,IAAI,CAAC,UAAU,EAAE,cAAc,cAAc,QAC7C,IAAI,CAAC,QAAQ,CAAG,GAChB,IAAI,CAAC,UAAU,CAAC,GAAG,EACrB,CACF,CAEA,MAAM,SAAU,CACd,IAAM,EAAe,IAAI,CAAC,UAAU,EAAE,cAAc,WAAW,MACzD,EAAO,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,KAClC,AAAC,GAAS,EAAK,aAAa,GAAK,GAEnC,GAAI,EAAc,CAChB,IAAI,CAAC,QAAQ,CAAG,GAChB,IAAI,CAAC,WAAW,CAAG,OAEnB,IAAM,EAAM,CAAC,oBAAoB,EAAE,EAAa,OAAO,EAAE,EAAO,CAAC,EAAE,EAAK,EAAE,CAAC,CAAC,CAAC,CAAG,GAAG,CAAC,CAC9E,EAAM,MAAMN,MAAM,EAAK,CAC3B,KAAMO,KAAK,SAAS,CAAC,CACnB,IAAK,IAAI,CAAC,MAAM,CAChB,MAAO,IAAI,CAAC,UAAU,EAAE,cAAc,UAAU,MAChD,MAAO,IAAI,CAAC,UAAU,EAAE,cAAc,aAAa,KACrD,GACA,OAAQ,OACR,QAAS,CACP,eAAgB,kBAClB,CACF,EACI,AAAC,GAAI,EAAE,EACTD,QAAQ,KAAK,CAAC,CAAC,EAAE,EAAI,MAAM,CAAC,EAAE,EAAE,EAAI,UAAU,CAAC,CAAC,EAGlD,IAAI,CAAC,UAAU,EAAE,cAAc,cAAc,QAC7C,IAAI,CAAC,QAAQ,CAAG,GAChB,IAAI,CAAC,UAAU,CAAC,GAAG,EACrB,CACF,CAEA,mBAAoB,CAClB,KAAK,CAAC,oBACN,IAAI,CAAC,KAAK,CAAC,GAAG,EAChB,CAKA,WAAW,CAAiB,CAAE,CACxB,GAAkB,GAAG,CAAC,WAAa,EAAkB,GAAG,CAAC,WAAU,GACrE,KAAI,CAAC,KAAK,CAAG,CACX,IAAK,IAAI,CAAC,MAAM,CAChB,MAAO,IAAI,CAAC,QAAQ,AACtB,EAEJ,CAEA,QAAS,CACP,IAAM,EACJ,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,KACrB,AAAC,GAAS,EAAK,aAAa,GAAK,IAAI,CAAC,KAAK,EAAE,gBAC1C,GACP,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CACvB,SAAU,AAAC,GACT,EAAK,eAAe,CAChB,QAAI,CAAC;;;sBAGK,EAAE,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;uBAC/B,EAAE,IAAI,CAAC,KAAK,CAAC;;gBAEpB,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,OACrB,EACA,EAAY,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;gBAGzC,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CACvB,QAAS,IAAM,QAAI,CAAC,qBAAqB,CAAC,CAC1C,QAAS,IAAM,QAAI,CAAC,qBAAqB,CAAC,CAC1C,SAAU,AAAC,GACT,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CACvB,QAAS,IAAM,QAAI,CAAC,qBAAqB,CAAC,CAC1C,QAAS,IAAM,QAAI,CAAC,qBAAqB,CAAC,CAC1C,SAAU,AAAC,GAAgB,QAAI,CAAC;;;;mCAInB,EAAE,IAAI,CAAC,KAAK,EAAE,cAAc;oCAC3B,EAAE,IAAI,CAAC,aAAa,CAAC;;4BAE7B,EAAE,EAAY,GAAG,CACf,AAAC,GAAe,QAAI,CAAC;;wCAEX,EAAE,EAAW,EAAE,CAAC;4CACZ,EAAE,EAAW,EAAE,GACzB,IAAI,CAAC,KAAK,EAAE,cAAc;;kCAE1B,EAAE,EAAU,IAAI,CACd,AAAC,GACC,EAAK,aAAa,GAAK,EAAW,EAAE,EAEpC,IACA,IAAI;kCACR,EAAE,AAAoB,YAApB,EAAW,IAAI,CACb,iBACA,EAAW,IAAI,CAAC;;8BAExB,CAAC,EACD;;;;0CAIY,EAzOxB,MAyOoC;;;;;wCAKd,EAAE,IAAI,CAAC,KAAK,EAAE,OAAS,IAAI,CAAC,QAAQ,CAAC;;;;;mCAK1C,EAAE,IAAI,CAAC,KAAK,EAAE,OAAS,GAAG;;;2CAGlB,EAAE,IAAI,CAAC,OAAO,CAAC;0BAChC,EAAE,IAAI,CAAC,QAAQ,EAAI,AAAqB,SAArB,IAAI,CAAC,WAAW,CAC/B,YACA,OAAO;;;iCAGJ,EAAE,IAAI,CAAC,OAAO,CAAC;oCACZ,EAAE,IAAI,CAAC,QAAQ,CAAC;;;;;wBAK5B,EAAE,GAAW,OACT,QAAI,CAAC;qCACI,EAAE,IAAI,CAAC,OAAO,CAAC;;;wCAGZ,EAAE,IAAI,CAAC,QAAQ,EACzB,CAAC,EAAsB;;8BAEvB,EAAE,IAAI,CAAC,QAAQ,EAAI,AAAqB,WAArB,IAAI,CAAC,WAAW,CAC/B,cACA,SAAS;yCACF,CAAC,CACd,IAAO,CAAC;sBACd,CAAC,AACH,EACJ,GAAG;;YAEP,CAAC,CACD,IAAO,AACf,EACF,CACF,EAEAE,eAAe,MAAM,CAAC,6BAA8BV,wB,qFClShD,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,iUAAkU,GAAG,EAE9W,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}

package/dist/client/5759.22a61c1d4a7e3084.js

@@ -0,0 +1,4 @@
+export const __webpack_ids__=["5759"];export const __webpack_modules__={28553:function(t,e,o){o.r(e),o.d(e,{MDNCopyButton:()=>MDNCopyButton});var i=o(14703),s=o(69535),n=o(50272);let MDNCopyButton=class MDNCopyButton extends(0,s.q)(i.oi){static properties={variant:{},_message:{state:!0}};constructor(){super(),this.variant="primary",this.copiesFrom=void 0}async _copy({target:t}){if(t instanceof n.MDNButton){let t=!0;try{let t=this.copiesFrom?.textContent?.trim();t&&await navigator.clipboard.writeText(t)}catch(e){console.error("Error when trying to use navigator.clipboard.writeText()",e),t=!1}this._message=t?this.l10n`Copied`:this.l10n`Copy failed!`,setTimeout(()=>{this._message=void 0},t?1e3:3e3)}}render(){return(0,i.dy)`<mdn-button @click=${this._copy} variant=${this.variant}
+      >${this._message??this.l10n`Copy`}</mdn-button
+    >`}};customElements.define("mdn-copy-button",MDNCopyButton)}};
+//# sourceMappingURL=5759.22a61c1d4a7e3084.js.map

package/dist/client/5759.22a61c1d4a7e3084.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"5759.22a61c1d4a7e3084.js","sources":["webpack://@mdn/fred/./components/copy-button/element.js"],"sourcesContent":["import { LitElement, html } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { MDNButton } from \"../button/element.js\";\n\nexport class MDNCopyButton extends L10nMixin(LitElement) {\n  static properties = {\n    variant: {},\n    _message: { state: true },\n  };\n\n  constructor() {\n    super();\n    this.variant = \"primary\";\n    /** @type {Element | undefined} */\n    this.copiesFrom = undefined;\n  }\n\n  /**\n   * @param {MouseEvent} event\n   */\n  async _copy({ target }) {\n    if (target instanceof MDNButton) {\n      let copiedSuccessfully = true;\n      try {\n        const text = this.copiesFrom?.textContent?.trim();\n        if (text) {\n          await navigator.clipboard.writeText(text);\n        }\n      } catch (error) {\n        console.error(\n          \"Error when trying to use navigator.clipboard.writeText()\",\n          error,\n        );\n        copiedSuccessfully = false;\n      }\n\n      this._message = copiedSuccessfully\n        ? this.l10n`Copied`\n        : this.l10n`Copy failed!`;\n\n      setTimeout(\n        () => {\n          this._message = undefined;\n        },\n        copiedSuccessfully ? 1000 : 3000,\n      );\n    }\n  }\n\n  render() {\n    return html`<mdn-button @click=${this._copy} variant=${this.variant}\n      >${this._message ?? this.l10n`Copy`}</mdn-button\n    >`;\n  }\n}\n\ncustomElements.define(\"mdn-copy-button\", MDNCopyButton);\n"],"names":["MDNCopyButton","t","navigator","e","console","setTimeout","customElements"],"mappings":"mLAKO,IAAMA,cAAN,MAAMA,qBAAsB,QAAU,IAAU,EACrD,OAAO,WAAa,CAClB,QAAS,CAAC,EACV,SAAU,CAAE,MAAO,EAAK,CAC1B,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,OAAO,CAAG,UAEf,IAAI,CAAC,UAAU,CAAG,MACpB,CAKA,MAAM,MAAM,CAAEC,OAAAA,CAAM,CAAE,CAAE,CACtB,GAAIA,aAAkB,WAAS,CAAE,CAC/B,IAAI,EAAqB,GACzB,GAAI,CACF,IAAMA,EAAO,IAAI,CAAC,UAAU,EAAE,aAAa,MACvCA,CAAAA,GACF,MAAMC,UAAU,SAAS,CAAC,SAAS,CAACD,EAExC,CAAE,MAAOE,EAAO,CACdC,QAAQ,KAAK,CACX,2DACAD,GAEF,EAAqB,EACvB,CAEA,IAAI,CAAC,QAAQ,CAAG,EACZ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CACjB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAE3BE,WACE,KACE,IAAI,CAAC,QAAQ,CAAG,MAClB,EACA,EAAqB,IAAO,IAEhC,CACF,CAEA,QAAS,CACP,MAAO,QAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC;OACjE,EAAE,IAAI,CAAC,QAAQ,EAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACrC,CAAC,AACJ,CACF,EAEAC,eAAe,MAAM,CAAC,kBAAmBN,c"}