1const C="https://stackblitz.com",_=["angular-cli","create-react-app","html","javascript","node","polymer","typescript","vue"],x=["project","search","ports","settings"],L=["light","dark"],N=["editor","preview"],S={clickToLoad:e=>d("ctl",e),devToolsHeight:e=>T("devtoolsheight",e),forceEmbedLayout:e=>d("embed",e),hideDevTools:e=>d("hidedevtools",e),hideExplorer:e=>d("hideExplorer",e),hideNavigation:e=>d("hideNavigation",e),openFile:e=>u("file",e),showSidebar:e=>B("showSidebar",e),sidebarView:e=>f("sidebarView",e,x),startScript:e=>u("startScript",e),terminalHeight:e=>T("terminalHeight",e),theme:e=>f("theme",e,L),view:e=>f("view",e,N),zenMode:e=>d("zenMode",e),organization:e=>`${u("orgName",e?.name)}&${u("orgProvider",e?.provider)}`,crossOriginIsolated:e=>d("corp",e)};function I(e={}){const t=Object.entries(e).map(([n,o])=>o!=null&&S.hasOwnProperty(n)?S[n](o):"").filter(Boolean);return t.length?`?${t.join("&")}`:""}function d(e,t){return t===!0?`${e}=1`:""}function B(e,t){return typeof t=="boolean"?`${e}=${t?"1":"0"}`:""}function T(e,t){if(typeof t=="number"&&!Number.isNaN(t)){const n=Math.min(100,Math.max(0,t));return`${e}=${encodeURIComponent(Math.round(n))}`}return""}function f(e,t="",n=[]){return n.includes(t)?`${e}=${encodeURIComponent(t)}`:""}function u(e,t){return(Array.isArray(t)?t:[t]).filter(o=>typeof o=="string"&&o.trim()!=="").map(o=>`${e}=${encodeURIComponent(o)}`).join("&")}function j(){return Math.random().toString(36).slice(2,6)+Math.random().toString(36).slice(2,6)}function y(e,t){return`${P(t)}${e}${I(t)}`}function b(e,t){const n={forceEmbedLayout:!0};return t&&typeof t=="object"&&Object.assign(n,t),`${P(n)}${e}${I(n)}`}function P(e={}){return(typeof e.origin=="string"?e.origin:C).replace(/\/$/,"")}function E(e,t,n){if(!t||!e||!e.parentNode)throw new Error("Invalid Element");e.id&&(t.id=e.id),e.className&&(t.className=e.className),O(t,n),k(e,t,n),e.replaceWith(t)}function v(e){if(typeof e=="string"){const t=document.getElementById(e);if(!t)throw new Error(`Could not find element with id '${e}'`);return t}else if(e instanceof HTMLElement)return e;throw new Error(`Invalid element: ${e}`)}function w(e){return e&&e.newWindow===!1?"_self":"_blank"}function O(e,t={}){const n=Object.hasOwnProperty.call(t,"height")?`${t.height}`:"300",o=Object.hasOwnProperty.call(t,"width")?`${t.width}`:void 0;e.setAttribute("height",n),o?e.setAttribute("width",o):e.setAttribute("style","width:100%;")}function k(e,t,n={}){const o=e.allow?.split(";")?.map(s=>s.trim())??[];n.crossOriginIsolated&&!o.includes("cross-origin-isolated")&&o.push("cross-origin-isolated"),o.length>0&&(t.allow=o.join("; "))}class M{constructor(t){this.pending={},this.port=t,this.port.onmessage=this.messageListener.bind(this)}request({type:t,payload:n}){return new Promise((o,s)=>{const r=j();this.pending[r]={resolve:o,reject:s},this.port.postMessage({type:t,payload:{...n,__reqid:r}})})}messageListener(t){if(typeof t.data.payload?.__reqid!="string")return;const{type:n,payload:o}=t.data,{__reqid:s,__success:r,__error:i}=o;this.pending[s]&&(r?this.pending[s].resolve(this.cleanResult(o)):this.pending[s].reject(i?`${n}: ${i}`:n),delete this.pending[s])}cleanResult(t){const n={...t};return delete n.__reqid,delete n.__success,delete n.__error,Object.keys(n).length?n:null}}class D{constructor(t,n){this.editor={openFile:o=>this._rdc.request({type:"SDK_OPEN_FILE",payload:{path:o}}),setCurrentFile:o=>this._rdc.request({type:"SDK_SET_CURRENT_FILE",payload:{path:o}}),setTheme:o=>this._rdc.request({type:"SDK_SET_UI_THEME",payload:{theme:o}}),setView:o=>this._rdc.request({type:"SDK_SET_UI_VIEW",payload:{view:o}}),showSidebar:(o=!0)=>this._rdc.request({type:"SDK_TOGGLE_SIDEBAR",payload:{visible:o}})},this.preview={origin:"",getUrl:()=>this._rdc.request({type:"SDK_GET_PREVIEW_URL",payload:{}}).then(o=>o?.url??null),setUrl:(o="/")=>{if(typeof o!="string"||!o.startsWith("/"))throw new Error(`Invalid argument: expected a path starting with '/', got '${o}'`);return this._rdc.request({type:"SDK_SET_PREVIEW_URL",payload:{path:o}})}},this._rdc=new M(t),Object.defineProperty(this.preview,"origin",{value:typeof n.previewOrigin=="str
1ing"?n.previewOrigin:null,writable:!1})}applyFsDiff(t){const n=o=>o!==null&&typeof o=="object";if(!n(t)||!n(t.create))throw new Error("Invalid diff object: expected diff.create to be an object.");if(!Array.isArray(t.destroy))throw new Error("Invalid diff object: expected diff.destroy to be an array.");return this._rdc.request({type:"SDK_APPLY_FS_DIFF",payload:t})}getDependencies(){return this._rdc.request({type:"SDK_GET_DEPS_SNAPSHOT",payload:{}})}getFsSnapshot(){return this._rdc.request({type:"SDK_GET_FS_SNAPSHOT",payload:{}})}}const m=[];class q{constructor(t){this.id=j(),this.element=t,this.pending=new Promise((n,o)=>{const s=({data:a,ports:c})=>{a?.action==="SDK_INIT_SUCCESS"&&a.id===this.id&&(this.vm=new D(c[0],a.payload),n(this.vm),i())},r=()=>{this.element.contentWindow?.postMessage({action:"SDK_INIT",id:this.id},"*")};function i(){window.clearInterval(p),window.removeEventListener("message",s)}window.addEventListener("message",s),r();let l=0;const p=window.setInterval(()=>{if(this.vm){i();return}if(l>=20){i(),o("Timeout: Unable to establish a connection with the StackBlitz VM"),m.forEach((a,c)=>{a.id===this.id&&m.splice(c,1)});return}l++,r()},500)}),m.push(this)}}const F=e=>{const t=e instanceof Element?"element":"id";return m.find(n=>n[t]===e)??null};function U(e,t){const n=document.createElement("input");return n.type="hidden",n.name=e,n.value=t,n}function R(e){return e.replace(/\[/g,"%5B").replace(/\]/g,"%5D")}function $({template:e,title:t,description:n,dependencies:o,files:s,settings:r}){if(!_.includes(e)){const a=_.map(c=>`'${c}'`).join(", ");console.warn(`Unsupported project.template: must be one of ${a}`)}const i=[],l=(a,c,A="")=>{i.push(U(a,typeof c=="string"?c:A))};l("project[title]",t),typeof n=="string"&&n.length>0&&l("project[description]",n),l("project[template]",e,"javascript"),o&&(e==="node"?console.warn("Invalid project.dependencies: dependencies must be provided as a 'package.json' file when using the 'node' template."):l("project[dependencies]",JSON.stringify(o))),r&&l("project[settings]",JSON.stringify(r)),Object.entries(s).forEach(([a,c])=>{l(`project[files][${R(a)}]`,c)});const p=document.createElement("form");return p.method="POST",p.setAttribute("style","display:none!important;"),p.append(...i),p}function H(e,t){const n=$(e);return n.action=b("/run",t),n.id="sb_run",`<!doctype html> 2<html> 3<head><title></title></head> 4<body> 5 ${n.outerHTML} 6 <script>document.getElementById('${n.id}').submit();<\/script> 7</body> 8</html>`}function V(e,t){const n=$(e);n.action=y("/run",t),n.target=w(t),document.body.appendChild(n),n.submit(),document.body.removeChild(n)}function h(e){return e?.contentWindow?(F(e)??new q(e)).pending:Promise.reject("Provided element is not an iframe.")}function z(e,t){V(e,t)}function K(e,t){const n=y(`/edit/${e}`,t),o=w(t);window.open(n,o)}function G(e,t){const n=y(`/github/${e}`,t),o=w(t);window.open(n,o)}function W(e,t,n){const o=v(e),s=H(t,n),r=document.createElement("iframe");return E(o,r,n),r.contentDocument?.write(s),h(r)}function J(e,t,n){const o=v(e),s=document.createElement("iframe");return s.src=b(`/edit/${t}`,n),E(o,s,n),h(s)}function X(e,t,n){const o=v(e),s=document.createElement("iframe");return s.src=b(`/github/${t}`,n),E(o,s,n),h(s)}const Y={connect:h,embedGithubProject:X,embedProject:W,embedProjectId:J,openGithubProject:G,openProject:z,openProjectId:K},Q=`// NOTICE!!! Initially embedded in our docs this JavaScript 9// file contains elements that can help you create reproducible 10// use cases in StackBlitz for instance. 11// In a real project please adapt this content to your needs. 12// ++++++++++++++++++++++++++++++++++++++++++ 13 14/* 15 * JavaScript for Bootstrap's docs (https://getbootstrap.com/) 16 * Copyright 2011-2025 The Bootstrap Authors 17 * Licensed under the Creative Commons Attribution 3.0 Unported License. 18 * For details, see https://creativecommons.org/licenses/by/3.0/. 19 */ 20 21/* global bootstrap: false */ 22 23export default () => { 24 // -------- 25 // Tooltips 26 // -------- 27 // Instantiate all tooltips in a docs or StackBlitz 28 document.querySelectorAll('[data-bs-toggle="tooltip"]') 29 .forEach(tooltip => { 30 new bootstrap.Tooltip(tooltip) 31 }) 32 33 // -------- 34 // Popovers 35 // -------- 36 // Instantiate all popovers in docs or StackBlitz 37 document.querySelectorAll('[data-bs-toggle="popover"]') 38 .forEach(popover => { 39 new bootstrap.Popover(popover) 40 }) 41 42 // ------------------------------- 43 // Toasts 44 // ------------------------------- 45 // Used by 'Placement' example in docs or StackBlitz 46 const toastPlacement = document.getElementById('toastPlacement') 47 if (toastPlacement) { 48 document.getElementById('selectToastPlacement').addEventListener('change', function () { 49 if (!toastPlacement.dataset.originalClass) { 50 toastPlacement.dataset.originalClass = toastPlacement.className 51 } 52 53 toastPlacement.className = \`\${toastPlacement.dataset.originalClass} \${this.value}\` 54 }) 55 } 56 57 // Instantiate all toasts in docs pages only 58 document.querySelectorAll('.bd-example .toast') 59 .forEach(toastNode => { 60 const toast = new bootstrap.Toast(toastNode, { 61 autohide: false 62 }) 63 64 toast.show() 65 }) 66 67 // Instantiate all toasts in docs pages only 68 // js-docs-start live-toast 69 const toastTrigger = document.getElementById('liveToastBtn') 70 const toastLiveExample = document.getElementById('liveToast') 71 72 if (toastTrigger) { 73 const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample) 74 toastTrigger.addEventListener('click', () => { 75 toastBootstrap.show() 76 }) 77 } 78 // js-docs-end live-toast 79 80 // ------------------------------- 81 // Alerts 82 // ------------------------------- 83 // Used in 'Show live alert' example in docs or StackBlitz 84 85 // js-docs-start live-alert 86 const alertPlaceholder = document.getElementById('liveAlertPlaceholder') 87 const appendAlert = (message, type) => { 88 const wrapper = document.createElement('div') 89 wrapper.innerHTML = [ 90 \`<div class="alert alert-\${type} alert-dismissible" role="alert">\`, 91 \` <div>\${message}</div>\`, 92 ' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>', 93 '</div>' 94 ].join('') 95 96 alertPlaceholder.append(wrapper) 97 } 98 99 const alertTrigger = document.getElementById('liveAlertBtn') 100 if (alertTrigger) { 101 alertTrigger.addEventListener('click', () => { 102 appendAlert('Nice, you triggered this alert message!', 'success') 103 }) 104 } 105 // js-docs-end live-alert 106 107 // -------- 108 // Carousels 109 // -------- 110 // Instantiate all non-autoplaying carousels in docs or StackBlitz 111 document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])') 112 .forEach(carousel => {
113 bootstrap.Carousel.getOrCreateInstance(carousel) 114 }) 115 116 // ------------------------------- 117 // Checks & Radios 118 // ------------------------------- 119 // Indeterminate checkbox example in docs and StackBlitz 120 document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]') 121 .forEach(checkbox => { 122 if (checkbox.id.includes('Indeterminate')) { 123 checkbox.indeterminate = true 124 } 125 }) 126 127 // ------------------------------- 128 // Links 129 // ------------------------------- 130 // Disable empty links in docs examples only 131 document.querySelectorAll('.bd-content [href="#"]') 132 .forEach(link => { 133 link.addEventListener('click', event => { 134 event.preventDefault() 135 }) 136 }) 137 138 // ------------------------------- 139 // Modal 140 // ------------------------------- 141 // Modal 'Varying modal content' example in docs and StackBlitz 142 // js-docs-start varying-modal-content 143 const exampleModal = document.getElementById('exampleModal') 144 if (exampleModal) { 145 exampleModal.addEventListener('show.bs.modal', event => { 146 // Button that triggered the modal 147 const button = event.relatedTarget 148 // Extract info from data-bs-* attributes 149 const recipient = button.getAttribute('data-bs-whatever') 150 // If necessary, you could initiate an Ajax request here 151 // and then do the updating in a callback. 152
153 // Update the modal's content. 154 const modalTitle = exampleModal.querySelector('.modal-title') 155 const modalBodyInput = exampleModal.querySelector('.modal-body input') 156 157 modalTitle.textContent = \`New message to \${recipient}\` 158 modalBodyInput.value = recipient 159 }) 160 } 161 // js-docs-end varying-modal-content 162 163 // ------------------------------- 164 // Offcanvas 165 // ------------------------------- 166 // 'Offcanvas components' example in docs only 167 const myOffcanvas = document.querySelectorAll('.bd-example-offcanvas .offcanvas') 168 if (myOffcanvas) { 169 myOffcanvas.forEach(offcanvas => { 170 offcanvas.addEventListener('show.bs.offcanvas', event => { 171 event.preventDefault() 172 }, false) 173 }) 174 } 175} 176`,g={cssCdn:"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",jsBundleCdn:"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",docsVersion:"5.3"};document.querySelectorAll(".btn-edit").forEach(e=>{e.addEventListener("click",t=>{const n=t.target.closest(".bd-code-snippet"),o=n.querySelector(".bd-example"),s=o.innerHTML,r=n.querySelector(".btn-edit").getAttribute("data-sb-js-snippet"),i=Array.from(o.classList).join(" ");Z(s,r,i)})});const Z=(e,t,n)=>{const o=`<!doctype html> 177<html lang="en"> 178 <head> 179 <meta charset="utf-8"> 180 <meta name="viewport" content="width=device-width, initial-scale=1"> 181 <link href="${g.cssCdn}" rel="stylesheet"> 182 <link href="https://getbootstrap.com/docs/${g.docsVersion}/assets/css/docs.css" rel="stylesheet"> 183 <title>Bootstrap Example</title> 184 <script defer src="${g.jsBundleCdn}"><\/script> 185 </head> 186 <body class="p-3 m-0 border-0 ${n}"> 187 <!-- Example Code Start--> 188${e.trimStart().replace(/^/gm," ").replace(/^ {4}$/gm,"").trimEnd()} 189 <!-- Example Code End --> 190 </body> 191</html>`;let s="";t&&(s=Q.replace("export default () => {","const snippets_default = () => {"),s=`(() => { 192 ${s} 193 194 // <stdin> 195 snippets_default(); 196})();`);const r={files:{"index.html":o,...t&&{"index.js":s}},title:"Bootstrap Example",description:`Official example from ${window.location.href}`,template:t?"javascript":"html",tags:["bootstrap"]};Y.openProject(r,{openFile:"index.html"})};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.