npm - @mdn/fred - Versions diffs - 0.0.1 - Mend

@mdn/fred 0.0.1

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 (3272) hide show

package/dist/client/3580.bf3f2a7896833bd8.js ADDED Viewed

@@ -0,0 +1,29 @@
+export const __webpack_ids__=["3580"];export const __webpack_modules__={61485:function(t,a,o){o.r(a),o.d(a,{MDNPlacementTop:()=>MDNPlacementTop});var e=o(14703),c=o(51968),r=o(68688);o(83294),o(43028);var l=o(35281),n=o(46886);let p=(0,e.dy)`<div class="top-placement"></div>`;let MDNPlacementTop=class MDNPlacementTop extends(0,l.P)(e.oi){static styles=n.Z;renderInitial(){return p}renderComplete(t){if("noads"===t.status)return e.Ld;let a=t?.hpTop||t?.top;if(!a)return p;let{status:o,click:l,view:n,copy:i,image:s,alt:g,cta:d,colors:m,version:h}=a;if("success"!==o)return p;this._viewedUrl||(this._viewedUrl=n,this._version=h);let{textColor:k,backgroundColor:v,ctaTextColor:u,ctaBackgroundColor:b,textColorDark:f,backgroundColorDark:y,ctaTextColorDark:x,ctaBackgroundColorDark:_}=m||{},w=Object.fromEntries([["--place-top-background-light",v],["--place-top-color-light",k],["--place-top-cta-background-light",b],["--place-top-cta-color-light",u],["--place-top-background-dark",y||v],["--place-top-color-dark",f||k],["--place-top-cta-background-dark",_||b],["--place-top-cta-color-dark",x||b]].filter(([t,a])=>!!a));return(0,e.dy)`<div
+      ${(0,c.i)(this._placementRef)}
+      class="top-placement"
+      style=${(0,r.V)(w)}
+    >
+      <section class="placement-container">
+        <div class="placement-inner">
+          <a
+            class="placement-link"
+            data-glean="pong: pong-&gt;click top-banner"
+            href=${this.clickLink(l,h)}
+            target="_blank"
+            rel="sponsored noreferrer"
+            ><div class="placement-content">
+              <img
+                src=${this.imgLink(s)}
+                aria-hidden=${!g}
+                alt=${g||""}
+                height="50"
+              /><span>${i}</span>
+            </div>
+            <span class="placement-cta">${d}</span></a
+          >
+          <mdn-placement-note></mdn-placement-note>
+        </div>
+        <mdn-placement-no></mdn-placement-no>
+      </section>
+    </div>`}};customElements.define("mdn-placement-top",MDNPlacementTop)},46886:function(t,a,o){o.d(a,{Z:()=>p});var e=o(14703),c=o(8081),r=o.n(c),l=o(23645),n=o.n(l)()(r());n.push([t.id,'.top-placement{--top-placement-inner-height:3.125rem;--top-placement-inner-padding:0.125rem;--place-top-background-light:var(--color-background-primary);--place-top-color-light:var(--color-text-primary);--place-top-cta-background-light:var(--color-text-primary);--place-top-cta-color-light:var(--color-background-secondary);--place-top-background-dark:var(--color-background-primary);--place-top-color-dark:var(--color-text-primary);--place-top-cta-background-dark:var(--color-text-primary);--place-top-cta-color-dark:var(--color-background-secondary);--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--place-top-background-dark);--place-top-background:var(--csstools-light-dark-toggle--0,var(--place-top-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--place-top-color-dark);--place-top-color:var(--csstools-light-dark-toggle--1,var(--place-top-color-light));--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) var(--place-top-cta-background-dark);--place-top-cta-background:var(--csstools-light-dark-toggle--2,var(--place-top-cta-background-light));--csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) var(--place-top-cta-color-dark);--place-top-cta-color:var(--csstools-light-dark-toggle--3,var(--place-top-cta-color-light));background-color:var(--place-top-background);border-bottom:1px solid var(--color-border-primary);min-height:calc(var(--top-placement-inner-height) + var(--top-placement-inner-padding)*2);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.top-placement{--place-top-background:light-dark(var(--place-top-background-light),var(--place-top-background-dark));--place-top-color:light-dark(var(--place-top-color-light),var(--place-top-color-dark));--place-top-cta-background:light-dark(var(--place-top-cta-background-light),var(--place-top-cta-background-dark));--place-top-cta-color:light-dark(var(--place-top-cta-color-light),var(--place-top-cta-color-dark))}}@supports not (color:light-dark(tan,tan)){.top-placement *{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--place-top-background-dark);--place-top-background:var(--csstools-light-dark-toggle--0,var(--place-top-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--place-top-color-dark);--place-top-color:var(--csstools-light-dark-toggle--1,var(--place-top-color-light));--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) var(--place-top-cta-background-dark);--place-top-cta-background:var(--csstools-light-dark-toggle--2,var(--place-top-cta-background-light));--csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) var(--place-top-cta-color-dark);--place-top-cta-color:var(--csstools-light-dark-toggle--3,var(--place-top-cta-color-light))}}.top-placement .placement-container{align-items:center;display:grid;font-size:.75rem;grid-template-areas:"pong cta" "no note";height:100%;margin:0 auto;width:100%}@media (min-width:769.02px){.top-placement .placement-container{grid-template-areas:"pong cta note" "pong cta no";grid-template-columns:fit-content(100%) auto fit-content(100%)}}:is(.top-placement .placement-container) .placement-inner{border:none;display:contents;width:100%}:is(:is(.top-placement .placement-container) .placement-inner) .placement-link{display:contents}:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content{align-items:center;color:var(--place-top-color);display:flex;flex-direction:row;grid-area:pong;padding:var(--top-placement-inner-padding);-webkit-text-decoration:none;text-decoration:none}:is(:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content) img{height:var(--top-placement-inner-height);max-height:var(--top-placement-inner-height);width:auto}:is(:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content) span{color:var(--place-top-color);max-height:var(--top-placement-inner-height);overflow:auto;padding:0 1rem}:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-cta{background-color:var(--place-top-cta-background);border-radius:.25rem;color:var(--place-top-cta-color);font-size:var(--font-size-small);grid-area:cta;height:fit-content;margin-right:auto;padding:.25rem 1rem;text-align:center}:is(:is(.top-placement .placement-container) .placement-inner) mdn-placement-note{grid-area:note;margin:.25rem 0 auto auto}:is(.top-placement .placement-container) mdn-placement-no{color:var(--place-top-color);grid-area:no;margin:auto 0 0 2rem;width:auto}',""]);let p=(0,e.iv)([n.toString()])}};
+//# sourceMappingURL=3580.bf3f2a7896833bd8.js.map

package/dist/client/3580.bf3f2a7896833bd8.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"3580.bf3f2a7896833bd8.js","sources":["webpack://@mdn/fred/./components/placement-top/element.js","webpack://@mdn/fred/./components/placement-top/element.css"],"sourcesContent":["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 * @import { TemplateResult } from \"lit\";\n */\n\nconst EMPTY = html`<div class=\"top-placement\"></div>`;\n\nexport class MDNPlacementTop extends PlacementMixin(LitElement) {\n static styles = styles;\n\n /**\n *\n * @returns {TemplateResult | symbol}\n */\n renderInitial() {\n return EMPTY;\n }\n\n /**\n *\n * @param {Placements.PlacementContextData} placementContext\n * @returns\n */\n renderComplete(placementContext) {\n if (placementContext.status === \"noads\") {\n return nothing;\n }\n const data = placementContext?.hpTop || placementContext?.top;\n if (!data) {\n return EMPTY;\n }\n const { status, click, view, copy, image, alt, cta, colors, version } =\n data;\n if (status !== \"success\") {\n return EMPTY;\n }\n if (!this._viewedUrl) {\n this._viewedUrl = view;\n this._version = version;\n }\n const {\n textColor,\n backgroundColor,\n ctaTextColor,\n ctaBackgroundColor,\n textColorDark,\n backgroundColorDark,\n ctaTextColorDark,\n ctaBackgroundColorDark,\n } = colors || {};\n const styles = Object.fromEntries(\n [\n [\"--place-top-background-light\", backgroundColor],\n [\"--place-top-color-light\", textColor],\n [\"--place-top-cta-background-light\", ctaBackgroundColor],\n [\"--place-top-cta-color-light\", ctaTextColor],\n [\"--place-top-background-dark\", backgroundColorDark || backgroundColor],\n [\"--place-top-color-dark\", textColorDark || textColor],\n [\n \"--place-top-cta-background-dark\",\n ctaBackgroundColorDark || ctaBackgroundColor,\n ],\n [\"--place-top-cta-color-dark\", ctaTextColorDark || ctaBackgroundColor],\n ].filter(([_, v]) => Boolean(v)),\n );\n\n return html`<div\n ${ref(this._placementRef)}\n class=\"top-placement\"\n style=${styleMap(styles)}\n >\n <section class=\"placement-container\">\n <div class=\"placement-inner\">\n <a\n class=\"placement-link\"\n data-glean=\"pong: pong->click top-banner\"\n href=${this.clickLink(click, version)}\n target=\"_blank\"\n rel=\"sponsored noreferrer\"\n ><div class=\"placement-content\">\n <img\n src=${this.imgLink(image)}\n aria-hidden=${!alt}\n alt=${alt || \"\"}\n height=\"50\"\n /><span>${copy}</span>\n </div>\n <span class=\"placement-cta\">${cta}</span></a\n >\n <mdn-placement-note></mdn-placement-note>\n </div>\n <mdn-placement-no></mdn-placement-no>\n </section>\n </div>`;\n }\n}\n\ncustomElements.define(\"mdn-placement-top\", MDNPlacementTop);\n","import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.top-placement{--top-placement-inner-height:3.125rem;--top-placement-inner-padding:0.125rem;--place-top-background-light:var(--color-background-primary);--place-top-color-light:var(--color-text-primary);--place-top-cta-background-light:var(--color-text-primary);--place-top-cta-color-light:var(--color-background-secondary);--place-top-background-dark:var(--color-background-primary);--place-top-color-dark:var(--color-text-primary);--place-top-cta-background-dark:var(--color-text-primary);--place-top-cta-color-dark:var(--color-background-secondary);--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--place-top-background-dark);--place-top-background:var(--csstools-light-dark-toggle--0,var(--place-top-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--place-top-color-dark);--place-top-color:var(--csstools-light-dark-toggle--1,var(--place-top-color-light));--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) var(--place-top-cta-background-dark);--place-top-cta-background:var(--csstools-light-dark-toggle--2,var(--place-top-cta-background-light));--csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) var(--place-top-cta-color-dark);--place-top-cta-color:var(--csstools-light-dark-toggle--3,var(--place-top-cta-color-light));background-color:var(--place-top-background);border-bottom:1px solid var(--color-border-primary);min-height:calc(var(--top-placement-inner-height) + var(--top-placement-inner-padding)*2);padding-inline:var(--layout-side-padding)}@supports (color:light-dark(red,red)){.top-placement{--place-top-background:light-dark(var(--place-top-background-light),var(--place-top-background-dark));--place-top-color:light-dark(var(--place-top-color-light),var(--place-top-color-dark));--place-top-cta-background:light-dark(var(--place-top-cta-background-light),var(--place-top-cta-background-dark));--place-top-cta-color:light-dark(var(--place-top-cta-color-light),var(--place-top-cta-color-dark))}}@supports not (color:light-dark(tan,tan)){.top-placement *{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--place-top-background-dark);--place-top-background:var(--csstools-light-dark-toggle--0,var(--place-top-background-light));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--place-top-color-dark);--place-top-color:var(--csstools-light-dark-toggle--1,var(--place-top-color-light));--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) var(--place-top-cta-background-dark);--place-top-cta-background:var(--csstools-light-dark-toggle--2,var(--place-top-cta-background-light));--csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) var(--place-top-cta-color-dark);--place-top-cta-color:var(--csstools-light-dark-toggle--3,var(--place-top-cta-color-light))}}.top-placement .placement-container{align-items:center;display:grid;font-size:.75rem;grid-template-areas:\"pong cta\" \"no note\";height:100%;margin:0 auto;width:100%}@media (min-width:769.02px){.top-placement .placement-container{grid-template-areas:\"pong cta note\" \"pong cta no\";grid-template-columns:fit-content(100%) auto fit-content(100%)}}:is(.top-placement .placement-container) .placement-inner{border:none;display:contents;width:100%}:is(:is(.top-placement .placement-container) .placement-inner) .placement-link{display:contents}:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content{align-items:center;color:var(--place-top-color);display:flex;flex-direction:row;grid-area:pong;padding:var(--top-placement-inner-padding);-webkit-text-decoration:none;text-decoration:none}:is(:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content) img{height:var(--top-placement-inner-height);max-height:var(--top-placement-inner-height);width:auto}:is(:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-content) span{color:var(--place-top-color);max-height:var(--top-placement-inner-height);overflow:auto;padding:0 1rem}:is(:is(:is(.top-placement .placement-container) .placement-inner) .placement-link) .placement-cta{background-color:var(--place-top-cta-background);border-radius:.25rem;color:var(--place-top-cta-color);font-size:var(--font-size-small);grid-area:cta;height:fit-content;margin-right:auto;padding:.25rem 1rem;text-align:center}:is(:is(.top-placement .placement-container) .placement-inner) mdn-placement-note{grid-area:note;margin:.25rem 0 auto auto}:is(.top-placement .placement-container) mdn-placement-no{color:var(--place-top-color);grid-area:no;margin:auto 0 0 2rem;width:auto}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNPlacementTop","Object","customElements"],"mappings":"mOAgBA,IAAM,EAAQ,QAAI,CAAC,iCAAiC,CAAC,CAE9C,IAAMA,gBAAN,MAAMA,uBAAwB,QAAe,IAAU,EAC5D,OAAO,OAAS,GAAM,AAAC,AAMvB,gBAAgB,CACd,OAAO,CACT,CAOA,eAAe,CAAgB,CAAE,CAC/B,GAAI,AAA4B,UAA5B,EAAiB,MAAM,CACzB,OAAO,IAAO,CAEhB,IAAM,EAAO,GAAkB,OAAS,GAAkB,IAC1D,GAAI,CAAC,EACH,OAAO,EAET,GAAM,CAAE,QAAM,CAAE,OAAK,CAAE,MAAI,CAAE,MAAI,CAAE,OAAK,CAAE,KAAG,CAAE,KAAG,CAAE,QAAM,CAAE,SAAO,CAAE,CACnE,EACF,GAAI,AAAW,YAAX,EACF,OAAO,CAEJ,KAAI,CAAC,UAAU,GAClB,IAAI,CAAC,UAAU,CAAG,EAClB,IAAI,CAAC,QAAQ,CAAG,GAElB,GAAM,CACJ,WAAS,CACT,iBAAe,CACf,cAAY,CACZ,oBAAkB,CAClB,eAAa,CACb,qBAAmB,CACnB,kBAAgB,CAChB,wBAAsB,CACvB,CAAG,GAAU,CAAC,EACT,EAASC,OAAO,WAAW,CAC/B,CACE,CAAC,+BAAgC,EAAgB,CACjD,CAAC,0BAA2B,EAAU,CACtC,CAAC,mCAAoC,EAAmB,CACxD,CAAC,8BAA+B,EAAa,CAC7C,CAAC,8BAA+B,GAAuB,EAAgB,CACvE,CAAC,yBAA0B,GAAiB,EAAU,CACtD,CACE,kCACA,GAA0B,EAC3B,CACD,CAAC,6BAA8B,GAAoB,EAAmB,CACvE,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;;;;;;;iBAOd,EAAE,IAAI,CAAC,SAAS,CAAC,EAAO,GAAS;;;;;oBAK9B,EAAE,IAAI,CAAC,OAAO,CAAC,GAAO;4BACd,EAAE,CAAC,EAAI;oBACf,EAAE,GAAO,GAAG;;sBAEV,EAAE,EAAK;;wCAEW,EAAE,EAAI;;;;;;UAMpC,CAAC,AACT,CACF,EAEAC,eAAe,MAAM,CAAC,oBAAqBF,gB,sFCxGvC,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,skJAAukJ,GAAG,EAEnnJ,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}

package/dist/client/3649.a0041aab36b2ee5d.js ADDED Viewed

@@ -0,0 +1,11 @@
+export const __webpack_ids__=["3649"];export const __webpack_modules__={17739:function(t,e,r){r.r(e),r.d(e,{MDNIXTabWrapper:()=>MDNIXTabWrapper});var a=r(14703),i=r(54109);let MDNIXTabWrapper=class MDNIXTabWrapper extends a.oi{static styles=i.Z;_getTab(t){let e=[...this.querySelectorAll("mdn-ix-tab")];if("first"===t)return e[0];if("last"===t)return e.at(-1);let r=e.findIndex(t=>t.isActive);return"active"===t?e[r]:"prev"===t?e.at((r-1)%e.length):"next"===t?e.at((r+1)%e.length):void 0}_setTabActive(t,e=!1){t&&(this._getTab("active")?.unsetActive(),t.setActive(),e&&t.focus())}_tablistClick({target:t}){if(t instanceof HTMLElement){let e=t.closest("mdn-ix-tab")||void 0;this._setTabActive(e)}}_tablistKeyDown(t){let e;switch(t.key){case"ArrowRight":case"ArrowDown":e="next";break;case"ArrowLeft":case"ArrowUp":e="prev";break;case"Home":e="first";break;case"End":e="last";break;default:return}t.preventDefault(),this._setTabActive(this._getTab(e),!0)}render(){return(0,a.dy)`
+      <div id="tablist" role="tablist">
+        <slot
+          name="tablist"
+          @click=${this._tablistClick}
+          @keydown=${this._tablistKeyDown}
+        ></slot>
+      </div>
+      <slot name="active-panel"></slot>
+    `}firstUpdated(){this.querySelector("mdn-ix-tab")?.setActive()}};customElements.define("mdn-ix-tab-wrapper",MDNIXTabWrapper)},54109:function(t,e,r){r.d(e,{Z:()=>n});var a=r(14703),i=r(8081),s=r.n(i),o=r(23645),l=r.n(o)()(s());l.push([t.id,":host{display:flex;flex-direction:column;overflow:hidden}#tablist{background:var(--color-background-secondary);border-bottom:1px solid var(--color-border-primary);display:flex;flex-shrink:0;gap:.5rem;overflow-x:auto}",""]);let n=(0,a.iv)([l.toString()])}};
+//# sourceMappingURL=3649.a0041aab36b2ee5d.js.map

package/dist/client/3649.a0041aab36b2ee5d.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"3649.a0041aab36b2ee5d.js","sources":["webpack://@mdn/fred/./components/ix-tab-wrapper/element.js","webpack://@mdn/fred/./components/ix-tab-wrapper/element.css"],"sourcesContent":["import { LitElement, html } from \"lit\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * @typedef {\"first\" | \"prev\" | \"active\" | \"next\" | \"last\"} Position\n * @import { MDNIXTab } from \"../ix-tab/element.js\";\n */\n\nexport class MDNIXTabWrapper extends LitElement {\n static styles = styles;\n\n /** @param {Position} position */\n _getTab(position) {\n const tabs = [...this.querySelectorAll(\"mdn-ix-tab\")];\n if (position === \"first\") {\n return tabs[0];\n }\n if (position === \"last\") {\n return tabs.at(-1);\n }\n const active = tabs.findIndex((tab) => tab.isActive);\n if (position === \"active\") {\n return tabs[active];\n }\n if (position === \"prev\") {\n return tabs.at((active - 1) % tabs.length);\n }\n if (position === \"next\") {\n return tabs.at((active + 1) % tabs.length);\n }\n return;\n }\n\n /**@param {MDNIXTab | undefined} tab */\n _setTabActive(tab, focus = false) {\n if (!tab) {\n return;\n }\n this._getTab(\"active\")?.unsetActive();\n tab.setActive();\n if (focus) {\n tab.focus();\n }\n }\n\n /** @param {MouseEvent} event */\n _tablistClick({ target }) {\n if (target instanceof HTMLElement) {\n const tab = target.closest(\"mdn-ix-tab\") || undefined;\n this._setTabActive(tab);\n }\n }\n\n /** @param {KeyboardEvent} event */\n _tablistKeyDown(event) {\n /** @type {Position | undefined} */\n let position;\n switch (event.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n position = \"next\";\n break;\n case \"ArrowLeft\":\n case \"ArrowUp\":\n position = \"prev\";\n break;\n case \"Home\":\n position = \"first\";\n break;\n case \"End\":\n position = \"last\";\n break;\n default:\n return;\n }\n event.preventDefault();\n this._setTabActive(this._getTab(position), true);\n }\n\n render() {\n return html`\n <div id=\"tablist\" role=\"tablist\">\n <slot\n name=\"tablist\"\n @click=${this._tablistClick}\n @keydown=${this._tablistKeyDown}\n ></slot>\n </div>\n <slot name=\"active-panel\"></slot>\n `;\n }\n\n firstUpdated() {\n this.querySelector(\"mdn-ix-tab\")?.setActive();\n }\n}\n\ncustomElements.define(\"mdn-ix-tab-wrapper\", MDNIXTabWrapper);\n","import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{display:flex;flex-direction:column;overflow:hidden}#tablist{background:var(--color-background-secondary);border-bottom:1px solid var(--color-border-primary);display:flex;flex-shrink:0;gap:.5rem;overflow-x:auto}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNIXTabWrapper","t","HTMLElement","customElements"],"mappings":"4KASO,IAAMA,gBAAN,MAAMA,wBAAwB,IAAU,CAC7C,OAAO,OAAS,GAAM,AAAC,AAGvB,SAAQ,CAAQ,CAAE,CAChB,IAAM,EAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC,cAAc,CACrD,GAAI,AAAa,UAAb,EACF,OAAO,CAAI,CAAC,EAAE,CAEhB,GAAI,AAAa,SAAb,EACF,OAAO,EAAK,EAAE,CAAC,IAEjB,IAAM,EAAS,EAAK,SAAS,CAAC,AAACC,GAAQA,EAAI,QAAQ,QACnD,AAAI,AAAa,WAAb,EACK,CAAI,CAAC,EAAO,CAEjB,AAAa,SAAb,EACK,EAAK,EAAE,CAAC,AAAC,GAAS,GAAK,EAAK,MAAM,EAEvC,AAAa,SAAb,EACK,EAAK,EAAE,CAAC,AAAC,GAAS,GAAK,EAAK,MAAM,QAG7C,CAGA,cAAcA,CAAG,CAAE,EAAQ,EAAK,CAAE,CAC3BA,IAGL,IAAI,CAAC,OAAO,CAAC,WAAW,cACxBA,EAAI,SAAS,GACT,GACFA,EAAI,KAAK,GAEb,CAGA,cAAc,CAAEA,OAAAA,CAAM,CAAE,CAAE,CACxB,GAAIA,aAAkBC,YAAa,CACjC,IAAM,EAAMD,EAAO,OAAO,CAAC,eAAiB,OAC5C,IAAI,CAAC,aAAa,CAAC,EACrB,CACF,CAGA,gBAAgB,CAAK,CAAE,CAErB,IAAI,EACJ,OAAQ,EAAM,GAAG,EACf,IAAK,aACL,IAAK,YACH,EAAW,OACX,KACF,KAAK,YACL,IAAK,UACH,EAAW,OACX,KACF,KAAK,OACH,EAAW,QACX,KACF,KAAK,MACH,EAAW,OACX,KACF,SACE,MACJ,CACA,EAAM,cAAc,GACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,GAAW,GAC7C,CAEA,QAAS,CACP,MAAO,QAAI,CAAC;;;;iBAIC,EAAE,IAAI,CAAC,aAAa,CAAC;mBACnB,EAAE,IAAI,CAAC,eAAe,CAAC;;;;IAItC,CAAC,AACH,CAEA,cAAe,CACb,IAAI,CAAC,aAAa,CAAC,eAAe,WACpC,CACF,EAEAE,eAAe,MAAM,CAAC,qBAAsBH,gB,sFC9FxC,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,2NAA4N,GAAG,EAExQ,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}

package/dist/client/37.ce51869ec4792176.js ADDED Viewed

@@ -0,0 +1,98 @@
+export const __webpack_ids__=["37"];export const __webpack_modules__={56980:function(e,t,n){n.r(t),n.d(t,{MDNLoginButton:()=>MDNLoginButton});var r=n(14703);n(50272);var i=n(69535),o=n(8900);let MDNLoginButton=class MDNLoginButton extends(0,i.q)(r.oi){static ssr=!1;get _loginUrl(){let e=location.href.replace(location.origin,""),t=new URL(o.sA,location.origin);return t.search=new URLSearchParams({next:e}).toString(),t.toString()}render(){return(0,r.dy)`<mdn-button href=${this._loginUrl}
+      >${this.l10n`Login`}</mdn-button
+    >`}};customElements.define("mdn-login-button",MDNLoginButton)},6067:function(e,t,n){n.r(t),n.d(t,{MDNPlayground:()=>MDNPlayground});var r=n(35470),i=n(14703),o=n(51968),a=n(69535),s=n(61619),l=n(13117),d=n(15383),c=n(32533);n(4406),n(50272),n(74580),n(18103),n(4976),n(86499),n(56980),n(46907);let m="playground-session-code";let MDNPlayground=class MDNPlayground extends(0,a.q)(i.oi){static styles=d.Z;constructor(){super(),this._permalink=""}_controller=(0,o.V)();_user=new r.iQ(this,{task:async()=>await (0,l.s)()});_format(){this._controller.value?.format()}_run(){let e=this._controller.value;e&&(e.run(),e.runOnChange=!0)}_share(){this.shadowRoot?.querySelector("mdn-modal")?.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}
+${t}
+\`\`\``).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;sessionStorage.setItem(m,JSON.stringify({srcPrefix:t,initialCode:n,code:r}))}}_loadSession(){let{srcPrefix:e,initialCode:t,code:n}=p(JSON.parse(sessionStorage.getItem(m)||"{}")),r=this._controller.value;r&&(r.srcPrefix=e,r.initialCode=t,r.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"),{srcPrefix:i,code:o}=await (n?this._sessionFromApi(n):r?this._sessionFromState(r):void 0)||{};void 0===i||void 0===o||e.srcPrefix===i&&u(e.initialCode,o)||(e.srcPrefix=i,e.initialCode=o,e.code=o,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.z)("playground",{type:"load-shared"}),p(await t.json())}async _sessionFromState(e){let{state:t}=await (0,c.a)(e);return p(JSON.parse(t||"{}"))}_editorUpdate(){this._storeSession(),this.requestUpdate()}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&&!u(e,t);return(0,i.dy)`
+      <div class="wrapper">
+        <mdn-play-controller ${(0,o.i)(this._controller)}>
+          <section>
+            <aside>
+              <h1>${this.l10n`Playground`}</h1>
+              <menu>
+                <mdn-button
+                  variant="secondary"
+                  @click=${this._format}
+                  ?disabled=${!n}
+                  >${this.l10n`Format`}</mdn-button
+                >
+                <mdn-button
+                  variant="secondary"
+                  @click=${this._run}
+                  ?disabled=${!n}
+                  >${this.l10n`Run`}</mdn-button
+                >
+                <mdn-button
+                  variant="secondary"
+                  @click=${this._share}
+                  ?disabled=${!n}
+                  >${this.l10n`Share`}</mdn-button
+                >
+                <mdn-button
+                  variant="secondary"
+                  @click=${this._clear}
+                  ?disabled=${!(n||a)}
+                  >${this.l10n`Clear`}</mdn-button
+                >
+                ${r?(0,i.dy)`<mdn-button
+                      variant="secondary"
+                      @click=${this._reset}
+                      ?disabled=${!a}
+                      >${this.l10n`Reset`}</mdn-button
+                    >`:i.Ld}
+              </menu>
+            </aside>
+            <details open>
+              <summary>HTML</summary>
+              <mdn-play-editor
+                language="html"
+                @update=${this._editorUpdate}
+              ></mdn-play-editor>
+            </details>
+            <details open>
+              <summary>CSS</summary>
+              <mdn-play-editor
+                language="css"
+                @update=${this._editorUpdate}
+              ></mdn-play-editor>
+            </details>
+            <details open>
+              <summary>JAVASCRIPT</summary>
+              <mdn-play-editor
+                language="js"
+                @update=${this._editorUpdate}
+              ></mdn-play-editor>
+            </details>
+          </section>
+          <section class="playground__runner-console">
+            <mdn-play-runner></mdn-play-runner>
+            <div class="playground__console">
+              <div>${this.l10n`Console`}</div>
+              <mdn-play-console></mdn-play-console>
+            </div>
+          </section>
+          <mdn-placement-sidebar horizontal></mdn-placement-sidebar>
+        </mdn-play-controller>
+      </div>
+      <mdn-modal>
+        <section>
+          <h2>${this.l10n`Share Markdown`}</h2>
+          <mdn-button variant="secondary" @click=${this._copyMarkdown}
+            >${this.l10n`Copy markdown to clipboard`}</mdn-button
+          >
+        </section>
+        <section>
+          <h2>${this.l10n`Share your code via Permalink`}</h2>
+          ${this._user.render({initial:()=>(0,i.dy)`<mdn-login-button></mdn-login-button>`,pending:()=>(0,i.dy)`<mdn-login-button></mdn-login-button>`,complete:e=>e.isAuthenticated?this._permalink&&!a?(0,i.dy)`
+                      <input .value=${this._permalink} />
+                      <mdn-button
+                        variant="secondary"
+                        @click=${this._copyPermalink}
+                        >${this.l10n`Copy to clipboard`}</mdn-button
+                      >
+                    `:(0,i.dy)`<mdn-button @click=${this._createPermalink}
+                      >${this.l10n`Create link`}</mdn-button
+                    >`:(0,i.dy)`<mdn-login-button></mdn-login-button>`})}
+        </section>
+      </mdn-modal>
+    `}firstUpdated(){this._loadSession(),this._loadFromUrl()}};function p(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 u(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)},61619:function(e,t,n){n.d(t,{z:()=>i});var r=n(26362);function i(e,{type:t,label:n}){r.Z.recordElementClick({id:e,type:t,label:n})}},15383:function(e,t,n){n.d(t,{Z:()=>l});var r=n(14703),i=n(8081),o=n.n(i),a=n(23645),s=n.n(a)()(o());s.push([e.id,'.wrapper{display:grid;gap:1rem;grid-template-areas:"left runner" "left place";grid-template-rows:1fr min-content;height:100%}.wrapper section{display:flex;flex-direction:column;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;display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}[open]:is(:is(.wrapper section) details){flex-basis:0;flex-grow:1;min-height:12rem}:is(:is(.wrapper section) details) summary{cursor:pointer;line-height:var(--font-line-ui);padding:.5rem;-webkit-user-select:none;user-select:none}:is(:is(.wrapper section) details) mdn-play-editor{flex-grow:1;min-height:0}.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:600;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 (max-width:769px){.wrapper{display:flex;flex-direction:column}}mdn-modal section{align-items:center;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}',""]);let l=(0,r.iv)([s.toString()])}};
+//# sourceMappingURL=37.ce51869ec4792176.js.map

package/dist/client/37.ce51869ec4792176.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"37.ce51869ec4792176.js","sources":["webpack://@mdn/fred/./components/login-button/element.js","webpack://@mdn/fred/./components/playground/element.js","webpack://@mdn/fred/./utils/glean.js","webpack://@mdn/fred/./components/playground/element.css"],"sourcesContent":["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\";\nimport \"../placement-sidebar/element.js\";\n\n/**\n * @import { MDNPlayController } from \"../play-controller/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 constructor() {\n super();\n this._permalink = \"\";\n }\n\n /** @type {Ref<MDNPlayController>} */\n _controller = 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 controller.runOnChange = true;\n }\n }\n\n _share() {\n this.shadowRoot?.querySelector(\"mdn-modal\")?.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._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 };\n sessionStorage.setItem(SESSION_KEY, JSON.stringify(session));\n }\n }\n\n _loadSession() {\n const { srcPrefix, initialCode, code } = stateToSession(\n JSON.parse(sessionStorage.getItem(SESSION_KEY) || \"{}\"),\n );\n const controller = this._controller.value;\n if (controller) {\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\n const { srcPrefix, code } =\n (await (idParam\n ? this._sessionFromApi(idParam)\n : stateParam\n ? this._sessionFromState(stateParam)\n : undefined)) || {};\n\n if (\n srcPrefix !== undefined &&\n code !== undefined &&\n (controller.srcPrefix !== srcPrefix ||\n !compareCode(controller.initialCode, code))\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(\"playground\", { type: \"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 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 ${ref(this._controller)}>\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 <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-placement-sidebar horizontal></mdn-placement-sidebar>\n </mdn-play-controller>\n </div>\n <mdn-modal>\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 `;\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","// @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} id\n * @param {object} options\n * @param {string=} options.type\n * @param {string=} options.label\n */\nexport function gleanClick(id, { type, label }) {\n GleanMetrics.recordElementClick({\n id,\n type,\n label,\n });\n}\n","import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.wrapper{display:grid;gap:1rem;grid-template-areas:\"left runner\" \"left place\";grid-template-rows:1fr min-content;height:100%}.wrapper section{display:flex;flex-direction:column;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;display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}[open]:is(:is(.wrapper section) details){flex-basis:0;flex-grow:1;min-height:12rem}:is(:is(.wrapper section) details) summary{cursor:pointer;line-height:var(--font-line-ui);padding:.5rem;-webkit-user-select:none;user-select:none}:is(:is(.wrapper section) details) mdn-play-editor{flex-grow:1;min-height:0}.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:600;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 (max-width:769px){.wrapper{display:flex;flex-direction:column}}mdn-modal section{align-items:center;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}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNLoginButton","location","URL","URLSearchParams","customElements","MDNPlayground","confirm","history","Object","Boolean","navigator","fetch","JSON","sessionStorage","encodeURIComponent","console","t"],"mappings":"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"}

package/dist/client/3769.aa29e140ef41bf56.js ADDED Viewed

@@ -0,0 +1,42 @@
+export const __webpack_ids__=["3769"];export const __webpack_modules__={61667:function(e){e.exports=function(e,r){return(r||(r={}),e&&(e=String(e.__esModule?e.default:e),/^['"].*['"]$/.test(e)&&(e=e.slice(1,-1)),r.hash&&(e+=r.hash),/["'() \t\n]|(%20)/.test(e)||r.needQuotes))?'"'.concat(e.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):e}},26096:function(e,r,t){e.exports=t.p+"languages.dcba936080e5be86.svg"},36403:function(e,r,t){t.r(r),t.d(r,{MDNLanguageSwitcher:()=>MDNLanguageSwitcher});var o=t(14703),a=t(69535);let n=(0,o.YP)`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>`;var i=t(94722),l=t(40113);t(18399),t(32013);let MDNLanguageSwitcher=class MDNLanguageSwitcher extends(0,a.q)(o.oi){static styles=l.Z;static properties={locale:{type:String},native:{type:String},translations:{type:Array},url:{type:String},_preferredLocale:{state:!0}};constructor(){super(),this.translations=[],this.native="",this.locale="en-US",this.url="/",this._preferredLocale=void 0}firstUpdated(){this._preferredLocale=(0,i.aj)()}get _isLocalePreferred(){return this._preferredLocale==this.locale}_togglePreferredLocale(){this._isLocalePreferred?((0,i.Oq)(),this._preferredLocale=void 0):((0,i.Yc)(this.locale),this._preferredLocale=this.locale)}render(){let{translations:e,native:r,locale:t,url:a}=this;return 0===e.length?o.Ld:(0,o.dy)`<div class="language-switcher">
+      <mdn-dropdown>
+        <button slot="button" class="language-switcher__button" type="button">
+          <span>${r??t}</span>
+        </button>
+        <div
+          slot="dropdown"
+          class="language-switcher__dropdown"
+          id="language-switcher__dropdown"
+        >
+          <div class="language_switcher__remember">
+            <mdn-switch
+              @toggle=${this._togglePreferredLocale}
+              ?checked=${this._isLocalePreferred}
+              >${this.l10n`Remember language`}</mdn-switch
+            >
+            <mdn-button
+              variant="plain"
+              .icon=${n}
+              icon-only
+              href="https://github.com/orgs/mdn/discussions/739"
+              target="_blank"
+              title=${this.l10n`Enable this setting to always switch to the current language when available. (Click to learn more.)`}
+              >${this.l10n`Learn more`}</mdn-button
+            >
+          </div>
+          <ul class="language-switcher__list">
+            ${e.filter(e=>e.locale!==t).sort((e,r)=>e.locale.localeCompare(r.locale)).map(e=>(0,o.dy)`
+                  <li>
+                    <a
+                      class="language-switcher__option"
+                      @click=${i.Oq}
+                      href=${a.replace(`/${t}/`,`/${e.locale}/`)}
+                      >${e.native}</a
+                    >
+                  </li>
+                `)}
+          </ul>
+        </div>
+      </mdn-dropdown>
+    </div>`}};customElements.define("mdn-language-switcher",MDNLanguageSwitcher)},40113:function(e,r,t){t.d(r,{Z:()=>h});var o=t(14703),a=t(8081),n=t.n(a),i=t(23645),l=t.n(i),s=t(61667),c=t.n(s),d=new t.U(t(26096)),g=l()(n()),u=c()(d);g.push([e.id,`.language-switcher{position:relative}.language-switcher__button{align-items:center;background-color:initial;border:none;color:inherit;column-gap:.25rem;cursor:pointer;display:flex;font:inherit;margin:0;padding:0 .5rem}.language-switcher__button:is(:hover,:focus,[aria-expanded=true]){background-color:var(--color-background-secondary)}@media screen and (max-width:480px){.language-switcher__button>span{display:none}}.language-switcher__button:before{background-color:currentcolor;content:"";height:1.25rem;-webkit-mask-image:url(${u});mask-image:url(${u});-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.language-switcher__dropdown{background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);margin:0;padding:.75rem;position:absolute;right:0;width:max-content;z-index:1}.language_switcher__remember{border-bottom:1px solid var(--color-border-primary);display:flex;font-size:var(--font-size-small);place-items:center;width:100%}.language_switcher__remember mdn-switch{padding:.25rem}:is(.language_switcher__remember mdn-switch):hover{background-color:var(--color-background-secondary)}.language-switcher__list{background-color:var(--color-background-primary);list-style:none;margin:0;padding:0;width:100%}.language-switcher__option{align-items:center;background-color:initial;border:none;color:var(--color-text-primary);column-gap:.25rem;display:flex;font:inherit;margin:0;padding:.25rem;-webkit-text-decoration:none;text-decoration:none;width:100%}.language-switcher__option:hover{background-color:var(--color-background-secondary)}`,""]);let h=(0,o.iv)([g.toString()])}};
+//# sourceMappingURL=3769.aa29e140ef41bf56.js.map

package/dist/client/3769.aa29e140ef41bf56.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"3769.aa29e140ef41bf56.js","sources":["webpack://@mdn/fred/./node_modules/css-loader/dist/runtime/getUrl.js","webpack://@mdn/fred/./components/icon/info.svg","webpack://@mdn/fred/./components/language-switcher/element.js","webpack://@mdn/fred/./components/language-switcher/element.css"],"sourcesContent":["\"use strict\";\n\nmodule.exports = function (url, options) {\n if (!options) {\n options = {};\n }\n if (!url) {\n return url;\n }\n url = String(url.__esModule ? url.default : url);\n\n // If url is already wrapped in quotes, remove them\n if (/^['\"].*['\"]$/.test(url)) {\n url = url.slice(1, -1);\n }\n if (options.hash) {\n url += options.hash;\n }\n\n // Should url be wrapped?\n // See https://drafts.csswg.org/css-values-3/#urls\n if (/[\"'() \\t\\n]|(%20)/.test(url) || options.needQuotes) {\n return \"\\\"\".concat(url.replace(/\"/g, '\\\\\"').replace(/\\n/g, \"\\\\n\"), \"\\\"\");\n }\n return url;\n};","import { svg } from \"lit\"; export default svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4m0-4h.01\"/></svg>`;","import { LitElement, html, nothing } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport infoIcon from \"../icon/info.svg?lit\";\nimport {\n getPreferredLocale,\n resetPreferredLocale,\n setPreferredLocale,\n} from \"../preferred-locale/utils.js\";\n\nimport styles from \"./element.css?lit\";\n\nimport \"../dropdown/element.js\";\nimport \"../switch/element.js\";\n\nexport class MDNLanguageSwitcher extends L10nMixin(LitElement) {\n static styles = styles;\n\n static properties = {\n locale: { type: String },\n native: { type: String },\n translations: { type: Array },\n url: { type: String },\n _preferredLocale: { state: true },\n };\n\n constructor() {\n super();\n /** @type {import(\"@rari\").Translation[]} */\n this.translations = [];\n this.native = \"\";\n this.locale = \"en-US\";\n this.url = \"/\";\n /** @type {string|undefined} */\n this._preferredLocale = undefined;\n }\n\n firstUpdated() {\n this._preferredLocale = getPreferredLocale();\n }\n\n get _isLocalePreferred() {\n return this._preferredLocale == this.locale;\n }\n\n _togglePreferredLocale() {\n if (this._isLocalePreferred) {\n resetPreferredLocale();\n this._preferredLocale = undefined;\n } else {\n setPreferredLocale(this.locale);\n this._preferredLocale = this.locale;\n }\n }\n\n render() {\n const { translations, native, locale, url } = this;\n\n if (translations.length === 0) {\n return nothing;\n }\n\n return html`<div class=\"language-switcher\">\n <mdn-dropdown>\n <button slot=\"button\" class=\"language-switcher__button\" type=\"button\">\n <span>${native ?? locale}</span>\n </button>\n <div\n slot=\"dropdown\"\n class=\"language-switcher__dropdown\"\n id=\"language-switcher__dropdown\"\n >\n <div class=\"language_switcher__remember\">\n <mdn-switch\n @toggle=${this._togglePreferredLocale}\n ?checked=${this._isLocalePreferred}\n >${this.l10n`Remember language`}</mdn-switch\n >\n <mdn-button\n variant=\"plain\"\n .icon=${infoIcon}\n icon-only\n href=\"https://github.com/orgs/mdn/discussions/739\"\n target=\"_blank\"\n title=${this\n .l10n`Enable this setting to always switch to the current language when available. (Click to learn more.)`}\n >${this.l10n`Learn more`}</mdn-button\n >\n </div>\n <ul class=\"language-switcher__list\">\n ${translations\n .filter((x) => x.locale !== locale)\n .sort((a, b) => a.locale.localeCompare(b.locale))\n .map(\n (translation) => html`\n <li>\n <a\n class=\"language-switcher__option\"\n @click=${resetPreferredLocale}\n href=${url.replace(\n `/${locale}/`,\n `/${translation.locale}/`,\n )}\n >${translation.native}</a\n >\n </li>\n `,\n )}\n </ul>\n </div>\n </mdn-dropdown>\n </div>`;\n }\n}\n\ncustomElements.define(\"mdn-language-switcher\", MDNLanguageSwitcher);\n","import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/languages.svg\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.language-switcher{position:relative}.language-switcher__button{align-items:center;background-color:initial;border:none;color:inherit;column-gap:.25rem;cursor:pointer;display:flex;font:inherit;margin:0;padding:0 .5rem}.language-switcher__button:is(:hover,:focus,[aria-expanded=true]){background-color:var(--color-background-secondary)}@media screen and (max-width:480px){.language-switcher__button>span{display:none}}.language-switcher__button:before{background-color:currentcolor;content:\"\";height:1.25rem;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.language-switcher__dropdown{background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);margin:0;padding:.75rem;position:absolute;right:0;width:max-content;z-index:1}.language_switcher__remember{border-bottom:1px solid var(--color-border-primary);display:flex;font-size:var(--font-size-small);place-items:center;width:100%}.language_switcher__remember mdn-switch{padding:.25rem}:is(.language_switcher__remember mdn-switch):hover{background-color:var(--color-background-secondary)}.language-switcher__list{background-color:var(--color-background-primary);list-style:none;margin:0;padding:0;width:100%}.language-switcher__option{align-items:center;background-color:initial;border:none;color:var(--color-text-primary);column-gap:.25rem;display:flex;font:inherit;margin:0;padding:.25rem;-webkit-text-decoration:none;text-decoration:none;width:100%}.language-switcher__option:hover{background-color:var(--color-background-secondary)}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["String","MDNLanguageSwitcher","Array","customElements"],"mappings":"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"}

package/dist/client/3804.52c4bfe4f9ac0087.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export const __webpack_ids__=["3804"];export const __webpack_modules__={96818:function(e,t,n){n.d(t,{Z:()=>d});var o=n(8081),r=n.n(o),a=n(23645),c=n.n(a),i=n(61667),s=n.n(i),l=new n.U(n(73981)),u=c()(r()),_=s()(l);u.push([e.id,`.external:after{background-color:currentcolor;content:"";display:inline-block;height:1em;margin-left:.25em;-webkit-mask-image:url(${_});mask-image:url(${_});-webkit-mask-size:cover;mask-size:cover;width:1em}`,""]);let d=u.toString()},61667:function(e){e.exports=function(e,t){return(t\|\|(t={}),e&&(e=String(e.__esModule?e.default:e),/^['"].*['"]$/.test(e)&&(e=e.slice(1,-1)),t.hash&&(e+=t.hash),/["'() \t\n]\|(%20)/.test(e)\|\|t.needQuotes))?'"'.concat(e.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):e}},73981:function(e,t,n){e.exports=n.p+"external-link.4f3a2dc8e402cae5.svg"}};
2	+ //# sourceMappingURL=3804.52c4bfe4f9ac0087.js.map

package/dist/client/3804.52c4bfe4f9ac0087.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"3804.52c4bfe4f9ac0087.js","sources":["webpack://@mdn/fred/./components/external-link/global.css?d966","webpack://@mdn/fred/./node_modules/css-loader/dist/runtime/getUrl.js"],"sourcesContent":["// 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_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/external-link.svg\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.external:after{background-color:currentcolor;content:\"\";display:inline-block;height:1em;margin-left:.25em;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});-webkit-mask-size:cover;mask-size:cover;width:1em}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","\"use strict\";\n\nmodule.exports = function (url, options) {\n if (!options) {\n options = {};\n }\n if (!url) {\n return url;\n }\n url = String(url.__esModule ? url.default : url);\n\n // If url is already wrapped in quotes, remove them\n if (/^['\"].*['\"]$/.test(url)) {\n url = url.slice(1, -1);\n }\n if (options.hash) {\n url += options.hash;\n }\n\n // Should url be wrapped?\n // See https://drafts.csswg.org/css-values-3/#urls\n if (/[\"'() \\t\\n]|(%20)/.test(url) || options.needQuotes) {\n return \"\\\"\".concat(url.replace(/\"/g, '\\\\\"').replace(/\\n/g, \"\\\\n\"), \"\\\"\");\n }\n return url;\n};"],"names":["n","_","String"],"mappings":"8KAII,EAAgC,IAAAA,EAAA,EAAAA,EAAA,QAChC,EAA0B,IAA4B,KACtDC,EAAqC,IAAgC,GAEzE,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,CAAC,kIAAkI,EAAEA,EAAmC,iBAAiB,EAAEA,EAAmC,oDAAoD,CAAC,CAAE,GAAG,EAEjU,MAAe,EAAwB,QAAQ,E,oBCR/C,EAAO,OAAO,CAAG,SAAU,CAAG,CAAE,CAAO,SACjC,AAAC,GACH,GAAU,CAAC,GAER,IAGL,EAAMC,OAAO,EAAI,UAAU,CAAG,EAAI,OAAO,CAAG,GAGxC,eAAe,IAAI,CAAC,IACtB,GAAM,EAAI,KAAK,CAAC,EAAG,GAAE,EAEnB,EAAQ,IAAI,EACd,IAAO,EAAQ,IAAI,AAAD,EAKhB,oBAAoB,IAAI,CAAC,IAAQ,EAAQ,UAAU,GAC9C,IAAK,MAAM,CAAC,EAAI,OAAO,CAAC,KAAM,OAAO,OAAO,CAAC,MAAO,OAAQ,KAE9D,CACT,C"}

package/dist/client/3892.36bfe7cc7f7173d3.js ADDED Viewed

@@ -0,0 +1,5 @@
+export const __webpack_ids__=["3892"];export const __webpack_modules__={18399:function(t,e,o){o.r(e),o.d(e,{MDNDropdown:()=>MDNDropdown});var n=o(14703),s=o(93707);let MDNDropdown=class MDNDropdown extends n.oi{static styles=s.Z;static properties={open:{type:Boolean},loaded:{type:Boolean,reflect:!0}};constructor(){super(),this.open=!1,this.loaded=!1}get _buttonSlotElements(){return this._slotElements("button")}get _dropdownSlotElements(){return this._slotElements("dropdown")}_slotElements(t){let e=this.shadowRoot?.querySelector(`slot[name="${t}"]`);return e instanceof HTMLSlotElement?e.assignedElements():[]}_globalClick(t){t.composedPath().includes(this)||(this.open=!1)}_toggleDropDown(){this.open=!this.open}_setAriaAttributes(){let t=this._dropdownSlotElements.find(t=>t.id)?.id;for(let e of(t||(t=Math.random().toString(36).replace("0.","uid_"),this._dropdownSlotElements[0]?.setAttribute("id",t)),this._buttonSlotElements))e.setAttribute("aria-expanded",this.open.toString()),t&&e.setAttribute("aria-controls",t)}connectedCallback(){super.connectedCallback(),this._globalClick=this._globalClick.bind(this),document.addEventListener("click",this._globalClick)}render(){return(0,n.dy)`
+      <slot name="button" @click=${this._toggleDropDown}></slot>
+      <slot name="dropdown" ?hidden=${!this.open&&this.loaded}></slot>
+    `}updated(){this._setAriaAttributes()}firstUpdated(){this.loaded=!0}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._globalClick)}};customElements.define("mdn-dropdown",MDNDropdown)},93707:function(t,e,o){o.d(e,{Z:()=>r});var n=o(14703),s=o(8081),l=o.n(s),i=o(23645),d=o.n(i)()(l());d.push([t.id,":host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}",""]);let r=(0,n.iv)([d.toString()])}};
+//# sourceMappingURL=3892.36bfe7cc7f7173d3.js.map

package/dist/client/3892.36bfe7cc7f7173d3.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"3892.36bfe7cc7f7173d3.js","sources":["webpack://@mdn/fred/./components/dropdown/element.js","webpack://@mdn/fred/./components/dropdown/element.css"],"sourcesContent":["import { LitElement, html } from \"lit\";\n\nimport styles from \"./element.css?lit\";\n\n/**\n * This element has two slots, which should take a single element each.\n * The element in the `dropdown` slot is hidden by default,\n * and shown when the element in the `button` slot is clicked.\n * The element in the `dropdown` slot is also hidden when the user clicks\n * outside the `mdn-dropdown` element. Automatically sets `aria-` attributes.\n *\n * @element mdn-dropdown\n *\n * @attr {boolean} open - Whether the dropdown is open or not.\n *\n * @slot button - The element used to toggle the dropdown.\n * @slot dropdown - The element to be shown/hidden in the dropdown.\n */\nexport class MDNDropdown extends LitElement {\n static styles = styles;\n\n static properties = {\n open: { type: Boolean },\n loaded: { type: Boolean, reflect: true },\n };\n\n constructor() {\n super();\n this.open = false;\n this.loaded = false;\n }\n\n get _buttonSlotElements() {\n return this._slotElements(\"button\");\n }\n\n get _dropdownSlotElements() {\n return this._slotElements(\"dropdown\");\n }\n\n /** @param {string} name */\n _slotElements(name) {\n const slot = this.shadowRoot?.querySelector(`slot[name=\"${name}\"]`);\n if (slot instanceof HTMLSlotElement) {\n return slot.assignedElements();\n }\n return [];\n }\n\n /** @param {MouseEvent} event */\n _globalClick(event) {\n if (!event.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n _toggleDropDown() {\n this.open = !this.open;\n }\n\n _setAriaAttributes() {\n let id = this._dropdownSlotElements.find((element) => element.id)?.id;\n if (!id) {\n id = Math.random().toString(36).replace(\"0.\", \"uid_\");\n this._dropdownSlotElements[0]?.setAttribute(\"id\", id);\n }\n for (const element of this._buttonSlotElements) {\n element.setAttribute(\"aria-expanded\", this.open.toString());\n if (id) {\n element.setAttribute(\"aria-controls\", id);\n }\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._globalClick = this._globalClick.bind(this);\n document.addEventListener(\"click\", this._globalClick);\n }\n\n render() {\n return html`\n <slot name=\"button\" @click=${this._toggleDropDown}></slot>\n <slot name=\"dropdown\" ?hidden=${!this.open && this.loaded}></slot>\n `;\n }\n\n updated() {\n this._setAriaAttributes();\n }\n\n firstUpdated() {\n this.loaded = true;\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener(\"click\", this._globalClick);\n }\n}\n\ncustomElements.define(\"mdn-dropdown\", MDNDropdown);\n","import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["MDNDropdown","s","Boolean","HTMLSlotElement","e","Math","document","customElements"],"mappings":"oKAkBO,IAAMA,YAAN,MAAMA,oBAAoB,IAAU,CACzC,OAAO,OAASC,EAAA,CAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,KAAM,CAAE,KAAMC,OAAQ,EACtB,OAAQ,CAAE,KAAMA,QAAS,QAAS,EAAK,CACzC,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,IAAI,CAAG,GACZ,IAAI,CAAC,MAAM,CAAG,EAChB,CAEA,IAAI,qBAAsB,CACxB,OAAO,IAAI,CAAC,aAAa,CAAC,SAC5B,CAEA,IAAI,uBAAwB,CAC1B,OAAO,IAAI,CAAC,aAAa,CAAC,WAC5B,CAGA,cAAc,CAAI,CAAE,CAClB,IAAM,EAAO,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,WAAW,EAAE,EAAK,EAAE,CAAC,SAClE,AAAI,aAAgBC,gBACX,EAAK,gBAAgB,GAEvB,EAAE,AACX,CAGA,aAAa,CAAK,CAAE,CACd,AAAC,EAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,GACrC,KAAI,CAAC,IAAI,CAAG,EAAI,CAEpB,CAEA,iBAAkB,CAChB,IAAI,CAAC,IAAI,CAAG,CAAC,IAAI,CAAC,IAAI,AACxB,CAEA,oBAAqB,CACnB,IAAI,EAAK,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,AAAC,GAAY,EAAQ,EAAE,GAAG,GAKnE,IAAK,IAAMC,KAJN,IACH,EAAKC,KAAK,MAAM,GAAG,QAAQ,CAAC,IAAI,OAAO,CAAC,KAAM,QAC9C,IAAI,CAAC,qBAAqB,CAAC,EAAE,EAAE,aAAa,KAAM,IAE9B,IAAI,CAAC,mBAAmB,EAC5CD,EAAQ,YAAY,CAAC,gBAAiB,IAAI,CAAC,IAAI,CAAC,QAAQ,IACpD,GACFA,EAAQ,YAAY,CAAC,gBAAiB,EAG5C,CAEA,mBAAoB,CAClB,KAAK,CAAC,oBACN,IAAI,CAAC,YAAY,CAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAC/CE,SAAS,gBAAgB,CAAC,QAAS,IAAI,CAAC,YAAY,CACtD,CAEA,QAAS,CACP,MAAO,QAAI,CAAC;iCACiB,EAAE,IAAI,CAAC,eAAe,CAAC;oCACpB,EAAE,CAAC,IAAI,CAAC,IAAI,EAAI,IAAI,CAAC,MAAM,CAAC;IAC5D,CAAC,AACH,CAEA,SAAU,CACR,IAAI,CAAC,kBAAkB,EACzB,CAEA,cAAe,CACb,IAAI,CAAC,MAAM,CAAG,EAChB,CAEA,sBAAuB,CACrB,KAAK,CAAC,uBACNA,SAAS,mBAAmB,CAAC,QAAS,IAAI,CAAC,YAAY,CACzD,CACF,EAEAC,eAAe,MAAM,CAAC,eAAgBP,Y,sFCjGlC,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,+FAAgG,GAAG,EAE5I,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}

package/dist/client/3895.226a48b6bcda42d9.js ADDED Viewed

@@ -0,0 +1,9 @@
+export const __webpack_ids__=["3895"];export const __webpack_modules__={83294:function(e,t,n){n.r(t);var o=n(14703),r=n(69535),a=n(12655);let MDNPlacementNote=class MDNPlacementNote extends(0,r.q)(o.oi){static styles=a.Z;render(){return(0,o.dy)`<a
+      href="/en-US/advertising"
+      class="placement-note"
+      data-glean="pong: pong-&gt;about"
+      target="_blank"
+      rel="noreferrer"
+      >${this.l10n("placement-note")}</a
+    >`}};customElements.define("mdn-placement-note",MDNPlacementNote)},12655:function(e,t,n){n.d(t,{Z:()=>d});var o=n(14703),r=n(8081),a=n.n(r),c=n(23645),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.iv)([i.toString()])}};
+//# sourceMappingURL=3895.226a48b6bcda42d9.js.map

package/dist/client/3895.226a48b6bcda42d9.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"3895.226a48b6bcda42d9.js","sources":["webpack://@mdn/fred/./components/placement-note/element.js","webpack://@mdn/fred/./components/placement-note/element.css"],"sourcesContent":["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->about\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >${this.l10n(\"placement-note\")}</a\n >`;\n }\n}\n\ncustomElements.define(\"mdn-placement-note\", MDNPlacementNote);\n","import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.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"],"names":["MDNPlacementNote","customElements"],"mappings":"0IAMA,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,sFCjBxC,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,wYAAyY,GAAG,EAErb,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}