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),n=r(69535),d=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,n.q)(e){static properties={__choiceSelected:{state:!0},__choiceUnsupported:{state:!0}};constructor(...e){super(),this.__choiceSelected=-1,this.__choiceUnsupported=[]}#e({target:e}){e instanceof d.MDNPlayEditor&&e.focus()}#t({target:e}){e instanceof d.MDNPlayEditor&&(this.#r(e),this.#o(e))}#a({target:e}){e instanceof d.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>
            <mdn-button id="reset" @click=${this._reset} variant="secondary"
              >${this.l10n`Reset`}</mdn-button
            >
          </header>
          <div
            class="choice-wrapper"
            @click=${this.#e}
            @focus=${this.#t}
            @update=${this.#a}
          >
            ${this._choices?.map((e,t)=>(0,o.dy)`
                <div
                  class=${["choice",...t===this.__choiceSelected?["selected"]:[],...this.__choiceUnsupported[t]?["unsupported"]:[]].join(" ")}
                >
                  <mdn-play-editor
                    data-index=${t}
                    language="css"
                    minimal="true"
                    .delay=${100}
                    .value=${e?.trim()}
                  ></mdn-play-editor>
                </div>
              `)}
          </div>
          <div class="output-wrapper">
            <mdn-play-controller ${(0,a.i)(this._controller)} run-on-start>
              <mdn-play-runner
                ${(0,a.i)(this._runner)}
                defaults="ix-choice"
              ></mdn-play-runner>
            </mdn-play-controller>
          </div>
        </div>
      `}_reset(){"choices"===this._template?this.#s():super._reset()}_initialCode(){let e=super._initialCode();return"choices"===this._template&&(e["js-hidden"]=`setChoice(${JSON.stringify(this._choices?.[0])})`),e}render(){return"choices"===this._template?this.#l():super.render()}firstUpdated(){super.firstUpdated(),"choices"===this._template&&this.#s()}};var m=r(13566);r(4976),r(49e3),r(89948),r(17739);let u=e=>class extends(0,n.q)(e){#l(){return(0,o.dy)`
        <mdn-play-controller ${(0,a.i)(this._controller)}>
          <div class="template-console">
            <header>
              <h4>${(0,c.decode)(this.name)}</h4>
            </header>
            ${1===this._languages.length?(0,o.dy)`<mdn-play-editor
                  id="editor"
                  language=${(0,m.o)(this._languages[0])}
                ></mdn-play-editor>`:(0,o.dy)`<mdn-ix-tab-wrapper>
                  ${this._languages.map(e=>(0,o.dy)`
                      <mdn-ix-tab id=${e}
                        >${this._langName(e)}</mdn-ix-tab
                      >
                      <mdn-ix-tab-panel id=${`${e}-panel`}>
                        <mdn-play-editor language=${e}></mdn-play-editor>
                      </mdn-ix-tab-panel>
                    `)}
                </mdn-ix-tab-wrapper>`}
            <div class="buttons">
              <mdn-button
                id="execute"
                @click=${this._run}
                variant="secondary"
                title=${this.l10n`Run example, and show console output`}
                >${this.l10n`Run`}</mdn-button
              >
              <mdn-button
                id="reset"
                @click=${this._reset}
                variant="secondary"
                title=${this.l10n`Reset example, and clear console output`}
                >${this.l10n`Reset`}</mdn-button
              >
            </div>
            <mdn-play-console
              id="console"
              title=${this.l10n`Console output`}
            ></mdn-play-console>
            <mdn-play-runner
              defaults=${(0,m.o)(this._languages.includes("wat")?"ix-wat":void 0)}
            ></mdn-play-runner>
          </div>
        </mdn-play-controller>
      `}render(){return"console"===this._template?this.#l():super.render()}},g=e=>class extends(0,n.q)(e){#l(){return(0,o.dy)`
        <mdn-play-controller
          ${(0,a.i)(this._controller)}
          run-on-start
          run-on-change
        >
          <div class="template-tabbed">
            <header>
              <h4>${(0,c.decode)(this.name)}</h4>
              <mdn-button id="reset" @click=${this._reset} variant="secondary"
                >${this.l10n`Reset`}</mdn-button
              >
            </header>
            <mdn-ix-tab-wrapper>
              ${this._languages.map(e=>(0,o.dy)`
                  <mdn-ix-tab id=${e}>${this._langName(e)}</mdn-ix-tab>
                  <mdn-ix-tab-panel id=${`${e}-panel`}>
                    <mdn-play-editor language=${e}></mdn-play-editor>
                  </mdn-ix-tab-panel>
                `)}
            </mdn-ix-tab-wrapper>
            <div class="output-wrapper">
              <h4>${this.l10n`Output`}</h4>
              <mdn-play-runner
                ${(0,a.i)(this._runner)}
                sandbox="allow-top-navigation-by-user-activation"
                defaults="ix-tabbed"
              ></mdn-play-runner>
            </div>
          </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),n=r.n(c),d=new r.U(r(38202)),p=new r.U(r(85667)),h=l()(i()),m=n()(d),u=n()(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.2ebca11301bd0965.js.map