@mdn/fred 1.3.2 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/build/render.js +5 -2
  3. package/components/baseline-indicator/server.js +3 -3
  4. package/components/compat-table/constants.js +0 -3
  5. package/components/compat-table/element.js +3 -6
  6. package/components/content-feedback/element.js +2 -5
  7. package/components/content-section/server.css +1 -1
  8. package/components/contributor-list/element.css +3 -2
  9. package/components/interactive-example/element.js +1 -1
  10. package/components/menu/constants.js +6 -4
  11. package/components/menu/server.js +142 -89
  12. package/components/placement-bottom/element.js +2 -2
  13. package/components/placement-hp-main/element.js +2 -2
  14. package/components/placement-no/element.js +1 -1
  15. package/components/placement-note/element.js +1 -1
  16. package/components/placement-sidebar/element.js +4 -4
  17. package/components/placement-top/element.js +5 -5
  18. package/components/play-controller/element.js +1 -0
  19. package/components/playground/element.js +2 -1
  20. package/components/recent-contributions/server.js +1 -1
  21. package/components/scrim-inline/element.js +2 -2
  22. package/l10n/en-US.ftl +5 -2
  23. package/out/service-worker.js +1 -1
  24. package/out/service-worker.js.map +1 -1
  25. package/out/static/client/{2308.69b80ae939b202ae.js → 2308.0ccf49974d71523d.js} +6 -6
  26. package/out/static/client/2308.0ccf49974d71523d.js.map +1 -0
  27. package/out/static/client/{2319.daf8150c3dd00fb4.js → 2319.0a40303319ac6a6e.js} +4 -4
  28. package/out/static/client/{2319.daf8150c3dd00fb4.js.map → 2319.0a40303319ac6a6e.js.map} +1 -1
  29. package/out/static/client/{288.ba983e8acda3116e.js → 288.684edb44f92a470c.js} +2 -2
  30. package/out/static/client/288.684edb44f92a470c.js.map +1 -0
  31. package/out/static/client/{3132.ec59f4619872c415.js → 3132.5ae6f61e3998aef1.js} +6 -6
  32. package/out/static/client/{3132.ec59f4619872c415.js.map → 3132.5ae6f61e3998aef1.js.map} +1 -1
  33. package/out/static/client/{3733.60667669ab613e1f.js → 3733.94bd76664194890b.js} +5 -5
  34. package/out/static/client/{3733.60667669ab613e1f.js.map → 3733.94bd76664194890b.js.map} +1 -1
  35. package/out/static/client/{451.cd85e2808f388a00.js → 451.fb2679190b3266e1.js} +2 -2
  36. package/out/static/client/{451.cd85e2808f388a00.js.map → 451.fb2679190b3266e1.js.map} +1 -1
  37. package/out/static/client/{603.8cdd963a9e248a75.js → 603.8670965b0722be3a.js} +5 -5
  38. package/out/static/client/603.8670965b0722be3a.js.map +1 -0
  39. package/out/static/client/{6040.80c6f96d0152ac99.js → 6040.13e672aff6757a47.js} +2 -2
  40. package/out/static/client/{6040.80c6f96d0152ac99.js.map → 6040.13e672aff6757a47.js.map} +1 -1
  41. package/out/static/client/{6536.faff8f026d145aad.js → 6536.ecdcc4458cbd0504.js} +2 -2
  42. package/out/static/client/6536.ecdcc4458cbd0504.js.map +1 -0
  43. package/out/static/client/{8036.9065b84aac240378.js → 8036.6e177b49bfa9b7c4.js} +3 -3
  44. package/out/static/client/{8036.9065b84aac240378.js.map → 8036.6e177b49bfa9b7c4.js.map} +1 -1
  45. package/out/static/client/{8607.266d488ae06c2279.js → 8607.464a88660a040f97.js} +4 -4
  46. package/out/static/client/{8607.266d488ae06c2279.js.map → 8607.464a88660a040f97.js.map} +1 -1
  47. package/out/static/client/{8797.46790b4359b5d1cb.js → 8797.f5880b5ee2659039.js} +2 -2
  48. package/out/static/client/{8797.46790b4359b5d1cb.js.map → 8797.f5880b5ee2659039.js.map} +1 -1
  49. package/out/static/client/{9784.214845ec6d3b77e3.js → 9784.3f8ca449f7d36818.js} +5 -5
  50. package/out/static/client/9784.3f8ca449f7d36818.js.map +1 -0
  51. package/out/static/client/{index.b9d9ebb034538241.js → index.881056601848b5c3.js} +15 -12
  52. package/out/static/client/{index.b9d9ebb034538241.js.map → index.881056601848b5c3.js.map} +1 -1
  53. package/out/static/client/{runtime.cc9114c9e108157f.js → runtime.63305f0549b94aae.js} +2 -2
  54. package/out/static/client/{runtime.cc9114c9e108157f.js.map → runtime.63305f0549b94aae.js.map} +1 -1
  55. package/out/static/client/stats.json +136 -136
  56. package/out/static/client/{styles-content-section.e0bbadd0c4bc857d.css → styles-content-section.2f0727a030110fc9.css} +2 -2
  57. package/out/static/client/{styles-content-section.e0bbadd0c4bc857d.css.map → styles-content-section.2f0727a030110fc9.css.map} +1 -1
  58. package/out/static/legacy/{1289.71de08e7375881e1.js → 1289.61e3f0658b3b42f6.js} +2 -2
  59. package/out/static/legacy/{1289.71de08e7375881e1.js.map → 1289.61e3f0658b3b42f6.js.map} +1 -1
  60. package/out/static/legacy/{2090.29b77e88722868ff.js → 2090.5996133ea26ddd0a.js} +2 -2
  61. package/out/static/legacy/{2090.29b77e88722868ff.js.map → 2090.5996133ea26ddd0a.js.map} +1 -1
  62. package/out/static/legacy/2235.b99812e73c08ee51.js +2 -0
  63. package/out/static/legacy/{2235.c0e6904b64ea18fe.js.map → 2235.b99812e73c08ee51.js.map} +1 -1
  64. package/out/static/legacy/{2465.676e7f0b0f9f9d85.js → 2465.041a63f06f35163c.js} +2 -2
  65. package/out/static/legacy/{2465.676e7f0b0f9f9d85.js.map → 2465.041a63f06f35163c.js.map} +1 -1
  66. package/out/static/legacy/{3172.0c1b9258951929cc.js → 3172.cf1b8a6dcea5d789.js} +2 -2
  67. package/out/static/legacy/{3172.0c1b9258951929cc.js.map → 3172.cf1b8a6dcea5d789.js.map} +1 -1
  68. package/out/static/legacy/{4968.62ad4db7389e93ad.js → 4968.e73f2795a9ca1639.js} +2 -2
  69. package/out/static/legacy/{4968.62ad4db7389e93ad.js.map → 4968.e73f2795a9ca1639.js.map} +1 -1
  70. package/out/static/legacy/{6364.d8cdb19b92fe6dc1.js → 6364.4c2629a5287ded91.js} +2 -2
  71. package/out/static/legacy/{6364.d8cdb19b92fe6dc1.js.map → 6364.4c2629a5287ded91.js.map} +1 -1
  72. package/out/static/legacy/{652.3c82fa8fa13a87b2.js → 652.d7ab50c73c693880.js} +2 -2
  73. package/out/static/legacy/{652.3c82fa8fa13a87b2.js.map → 652.d7ab50c73c693880.js.map} +1 -1
  74. package/out/static/legacy/7510.faa07a788cad6fc7.js +2 -0
  75. package/out/static/legacy/{7510.d1e3773463ecc314.js.map → 7510.faa07a788cad6fc7.js.map} +1 -1
  76. package/out/static/legacy/{7827.838d9e673c56e936.js → 7827.efd03057dbb6c884.js} +2 -2
  77. package/out/static/legacy/{7827.838d9e673c56e936.js.map → 7827.efd03057dbb6c884.js.map} +1 -1
  78. package/out/static/legacy/8183.26862a110c641391.js +2 -0
  79. package/out/static/legacy/8183.26862a110c641391.js.map +1 -0
  80. package/out/static/legacy/{8333.c00c132d6919165b.js → 8333.e5001734aea048b6.js} +2 -2
  81. package/out/static/legacy/{8333.c00c132d6919165b.js.map → 8333.e5001734aea048b6.js.map} +1 -1
  82. package/out/static/legacy/{8504.157e4a48938fdac7.js → 8504.d5df18204dd2b2ef.js} +2 -2
  83. package/out/static/legacy/{8504.157e4a48938fdac7.js.map → 8504.d5df18204dd2b2ef.js.map} +1 -1
  84. package/out/static/legacy/8856.0efcde0ace698d4a.js.map +1 -1
  85. package/out/static/legacy/{9221.64e46eedebf47df8.js → 9221.3cee7be6339f4234.js} +3 -3
  86. package/out/static/legacy/{9221.64e46eedebf47df8.js.map → 9221.3cee7be6339f4234.js.map} +1 -1
  87. package/out/static/legacy/asset-manifest.json +20 -20
  88. package/out/static/legacy/{index.e4ab469094607d20.html → index.17917fe951b4bbfe.html} +1 -1
  89. package/out/static/legacy/index.81f776c8a95b5c6c.js +6 -0
  90. package/out/static/legacy/{index.3504df1c7b6a1b29.js.LICENSE.txt → index.81f776c8a95b5c6c.js.LICENSE.txt} +1 -1
  91. package/out/static/legacy/index.81f776c8a95b5c6c.js.map +1 -0
  92. package/out/static/legacy/stats.json +20 -20
  93. package/out/static/legacy/yari.255b3bc6ef8a8b24.js +7 -0
  94. package/out/static/legacy/{yari.7a85003b4add8414.js.LICENSE.txt → yari.255b3bc6ef8a8b24.js.LICENSE.txt} +1 -1
  95. package/out/static/legacy/yari.255b3bc6ef8a8b24.js.map +1 -0
  96. package/out/static/ssr/index.js +153 -161
  97. package/out/static/ssr/index.js.map +1 -1
  98. package/out/static/ssr/stats.json +4 -4
  99. package/package.json +14 -14
  100. package/utils/glean.js +3 -8
  101. package/out/static/client/2308.69b80ae939b202ae.js.map +0 -1
  102. package/out/static/client/288.ba983e8acda3116e.js.map +0 -1
  103. package/out/static/client/603.8cdd963a9e248a75.js.map +0 -1
  104. package/out/static/client/6536.faff8f026d145aad.js.map +0 -1
  105. package/out/static/client/9784.214845ec6d3b77e3.js.map +0 -1
  106. package/out/static/legacy/2235.c0e6904b64ea18fe.js +0 -2
  107. package/out/static/legacy/7510.d1e3773463ecc314.js +0 -2
  108. package/out/static/legacy/8183.d3c84d03c477eac6.js +0 -2
  109. package/out/static/legacy/8183.d3c84d03c477eac6.js.map +0 -1
  110. package/out/static/legacy/index.3504df1c7b6a1b29.js +0 -6
  111. package/out/static/legacy/index.3504df1c7b6a1b29.js.map +0 -1
  112. package/out/static/legacy/yari.7a85003b4add8414.js +0 -7
  113. package/out/static/legacy/yari.7a85003b4add8414.js.map +0 -1
  114. /package/out/static/client/{2319.daf8150c3dd00fb4.js.LICENSE.txt → 2319.0a40303319ac6a6e.js.LICENSE.txt} +0 -0
  115. /package/out/static/client/{603.8cdd963a9e248a75.js.LICENSE.txt → 603.8670965b0722be3a.js.LICENSE.txt} +0 -0
  116. /package/out/static/client/{9784.214845ec6d3b77e3.js.LICENSE.txt → 9784.3f8ca449f7d36818.js.LICENSE.txt} +0 -0
  117. /package/out/static/client/{index.b9d9ebb034538241.js.LICENSE.txt → index.881056601848b5c3.js.LICENSE.txt} +0 -0
  118. /package/out/static/legacy/{9221.64e46eedebf47df8.js.LICENSE.txt → 9221.3cee7be6339f4234.js.LICENSE.txt} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"8036.9065b84aac240378.js","sources":["webpack://@mdn/fred/./components/placement-bottom/element.css","webpack://@mdn/fred/./components/placement-bottom/element.js"],"sourcesContent":["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, `.bottom-placement{--bottom-background-light:var(--color-background-primary);--bottom-color-light:var(--color-text-primary);--bottom-background-dark:var(--color-background-primary);--bottom-color-dark:var(--color-text-primary);--csstools-light-dark-toggle-7c143197-0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle-7c143197-0,var(--bottom-background-light));--csstools-light-dark-toggle-7c143197-1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle-7c143197-1,var(--bottom-color-light));background-color:var(--bottom-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.bottom-placement{--bottom-background:light-dark(var(--bottom-background-light),var(--bottom-background-dark));--bottom-color:light-dark(var(--bottom-color-light),var(--bottom-color-dark))}}@supports not (color:light-dark(tan,tan)){.bottom-placement *{--csstools-light-dark-toggle-7c143197-0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle-7c143197-0,var(--bottom-background-light));--csstools-light-dark-toggle-7c143197-1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle-7c143197-1,var(--bottom-color-light))}}.bottom-placement .placement-container{column-gap:3rem;display:grid;grid-template-areas:\"nope pong note\" \"nope pong no\";grid-template-columns:auto auto auto;margin:0 auto;padding:0 1rem}@media (width <= 1441px){.bottom-placement .placement-container{grid-template-areas:\"pong note\" \"pong no\";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (width <= 769px){.bottom-placement .placement-container{grid-template-areas:\"pong\" \"note\";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.bottom-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.bottom-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.bottom-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html, nothing } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport \"../placement-note/element.js\";\nimport \"../placement-no/element.js\";\n\nimport { PlacementMixin } from \"../placement/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @import * as Placements from \"../placement/types.js\";\n */\n\nexport class MDNPlacementBottom extends PlacementMixin(LitElement) {\n static styles = styles;\n\n /**\n *\n * @param {Placements.PlacementContextData} placementContext\n * @returns\n */\n renderComplete(placementContext) {\n const data = placementContext?.hpFooter || placementContext?.bottom;\n if (!data) {\n return nothing;\n }\n const { status, click, view, image, alt, colors, version } = data;\n if (status !== \"success\") {\n return nothing;\n }\n if (!this._viewedUrl) {\n this._viewedUrl = view;\n this._version = version;\n }\n const { backgroundColor, textColor } = colors || {};\n const styles = Object.fromEntries(\n [\n [\"--bottom-background\", backgroundColor],\n [\"--bottom-color\", textColor],\n ].filter(([_, v]) => Boolean(v)),\n );\n\n return html`<div\n ${ref(this._placementRef)}\n class=\"bottom-placement\"\n style=${styleMap(styles)}\n >\n <section class=\"placement-container\">\n <a\n class=\"placement-link\"\n data-glean=\"pong: pong-&gt;click top-banner\"\n href=${this.clickLink(click, version)}\n target=\"_blank\"\n rel=\"sponsored noreferrer\"\n >\n <img\n src=${this.imgLink(image)}\n aria-hidden=${!alt}\n alt=${alt || \"\"}\n width=\"728\"\n height=\"90\"\n />\n </a>\n <mdn-placement-note></mdn-placement-note>\n </section>\n </div>`;\n }\n}\n\ncustomElements.define(\"mdn-placement-bottom\", MDNPlacementBottom);\n"],"names":["MDNPlacementBottom","Object","r","customElements"],"mappings":"gMAII,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,yqEAA0qE,GAAG,EAEttE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,mKCOhD,IAAMA,mBAAN,MAAMA,0BAA2B,QAAe,IAAU,EAC/D,OAAO,OAAS,GAAM,AAAC,AAOvB,gBAAe,CAAgB,CAAE,CAC/B,IAAM,EAAO,GAAkB,UAAY,GAAkB,OAC7D,GAAI,CAAC,EACH,OAAO,IAAO,CAEhB,GAAM,CAAE,QAAM,CAAE,OAAK,CAAE,MAAI,CAAE,OAAK,CAAE,KAAG,CAAE,QAAM,CAAE,SAAO,CAAE,CAAG,EAC7D,GAAI,AAAW,YAAX,EACF,OAAO,IAAO,AAEX,KAAI,CAAC,UAAU,GAClB,IAAI,CAAC,UAAU,CAAG,EAClB,IAAI,CAAC,QAAQ,CAAG,GAElB,GAAM,CAAE,iBAAe,CAAE,WAAS,CAAE,CAAG,GAAU,CAAC,EAC5C,EAASC,OAAO,WAAW,CAC/B,CACE,CAAC,sBAAuB,EAAgB,CACxC,CAAC,iBAAkB,EAAU,CAC9B,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,EAAQ,IAG/B,MAAO,QAAI,CAAC;MACV,EAAE,GAAAC,EAAA,GAAI,IAAI,CAAC,aAAa,EAAE;;YAEpB,EAAE,QAAS,GAAQ;;;;;;eAMhB,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;;gBAKhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;wBACd,EAAE,CAAC,EAAI;gBACf,EAAE,GAAO,GAAG;;;;;;;UAOlB,CAAC,AACT,CACF,EAEAC,eAAe,MAAM,CAAC,uBAAwBH,mB"}
1
+ {"version":3,"file":"8036.6e177b49bfa9b7c4.js","sources":["webpack://@mdn/fred/./components/placement-bottom/element.css","webpack://@mdn/fred/./components/placement-bottom/element.js"],"sourcesContent":["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, `.bottom-placement{--bottom-background-light:var(--color-background-primary);--bottom-color-light:var(--color-text-primary);--bottom-background-dark:var(--color-background-primary);--bottom-color-dark:var(--color-text-primary);--csstools-light-dark-toggle-7c143197-0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle-7c143197-0,var(--bottom-background-light));--csstools-light-dark-toggle-7c143197-1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle-7c143197-1,var(--bottom-color-light));background-color:var(--bottom-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.bottom-placement{--bottom-background:light-dark(var(--bottom-background-light),var(--bottom-background-dark));--bottom-color:light-dark(var(--bottom-color-light),var(--bottom-color-dark))}}@supports not (color:light-dark(tan,tan)){.bottom-placement *{--csstools-light-dark-toggle-7c143197-0:var(--csstools-color-scheme--light) var(--bottom-background-dark);--bottom-background:var(--csstools-light-dark-toggle-7c143197-0,var(--bottom-background-light));--csstools-light-dark-toggle-7c143197-1:var(--csstools-color-scheme--light) var(--bottom-color-dark);--bottom-color:var(--csstools-light-dark-toggle-7c143197-1,var(--bottom-color-light))}}.bottom-placement .placement-container{column-gap:3rem;display:grid;grid-template-areas:\"nope pong note\" \"nope pong no\";grid-template-columns:auto auto auto;margin:0 auto;padding:0 1rem}@media (width <= 1441px){.bottom-placement .placement-container{grid-template-areas:\"pong note\" \"pong no\";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (width <= 769px){.bottom-placement .placement-container{grid-template-areas:\"pong\" \"note\";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.bottom-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.bottom-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.bottom-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html, nothing } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport \"../placement-note/element.js\";\nimport \"../placement-no/element.js\";\n\nimport { PlacementMixin } from \"../placement/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @import * as Placements from \"../placement/types.js\";\n */\n\nexport class MDNPlacementBottom extends PlacementMixin(LitElement) {\n static styles = styles;\n\n /**\n *\n * @param {Placements.PlacementContextData} placementContext\n * @returns\n */\n renderComplete(placementContext) {\n const data = placementContext?.hpFooter || placementContext?.bottom;\n if (!data) {\n return nothing;\n }\n const { status, click, view, image, alt, colors, version } = data;\n if (status !== \"success\") {\n return nothing;\n }\n if (!this._viewedUrl) {\n this._viewedUrl = view;\n this._version = version;\n }\n const { backgroundColor, textColor } = colors || {};\n const styles = Object.fromEntries(\n [\n [\"--bottom-background\", backgroundColor],\n [\"--bottom-color\", textColor],\n ].filter(([_, v]) => Boolean(v)),\n );\n\n return html`<div\n ${ref(this._placementRef)}\n class=\"bottom-placement\"\n style=${styleMap(styles)}\n >\n <section class=\"placement-container\">\n <a\n class=\"placement-link\"\n data-glean-id=${`pong: pong->click top-banner`}\n href=${this.clickLink(click, version)}\n target=\"_blank\"\n rel=\"sponsored\"\n >\n <img\n src=${this.imgLink(image)}\n aria-hidden=${!alt}\n alt=${alt || \"\"}\n width=\"728\"\n height=\"90\"\n />\n </a>\n <mdn-placement-note></mdn-placement-note>\n </section>\n </div>`;\n }\n}\n\ncustomElements.define(\"mdn-placement-bottom\", MDNPlacementBottom);\n"],"names":["MDNPlacementBottom","Object","r","customElements"],"mappings":"gMAII,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,yqEAA0qE,GAAG,EAEttE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,mKCOhD,IAAMA,mBAAN,MAAMA,0BAA2B,QAAe,IAAU,EAC/D,OAAO,OAAS,GAAM,AAAC,AAOvB,gBAAe,CAAgB,CAAE,CAC/B,IAAM,EAAO,GAAkB,UAAY,GAAkB,OAC7D,GAAI,CAAC,EACH,OAAO,IAAO,CAEhB,GAAM,CAAE,QAAM,CAAE,OAAK,CAAE,MAAI,CAAE,OAAK,CAAE,KAAG,CAAE,QAAM,CAAE,SAAO,CAAE,CAAG,EAC7D,GAAI,AAAW,YAAX,EACF,OAAO,IAAO,AAEX,KAAI,CAAC,UAAU,GAClB,IAAI,CAAC,UAAU,CAAG,EAClB,IAAI,CAAC,QAAQ,CAAG,GAElB,GAAM,CAAE,iBAAe,CAAE,WAAS,CAAE,CAAG,GAAU,CAAC,EAC5C,EAASC,OAAO,WAAW,CAC/B,CACE,CAAC,sBAAuB,EAAgB,CACxC,CAAC,iBAAkB,EAAU,CAC9B,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,EAAQ,IAG/B,MAAO,QAAI,CAAC;MACV,EAAE,GAAAC,EAAA,GAAI,IAAI,CAAC,aAAa,EAAE;;YAEpB,EAAE,QAAS,GAAQ;;;;;wBAKP,EAAE,+BAA+B;eAC1C,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;;gBAKhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;wBACd,EAAE,CAAC,EAAI;gBACf,EAAE,GAAO,GAAG;;;;;;;UAOlB,CAAC,AACT,CACF,EAEAC,eAAe,MAAM,CAAC,uBAAwBH,mB"}
@@ -1,4 +1,4 @@
1
- export const __webpack_id__="8607";export const __webpack_ids__=["8607"];export const __webpack_modules__={53633:function(a,e,t){t.d(e,{A:()=>c});var n=t(63819),o=t(31601),r=t.n(o),i=t(76314),l=t.n(i)()(r());l.push([a.id,'.hp-main-placement{--hp-main-background-light:var(--color-background-primary);--hp-main-color-light:var(--color-text-primary);--hp-main-background-dark:var(--color-background-primary);--hp-main-color-dark:var(--color-text-primary);--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light));background-color:var(--hp-main-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.hp-main-placement{--hp-main-background:light-dark(var(--hp-main-background-light),var(--hp-main-background-dark));--hp-main-color:light-dark(var(--hp-main-color-light),var(--hp-main-color-dark))}}@supports not (color:light-dark(tan,tan)){.hp-main-placement *{--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light))}}.hp-main-placement .placement-container{column-gap:3rem;display:grid;grid-template-areas:"nope pong note" "nope pong no";grid-template-columns:auto auto auto;margin:0 auto;padding:0 1rem}@media (width <= 1441px){.hp-main-placement .placement-container{grid-template-areas:"pong note" "pong no";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (width <= 769px){.hp-main-placement .placement-container{grid-template-areas:"pong" "note";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.hp-main-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.hp-main-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.hp-main-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}',""]);let c=(0,n.AH)([l.toString()])},9714:function(a,e,t){t.r(e),t.d(e,{MDNPlacementHpMain:()=>MDNPlacementHpMain});var n=t(63819),o=t(69392),r=t(38758);t(55772),t(10787);var i=t(17876),l=t(53633);let MDNPlacementHpMain=class MDNPlacementHpMain extends(0,i.N)(n.WF){static styles=l.A;renderComplete(a){let{hpMain:e}=a;if(!e)return n.s6;let{status:t,click:i,view:l,image:c,alt:p,colors:m,version:s}=e;if("success"!==t)return n.s6;this._viewedUrl||(this._viewedUrl=l,this._version=s);let{backgroundColor:d,textColor:g}=m||{},h=Object.fromEntries([["--hp-main-background",d],["--hp-main-color",g]].filter(([a,e])=>!!e));return(0,n.qy)`<div
1
+ export const __webpack_id__="8607";export const __webpack_ids__=["8607"];export const __webpack_modules__={53633:function(a,t,e){e.d(t,{A:()=>c});var n=e(63819),o=e(31601),r=e.n(o),i=e(76314),l=e.n(i)()(r());l.push([a.id,'.hp-main-placement{--hp-main-background-light:var(--color-background-primary);--hp-main-color-light:var(--color-text-primary);--hp-main-background-dark:var(--color-background-primary);--hp-main-color-dark:var(--color-text-primary);--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light));background-color:var(--hp-main-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.hp-main-placement{--hp-main-background:light-dark(var(--hp-main-background-light),var(--hp-main-background-dark));--hp-main-color:light-dark(var(--hp-main-color-light),var(--hp-main-color-dark))}}@supports not (color:light-dark(tan,tan)){.hp-main-placement *{--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light))}}.hp-main-placement .placement-container{column-gap:3rem;display:grid;grid-template-areas:"nope pong note" "nope pong no";grid-template-columns:auto auto auto;margin:0 auto;padding:0 1rem}@media (width <= 1441px){.hp-main-placement .placement-container{grid-template-areas:"pong note" "pong no";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (width <= 769px){.hp-main-placement .placement-container{grid-template-areas:"pong" "note";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.hp-main-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.hp-main-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.hp-main-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}',""]);let c=(0,n.AH)([l.toString()])},9714:function(a,t,e){e.r(t),e.d(t,{MDNPlacementHpMain:()=>MDNPlacementHpMain});var n=e(63819),o=e(69392),r=e(38758);e(55772),e(10787);var i=e(17876),l=e(53633);let MDNPlacementHpMain=class MDNPlacementHpMain extends(0,i.N)(n.WF){static styles=l.A;renderComplete(a){let{hpMain:t}=a;if(!t)return n.s6;let{status:e,click:i,view:l,image:c,alt:p,colors:m,version:s}=t;if("success"!==e)return n.s6;this._viewedUrl||(this._viewedUrl=l,this._version=s);let{backgroundColor:d,textColor:g}=m||{},h=Object.fromEntries([["--hp-main-background",d],["--hp-main-color",g]].filter(([a,t])=>!!t));return(0,n.qy)`<div
2
2
  ${(0,o.K)(this._placementRef)}
3
3
  class="hp-main-placement"
4
4
  style=${(0,r.W)(h)}
@@ -6,10 +6,10 @@ export const __webpack_id__="8607";export const __webpack_ids__=["8607"];export
6
6
  <section class="placement-container">
7
7
  <a
8
8
  class="placement-link"
9
- data-glean="pong: pong-&gt;click top-banner"
9
+ data-glean-id=${"pong: pong->click top-banner"}
10
10
  href=${this.clickLink(i,s)}
11
11
  target="_blank"
12
- rel="sponsored noreferrer"
12
+ rel="sponsored"
13
13
  >
14
14
  <img
15
15
  src=${this.imgLink(c)}
@@ -22,4 +22,4 @@ export const __webpack_id__="8607";export const __webpack_ids__=["8607"];export
22
22
  <mdn-placement-note></mdn-placement-note>
23
23
  </section>
24
24
  </div>`}};customElements.define("mdn-placement-hp-main",MDNPlacementHpMain)}};
25
- //# sourceMappingURL=8607.266d488ae06c2279.js.map
25
+ //# sourceMappingURL=8607.464a88660a040f97.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"8607.266d488ae06c2279.js","sources":["webpack://@mdn/fred/./components/placement-hp-main/element.css","webpack://@mdn/fred/./components/placement-hp-main/element.js"],"sourcesContent":["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, `.hp-main-placement{--hp-main-background-light:var(--color-background-primary);--hp-main-color-light:var(--color-text-primary);--hp-main-background-dark:var(--color-background-primary);--hp-main-color-dark:var(--color-text-primary);--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light));background-color:var(--hp-main-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.hp-main-placement{--hp-main-background:light-dark(var(--hp-main-background-light),var(--hp-main-background-dark));--hp-main-color:light-dark(var(--hp-main-color-light),var(--hp-main-color-dark))}}@supports not (color:light-dark(tan,tan)){.hp-main-placement *{--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light))}}.hp-main-placement .placement-container{column-gap:3rem;display:grid;grid-template-areas:\"nope pong note\" \"nope pong no\";grid-template-columns:auto auto auto;margin:0 auto;padding:0 1rem}@media (width <= 1441px){.hp-main-placement .placement-container{grid-template-areas:\"pong note\" \"pong no\";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (width <= 769px){.hp-main-placement .placement-container{grid-template-areas:\"pong\" \"note\";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.hp-main-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.hp-main-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.hp-main-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html, nothing } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport \"../placement-note/element.js\";\nimport \"../placement-no/element.js\";\n\nimport { PlacementMixin } from \"../placement/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @import * as Placements from \"../placement/types.js\";\n */\n\nexport class MDNPlacementHpMain extends PlacementMixin(LitElement) {\n static styles = styles;\n\n /**\n *\n * @param {Placements.PlacementContextData} placementContext\n * @returns\n */\n renderComplete(placementContext) {\n const { hpMain: data } = placementContext;\n if (!data) {\n return nothing;\n }\n const { status, click, view, image, alt, colors, version } = data;\n if (status !== \"success\") {\n return nothing;\n }\n if (!this._viewedUrl) {\n this._viewedUrl = view;\n this._version = version;\n }\n const { backgroundColor, textColor } = colors || {};\n const styles = Object.fromEntries(\n [\n [\"--hp-main-background\", backgroundColor],\n [\"--hp-main-color\", textColor],\n ].filter(([_, v]) => Boolean(v)),\n );\n\n return html`<div\n ${ref(this._placementRef)}\n class=\"hp-main-placement\"\n style=${styleMap(styles)}\n >\n <section class=\"placement-container\">\n <a\n class=\"placement-link\"\n data-glean=\"pong: pong-&gt;click top-banner\"\n href=${this.clickLink(click, version)}\n target=\"_blank\"\n rel=\"sponsored noreferrer\"\n >\n <img\n src=${this.imgLink(image)}\n aria-hidden=${!alt}\n alt=${alt || \"\"}\n width=\"970\"\n height=\"250\"\n />\n </a>\n <mdn-placement-note></mdn-placement-note>\n </section>\n </div>`;\n }\n}\n\ncustomElements.define(\"mdn-placement-hp-main\", MDNPlacementHpMain);\n"],"names":["MDNPlacementHpMain","n","Object","customElements"],"mappings":"gMAII,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,ysEAA0sE,GAAG,EAEtvE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,kKCOhD,IAAMA,mBAAN,MAAMA,0BAA2B,QAAe,IAAU,EAC/D,OAAO,OAAS,GAAM,AAAC,AAOvB,gBAAe,CAAgB,CAAE,CAC/B,GAAM,CAAE,OAAQ,CAAI,CAAE,CAAG,EACzB,GAAI,CAAC,EACH,OAAOC,EAAA,EAAO,CAEhB,GAAM,CAAE,QAAM,CAAE,OAAK,CAAE,MAAI,CAAE,OAAK,CAAE,KAAG,CAAE,QAAM,CAAE,SAAO,CAAE,CAAG,EAC7D,GAAI,AAAW,YAAX,EACF,OAAOA,EAAA,EAAO,AAEX,KAAI,CAAC,UAAU,GAClB,IAAI,CAAC,UAAU,CAAG,EAClB,IAAI,CAAC,QAAQ,CAAG,GAElB,GAAM,CAAE,iBAAe,CAAE,WAAS,CAAE,CAAG,GAAU,CAAC,EAC5C,EAASC,OAAO,WAAW,CAC/B,CACE,CAAC,uBAAwB,EAAgB,CACzC,CAAC,kBAAmB,EAAU,CAC/B,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,EAAQ,IAG/B,MAAO,QAAI,CAAC;MACV,EAAE,QAAI,IAAI,CAAC,aAAa,EAAE;;YAEpB,EAAE,QAAS,GAAQ;;;;;;eAMhB,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;;gBAKhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;wBACd,EAAE,CAAC,EAAI;gBACf,EAAE,GAAO,GAAG;;;;;;;UAOlB,CAAC,AACT,CACF,EAEAC,eAAe,MAAM,CAAC,wBAAyBH,mB"}
1
+ {"version":3,"file":"8607.464a88660a040f97.js","sources":["webpack://@mdn/fred/./components/placement-hp-main/element.css","webpack://@mdn/fred/./components/placement-hp-main/element.js"],"sourcesContent":["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, `.hp-main-placement{--hp-main-background-light:var(--color-background-primary);--hp-main-color-light:var(--color-text-primary);--hp-main-background-dark:var(--color-background-primary);--hp-main-color-dark:var(--color-text-primary);--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light));background-color:var(--hp-main-background);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.hp-main-placement{--hp-main-background:light-dark(var(--hp-main-background-light),var(--hp-main-background-dark));--hp-main-color:light-dark(var(--hp-main-color-light),var(--hp-main-color-dark))}}@supports not (color:light-dark(tan,tan)){.hp-main-placement *{--csstools-light-dark-toggle-195607df-0:var(--csstools-color-scheme--light) var(--hp-main-background-dark);--hp-main-background:var(--csstools-light-dark-toggle-195607df-0,var(--hp-main-background-light));--csstools-light-dark-toggle-195607df-1:var(--csstools-color-scheme--light) var(--hp-main-color-dark);--hp-main-color:var(--csstools-light-dark-toggle-195607df-1,var(--hp-main-color-light))}}.hp-main-placement .placement-container{column-gap:3rem;display:grid;grid-template-areas:\"nope pong note\" \"nope pong no\";grid-template-columns:auto auto auto;margin:0 auto;padding:0 1rem}@media (width <= 1441px){.hp-main-placement .placement-container{grid-template-areas:\"pong note\" \"pong no\";grid-template-columns:auto max-content;grid-template-rows:auto 2rem}}@media (width <= 769px){.hp-main-placement .placement-container{grid-template-areas:\"pong\" \"note\";grid-template-columns:auto;grid-template-rows:auto 2rem}}:is(.hp-main-placement .placement-container) .placement-link{display:flex;grid-area:pong;justify-content:center}:is(:is(.hp-main-placement .placement-container) .placement-link) img{display:block;height:auto;max-width:100%}:is(.hp-main-placement .placement-container) mdn-placement-note{grid-area:note;margin:0 0 auto auto}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html, nothing } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport \"../placement-note/element.js\";\nimport \"../placement-no/element.js\";\n\nimport { PlacementMixin } from \"../placement/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @import * as Placements from \"../placement/types.js\";\n */\n\nexport class MDNPlacementHpMain extends PlacementMixin(LitElement) {\n static styles = styles;\n\n /**\n *\n * @param {Placements.PlacementContextData} placementContext\n * @returns\n */\n renderComplete(placementContext) {\n const { hpMain: data } = placementContext;\n if (!data) {\n return nothing;\n }\n const { status, click, view, image, alt, colors, version } = data;\n if (status !== \"success\") {\n return nothing;\n }\n if (!this._viewedUrl) {\n this._viewedUrl = view;\n this._version = version;\n }\n const { backgroundColor, textColor } = colors || {};\n const styles = Object.fromEntries(\n [\n [\"--hp-main-background\", backgroundColor],\n [\"--hp-main-color\", textColor],\n ].filter(([_, v]) => Boolean(v)),\n );\n\n return html`<div\n ${ref(this._placementRef)}\n class=\"hp-main-placement\"\n style=${styleMap(styles)}\n >\n <section class=\"placement-container\">\n <a\n class=\"placement-link\"\n data-glean-id=${`pong: pong->click top-banner`}\n href=${this.clickLink(click, version)}\n target=\"_blank\"\n rel=\"sponsored\"\n >\n <img\n src=${this.imgLink(image)}\n aria-hidden=${!alt}\n alt=${alt || \"\"}\n width=\"970\"\n height=\"250\"\n />\n </a>\n <mdn-placement-note></mdn-placement-note>\n </section>\n </div>`;\n }\n}\n\ncustomElements.define(\"mdn-placement-hp-main\", MDNPlacementHpMain);\n"],"names":["MDNPlacementHpMain","n","Object","customElements"],"mappings":"gMAII,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,ysEAA0sE,GAAG,EAEtvE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,kKCOhD,IAAMA,mBAAN,MAAMA,0BAA2B,QAAe,IAAU,EAC/D,OAAO,OAAS,GAAM,AAAC,AAOvB,gBAAe,CAAgB,CAAE,CAC/B,GAAM,CAAE,OAAQ,CAAI,CAAE,CAAG,EACzB,GAAI,CAAC,EACH,OAAOC,EAAA,EAAO,CAEhB,GAAM,CAAE,QAAM,CAAE,OAAK,CAAE,MAAI,CAAE,OAAK,CAAE,KAAG,CAAE,QAAM,CAAE,SAAO,CAAE,CAAG,EAC7D,GAAI,AAAW,YAAX,EACF,OAAOA,EAAA,EAAO,AAEX,KAAI,CAAC,UAAU,GAClB,IAAI,CAAC,UAAU,CAAG,EAClB,IAAI,CAAC,QAAQ,CAAG,GAElB,GAAM,CAAE,iBAAe,CAAE,WAAS,CAAE,CAAG,GAAU,CAAC,EAC5C,EAASC,OAAO,WAAW,CAC/B,CACE,CAAC,uBAAwB,EAAgB,CACzC,CAAC,kBAAmB,EAAU,CAC/B,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,EAAQ,IAG/B,MAAO,QAAI,CAAC;MACV,EAAE,QAAI,IAAI,CAAC,aAAa,EAAE;;YAEpB,EAAE,QAAS,GAAQ;;;;;wBAKP,EAAE,+BAA+B;eAC1C,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;;gBAKhC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;wBACd,EAAE,CAAC,EAAI;gBACf,EAAE,GAAO,GAAG;;;;;;;UAOlB,CAAC,AACT,CACF,EAEAC,eAAe,MAAM,CAAC,wBAAyBH,mB"}
@@ -1,9 +1,9 @@
1
1
  export const __webpack_id__="8797";export const __webpack_ids__=["8797"];export const __webpack_modules__={76689:function(e,t,n){n.d(t,{A:()=>d});var o=n(63819),r=n(31601),a=n.n(r),c=n(76314),i=n.n(c)()(a());i.push([e.id,".placement-note{background-color:#f9f9fbd0;border:1px solid #313131;border-radius:.25rem;color:#313131;display:block;font-size:.625rem;margin:.25rem;opacity:.85;padding:0 .25rem;-webkit-text-decoration:underline;text-decoration:underline;text-transform:uppercase;width:max-content}.placement-note:focus,.placement-note:hover{opacity:unset;-webkit-text-decoration:none;text-decoration:none}",""]);let d=(0,o.AH)([i.toString()])},55772:function(e,t,n){n.r(t);var o=n(63819),r=n(86484),a=n(76689);let MDNPlacementNote=class MDNPlacementNote extends(0,r.J)(o.WF){static styles=a.A;render(){return(0,o.qy)`<a
2
2
  href="/en-US/advertising"
3
3
  class="placement-note"
4
- data-glean="pong: pong-&gt;about"
4
+ data-glean-id=${"pong: pong->about"}
5
5
  target="_blank"
6
6
  rel="noreferrer"
7
7
  >${this.l10n("placement-note")}</a
8
8
  >`}};customElements.define("mdn-placement-note",MDNPlacementNote)}};
9
- //# sourceMappingURL=8797.46790b4359b5d1cb.js.map
9
+ //# sourceMappingURL=8797.f5880b5ee2659039.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"8797.46790b4359b5d1cb.js","sources":["webpack://@mdn/fred/./components/placement-note/element.css","webpack://@mdn/fred/./components/placement-note/element.js"],"sourcesContent":["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, `.placement-note{background-color:#f9f9fbd0;border:1px solid #313131;border-radius:.25rem;color:#313131;display:block;font-size:.625rem;margin:.25rem;opacity:.85;padding:0 .25rem;-webkit-text-decoration:underline;text-decoration:underline;text-transform:uppercase;width:max-content}.placement-note:focus,.placement-note:hover{opacity:unset;-webkit-text-decoration:none;text-decoration:none}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\nclass MDNPlacementNote extends L10nMixin(LitElement) {\n static styles = styles;\n\n render() {\n return html`<a\n href=\"/en-US/advertising\"\n class=\"placement-note\"\n data-glean=\"pong: pong-&gt;about\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >${this.l10n(\"placement-note\")}</a\n >`;\n }\n}\n\ncustomElements.define(\"mdn-placement-note\", MDNPlacementNote);\n"],"names":["MDNPlacementNote","customElements"],"mappings":"gMAII,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,wYAAyY,GAAG,EAErb,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,oECFvD,IAAMA,iBAAN,MAAMA,wBAAyB,QAAU,IAAU,EACjD,OAAO,OAAS,GAAM,AAAC,AAEvB,SAAS,CACP,MAAO,QAAI,CAAC;;;;;;OAMT,EAAE,IAAI,CAAC,IAAI,CAAC,kBAAkB;KAChC,CAAC,AACJ,CACF,EAEAC,eAAe,MAAM,CAAC,qBAAsBD,iB"}
1
+ {"version":3,"file":"8797.f5880b5ee2659039.js","sources":["webpack://@mdn/fred/./components/placement-note/element.css","webpack://@mdn/fred/./components/placement-note/element.js"],"sourcesContent":["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, `.placement-note{background-color:#f9f9fbd0;border:1px solid #313131;border-radius:.25rem;color:#313131;display:block;font-size:.625rem;margin:.25rem;opacity:.85;padding:0 .25rem;-webkit-text-decoration:underline;text-decoration:underline;text-transform:uppercase;width:max-content}.placement-note:focus,.placement-note:hover{opacity:unset;-webkit-text-decoration:none;text-decoration:none}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\nclass MDNPlacementNote extends L10nMixin(LitElement) {\n static styles = styles;\n\n render() {\n return html`<a\n href=\"/en-US/advertising\"\n class=\"placement-note\"\n data-glean-id=${`pong: pong->about`}\n target=\"_blank\"\n rel=\"noreferrer\"\n >${this.l10n(\"placement-note\")}</a\n >`;\n }\n}\n\ncustomElements.define(\"mdn-placement-note\", MDNPlacementNote);\n"],"names":["MDNPlacementNote","customElements"],"mappings":"gMAII,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,wYAAyY,GAAG,EAErb,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,oECFvD,IAAMA,iBAAN,MAAMA,wBAAyB,QAAU,IAAU,EACjD,OAAO,OAAS,GAAM,AAAC,AAEvB,SAAS,CACP,MAAO,QAAI,CAAC;;;oBAGI,EAAE,oBAAoB;;;OAGnC,EAAE,IAAI,CAAC,IAAI,CAAC,kBAAkB;KAChC,CAAC,AACJ,CACF,EAEAC,eAAe,MAAM,CAAC,qBAAsBD,iB"}
@@ -1,9 +1,9 @@
1
- /*! For license information please see 9784.214845ec6d3b77e3.js.LICENSE.txt */
1
+ /*! For license information please see 9784.3f8ca449f7d36818.js.LICENSE.txt */
2
2
  export const __webpack_id__="9784";export const __webpack_ids__=["9784"];export const __webpack_modules__={68552:function(e,t,n){n.d(t,{A:()=>c});var r=n(63819),o=n(31601),i=n.n(o),a=n(76314),s=n.n(a),l=n(55196),d=s()(i());d.i(l.A),d.push([e.id,'.wrapper{display:grid;gap:1rem;grid-template-areas:"left runner";grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:100%}.wrapper section{display:flex;flex-direction:column;flex-grow:1;gap:1rem;grid-area:left}:is(.wrapper section) aside{align-items:center;border:var(--border);border-radius:.25rem;display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}:is(:is(.wrapper section) aside) h1{font-size:var(--font-size-normal);margin:0 auto 0 0}:is(:is(.wrapper section) aside) menu{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}:is(.wrapper section) details{border:var(--border);border-radius:.25rem;flex-direction:column;flex-shrink:0;overflow:hidden}[open]:is(:is(.wrapper section) details){flex-basis:0;flex-grow:1;min-height:12rem}[open]:is(:is(.wrapper section) details) mdn-play-editor{display:block}:is(:is(.wrapper section) details)::details-content{display:contents}:is(:is(.wrapper section) details) summary{cursor:pointer;height:2em;line-height:var(--font-line-ui);padding:.5em;-webkit-user-select:none;user-select:none}:is(:is(.wrapper section) details) mdn-play-editor{display:none;height:calc(100% - 2em)}.playground__runner-console:is(.wrapper section){border:var(--border);border-radius:.25rem;grid-area:runner;overflow:hidden}.playground__runner-console:is(.wrapper section) mdn-play-runner{flex-grow:1}.playground__runner-console:is(.wrapper section) .playground__console{background-color:var(--color-background-secondary);border-top:var(--border)}:is(.playground__runner-console:is(.wrapper section) .playground__console) div{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);text-align:center}:is(.playground__runner-console:is(.wrapper section) .playground__console) mdn-play-console{height:6rem}.wrapper mdn-placement-sidebar{grid-area:place;justify-self:center}@media (width <= 992px){.wrapper{display:flex;flex-direction:column}}mdn-modal section{display:flex;flex-direction:column;gap:.5rem}:is(mdn-modal section):first-child{margin-bottom:1rem}mdn-modal h2{font-size:var(--font-size-normal);font-weight:400;margin:0}mdn-modal label{display:flex;flex-direction:column;gap:.5rem}mdn-modal p{margin:0}mdn-modal.share section{align-items:center}mdn-modal.report section:last-child{flex-direction:row;justify-content:flex-end}',""]);let c=(0,r.AH)([d.toString()])},55196:function(e,t,n){n.d(t,{A:()=>s});var r=n(31601),o=n.n(r),i=n(76314),a=n.n(i)()(o());a.push([e.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}",""]);let s=a.toString()},730:function(e,t,n){n.r(t),n.d(t,{MDNLoginButton:()=>MDNLoginButton});var r=n(63819);n(99638);var o=n(86484),i=n(36728);let MDNLoginButton=class MDNLoginButton extends(0,o.J)(r.WF){static ssr=!1;get _loginUrl(){let e=location.href.replace(location.origin,""),t=new URL(i.vQ,location.origin);return t.search=new URLSearchParams({next:e}).toString(),t.toString()}render(){return(0,r.qy)`<mdn-button href=${this._loginUrl}
3
3
  >${this.l10n`Login`}</mdn-button
4
- >`}};customElements.define("mdn-login-button",MDNLoginButton)},75259:function(e,t,n){n.r(t),n.d(t,{MDNPlayground:()=>MDNPlayground});var r=n(64889),o=n(63819),i=n(69392),a=n(86484),s=n(39943),l=n(93526),d=n(68552),c=n(45842);n(99723),n(99638),n(20002),n(86129),n(75143),n(53343),n(730);let p="playground-session-code";let MDNPlayground=class MDNPlayground extends(0,a.J)(o.WF){static styles=d.A;static properties={_gistID:{state:!0}};constructor(){super(),this._permalink="",this._autoRun=!0,this._gistId=void 0}_controller=(0,i._)();_shareModal=(0,i._)();_reportModal=(0,i._)();_user=new r.YZ(this,{task:async()=>await (0,l.L)()});_format(){this._controller.value?.format()}_run(){let e=this._controller.value;e&&(e.run(),this._autoRun||(this._autoRun=!0,e.runOnChange=!0,this._storeSession()))}_share(){this._shareModal.value?.showModal()}_clear(){let e=this._controller.value;if(confirm(this.l10n`Do you really want to clear everything?`)&&e){e.clear(),this._storeSession(),this.requestUpdate();let t=new URL(location.href);t.search="",history.replaceState(void 0,"",t)}}_reset(){let e=this._controller.value;confirm(this.l10n`Do you really want to revert your changes?`)&&e&&(e.reset(),this._storeSession(),this.requestUpdate())}async _copyMarkdown(){let e=this._controller.value;if(e){let t=Object.entries(e.code).map(([e,t])=>t&&`\`\`\`${e}
4
+ >`}};customElements.define("mdn-login-button",MDNLoginButton)},75259:function(e,t,n){n.r(t),n.d(t,{MDNPlayground:()=>MDNPlayground});var r=n(64889),o=n(63819),i=n(69392),a=n(86484),s=n(39943),l=n(93526),d=n(68552),c=n(45842);n(99723),n(99638),n(20002),n(86129),n(75143),n(53343),n(730);let p="playground-session-code";let MDNPlayground=class MDNPlayground extends(0,a.J)(o.WF){static styles=d.A;static properties={_gistID:{state:!0}};constructor(){super(),this._permalink="",this._autoRun=!0,this._gistId=void 0}_controller=(0,i._)();_shareModal=(0,i._)();_reportModal=(0,i._)();_user=new r.YZ(this,{task:async()=>await (0,l.L)()});_format(){this._controller.value?.format()}_run(){let e=this._controller.value;e&&(e.run(),this._autoRun||(this._autoRun=!0,e.runOnChange=!0,this._storeSession()))}_share(){this._shareModal.value?.showModal()}_clear(){let e=this._controller.value;if(confirm(this.l10n`Do you really want to clear everything?`)&&e){e.clear(),this._autoRun=!0,this._storeSession(),this.requestUpdate();let t=new URL(location.href);t.search="",history.replaceState(void 0,"",t)}}_reset(){let e=this._controller.value;confirm(this.l10n`Do you really want to revert your changes?`)&&e&&(e.reset(),this._storeSession(),this.requestUpdate())}async _copyMarkdown(){let e=this._controller.value;if(e){let t=Object.entries(e.code).map(([e,t])=>t&&`\`\`\`${e}
5
5
  ${t}
6
- \`\`\``).filter(Boolean).join("\n\n");await navigator.clipboard.writeText(t)}}async _createPermalink(){let e=this._controller.value;if(e){let t=await fetch("/api/v1/play/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e.code)}),{id:n}=await t.json(),r=new URL(location.href);r.search=new URLSearchParams({id:n}).toString(),e.initialCode=e.code,this._permalink=r.toString(),history.replaceState(void 0,"",r),this.requestUpdate()}}async _copyPermalink(){this._permalink&&await navigator.clipboard.writeText(this._permalink)}_storeSession(){let e=this._controller.value;if(e){let{srcPrefix:t,initialCode:n,code:r}=e,o={srcPrefix:t,initialCode:n,code:r,autoRun:this._autoRun};sessionStorage.setItem(p,JSON.stringify(o))}}_loadSession(){let{srcPrefix:e,initialCode:t,code:n,autoRun:r}=u(JSON.parse(sessionStorage.getItem(p)||"{}")),o=this._controller.value;o&&(!1===r&&(this._autoRun=!1,o.runOnStart=!1,o.runOnChange=!1),o.srcPrefix=e,o.initialCode=t,o.code=n,this.requestUpdate())}async _loadFromUrl(){let e=this._controller.value;if(e){let t=new URLSearchParams(location.search),n=t.get("id"),r=t.get("state"),o=t.get("srcPrefix");n&&(this._gistId=n);let{srcPrefix:i,code:a}=await (n?this._sessionFromApi(n):r?this._sessionFromState(r):void 0)||{},s=o||i;if(void 0!==s&&void 0!==a&&(e.srcPrefix!==s||!m(e.initialCode,a))){try{if(!opener?.location?.origin||opener?.location?.origin!==location.origin)throw Error("origin doesn't match")}catch{this._autoRun=!1,e.runOnStart=!1,e.runOnChange=!1}e.srcPrefix=s,e.initialCode=a,e.code=a,this._storeSession()}this.requestUpdate()}}async _sessionFromApi(e){let t=await fetch(`/api/v1/play/${encodeURIComponent(e)}`);if(!t.ok)return void console.error(t.statusText);let n=new URL(location.href);return n.search=new URLSearchParams({id:e}).toString(),this._permalink=n.toString(),(0,s.w)("playground",{type:"load-shared"}),u(await t.json())}async _sessionFromState(e){let{state:t}=await (0,c.p)(e);return u(JSON.parse(t||"{}"))}_editorUpdate(){this._storeSession(),this.requestUpdate()}_reportOpen(){this._reportModal.value?.showModal()}_reportCancel(){this._reportModal.value?.close()}async _reportSubmit(){await fetch("/api/v1/play/flag",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:this._gistId,reason:this._reportModal.value?.querySelector("textarea")?.value})}),this._reportModal.value?.close()}connectedCallback(){super.connectedCallback(),this._user.run()}render(){let{code:e,initialCode:t}=this._controller.value??{},n=Object.values(e??{}).some(Boolean),r=Object.values(t??{}).some(Boolean),a=r&&!m(e,t);return(0,o.qy)`
6
+ \`\`\``).filter(Boolean).join("\n\n");await navigator.clipboard.writeText(t)}}async _createPermalink(){let e=this._controller.value;if(e){let t=await fetch("/api/v1/play/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e.code)}),{id:n}=await t.json(),r=new URL(location.href);r.search=new URLSearchParams({id:n}).toString(),e.initialCode=e.code,this._permalink=r.toString(),history.replaceState(void 0,"",r),this.requestUpdate()}}async _copyPermalink(){this._permalink&&await navigator.clipboard.writeText(this._permalink)}_storeSession(){let e=this._controller.value;if(e){let{srcPrefix:t,initialCode:n,code:r}=e,o={srcPrefix:t,initialCode:n,code:r,autoRun:this._autoRun};sessionStorage.setItem(p,JSON.stringify(o))}}_loadSession(){let{srcPrefix:e,initialCode:t,code:n,autoRun:r}=u(JSON.parse(sessionStorage.getItem(p)||"{}")),o=this._controller.value;o&&(!1===r&&(this._autoRun=!1,o.runOnStart=!1,o.runOnChange=!1),o.srcPrefix=e,o.initialCode=t,o.code=n,this.requestUpdate())}async _loadFromUrl(){let e=this._controller.value;if(e){let t=new URLSearchParams(location.search),n=t.get("id"),r=t.get("state"),o=t.get("srcPrefix");n&&(this._gistId=n);let{srcPrefix:i,code:a}=await (n?this._sessionFromApi(n):r?this._sessionFromState(r):void 0)||{},s=o||i;if(void 0!==s&&void 0!==a&&(e.srcPrefix!==s||!m(e.initialCode,a))){try{if(!opener?.location?.origin||opener?.location?.origin!==location.origin)throw Error("origin doesn't match")}catch{this._autoRun=!1,e.runOnStart=!1,e.runOnChange=!1}e.srcPrefix=s,e.initialCode=a,e.code=a,this._storeSession()}this.requestUpdate()}}async _sessionFromApi(e){let t=await fetch(`/api/v1/play/${encodeURIComponent(e)}`);if(!t.ok)return void console.error(t.statusText);let n=new URL(location.href);return n.search=new URLSearchParams({id:e}).toString(),this._permalink=n.toString(),(0,s.w)("play_action: load-shared"),u(await t.json())}async _sessionFromState(e){let{state:t}=await (0,c.p)(e);return u(JSON.parse(t||"{}"))}_editorUpdate(){this._storeSession(),this.requestUpdate()}_reportOpen(){this._reportModal.value?.showModal()}_reportCancel(){this._reportModal.value?.close()}async _reportSubmit(){await fetch("/api/v1/play/flag",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:this._gistId,reason:this._reportModal.value?.querySelector("textarea")?.value})}),this._reportModal.value?.close()}connectedCallback(){super.connectedCallback(),this._user.run()}render(){let{code:e,initialCode:t}=this._controller.value??{},n=Object.values(e??{}).some(Boolean),r=Object.values(t??{}).some(Boolean),a=r&&!m(e,t);return(0,o.qy)`
7
7
  <div class="wrapper">
8
8
  <mdn-play-controller
9
9
  ${(0,i.K)(this._controller)}
@@ -116,5 +116,5 @@ ${t}
116
116
  <mdn-button @click=${this._reportSubmit}>Report</mdn-button>
117
117
  </section>
118
118
  </mdn-modal>
119
- `}firstUpdated(){this._loadSession(),this._loadFromUrl()}};function u(e){return"html"in e?{srcPrefix:e.src||"",code:{html:e.html,css:e.css,js:e.js}}:"srcPrefix"in e?e:{srcPrefix:"",code:{}}}function m(e,t){return void 0===e||void 0===t?e===t:Object.keys(e).length===Object.keys(t).length&&Object.entries(e).every(([e,n])=>t[e]===n)}customElements.define("mdn-playground",MDNPlayground)},70209:function(e,t,n){n.d(t,{D:()=>a});var r=n(97160),o=n(17316),i=n(98176);let a=(0,o.u$)(class extends o.WL{constructor(){super(...arguments),this.key=r.s6}render(e,t){return this.key=e,t}update(e,[t,n]){return t!==this.key&&((0,i.mY)(e),this.key=t),n}})},39943:function(e,t,n){n.d(t,{w:()=>o});var r=n(92);function o(e,{type:t,label:n}){r.A.recordElementClick({id:e,type:t,label:n})}}};
120
- //# sourceMappingURL=9784.214845ec6d3b77e3.js.map
119
+ `}firstUpdated(){this._loadSession(),this._loadFromUrl()}};function u(e){return"html"in e?{srcPrefix:e.src||"",code:{html:e.html,css:e.css,js:e.js}}:"srcPrefix"in e?e:{srcPrefix:"",code:{}}}function m(e,t){return void 0===e||void 0===t?e===t:Object.keys(e).length===Object.keys(t).length&&Object.entries(e).every(([e,n])=>t[e]===n)}customElements.define("mdn-playground",MDNPlayground)},70209:function(e,t,n){n.d(t,{D:()=>a});var r=n(97160),o=n(17316),i=n(98176);let a=(0,o.u$)(class extends o.WL{constructor(){super(...arguments),this.key=r.s6}render(e,t){return this.key=e,t}update(e,[t,n]){return t!==this.key&&((0,i.mY)(e),this.key=t),n}})},39943:function(e,t,n){n.d(t,{w:()=>o});var r=n(92);function o(e){r.A.recordElementClick({id:e})}}};
120
+ //# sourceMappingURL=9784.3f8ca449f7d36818.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"9784.3f8ca449f7d36818.js","sources":["webpack://@mdn/fred/./components/playground/element.css","webpack://@mdn/fred/./components/global/global.css?1b68","webpack://@mdn/fred/./components/login-button/element.js","webpack://@mdn/fred/./components/playground/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/keyed.js","webpack://@mdn/fred/./utils/glean.js"],"sourcesContent":["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]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../global/global.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// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.wrapper{display:grid;gap:1rem;grid-template-areas:\"left runner\";grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:100%}.wrapper section{display:flex;flex-direction:column;flex-grow:1;gap:1rem;grid-area:left}:is(.wrapper section) aside{align-items:center;border:var(--border);border-radius:.25rem;display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}:is(:is(.wrapper section) aside) h1{font-size:var(--font-size-normal);margin:0 auto 0 0}:is(:is(.wrapper section) aside) menu{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}:is(.wrapper section) details{border:var(--border);border-radius:.25rem;flex-direction:column;flex-shrink:0;overflow:hidden}[open]:is(:is(.wrapper section) details){flex-basis:0;flex-grow:1;min-height:12rem}[open]:is(:is(.wrapper section) details) mdn-play-editor{display:block}:is(:is(.wrapper section) details)::details-content{display:contents}:is(:is(.wrapper section) details) summary{cursor:pointer;height:2em;line-height:var(--font-line-ui);padding:.5em;-webkit-user-select:none;user-select:none}:is(:is(.wrapper section) details) mdn-play-editor{display:none;height:calc(100% - 2em)}.playground__runner-console:is(.wrapper section){border:var(--border);border-radius:.25rem;grid-area:runner;overflow:hidden}.playground__runner-console:is(.wrapper section) mdn-play-runner{flex-grow:1}.playground__runner-console:is(.wrapper section) .playground__console{background-color:var(--color-background-secondary);border-top:var(--border)}:is(.playground__runner-console:is(.wrapper section) .playground__console) div{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);text-align:center}:is(.playground__runner-console:is(.wrapper section) .playground__console) mdn-play-console{height:6rem}.wrapper mdn-placement-sidebar{grid-area:place;justify-self:center}@media (width <= 992px){.wrapper{display:flex;flex-direction:column}}mdn-modal section{display:flex;flex-direction:column;gap:.5rem}:is(mdn-modal section):first-child{margin-bottom:1rem}mdn-modal h2{font-size:var(--font-size-normal);font-weight:400;margin:0}mdn-modal label{display:flex;flex-direction:column;gap:.5rem}mdn-modal p{margin:0}mdn-modal.share section{align-items:center}mdn-modal.report section:last-child{flex-direction:row;justify-content:flex-end}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\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, `*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { LitElement, html } from \"lit\";\n\nimport \"../button/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { FXA_SIGNIN_URL } from \"../env/index.js\";\n\nexport class MDNLoginButton extends L10nMixin(LitElement) {\n static ssr = false;\n\n get _loginUrl() {\n const next = location.href.replace(location.origin, \"\");\n // TODO: deal with local login\n const loginUrl = new URL(FXA_SIGNIN_URL, location.origin);\n loginUrl.search = new URLSearchParams({ next }).toString();\n return loginUrl.toString();\n }\n\n render() {\n return html`<mdn-button href=${this._loginUrl}\n >${this.l10n`Login`}</mdn-button\n >`;\n }\n}\n\ncustomElements.define(\"mdn-login-button\", MDNLoginButton);\n","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing } from \"lit\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { gleanClick } from \"../../utils/glean.js\";\nimport { globalUser } from \"../user/context.js\";\n\nimport styles from \"./element.css?lit\";\nimport { decompressFromBase64 } from \"./utils.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../button/element.js\";\nimport \"../play-editor/element.js\";\nimport \"../play-runner/element.js\";\nimport \"../play-console/element.js\";\nimport \"../modal/element.js\";\nimport \"../login-button/element.js\";\n\n/**\n * @import { MDNPlayController } from \"../play-controller/element.js\";\n * @import { MDNModal } from \"../modal/element.js\";\n * @import { Ref } from \"lit/directives/ref.js\";\n */\n\nconst SESSION_KEY = \"playground-session-code\";\n\nexport class MDNPlayground extends L10nMixin(LitElement) {\n static styles = styles;\n\n static properties = {\n _gistID: { state: true },\n };\n\n constructor() {\n super();\n this._permalink = \"\";\n this._autoRun = true;\n /** @type {string | undefined} */\n this._gistId = undefined;\n }\n\n /** @type {Ref<MDNPlayController>} */\n _controller = createRef();\n /** @type {Ref<MDNModal>} */\n _shareModal = createRef();\n /** @type {Ref<MDNModal>} */\n _reportModal = createRef();\n\n _user = new Task(this, {\n task: async () => {\n return await globalUser();\n },\n });\n\n _format() {\n this._controller.value?.format();\n }\n\n _run() {\n const controller = this._controller.value;\n if (controller) {\n controller.run();\n if (!this._autoRun) {\n this._autoRun = true;\n controller.runOnChange = true;\n this._storeSession();\n }\n }\n }\n\n _share() {\n this._shareModal.value?.showModal();\n }\n\n _clear() {\n const controller = this._controller.value;\n if (\n confirm(this.l10n`Do you really want to clear everything?`) &&\n controller\n ) {\n controller.clear();\n this._autoRun = true;\n this._storeSession();\n this.requestUpdate();\n const urlWithoutSearch = new URL(location.href);\n urlWithoutSearch.search = \"\";\n history.replaceState(undefined, \"\", urlWithoutSearch);\n }\n }\n\n _reset() {\n const controller = this._controller.value;\n if (\n confirm(this.l10n`Do you really want to revert your changes?`) &&\n controller\n ) {\n controller.reset();\n this._storeSession();\n this.requestUpdate();\n }\n }\n\n async _copyMarkdown() {\n const controller = this._controller.value;\n if (controller) {\n const markdown = Object.entries(controller.code)\n .map(\n ([lang, code]) =>\n code &&\n `${\"```\"}${lang}\n${code}\n${\"```\"}`,\n )\n .filter(Boolean)\n .join(\"\\n\\n\");\n await navigator.clipboard.writeText(markdown);\n }\n }\n\n async _createPermalink() {\n const controller = this._controller.value;\n if (controller) {\n const res = await fetch(\"/api/v1/play/\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(controller.code),\n });\n const { id } = await res.json();\n const permalink = new URL(location.href);\n permalink.search = new URLSearchParams({ id }).toString();\n\n controller.initialCode = controller.code;\n this._permalink = permalink.toString();\n history.replaceState(undefined, \"\", permalink);\n this.requestUpdate();\n }\n }\n\n async _copyPermalink() {\n if (this._permalink) {\n await navigator.clipboard.writeText(this._permalink);\n }\n }\n\n _storeSession() {\n const controller = this._controller.value;\n if (controller) {\n const { srcPrefix, initialCode, code } = controller;\n /** @type {import(\"./types.js\").PlaygroundSession} */\n const session = {\n srcPrefix,\n initialCode,\n code,\n autoRun: this._autoRun,\n };\n sessionStorage.setItem(SESSION_KEY, JSON.stringify(session));\n }\n }\n\n _loadSession() {\n const { srcPrefix, initialCode, code, autoRun } = stateToSession(\n JSON.parse(sessionStorage.getItem(SESSION_KEY) || \"{}\"),\n );\n const controller = this._controller.value;\n if (controller) {\n if (autoRun === false) {\n this._autoRun = false;\n controller.runOnStart = false;\n controller.runOnChange = false;\n }\n controller.srcPrefix = srcPrefix;\n controller.initialCode = initialCode;\n controller.code = code;\n this.requestUpdate();\n }\n }\n\n async _loadFromUrl() {\n const controller = this._controller.value;\n if (controller) {\n const params = new URLSearchParams(location.search);\n const idParam = params.get(\"id\");\n const stateParam = params.get(\"state\");\n const srcPrefixParam = params.get(\"srcPrefix\");\n\n if (idParam) {\n this._gistId = idParam;\n }\n\n const { srcPrefix: srcPrefixState, code } =\n (await (idParam\n ? this._sessionFromApi(idParam)\n : stateParam\n ? this._sessionFromState(stateParam)\n : undefined)) || {};\n\n const srcPrefix = srcPrefixParam || srcPrefixState;\n\n if (\n srcPrefix !== undefined &&\n code !== undefined &&\n (controller.srcPrefix !== srcPrefix ||\n !compareCode(controller.initialCode, code))\n ) {\n try {\n if (\n !opener?.location?.origin ||\n opener?.location?.origin !== location.origin\n ) {\n throw new Error(\"origin doesn't match\");\n }\n } catch {\n this._autoRun = false;\n controller.runOnStart = false;\n controller.runOnChange = false;\n }\n controller.srcPrefix = srcPrefix;\n controller.initialCode = code;\n controller.code = code;\n this._storeSession();\n }\n\n this.requestUpdate();\n }\n }\n\n /** @param {string} id */\n async _sessionFromApi(id) {\n const response = await fetch(`/api/v1/play/${encodeURIComponent(id)}`);\n if (!response.ok) {\n console.error(response.statusText);\n return;\n }\n\n const permalink = new URL(location.href);\n permalink.search = new URLSearchParams({ id }).toString();\n this._permalink = permalink.toString();\n\n gleanClick(\"play_action: load-shared\");\n const code = await response.json();\n return stateToSession(code);\n }\n\n /** @param {string} stateParam */\n async _sessionFromState(stateParam) {\n const { state } = await decompressFromBase64(stateParam);\n return stateToSession(JSON.parse(state || \"{}\"));\n }\n\n _editorUpdate() {\n this._storeSession();\n this.requestUpdate();\n }\n\n _reportOpen() {\n this._reportModal.value?.showModal();\n }\n\n _reportCancel() {\n this._reportModal.value?.close();\n }\n\n async _reportSubmit() {\n await fetch(\"/api/v1/play/flag\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n id: this._gistId,\n reason: this._reportModal.value?.querySelector(\"textarea\")?.value,\n }),\n });\n this._reportModal.value?.close();\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._user.run();\n }\n\n render() {\n const { code, initialCode } = this._controller.value ?? {};\n const hasCode = Object.values(code ?? {}).some(Boolean);\n const hasInitialCode = Object.values(initialCode ?? {}).some(Boolean);\n const isResettable = hasInitialCode && !compareCode(code, initialCode);\n\n return html`\n <div class=\"wrapper\">\n <mdn-play-controller\n ${ref(this._controller)}\n run-on-start\n run-on-change\n >\n <section>\n <aside>\n <h1>${this.l10n`Playground`}</h1>\n <menu>\n <mdn-button\n variant=\"secondary\"\n @click=${this._format}\n ?disabled=${!hasCode}\n >${this.l10n`Format`}</mdn-button\n >\n <mdn-button\n variant=\"secondary\"\n @click=${this._run}\n ?disabled=${!hasCode}\n >${this.l10n`Run`}</mdn-button\n >\n <mdn-button\n variant=\"secondary\"\n @click=${this._share}\n ?disabled=${!hasCode}\n >${this.l10n`Share`}</mdn-button\n >\n <mdn-button\n variant=\"secondary\"\n @click=${this._clear}\n ?disabled=${!(hasCode || isResettable)}\n >${this.l10n`Clear`}</mdn-button\n >\n ${hasInitialCode\n ? html`<mdn-button\n variant=\"secondary\"\n @click=${this._reset}\n ?disabled=${!isResettable}\n >${this.l10n`Reset`}</mdn-button\n >`\n : nothing}\n </menu>\n </aside>\n <details open>\n <summary>HTML</summary>\n <mdn-play-editor\n language=\"html\"\n @update=${this._editorUpdate}\n ></mdn-play-editor>\n </details>\n <details open>\n <summary>CSS</summary>\n <mdn-play-editor\n language=\"css\"\n @update=${this._editorUpdate}\n ></mdn-play-editor>\n </details>\n <details open>\n <summary>JAVASCRIPT</summary>\n <mdn-play-editor\n language=\"js\"\n @update=${this._editorUpdate}\n ></mdn-play-editor>\n </details>\n </section>\n <section class=\"playground__runner-console\">\n ${this._gistId\n ? html`<mdn-button @click=${this._reportOpen} variant=\"plain\">\n Seeing something inappropriate?\n </mdn-button>`\n : nothing}\n <mdn-play-runner></mdn-play-runner>\n <div class=\"playground__console\">\n <div>${this.l10n`Console`}</div>\n <mdn-play-console></mdn-play-console>\n </div>\n </section>\n </mdn-play-controller>\n </div>\n <mdn-modal ${ref(this._shareModal)} class=\"share\">\n <section>\n <h2>${this.l10n`Share Markdown`}</h2>\n <mdn-button variant=\"secondary\" @click=${this._copyMarkdown}\n >${this.l10n`Copy markdown to clipboard`}</mdn-button\n >\n </section>\n <section>\n <h2>${this.l10n`Share your code via Permalink`}</h2>\n ${this._user.render({\n initial: () => html`<mdn-login-button></mdn-login-button>`,\n pending: () => html`<mdn-login-button></mdn-login-button>`,\n complete: (user) =>\n user.isAuthenticated\n ? this._permalink && !isResettable\n ? html`\n <input .value=${this._permalink} />\n <mdn-button\n variant=\"secondary\"\n @click=${this._copyPermalink}\n >${this.l10n`Copy to clipboard`}</mdn-button\n >\n `\n : html`<mdn-button @click=${this._createPermalink}\n >${this.l10n`Create link`}</mdn-button\n >`\n : html`<mdn-login-button></mdn-login-button>`,\n })}\n </section>\n </mdn-modal>\n <mdn-modal ${ref(this._reportModal)} class=\"report\">\n <section>\n <p>Report this malicious or inappropriate shared playground.</p>\n <label>\n Can you please share some details on what's wrong with this content:\n <textarea></textarea>\n </label>\n </section>\n <section>\n <mdn-button variant=\"secondary\" @click=${this._reportCancel}\n >Cancel</mdn-button\n >\n <mdn-button @click=${this._reportSubmit}>Report</mdn-button>\n </section>\n </mdn-modal>\n `;\n }\n\n firstUpdated() {\n this._loadSession();\n this._loadFromUrl();\n }\n}\n\ncustomElements.define(\"mdn-playground\", MDNPlayground);\n\n/**\n * @param {import(\"./types.js\").PlaygroundStateParam | import(\"./types.js\").PlaygroundSession | {}} stateOrSession\n * @returns {import(\"./types.js\").PlaygroundSession}\n */\nfunction stateToSession(stateOrSession) {\n if (\"html\" in stateOrSession) {\n return {\n srcPrefix: stateOrSession.src || \"\",\n code: {\n html: stateOrSession.html,\n css: stateOrSession.css,\n js: stateOrSession.js,\n },\n };\n }\n if (\"srcPrefix\" in stateOrSession) {\n return stateOrSession;\n }\n return {\n srcPrefix: \"\",\n code: {},\n };\n}\n\n/**\n * @param {Record<string, string>} [a]\n * @param {Record<string, string>} [b]\n * @returns {boolean}\n */\nfunction compareCode(a, b) {\n return a === undefined || b === undefined\n ? a === b\n : Object.keys(a).length === Object.keys(b).length &&\n Object.entries(a).every(([k, v]) => b[k] === v);\n}\n","import{nothing as r}from\"../lit-html.js\";import{directive as t,Directive as e}from\"../directive.js\";import{setCommittedValue as s}from\"../directive-helpers.js\";\n/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const i=t(class extends e{constructor(){super(...arguments),this.key=r}render(r,t){return this.key=r,t}update(r,[t,e]){return t!==this.key&&(s(r),this.key=t),e}});export{i as keyed};\n//# sourceMappingURL=keyed.js.map\n","// @ts-expect-error \"Could not find declaration file\"\nimport GleanMetrics from \"@mozilla/glean/metrics\";\n\n/**\n * Records a click event.\n *\n * Use only if automatic click events are not an option.\n * See: https://mozilla.github.io/glean.js/automatic_instrumentation/click_events/\n *\n * @param {string} source\n */\nexport function gleanClick(source) {\n GleanMetrics.recordElementClick({\n id: source,\n });\n}\n"],"names":["MDNLoginButton","location","URL","URLSearchParams","customElements","MDNPlayground","confirm","history","Object","Boolean","navigator","fetch","JSON","sessionStorage","s","opener","Error","encodeURIComponent","console","arguments","r","t"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
- /*! For license information please see index.b9d9ebb034538241.js.LICENSE.txt */
2
- export const __webpack_id__="8410";export const __webpack_ids__=["8410"];export const __webpack_modules__={27887:function(e,t,n){n.d(t,{A:()=>p});var o=n(63819),a=n(31601),r=n.n(a),s=n(76314),i=n.n(s),l=n(4417),c=n.n(l),d=new n.U(n(34473)),u=i()(r()),m=c()(d);u.push([e.id,`*,:after,:before{box-sizing:border-box}dialog{border:0;padding:0}@media (width > 1006px){dialog{background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);border-radius:.5rem;font-size:var(--font-size-large);margin:calc(var(--sticky-header-height) + 1rem) auto 1rem;max-height:calc(100% - var(--sticky-header-height) - 2rem);width:calc(var(--layout-content-max) + 1rem)}dialog::backdrop{--csstools-light-dark-toggle-dee8eb9e-0:var(--csstools-color-scheme--light) var(--color-black-alpha-75);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--csstools-light-dark-toggle-dee8eb9e-0,var(--color-white-alpha-75))}@supports (color:light-dark(red,red)){dialog::backdrop{background-color:light-dark(var(--color-white-alpha-75),var(--color-black-alpha-75))}}}@media (width <= 1006px){dialog{font-size:var(--font-size-normal);height:100%;margin:0;max-height:100%;max-width:100%;width:100%}}dialog[open]{display:grid;grid-template-areas:"search close" "progress progress" "results results";grid-template-columns:1fr min-content;grid-template-rows:var(--navigation-height) min-content min-content}progress{grid-area:progress;margin:0 1rem .5rem}@media (width <= 1006px){progress{margin-inline:.3rem}}.close{font-size:1.37rem;grid-area:close}@media (width > 1006px){.close{display:none}}form{display:grid;gap:.5rem;grid-area:search;grid-template-columns:min-content 1fr;padding:1rem;place-items:center}@media (width <= 1006px){form{align-self:center;background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);border-radius:.5rem;margin-left:.3rem;padding:.5rem}}form:before{background-color:var(--color-border-secondary);content:"";height:1em;-webkit-mask-image:url(${m});mask-image:url(${m});-webkit-mask-size:contain;mask-size:contain;width:1em}input{background-color:initial;border:none;font-size:inherit;margin:0;outline:none;padding:0;width:100%}input::placeholder{color:var(--color-text-secondary)}ul{grid-area:results;margin:0;overflow:auto;overscroll-behavior:contain;padding:0}ul:has(li){border-top:1px solid var(--color-border-primary)}li[data-selected]{background:var(--color-background-blue);border-color:var(--color-blue-50)}li{border-inline-start:2px solid #0000;list-style-type:none}li:not([data-selected]):hover{background-color:var(--color-background-secondary)}li>*{padding:.5rem 1.5rem;width:100%}a{color:var(--color-link-normal);display:grid;-webkit-text-decoration:none;text-decoration:none}a:visited{color:var(--color-link-visited)}.slug{color:var(--color-text-secondary);font-size:var(--font-size-small)}mark{background-color:var(--color-background-yellow);color:var(--color-text-primary)}`,""]);let p=(0,o.AH)([u.toString()])},37940:function(e,t,n){n.d(t,{A:()=>a});var o=n(63819);let a=(0,o.JW)`<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="M18 6 6 18M6 6l12 12"/></svg>`},47479:function(e,t,n){var o={"./code-example/element.js":["69208","3945","9963","7627","303","993","3187"],"./dropdown/element.js":["1783","220","7948"],"./live-sample-result/element.js":["4225","3945","8427","9963","9478","9914","7627","6480"],"./observatory-tests-and-scores/element.js":["37538","1231"],"./play-runner/element.js":["86129","3945","9478","9914","9696"],"./search-button/element.js":["69817","2002"],"./survey/element.js":["6674","3945","9963","3279"],"./ix-tab-wrapper/element.js":["56259","7072"],"./placement-sidebar/element.js":["43236","3945","8427","288","8797","2885","3733"],"./placement-hp-main/element.js":["9714","3945","8427","288","8797","2885","8607"],"./toggle-sidebar/element.js":["74540","9963","2860"],"./user-menu/element.js":["5265","9963","5124","1274"],"./interactive-example/element.js":["51851","3945","9379","9804","490","5745","2192","2936","6372","5123","9378","9963","9478","9914","3292","9679","7627","6536","303","4091","993","7072","3122","6040"],"./copy-button/element.js":["89842","9963","303","806"],"./observatory-comparison-table/element.js":["30077","7221","606"],"./sidebar-filter/element.js":["525","5534"],"./issues-table/element.js":["91423","3092"],"./scrim-inline/element.js":["1826","8427","2319"],"./switch/element.js":["89134","1363"],"./collection-save-button/element.js":["30931","9963","2190","1648"],"./contributor-list/element.js":["60642","479"],"./button/element.js":["99638","9963","5568"],"./homepage-search/element.js":["75509","1158"],"./modal/element.js":["53343","9963","2190"],"./color-theme/element.js":["23485","220","3200"],"./about-team-member/element.js":["7260","4781"],"./content-feedback/element.js":["21672","9963","603"],"./play-console/element.js":["75143","3292"],"./ix-tab/element.js":["11865","4091","3122"],"./observatory-header-link/element.js":["82767","7221","6452"],"./curriculum-tabs/element.js":["85804","3213"],"./placement-bottom/element.js":["64047","3945","8427","288","8797","2885","8036"],"./image-history/element.js":["69954","9935"],"./not-found/element.js":["11942","495","667"],"./placement-note/element.js":["55772","8797"],"./compat-table-lazy/element.js":["18526","5124","2308","451"],"./site-search/element.js":["59288","9963","9035"],"./placement-no/element.js":["10787","288"],"./play-controller/element.js":["99723","6536"],"./placement-top/element.js":["72135","3945","8427","288","8797","2885","3132"],"./observatory-form/element.js":["92691","3945","9963","8998","370"],"./observatory-results/element.js":["85324","9963","7221","220","8998","606","5019","6452","14","9837"],"./about-tabs/element.js":["49410","9519"],"./observatory-human-duration/element.js":["22061","7221","14"],"./playground/element.js":["75259","3945","9379","9804","490","5745","2192","2936","6372","5123","9963","9478","9914","3292","9679","6536","2190","9784"],"./ix-tab-panel/element.js":["20358","4091"],"./play-editor/element.js":["20002","9379","9804","490","5745","2192","2936","6372","5123","9478","9679"],"./themed-image/element.js":["10421","7462"],"./writer-open-editor/element.js":["91398","9963","8793"],"./progress-bar/element.js":["73589","8998"],"./compat-table/element.js":["30191","5124","2308"],"./login-button/element.js":["730","9963","8093"],"./observatory-rescan-button/element.js":["81512","9963","5019","7789"],"./language-always-redirect-button/element.js":["10860","4334","7741"],"./language-switcher/element.js":["82102","220","1363","495","4334","6465"],"./search-modal/element.js":["49818"],"./writer-reload/element.js":["7589","5446"]};function a(e){if(!n.o(o,e))return Promise.resolve().then(function(){var t=Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t});var t=o[e],a=t[0];return Promise.all(t.slice(1).map(n.e)).then(function(){return n(a)})}a.keys=()=>Object.keys(o),a.id=47479,e.exports=a},34473:function(e,t,n){e.exports=n.p+"search.5dd31cbeea7d1af9.svg"},36728:function(e,t,n){n.d(t,{i7:()=>f,iW:()=>y,tf:()=>l,I:()=>d,mR:()=>u,_0:()=>h,Q:()=>v,sR:()=>c,vQ:()=>m,kv:()=>p,g_:()=>g,QD:()=>b});let o=[],a=r("RUNTIME_ENV",!0);function r(e,t,n){try{return!!JSON.parse(i(e,n)||JSON.stringify(t))}catch{return t}}function s(e,t,n){let o=i(e,n),a=o?Number.parseInt(o,10):t;return Number.isNaN(a)?t:a}function i(e,t={}){let{runtime:n}={runtime:!1,...t},r=`FRED_${e}`;return n&&a?(o.push(r),globalThis.process?.env[r]||i(e)):({FRED_RUNTIME_ENV:"true",FRED_PLAYGROUND_LOCAL:"false",FRED_LEGACY:"true"})[r]}let l=i("PLAYGROUND_BASE_HOST",void 0)||"mdnplay.dev",c=r("PLAYGROUND_LOCAL",!1,{runtime:!0}),d=s("PORT",3e3,{runtime:!0}),u=s("PLAYGROUND_PORT",3001,{runtime:!0}),m=i("FXA_SIGNIN_URL",void 0)||"/users/fxa/login/authenticate/",p=i("FXA_SIGNOUT_URL",void 0)||"/users/fxa/login/logout/",h=r("GLEAN_ENABLED",!1),g=i("GLEAN_CHANNEL",void 0)||"dev",f=r("GLEAN_DEBUG",!1);r("ROBOTS_GLOBAL_ALLOW",!0);let b=r("WRITER_MODE",!1,{runtime:!0}),y=i("BCD_BASE_URL",void 0)||"https://bcd.developer.mozilla.org",v=i("OBSERVATORY_API_URL",void 0)||"https://observatory-api.mdn.mozilla.net"},99217:function(){let e=document.querySelector('[aria-controls="navigation__popup"]'),t=document.querySelector(".navigation");e instanceof HTMLElement&&t instanceof HTMLElement&&e.addEventListener("click",()=>{let n=("true"!==t.dataset.open).toString();t.dataset.open=n,e.setAttribute("aria-expanded",n)})},49818:function(e,t,n){n.r(t),n.d(t,{MDNSearchModal:()=>MDNSearchModal,splitQuery:()=>c});var o=n(64889),a=n(63819),r=n(86484),s=n(90528),i=n(37940),l=n(27887);let MDNSearchModal=class MDNSearchModal extends(0,r.J)(a.WF){static styles=l.A;static properties={_index:{state:!0},_query:{state:!0},_selected:{state:!0},_shiftFocus:{state:!0}};constructor(){super(),this._index=void 0,this._query="",this._selected=0,this._shiftFocus=!1}async _loadIndex(){this._index||(this._index=this._fetchIndex())}async _fetchIndex(){let e=await fetch(`/${this.locale}/search-index.json`),t=await e.json();return{flex:t.map(({title:e,url:t},n)=>({index:n,title:e.toLowerCase(),slugTail:t.split("/").pop()?.toLowerCase()||""})),items:t}}showModal(){this._loadIndex(),this.shadowRoot?.querySelector("dialog")?.showModal(),this.shadowRoot?.querySelector("input")?.select()}_input({target:e}){e instanceof HTMLInputElement&&(this._query=e.value)}_keydown(e){switch(e.key){case"ArrowUp":e.preventDefault(),this._select(this._selected-1);break;case"ArrowDown":e.preventDefault(),this._select(this._selected+1);break;case"Enter":{let{ctrlKey:t,shiftKey:n,altKey:o,metaKey:a}=e,r=this._getSelectedItem();r instanceof HTMLElement&&(e.preventDefault(),r.dispatchEvent(new MouseEvent("click",{bubbles:!0,ctrlKey:t,shiftKey:n,altKey:o,metaKey:a})));break}default:return}}_getSelectedItem(){return this.shadowRoot?.querySelector("[data-selected] a")??null}_select(e){let t=(this._queryIndex.value?.length||0)+1,n=e%t;this._selected=n<0?t+e:n,setTimeout(()=>{let e=this._getSelectedItem();e instanceof HTMLElement&&e.scrollIntoView({behavior:"smooth",block:"nearest"})},0)}_submit(e){e.preventDefault();let t=this._getSelectedItem();t instanceof HTMLElement&&t.click()}_focus({target:e}){if(e instanceof HTMLElement){let t=e.closest("[data-result]");if(t instanceof HTMLElement){let e=Number.parseInt(t.dataset.result||"NaN",10);Number.isNaN(e)||(this._selected=e,this._shiftFocus=!0)}else this._shiftFocus=!1}}_globalKeydown(e){let t=e.composedPath()?.[0]||e.target;if(t instanceof HTMLElement&&(["TEXTAREA","INPUT"].includes(t.tagName)||t.isContentEditable))return;let n=globalThis.getSelection()?.toString(),o=e.key,a=e.ctrlKey||e.metaKey,r="k"===o&&a&&!e.shiftKey;("/"===o&&!a||r)&&(e.preventDefault(),this.showModal(),n&&(this._query=n))}_queryIndex=new o.YZ(this,{args:()=>[this._index,this._query],task:async([e,t])=>{if(e&&t){var n=t,o=await e;let a=n.toLowerCase().trim(),r=c(n);return o.flex.filter(({title:e})=>r.every(t=>e.includes(t))).map(({index:e,title:t,slugTail:n})=>[Number([t,n].includes(a)),e]).sort(([e],[t])=>t-e).map(([e,t])=>t).slice(0,10).map(e=>e&&(o.items||[])[e]).filter(Boolean)}}});_close(){this.shadowRoot?.querySelector("dialog")?.close()}connectedCallback(){super.connectedCallback(),this._globalKeydown=this._globalKeydown.bind(this),document.addEventListener("keydown",this._globalKeydown),this._loadIndex=this._loadIndex.bind(this),this.renderRoot.addEventListener("mouseover",this._loadIndex)}disconnectedCallback(){super.disconnectedCallback(),this.renderRoot.removeEventListener("mouseover",this._loadIndex),document.removeEventListener("keydown",this._globalKeydown)}_renderLoadingSearchIndex(){return(0,a.qy)`<progress
1
+ /*! For license information please see index.881056601848b5c3.js.LICENSE.txt */
2
+ export const __webpack_id__="8410";export const __webpack_ids__=["8410"];export const __webpack_modules__={27887:function(e,t,n){n.d(t,{A:()=>p});var o=n(63819),r=n(31601),a=n.n(r),s=n(76314),i=n.n(s),l=n(4417),c=n.n(l),d=new n.U(n(34473)),u=i()(a()),m=c()(d);u.push([e.id,`*,:after,:before{box-sizing:border-box}dialog{border:0;padding:0}@media (width > 1006px){dialog{background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);border-radius:.5rem;font-size:var(--font-size-large);margin:calc(var(--sticky-header-height) + 1rem) auto 1rem;max-height:calc(100% - var(--sticky-header-height) - 2rem);width:calc(var(--layout-content-max) + 1rem)}dialog::backdrop{--csstools-light-dark-toggle-dee8eb9e-0:var(--csstools-color-scheme--light) var(--color-black-alpha-75);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--csstools-light-dark-toggle-dee8eb9e-0,var(--color-white-alpha-75))}@supports (color:light-dark(red,red)){dialog::backdrop{background-color:light-dark(var(--color-white-alpha-75),var(--color-black-alpha-75))}}}@media (width <= 1006px){dialog{font-size:var(--font-size-normal);height:100%;margin:0;max-height:100%;max-width:100%;width:100%}}dialog[open]{display:grid;grid-template-areas:"search close" "progress progress" "results results";grid-template-columns:1fr min-content;grid-template-rows:var(--navigation-height) min-content min-content}progress{grid-area:progress;margin:0 1rem .5rem}@media (width <= 1006px){progress{margin-inline:.3rem}}.close{font-size:1.37rem;grid-area:close}@media (width > 1006px){.close{display:none}}form{display:grid;gap:.5rem;grid-area:search;grid-template-columns:min-content 1fr;padding:1rem;place-items:center}@media (width <= 1006px){form{align-self:center;background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);border-radius:.5rem;margin-left:.3rem;padding:.5rem}}form:before{background-color:var(--color-border-secondary);content:"";height:1em;-webkit-mask-image:url(${m});mask-image:url(${m});-webkit-mask-size:contain;mask-size:contain;width:1em}input{background-color:initial;border:none;font-size:inherit;margin:0;outline:none;padding:0;width:100%}input::placeholder{color:var(--color-text-secondary)}ul{grid-area:results;margin:0;overflow:auto;overscroll-behavior:contain;padding:0}ul:has(li){border-top:1px solid var(--color-border-primary)}li[data-selected]{background:var(--color-background-blue);border-color:var(--color-blue-50)}li{border-inline-start:2px solid #0000;list-style-type:none}li:not([data-selected]):hover{background-color:var(--color-background-secondary)}li>*{padding:.5rem 1.5rem;width:100%}a{color:var(--color-link-normal);display:grid;-webkit-text-decoration:none;text-decoration:none}a:visited{color:var(--color-link-visited)}.slug{color:var(--color-text-secondary);font-size:var(--font-size-small)}mark{background-color:var(--color-background-yellow);color:var(--color-text-primary)}`,""]);let p=(0,o.AH)([u.toString()])},37940:function(e,t,n){n.d(t,{A:()=>r});var o=n(63819);let r=(0,o.JW)`<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="M18 6 6 18M6 6l12 12"/></svg>`},47479:function(e,t,n){var o={"./code-example/element.js":["69208","3945","9963","7627","303","993","3187"],"./dropdown/element.js":["1783","220","7948"],"./live-sample-result/element.js":["4225","3945","8427","9963","9478","9914","7627","6480"],"./observatory-tests-and-scores/element.js":["37538","1231"],"./play-runner/element.js":["86129","3945","9478","9914","9696"],"./search-button/element.js":["69817","2002"],"./survey/element.js":["6674","3945","9963","3279"],"./ix-tab-wrapper/element.js":["56259","7072"],"./placement-sidebar/element.js":["43236","3945","8427","288","8797","2885","3733"],"./placement-hp-main/element.js":["9714","3945","8427","288","8797","2885","8607"],"./toggle-sidebar/element.js":["74540","9963","2860"],"./user-menu/element.js":["5265","9963","5124","1274"],"./interactive-example/element.js":["51851","3945","9379","9804","490","5745","2192","2936","6372","5123","9378","9963","9478","9914","3292","9679","7627","6536","303","4091","993","7072","3122","6040"],"./copy-button/element.js":["89842","9963","303","806"],"./observatory-comparison-table/element.js":["30077","7221","606"],"./sidebar-filter/element.js":["525","5534"],"./issues-table/element.js":["91423","3092"],"./scrim-inline/element.js":["1826","8427","2319"],"./switch/element.js":["89134","1363"],"./collection-save-button/element.js":["30931","9963","2190","1648"],"./contributor-list/element.js":["60642","479"],"./button/element.js":["99638","9963","5568"],"./homepage-search/element.js":["75509","1158"],"./modal/element.js":["53343","9963","2190"],"./color-theme/element.js":["23485","220","3200"],"./about-team-member/element.js":["7260","4781"],"./content-feedback/element.js":["21672","9963","603"],"./play-console/element.js":["75143","3292"],"./ix-tab/element.js":["11865","4091","3122"],"./observatory-header-link/element.js":["82767","7221","6452"],"./curriculum-tabs/element.js":["85804","3213"],"./placement-bottom/element.js":["64047","3945","8427","288","8797","2885","8036"],"./image-history/element.js":["69954","9935"],"./not-found/element.js":["11942","495","667"],"./placement-note/element.js":["55772","8797"],"./compat-table-lazy/element.js":["18526","5124","2308","451"],"./site-search/element.js":["59288","9963","9035"],"./placement-no/element.js":["10787","288"],"./play-controller/element.js":["99723","6536"],"./placement-top/element.js":["72135","3945","8427","288","8797","2885","3132"],"./observatory-form/element.js":["92691","3945","9963","8998","370"],"./observatory-results/element.js":["85324","9963","7221","220","8998","606","5019","6452","14","9837"],"./about-tabs/element.js":["49410","9519"],"./observatory-human-duration/element.js":["22061","7221","14"],"./playground/element.js":["75259","3945","9379","9804","490","5745","2192","2936","6372","5123","9963","9478","9914","3292","9679","6536","2190","9784"],"./ix-tab-panel/element.js":["20358","4091"],"./play-editor/element.js":["20002","9379","9804","490","5745","2192","2936","6372","5123","9478","9679"],"./themed-image/element.js":["10421","7462"],"./writer-open-editor/element.js":["91398","9963","8793"],"./progress-bar/element.js":["73589","8998"],"./compat-table/element.js":["30191","5124","2308"],"./login-button/element.js":["730","9963","8093"],"./observatory-rescan-button/element.js":["81512","9963","5019","7789"],"./language-always-redirect-button/element.js":["10860","4334","7741"],"./language-switcher/element.js":["82102","220","1363","495","4334","6465"],"./search-modal/element.js":["49818"],"./writer-reload/element.js":["7589","5446"]};function r(e){if(!n.o(o,e))return Promise.resolve().then(function(){var t=Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t});var t=o[e],r=t[0];return Promise.all(t.slice(1).map(n.e)).then(function(){return n(r)})}r.keys=()=>Object.keys(o),r.id=47479,e.exports=r},34473:function(e,t,n){e.exports=n.p+"search.5dd31cbeea7d1af9.svg"},36728:function(e,t,n){n.d(t,{i7:()=>f,iW:()=>y,tf:()=>l,I:()=>d,mR:()=>u,_0:()=>h,Q:()=>v,sR:()=>c,vQ:()=>m,kv:()=>p,g_:()=>g,QD:()=>b});let o=[],r=a("RUNTIME_ENV",!0);function a(e,t,n){try{return!!JSON.parse(i(e,n)||JSON.stringify(t))}catch{return t}}function s(e,t,n){let o=i(e,n),r=o?Number.parseInt(o,10):t;return Number.isNaN(r)?t:r}function i(e,t={}){let{runtime:n}={runtime:!1,...t},a=`FRED_${e}`;return n&&r?(o.push(a),globalThis.process?.env[a]||i(e)):({FRED_RUNTIME_ENV:"true",FRED_PLAYGROUND_LOCAL:"false",FRED_LEGACY:"true"})[a]}let l=i("PLAYGROUND_BASE_HOST",void 0)||"mdnplay.dev",c=a("PLAYGROUND_LOCAL",!1,{runtime:!0}),d=s("PORT",3e3,{runtime:!0}),u=s("PLAYGROUND_PORT",3001,{runtime:!0}),m=i("FXA_SIGNIN_URL",void 0)||"/users/fxa/login/authenticate/",p=i("FXA_SIGNOUT_URL",void 0)||"/users/fxa/login/logout/",h=a("GLEAN_ENABLED",!1),g=i("GLEAN_CHANNEL",void 0)||"dev",f=a("GLEAN_DEBUG",!1);a("ROBOTS_GLOBAL_ALLOW",!0);let b=a("WRITER_MODE",!1,{runtime:!0}),y=i("BCD_BASE_URL",void 0)||"https://bcd.developer.mozilla.org",v=i("OBSERVATORY_API_URL",void 0)||"https://observatory-api.mdn.mozilla.net"},99217:function(){let e=document.querySelector('[aria-controls="navigation__popup"]'),t=document.querySelector(".navigation");e instanceof HTMLElement&&t instanceof HTMLElement&&e.addEventListener("click",()=>{let n=("true"!==t.dataset.open).toString();t.dataset.open=n,e.setAttribute("aria-expanded",n)})},49818:function(e,t,n){n.r(t),n.d(t,{MDNSearchModal:()=>MDNSearchModal,splitQuery:()=>c});var o=n(64889),r=n(63819),a=n(86484),s=n(90528),i=n(37940),l=n(27887);let MDNSearchModal=class MDNSearchModal extends(0,a.J)(r.WF){static styles=l.A;static properties={_index:{state:!0},_query:{state:!0},_selected:{state:!0},_shiftFocus:{state:!0}};constructor(){super(),this._index=void 0,this._query="",this._selected=0,this._shiftFocus=!1}async _loadIndex(){this._index||(this._index=this._fetchIndex())}async _fetchIndex(){let e=await fetch(`/${this.locale}/search-index.json`),t=await e.json();return{flex:t.map(({title:e,url:t},n)=>({index:n,title:e.toLowerCase(),slugTail:t.split("/").pop()?.toLowerCase()||""})),items:t}}showModal(){this._loadIndex(),this.shadowRoot?.querySelector("dialog")?.showModal(),this.shadowRoot?.querySelector("input")?.select()}_input({target:e}){e instanceof HTMLInputElement&&(this._query=e.value)}_keydown(e){switch(e.key){case"ArrowUp":e.preventDefault(),this._select(this._selected-1);break;case"ArrowDown":e.preventDefault(),this._select(this._selected+1);break;case"Enter":{let{ctrlKey:t,shiftKey:n,altKey:o,metaKey:r}=e,a=this._getSelectedItem();a instanceof HTMLElement&&(e.preventDefault(),a.dispatchEvent(new MouseEvent("click",{bubbles:!0,ctrlKey:t,shiftKey:n,altKey:o,metaKey:r})));break}default:return}}_getSelectedItem(){return this.shadowRoot?.querySelector("[data-selected] a")??null}_select(e){let t=(this._queryIndex.value?.length||0)+1,n=e%t;this._selected=n<0?t+e:n,setTimeout(()=>{let e=this._getSelectedItem();e instanceof HTMLElement&&e.scrollIntoView({behavior:"smooth",block:"nearest"})},0)}_submit(e){e.preventDefault();let t=this._getSelectedItem();t instanceof HTMLElement&&t.click()}_focus({target:e}){if(e instanceof HTMLElement){let t=e.closest("[data-result]");if(t instanceof HTMLElement){let e=Number.parseInt(t.dataset.result||"NaN",10);Number.isNaN(e)||(this._selected=e,this._shiftFocus=!0)}else this._shiftFocus=!1}}_globalKeydown(e){let t=e.composedPath()?.[0]||e.target;if(t instanceof HTMLElement&&(["TEXTAREA","INPUT"].includes(t.tagName)||t.isContentEditable))return;let n=globalThis.getSelection()?.toString(),o=e.key,r=e.ctrlKey||e.metaKey,a="k"===o&&r&&!e.shiftKey;("/"===o&&!r||a)&&(e.preventDefault(),this.showModal(),n&&(this._query=n))}_queryIndex=new o.YZ(this,{args:()=>[this._index,this._query],task:async([e,t])=>{if(e&&t){var n=t,o=await e;let r=n.toLowerCase().trim(),a=c(n);return o.flex.filter(({title:e})=>a.every(t=>e.includes(t))).map(({index:e,title:t,slugTail:n})=>[Number([t,n].includes(r)),e]).sort(([e],[t])=>t-e).map(([e,t])=>t).slice(0,10).map(e=>e&&(o.items||[])[e]).filter(Boolean)}}});_close(){this.shadowRoot?.querySelector("dialog")?.close()}connectedCallback(){super.connectedCallback(),this._globalKeydown=this._globalKeydown.bind(this),document.addEventListener("keydown",this._globalKeydown),this._loadIndex=this._loadIndex.bind(this),this.renderRoot.addEventListener("mouseover",this._loadIndex)}disconnectedCallback(){super.disconnectedCallback(),this.renderRoot.removeEventListener("mouseover",this._loadIndex),document.removeEventListener("keydown",this._globalKeydown)}_renderLoadingSearchIndex(){return(0,r.qy)`<progress
3
3
  aria-label=${this.l10n`Loading search index…`}
4
- ></progress>`}render(){let e=this._queryIndex.value?.length||0;return(0,a.qy)`
4
+ ></progress>`}render(){let e=this._queryIndex.value?.length||0;return(0,r.qy)`
5
5
  <dialog @keydown=${this._keydown} @focusin=${this._focus} closedby="any">
6
6
  <form
7
7
  method="get"
@@ -28,19 +28,19 @@ export const __webpack_id__="8410";export const __webpack_ids__=["8410"];export
28
28
  >
29
29
  ${this._queryIndex.render({initial:this._renderLoadingSearchIndex.bind(this),pending:this._renderLoadingSearchIndex.bind(this)})}
30
30
  <ul>
31
- ${this._queryIndex.render({complete:e=>e?.map(({title:e,url:t},n)=>(0,a.qy)`
31
+ ${this._queryIndex.render({complete:e=>e?.map(({title:e,url:t},n)=>(0,r.qy)`
32
32
  <li ?data-selected=${this._selected===n} data-result=${n}>
33
33
  <a href=${t}
34
34
  ><span class="slug"
35
35
  >${(0,s.o)(t,this.locale)}</span
36
36
  >
37
37
  <span class="title"
38
- >${(function(e,t){let n=c(t),o=n.map(e=>e.replaceAll(/[.*+?^${}()|[\]\\]/g,String.raw`\$&`)).map(e=>`(${e})`).join("|");return e.split(RegExp(o,"gi")).filter(Boolean).map(e=>n.includes(e.toLowerCase())?(0,a.qy)`<mark>${e}</mark>`:e)})(e,this._query)}</span
38
+ >${(function(e,t){let n=c(t),o=n.map(e=>e.replaceAll(/[.*+?^${}()|[\]\\]/g,String.raw`\$&`)).map(e=>`(${e})`).join("|");return e.split(RegExp(o,"gi")).filter(Boolean).map(e=>n.includes(e.toLowerCase())?(0,r.qy)`<mark>${e}</mark>`:e)})(e,this._query)}</span
39
39
  ></a
40
40
  >
41
41
  </li>
42
42
  `)})}
43
- ${this._query?(0,a.qy)`<li
43
+ ${this._query?(0,r.qy)`<li
44
44
  ?data-selected=${this._selected===e}
45
45
  data-result=${e}
46
46
  >
@@ -50,10 +50,10 @@ export const __webpack_id__="8410";export const __webpack_ids__=["8410"];export
50
50
  >${this.l10n.raw({id:"search-modal-site-search",args:{query:this._query},elements:{query:{tag:"code"}}})}</span
51
51
  ></a
52
52
  >
53
- </li>`:a.s6}
53
+ </li>`:r.s6}
54
54
  </ul>
55
55
  </dialog>
56
- `}updated(){if(this._shiftFocus){let e=this._getSelectedItem();e instanceof HTMLElement&&e.focus()}}};function c(e){return(e=e.trim().toLowerCase()).startsWith(".")||e.endsWith(".")?e.split(/[ ,]+/):e.split(/[ ,.]+/)}customElements.define("mdn-search-modal",MDNSearchModal)},93526:function(e,t,n){let o;n.d(t,{L:()=>i});var a=n(36728);let r={country:"United States",country_iso:"US"},s={username:null,isAuthenticated:!1,avatarUrl:null,isSubscriber:!1,subscriptionType:null,email:null,geo:r,settings:null};function i(){return a.QD?new Promise(()=>{}):(o||(o=l().catch(e=>(console.error(e),s))),o)}async function l(){let e=await fetch("/api/v1/whoami");if(!e.ok)throw Error(e.statusText);try{let t=await e.json(),n=t?.settings?{aiHelpHistory:"boolean"==typeof t.settings?.ai_help_history?t.settings.ai_help_history:null,noAds:t.settings?.no_ads??null}:s.settings;return c.noAds=n?.noAds||!1,{username:t.username??s.username,isAuthenticated:t.is_authenticated??s.isAuthenticated,avatarUrl:t.avatar_url??s.avatarUrl,isSubscriber:t.is_subscriber??s.isSubscriber,subscriptionType:"core"===t.subscription_type?"mdn_core":t.subscription_type??s.subscriptionType,email:t.email??s.email,geo:{country:(t.geo&&t.geo.country)??r.country,country_iso:(t.geo&&t.geo.country_iso)??r.country_iso},settings:n}}catch{throw Error(e.statusText)}}let c={set noAds(value){value?globalThis.localStorage.setItem("nop","yes"):globalThis.localStorage.removeItem("nop")},get noAds(){return globalThis.localStorage?.getItem?.("nop")==="yes"}}},31051:function(e,t,n){n.a(e,async function(e,t){try{n(4591),n(68069),n(73013),n(23929),n(64989),n(64531),n(99217),n(41600);var o=n(42732),a=n(43531);n(7461);var r=n(99229),s=e([o,a,r]);[o,a,r]=s.then?(await s)():s,t()}catch(e){t(e)}})},42732:function(e,t,n){n.a(e,async function(e,t){try{for(let e of document.querySelectorAll('div.code-example pre:not(.hidden):not([class*="live-sample"]):not([class*="interactive-example"])')){let{upgradePre:t}=await Promise.all([n.e("3945"),n.e("9963"),n.e("7627"),n.e("303"),n.e("993"),n.e("3187")]).then(n.bind(n,69208));t(e)}t()}catch(e){t(e)}},1)},23929:function(){"closedBy"in HTMLDialogElement.prototype||addEventListener("click",e=>{let t=e.composedPath()[0];if(t instanceof HTMLDialogElement&&"any"===t.getAttribute("closedby")){let n=t.getBoundingClientRect(),{clientX:o,clientY:a}=e;n.top<=a&&a<=n.bottom&&n.left<=o&&o<=n.right||t.close()}})},73013:function(e,t,n){var o=n(32890),a=n(36728);let r=!document.cookie.split("; ").includes("moz-1st-party-data-opt-out=true")&&a._0;a.i7&&(o.Ay.setDebugViewTag("mdn-dev"),o.Ay.setLogPings(!0)),o.Ay.initialize("mdn-fred",r,{enableAutoPageLoadEvents:!0,enableAutoElementClickEvents:!0,channel:a.g_})},43531:function(e,t,n){n.a(e,async function(e,t){try{for(let e of document.querySelectorAll("iframe[data-live-id]"))if(e instanceof HTMLIFrameElement){let{liveId:t,livePath:o}=e.dataset;if(t){let a={},r=[],s=t.replaceAll(".",String.raw`\.`);for(let e of document.querySelectorAll(`.live-sample___${s}, .live-sample---${s}`)){let{MDNCodeExample:t,upgradePre:o}=await Promise.all([n.e("3945"),n.e("9963"),n.e("7627"),n.e("303"),n.e("993"),n.e("3187")]).then(n.bind(n,69208)),s=e instanceof t?e:o(e);if(s){r.push(s);let{language:e,code:t}=s;a[e]?a[e]+=t:a[e]=t}}await Promise.all([n.e("3945"),n.e("8427"),n.e("9963"),n.e("9478"),n.e("9914"),n.e("7627"),n.e("6480")]).then(n.bind(n,4225));let i=document.createElement("mdn-live-sample-result");for(let n of(i.liveId=t,i.code=a,i.srcPrefix=o,i.allow=e.allow||void 0,i.sandbox=e.sandbox.toString(),i.height=e.height,e.closest(".code-example")?.replaceWith(i),r))n.liveSample||=i}}t()}catch(e){t(e)}},1)},64989:function(e,t,n){let o=new Set;for(let e of document.querySelectorAll("*")){let t=e.tagName.toLowerCase();if(t.startsWith("mdn-")||"interactive-example"===t){let e=t.replace("mdn-","");o.has(e)||(o.add(e),n(47479)(`./${e}/element.js`).catch(t=>{console.error(`couldn't load code for <${e}>: does the element's code not match the naming schema?`,t)}))}}},64531:function(){let e=document.querySelector(".left-sidebar"),t=e?.querySelector('[aria-current="page"]');e&&t instanceof HTMLElement&&e.scrollTo({top:t.offsetTop-window.innerHeight/4})},7461:function(e,t,n){var o=n(49818);let a=document.querySelector('.a11y-menu a[href="#search"]');if(a instanceof HTMLAnchorElement){let e=document.querySelector("#search");e instanceof o.MDNSearchModal?a.addEventListener("click",t=>{let{target:n}=t;n instanceof HTMLElement&&(n.blur(),t.preventDefault()),e.showModal()}):(console.error("MDNSearchModal not found!"),a.hidden=!0)}},41600:function(){for(let e of document.querySelectorAll(".generic-toc, .reference-toc, .document-toc, .blog-toc"))e instanceof HTMLElement&&function(e){let t=[...e.querySelectorAll("a")],n=new Map;for(let e of t.reverse()){let t=document.querySelector(`[id="${decodeURIComponent(e.hash).slice(1)}"]`);if(!t)continue;let o=t.closest("section");for(;o&&o instanceof HTMLElement&&!n.has(o);)n.set(o,e),o=o.nextElementSibling}let o=new WeakMap,a=new Set,r={threshold:0},s=document.querySelector("header");s instanceof HTMLElement&&(r.rootMargin=`-${s.clientHeight}px 0px 0px 0px`);let i=new IntersectionObserver(e=>{for(let{target:t,isIntersecting:r}of e){if(!(t instanceof HTMLElement))continue;if(!a.has(t))if(!r)continue;else a.add(t);let e=n.get(t);if(!e)continue;let s=(o.get(e)??0)+(r?1:-1);e.ariaCurrent=s>0?"true":null,o.set(e,s)}},r);for(let e of n.keys())i.observe(e)}(e)},99229:function(e,t,n){n.a(e,async function(e,t){try{var o=n(93526);try{let e=await (0,o.L)(),t=new Date(localStorage.getItem("next-ping")||0);if(navigator.sendBeacon&&e.isAuthenticated&&t<new Date){let e=new URLSearchParams;navigator.sendBeacon("/api/v1/ping",e);let t=new Date;t.setUTCDate(t.getUTCDate()+1),t.setUTCHours(0),t.setUTCMinutes(0),t.setUTCSeconds(0),t.setUTCMilliseconds(0),localStorage.setItem("next-ping",t.toISOString())}}catch(e){console.error("Failed to send ping",e)}t()}catch(e){t(e)}},1)},86484:function(e,t,n){n.d(t,{J:()=>m});var o=n(24909),a=n(81233),r=n(58055);let s=`# TODO Use comments, see: https://firefox-source-docs.mozilla.org/l10n/fluent/review.html#comments
56
+ `}updated(){if(this._shiftFocus){let e=this._getSelectedItem();e instanceof HTMLElement&&e.focus()}}};function c(e){return(e=e.trim().toLowerCase()).startsWith(".")||e.endsWith(".")?e.split(/[ ,]+/):e.split(/[ ,.]+/)}customElements.define("mdn-search-modal",MDNSearchModal)},93526:function(e,t,n){let o;n.d(t,{L:()=>i});var r=n(36728);let a={country:"United States",country_iso:"US"},s={username:null,isAuthenticated:!1,avatarUrl:null,isSubscriber:!1,subscriptionType:null,email:null,geo:a,settings:null};function i(){return r.QD?new Promise(()=>{}):(o||(o=l().catch(e=>(console.error(e),s))),o)}async function l(){let e=await fetch("/api/v1/whoami");if(!e.ok)throw Error(e.statusText);try{let t=await e.json(),n=t?.settings?{aiHelpHistory:"boolean"==typeof t.settings?.ai_help_history?t.settings.ai_help_history:null,noAds:t.settings?.no_ads??null}:s.settings;return c.noAds=n?.noAds||!1,{username:t.username??s.username,isAuthenticated:t.is_authenticated??s.isAuthenticated,avatarUrl:t.avatar_url??s.avatarUrl,isSubscriber:t.is_subscriber??s.isSubscriber,subscriptionType:"core"===t.subscription_type?"mdn_core":t.subscription_type??s.subscriptionType,email:t.email??s.email,geo:{country:(t.geo&&t.geo.country)??a.country,country_iso:(t.geo&&t.geo.country_iso)??a.country_iso},settings:n}}catch{throw Error(e.statusText)}}let c={set noAds(value){value?globalThis.localStorage.setItem("nop","yes"):globalThis.localStorage.removeItem("nop")},get noAds(){return globalThis.localStorage?.getItem?.("nop")==="yes"}}},31051:function(e,t,n){n.a(e,async function(e,t){try{n(4591),n(68069),n(73013),n(23929),n(64989),n(64531),n(99217),n(41600);var o=n(42732),r=n(43531);n(7461);var a=n(99229),s=e([o,r,a]);[o,r,a]=s.then?(await s)():s,t()}catch(e){t(e)}})},42732:function(e,t,n){n.a(e,async function(e,t){try{for(let e of document.querySelectorAll('div.code-example pre:not(.hidden):not([class*="live-sample"]):not([class*="interactive-example"])')){let{upgradePre:t}=await Promise.all([n.e("3945"),n.e("9963"),n.e("7627"),n.e("303"),n.e("993"),n.e("3187")]).then(n.bind(n,69208));t(e)}t()}catch(e){t(e)}},1)},23929:function(){"closedBy"in HTMLDialogElement.prototype||addEventListener("click",e=>{let t=e.composedPath()[0];if(t instanceof HTMLDialogElement&&"any"===t.getAttribute("closedby")){let n=t.getBoundingClientRect(),{clientX:o,clientY:r}=e;n.top<=r&&r<=n.bottom&&n.left<=o&&o<=n.right||t.close()}})},73013:function(e,t,n){var o=n(32890),r=n(36728);let a=!document.cookie.split("; ").includes("moz-1st-party-data-opt-out=true")&&r._0;r.i7&&(o.Ay.setDebugViewTag("mdn-dev"),o.Ay.setLogPings(!0)),o.Ay.initialize("mdn-fred",a,{enableAutoPageLoadEvents:!0,enableAutoElementClickEvents:!0,channel:r.g_})},43531:function(e,t,n){n.a(e,async function(e,t){try{for(let e of document.querySelectorAll("iframe[data-live-id]"))if(e instanceof HTMLIFrameElement){let{liveId:t,livePath:o}=e.dataset;if(t){let r={},a=[],s=t.replaceAll(".",String.raw`\.`);for(let e of document.querySelectorAll(`.live-sample___${s}, .live-sample---${s}`)){let{MDNCodeExample:t,upgradePre:o}=await Promise.all([n.e("3945"),n.e("9963"),n.e("7627"),n.e("303"),n.e("993"),n.e("3187")]).then(n.bind(n,69208)),s=e instanceof t?e:o(e);if(s){a.push(s);let{language:e,code:t}=s;r[e]?r[e]+=t:r[e]=t}}await Promise.all([n.e("3945"),n.e("8427"),n.e("9963"),n.e("9478"),n.e("9914"),n.e("7627"),n.e("6480")]).then(n.bind(n,4225));let i=document.createElement("mdn-live-sample-result");for(let n of(i.liveId=t,i.code=r,i.srcPrefix=o,i.allow=e.allow||void 0,i.sandbox=e.sandbox.toString(),i.height=e.height,e.closest(".code-example")?.replaceWith(i),a))n.liveSample||=i}}t()}catch(e){t(e)}},1)},64989:function(e,t,n){let o=new Set;for(let e of document.querySelectorAll("*")){let t=e.tagName.toLowerCase();if(t.startsWith("mdn-")||"interactive-example"===t){let e=t.replace("mdn-","");o.has(e)||(o.add(e),n(47479)(`./${e}/element.js`).catch(t=>{console.error(`couldn't load code for <${e}>: does the element's code not match the naming schema?`,t)}))}}},64531:function(){let e=document.querySelector(".left-sidebar"),t=e?.querySelector('[aria-current="page"]');e&&t instanceof HTMLElement&&e.scrollTo({top:t.offsetTop-window.innerHeight/4})},7461:function(e,t,n){var o=n(49818);let r=document.querySelector('.a11y-menu a[href="#search"]');if(r instanceof HTMLAnchorElement){let e=document.querySelector("#search");e instanceof o.MDNSearchModal?r.addEventListener("click",t=>{let{target:n}=t;n instanceof HTMLElement&&(n.blur(),t.preventDefault()),e.showModal()}):(console.error("MDNSearchModal not found!"),r.hidden=!0)}},41600:function(){for(let e of document.querySelectorAll(".generic-toc, .reference-toc, .document-toc, .blog-toc"))e instanceof HTMLElement&&function(e){let t=[...e.querySelectorAll("a")],n=new Map;for(let e of t.reverse()){let t=document.querySelector(`[id="${decodeURIComponent(e.hash).slice(1)}"]`);if(!t)continue;let o=t.closest("section");for(;o&&o instanceof HTMLElement&&!n.has(o);)n.set(o,e),o=o.nextElementSibling}let o=new WeakMap,r=new Set,a={threshold:0},s=document.querySelector("header");s instanceof HTMLElement&&(a.rootMargin=`-${s.clientHeight}px 0px 0px 0px`);let i=new IntersectionObserver(e=>{for(let{target:t,isIntersecting:a}of e){if(!(t instanceof HTMLElement))continue;if(!r.has(t))if(!a)continue;else r.add(t);let e=n.get(t);if(!e)continue;let s=(o.get(e)??0)+(a?1:-1);e.ariaCurrent=s>0?"true":null,o.set(e,s)}},a);for(let e of n.keys())i.observe(e)}(e)},99229:function(e,t,n){n.a(e,async function(e,t){try{var o=n(93526);try{let e=await (0,o.L)(),t=new Date(localStorage.getItem("next-ping")||0);if(navigator.sendBeacon&&e.isAuthenticated&&t<new Date){let e=new URLSearchParams;navigator.sendBeacon("/api/v1/ping",e);let t=new Date;t.setUTCDate(t.getUTCDate()+1),t.setUTCHours(0),t.setUTCMinutes(0),t.setUTCSeconds(0),t.setUTCMilliseconds(0),localStorage.setItem("next-ping",t.toISOString())}}catch(e){console.error("Failed to send ping",e)}t()}catch(e){t(e)}},1)},86484:function(e,t,n){n.d(t,{J:()=>m});var o=n(24909),r=n(81233),a=n(58055);let s=`# TODO Use comments, see: https://firefox-source-docs.mozilla.org/l10n/fluent/review.html#comments
57
57
  # TODO Consider using terms, see: https://firefox-source-docs.mozilla.org/l10n/fluent/review.html#terms and https://projectfluent.org/fluent/guide/references.html#message-references
58
58
 
59
59
  article-footer-last-modified = This page was last modified on <time data-l10n-name="date">{ $date }</time> by <a data-l10n-name="contributors">MDN contributors</a>.
@@ -163,8 +163,11 @@ compat-support-flags =
163
163
  [one] {" "}to <code data-l10n-name="value">{ $flag_value }</code>
164
164
  *[other] {""}
165
165
  }{"."}
166
- { $flag_type ->
167
- [preference] To change preferences in { $browser_name }, visit { $browser_pref_url }.
166
+ { NUMBER($has_pref_url) ->
167
+ [one] { $flag_type ->
168
+ [preference] To change preferences in { $browser_name }, visit { $browser_pref_url }.
169
+ *[other] {""}
170
+ }
168
171
  *[other] {""}
169
172
  }
170
173
 
@@ -258,5 +261,5 @@ obs-mdn = Das HTTP Observatory bietet wirksame Sicherheitseinblicke auf Grundlag
258
261
  `,ru:`blog-toc-title = В этой статье
259
262
  `,"zh-CN":`blog-toc-title = 在本文中
260
263
  `,"zh-TW":`blog-toc-title = 在本文中
261
- `},l=["i","strong","br","em"],c=["title","aria-label"];let Fluent=class Fluent{constructor(e="en-US",t=[]){this.locale=e,this.usBundle=Fluent.constructBundle(new o.Np(e),[s]),t.length>0&&(this.bundle=Fluent.constructBundle(new o.Np(e),[s,...t]))}static constructBundle(e,t=[]){for(let n of t){let t=e.addResource(new o.B$(n),{allowOverrides:!0});t.length>0&&console.error(t)}return e}get(e,t,n,o){let a=this.getMessage(e,t,n);if(a)return Fluent.sanitize(a,o)}static sanitize(e,t={}){let n={};for(let e of Object.values(t))n[e.tag]=[...Object.keys(e).filter(e=>"tag"!==e),...c];let o=[...Object.values(t).map(e=>e.tag),...l],s=!0,i=a(e,{allowedAttributes:n,allowedTags:o,allowedSchemes:["http","https","mailto"],filter(e){let n=e.attrs["data-l10n-name"];if(n)for(let[o,a]of Object.entries(t[n]||{}))e.attrs[o]=a;return!!(l.includes(e.tag)||n&&Object.keys(t).includes(n)&&t[n]?.tag===e.tag)&&(s=!1,!0)}},!0);return s?i:(0,r._)(i)}getMessage(e,t,n={},o=this.bundle,a=!1){let r,s=o?o.getMessage(e):void 0;if("qa"===this.locale)return`[${e}${t?`.${t}`:""}]`;if(!s){if(a)return;return this.getMessage(e,t,n,this.usBundle,!0)}if(t){if(!(r=s.attributes[t])){if(a)return;return this.getMessage(e,t,n,this.usBundle,!0)}}else s.value&&(r=s.value);if(!r||!o)return"";let i=[],l=o?.formatPattern(r,n,i);return i.length>0&&console.error(i),l}};let d=new Map;function u(e){if(e){if(!d.has(e)){let t=i[e],n=new Fluent(e,t?[t]:void 0);d.set(e,n)}return d.get(e)}}let m=e=>class extends e{constructor(...e){super(...e);let t=function(){let e=globalThis.__MDNServerContext?.getStore(),t=globalThis.__MDNClientContext;return e||t}();this.locale=t.locale,this.l10n=function(e){function t(t,n){if("string"==typeof t){let n=u(e)?.get(t),o=`[${t}]`,a=e=>{let t=e[0];return n||t||o};return a.toString=()=>"string"==typeof n&&n||o,a}return t[0]||""}return t.raw=function({id:t,attr:n,args:o,elements:a}){let r=u(e);return r?r.get(t,n,o,a):`[${t}]`},t}(this.locale)}}},4591:function(){globalThis.__MDNClientContext={locale:globalThis.location.pathname.split("/")[1]||"en-US"}},90528:function(e,t,n){n.d(t,{o:()=>o});function o(e,t){let n=e.replaceAll("_"," ").split("/").filter(e=>!["",t,"docs"].includes(e));return(n=n.map(e=>"API"===e?"Web APIs":e)).length>1&&"Web"===n.at(0)&&n.splice(0,1),n.length>1&&n.splice(-1,1),n.join(" / ")}}};import e from"./runtime.cc9114c9e108157f.js";import*as t from"./5935.390ff5bf30990a40.js";e.C(t);import*as n from"./1127.f5563db9beba3133.js";e.C(n);import*as o from"./index.b9d9ebb034538241.js";e.C(o),e(e.s=31051);
262
- //# sourceMappingURL=index.b9d9ebb034538241.js.map
264
+ `},l=["i","strong","br","em"],c=["title","aria-label"];let Fluent=class Fluent{constructor(e="en-US",t=[]){this.locale=e,this.usBundle=Fluent.constructBundle(new o.Np(e),[s]),t.length>0&&(this.bundle=Fluent.constructBundle(new o.Np(e),[s,...t]))}static constructBundle(e,t=[]){for(let n of t){let t=e.addResource(new o.B$(n),{allowOverrides:!0});t.length>0&&console.error(t)}return e}get(e,t,n,o){let r=this.getMessage(e,t,n);if(r)return Fluent.sanitize(r,o)}static sanitize(e,t={}){let n={};for(let e of Object.values(t))n[e.tag]=[...Object.keys(e).filter(e=>"tag"!==e),...c];let o=[...Object.values(t).map(e=>e.tag),...l],s=!0,i=r(e,{allowedAttributes:n,allowedTags:o,allowedSchemes:["http","https","mailto"],filter(e){let n=e.attrs["data-l10n-name"];if(n)for(let[o,r]of Object.entries(t[n]||{}))e.attrs[o]=r;return!!(l.includes(e.tag)||n&&Object.keys(t).includes(n)&&t[n]?.tag===e.tag)&&(s=!1,!0)}},!0);return s?i:(0,a._)(i)}getMessage(e,t,n={},o=this.bundle,r=!1){let a,s=o?o.getMessage(e):void 0;if("qa"===this.locale)return`[${e}${t?`.${t}`:""}]`;if(!s){if(r)return;return this.getMessage(e,t,n,this.usBundle,!0)}if(t){if(!(a=s.attributes[t])){if(r)return;return this.getMessage(e,t,n,this.usBundle,!0)}}else s.value&&(a=s.value);if(!a||!o)return"";let i=[],l=o?.formatPattern(a,n,i);return i.length>0&&console.error(i),l}};let d=new Map;function u(e){if(e){if(!d.has(e)){let t=i[e],n=new Fluent(e,t?[t]:void 0);d.set(e,n)}return d.get(e)}}let m=e=>class extends e{constructor(...e){super(...e);let t=function(){let e=globalThis.__MDNServerContext?.getStore(),t=globalThis.__MDNClientContext;return e||t}();this.locale=t.locale,this.l10n=function(e){function t(t,n){if("string"==typeof t){let n=u(e)?.get(t),o=`[${t}]`,r=e=>{let t=e[0];return n||t||o};return r.toString=()=>"string"==typeof n&&n||o,r}return t[0]||""}return t.raw=function({id:t,attr:n,args:o,elements:r}){let a=u(e);return a?a.get(t,n,o,r):`[${t}]`},t}(this.locale)}}},4591:function(){globalThis.__MDNClientContext={locale:globalThis.location.pathname.split("/")[1]||"en-US"}},90528:function(e,t,n){n.d(t,{o:()=>o});function o(e,t){let n=e.replaceAll("_"," ").split("/").filter(e=>!["",t,"docs"].includes(e));return(n=n.map(e=>"API"===e?"Web APIs":e)).length>1&&"Web"===n.at(0)&&n.splice(0,1),n.length>1&&n.splice(-1,1),n.join(" / ")}}};import e from"./runtime.63305f0549b94aae.js";import*as t from"./5935.390ff5bf30990a40.js";e.C(t);import*as n from"./1127.f5563db9beba3133.js";e.C(n);import*as o from"./index.881056601848b5c3.js";e.C(o),e(e.s=31051);
265
+ //# sourceMappingURL=index.881056601848b5c3.js.map