npm - @mdn/fred - Versions diffs - 0.1.0 → 0.2.0 - Mend

@mdn/fred 0.1.0 → 0.2.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 (640) hide show

package/dist/client/{1916.bc7551ab839d52f8.js.map → 1916.53595bf8d5201723.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"1916.~~bc7551ab839d52f8~~.js","sources":["webpack://@mdn/fred/./components/compat-table-lazy/element.js"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { LitElement, html } from \"lit\";\n\nimport \"../compat-table/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport {\n BCD_BASE_URL,\n DEFAULT_LOCALE,\n ISSUE_METADATA_TEMPLATE,\n} from \"../compat-table/constants.js\";\n\n/*\n @typedef {{data: import(\"@bcd\").Identifier, browsers: import(\"@bcd\").Browsers}} Compat\n /\n\nexport class MDNCompatTableLazy extends L10nMixin(LitElement) {\n static properties = {\n query: {},\n locale: {},\n };\n\n constructor() {\n super();\n this.query = \"\";\n this.locale = DEFAULT_LOCALE;\n }\n\n connectedCallback() {\n super.connectedCallback();\n }\n\n get _issueUrl() {\n const url = \"https://github.com/mdn/browser-compat-data/issues/new\";\n const sp = new URLSearchParams();\n const metadata = ISSUE_METADATA_TEMPLATE.replaceAll(\n \"$DATE\",\n new Date().toISOString(),\n )\n .replaceAll(\"$QUERY_ID\", this.query)\n .trim();\n sp.set(\n \"mdn-url\",\n `https://developer.mozilla.org${globalThis.location.pathname}`,\n );\n sp.set(\"metadata\", metadata);\n sp.set(\"title\", `${this.query} - Missing compatibility data`);\n sp.set(\"template\", \"data-problem.yml\");\n\n return `${url}?${sp.toString()}`;\n }\n\n get _issueLink() {\n const onClick = (/* @type {MouseEvent} / event) => {\n event.preventDefault();\n window.open(this._issueUrl, \"_blank\", \"noopener,noreferrer\");\n };\n\n return html`<a\n class=\"bc-github-link external external-icon\"\n href=\"#\"\n @click=${onClick}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n title=${this.l10n(\n \"compat-link-report-missing-title\",\n )`Report missing compatibility data`}\n >${this.l10n(\"compat-link-report-missing\")`Report this issue`}</a\n >`;\n }\n\n _dataTask = new Task(this, {\n args: () => [this.query],\n task: async ([query], { signal }) => {\n const response = await fetch(\n `${BCD_BASE_URL}/bcd/api/v0/current/${query}.json`,\n { signal },\n );\n if (!response.ok) {\n console.error(\"Failed to fetch BCD data:\", response);\n\n if (response.status === 404) {\n throw html`No compatibility data found for <code>${query}</code>.\n (${this._issueLink})`;\n }\n\n throw html`Got HTTP ${response.status} when fetching browser\n compatibility data for <code>${query}</code>`;\n }\n return /* @type {Promise<Compat>} / response.json();\n },\n });\n\n render() {\n return this._dataTask.render({\n initial: () => html`<p>${this.l10n(\"compat-loading\")`Loading…`}</p>`,\n pending: () => html`<p>${this.l10n(\"compat-loading\")`Loading…`}</p>`,\n\n complete:\n /\n @param {Compat} compat\n */\n (compat) =>\n compat\n ? html`<mdn-compat-table\n query=${this.query}\n locale=${this.locale}\n .data=${compat.data}\n .browserInfo=${compat.browsers}\n ></mdn-compat-table>`\n : html`<p>No compatibility data found</p>`,\n error: (error) => html`<p>${error}</p>`,\n });\n }\n}\n\ncustomElements.define(\"mdn-compat-table-lazy\", MDNCompatTableLazy);\n"],"names":["MDNCompatTableLazy","URLSearchParams","Date","globalThis","window","fetch","console","customElements"],"mappings":"qNAeO,IAAMA,mBAAN,MAAMA,0BAA2B,QAAU,IAAU,EAC1D,OAAO,WAAa,CAClB,MAAO,CAAC,EACR,OAAQ,CAAC,CACX,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,KAAK,CAAG,GACb,IAAI,CAAC,MAAM,CAAG,IAAc,AAC9B,CAEA,mBAAoB,CAClB,KAAK,CAAC,mBACR,CAEA,IAAI,WAAY,CAEd,IAAM,EAAK,IAAIC,gBACT,EAAW,eAAkC,CACjD,QACA,IAAIC,OAAO,WAAW,IAErB,UAAU,CAAC,YAAa,IAAI,CAAC,KAAK,EAClC,IAAI,GASP,OARA,EAAG,GAAG,CACJ,UACA,CAAC,6BAA6B,EAAEC,WAAW,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAEhE,EAAG,GAAG,CAAC,WAAY,GACnB,EAAG,GAAG,CAAC,QAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,6BAA6B,CAAC,EAC5D,EAAG,GAAG,CAAC,WAAY,oBAEZ,yDAAU,EAAG,QAAQ,IAAI,AAClC,CAEA,IAAI,YAAa,~~CAMf~~,~~MAAO~~,~~QAAI~~,~~CAAC;;;aAGH,EARO,~~AAA2B,IACzC,EAAM,cAAc,GACpBC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAE,SAAU,sBACxC,~~EAKmB~~;;;YAGX,EAAE,IAAI,CAAC,IAAI,CACf,mCACD,CAAC,iCAAiC,CAAC,CAAC;OACpC,EAAE,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;KAC/D,CAAC,AACJ,CAEA,UAAY,IAAI,IAAI,CAAC,IAAI,CAAE,CACzB,KAAM,IAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CACxB,KAAM,MAAO,CAAC,EAAM,CAAE,CAAE,QAAM,CAAE,IAC9B,IAAM,EAAW,MAAMC,MACrB,CAAC,EAAE,IAAY,CAAC,oBAAoB,EAAE,EAAM,KAAK,CAAC,CAClD,CAAE,QAAO,GAEX,GAAI,CAAC,EAAS,EAAE,CAAE,CAGhB,GAFAC,QAAQ,KAAK,CAAC,4BAA6B,GAEvC,AAAoB,MAApB,EAAS,MAAM,CACjB,KAAM,QAAI,CAAC,sCAAsC,EAAE,EAAM;aACtD,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,AAGzB,MAAM,QAAI,CAAC,SAAS,EAAE,EAAS,MAAM,CAAC;uCACP,EAAE,EAAM,OAAO,CAAC,AACjD,CACA,OAAsC,EAAS,IAAI,EACrD,CACF,EAAG,AAEH,SAAS,CACP,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAC3B,QAAS,IAAM,QAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CACpE,QAAS,IAAM,QAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAEpE,SAIE,AAAC,GACC,EACI,QAAI,CAAC;sBACG,EAAE,IAAI,CAAC,KAAK,CAAC;uBACZ,EAAE,IAAI,CAAC,MAAM,CAAC;sBACf,EAAE,EAAO,IAAI,CAAC;6BACP,EAAE,EAAO,QAAQ,CAAC;kCACb,CAAC,CACrB,QAAI,CAAC,kCAAkC,CAAC,CAChD,MAAO,AAAC,GAAU,QAAI,CAAC,GAAG,EAAE,EAAM,IAAI,CAAC,AACzC,EACF,CACF,EAEAC,eAAe,MAAM,CAAC,wBAAyBP,mB"}
1	+ {"version":3,"file":"1916.53595bf8d5201723.js","sources":["webpack://@mdn/fred/./components/compat-table-lazy/element.js"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { LitElement, html } from \"lit\";\n\nimport \"../compat-table/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport {\n BCD_BASE_URL,\n DEFAULT_LOCALE,\n ISSUE_METADATA_TEMPLATE,\n} from \"../compat-table/constants.js\";\n\n/*\n @typedef {{data: import(\"@bcd\").Identifier, browsers: import(\"@bcd\").Browsers}} Compat\n /\n\nexport class MDNCompatTableLazy extends L10nMixin(LitElement) {\n static properties = {\n query: {},\n locale: {},\n };\n\n constructor() {\n super();\n this.query = \"\";\n this.locale = DEFAULT_LOCALE;\n }\n\n connectedCallback() {\n super.connectedCallback();\n }\n\n get _issueUrl() {\n const url = \"https://github.com/mdn/browser-compat-data/issues/new\";\n const sp = new URLSearchParams();\n const metadata = ISSUE_METADATA_TEMPLATE.replaceAll(\n \"$DATE\",\n new Date().toISOString(),\n )\n .replaceAll(\"$QUERY_ID\", this.query)\n .trim();\n sp.set(\n \"mdn-url\",\n `https://developer.mozilla.org${globalThis.location.pathname}`,\n );\n sp.set(\"metadata\", metadata);\n sp.set(\"title\", `${this.query} - Missing compatibility data`);\n sp.set(\"template\", \"data-problem.yml\");\n\n return `${url}?${sp.toString()}`;\n }\n\n get _issueLink() {\n const onClick = (/* @type {MouseEvent} / event) => {\n event.preventDefault();\n window.open(this._issueUrl, \"_blank\", \"noopener,noreferrer\");\n };\n\n return html`<a\n class=\"bc-github-link external external-icon\"\n href=\"#\"\n @click=${onClick}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n title=${this.l10n(\n \"compat-link-report-missing-title\",\n )`Report missing compatibility data`}\n >${this.l10n(\"compat-link-report-missing\")`Report this issue`}</a\n >`;\n }\n\n _dataTask = new Task(this, {\n args: () => [this.query],\n task: async ([query], { signal }) => {\n const response = await fetch(\n `${BCD_BASE_URL}/bcd/api/v0/current/${query}.json`,\n { signal },\n );\n if (!response.ok) {\n console.error(\"Failed to fetch BCD data:\", response);\n\n if (response.status === 404) {\n throw html`No compatibility data found for <code>${query}</code>.\n (${this._issueLink})`;\n }\n\n throw html`Got HTTP ${response.status} when fetching browser\n compatibility data for <code>${query}</code>`;\n }\n return /* @type {Promise<Compat>} / response.json();\n },\n });\n\n render() {\n return this._dataTask.render({\n initial: () => html`<p>${this.l10n(\"compat-loading\")`Loading…`}</p>`,\n pending: () => html`<p>${this.l10n(\"compat-loading\")`Loading…`}</p>`,\n\n complete:\n /\n @param {Compat} compat\n */\n (compat) =>\n compat\n ? html`<mdn-compat-table\n query=${this.query}\n locale=${this.locale}\n .data=${compat.data}\n .browserInfo=${compat.browsers}\n ></mdn-compat-table>`\n : html`<p>No compatibility data found</p>`,\n error: (error) => html`<p>${error}</p>`,\n });\n }\n}\n\ncustomElements.define(\"mdn-compat-table-lazy\", MDNCompatTableLazy);\n"],"names":["MDNCompatTableLazy","URLSearchParams","Date","globalThis","window","fetch","console","customElements"],"mappings":"qNAeO,IAAMA,mBAAN,MAAMA,0BAA2B,QAAU,IAAU,EAC1D,OAAO,WAAa,CAClB,MAAO,CAAC,EACR,OAAQ,CAAC,CACX,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,KAAK,CAAG,GACb,IAAI,CAAC,MAAM,CAAG,IAAc,AAC9B,CAEA,mBAAoB,CAClB,KAAK,CAAC,mBACR,CAEA,IAAI,WAAY,CAEd,IAAM,EAAK,IAAIC,gBACT,EAAW,eAAkC,CACjD,QACA,IAAIC,OAAO,WAAW,IAErB,UAAU,CAAC,YAAa,IAAI,CAAC,KAAK,EAClC,IAAI,GASP,OARA,EAAG,GAAG,CACJ,UACA,CAAC,6BAA6B,EAAEC,WAAW,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAEhE,EAAG,GAAG,CAAC,WAAY,GACnB,EAAG,GAAG,CAAC,QAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,6BAA6B,CAAC,EAC5D,EAAG,GAAG,CAAC,WAAY,oBAEZ,yDAAU,EAAG,QAAQ,IAAI,AAClC,CAEA,IAAI,YAAa,CACf,IAAM,EAAU,AAA2B,IACzC,EAAM,cAAc,GACpBC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAE,SAAU,sBACxC,EAEA,MAAO,QAAI,CAAC;;;aAGH,EAAE,EAAQ;;;YAGX,EAAE,IAAI,CAAC,IAAI,CACf,mCACD,CAAC,iCAAiC,CAAC,CAAC;OACpC,EAAE,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;KAC/D,CAAC,AACJ,CAEA,UAAY,IAAI,IAAI,CAAC,IAAI,CAAE,CACzB,KAAM,IAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CACxB,KAAM,MAAO,CAAC,EAAM,CAAE,CAAE,QAAM,CAAE,IAC9B,IAAM,EAAW,MAAMC,MACrB,CAAC,EAAE,IAAY,CAAC,oBAAoB,EAAE,EAAM,KAAK,CAAC,CAClD,CAAE,QAAO,GAEX,GAAI,CAAC,EAAS,EAAE,CAAE,CAGhB,GAFAC,QAAQ,KAAK,CAAC,4BAA6B,GAEvC,AAAoB,MAApB,EAAS,MAAM,CACjB,KAAM,QAAI,CAAC,sCAAsC,EAAE,EAAM;aACtD,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,AAGzB,MAAM,QAAI,CAAC,SAAS,EAAE,EAAS,MAAM,CAAC;uCACP,EAAE,EAAM,OAAO,CAAC,AACjD,CACA,OAAsC,EAAS,IAAI,EACrD,CACF,EAAG,AAEH,SAAS,CACP,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAC3B,QAAS,IAAM,QAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CACpE,QAAS,IAAM,QAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAEpE,SAIE,AAAC,GACC,EACI,QAAI,CAAC;sBACG,EAAE,IAAI,CAAC,KAAK,CAAC;uBACZ,EAAE,IAAI,CAAC,MAAM,CAAC;sBACf,EAAE,EAAO,IAAI,CAAC;6BACP,EAAE,EAAO,QAAQ,CAAC;kCACb,CAAC,CACrB,QAAI,CAAC,kCAAkC,CAAC,CAChD,MAAO,AAAC,GAAU,QAAI,CAAC,GAAG,EAAE,EAAM,IAAI,CAAC,AACzC,EACF,CACF,EAEAC,eAAe,MAAM,CAAC,wBAAyBP,mB"}

package/dist/client/2254.85c84b41fe477e9f.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ :is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) .modules) input[type=radio]:not(:checked)~a.lets-begin,:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) .modules) input[type=radio]:not(:checked)~ol.modules-list{display:none}:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list{display:grid;grid-template-areas:"started core extensions" "hr hr hr" "mod mod mod" "cta cta cta";grid-template-columns:auto;margin:0;padding:0}@media (426px < width){:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list{grid-template-areas:"started core extensions spacer" "hr hr hr hr" "mod mod mod mod" "cta cta cta cta";grid-template-columns:auto auto auto 1fr}}:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list):before{border:none;border-top:1px solid var(--text-inactive);content:"";grid-area:hr;margin:0 0 1.5rem;width:100%}:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item{display:contents}:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>input:checked+label{color:var(--text-primary)}:is(:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>input:checked+label):before{height:0;position:absolute;transform:translate3d(-.75rem,.75rem,0);width:0}:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>input:checked:focus-visible+label{outline-color:var(--accent-primary);outline-offset:1px;outline-style:auto}:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>input:not(:checked)+label{color:var(--text-secondary);opacity:.775}:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>label{cursor:pointer;width:max-content}#modules-0:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>input,#modules-0:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>label{grid-area:started}#modules-0:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>input:checked+label:before{content:url(/static/client/curriculum-modules-underline.a71f4b586aa1b1da.svg#1)}#modules-1:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>input,#modules-1:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>label{grid-area:core}@media (426px < width){#modules-1:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>input,#modules-1:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>label{margin-left:2rem}}#modules-1:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>input:checked+label:before{content:url(/static/client/curriculum-modules-underline.a71f4b586aa1b1da.svg#2)}#modules-2:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>input,#modules-2:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>label{grid-area:extensions}@media (426px < width){#modules-2:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>input,#modules-2:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>label{margin-left:2rem}}#modules-2:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>input:checked+label:before{content:url(/static/client/curriculum-modules-underline.a71f4b586aa1b1da.svg#3)}:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>ol.modules-list{grid-area:mod;margin:0}:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>a.lets-begin{grid-area:cta;margin-left:.5rem;margin-top:2rem;width:fit-content}@media (769px < width){:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list-list) li.modules-list-list-item)>a.lets-begin{margin-left:0}}:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list{display:grid;flex-wrap:wrap;gap:1rem;grid-template-columns:1fr 1fr 1fr;justify-items:center;margin:0;overflow:scroll;padding:.5rem;scroll-snap-type:inline mandatory}@media (769px < width){:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list{overflow:inherit;padding:0}}:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list) :focus-visible{outline-offset:-2px}:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list) li.module-list-item{--spacing:1rem;--icon-size:4rem;display:block}:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list) li.module-list-item)>a{background-color:var(--curriculum-bg-color-list-item-body);border:1px solid var(--curriculum-border-color);border-radius:var(--elem-radius);box-shadow:var(--curriculum-shadow);display:flex;flex-direction:column;height:100%;justify-self:center;max-width:20rem;min-width:15rem;overflow:auto;padding:0;scroll-snap-align:center;-webkit-text-decoration:none;text-decoration:none;width:100%}:is(:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list) li.module-list-item)>a):hover{border-color:var(--curriculum-border-color-hover);-webkit-text-decoration:none;text-decoration:none}@media (769px < width){:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list) li.module-list-item)>a{min-width:auto}}:is(:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list) li.module-list-item)>a)>header{align-items:center;background-color:var(--curriculum-bg-color-list-item-header);display:flex;flex-direction:column;font-weight:var(--font-weight-bold);height:10.5rem;height:calc(var(--spacing)*3 + var(--icon-size) + 2lh);padding:var(--spacing);row-gap:var(--spacing)}:is(:is(:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list) li.module-list-item)>a)>header) svg.topic-icon{height:var(--icon-size);width:var(--icon-size)}:is(:is(:is(:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list) li.module-list-item)>a)>header) svg.topic-icon) circle{fill:var(--curriculum-bg-color-list-item-icon)}:is(:is(:is(:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list) li.module-list-item)>a)>header) svg.topic-icon) path{fill:var(--curriculum-color-list-item-icon)}:is(:is(:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list) li.module-list-item)>a)>header)>span{color:var(--text-primary);margin:0 auto;text-align:center}:is(:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list) li.module-list-item)>a)>section{align-items:center;display:flex;flex-direction:column;flex-grow:1;font-size:var(--font-size-normal);justify-content:space-between;padding:var(--spacing)}:is(:is(:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list) li.module-list-item)>a)>section) p{color:var(--text-secondary);margin:0;text-align:center}:is(:is(:is(:is(:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list) li.module-list-item)>a)>section) p:last-child{color:var(--curriculum-color-topic);font-weight:var(--font-weight-bold)}@media (426px < width){:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list{grid-template-columns:1fr 1fr}}@media (1441px < width){:is(:is(.curriculum-content-container.curriculum-overview,.curriculum-content-container) .curriculum-content) ol.modules-list{grid-template-columns:1fr 1fr 1fr}}
2	+ /# sourceMappingURL=2254.85c84b41fe477e9f.css.map/

package/dist/client/2254.85c84b41fe477e9f.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"2254.85c84b41fe477e9f.css","sources":["webpack://@mdn/fred/./components/curriculum/module-list.css"],"sourcesContent":[".curriculum-content-container.curriculum-overview,\n.curriculum-content-container {\n .curriculum-content {\n .modules {\n input[type=\"radio\"]:not(:checked) ~ a.lets-begin,\n input[type=\"radio\"]:not(:checked) ~ ol.modules-list {\n display: none;\n }\n }\n\n ol.modules-list-list {\n display: grid;\n\n grid-template-areas:\n \"started core extensions\"\n \"hr hr hr\"\n \"mod mod mod\"\n \"cta cta cta\";\n grid-template-columns: auto;\n\n padding: 0;\n margin: 0;\n\n @media (--screen-small-and-wider) {\n grid-template-areas:\n \"started core extensions spacer\"\n \"hr hr hr hr\"\n \"mod mod mod mod\"\n \"cta cta cta cta\";\n grid-template-columns: auto auto auto 1fr;\n }\n\n &::before {\n grid-area: hr;\n\n width: 100%;\n\n margin: 0 0 1.5rem;\n\n content: \"\";\n\n border: none;\n border-top: 1px solid var(--text-inactive);\n }\n\n li.modules-list-list-item {\n display: contents;\n\n > input:checked + label {\n color: var(--text-primary);\n\n &::before {\n position: absolute;\n\n width: 0;\n height: 0;\n\n transform: translate3d(-0.75rem, 0.75rem, 0);\n }\n }\n\n > input:checked:focus-visible + label {\n outline-style: auto;\n outline-color: var(--accent-primary);\n outline-offset: 1px;\n }\n\n > input:not(:checked) + label {\n color: var(--text-secondary);\n opacity: 0.775;\n }\n\n > label {\n width: max-content;\n cursor: pointer;\n }\n\n &#modules-0 {\n > label,\n > input {\n grid-area: started;\n }\n\n > input:checked + label::before {\n content: url(\"./assets/curriculum-modules-underline.svg#1\");\n }\n }\n\n &#modules-1 {\n > label,\n > input {\n grid-area: core;\n\n @media (--screen-small-and-wider) {\n margin-left: 2rem;\n }\n }\n\n > input:checked + label::before {\n content: url(\"./assets/curriculum-modules-underline.svg#2\");\n }\n }\n\n &#modules-2 {\n > label,\n > input {\n grid-area: extensions;\n\n @media (--screen-small-and-wider) {\n margin-left: 2rem;\n }\n }\n\n > input:checked + label::before {\n content: url(\"./assets/curriculum-modules-underline.svg#3\");\n }\n }\n\n > ol.modules-list {\n grid-area: mod;\n margin: 0;\n }\n\n > a.lets-begin {\n grid-area: cta;\n\n width: fit-content;\n\n margin-top: 2rem;\n margin-left: 0.5rem;\n\n @media (--screen-medium-and-wider) {\n margin-left: 0;\n }\n }\n }\n }\n\n ol.modules-list {\n display: grid;\n\n flex-wrap: wrap;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n gap: 1rem;\n justify-items: center;\n\n padding: 0.5rem;\n margin: 0;\n\n overflow: scroll;\n\n scroll-snap-type: inline mandatory;\n\n @media (--screen-medium-and-wider) {\n padding: 0;\n overflow: inherit;\n }\n\n :focus-visible {\n outline-offset: -2px;\n }\n\n li.module-list-item {\n --spacing: 1rem;\n --icon-size: 4rem;\n display: block;\n\n > a {\n display: flex;\n\n flex-direction: column;\n\n justify-self: center;\n\n width: 100%;\n min-width: 15rem;\n max-width: 20rem;\n height: 100%;\n\n padding: 0;\n\n overflow: auto;\n\n text-decoration: none;\n\n scroll-snap-align: center;\n\n background-color: var(--curriculum-bg-color-list-item-body);\n border: 1px solid var(--curriculum-border-color);\n border-radius: var(--elem-radius);\n box-shadow: var(--curriculum-shadow);\n\n &:hover {\n text-decoration: none;\n border-color: var(--curriculum-border-color-hover);\n }\n\n @media (--screen-medium-and-wider) {\n min-width: initial;\n }\n\n > header {\n display: flex;\n\n flex-direction: column;\n\n row-gap: var(--spacing);\n align-items: center;\n\n height: 10.5rem;\n height: calc(3 * var(--spacing) + var(--icon-size) + 2lh);\n\n padding: var(--spacing);\n\n font-weight: var(--font-weight-bold);\n\n background-color: var(--curriculum-bg-color-list-item-header);\n\n svg.topic-icon {\n width: var(--icon-size);\n height: var(--icon-size);\n\n circle {\n fill: var(--curriculum-bg-color-list-item-icon);\n }\n\n path {\n fill: var(--curriculum-color-list-item-icon);\n }\n }\n\n > span {\n margin: 0 auto;\n color: var(--text-primary);\n text-align: center;\n }\n }\n\n > section {\n display: flex;\n\n flex-grow: 1;\n flex-direction: column;\n\n align-items: center;\n justify-content: space-between;\n\n padding: var(--spacing);\n\n font-size: var(--font-size-normal);\n\n p {\n margin: 0;\n color: var(--text-secondary);\n text-align: center;\n }\n\n p:last-child {\n font-weight: var(--font-weight-bold);\n color: var(--curriculum-color-topic);\n }\n }\n }\n }\n\n @media (--screen-small-and-wider) {\n grid-template-columns: 1fr 1fr;\n }\n\n @media (--screen-xxlarge) {\n grid-template-columns: 1fr 1fr 1fr;\n }\n }\n }\n}\n"],"names":[],"mappings":"AAIM,qVAEE,YACF,CAGF,mIACE,YAAa,CAEb,yGAIqB,CACrB,0BAA2B,CAG3B,QAAS,CADT,SAoHF,CAjHE,uBAbF,mIAcI,iJAIgC,CAChC,wCA2GJ,CA1GE,CAEA,+IASE,WAAY,CACZ,yCAA0C,CAH1C,UAAW,CANX,YAAa,CAIb,iBAAkB,CAFlB,UAQF,CAEA,kKACE,gBAyFF,CAvFE,2LACE,yBAUF,CARE,uMAIE,QAAS,CAHT,iBAAkB,CAKlB,uCAA4C,CAH5C,OAIF,CAGF,yMAEE,mCAAoC,CACpC,kBAAmB,CAFnB,kBAGF,CAEA,iMACE,2BAA4B,CAC5B,YACF,CAEA,6KAEE,cAAe,CADf,iBAEF,CAGE,8WAEE,iBACF,CAEA,4MACE,+EACF,CAIA,8WAEE,cAKF,CAHE,uBAJF,8WAKI,gBAEJ,CADE,CAGF,4MACE,+EACF,CAIA,8WAEE,oBAKF,CAHE,uBAJF,8WAKI,gBAEJ,CADE,CAGF,4MACE,+EACF,CAGF,uLACE,aAAc,CACd,QACF,CAEA,oLACE,aAAc,CAKd,iBAAmB,CADnB,eAAgB,CAFhB,iBAQF,CAHE,uBARF,oLASI,aAEJ,CADE,CAKN,8HACE,YAAa,CAEb,cAAe,CAIf,QAAS,CAFT,iCAAkC,CAGlC,oBAAqB,CAGrB,QAAS,CAET,eAAgB,CAHhB,aAAe,CAKf,iCAyHF,CAvHE,uBAjBF,8HAmBI,gBAAiB,CADjB,SAsHJ,CApHE,CAEA,kJACE,mBACF,CAEA,uJACE,cAAe,CACf,gBAAiB,CACjB,aAkGF,CAhGE,8JAoBE,0DAA2D,CAC3D,+CAAgD,CAChD,gCAAiC,CACjC,mCAAoC,CAtBpC,YAAa,CAEb,qBAAsB,CAOtB,WAAY,CALZ,mBAAoB,CAIpB,eAAgB,CADhB,eAAgB,CAMhB,aAAc,CAFd,SAAU,CAMV,wBAAyB,CAFzB,4BAAqB,CAArB,oBAAqB,CATrB,UAwFF,CAtEE,yKAEE,iDAAkD,CADlD,4BAAqB,CAArB,oBAEF,CAEA,uBA9BF,8JA+BI,cAgEJ,CA/DE,CAEA,0KAME,kBAAmB,CASnB,4DAA6D,CAd7D,YAAa,CAEb,qBAAsB,CAUtB,mCAAoC,CALpC,cAAe,CACf,sDAAyD,CAEzD,sBAAuB,CANvB,sBA8BF,CAlBE,8LAEE,uBAAwB,CADxB,sBAUF,CAPE,0MACE,8CACF,CAEA,wMACE,2CACF,CAGF,oLAEE,yBAA0B,CAD1B,aAAc,CAEd,iBACF,CAGF,2KAME,kBAAmB,CALnB,YAAa,CAGb,qBAAsB,CADtB,WAAY,CAQZ,iCAAkC,CAJlC,6BAA8B,CAE9B,sBAcF,CAVE,kLAEE,2BAA4B,CAD5B,QAAS,CAET,iBACF,CAEA,6LAEE,mCAAoC,CADpC,mCAEF,CAKN,uBAjIF,8HAkII,6BAMJ,CALE,CAEA,wBArIF,8HAsII,iCAEJ,CADE"}

package/dist/client/2299.15bde599f83bc9f8.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export const __webpack_ids__=["2299"];export const __webpack_modules__={54681:function(t,o,n){n.d(o,{Z:()=>_});var e=n(8081),r=n.n(e),i=n(23645),a=n.n(i)()(r());a.push([t.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}",""]);let _=a.toString()}};
2	+ //# sourceMappingURL=2299.15bde599f83bc9f8.js.map

package/dist/client/2299.15bde599f83bc9f8.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"2299.15bde599f83bc9f8.js","sources":["webpack://@mdn/fred/./components/global/global.css?272a"],"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\";\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{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"],"names":[],"mappings":"iJAGI,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,0MAA2M,GAAG,EAEvP,MAAe,EAAwB,QAAQ,E"}

package/dist/client/{2448.92286b4e96ad1c02.js → 2448.34e8a46d8ac913b9.js} RENAMED Viewed

@@ -1,18 +1,18 @@
-/*! For license information please see 2448.92286b4e96ad1c02.js.LICENSE.txt */
-export const __webpack_ids__=["2448"];export const __webpack_modules__={81123:function(e,t,s){e.exports=s.p+"survey.aa219aee52f606e2.svg"},2211:function(e,t,s){s.r(t),s.d(t,{MDNSurvey:()=>MDNSurvey});var r=s(14703),i=s(13566),o=s(51968);s(50272);var n=s(69535),a=s(44413),_=s(62264);let u=[{key:"something unique in the current surveys",bucket:Object.freeze({BLOG_FEEDBACK_2023:"BLOG_FEEDBACK_2023",BROWSER_SURVEY_OCT_2022:"BROWSER_SURVEY_OCT_2022",CONTENT_DISCOVERY_2023:"CONTENT_DISCOVERY_2023",CSS_CASCADE_2022:"CSS_CASCADE_2022",DE_LOCALE_2024:"DE_LOCALE_2024",DE_LOCALE_2024_EVAL:"DE_LOCALE_2024_EVAL",FIREFOX_WEB_COMPAT_2023:"FIREFOX_WEB_COMPAT_2023",INTEROP_2023:"INTEROP_2023",IT_LOCALE_2025:"IT_LOCALE_2025",WEB_COMPONENTS_2023:"WEB_COMPONENTS_2023",DISCOVERABILITY_2023:"DISCOVERABILITY_2023",WEB_SECURITY_2023:"WEB_SECURITY_2023",DISCOVERABILITY_AUG_2023:"DISCOVERABILITY_AUG_2023",WEB_APP_AUGUST_2024:"WEB_APP_AUGUST_2024",HOMEPAGE_FEEDBACK_2024:"HOMEPAGE_FEEDBACK_2024",WEBDX_EDITING_2024:"WEBDX_EDITING_2024",HOUSE_SURVEY_2025:"HOUSE_SURVEY_2025",JS_PROPOSALS_2025:"JS_PROPOSALS_2025",FIRST_FRED_2025:"FIRST_FRED_2025"}).FIRST_FRED_2025,show:e=>/^\/[a-z]{2}(-[A-Z]{2})?\/docs\/Web\/CSS/.test(e),src:e=>{let t=new URL("https://survey.alchemer.com/s3/8385674/MDN-short-survey-Fred");return t.searchParams.set("referrer",e),t.toString()},teaser:(0,r.dy)`Fred is <strong>MDN</strong>'s shiny new frontend!`,question:"How satisfied are you with this new MDN frontend?",footnote:"fred = fr(ont)e(n)d",rateFrom:0,rateTill:1,start:0,end:1/0}];function h(e){let t,s=`survey.${e}`;try{t=JSON.parse(localStorage?.getItem(s)??"{}")}catch{t={}}return 0===Object.keys(t).length&&d(e,t={random:Math.random(),seen_at:null,dismissed_at:null,submitted_at:null,opened_at:null}),t}function d(e,t){let s=`survey.${e}`;try{localStorage?.setItem(s,JSON.stringify(t))}catch{}}let MDNSurvey=class MDNSurvey extends(0,n.q)(r.oi){static styles=_.Z;static ssr=!1;constructor(){super(),this._survey=void 0,this._surveyState=void 0,this._isOpen=!1,this._force=!1,this._source=void 0,this._detailsRef=(0,o.V)()}connectedCallback(){super.connectedCallback(),this.#e(),this.#t()}disconnectedCallback(){super.disconnectedCallback(),this.#s()}#e(){void 0!==globalThis.window&&(this._force=globalThis.location.hash.startsWith("#FORCE_SURVEY="),this._survey=this.#r(),this._survey&&(this._surveyState=h(this._survey.bucket),this._source="function"==typeof this._survey.src?this._survey.src(globalThis.location.pathname):this._survey.src,this.#i()))}#r(){return u.find(e=>{if(this._force)return e.key===globalThis.location.hash.slice(14);if(void 0===globalThis.window||!e.show(globalThis.location.pathname))return!1;let t=Date.now();if(t<e.start||e.end<t)return!1;let s=h(e.bucket);return s.random>=e.rateFrom&&s.random<e.rateTill})}#i(){this._survey&&this._surveyState&&!this._surveyState.seen_at&&(this._surveyState={...this._surveyState,seen_at:Date.now()},d(this._survey.bucket,this._surveyState),this.#o("seen"))}#n(){this._survey&&this._surveyState&&(this._surveyState={...this._surveyState,dismissed_at:Date.now()},d(this._survey.bucket,this._surveyState),this.#o("dismissed"),this.requestUpdate())}#a(){if(!this._survey||!this._surveyState||this._isOpen)return;let e=this._detailsRef.value;e&&e.open&&(this._surveyState={...this._surveyState,opened_at:Date.now()},d(this._survey.bucket,this._surveyState),this.#o("opened"),this._isOpen=!0,this.requestUpdate())}#_(){this._survey&&this._surveyState&&(this._surveyState={...this._surveyState,submitted_at:Date.now()},d(this._survey.bucket,this._surveyState),this.#o("submitted"),this.requestUpdate())}#o(e){this._survey&&console.log(`Survey: ${e} ${this._survey.bucket}`)}#t(){this._messageListener=e=>{"https://survey.alchemer.com"===e.origin&&"submit"===e.data&&this.#_()},window.addEventListener("message",this._messageListener,!1)}#s(){this._messageListener&&window.removeEventListener("message",this._messageListener,!1)}render(){if(!this._survey||!this._surveyState||!this._force&&(this._surveyState.dismissed_at||this._surveyState?.submitted_at))return r.Ld;let e=this.l10n`Hide this survey`;return(0,r.dy)`
+/*! For license information please see 2448.34e8a46d8ac913b9.js.LICENSE.txt */
+export const __webpack_ids__=["2448"];export const __webpack_modules__={76629:function(e,t,s){e.exports=s.p+"survey.aa219aee52f606e2.svg"},2211:function(e,t,s){s.r(t),s.d(t,{MDNSurvey:()=>MDNSurvey});var r=s(14703),i=s(13566),o=s(51968);s(50272);var a=s(69535),n=s(44413),_=s(62264);let u=[{key:"something unique in the current surveys",bucket:Object.freeze({BLOG_FEEDBACK_2023:"BLOG_FEEDBACK_2023",BROWSER_SURVEY_OCT_2022:"BROWSER_SURVEY_OCT_2022",CONTENT_DISCOVERY_2023:"CONTENT_DISCOVERY_2023",CSS_CASCADE_2022:"CSS_CASCADE_2022",DE_LOCALE_2024:"DE_LOCALE_2024",DE_LOCALE_2024_EVAL:"DE_LOCALE_2024_EVAL",FIREFOX_WEB_COMPAT_2023:"FIREFOX_WEB_COMPAT_2023",INTEROP_2023:"INTEROP_2023",IT_LOCALE_2025:"IT_LOCALE_2025",WEB_COMPONENTS_2023:"WEB_COMPONENTS_2023",DISCOVERABILITY_2023:"DISCOVERABILITY_2023",WEB_SECURITY_2023:"WEB_SECURITY_2023",DISCOVERABILITY_AUG_2023:"DISCOVERABILITY_AUG_2023",WEB_APP_AUGUST_2024:"WEB_APP_AUGUST_2024",HOMEPAGE_FEEDBACK_2024:"HOMEPAGE_FEEDBACK_2024",WEBDX_EDITING_2024:"WEBDX_EDITING_2024",HOUSE_SURVEY_2025:"HOUSE_SURVEY_2025",JS_PROPOSALS_2025:"JS_PROPOSALS_2025",FIRST_FRED_2025:"FIRST_FRED_2025"}).FIRST_FRED_2025,show:e=>/^\/[a-z]{2}(-[A-Z]{2})?\/docs\/Web\/CSS/.test(e),src:e=>{let t=new URL("https://survey.alchemer.com/s3/8385674/MDN-short-survey-Fred");return t.searchParams.set("referrer",e),t.toString()},teaser:(0,r.dy)`Fred is <strong>MDN</strong>'s shiny new frontend!`,question:"How satisfied are you with this new MDN frontend?",footnote:"fred = fr(ont)e(n)d",rateFrom:0,rateTill:1,start:0,end:1/0}];function h(e){let t,s=`survey.${e}`;try{t=JSON.parse(localStorage?.getItem(s)??"{}")}catch{t={}}return 0===Object.keys(t).length&&d(e,t={random:Math.random(),seen_at:null,dismissed_at:null,submitted_at:null,opened_at:null}),t}function d(e,t){let s=`survey.${e}`;try{localStorage?.setItem(s,JSON.stringify(t))}catch{}}let MDNSurvey=class MDNSurvey extends(0,a.q)(r.oi){static styles=_.Z;static ssr=!1;constructor(){super(),this._survey=void 0,this._surveyState=void 0,this._isOpen=!1,this._force=!1,this._source=void 0,this._detailsRef=(0,o.V)()}connectedCallback(){super.connectedCallback(),this.#e(),this.#t()}disconnectedCallback(){super.disconnectedCallback(),this.#s()}#e(){void 0!==globalThis.window&&(this._force=globalThis.location.hash.startsWith("#FORCE_SURVEY="),this._survey=this.#r(),this._survey&&(this._surveyState=h(this._survey.bucket),this._source="function"==typeof this._survey.src?this._survey.src(globalThis.location.pathname):this._survey.src,this.#i()))}#r(){return u.find(e=>{if(this._force)return e.key===globalThis.location.hash.slice(14);if(void 0===globalThis.window||!e.show(globalThis.location.pathname))return!1;let t=Date.now();if(t<e.start||e.end<t)return!1;let s=h(e.bucket);return s.random>=e.rateFrom&&s.random<e.rateTill})}#i(){this._survey&&this._surveyState&&!this._surveyState.seen_at&&(this._surveyState={...this._surveyState,seen_at:Date.now()},d(this._survey.bucket,this._surveyState),this.#o("seen"))}#a(){this._survey&&this._surveyState&&(this._surveyState={...this._surveyState,dismissed_at:Date.now()},d(this._survey.bucket,this._surveyState),this.#o("dismissed"),this.requestUpdate())}#n(){if(!this._survey||!this._surveyState||this._isOpen)return;let e=this._detailsRef.value;e&&e.open&&(this._surveyState={...this._surveyState,opened_at:Date.now()},d(this._survey.bucket,this._surveyState),this.#o("opened"),this._isOpen=!0,this.requestUpdate())}#_(){this._survey&&this._surveyState&&(this._surveyState={...this._surveyState,submitted_at:Date.now()},d(this._survey.bucket,this._surveyState),this.#o("submitted"),this.requestUpdate())}#o(e){this._survey&&console.log(`Survey: ${e} ${this._survey.bucket}`)}#t(){this._messageListener=e=>{"https://survey.alchemer.com"===e.origin&&"submit"===e.data&&this.#_()},window.addEventListener("message",this._messageListener,!1)}#s(){this._messageListener&&window.removeEventListener("message",this._messageListener,!1)}render(){if(!this._survey||!this._surveyState||!this._force&&(this._surveyState.dismissed_at||this._surveyState?.submitted_at))return r.Ld;let e=this.l10n`Hide this survey`;return(0,r.dy)`
       <div class="survey">
         <header>
           <p>${this._survey.teaser}</p>
           <mdn-button
             variant="plain"
-            .icon=${a.Z}
+            .icon=${n.Z}
             icon-only
             title=${e}
             aria-label=${e}
-            @click=${this.#n}
+            @click=${this.#a}
           ></mdn-button>
         </header>
-        <details ${(0,o.i)(this._detailsRef)} @toggle=${this.#a}>
+        <details ${(0,o.i)(this._detailsRef)} @toggle=${this.#n}>
           <summary>${this._survey.question}</summary>
           ${this._isOpen&&this._source?(0,r.dy)`
                 <iframe
@@ -23,5 +23,5 @@ export const __webpack_ids__=["2448"];export const __webpack_modules__={81123:fu
         </details>
         ${this._survey.footnote?(0,r.dy)` <footer>(${this._survey.footnote})</footer> `:r.Ld}
       </div>
-    `}};customElements.define("mdn-survey",MDNSurvey)},13566:function(e,t,s){s.d(t,{o:()=>i});var r=s(32529);let i=e=>e??r.Ld},62264:function(e,t,s){s.d(t,{Z:()=>c});var r=s(14703),i=s(8081),o=s.n(i),n=s(23645),a=s.n(n),_=s(61667),u=s.n(_),h=new s.U(s(81123)),d=a()(o()),l=u()(h);d.push([e.id,`:host{display:block}.survey{background-color:var(--color-background-purple);border-radius:.5rem;display:grid;padding:1rem 1rem 1rem 5rem;row-gap:.75rem}header{align-items:center;display:flex;justify-content:space-between}header:before{background:url(${l});background-size:cover;content:"";height:49px;margin-left:calc(-53px - .5rem);margin-top:1rem;position:absolute;width:53px}p{margin:0}mdn-button::part(button):hover{background-color:initial;border:1px solid var(--color-text-purple)}mdn-button::part(icon){color:var(--color-text-purple)}summary{color:var(--color-text-purple);cursor:pointer}iframe{border:none;border-radius:.5rem;height:500px;overflow:hidden;width:100%}footer{font-size:var(--font-size-small);font-style:italic}`,""]);let c=(0,r.iv)([d.toString()])},44413:function(e,t,s){s.d(t,{Z:()=>i});var r=s(14703);let i=(0,r.YP)`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>`}};
-//# sourceMappingURL=2448.92286b4e96ad1c02.js.map
+    `}};customElements.define("mdn-survey",MDNSurvey)},13566:function(e,t,s){s.d(t,{o:()=>i});var r=s(32529);let i=e=>e??r.Ld},62264:function(e,t,s){s.d(t,{Z:()=>c});var r=s(14703),i=s(8081),o=s.n(i),a=s(23645),n=s.n(a),_=s(61667),u=s.n(_),h=new s.U(s(76629)),d=n()(o()),l=u()(h);d.push([e.id,`:host{display:block}.survey{background-color:var(--color-background-purple);border-radius:.5rem;display:grid;padding:1rem 1rem 1rem 5rem;row-gap:.75rem}header{align-items:center;display:flex;justify-content:space-between}header:before{background:url(${l});background-size:cover;content:"";height:49px;margin-left:calc(-53px - .5rem);margin-top:1rem;position:absolute;width:53px}p{margin:0}mdn-button::part(button):hover{background-color:initial;border:1px solid var(--color-text-purple)}mdn-button::part(icon){color:var(--color-text-purple)}summary{color:var(--color-text-purple);cursor:pointer}iframe{border:none;border-radius:.5rem;height:500px;overflow:hidden;width:100%}footer{font-size:var(--font-size-small);font-style:italic}`,""]);let c=(0,r.iv)([d.toString()])}};
+//# sourceMappingURL=2448.34e8a46d8ac913b9.js.map

package/dist/client/2448.34e8a46d8ac913b9.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"2448.34e8a46d8ac913b9.js","sources":["webpack://@mdn/fred/./components/survey/surveys.js","webpack://@mdn/fred/./components/survey/utils.js","webpack://@mdn/fred/./components/survey/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/if-defined.js","webpack://@mdn/fred/./components/survey/element.css"],"sourcesContent":["import { html } from \"lit\";\n\n/**\n * @import * as Survey from \"./types.js\";\n */\n/**\n * Survey bucket identifiers used for localStorage state management.\n * Each bucket represents a unique survey campaign and maintains separate state.\n * @readonly\n * @enum {string}\n */\nexport const SurveyBucket = Object.freeze({\n BLOG_FEEDBACK_2023: \"BLOG_FEEDBACK_2023\",\n BROWSER_SURVEY_OCT_2022: \"BROWSER_SURVEY_OCT_2022\",\n CONTENT_DISCOVERY_2023: \"CONTENT_DISCOVERY_2023\",\n CSS_CASCADE_2022: \"CSS_CASCADE_2022\",\n DE_LOCALE_2024: \"DE_LOCALE_2024\",\n DE_LOCALE_2024_EVAL: \"DE_LOCALE_2024_EVAL\",\n FIREFOX_WEB_COMPAT_2023: \"FIREFOX_WEB_COMPAT_2023\",\n INTEROP_2023: \"INTEROP_2023\",\n IT_LOCALE_2025: \"IT_LOCALE_2025\",\n WEB_COMPONENTS_2023: \"WEB_COMPONENTS_2023\",\n DISCOVERABILITY_2023: \"DISCOVERABILITY_2023\",\n WEB_SECURITY_2023: \"WEB_SECURITY_2023\",\n DISCOVERABILITY_AUG_2023: \"DISCOVERABILITY_AUG_2023\",\n WEB_APP_AUGUST_2024: \"WEB_APP_AUGUST_2024\",\n HOMEPAGE_FEEDBACK_2024: \"HOMEPAGE_FEEDBACK_2024\",\n WEBDX_EDITING_2024: \"WEBDX_EDITING_2024\",\n HOUSE_SURVEY_2025: \"HOUSE_SURVEY_2025\",\n JS_PROPOSALS_2025: \"JS_PROPOSALS_2025\",\n FIRST_FRED_2025: \"FIRST_FRED_2025\",\n});\n\n/**\n * Array of survey configurations.\n *\n * When adding a survey, make sure it has this JavaScript action (in Alchemer)\n * so the banner is hidden for users who have already submitted it:\n * ```javascript\n * window.parent && window.parent.postMessage(\"submit\", \"*\");\n * ```\n *\n * @type {Survey.Survey[]}\n */\nexport const SURVEYS = [\n {\n key: \"something unique in the current surveys\",\n bucket: SurveyBucket.FIRST_FRED_2025,\n show: (mdn_url) => {\n return /^\\/[a-z]{2}(-[A-Z]{2})?\\/docs\\/Web\\/CSS/.test(mdn_url);\n },\n src: (mdn_url) => {\n const url = new URL(\n \"https://survey.alchemer.com/s3/8385674/MDN-short-survey-Fred\",\n );\n url.searchParams.set(\"referrer\", mdn_url);\n return url.toString();\n },\n teaser: html`Fred is <strong>MDN</strong>'s shiny new frontend!`,\n question: \"How satisfied are you with this new MDN frontend?\",\n footnote: \"fred = fr(ont)e(n)d\",\n rateFrom: 0,\n rateTill: 1,\n start: 0,\n end: Infinity,\n },\n];\n","/**\n * @import * as Survey from \"./types.js\";\n */\n/**\n * @param {string} key\n * @returns {Survey.SurveyState}\n */\nexport function getSurveyState(key) {\n const stateKey = `survey.${key}`;\n let state;\n\n try {\n state = JSON.parse(localStorage?.getItem(stateKey) ?? \"{}\");\n } catch {\n state = {};\n }\n\n if (Object.keys(state).length === 0) {\n state = {\n random: Math.random(),\n seen_at: null,\n dismissed_at: null,\n submitted_at: null,\n opened_at: null,\n };\n writeSurveyState(key, state);\n }\n\n return state;\n}\n\n/**\n * @param {string} key\n * @param {Survey.SurveyState} state\n */\nexport function writeSurveyState(key, state) {\n const stateKey = `survey.${key}`;\n try {\n localStorage?.setItem(stateKey, JSON.stringify(state));\n } catch {\n // Handle localStorage errors silently\n }\n}\n","import { LitElement, html, nothing } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\n\nimport \"../button/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport closeIcon from \"../icon/cancel.svg?lit\";\n\nimport styles from \"./element.css?lit\";\nimport { SURVEYS } from \"./surveys.js\";\nimport { getSurveyState, writeSurveyState } from \"./utils.js\";\n\n/**\n * @import * as Survey from \"./types.js\";\n */\n\nexport class MDNSurvey extends L10nMixin(LitElement) {\n static styles = styles;\n\n static ssr = false;\n\n constructor() {\n super();\n /** @type {Survey.Survey | undefined} */\n this._survey = undefined;\n /** @type {Survey.SurveyState | undefined} */\n this._surveyState = undefined;\n /** @type {boolean} */\n this._isOpen = false;\n /** @type {boolean} */\n this._force = false;\n /** @type {string | undefined} */\n this._source = undefined;\n\n /** @type {import(\"@lit\").Ref<HTMLDetailsElement>} */\n this._detailsRef = createRef();\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.#checkForSurvey();\n this.#setupMessageListener();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#removeMessageListener();\n }\n\n #checkForSurvey() {\n if (globalThis.window === undefined) return;\n\n const FORCE_SURVEY_PREFIX = \"#FORCE_SURVEY=\";\n this._force = globalThis.location.hash.startsWith(FORCE_SURVEY_PREFIX);\n\n this._survey = this.#findSurvey();\n\n if (this._survey) {\n this._surveyState = getSurveyState(this._survey.bucket);\n this._source =\n typeof this._survey.src === \"function\"\n ? this._survey.src(globalThis.location.pathname)\n : this._survey.src;\n\n this.#markAsSeen();\n }\n }\n\n /**\n * @returns {Survey.Survey | undefined}\n */\n #findSurvey() {\n return SURVEYS.find((survey) => {\n if (this._force) {\n const FORCE_SURVEY_PREFIX = \"#FORCE_SURVEY=\";\n return (\n survey.key ===\n globalThis.location.hash.slice(FORCE_SURVEY_PREFIX.length)\n );\n }\n\n if (globalThis.window === undefined) {\n return false;\n }\n\n if (!survey.show(globalThis.location.pathname)) {\n return false;\n }\n\n const now = Date.now();\n if (now < survey.start || survey.end < now) {\n return false;\n }\n\n const state = getSurveyState(survey.bucket);\n return state.random >= survey.rateFrom && state.random < survey.rateTill;\n });\n }\n\n #markAsSeen() {\n if (!this._survey || !this._surveyState || this._surveyState.seen_at)\n return;\n\n this._surveyState = {\n ...this._surveyState,\n seen_at: Date.now(),\n };\n writeSurveyState(this._survey.bucket, this._surveyState);\n this.#measure(\"seen\");\n }\n\n #dismiss() {\n if (!this._survey || !this._surveyState) return;\n\n this._surveyState = {\n ...this._surveyState,\n dismissed_at: Date.now(),\n };\n writeSurveyState(this._survey.bucket, this._surveyState);\n this.#measure(\"dismissed\");\n this.requestUpdate();\n }\n\n #onToggle() {\n if (!this._survey || !this._surveyState || this._isOpen) return;\n\n const details = this._detailsRef.value;\n if (details && details.open) {\n this._surveyState = {\n ...this._surveyState,\n opened_at: Date.now(),\n };\n writeSurveyState(this._survey.bucket, this._surveyState);\n this.#measure(\"opened\");\n this._isOpen = true;\n this.requestUpdate();\n }\n }\n\n #onSubmitted() {\n if (!this._survey || !this._surveyState) return;\n\n this._surveyState = {\n ...this._surveyState,\n submitted_at: Date.now(),\n };\n writeSurveyState(this._survey.bucket, this._surveyState);\n this.#measure(\"submitted\");\n this.requestUpdate();\n }\n\n /**\n * @param {string} action\n */\n #measure(action) {\n if (!this._survey) return;\n\n // TODO: GLEAN\n console.log(`Survey: ${action} ${this._survey.bucket}`);\n }\n\n #setupMessageListener() {\n /** @type {(event: MessageEvent) => void} */\n this._messageListener = (event) => {\n if (\n event.origin === \"https://survey.alchemer.com\" &&\n event.data === \"submit\"\n ) {\n this.#onSubmitted();\n }\n };\n window.addEventListener(\"message\", this._messageListener, false);\n }\n\n #removeMessageListener() {\n if (this._messageListener) {\n window.removeEventListener(\"message\", this._messageListener, false);\n }\n }\n\n /**\n * @returns {import(\"@lit\").TemplateResult | nothing}\n */\n render() {\n if (!this._survey || !this._surveyState) {\n return nothing;\n }\n\n if (\n !this._force &&\n (this._surveyState.dismissed_at || this._surveyState?.submitted_at)\n ) {\n return nothing;\n }\n\n const title = this.l10n`Hide this survey`;\n\n return html`\n <div class=\"survey\">\n <header>\n <p>${this._survey.teaser}</p>\n <mdn-button\n variant=\"plain\"\n .icon=${closeIcon}\n icon-only\n title=${title}\n aria-label=${title}\n @click=${this.#dismiss}\n ></mdn-button>\n </header>\n <details ${ref(this._detailsRef)} @toggle=${this.#onToggle}>\n <summary>${this._survey.question}</summary>\n ${this._isOpen && this._source\n ? html`\n <iframe\n title=${ifDefined(this._survey.question)}\n src=${this._source}\n ></iframe>\n `\n : nothing}\n </details>\n ${this._survey.footnote\n ? html` <footer>(${this._survey.footnote})</footer> `\n : nothing}\n </div>\n `;\n }\n}\n\ncustomElements.define(\"mdn-survey\", MDNSurvey);\n","import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=o=>o??t;export{o as ifDefined};\n//# sourceMappingURL=if-defined.js.map\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(\"assets/survey.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, `:host{display:block}.survey{background-color:var(--color-background-purple);border-radius:.5rem;display:grid;padding:1rem 1rem 1rem 5rem;row-gap:.75rem}header{align-items:center;display:flex;justify-content:space-between}header:before{background:url(${___CSS_LOADER_URL_REPLACEMENT_0___});background-size:cover;content:\"\";height:49px;margin-left:calc(-53px - .5rem);margin-top:1rem;position:absolute;width:53px}p{margin:0}mdn-button::part(button):hover{background-color:initial;border:1px solid var(--color-text-purple)}mdn-button::part(icon){color:var(--color-text-purple)}summary{color:var(--color-text-purple);cursor:pointer}iframe{border:none;border-radius:.5rem;height:500px;overflow:hidden;width:100%}footer{font-size:var(--font-size-small);font-style:italic}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["Object","URL","s","JSON","localStorage","Math","MDNSurvey","globalThis","Date","console","e","window","i","customElements"],"mappings":"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"}

package/dist/client/{2656.0009ef5e53d43860.js → 2656.9ffeb69f976e1ada.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-export const __webpack_ids__=["2656"];export const __webpack_modules__={71734:function(e,t,r){e.exports=r.p+"chevron-right.a81fc439dd5e4839.svg"},84011:function(e,t,r){e.exports=r.p+"triangle-alert.cff4c57ccef57da3.svg"},97877:function(e,t,r){r.r(t),r.d(t,{MDNInteractiveExample:()=>MDNInteractiveExample,InteractiveExampleBase:()=>InteractiveExampleBase});var o=r(14703),a=r(51968),i=r(61619),s=r(66178),l=r(48621),c=r(86492),d=r(69535),n=r(74580);function p(e){let t=document.createElement("div");e=e.replaceAll(/(\/\*)[\s\S]+(\*\/)/g,"");let r=/^-(?:webkit|moz|ms|o)-/,o=t.style,a=e.split(";").map(e=>e.trim()).filter(e=>e.length>0);o.cssText="";let i=new Set,s=new Set;for(let e of a){let t=o.cssText;o.cssText+=e+";";let a=o.cssText!==t,l=r.test(e),c=function(e){let t=r.exec(e),o=null===t?"":t[0];return(null===o?e:e.slice(o.length)).split(/[\s:]/)[0]??""}(e);a&&l?i.add(c):a||l||s.add(c)}if(s.size>0){for(let e of i)s.delete(e);if(s.size>0)return!1}return!0}r(4406),r(18103);let h=e=>class extends(0,d.q)(e){static properties={__choiceSelected:{state:!0},__choiceUnsupported:{state:!0}};constructor(...e){super(),this.__choiceSelected=-1,this.__choiceUnsupported=[]}#e({target:e}){e instanceof n.MDNPlayEditor&&e.focus()}#t({target:e}){e instanceof n.MDNPlayEditor&&(this.#r(e),this.#o(e))}#a({target:e}){e instanceof n.MDNPlayEditor&&(this.#r(e),this.__choiceSelected===this.#i(e)&&this.#o(e))}#s(){this.__choiceSelected=-1;let e=[...this.shadowRoot?.querySelectorAll("mdn-play-editor")||[]];for(let[t,r]of[...e].entries())r.value=this._choices?.at(t)??"";this.__choiceUnsupported=this._choices?.map(e=>!p(e||""))||[];let t=e[0];t&&this.#o(t)}async #o(e){let t=this.#i(e);await this._runner.value?.postMessage({typ:"choice",code:e.value}),this.__choiceSelected=t}#r(e){let t=this.#i(e);this.__choiceUnsupported=this.__choiceUnsupported.map((r,o)=>t===o?!p(e.value):r)}#i(e){return Number.parseInt(e.dataset.index??"-1",10)}#l(){return(0,o.dy)`
+export const __webpack_ids__=["2656"];export const __webpack_modules__={38202:function(e,t,r){e.exports=r.p+"chevron-right.a81fc439dd5e4839.svg"},85667:function(e,t,r){e.exports=r.p+"triangle-alert.cff4c57ccef57da3.svg"},97877:function(e,t,r){r.r(t),r.d(t,{MDNInteractiveExample:()=>MDNInteractiveExample,InteractiveExampleBase:()=>InteractiveExampleBase});var o=r(14703),a=r(51968),i=r(61619),s=r(66178),l=r(48621),c=r(86492),d=r(69535),n=r(74580);function p(e){let t=document.createElement("div");e=e.replaceAll(/(\/\*)[\s\S]+(\*\/)/g,"");let r=/^-(?:webkit|moz|ms|o)-/,o=t.style,a=e.split(";").map(e=>e.trim()).filter(e=>e.length>0);o.cssText="";let i=new Set,s=new Set;for(let e of a){let t=o.cssText;o.cssText+=e+";";let a=o.cssText!==t,l=r.test(e),c=function(e){let t=r.exec(e),o=null===t?"":t[0];return(null===o?e:e.slice(o.length)).split(/[\s:]/)[0]??""}(e);a&&l?i.add(c):a||l||s.add(c)}if(s.size>0){for(let e of i)s.delete(e);if(s.size>0)return!1}return!0}r(4406),r(18103);let h=e=>class extends(0,d.q)(e){static properties={__choiceSelected:{state:!0},__choiceUnsupported:{state:!0}};constructor(...e){super(),this.__choiceSelected=-1,this.__choiceUnsupported=[]}#e({target:e}){e instanceof n.MDNPlayEditor&&e.focus()}#t({target:e}){e instanceof n.MDNPlayEditor&&(this.#r(e),this.#o(e))}#a({target:e}){e instanceof n.MDNPlayEditor&&(this.#r(e),this.__choiceSelected===this.#i(e)&&this.#o(e))}#s(){this.__choiceSelected=-1;let e=[...this.shadowRoot?.querySelectorAll("mdn-play-editor")||[]];for(let[t,r]of[...e].entries())r.value=this._choices?.at(t)??"";this.__choiceUnsupported=this._choices?.map(e=>!p(e||""))||[];let t=e[0];t&&this.#o(t)}async #o(e){let t=this.#i(e);await this._runner.value?.postMessage({typ:"choice",code:e.value}),this.__choiceSelected=t}#r(e){let t=this.#i(e);this.__choiceUnsupported=this.__choiceUnsupported.map((r,o)=>t===o?!p(e.value):r)}#i(e){return Number.parseInt(e.dataset.index??"-1",10)}#l(){return(0,o.dy)`
         <div class="template-choices">
           <header>
             <h4>${(0,c.decode)(this.name)}</h4>
@@ -100,5 +100,5 @@ export const __webpack_ids__=["2656"];export const __webpack_modules__={71734:fu
           </div>
         </mdn-play-controller>
       `}render(){return"tabbed"===this._template?this.#l():super.render()}},b=["focus","copy","cut","paste","click"];let InteractiveExampleBase=class InteractiveExampleBase extends o.oi{static ssr=!1;static properties={name:{type:String}};static styles=l.Z;constructor(){super(),this.name="",this._languages=[],this._code={}}_controller=(0,a.V)();_runner=(0,a.V)();_run(){this._controller.value?.run()}_reset(){this._controller.value?.reset()}_initialCode(){let e={};for(let t of this.closest("section")?.querySelectorAll(".code-example pre.interactive-example")??[]){let r=(0,s.upgradePre)(t);if(r){let{language:t,code:o}=r;e[t]=e[t]?`${e[t]}
-${o}`:o}}return this._choices=[...this.closest("section")?.querySelectorAll(".code-example pre.interactive-example-choice")||[]].map(e=>(0,s.upgradePre)(e)?.code.trim()).filter(e=>void 0!==e),this._languages=Object.keys(e),this._template=this._choices.length>0?"choices":1===this._languages.length&&"js"===this._languages[0]||this._languages.includes("js")&&this._languages.includes("wat")?"console":"tabbed",e}_langName(e){return"js"===e?"JavaScript":e.toUpperCase()}_telemetryHandler(e){let t=e.type;"click"===e.type&&e.target instanceof HTMLElement&&e.target.id&&(t=`click@${e.target.id}`),(0,i.z)("interactive-example",{type:"action",label:t})}connectedCallback(){for(let e of(super.connectedCallback(),this._telemetryHandler=this._telemetryHandler.bind(this),b))this.renderRoot.addEventListener(e,this._telemetryHandler);this._code=this._initialCode()}firstUpdated(){this._controller.value&&(this._controller.value.code=this._code)}disconnectedCallback(){for(let e of(super.disconnectedCallback(),b))this.renderRoot.removeEventListener(e,this._telemetryHandler)}};let MDNInteractiveExample=class MDNInteractiveExample extends h(g(u(InteractiveExampleBase))){};customElements.define("interactive-example",MDNInteractiveExample)},61619:function(e,t,r){r.d(t,{z:()=>a});var o=r(26362);function a(e,{type:t,label:r}){o.Z.recordElementClick({id:e,type:t,label:r})}},48621:function(e,t,r){r.d(t,{Z:()=>g});var o=r(14703),a=r(8081),i=r.n(a),s=r(23645),l=r.n(s),c=r(61667),d=r.n(c),n=new r.U(r(71734)),p=new r.U(r(84011)),h=l()(i()),m=d()(n),u=d()(p);h.push([e.id,`:host{--border:1px solid var(--color-border-primary);--tabbed-font-heading:600 0.625rem/1.2 var(--font-family-text);--elem-radius:0.25rem}header{align-items:center;border-bottom:var(--border);border-top-left-radius:var(--elem-radius);border-top-right-radius:var(--elem-radius);display:flex;grid-area:header;justify-content:space-between;padding:.5rem 1rem}header h4{font-size:1rem;font-weight:400;line-height:1.1876;margin:0}header mdn-button{margin-right:-.5rem}mdn-play-editor{grid-area:editor;height:100%;overflow:auto}.buttons{display:flex;flex-direction:column;gap:.5rem;grid-area:buttons}mdn-play-console{border:var(--border);border-radius:var(--elem-radius);grid-area:console}mdn-ix-tab-wrapper{grid-area:tabs}.template-console{align-content:start;display:grid;gap:.5rem;grid-template-areas:"header  header" "editor  editor" "buttons console";grid-template-columns:max-content 1fr;grid-template-rows:max-content 1fr 8rem;height:100%}.template-console header{border:var(--border)}.template-console mdn-play-runner{display:none}.template-console mdn-ix-tab-wrapper,.template-console>mdn-play-editor{border:var(--border);border-bottom-left-radius:var(--elem-radius);border-bottom-right-radius:var(--elem-radius);border-top:0;grid-area:editor;margin-top:-.5rem}@media (max-width:769px){.template-console{grid-template-areas:"header" "editor" "buttons" "console";grid-template-columns:1fr;grid-template-rows:max-content 1fr max-content 8rem}.template-console .buttons{flex-direction:row;justify-content:space-between}}.template-tabbed{border:var(--border);border-radius:var(--elem-radius);display:grid;grid-template-areas:"header header" "tabs   runner";grid-template-columns:6fr 4fr;grid-template-rows:max-content 1fr;height:100%;overflow:hidden}.template-tabbed .output-wrapper{border-left:var(--border);grid-area:runner;overflow:hidden;position:relative}:is(.template-tabbed .output-wrapper) h4{background-color:var(--color-background-secondary);border-bottom-left-radius:var(--elem-radius);color:var(--text-secondary);font:var(--tabbed-font-heading);margin:0;padding:.5rem 1.6rem;position:absolute;right:0;text-transform:uppercase;top:0;z-index:2}@media (max-width:992px){.template-tabbed{grid-template-areas:"header" "tabs" "runner";grid-template-columns:1fr;grid-template-rows:max-content 1fr 1fr}.template-tabbed .output-wrapper{border-left:0;border-top:var(--border)}}.template-choices{border:var(--border);border-radius:var(--elem-radius);display:grid;grid-template-areas:"header header" "choice runner";grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:max-content 1fr;height:100%}@media (max-width:992px){.template-choices{grid-template-areas:"header" "choice" "runner";grid-template-columns:1fr}}.template-choices .choice-wrapper{border-right:var(--border);display:flex;flex-direction:column;grid-area:choice;overflow-y:auto;padding:1rem 0 1rem 1rem;row-gap:.4rem}@media (max-width:992px){.template-choices .choice-wrapper{border-bottom:var(--border);border-right:none;padding-right:1em}}:is(.template-choices .choice-wrapper) .choice{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-blue-80);--field-focus-border:var(--csstools-light-dark-toggle--0,var(--color-blue-50));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--color-blue-10);--focus-01:0 0 0 3px var(--csstools-light-dark-toggle--1,var(--color-blue-90));align-items:center;display:flex;flex-grow:1}@supports (color:light-dark(red,red)){:is(.template-choices .choice-wrapper) .choice{--field-focus-border:light-dark(var(--color-blue-50),var(--color-blue-80));--focus-01:0 0 0 3px light-dark(var(--color-blue-90),var(--color-blue-10))}}@supports not (color:light-dark(tan,tan)){:is(:is(.template-choices .choice-wrapper) .choice) *{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-blue-80);--field-focus-border:var(--csstools-light-dark-toggle--0,var(--color-blue-50));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--color-blue-10);--focus-01:0 0 0 3px var(--csstools-light-dark-toggle--1,var(--color-blue-90))}}:is(:is(.template-choices .choice-wrapper) .choice):after{background-color:currentcolor;color:var(--field-focus-border);content:"";display:block;height:1.25rem;margin:0 .75rem;-webkit-mask-image:url(${m});mask-image:url(${m});-webkit-mask-size:cover;mask-size:cover;opacity:0;width:1.25rem}@media (max-width:992px){:is(:is(.template-choices .choice-wrapper) .choice):after{display:none}}.selected:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border-color:var(--field-focus-border);box-shadow:var(--focus-01);cursor:text}.selected:is(:is(.template-choices .choice-wrapper) .choice):after{opacity:1;transition:all .2s ease-out}.unsupported:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) var(--color-yellow-80);border-color:var(--csstools-light-dark-toggle--2,var(--color-yellow-50))}@supports (color:light-dark(red,red)){.unsupported:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border-color:light-dark(var(--color-yellow-50),var(--color-yellow-80))}}.unsupported:is(:is(.template-choices .choice-wrapper) .choice):after{background-image:url(${u});background-position:50%;background-repeat:no-repeat;background-size:1rem;content:"";height:1rem;opacity:1;transition:none;width:1rem}:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border:var(--border);border-radius:var(--elem-radius);cursor:pointer;width:100%}.template-choices .output-wrapper{height:300px;overflow:hidden}`,""]);let g=(0,o.iv)([h.toString()])}};
-//# sourceMappingURL=2656.0009ef5e53d43860.js.map
+${o}`:o}}return this._choices=[...this.closest("section")?.querySelectorAll(".code-example pre.interactive-example-choice")||[]].map(e=>(0,s.upgradePre)(e)?.code.trim()).filter(e=>void 0!==e),this._languages=Object.keys(e),this._template=this._choices.length>0?"choices":1===this._languages.length&&"js"===this._languages[0]||this._languages.includes("js")&&this._languages.includes("wat")?"console":"tabbed",e}_langName(e){return"js"===e?"JavaScript":e.toUpperCase()}_telemetryHandler(e){let t=e.type;"click"===e.type&&e.target instanceof HTMLElement&&e.target.id&&(t=`click@${e.target.id}`),(0,i.z)("interactive-example",{type:"action",label:t})}connectedCallback(){for(let e of(super.connectedCallback(),this._telemetryHandler=this._telemetryHandler.bind(this),b))this.renderRoot.addEventListener(e,this._telemetryHandler);this._code=this._initialCode()}firstUpdated(){this._controller.value&&(this._controller.value.code=this._code)}disconnectedCallback(){for(let e of(super.disconnectedCallback(),b))this.renderRoot.removeEventListener(e,this._telemetryHandler)}};let MDNInteractiveExample=class MDNInteractiveExample extends h(g(u(InteractiveExampleBase))){};customElements.define("interactive-example",MDNInteractiveExample)},61619:function(e,t,r){r.d(t,{z:()=>a});var o=r(26362);function a(e,{type:t,label:r}){o.Z.recordElementClick({id:e,type:t,label:r})}},48621:function(e,t,r){r.d(t,{Z:()=>g});var o=r(14703),a=r(8081),i=r.n(a),s=r(23645),l=r.n(s),c=r(61667),d=r.n(c),n=new r.U(r(38202)),p=new r.U(r(85667)),h=l()(i()),m=d()(n),u=d()(p);h.push([e.id,`:host{--border:1px solid var(--color-border-primary);--tabbed-font-heading:600 0.625rem/1.2 var(--font-family-text);--elem-radius:0.25rem}header{align-items:center;border-bottom:var(--border);border-top-left-radius:var(--elem-radius);border-top-right-radius:var(--elem-radius);display:flex;grid-area:header;justify-content:space-between;padding:.5rem 1rem}header h4{font-size:var(--font-size-normal);font-weight:400;line-height:1.1876;margin:0;overflow-wrap:anywhere}header mdn-button{margin-right:-.5rem}mdn-play-editor{grid-area:editor;height:100%;overflow:auto}.buttons{display:flex;flex-direction:column;gap:.5rem;grid-area:buttons}mdn-play-console{border:var(--border);border-radius:var(--elem-radius);grid-area:console}mdn-ix-tab-wrapper{grid-area:tabs}.template-console{align-content:start;display:grid;gap:.5rem;grid-template-areas:"header  header" "editor  editor" "buttons console";grid-template-columns:max-content 1fr;grid-template-rows:max-content 1fr 8rem;height:100%}.template-console header{border:var(--border)}.template-console mdn-play-runner{display:none}.template-console mdn-ix-tab-wrapper,.template-console>mdn-play-editor{border:var(--border);border-bottom-left-radius:var(--elem-radius);border-bottom-right-radius:var(--elem-radius);border-top:0;grid-area:editor;margin-top:-.5rem}@media (width <= 769px){.template-console{grid-template-areas:"header" "editor" "buttons" "console";grid-template-columns:1fr;grid-template-rows:max-content 1fr max-content 8rem}.template-console .buttons{flex-direction:row;justify-content:space-between}}.template-tabbed{border:var(--border);border-radius:var(--elem-radius);display:grid;grid-template-areas:"header header" "tabs   runner";grid-template-columns:6fr 4fr;grid-template-rows:max-content 1fr;height:100%;overflow:hidden}.template-tabbed .output-wrapper{border-left:var(--border);grid-area:runner;overflow:hidden;position:relative}:is(.template-tabbed .output-wrapper) h4{background-color:var(--color-background-secondary);border-bottom-left-radius:var(--elem-radius);color:var(--text-secondary);font:var(--tabbed-font-heading);margin:0;padding:.5rem 1.6rem;position:absolute;right:0;text-transform:uppercase;top:0;z-index:2}@media (width <= 992px){.template-tabbed{grid-template-areas:"header" "tabs" "runner";grid-template-columns:1fr;grid-template-rows:max-content 1fr 1fr}.template-tabbed .output-wrapper{border-left:0;border-top:var(--border)}}.template-choices{border:var(--border);border-radius:var(--elem-radius);display:grid;grid-template-areas:"header header" "choice runner";grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:max-content 1fr;height:100%}@media (width <= 992px){.template-choices{grid-template-areas:"header" "choice" "runner";grid-template-columns:1fr}}.template-choices .choice-wrapper{border-right:var(--border);display:flex;flex-direction:column;grid-area:choice;overflow-y:auto;padding:1rem 0 1rem 1rem;row-gap:.4rem}@media (width <= 992px){.template-choices .choice-wrapper{border-bottom:var(--border);border-right:none;padding-right:1em}}:is(.template-choices .choice-wrapper) .choice{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-blue-80);--field-focus-border:var(--csstools-light-dark-toggle--0,var(--color-blue-50));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--color-blue-10);--focus-01:0 0 0 3px var(--csstools-light-dark-toggle--1,var(--color-blue-90));align-items:center;display:flex;flex-grow:1}@supports (color:light-dark(red,red)){:is(.template-choices .choice-wrapper) .choice{--field-focus-border:light-dark(var(--color-blue-50),var(--color-blue-80));--focus-01:0 0 0 3px light-dark(var(--color-blue-90),var(--color-blue-10))}}@supports not (color:light-dark(tan,tan)){:is(:is(.template-choices .choice-wrapper) .choice) *{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-blue-80);--field-focus-border:var(--csstools-light-dark-toggle--0,var(--color-blue-50));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--color-blue-10);--focus-01:0 0 0 3px var(--csstools-light-dark-toggle--1,var(--color-blue-90))}}:is(:is(.template-choices .choice-wrapper) .choice):after{background-color:currentcolor;color:var(--field-focus-border);content:"";display:block;height:1.25rem;margin:0 .75rem;-webkit-mask-image:url(${m});mask-image:url(${m});-webkit-mask-size:cover;mask-size:cover;opacity:0;width:1.25rem}@media (width <= 992px){:is(:is(.template-choices .choice-wrapper) .choice):after{display:none}}.selected:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border-color:var(--field-focus-border);box-shadow:var(--focus-01);cursor:text}.selected:is(:is(.template-choices .choice-wrapper) .choice):after{opacity:1;transition:all .2s ease-out}.unsupported:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) var(--color-yellow-80);border-color:var(--csstools-light-dark-toggle--2,var(--color-yellow-50))}@supports (color:light-dark(red,red)){.unsupported:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border-color:light-dark(var(--color-yellow-50),var(--color-yellow-80))}}.unsupported:is(:is(.template-choices .choice-wrapper) .choice):after{background-image:url(${u});background-position:50%;background-repeat:no-repeat;background-size:1rem;content:"";height:1rem;opacity:1;transition:none;width:1rem}:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border:var(--border);border-radius:var(--elem-radius);cursor:pointer;width:100%}.template-choices .output-wrapper{height:300px;overflow:hidden}`,""]);let g=(0,o.iv)([h.toString()])}};
+//# sourceMappingURL=2656.9ffeb69f976e1ada.js.map

package/dist/client/{2656.0009ef5e53d43860.js.map → 2656.9ffeb69f976e1ada.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"2656.0009ef5e53d43860.js","sources":["webpack://@mdn/fred/./components/interactive-example/utils.js","webpack://@mdn/fred/./components/interactive-example/with-choices.js","webpack://@mdn/fred/./components/interactive-example/with-console.js","webpack://@mdn/fred/./components/interactive-example/with-tabs.js","webpack://@mdn/fred/./components/interactive-example/element.js","webpack://@mdn/fred/./utils/glean.js","webpack://@mdn/fred/./components/interactive-example/element.css"],"sourcesContent":["/*\n Checks if the CSS code is supported by the current browser.\n \n @param {string} code\n /\nexport function isCSSSupported(code) {\n // http://regexr.com/3fvik\n const cssCommentsMatch = /(\\/\\)[\\s\\S]+(\\\\/)/g;\n const element = document.createElement(\"div\");\n\n // strip out any CSS comments before applying the code\n code = code.replaceAll(cssCommentsMatch, \"\");\n\n const vendorPrefixMatch = /^-(?:webkit\|moz\|ms\|o)-/;\n const style = element.style;\n // Expecting declarations to be separated by \";\"\n // Declarations with just white space are ignored\n const declarationsArray = code\n .split(\";\")\n .map((d) => d.trim())\n .filter((d) => d.length > 0);\n\n /\n @param {string} declaration\n * @returns {boolean} - true if declaration starts with -webkit-, -moz-, -ms- or -o-\n /\n function hasVendorPrefix(declaration) {\n return vendorPrefixMatch.test(declaration);\n }\n\n /\n Looks for property name by cutting off optional vendor prefix at the beginning\n * and then cutting off rest of the declaration, starting from any whitespace or \":\" in property name.\n * @param {string} declaration - single css declaration, with not white space at the beginning\n * @returns {string} - property name without vendor prefix.\n /\n function getPropertyNameNoPrefix(declaration) {\n const prefixMatch = vendorPrefixMatch.exec(declaration);\n const prefix = prefixMatch === null ? \"\" : prefixMatch[0];\n const declarationNoPrefix =\n prefix === null ? declaration : declaration.slice(prefix.length);\n // Expecting property name to be over, when any whitespace or \":\" is found\n const propertyNameSeparator = /[\\s:]/;\n return declarationNoPrefix.split(propertyNameSeparator)[0] ?? \"\";\n }\n\n // Clearing previous state\n style.cssText = \"\";\n\n // List of found and applied properties with vendor prefix\n const appliedPropertiesWithPrefix = new Set();\n // List of not applied properties - because of lack of support for its name or value\n const notAppliedProperties = new Set();\n\n for (const declaration of declarationsArray) {\n const previousCSSText = style.cssText;\n // Declarations are added one by one, because browsers sometimes combine multiple declarations into one\n // For example Chrome changes \"column-count: auto;column-width: 8rem;\" into \"columns: 8rem auto;\"\n style.cssText += declaration + \";\"; // \";\" was previous removed while using split method\n // In case property name or value is not supported, browsers skip single declaration, while leaving rest of them intact\n const correctlyApplied = style.cssText !== previousCSSText;\n\n const vendorPrefixFound = hasVendorPrefix(declaration);\n const propertyName = getPropertyNameNoPrefix(declaration);\n\n if (correctlyApplied && vendorPrefixFound) {\n // We are saving applied properties with prefix, so equivalent property with no prefix doesn't need to be supported\n appliedPropertiesWithPrefix.add(propertyName);\n } else if (!correctlyApplied && !vendorPrefixFound) {\n notAppliedProperties.add(propertyName);\n }\n }\n\n if (notAppliedProperties.size > 0) {\n // If property with vendor prefix is supported, we can ignore the fact that browser doesn't support property with no prefix\n for (const substitute of appliedPropertiesWithPrefix) {\n notAppliedProperties.delete(substitute);\n }\n // If any other declaration is not supported, whole block should be marked as invalid\n if (notAppliedProperties.size > 0) return false;\n }\n return true;\n}\n","import { decode } from \"he\";\nimport { html } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { MDNPlayEditor } from \"../play-editor/element.js\";\n\nimport { isCSSSupported } from \"./utils.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../play-runner/element.js\";\n\n/\n @import { InteractiveExampleBase } from \"./element.js\";\n /\n\n/\n @template {new (...args: any[]) => InteractiveExampleBase} TBase\n * @param {TBase} Base\n /\nexport const InteractiveExampleWithChoices = (Base) =>\n class extends L10nMixin(Base) {\n static properties = {\n __choiceSelected: { state: true },\n __choiceUnsupported: { state: true },\n };\n\n /* @param {any[]} _args /\n constructor(..._args) {\n super();\n /* @type {number} /\n this.__choiceSelected = -1;\n /* @type {boolean[]} /\n this.__choiceUnsupported = [];\n }\n\n /* @param {MouseEvent} event /\n #choiceFocus({ target }) {\n if (target instanceof MDNPlayEditor) {\n target.focus();\n }\n }\n\n /* @param {MouseEvent} event /\n #choiceSelect({ target }) {\n if (target instanceof MDNPlayEditor) {\n this.#updateUnsupported(target);\n this.#selectChoice(target);\n }\n }\n\n /* @param {Event} event /\n #choiceUpdate({ target }) {\n if (target instanceof MDNPlayEditor) {\n this.#updateUnsupported(target);\n if (this.__choiceSelected === this.#getIndex(target)) {\n this.#selectChoice(target);\n }\n }\n }\n\n #resetChoices() {\n this.__choiceSelected = -1;\n\n const editorNodes = [\n ...(this.shadowRoot?.querySelectorAll(\"mdn-play-editor\") \|\| []),\n ];\n\n for (const [index, editorNode] of [...editorNodes].entries()) {\n const code = this._choices?.at(index) ?? \"\";\n editorNode.value = code;\n }\n\n this.__choiceUnsupported =\n this._choices?.map((code) => !isCSSSupported(code \|\| \"\")) \|\| [];\n\n const first = editorNodes[0];\n if (first) {\n this.#selectChoice(first);\n }\n }\n\n /* @param {MDNPlayEditor} editor /\n async #selectChoice(editor) {\n const index = this.#getIndex(editor);\n await this._runner.value?.postMessage({\n typ: \"choice\",\n code: editor.value,\n });\n this.__choiceSelected = index;\n }\n\n /* @param {MDNPlayEditor} editor /\n #updateUnsupported(editor) {\n const index = this.#getIndex(editor);\n this.__choiceUnsupported = this.__choiceUnsupported.map((value, i) =>\n index === i ? !isCSSSupported(editor.value) : value,\n );\n }\n\n /* @param {MDNPlayEditor} editor /\n #getIndex(editor) {\n return Number.parseInt(editor.dataset.index ?? \"-1\", 10);\n }\n\n #render() {\n return html`\n <div class=\"template-choices\">\n <header>\n <h4>${decode(this.name)}</h4>\n <mdn-button id=\"reset\" @click=${this._reset} variant=\"secondary\"\n >${this.l10n`Reset`}</mdn-button\n >\n </header>\n <div\n class=\"choice-wrapper\"\n @click=${this.#choiceFocus}\n @focus=${this.#choiceSelect}\n @update=${this.#choiceUpdate}\n >\n ${this._choices?.map(\n (code, index) => html`\n <div\n class=${[\n \"choice\",\n ...(index === this.__choiceSelected ? [\"selected\"] : []),\n ...(this.__choiceUnsupported[index] ? [\"unsupported\"] : []),\n ].join(\" \")}\n >\n <mdn-play-editor\n data-index=${index}\n language=\"css\"\n minimal=\"true\"\n .delay=${100}\n .value=${code?.trim()}\n ></mdn-play-editor>\n </div>\n `,\n )}\n </div>\n <div class=\"output-wrapper\">\n <mdn-play-controller ${ref(this._controller)} run-on-start>\n <mdn-play-runner\n ${ref(this._runner)}\n defaults=\"ix-choice\"\n ></mdn-play-runner>\n </mdn-play-controller>\n </div>\n </div>\n `;\n }\n\n _reset() {\n if (this._template === \"choices\") {\n this.#resetChoices();\n } else {\n super._reset();\n }\n }\n\n _initialCode() {\n const code = super._initialCode();\n if (this._template === \"choices\") {\n code[\"js-hidden\"] = `setChoice(${JSON.stringify(this._choices?.[0])})`;\n }\n return code;\n }\n\n render() {\n return this._template === \"choices\" ? this.#render() : super.render();\n }\n\n firstUpdated() {\n super.firstUpdated();\n if (this._template === \"choices\") {\n this.#resetChoices();\n }\n }\n };\n","import { decode } from \"he\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../play-editor/element.js\";\nimport \"../play-runner/element.js\";\nimport \"../play-console/element.js\";\nimport \"../ix-tab/element.js\";\nimport \"../ix-tab-panel/element.js\";\nimport \"../ix-tab-wrapper/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\n/\n @import { InteractiveExampleBase } from \"./element.js\";\n /\n\n/\n @template {new (...args: any[]) => InteractiveExampleBase} TBase\n * @param {TBase} Base\n /\nexport const InteractiveExampleWithConsole = (Base) =>\n class extends L10nMixin(Base) {\n #render() {\n return html`\n <mdn-play-controller ${ref(this._controller)}>\n <div class=\"template-console\">\n <header>\n <h4>${decode(this.name)}</h4>\n </header>\n ${this._languages.length === 1\n ? html`<mdn-play-editor\n id=\"editor\"\n language=${ifDefined(this._languages[0])}\n ></mdn-play-editor>`\n : html`<mdn-ix-tab-wrapper>\n ${this._languages.map(\n (lang) => html`\n <mdn-ix-tab id=${lang}\n >${this._langName(lang)}</mdn-ix-tab\n >\n <mdn-ix-tab-panel id=${`${lang}-panel`}>\n <mdn-play-editor language=${lang}></mdn-play-editor>\n </mdn-ix-tab-panel>\n `,\n )}\n </mdn-ix-tab-wrapper>`}\n <div class=\"buttons\">\n <mdn-button id=\"execute\" @click=${this._run} variant=\"secondary\"\n >${this.l10n`Run`}</mdn-button\n >\n <mdn-button id=\"reset\" @click=${this._reset} variant=\"secondary\"\n >${this.l10n`Reset`}</mdn-button\n >\n </div>\n <mdn-play-console id=\"console\"></mdn-play-console>\n <mdn-play-runner\n defaults=${ifDefined(\n this._languages.includes(\"wat\") ? \"ix-wat\" : undefined,\n )}\n ></mdn-play-runner>\n </div>\n </mdn-play-controller>\n `;\n }\n\n render() {\n return this._template === \"console\" ? this.#render() : super.render();\n }\n };\n","import { decode } from \"he\";\nimport { html } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../play-editor/element.js\";\nimport \"../play-runner/element.js\";\nimport \"../ix-tab/element.js\";\nimport \"../ix-tab-panel/element.js\";\nimport \"../ix-tab-wrapper/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\n/\n @import { InteractiveExampleBase } from \"./element.js\";\n /\n\n/\n @template {new (...args: any[]) => InteractiveExampleBase} TBase\n * @param {TBase} Base\n /\nexport const InteractiveExampleWithTabs = (Base) =>\n class extends L10nMixin(Base) {\n #render() {\n return html`\n <mdn-play-controller\n ${ref(this._controller)}\n run-on-start\n run-on-change\n >\n <div class=\"template-tabbed\">\n <header>\n <h4>${decode(this.name)}</h4>\n <mdn-button id=\"reset\" @click=${this._reset} variant=\"secondary\"\n >${this.l10n`Reset`}</mdn-button\n >\n </header>\n <mdn-ix-tab-wrapper>\n ${this._languages.map(\n (lang) => html`\n <mdn-ix-tab id=${lang}>${this._langName(lang)}</mdn-ix-tab>\n <mdn-ix-tab-panel id=${`${lang}-panel`}>\n <mdn-play-editor language=${lang}></mdn-play-editor>\n </mdn-ix-tab-panel>\n `,\n )}\n </mdn-ix-tab-wrapper>\n <div class=\"output-wrapper\">\n <h4>${this.l10n`Output`}</h4>\n <mdn-play-runner\n ${ref(this._runner)}\n sandbox=\"allow-top-navigation-by-user-activation\"\n defaults=\"ix-tabbed\"\n ></mdn-play-runner>\n </div>\n </div>\n </mdn-play-controller>\n `;\n }\n\n render() {\n return this._template === \"tabbed\" ? this.#render() : super.render();\n }\n };\n","import { LitElement } from \"lit\";\nimport { createRef } from \"lit/directives/ref.js\";\n\nimport { gleanClick } from \"../../utils/glean.js\";\nimport { upgradePre } from \"../code-example/element.js\";\n\nimport styles from \"./element.css?lit\";\nimport { InteractiveExampleWithChoices } from \"./with-choices.js\";\nimport { InteractiveExampleWithConsole } from \"./with-console.js\";\nimport { InteractiveExampleWithTabs } from \"./with-tabs.js\";\n\n/\n @import { Ref } from 'lit/directives/ref.js';\n * @import { MDNPlayController } from \"../play-controller/element.js\";\n * @import { MDNPlayRunner } from \"../play-runner/element.js\";\n /\n\nconst GLEAN_EVENT_TYPES = [\"focus\", \"copy\", \"cut\", \"paste\", \"click\"];\n\n// eslint-disable-next-line fred/custom-element-name\nexport class InteractiveExampleBase extends LitElement {\n static ssr = false;\n\n static properties = { name: { type: String } };\n\n static styles = styles;\n\n constructor() {\n super();\n this.name = \"\";\n /* @type {string[]} /\n this._languages = [];\n /* @type {Record<string, string>} /\n this._code = {};\n }\n\n /* @type {Ref<MDNPlayController>} /\n _controller = createRef();\n /* @type {Ref<MDNPlayRunner>} /\n _runner = createRef();\n\n _run() {\n this._controller.value?.run();\n }\n\n _reset() {\n this._controller.value?.reset();\n }\n\n _initialCode() {\n /* @type {Record<string, string>} /\n const initialCode = {};\n for (const pre of this.closest(\"section\")?.querySelectorAll(\n \".code-example pre.interactive-example\",\n ) ?? []) {\n const example = upgradePre(pre);\n if (example) {\n const { language, code } = example;\n initialCode[language] = initialCode[language]\n ? `${initialCode[language]}\\n${code}`\n : code;\n }\n }\n\n this._choices = [\n ...(this.closest(\"section\")?.querySelectorAll(\n \".code-example pre.interactive-example-choice\",\n ) \|\| []),\n ]\n .map((pre) => upgradePre(pre)?.code.trim())\n .filter((x) => x !== undefined);\n\n this._languages = Object.keys(initialCode);\n this._template =\n this._choices.length > 0\n ? \"choices\"\n : (this._languages.length === 1 && this._languages[0] === \"js\") \|\|\n (this._languages.includes(\"js\") && this._languages.includes(\"wat\"))\n ? \"console\"\n : \"tabbed\";\n\n return initialCode;\n }\n\n /* @param {string} lang /\n _langName(lang) {\n switch (lang) {\n case \"js\":\n return \"JavaScript\";\n default:\n return lang.toUpperCase();\n }\n }\n\n /* @param {Event} ev /\n _telemetryHandler(ev) {\n let action = ev.type;\n if (\n ev.type === \"click\" &&\n ev.target instanceof HTMLElement &&\n ev.target.id\n ) {\n action = `click@${ev.target.id}`;\n }\n gleanClick(\"interactive-example\", { type: \"action\", label: action });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._telemetryHandler = this._telemetryHandler.bind(this);\n for (const type of GLEAN_EVENT_TYPES) {\n this.renderRoot.addEventListener(type, this._telemetryHandler);\n }\n this._code = this._initialCode();\n }\n\n firstUpdated() {\n if (this._controller.value) {\n this._controller.value.code = this._code;\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n for (const type of GLEAN_EVENT_TYPES) {\n this.renderRoot.removeEventListener(type, this._telemetryHandler);\n }\n }\n}\n\nexport class MDNInteractiveExample extends InteractiveExampleWithChoices(\n InteractiveExampleWithTabs(\n InteractiveExampleWithConsole(InteractiveExampleBase),\n ),\n) {}\n\n// TODO: rari outputs <interactive-example> rather than <mdn-interactive-example>\n// customElements.define(\"mdn-interactive-example\", MDNInteractiveExample);\ncustomElements.define(\"interactive-example\", MDNInteractiveExample);\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\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/chevron-right.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(\"../icon/triangle-alert.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___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{--border:1px solid var(--color-border-primary);--tabbed-font-heading:600 0.625rem/1.2 var(--font-family-text);--elem-radius:0.25rem}header{align-items:center;border-bottom:var(--border);border-top-left-radius:var(--elem-radius);border-top-right-radius:var(--elem-radius);display:flex;grid-area:header;justify-content:space-between;padding:.5rem 1rem}header h4{font-size:1rem;font-weight:400;line-height:1.1876;margin:0}header mdn-button{margin-right:-.5rem}mdn-play-editor{grid-area:editor;height:100%;overflow:auto}.buttons{display:flex;flex-direction:column;gap:.5rem;grid-area:buttons}mdn-play-console{border:var(--border);border-radius:var(--elem-radius);grid-area:console}mdn-ix-tab-wrapper{grid-area:tabs}.template-console{align-content:start;display:grid;gap:.5rem;grid-template-areas:\"header header\" \"editor editor\" \"buttons console\";grid-template-columns:max-content 1fr;grid-template-rows:max-content 1fr 8rem;height:100%}.template-console header{border:var(--border)}.template-console mdn-play-runner{display:none}.template-console mdn-ix-tab-wrapper,.template-console>mdn-play-editor{border:var(--border);border-bottom-left-radius:var(--elem-radius);border-bottom-right-radius:var(--elem-radius);border-top:0;grid-area:editor;margin-top:-.5rem}@media (max-width:769px){.template-console{grid-template-areas:\"header\" \"editor\" \"buttons\" \"console\";grid-template-columns:1fr;grid-template-rows:max-content 1fr max-content 8rem}.template-console .buttons{flex-direction:row;justify-content:space-between}}.template-tabbed{border:var(--border);border-radius:var(--elem-radius);display:grid;grid-template-areas:\"header header\" \"tabs runner\";grid-template-columns:6fr 4fr;grid-template-rows:max-content 1fr;height:100%;overflow:hidden}.template-tabbed .output-wrapper{border-left:var(--border);grid-area:runner;overflow:hidden;position:relative}:is(.template-tabbed .output-wrapper) h4{background-color:var(--color-background-secondary);border-bottom-left-radius:var(--elem-radius);color:var(--text-secondary);font:var(--tabbed-font-heading);margin:0;padding:.5rem 1.6rem;position:absolute;right:0;text-transform:uppercase;top:0;z-index:2}@media (max-width:992px){.template-tabbed{grid-template-areas:\"header\" \"tabs\" \"runner\";grid-template-columns:1fr;grid-template-rows:max-content 1fr 1fr}.template-tabbed .output-wrapper{border-left:0;border-top:var(--border)}}.template-choices{border:var(--border);border-radius:var(--elem-radius);display:grid;grid-template-areas:\"header header\" \"choice runner\";grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:max-content 1fr;height:100%}@media (max-width:992px){.template-choices{grid-template-areas:\"header\" \"choice\" \"runner\";grid-template-columns:1fr}}.template-choices .choice-wrapper{border-right:var(--border);display:flex;flex-direction:column;grid-area:choice;overflow-y:auto;padding:1rem 0 1rem 1rem;row-gap:.4rem}@media (max-width:992px){.template-choices .choice-wrapper{border-bottom:var(--border);border-right:none;padding-right:1em}}:is(.template-choices .choice-wrapper) .choice{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-blue-80);--field-focus-border:var(--csstools-light-dark-toggle--0,var(--color-blue-50));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--color-blue-10);--focus-01:0 0 0 3px var(--csstools-light-dark-toggle--1,var(--color-blue-90));align-items:center;display:flex;flex-grow:1}@supports (color:light-dark(red,red)){:is(.template-choices .choice-wrapper) .choice{--field-focus-border:light-dark(var(--color-blue-50),var(--color-blue-80));--focus-01:0 0 0 3px light-dark(var(--color-blue-90),var(--color-blue-10))}}@supports not (color:light-dark(tan,tan)){:is(:is(.template-choices .choice-wrapper) .choice) {--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-blue-80);--field-focus-border:var(--csstools-light-dark-toggle--0,var(--color-blue-50));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--color-blue-10);--focus-01:0 0 0 3px var(--csstools-light-dark-toggle--1,var(--color-blue-90))}}:is(:is(.template-choices .choice-wrapper) .choice):after{background-color:currentcolor;color:var(--field-focus-border);content:\"\";display:block;height:1.25rem;margin:0 .75rem;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});-webkit-mask-size:cover;mask-size:cover;opacity:0;width:1.25rem}@media (max-width:992px){:is(:is(.template-choices .choice-wrapper) .choice):after{display:none}}.selected:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border-color:var(--field-focus-border);box-shadow:var(--focus-01);cursor:text}.selected:is(:is(.template-choices .choice-wrapper) .choice):after{opacity:1;transition:all .2s ease-out}.unsupported:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) var(--color-yellow-80);border-color:var(--csstools-light-dark-toggle--2,var(--color-yellow-50))}@supports (color:light-dark(red,red)){.unsupported:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border-color:light-dark(var(--color-yellow-50),var(--color-yellow-80))}}.unsupported:is(:is(.template-choices .choice-wrapper) .choice):after{background-image:url(${___CSS_LOADER_URL_REPLACEMENT_1___});background-position:50%;background-repeat:no-repeat;background-size:1rem;content:\"\";height:1rem;opacity:1;transition:none;width:1rem}:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border:var(--border);border-radius:var(--elem-radius);cursor:pointer;width:100%}.template-choices .output-wrapper{height:300px;overflow:hidden}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["document","Set","e","Number","JSON","InteractiveExampleBase","String","Object","HTMLElement","MDNInteractiveExample","customElements","t"],"mappings":"icAKO,SAAS,EAAe,CAAI,EAGjC,IAAM,EAAUA,SAAS,aAAa,CAAC,OAGvC,EAAO,EAAK,UAAU,CAJG,uBAIgB,IAEzC,IAAM,EAAoB,yBACpB,EAAQ,EAAQ,KAAK,CAGrB,EAAoB,EACvB,KAAK,CAAC,KACN,GAAG,CAAC,AAAC,GAAM,EAAE,IAAI,IACjB,MAAM,CAAC,AAAC,GAAM,EAAE,MAAM,CAAG,EA2B5B,GAAM,OAAO,CAAG,GAGhB,IAAM,EAA8B,IAAIC,IAElC,EAAuB,IAAIA,IAEjC,IAAK,IAAM,KAAe,EAAmB,CAC3C,IAAM,EAAkB,EAAM,OAAO,AAGrC,GAAM,OAAO,EAAI,EAAc,IAE/B,IAAM,EAAmB,EAAM,OAAO,GAAK,EAErC,EAnCC,EAAkB,IAAI,CAmCa,GACpC,EAAe,AA3BvB,SAAiC,CAAW,EAC1C,IAAM,EAAc,EAAkB,IAAI,CAAC,GACrC,EAAS,AAAgB,OAAhB,EAAuB,GAAK,CAAW,CAAC,EAAE,CAKzD,MAAO,AAHL,CAAW,OAAX,EAAkB,EAAc,EAAY,KAAK,CAAC,EAAO,MAAM,GAGtC,KAAK,CADF,QACyB,CAAC,EAAE,EAAI,EAChE,EAmB+C,EAEzC,IAAoB,EAEtB,EAA4B,GAAG,CAAC,GACvB,AAAC,GAAqB,GAC/B,EAAqB,GAAG,CAAC,EAE7B,CAEA,GAAI,EAAqB,IAAI,CAAG,EAAG,CAEjC,IAAK,IAAM,KAAc,EACvB,EAAqB,MAAM,CAAC,GAG9B,GAAI,EAAqB,IAAI,CAAG,EAAG,MAAO,EAC5C,CACA,MAAO,EACT,C,iBC9DO,IAAM,EAAgC,AAAC,GAC5C,aAAc,QAAU,GACtB,OAAO,WAAa,CAClB,iBAAkB,CAAE,MAAO,EAAK,EAChC,oBAAqB,CAAE,MAAO,EAAK,CACrC,CAAE,AAGF,aAAY,GAAG,CAAK,CAAE,CACpB,KAAK,GAEL,IAAI,CAAC,gBAAgB,CAAG,GAExB,IAAI,CAAC,mBAAmB,CAAG,EAAE,AAC/B,CAGA,EAAY,CAAC,CAAE,QAAM,CAAE,EACjB,aAAkB,eAAa,EACjC,EAAO,KAAK,EAEhB,CAGA,EAAa,CAAC,CAAE,QAAM,CAAE,EAClB,aAAkB,eAAa,GACjC,IAAI,CAAC,EAAkB,CAAC,GACxB,IAAI,CAAC,EAAa,CAAC,GAEvB,CAGA,EAAa,CAAC,CAAE,QAAM,CAAE,EAClB,aAAkB,eAAa,GACjC,IAAI,CAAC,EAAkB,CAAC,GACpB,IAAI,CAAC,gBAAgB,GAAK,IAAI,CAAC,EAAS,CAAC,IAC3C,IAAI,CAAC,EAAa,CAAC,GAGzB,CAEA,EAAa,GACX,IAAI,CAAC,gBAAgB,CAAG,GAExB,IAAMC,EAAc,IACd,IAAI,CAAC,UAAU,EAAE,iBAAiB,oBAAsB,EAAE,CAC/D,CAED,IAAK,GAAM,CAAC,EAAO,EAAW,EAAI,IAAIA,EAAY,CAAC,OAAO,GAExD,EAAW,KAAK,CADH,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAU,EAI3C,KAAI,CAAC,mBAAmB,CACtB,IAAI,CAAC,QAAQ,EAAE,IAAI,AAAC,GAAS,CAAC,EAAe,GAAQ,MAAQ,EAAE,CAEjE,IAAM,EAAQA,CAAW,CAAC,EAAE,AACxB,IACF,IAAI,CAAC,EAAa,CAAC,EAEvB,CAGA,MAAM,EAAa,CAACA,CAAM,EACxB,IAAM,EAAQ,IAAI,CAAC,EAAS,CAACA,EAC7B,OAAM,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,YAAY,CACpC,IAAK,SACL,KAAMA,EAAO,KAAK,AACpB,GACA,IAAI,CAAC,gBAAgB,CAAG,CAC1B,CAGA,EAAkB,CAACA,CAAM,EACvB,IAAM,EAAQ,IAAI,CAAC,EAAS,CAACA,EAC7B,KAAI,CAAC,mBAAmB,CAAG,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,EAAO,IAC9D,IAAU,EAAI,CAAC,EAAeA,EAAO,KAAK,EAAI,EAElD,CAGA,EAAS,CAACA,CAAM,EACd,OAAOC,OAAO,QAAQ,CAACD,EAAO,OAAO,CAAC,KAAK,EAAI,KAAM,GACvD,CAEA,EAAO,GACL,MAAO,QAAI,CAAC;;;gBAGF,EAAE,aAAO,IAAI,CAAC,IAAI,EAAE;0CACM,EAAE,IAAI,CAAC,MAAM,CAAC;eACzC,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;;;;mBAKf,EAAE,IAAI,CAAC,EAAY,CAAC;mBACpB,EAAE,IAAI,CAAC,EAAa,CAAC;oBACpB,EAAE,IAAI,CAAC,EAAa,CAAC;;YAE7B,EAAE,IAAI,CAAC,QAAQ,EAAE,IACf,CAAC,EAAM,IAAU,QAAI,CAAC;;wBAEZ,EAAE,CACN,YACI,IAAU,IAAI,CAAC,gBAAgB,CAAG,CAAC,WAAW,CAAG,EAAE,IACnD,IAAI,CAAC,mBAAmB,CAAC,EAAM,CAAG,CAAC,cAAc,CAAG,EAAE,CAC3D,CAAC,IAAI,CAAC,KAAK;;;+BAGC,EAAE,EAAM;;;2BAGZ,EAAE,IAAI;2BACN,EAAE,GAAM,OAAO;;;cAG5B,CAAC,EACD;;;iCAGmB,EAAE,QAAI,IAAI,CAAC,WAAW,EAAE;;gBAEzC,EAAE,QAAI,IAAI,CAAC,OAAO,EAAE;;;;;;MAM9B,CAAC,AACH,CAEA,QAAS,CACH,AAAmB,YAAnB,IAAI,CAAC,SAAS,CAChB,IAAI,CAAC,EAAa,GAElB,KAAK,CAAC,QAEV,CAEA,cAAe,CACb,IAAM,EAAO,KAAK,CAAC,eAInB,MAHI,AAAmB,YAAnB,IAAI,CAAC,SAAS,EAChB,EAAI,CAAC,YAAY,CAAG,CAAC,UAAU,EAAEE,KAAK,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,AAAD,EAEhE,CACT,CAEA,QAAS,CACP,MAAO,AAAmB,YAAnB,IAAI,CAAC,SAAS,CAAiB,IAAI,CAAC,EAAO,GAAK,KAAK,CAAC,QAC/D,CAEA,cAAe,CACb,KAAK,CAAC,eACF,AAAmB,YAAnB,IAAI,CAAC,SAAS,EAChB,IAAI,CAAC,EAAa,EAEtB,CACF,E,iDC5JK,IAAM,EAAgC,AAAC,GAC5C,aAAc,QAAU,GACtB,EAAO,GACL,MAAO,QAAI,CAAC;6BACW,EAAE,QAAI,IAAI,CAAC,WAAW,EAAE;;;kBAGnC,EAAE,aAAO,IAAI,CAAC,IAAI,EAAE;;YAE1B,EAAE,AAA2B,IAA3B,IAAI,CAAC,UAAU,CAAC,MAAM,CACpB,QAAI,CAAC;;2BAEM,EAAE,QAAU,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE;mCACxB,CAAC,CACpB,QAAI,CAAC;kBACH,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CACnB,AAAC,GAAS,QAAI,CAAC;qCACE,EAAE,EAAK;yBACnB,EAAE,IAAI,CAAC,SAAS,CAAC,GAAM;;2CAEL,EAAE,CAAC,EAAE,EAAK,MAAM,CAAC,CAAC;kDACX,EAAE,EAAK;;oBAErC,CAAC,EACD;qCACiB,CAAC,CAAC;;8CAEO,EAAE,IAAI,CAAC,IAAI,CAAC;iBACzC,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;;4CAEU,EAAE,IAAI,CAAC,MAAM,CAAC;iBACzC,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;;;;uBAKb,EAAE,QACT,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAS,SAAW,QAC7C;;;;MAIV,CAAC,AACH,CAEA,QAAS,CACP,MAAO,AAAmB,YAAnB,IAAI,CAAC,SAAS,CAAiB,IAAI,CAAC,EAAO,GAAK,KAAK,CAAC,QAC/D,CACF,EClDW,EAA6B,AAAC,GACzC,aAAc,QAAU,GACtB,EAAO,GACL,MAAO,QAAI,CAAC;;UAER,EAAE,QAAI,IAAI,CAAC,WAAW,EAAE;;;;;;kBAMhB,EAAE,aAAO,IAAI,CAAC,IAAI,EAAE;4CACM,EAAE,IAAI,CAAC,MAAM,CAAC;iBACzC,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;;;cAItB,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CACnB,AAAC,GAAS,QAAI,CAAC;iCACE,EAAE,EAAK,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,GAAM;uCACzB,EAAE,CAAC,EAAE,EAAK,MAAM,CAAC,CAAC;8CACX,EAAE,EAAK;;gBAErC,CAAC,EACD;;;kBAGE,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;;gBAEtB,EAAE,QAAI,IAAI,CAAC,OAAO,EAAE;;;;;;;MAO9B,CAAC,AACH,CAEA,QAAS,CACP,MAAO,AAAmB,WAAnB,IAAI,CAAC,SAAS,CAAgB,IAAI,CAAC,EAAO,GAAK,KAAK,CAAC,QAC9D,CACF,EC7CI,EAAoB,CAAC,QAAS,OAAQ,MAAO,QAAS,QAAQ,CAG7D,IAAMC,uBAAN,MAAMA,+BAA+B,IAAU,CACpD,OAAO,IAAM,EAAM,AAEnB,QAAO,WAAa,CAAE,KAAM,CAAE,KAAMC,MAAO,CAAE,CAAE,AAE/C,QAAO,OAAS,GAAM,AAAC,AAEvB,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,IAAI,CAAG,GAEZ,IAAI,CAAC,UAAU,CAAG,EAAE,CAEpB,IAAI,CAAC,KAAK,CAAG,CAAC,CAChB,CAGA,YAAc,SAAY,AAE1B,SAAU,SAAY,AAEtB,OAAO,CACL,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,KAC1B,CAEA,QAAS,CACP,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,OAC1B,CAEA,cAAe,CAEb,IAAM,EAAc,CAAC,EACrB,IAAK,IAAM,KAAO,IAAI,CAAC,OAAO,CAAC,YAAY,iBACzC,0CACG,EAAE,CAAE,CACP,IAAM,EAAU,iBAAW,GAC3B,GAAI,EAAS,CACX,GAAM,CAAE,UAAQ,CAAE,MAAI,CAAE,CAAG,CAC3B,EAAW,CAAC,EAAS,CAAG,CAAW,CAAC,EAAS,CACzC,CAAC,EAAE,CAAW,CAAC,EAAS;AAAG,EAAE,EAAK,CAAC,CACnC,CACN,CACF,CAmBA,OAjBA,IAAI,CAAC,QAAQ,CAAG,IACV,IAAI,CAAC,OAAO,CAAC,YAAY,iBAC3B,iDACG,EAAE,CACR,CACE,GAAG,CAAC,AAAC,GAAQ,iBAAW,IAAM,KAAK,QACnC,MAAM,CAAC,AAAC,GAAM,AAAM,SAAN,GAEjB,IAAI,CAAC,UAAU,CAAGC,OAAO,IAAI,CAAC,GAC9B,IAAI,CAAC,SAAS,CACZ,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAG,EACnB,UACA,AAA4B,IAA3B,IAAI,CAAC,UAAU,CAAC,MAAM,EAAU,AAAuB,OAAvB,IAAI,CAAC,UAAU,CAAC,EAAE,EAChD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAS,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAC5D,UACA,SAED,CACT,CAGA,UAAU,CAAI,CAAE,OACd,AACO,OADC,EAEG,aAEA,EAAK,WAAW,EAE7B,CAGA,kBAAkBL,CAAE,CAAE,CACpB,IAAI,EAASA,EAAG,IAAI,AAElBA,AAAY,WAAZA,EAAG,IAAI,EACPA,EAAG,MAAM,YAAYM,aACrBN,EAAG,MAAM,CAAC,EAAE,EAEZ,GAAS,CAAC,MAAM,EAAEA,EAAG,MAAM,CAAC,EAAE,CAAC,CAAC,AAAD,EAEjC,QAAW,sBAAuB,CAAE,KAAM,SAAU,MAAO,CAAO,EACpE,CAEA,mBAAoB,CAGlB,IAAK,IAAM,KAFX,KAAK,CAAC,oBACN,IAAI,CAAC,iBAAiB,CAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,EACtC,GACjB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAM,IAAI,CAAC,iBAAiB,CAE/D,KAAI,CAAC,KAAK,CAAG,IAAI,CAAC,YAAY,EAChC,CAEA,cAAe,CACT,IAAI,CAAC,WAAW,CAAC,KAAK,EACxB,KAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAG,IAAI,CAAC,KAAK,AAAD,CAE3C,CAEA,sBAAuB,CAErB,IAAK,IAAM,KADX,KAAK,CAAC,uBACa,GACjB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,EAAM,IAAI,CAAC,iBAAiB,CAEpE,CACF,EAEO,IAAMO,sBAAN,MAAMA,8BAA8B,EACzC,EACE,EAA8BJ,0BAE/B,EAIHK,eAAe,MAAM,CAAC,sBAAuBD,sB,wDC5HtC,SAAS,EAAW,CAAE,CAAE,CAAEE,KAAAA,CAAI,CAAE,OAAK,CAAE,EAC5C,sBAA+B,CAAC,CAC9B,KACAA,KAAAA,EACA,OACF,EACF,C,mHCfI,EAAgC,kBAChC,EAAgC,kBAChC,EAA0B,IAA4B,KACtD,EAAqC,IAAgC,GACrE,EAAqC,IAAgC,GAEzE,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,CAAC,4tIAA4tI,EAAE,EAAmC,iBAAiB,EAAE,EAAmC,o7BAAo7B,EAAE,EAAmC,0VAA0V,CAAC,CAAE,GAAG,EAE1pL,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}
1	+ {"version":3,"file":"2656.9ffeb69f976e1ada.js","sources":["webpack://@mdn/fred/./components/interactive-example/utils.js","webpack://@mdn/fred/./components/interactive-example/with-choices.js","webpack://@mdn/fred/./components/interactive-example/with-console.js","webpack://@mdn/fred/./components/interactive-example/with-tabs.js","webpack://@mdn/fred/./components/interactive-example/element.js","webpack://@mdn/fred/./utils/glean.js","webpack://@mdn/fred/./components/interactive-example/element.css"],"sourcesContent":["/*\n Checks if the CSS code is supported by the current browser.\n \n @param {string} code\n /\nexport function isCSSSupported(code) {\n // http://regexr.com/3fvik\n const cssCommentsMatch = /(\\/\\)[\\s\\S]+(\\\\/)/g;\n const element = document.createElement(\"div\");\n\n // strip out any CSS comments before applying the code\n code = code.replaceAll(cssCommentsMatch, \"\");\n\n const vendorPrefixMatch = /^-(?:webkit\|moz\|ms\|o)-/;\n const style = element.style;\n // Expecting declarations to be separated by \";\"\n // Declarations with just white space are ignored\n const declarationsArray = code\n .split(\";\")\n .map((d) => d.trim())\n .filter((d) => d.length > 0);\n\n /\n @param {string} declaration\n * @returns {boolean} - true if declaration starts with -webkit-, -moz-, -ms- or -o-\n /\n function hasVendorPrefix(declaration) {\n return vendorPrefixMatch.test(declaration);\n }\n\n /\n Looks for property name by cutting off optional vendor prefix at the beginning\n * and then cutting off rest of the declaration, starting from any whitespace or \":\" in property name.\n * @param {string} declaration - single css declaration, with not white space at the beginning\n * @returns {string} - property name without vendor prefix.\n /\n function getPropertyNameNoPrefix(declaration) {\n const prefixMatch = vendorPrefixMatch.exec(declaration);\n const prefix = prefixMatch === null ? \"\" : prefixMatch[0];\n const declarationNoPrefix =\n prefix === null ? declaration : declaration.slice(prefix.length);\n // Expecting property name to be over, when any whitespace or \":\" is found\n const propertyNameSeparator = /[\\s:]/;\n return declarationNoPrefix.split(propertyNameSeparator)[0] ?? \"\";\n }\n\n // Clearing previous state\n style.cssText = \"\";\n\n // List of found and applied properties with vendor prefix\n const appliedPropertiesWithPrefix = new Set();\n // List of not applied properties - because of lack of support for its name or value\n const notAppliedProperties = new Set();\n\n for (const declaration of declarationsArray) {\n const previousCSSText = style.cssText;\n // Declarations are added one by one, because browsers sometimes combine multiple declarations into one\n // For example Chrome changes \"column-count: auto;column-width: 8rem;\" into \"columns: 8rem auto;\"\n style.cssText += declaration + \";\"; // \";\" was previous removed while using split method\n // In case property name or value is not supported, browsers skip single declaration, while leaving rest of them intact\n const correctlyApplied = style.cssText !== previousCSSText;\n\n const vendorPrefixFound = hasVendorPrefix(declaration);\n const propertyName = getPropertyNameNoPrefix(declaration);\n\n if (correctlyApplied && vendorPrefixFound) {\n // We are saving applied properties with prefix, so equivalent property with no prefix doesn't need to be supported\n appliedPropertiesWithPrefix.add(propertyName);\n } else if (!correctlyApplied && !vendorPrefixFound) {\n notAppliedProperties.add(propertyName);\n }\n }\n\n if (notAppliedProperties.size > 0) {\n // If property with vendor prefix is supported, we can ignore the fact that browser doesn't support property with no prefix\n for (const substitute of appliedPropertiesWithPrefix) {\n notAppliedProperties.delete(substitute);\n }\n // If any other declaration is not supported, whole block should be marked as invalid\n if (notAppliedProperties.size > 0) return false;\n }\n return true;\n}\n","import { decode } from \"he\";\nimport { html } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { MDNPlayEditor } from \"../play-editor/element.js\";\n\nimport { isCSSSupported } from \"./utils.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../play-runner/element.js\";\n\n/\n @import { InteractiveExampleBase } from \"./element.js\";\n /\n\n/\n @template {new (...args: any[]) => InteractiveExampleBase} TBase\n * @param {TBase} Base\n /\nexport const InteractiveExampleWithChoices = (Base) =>\n class extends L10nMixin(Base) {\n static properties = {\n __choiceSelected: { state: true },\n __choiceUnsupported: { state: true },\n };\n\n /* @param {any[]} _args /\n constructor(..._args) {\n super();\n /* @type {number} /\n this.__choiceSelected = -1;\n /* @type {boolean[]} /\n this.__choiceUnsupported = [];\n }\n\n /* @param {MouseEvent} event /\n #choiceFocus({ target }) {\n if (target instanceof MDNPlayEditor) {\n target.focus();\n }\n }\n\n /* @param {MouseEvent} event /\n #choiceSelect({ target }) {\n if (target instanceof MDNPlayEditor) {\n this.#updateUnsupported(target);\n this.#selectChoice(target);\n }\n }\n\n /* @param {Event} event /\n #choiceUpdate({ target }) {\n if (target instanceof MDNPlayEditor) {\n this.#updateUnsupported(target);\n if (this.__choiceSelected === this.#getIndex(target)) {\n this.#selectChoice(target);\n }\n }\n }\n\n #resetChoices() {\n this.__choiceSelected = -1;\n\n const editorNodes = [\n ...(this.shadowRoot?.querySelectorAll(\"mdn-play-editor\") \|\| []),\n ];\n\n for (const [index, editorNode] of [...editorNodes].entries()) {\n const code = this._choices?.at(index) ?? \"\";\n editorNode.value = code;\n }\n\n this.__choiceUnsupported =\n this._choices?.map((code) => !isCSSSupported(code \|\| \"\")) \|\| [];\n\n const first = editorNodes[0];\n if (first) {\n this.#selectChoice(first);\n }\n }\n\n /* @param {MDNPlayEditor} editor /\n async #selectChoice(editor) {\n const index = this.#getIndex(editor);\n await this._runner.value?.postMessage({\n typ: \"choice\",\n code: editor.value,\n });\n this.__choiceSelected = index;\n }\n\n /* @param {MDNPlayEditor} editor /\n #updateUnsupported(editor) {\n const index = this.#getIndex(editor);\n this.__choiceUnsupported = this.__choiceUnsupported.map((value, i) =>\n index === i ? !isCSSSupported(editor.value) : value,\n );\n }\n\n /* @param {MDNPlayEditor} editor /\n #getIndex(editor) {\n return Number.parseInt(editor.dataset.index ?? \"-1\", 10);\n }\n\n #render() {\n return html`\n <div class=\"template-choices\">\n <header>\n <h4>${decode(this.name)}</h4>\n <mdn-button id=\"reset\" @click=${this._reset} variant=\"secondary\"\n >${this.l10n`Reset`}</mdn-button\n >\n </header>\n <div\n class=\"choice-wrapper\"\n @click=${this.#choiceFocus}\n @focus=${this.#choiceSelect}\n @update=${this.#choiceUpdate}\n >\n ${this._choices?.map(\n (code, index) => html`\n <div\n class=${[\n \"choice\",\n ...(index === this.__choiceSelected ? [\"selected\"] : []),\n ...(this.__choiceUnsupported[index] ? [\"unsupported\"] : []),\n ].join(\" \")}\n >\n <mdn-play-editor\n data-index=${index}\n language=\"css\"\n minimal=\"true\"\n .delay=${100}\n .value=${code?.trim()}\n ></mdn-play-editor>\n </div>\n `,\n )}\n </div>\n <div class=\"output-wrapper\">\n <mdn-play-controller ${ref(this._controller)} run-on-start>\n <mdn-play-runner\n ${ref(this._runner)}\n defaults=\"ix-choice\"\n ></mdn-play-runner>\n </mdn-play-controller>\n </div>\n </div>\n `;\n }\n\n _reset() {\n if (this._template === \"choices\") {\n this.#resetChoices();\n } else {\n super._reset();\n }\n }\n\n _initialCode() {\n const code = super._initialCode();\n if (this._template === \"choices\") {\n code[\"js-hidden\"] = `setChoice(${JSON.stringify(this._choices?.[0])})`;\n }\n return code;\n }\n\n render() {\n return this._template === \"choices\" ? this.#render() : super.render();\n }\n\n firstUpdated() {\n super.firstUpdated();\n if (this._template === \"choices\") {\n this.#resetChoices();\n }\n }\n };\n","import { decode } from \"he\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../play-editor/element.js\";\nimport \"../play-runner/element.js\";\nimport \"../play-console/element.js\";\nimport \"../ix-tab/element.js\";\nimport \"../ix-tab-panel/element.js\";\nimport \"../ix-tab-wrapper/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\n/\n @import { InteractiveExampleBase } from \"./element.js\";\n /\n\n/\n @template {new (...args: any[]) => InteractiveExampleBase} TBase\n * @param {TBase} Base\n /\nexport const InteractiveExampleWithConsole = (Base) =>\n class extends L10nMixin(Base) {\n #render() {\n return html`\n <mdn-play-controller ${ref(this._controller)}>\n <div class=\"template-console\">\n <header>\n <h4>${decode(this.name)}</h4>\n </header>\n ${this._languages.length === 1\n ? html`<mdn-play-editor\n id=\"editor\"\n language=${ifDefined(this._languages[0])}\n ></mdn-play-editor>`\n : html`<mdn-ix-tab-wrapper>\n ${this._languages.map(\n (lang) => html`\n <mdn-ix-tab id=${lang}\n >${this._langName(lang)}</mdn-ix-tab\n >\n <mdn-ix-tab-panel id=${`${lang}-panel`}>\n <mdn-play-editor language=${lang}></mdn-play-editor>\n </mdn-ix-tab-panel>\n `,\n )}\n </mdn-ix-tab-wrapper>`}\n <div class=\"buttons\">\n <mdn-button id=\"execute\" @click=${this._run} variant=\"secondary\"\n >${this.l10n`Run`}</mdn-button\n >\n <mdn-button id=\"reset\" @click=${this._reset} variant=\"secondary\"\n >${this.l10n`Reset`}</mdn-button\n >\n </div>\n <mdn-play-console id=\"console\"></mdn-play-console>\n <mdn-play-runner\n defaults=${ifDefined(\n this._languages.includes(\"wat\") ? \"ix-wat\" : undefined,\n )}\n ></mdn-play-runner>\n </div>\n </mdn-play-controller>\n `;\n }\n\n render() {\n return this._template === \"console\" ? this.#render() : super.render();\n }\n };\n","import { decode } from \"he\";\nimport { html } from \"lit\";\nimport { ref } from \"lit/directives/ref.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../play-editor/element.js\";\nimport \"../play-runner/element.js\";\nimport \"../ix-tab/element.js\";\nimport \"../ix-tab-panel/element.js\";\nimport \"../ix-tab-wrapper/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\n/\n @import { InteractiveExampleBase } from \"./element.js\";\n /\n\n/\n @template {new (...args: any[]) => InteractiveExampleBase} TBase\n * @param {TBase} Base\n /\nexport const InteractiveExampleWithTabs = (Base) =>\n class extends L10nMixin(Base) {\n #render() {\n return html`\n <mdn-play-controller\n ${ref(this._controller)}\n run-on-start\n run-on-change\n >\n <div class=\"template-tabbed\">\n <header>\n <h4>${decode(this.name)}</h4>\n <mdn-button id=\"reset\" @click=${this._reset} variant=\"secondary\"\n >${this.l10n`Reset`}</mdn-button\n >\n </header>\n <mdn-ix-tab-wrapper>\n ${this._languages.map(\n (lang) => html`\n <mdn-ix-tab id=${lang}>${this._langName(lang)}</mdn-ix-tab>\n <mdn-ix-tab-panel id=${`${lang}-panel`}>\n <mdn-play-editor language=${lang}></mdn-play-editor>\n </mdn-ix-tab-panel>\n `,\n )}\n </mdn-ix-tab-wrapper>\n <div class=\"output-wrapper\">\n <h4>${this.l10n`Output`}</h4>\n <mdn-play-runner\n ${ref(this._runner)}\n sandbox=\"allow-top-navigation-by-user-activation\"\n defaults=\"ix-tabbed\"\n ></mdn-play-runner>\n </div>\n </div>\n </mdn-play-controller>\n `;\n }\n\n render() {\n return this._template === \"tabbed\" ? this.#render() : super.render();\n }\n };\n","import { LitElement } from \"lit\";\nimport { createRef } from \"lit/directives/ref.js\";\n\nimport { gleanClick } from \"../../utils/glean.js\";\nimport { upgradePre } from \"../code-example/element.js\";\n\nimport styles from \"./element.css?lit\";\nimport { InteractiveExampleWithChoices } from \"./with-choices.js\";\nimport { InteractiveExampleWithConsole } from \"./with-console.js\";\nimport { InteractiveExampleWithTabs } from \"./with-tabs.js\";\n\n/\n @import { Ref } from 'lit/directives/ref.js';\n * @import { MDNPlayController } from \"../play-controller/element.js\";\n * @import { MDNPlayRunner } from \"../play-runner/element.js\";\n /\n\nconst GLEAN_EVENT_TYPES = [\"focus\", \"copy\", \"cut\", \"paste\", \"click\"];\n\n// eslint-disable-next-line fred/custom-element-name\nexport class InteractiveExampleBase extends LitElement {\n static ssr = false;\n\n static properties = { name: { type: String } };\n\n static styles = styles;\n\n constructor() {\n super();\n this.name = \"\";\n /* @type {string[]} /\n this._languages = [];\n /* @type {Record<string, string>} /\n this._code = {};\n }\n\n /* @type {Ref<MDNPlayController>} /\n _controller = createRef();\n /* @type {Ref<MDNPlayRunner>} /\n _runner = createRef();\n\n _run() {\n this._controller.value?.run();\n }\n\n _reset() {\n this._controller.value?.reset();\n }\n\n _initialCode() {\n /* @type {Record<string, string>} /\n const initialCode = {};\n for (const pre of this.closest(\"section\")?.querySelectorAll(\n \".code-example pre.interactive-example\",\n ) ?? []) {\n const example = upgradePre(pre);\n if (example) {\n const { language, code } = example;\n initialCode[language] = initialCode[language]\n ? `${initialCode[language]}\\n${code}`\n : code;\n }\n }\n\n this._choices = [\n ...(this.closest(\"section\")?.querySelectorAll(\n \".code-example pre.interactive-example-choice\",\n ) \|\| []),\n ]\n .map((pre) => upgradePre(pre)?.code.trim())\n .filter((x) => x !== undefined);\n\n this._languages = Object.keys(initialCode);\n this._template =\n this._choices.length > 0\n ? \"choices\"\n : (this._languages.length === 1 && this._languages[0] === \"js\") \|\|\n (this._languages.includes(\"js\") && this._languages.includes(\"wat\"))\n ? \"console\"\n : \"tabbed\";\n\n return initialCode;\n }\n\n /* @param {string} lang /\n _langName(lang) {\n switch (lang) {\n case \"js\":\n return \"JavaScript\";\n default:\n return lang.toUpperCase();\n }\n }\n\n /* @param {Event} ev /\n _telemetryHandler(ev) {\n let action = ev.type;\n if (\n ev.type === \"click\" &&\n ev.target instanceof HTMLElement &&\n ev.target.id\n ) {\n action = `click@${ev.target.id}`;\n }\n gleanClick(\"interactive-example\", { type: \"action\", label: action });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._telemetryHandler = this._telemetryHandler.bind(this);\n for (const type of GLEAN_EVENT_TYPES) {\n this.renderRoot.addEventListener(type, this._telemetryHandler);\n }\n this._code = this._initialCode();\n }\n\n firstUpdated() {\n if (this._controller.value) {\n this._controller.value.code = this._code;\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n for (const type of GLEAN_EVENT_TYPES) {\n this.renderRoot.removeEventListener(type, this._telemetryHandler);\n }\n }\n}\n\nexport class MDNInteractiveExample extends InteractiveExampleWithChoices(\n InteractiveExampleWithTabs(\n InteractiveExampleWithConsole(InteractiveExampleBase),\n ),\n) {}\n\n// TODO: rari outputs <interactive-example> rather than <mdn-interactive-example>\n// customElements.define(\"mdn-interactive-example\", MDNInteractiveExample);\ncustomElements.define(\"interactive-example\", MDNInteractiveExample);\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\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/chevron-right.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(\"../icon/triangle-alert.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___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{--border:1px solid var(--color-border-primary);--tabbed-font-heading:600 0.625rem/1.2 var(--font-family-text);--elem-radius:0.25rem}header{align-items:center;border-bottom:var(--border);border-top-left-radius:var(--elem-radius);border-top-right-radius:var(--elem-radius);display:flex;grid-area:header;justify-content:space-between;padding:.5rem 1rem}header h4{font-size:var(--font-size-normal);font-weight:400;line-height:1.1876;margin:0;overflow-wrap:anywhere}header mdn-button{margin-right:-.5rem}mdn-play-editor{grid-area:editor;height:100%;overflow:auto}.buttons{display:flex;flex-direction:column;gap:.5rem;grid-area:buttons}mdn-play-console{border:var(--border);border-radius:var(--elem-radius);grid-area:console}mdn-ix-tab-wrapper{grid-area:tabs}.template-console{align-content:start;display:grid;gap:.5rem;grid-template-areas:\"header header\" \"editor editor\" \"buttons console\";grid-template-columns:max-content 1fr;grid-template-rows:max-content 1fr 8rem;height:100%}.template-console header{border:var(--border)}.template-console mdn-play-runner{display:none}.template-console mdn-ix-tab-wrapper,.template-console>mdn-play-editor{border:var(--border);border-bottom-left-radius:var(--elem-radius);border-bottom-right-radius:var(--elem-radius);border-top:0;grid-area:editor;margin-top:-.5rem}@media (width <= 769px){.template-console{grid-template-areas:\"header\" \"editor\" \"buttons\" \"console\";grid-template-columns:1fr;grid-template-rows:max-content 1fr max-content 8rem}.template-console .buttons{flex-direction:row;justify-content:space-between}}.template-tabbed{border:var(--border);border-radius:var(--elem-radius);display:grid;grid-template-areas:\"header header\" \"tabs runner\";grid-template-columns:6fr 4fr;grid-template-rows:max-content 1fr;height:100%;overflow:hidden}.template-tabbed .output-wrapper{border-left:var(--border);grid-area:runner;overflow:hidden;position:relative}:is(.template-tabbed .output-wrapper) h4{background-color:var(--color-background-secondary);border-bottom-left-radius:var(--elem-radius);color:var(--text-secondary);font:var(--tabbed-font-heading);margin:0;padding:.5rem 1.6rem;position:absolute;right:0;text-transform:uppercase;top:0;z-index:2}@media (width <= 992px){.template-tabbed{grid-template-areas:\"header\" \"tabs\" \"runner\";grid-template-columns:1fr;grid-template-rows:max-content 1fr 1fr}.template-tabbed .output-wrapper{border-left:0;border-top:var(--border)}}.template-choices{border:var(--border);border-radius:var(--elem-radius);display:grid;grid-template-areas:\"header header\" \"choice runner\";grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:max-content 1fr;height:100%}@media (width <= 992px){.template-choices{grid-template-areas:\"header\" \"choice\" \"runner\";grid-template-columns:1fr}}.template-choices .choice-wrapper{border-right:var(--border);display:flex;flex-direction:column;grid-area:choice;overflow-y:auto;padding:1rem 0 1rem 1rem;row-gap:.4rem}@media (width <= 992px){.template-choices .choice-wrapper{border-bottom:var(--border);border-right:none;padding-right:1em}}:is(.template-choices .choice-wrapper) .choice{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-blue-80);--field-focus-border:var(--csstools-light-dark-toggle--0,var(--color-blue-50));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--color-blue-10);--focus-01:0 0 0 3px var(--csstools-light-dark-toggle--1,var(--color-blue-90));align-items:center;display:flex;flex-grow:1}@supports (color:light-dark(red,red)){:is(.template-choices .choice-wrapper) .choice{--field-focus-border:light-dark(var(--color-blue-50),var(--color-blue-80));--focus-01:0 0 0 3px light-dark(var(--color-blue-90),var(--color-blue-10))}}@supports not (color:light-dark(tan,tan)){:is(:is(.template-choices .choice-wrapper) .choice) {--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--color-blue-80);--field-focus-border:var(--csstools-light-dark-toggle--0,var(--color-blue-50));--csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) var(--color-blue-10);--focus-01:0 0 0 3px var(--csstools-light-dark-toggle--1,var(--color-blue-90))}}:is(:is(.template-choices .choice-wrapper) .choice):after{background-color:currentcolor;color:var(--field-focus-border);content:\"\";display:block;height:1.25rem;margin:0 .75rem;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});-webkit-mask-size:cover;mask-size:cover;opacity:0;width:1.25rem}@media (width <= 992px){:is(:is(.template-choices .choice-wrapper) .choice):after{display:none}}.selected:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border-color:var(--field-focus-border);box-shadow:var(--focus-01);cursor:text}.selected:is(:is(.template-choices .choice-wrapper) .choice):after{opacity:1;transition:all .2s ease-out}.unsupported:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{--csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) var(--color-yellow-80);border-color:var(--csstools-light-dark-toggle--2,var(--color-yellow-50))}@supports (color:light-dark(red,red)){.unsupported:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border-color:light-dark(var(--color-yellow-50),var(--color-yellow-80))}}.unsupported:is(:is(.template-choices .choice-wrapper) .choice):after{background-image:url(${___CSS_LOADER_URL_REPLACEMENT_1___});background-position:50%;background-repeat:no-repeat;background-size:1rem;content:\"\";height:1rem;opacity:1;transition:none;width:1rem}:is(:is(.template-choices .choice-wrapper) .choice) mdn-play-editor{border:var(--border);border-radius:var(--elem-radius);cursor:pointer;width:100%}.template-choices .output-wrapper{height:300px;overflow:hidden}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["document","Set","e","Number","JSON","InteractiveExampleBase","String","Object","HTMLElement","MDNInteractiveExample","customElements","t"],"mappings":"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"}

package/dist/client/268.5b8cf50cd9481947.js ADDED Viewed

@@ -0,0 +1,50 @@
+export const __webpack_ids__=["268"];export const __webpack_modules__={54681:function(e,r,n){n.d(r,{Z:()=>l});var t=n(8081),o=n.n(t),i=n(23645),a=n.n(i)()(o());a.push([e.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}",""]);let l=a.toString()},72290:function(e,r,n){n.d(r,{Z:()=>l});var t=n(8081),o=n.n(t),i=n(23645),a=n.n(i)()(o());a.push([e.id,".user-menu__button{background-color:var(--color-background-primary);cursor:pointer;margin:0;padding:0}.user-menu__button img{border-radius:50%;display:block;height:2rem;width:2rem}.user-menu__dropdown{display:grid;row-gap:1rem}.user-menu__dropdown p{margin:0}.user-menu__dropdown ul{display:grid;list-style:none;margin:0;padding:0;row-gap:.25rem}.user-menu__dropdown a{color:var(--color-text-primary)}:is(.user-menu__dropdown a):hover{color:var(--color-text-secondary)}.user-menu__dropdown form{display:contents}",""]);let l=a.toString()},22446:function(e,r,n){n.d(r,{Z:()=>l});var t=n(8081),o=n.n(t),i=n(23645),a=n.n(i)()(o());a.push([e.id,"@media (width > 1006px){.user-menu{position:relative}.user-menu__login{height:100%;width:100%}.user-menu__login::part(label){height:0;overflow:hidden;position:absolute;width:0}.user-menu__button{border:1px solid var(--color-border-primary);border-radius:50%}.user-menu__dropdown{background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);margin:0;padding:.75rem;position:absolute;right:0;z-index:1}}",""]);let l=a.toString()},78918:function(e,r,n){n.d(r,{Z:()=>p});var t=n(8081),o=n.n(t),i=n(23645),a=n.n(i),l=n(61667),s=n.n(l),u=new n.U(n(82848)),d=a()(o()),c=s()(u);d.push([e.id,`@media (width <= 1006px){.user-menu__login{padding:.45rem 0}.user-menu__button{align-items:center;background-color:initial;border:none;display:flex;padding:.5rem .7rem;width:100%}.user-menu__button:after,.user-menu__button:before{background-color:currentcolor;height:1.25rem;margin-left:auto;-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.user-menu__button:after{content:"";-webkit-mask-image:url(${c});mask-image:url(${c})}.user-menu__button[aria-expanded=true]{background-color:var(--color-background-blue)}.user-menu__button[aria-expanded=true]:after{scale:-1}.user-menu__dropdown{padding:.5rem .7rem}}`,""]);let p=d.toString()},82848:function(e,r,n){e.exports=n.p+"chevron-down.7c923b7054da305b.svg"},1260:function(e,r,n){n.r(r),n.d(r,{MDNUserMenu:()=>MDNUserMenu});var t=n(35470),o=n(14703),i=n(13566),a=n(69535),l=n(8900);let s=(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"><path d="m10 17 5-5-5-5m5 5H3m12-9h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/></svg>`;var u=n(13117),d=n(54487);n(50272);let MDNUserMenu=class MDNUserMenu extends(0,a.q)(o.oi){static styles=d.Z;static properties={locale:{type:String}};constructor(){super(),this.locale="en-US"}#e(){let e=globalThis.location.origin,r=new URL(l.sA,e);return r.searchParams.append("next",this.#r()),r.toString()}#r(){return globalThis.location.href.replace(globalThis.location.origin,"")}#n(){let e=globalThis.location.origin;return new URL(l.vd,e).toString()}_user=new t.iQ(this,{task:async()=>await (0,u.s)()});connectedCallback(){super.connectedCallback(),this._user.run()}render(){return this._user.render({initial:()=>o.Ld,pending:()=>o.Ld,complete:e=>{var r,n;let t=(r=this.locale,n=this.l10n,[{href:`/${r}/plus/ai-help`,label:n`AI Help`},{href:`/${r}/plus/collections`,label:n`Collections`},{href:`/${r}/plus/updates`,label:n`Updates`},{href:`/${r}/plus/settings`,label:n("settings")},{href:"https://support.mozilla.org/products/mdn-plus",label:n`Help`,external:!0},{href:"https://github.com/mdn/MDN-feedback",label:n`Feedback`,external:!0}]);return e.isAuthenticated?(0,o.dy)`
+                <div class="user-menu">
+                  <mdn-dropdown>
+                    <button slot="button" class="user-menu__button">
+                      ${e.avatarUrl?(0,o.dy)`<img
+                            src=${(0,i.o)(e.avatarUrl??void 0)}
+                            width="32"
+                            height="32"
+                            alt=""
+                          />`:this.l10n`User`}
+                    </button>
+                    <div slot="dropdown" class="user-menu__dropdown">
+                      <p>${e.email}</p>
+                      <ul>
+                        ${t.map(e=>(0,o.dy)`<li>
+                              <a
+                                class=${(0,i.o)(e.external?"external":void 0)}
+                                href=${e.href}
+                                >${e.label}</a
+                              >
+                            </li>`)}
+                      </ul>
+                      <form method="post" action=${this.#n()}>
+                        <input
+                          type="hidden"
+                          name="next"
+                          .value=${this.#r()}
+                        />
+                        <button
+                          class="button"
+                          data-variant="secondary"
+                          type="submit"
+                        >
+                          ${this.l10n("logout")}
+                        </button>
+                      </form>
+                    </div>
+                  </mdn-dropdown>
+                </div>
+              `:(0,o.dy)`
+                <mdn-button
+                  class="user-menu__login"
+                  href=${this.#e()}
+                  .icon=${s}
+                  variant="plain"
+                >
+                  ${this.l10n("login")}
+                </mdn-button>
+              `}})}};customElements.define("mdn-user-menu",MDNUserMenu)},54487:function(e,r,n){n.d(r,{Z:()=>g});var t=n(14703),o=n(8081),i=n.n(o),a=n(23645),l=n.n(a),s=n(54681),u=n(56718),d=n(96818),c=n(72290),p=n(78918),m=n(22446),h=l()(i());h.i(s.Z),h.i(u.Z),h.i(d.Z),h.i(c.Z),h.i(p.Z),h.i(m.Z),h.push([e.id,"",""]);let g=(0,t.iv)([h.toString()])}};
+//# sourceMappingURL=268.5b8cf50cd9481947.js.map

package/dist/client/268.5b8cf50cd9481947.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"268.5b8cf50cd9481947.js","sources":["webpack://@mdn/fred/./components/global/global.css?272a","webpack://@mdn/fred/./components/user-menu/base.css","webpack://@mdn/fred/./components/user-menu/desktop.css","webpack://@mdn/fred/./components/user-menu/mobile.css","webpack://@mdn/fred/./components/icon/log-in.svg","webpack://@mdn/fred/./components/user-menu/element.js","webpack://@mdn/fred/./components/user-menu/links.js","webpack://@mdn/fred/./components/user-menu/element.css"],"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\";\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{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","// 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, `.user-menu__button{background-color:var(--color-background-primary);cursor:pointer;margin:0;padding:0}.user-menu__button img{border-radius:50%;display:block;height:2rem;width:2rem}.user-menu__dropdown{display:grid;row-gap:1rem}.user-menu__dropdown p{margin:0}.user-menu__dropdown ul{display:grid;list-style:none;margin:0;padding:0;row-gap:.25rem}.user-menu__dropdown a{color:var(--color-text-primary)}:is(.user-menu__dropdown a):hover{color:var(--color-text-secondary)}.user-menu__dropdown form{display:contents}`, \"\"]);\n// Exports\nexport default ___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, `@media (width > 1006px){.user-menu{position:relative}.user-menu__login{height:100%;width:100%}.user-menu__login::part(label){height:0;overflow:hidden;position:absolute;width:0}.user-menu__button{border:1px solid var(--color-border-primary);border-radius:50%}.user-menu__dropdown{background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);margin:0;padding:.75rem;position:absolute;right:0;z-index:1}}`, \"\"]);\n// Exports\nexport default ___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\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/chevron-down.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, `@media (width <= 1006px){.user-menu__login{padding:.45rem 0}.user-menu__button{align-items:center;background-color:initial;border:none;display:flex;padding:.5rem .7rem;width:100%}.user-menu__button:after,.user-menu__button:before{background-color:currentcolor;height:1.25rem;margin-left:auto;-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.user-menu__button:after{content:\"\";-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___})}.user-menu__button[aria-expanded=true]{background-color:var(--color-background-blue)}.user-menu__button[aria-expanded=true]:after{scale:-1}.user-menu__dropdown{padding:.5rem .7rem}}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\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\"><path d=\"m10 17 5-5-5-5m5 5H3m12-9h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4\"/></svg>`;","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing } from \"lit\";\n\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport { FXA_SIGNIN_URL, FXA_SIGNOUT_URL } from \"../env/index.js\";\nimport logInIcon from \"../icon/log-in.svg?lit\";\nimport { globalUser } from \"../user/context.js\";\n\nimport styles from \"./element.css?lit\";\nimport { getLinks } from \"./links.js\";\n\nimport \"../button/element.js\";\n\nexport class MDNUserMenu extends L10nMixin(LitElement) {\n static styles = styles;\n\n static properties = {\n locale: { type: String },\n };\n\n constructor() {\n super();\n this.locale = \"en-US\";\n }\n\n #loginUrl() {\n const base = globalThis.location.origin;\n const url = new URL(FXA_SIGNIN_URL, base);\n url.searchParams.append(\"next\", this.#next());\n return url.toString();\n }\n\n #next() {\n const next = globalThis.location.href.replace(\n globalThis.location.origin,\n \"\",\n );\n return next;\n }\n\n #logoutUrl() {\n const base = globalThis.location.origin;\n const url = new URL(FXA_SIGNOUT_URL, base);\n return url.toString();\n }\n\n _user = new Task(this, {\n task: async () => {\n return await globalUser();\n },\n });\n\n connectedCallback() {\n super.connectedCallback();\n this._user.run();\n }\n\n render() {\n return this._user.render({\n initial: () => nothing,\n pending: () => nothing,\n\n complete:\n /**\n * @param {import(\"../user/types.js\").User} user\n */\n (user) => {\n const links = getLinks(this.locale, this.l10n);\n\n return user.isAuthenticated\n ? html`\n <div class=\"user-menu\">\n <mdn-dropdown>\n <button slot=\"button\" class=\"user-menu__button\">\n ${user.avatarUrl\n ? html`<img\n src=${ifDefined(user.avatarUrl ?? undefined)}\n width=\"32\"\n height=\"32\"\n alt=\"\"\n />`\n : this.l10n`User`}\n </button>\n <div slot=\"dropdown\" class=\"user-menu__dropdown\">\n <p>${user.email}</p>\n <ul>\n ${links.map(\n (link) =>\n html`<li>\n <a\n class=${ifDefined(\n link.external ? \"external\" : undefined,\n )}\n href=${link.href}\n >${link.label}</a\n >\n </li>`,\n )}\n </ul>\n <form method=\"post\" action=${this.#logoutUrl()}>\n <input\n type=\"hidden\"\n name=\"next\"\n .value=${this.#next()}\n />\n <button\n class=\"button\"\n data-variant=\"secondary\"\n type=\"submit\"\n >\n ${this.l10n(\"logout\")}\n </button>\n </form>\n </div>\n </mdn-dropdown>\n </div>\n `\n : html`\n <mdn-button\n class=\"user-menu__login\"\n href=${this.#loginUrl()}\n .icon=${logInIcon}\n variant=\"plain\"\n >\n ${this.l10n(\"login\")}\n </mdn-button>\n `;\n },\n });\n }\n}\n\ncustomElements.define(\"mdn-user-menu\", MDNUserMenu);\n","/**\n * @param {string} locale - The current locale\n * @param {Function} l10n - The localization function\n * @returns {Array<{href: string, label: string, external?: boolean}>} Array of navigation links for the user menu\n */\nexport function getLinks(locale, l10n) {\n return [\n {\n href: `/${locale}/plus/ai-help`,\n label: l10n`AI Help`,\n },\n {\n href: `/${locale}/plus/collections`,\n label: l10n`Collections`,\n },\n {\n href: `/${locale}/plus/updates`,\n label: l10n`Updates`,\n },\n {\n href: `/${locale}/plus/settings`,\n label: l10n(\"settings\"),\n },\n {\n href: \"https://support.mozilla.org/products/mdn-plus\",\n label: l10n`Help`,\n external: true,\n },\n {\n href: \"https://github.com/mdn/MDN-feedback\",\n label: l10n`Feedback`,\n external: true,\n },\n ];\n}\n","import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../global/global.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_1___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../button/server.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_2___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../external-link/global.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_3___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./base.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_4___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./mobile.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_5___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./desktop.css\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_2___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_3___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_4___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_5___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, ``, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["n","MDNUserMenu","String","globalThis","URL","i","customElements"],"mappings":"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"}

package/dist/client/2826.d61ca617ff379ad4.js ADDED Viewed

@@ -0,0 +1,29 @@
+export const __webpack_ids__=["2826"];export const __webpack_modules__={54681:function(e,o,a){a.d(o,{Z:()=>l});var t=a(8081),r=a.n(t),n=a(23645),c=a.n(n)()(r());c.push([e.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}",""]);let l=c.toString()},31502:function(e,o,a){a.d(o,{Z:()=>_});var t=a(8081),r=a.n(t),n=a(23645),c=a.n(n),l=a(61667),i=a.n(l),s=new a.U(a(86075)),d=new a.U(a(90323)),u=new a.U(a(85667)),m=new a.U(a(68958)),p=new a.U(a(58267)),b=new a.U(a(6063)),f=new a.U(a(11968)),g=c()(r()),k=i()(s),v=i()(d),h=i()(u),w=i()(m),$=i()(p),x=i()(b),y=i()(f);g.push([e.id,`.callout,.notecard{background-color:var(--color-background-secondary);border-inline-start:2px solid var(--accent-color,var(--color-text-secondary));border-radius:.25em;color:var(--color-text-primary);margin-block:1em;padding-block:1px;padding-inline:1em;padding-inline-start:3em;position:relative}.experimental:is(.notecard,.callout),.note:is(.notecard,.callout),.secure:is(.notecard,.callout){background-color:var(--color-background-blue);--accent-color:var(--color-text-blue)}.deprecated:is(.notecard,.callout),.nonstandard:is(.notecard,.callout),.warning:is(.notecard,.callout){background-color:var(--color-background-red);--accent-color:var(--color-text-red)}.tip:is(.notecard,.callout){background-color:var(--color-background-green);--accent-color:var(--color-text-green)}:is(.deprecated:is(.notecard,.callout),.experimental:is(.notecard,.callout),.nonstandard:is(.notecard,.callout),.note:is(.notecard,.callout),.secure:is(.notecard,.callout),.tip:is(.notecard,.callout),.warning:is(.notecard,.callout),.worker:is(.notecard,.callout)):before{background-color:var(--accent-color,var(--color-text-secondary));content:"";display:block;height:1em;left:1em;-webkit-mask-size:cover;mask-size:cover;position:absolute;top:1.45em;width:1em}.deprecated:is(.notecard,.callout):before{-webkit-mask-image:url(${k});mask-image:url(${k})}.experimental:is(.notecard,.callout):before{-webkit-mask-image:url(${v});mask-image:url(${v})}.nonstandard:is(.notecard,.callout):before{-webkit-mask-image:url(${h});mask-image:url(${h})}.note:is(.notecard,.callout):before{-webkit-mask-image:url(${w});mask-image:url(${w})}.secure:is(.notecard,.callout):before{-webkit-mask-image:url(${$});mask-image:url(${$})}.tip:is(.notecard,.callout):before{-webkit-mask-image:url(${x});mask-image:url(${x})}.warning:is(.notecard,.callout):before{-webkit-mask-image:url(${h});mask-image:url(${h})}.worker:is(.notecard,.callout):before{-webkit-mask-image:url(${y});mask-image:url(${y})}`,""]);let _=g.toString()},11968:function(e,o,a){e.exports=a.p+"cog.f23af856fab34421.svg"},90323:function(e,o,a){e.exports=a.p+"flask-conical.c16b3d71f14f31d1.svg"},68958:function(e,o,a){e.exports=a.p+"info.d40b80f84482feba.svg"},6063:function(e,o,a){e.exports=a.p+"lightbulb.f54f9e803373ffd2.svg"},58267:function(e,o,a){e.exports=a.p+"lock.4befe79c52ccec2a.svg"},86075:function(e,o,a){e.exports=a.p+"trash-2.73b28bc66fb8543c.svg"},85667:function(e,o,a){e.exports=a.p+"triangle-alert.cff4c57ccef57da3.svg"},80203:function(e,o,a){a.r(o),a.d(o,{MDNNotFound:()=>MDNNotFound});var t=a(35470),r=a(14703),n=a(69535),c=a(30835);let MDNNotFound=class MDNNotFound extends(0,n.q)(r.oi){static ssr=!1;static styles=c.Z;_fallback=new t.iQ(this,{task:async()=>{let e=location.pathname;if(e&&e.includes("/docs/")&&!e.includes("/en-US/")){let o="/en-US/"+e.split("/").slice(2).join("/")+"/index.json",a=await fetch(o);if(a.ok){let{doc:e}=await a.json();return e}}return null}});connectedCallback(){super.connectedCallback(),this._fallback.run()}render(){let e=location.pathname;return(0,r.dy)`
+      <p>
+        ${this.l10n.raw({id:"not-found-description",args:{url:e},elements:{url:{tag:"code"}}})}
+      </p>
+      ${this._fallback.render({complete:e=>{if(e)return(0,r.dy)`<div class="notecard tip">
+              <p>
+                ${this.l10n.raw({id:"not-found-fallback-english",elements:{strong:{tag:"strong"},em:{tag:"em"}}})}
+              </p>
+              <p>
+                <a href=${e.mdn_url}>
+                  <b>${e.title}</b>
+                  <br />
+                  <small>${e.mdn_url}</small>
+                </a>
+              </p>
+            </div>`;{let e=function(e){let o=e.split("/").at(1);return o&&/^(de|en-US|es|fr|ja|ko|pt-BR|ru|zh-CN|zh-TW)$/.test(o)?o:"en-US"}(location.pathname),o=location.pathname.split("/").filter(o=>o&&![e,"docs"].includes(o)).map(e=>e.replaceAll("_"," ")).reverse(),a=(0,r.dy)`<ul>
+              ${o.map(o=>(0,r.dy)`<li>
+                    <a
+                      href=${`/${e}/search?q=${encodeURIComponent(o)}`}
+                    >
+                      ${o}
+                    </a>
+                  </li>`)}
+            </ul>`;return(0,r.dy)`<div class="notecard note">
+              <p>${this.l10n("not-found-fallback-search")} ${a}</p>
+            </div>`}}})}
+    `}};customElements.define("mdn-not-found",MDNNotFound)},30835:function(e,o,a){a.d(o,{Z:()=>u});var t=a(14703),r=a(8081),n=a.n(r),c=a(23645),l=a.n(c),i=a(54681),s=a(31502),d=l()(n());d.i(i.Z),d.i(s.Z),d.push([e.id,"code{background-color:var(--color-background-secondary);border-radius:.25em;font-family:var(--font-family-code);padding:.125em .25em}",""]);let u=(0,t.iv)([d.toString()])}};
+//# sourceMappingURL=2826.d61ca617ff379ad4.js.map