1"use strict";(globalThis.webpackChunk_atlas_docs_ideal=globalThis.webpackChunk_atlas_docs_ideal||[]).push([[3317],{1318(e,t,o){o.d(t,{n:()=>p,u:()=>i});var n=o(74888),r=o(19741),a=o(21850);const i='body {\n font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n margin: 0;\n padding: 1.5rem;\n background-color: #f9fafb;\n color: #111827;\n font-size: 14px;\n line-height: 1.5;\n display: flex;\n justify-content: center;\n}\nform {\n width: 100%;\n max-width: 24rem;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\ninput + label { margin-top: 0.5rem; }\nlabel {\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n color: #374151;\n}\ninput, textarea {\n width: 100%;\n padding: 0.5rem 0.75rem;\n font-size: 0.875rem;\n font-family: inherit;\n color: #111827;\n background-color: #ffffff;\n border: 1px solid #d1d5db;\n border-radius: 0.375rem;\n box-sizing: border-box;\n transition: border-color 150ms ease, box-shadow 150ms ease;\n}\ntextarea { min-height: 5rem; resize: vertical; line-height: 1.5; }\ninput:focus, textarea:focus {\n outline: none;\n border-color: #2933e6;\n box-shadow: 0 0 0 3px rgba(41, 51, 230, 0.15);\n}\n[data-theme="dark"] body { background-color: #1f1f1f; color: #e5e7eb; }\n[data-theme="dark"] label { color: #d1d5db; }\n[data-theme="dark"] input, [data-theme="dark"] textarea {\n background-color: #2a2a2a;\n border-color: #444950;\n color: #e5e7eb;\n}\n[data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus {\n border-color: #545ceb;\n box-shadow: 0 0 0 3px rgba(84, 92, 235, 0.25);\n}\n\n/* Postcode Lookup widget default chrome \u2014 matches form input styling.\n Wrapped in :where() so user-supplied .idpc-* rules always win regardless of\n load order. */\n:where(.idpc-input) {\n border-color: #2933e6;\n box-shadow: 0 0 0 1px rgba(41, 51, 230, 0.1);\n}\n:where(.idpc-input:focus) { border-color: #2933e6; box-shadow: 0 0 0 3px rgba(41, 51, 230, 0.2); }\n:where([data-theme="dark"] .idpc-input) { border-color: #545ceb; box-shadow: 0 0 0 1px rgba(84, 92, 235, 0.15); }\n:where([data-theme="dark"] .idpc-input:focus) { border-color: #545ceb; box-shadow: 0 0 0 3px rgba(84, 92, 235, 0.3); }\n:where(.idpc-button) {\n margin-top: 0.5rem;\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n font-weight: 500;\n color: #ffffff;\n background-color: #2933e6;\n border: 1px solid #2933e6;\n border-radius: 0.375rem;\n cursor: pointer;\n transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;\n}\n:where(.idpc-button:hover) { background-color: #1f29c4; border-color: #1f29c4; }\n:where(.idpc-button:focus) { outline: none; box-shadow: 0 0 0 3px rgba(41, 51, 230, 0.25); }\n:where(.idpc-select-container) { margin-top: 0.5rem; }\n:where(.idpc-select-container select) {\n width: 100%;\n padding: 0.5rem 2.25rem 0.5rem 0.75rem;\n font-size: 0.875rem;\n color: #111827;\n background-color: #ffffff;\n background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\' fill=\'%236b7280\'%3E%3Cpath fill-rule=\'evenodd\' d=\'M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z\' clip-rule=\'evenodd\'/%3E%3C/svg%3E");\n background-repeat: no-repeat;\n background-position: right 0.625rem center;\n background-size: 1rem;\n border: 1px solid #d1d5db;\n border-radius: 0.375rem;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n transition: border-color 150ms ease, box-shadow 150ms ease;\n}\n:where(.idpc-select-container select:focus) {\n outline: none;\n border-color: #2933e6;\n box-shadow: 0 0 0 3px rgba(41, 51, 230, 0.15);\n}\n:where(.idpc-error) { margin-top: 0.5rem; font-size: 0.8125rem; color: #b91c1c; }\n:where(.idpc-unhide) {\n display: block;\n width: fit-content;\n margin-top: 1rem;\n margin-bottom: 0.5rem;\n padding: 0.375rem 0.75rem;\n font-size: 0.8125rem;\n font-weight: 500;\n color: #2933e6;\n background-color: transparent;\n border: 1px solid #2933e6;\n border-radius: 0.375rem;\n cursor: pointer;\n user-select: none;\n transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;\n}\n:where(.idpc-unhide:hover) { background-color: #2933e6; color: #ffffff; }\n:where(.idpc-unhide:focus) { outline: none; box-shadow: 0 0 0 3px rgba(41, 51, 230, 0.25); }\n:where([data-theme="dark"] .idpc-unhide) { color: #545ceb; border-color: #545ceb; }\n:where([data-theme="dark"] .idpc-unhide:hover) { background-color: #545ceb; color: #ffffff; }\n/* Separate the widget context from address fields that follow it. */\n:where(form >
1 div:has(> .idpc-input)), :where(form > div:has(> .idpc-button)) { margin-bottom: 0.75rem; }\n:where([data-theme="dark"] .idpc-button) { background-color: #545ceb; border-color: #545ceb; }\n:where([data-theme="dark"] .idpc-button:hover) { background-color: #4047d6; border-color: #4047d6; }\n:where([data-theme="dark"] .idpc-select-container select) {\n background-color: #2a2a2a;\n border-color: #444950;\n color: #e5e7eb;\n background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\' fill=\'%239ca3af\'%3E%3Cpath fill-rule=\'evenodd\' d=\'M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z\' clip-rule=\'evenodd\'/%3E%3C/svg%3E");\n}\n:where([data-theme="dark"] .idpc-select-container select:focus) {\n border-color: #545ceb;\n box-shadow: 0 0 0 3px rgba(84, 92, 235, 0.25);\n}\n:where([data-theme="dark"] .idpc-error) { color: #f87171; }\n\n/* Address Finder / Postcode Lookup dropdown \u2014 dark variant.\n Targets v5.0.4\'s actual selectors (idpc_af is the dropdown wrapper).\n Once the unreleased beta with --idpc-* variables ships, swap to variable\n overrides for cleaner theming. */\nhtml[data-theme="dark"] div.idpc_autocomplete {\n color: #e5e7eb !important;\n}\nhtml[data-theme="dark"] div.idpc_af {\n background: #2a2a2a !important;\n border-color: rgba(255, 255, 255, 0.15) !important;\n box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.6) !important;\n}\nhtml[data-theme="dark"] div.idpc_af > ul > li:hover {\n background-color: #3a3a3a !important;\n}\nhtml[data-theme="dark"] div.idpc_af > ul > li.idpc_error,\nhtml[data-theme="dark"] div.idpc_af > ul > li.idpc_error:hover {\n background-color: #2a2a2a !important;\n color: #9ca3af !important;\n}\nhtml[data-theme="dark"] div.idpc_af > ul > li[aria-selected="true"] {\n background-color: #545ceb !important;\n color: #ffffff !important;\n}\nhtml[data-theme="dark"] div.idpc_toolbar {\n border-top-color: rgba(255, 255, 255, 0.15) !important;\n}\n/* Country toggle: source CSS sets hover bg to #e5e4e2 (light grey) which\n reads as bright white-on-white in dark mode. Tone it down and ensure the\n country-name text stays legible when it expands on hover. */\nhtml[data-theme="dark"] div.idpc_autocomplete > div > div > span:hover {\n background-color: #3a3a3a !important;\n}\nhtml[data-theme="dark"] div.idpc_toolbar > span span.idpc_country {\n color: #e5e7eb !important;\n}';var s=o(65723);const l={border:"1px solid var(--ifm-color-emphasis-300)",borderRadius:"var(--ifm-card-border-radius)",backgroundColor:"var(--ifm-background-surface-color)"},d=(e={})=>{const{imports:t={},mode:o="simple",themeColor:n,editor:d,editorTheme:c,fontFamily:p,baseCss:u=i}=e;return function({html:e,js:i,css:h,scripts:f,stylesheets:m,head:b,baseCss:g=u,imports:v,height:w="500px",view:y="split",mode:k=o,loading:x="lazy",activeEditor:_,className:j,style:C,editorTheme:P=c,theme:A="light"}){const E="dark"===A;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r.A,{fallback:(0,s.jsx)("div",{style:{height:w},children:"Loading..."}),children:()=>{const o=[g&&`<style>${g}</style>`,b].filter(Boolean).join("\n");return(0,s.jsx)(a.A,{height:w,loading:x,className:j,style:{...l,...C},config:{mode:k,view:y,theme:E?"dark":"light",htmlAttrs:{"data-theme":E?"dark":"light"},markup:{language:"html",content:e},...i&&{script:{language:"javascript",content:i}},...h&&{style:{language:"css",content:h}},languages:[...i?["javascript"]:[],"html",...h?["css"]:[]],activeEditor:_??(i?"script":"markup"),lineNumbers:!1,wordWrap:!0,useTabs:!1,tabSize:2,...f&&{scripts:f},...m&&{stylesheets:m},...o&&{head:o},imports:{...t,...v},...P&&{editorTheme:P},...n&&{themeColor:E?n.dark:n.light},...d&&{editor:d},...p&&{fontFamily:p}}})}}),(0,s.jsxs)("div",{style:{display:"none"},"aria-hidden":"true",children:[(0,s.jsx)("pre",{children:e}),i&&(0,s.jsx)("pre",{children:i}),h&&(0,s.jsx)("pre",{children:h})]})]})}},c=(d(),d({imports:{"@ideal-postcodes/address-finder":"https://esm.sh/@ideal-postcodes/address-finder-bundled@5","@ideal-postcodes/postcode-lookup":"https://esm.sh/@ideal-postcodes/postcode-lookup-bundled@3"},themeColor:{light:"#2933e6",dark:"#7b83f5"},editorTheme:["github-light@light","github-dark@dark"],fontFamily:"Fira Code"}));function p(e){const{isDarkTheme:t}=(0,n.G)();return(0,s.jsx)(c,{...e,theme:t?"dark":"light"})}},19741(e,t,o){o.d(t,{A:()=>a});o(22155);var n=o(41950),r=o(65723);function a({children:e,fallback:t}){return(0,n.A)()?(0,r.jsx)(r.Fragment,{children:e?.()}):t??null}},21850(e,t,o){o.d(t,{A:()=>b});var n,r,a=o(22155),i=o(65723),s=Object.create,l=Object.defineProperty,d=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,h=(n=(e,t)=>
vendor: 4,140 bytes, line 1
1{var o=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",n={};function r(e,t){if(!n[e]){n[e]={};for(var o=0;o<e.length;o++)n[e][e.charAt(o)]=o}return n[e][t]}var a={compressToBase64:function(e){if(null==e)return"";var o=a._compress(e,6,function(e){return t.charAt(e)});switch(o.length%4){default:case 0:return o;case 1:return o+"===";case 2:return o+"==";case 3:return o+"="}},decompressFromBase64:function(e){return null==e?"":""==e?null:a._decompress(e.length,32,function(o){return r(t,e.charAt(o))})},compressToUTF16:function(t){return null==t?"":a._compress(t,15,function(t){return e(t+32)})+" "},decompressFromUTF16:function(e){return null==e?"":""==e?null:a._decompress(e.length,16384,function(t){return e.charCodeAt(t)-32})},compressToUint8Array:function(e){for(var t=a.compress(e),o=new Uint8Array(2*t.length),n=0,r=t.length;n<r;n++){var i=t.charCodeAt(n);o[2*n]=i>>>8,o[2*n+1]=i%256}return o},decompressFromUint8Array:function(t){if(null==t)return a.decompress(t);for(var o=new Array(t.length/2),n=0,r=o.length;n<r;n++)o[n]=256*t[2*n]+t[2*n+1];var i=[];return o.forEach(function(t){i.push(e(t))}),a.decompress(i.join(""))},compressToEncodedURIComponent:function(e){return null==e?"":a._compress(e,6,function(e){return o.charAt(e)})},decompressFromEncodedURIComponent:function(e){return null==e?"":""==e?null:(e=e.replace(/ /g,"+"),a._decompress(e.length,32,function(t){return r(o,e.charAt(t))}))},compress:function(t){return a._compress(t,16,function(t){return e(t)})},_compress:function(e,t,o){if(null==e)return"";var n,r,a,i={},s={},l="",d="",c="",p=2,u=3,h=2,f=[],m=0,b=0;for(a=0;a<e.length;a+=1)if(l=e.charAt(a),Object.prototype.hasOwnProperty.call(i,l)||(i[l]=u++,s[l]=!0),d=c+l,Object.prototype.hasOwnProperty.call(i,d))c=d;else{if(Object.prototype.hasOwnProperty.call(s,c)){if(c.charCodeAt(0)<256){for(n=0;n<h;n++)m<<=1,b==t-1?(b=0,f.push(o(m)),m=0):b++;for(r=c.charCodeAt(0),n=0;n<8;n++)m=m<<1|1&r,b==t-1?(b=0,f.push(o(m)),m=0):b++,r>>=1}else{for(r=1,n=0;n<h;n++)m=m<<1|r,b==t-1?(b=0,f.push(o(m)),m=0):b++,r=0;for(r=c.charCodeAt(0),n=0;n<16;n++)m=m<<1|1&r,b==t-1?(b=0,f.push(o(m)),m=0):b++,r>>=1}0==--p&&(p=Math.pow(2,h),h++),delete s[c]}else for(r=i[c],n=0;n<h;n++)m=m<<1|1&r,b==t-1?(b=0,f.push(o(m)),m=0):b++,r>>=1;0==--p&&(p=Math.pow(2,h),h++),i[d]=u++,c=String(l)}if(""!==c){if(Object.prototype.hasOwnProperty.call(s,c)){if(c.charCodeAt(0)<256){for(n=0;n<h;n++)m<<=1,b==t-1?(b=0,f.push(o(m)),m=0):b++;for(r=c.charCodeAt(0),n=0;n<8;n++)m=m<<1|1&r,b==t-1?(b=0,f.push(o(m)),m=0):b++,r>>=1}else{for(r=1,n=0;n<h;n++)m=m<<1|r,b==t-1?(b=0,f.push(o(m)),m=0):b++,r=0;for(r=c.charCodeAt(0),n=0;n<16;n++)m=m<<1|1&r,b==t-1?(b=0,f.push(o(m)),m=0):b++,r>>=1}0==--p&&(p=Math.pow(2,h),h++),delete s[c]}else for(r=i[c],n=0;n<h;n++)m=m<<1|1&r,b==t-1?(b=0,f.push(o(m)),m=0):b++,r>>=1;0==--p&&(p=Math.pow(2,h),h++)}for(r=2,n=0;n<h;n++)m=m<<1|1&r,b==t-1?(b=0,f.push(o(m)),m=0):b++,r>>=1;for(;;){if(m<<=1,b==t-1){f.push(o(m));break}b++}return f.join("")},decompress:function(e){return null==e?"":""==e?null:a._decompress(e.length,32768,function(t){return e.charCodeAt(t)})},_decompress:function(t,o,n){var r,a,i,s,l,d,c,p=[],u=4,h=4,f=3,m="",b=[],g={val:n(0),position:o,index:1};for(r=0;r<3;r+=1)p[r]=r;for(i=0,l=Math.pow(2,2),d=1;d!=l;)s=g.val&g.position,g.position>>=1,0==g.position&&(g.position=o,g.val=n(g.index++)),i|=(s>0?1:0)*d,d<<=1;switch(i){case 0:for(i=0,l=Math.pow(2,8),d=1;d!=l;)s=g.val&g.position,g.position>>=1,0==g.position&&(g.position=o,g.val=n(g.index++)),i|=(s>0?1:0)*d,d<<=1;c=e(i);break;case 1:for(i=0,l=Math.pow(2,16),d=1;d!=l;)s=g.val&g.position,g.position>>=1,0==g.position&&(g.position=o,g.val=n(g.index++)),i|=(s>0?1:0)*d,d<<=1;c=e(i);break;case 2:return""}for(p[3]=c,a=c,b.push(c);;){if(g.index>t)return"";for(i=0,l=Math.pow(2,f),d=1;d!=l;)s=g.val&g.position,g.position>>=1,0==g.position&&(g.position=o,g.val=n(g.index++)),i|=(s>0?1:0)*d,d<<=1;switch(c=i){case 0:for(i=0,l=Math.pow(2,8),d=1;d!=l;)s=g.val&g.position,g.position>>=1,0==g.position&&(g.position=o,g.val=n(g.index++)),i|=(s>
10?1:0)*d,d<<=1;p[h++]=e(i),c=h-1,u--;break;case 1:for(i=0,l=Math.pow(2,16),d=1;d!=l;)s=g.val&g.position,g.position>>=1,0==g.position&&(g.position=o,g.val=n(g.index++)),i|=(s>0?1:0)*d,d<<=1;p[h++]=e(i),c=h-1,u--;break;case 2:return b.join("")}if(0==u&&(u=Math.pow(2,f),f++),p[c])m=p[c];else{if(c!==h)return null;m=a+a.charAt(0)}b.push(m),p[h++]=a+m.charAt(0),a=m,0==--u&&(u=Math.pow(2,f),f++)}}};return a}();void 0!==t&&null!=t&&(t.exports=o)},()=>(r||n((r={exports:{}}).exports,r),r.exports)),f=((e,t,o)=>(o=null!=e?s(p(e)):{},((e,t,o,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of c(t))!u.call(e,r)&&r!==o&&l(e,r,{get:()=>t[r],enumerable:!(n=d(t,r))||n.enumerable});return e})(!t&&e&&e.__esModule?o:l(o,"default",{value:e,enumerable:!0}),e)))(h());async function m(e,t={}){"object"==typeof e&&!(e instanceof HTMLElement)&&(e.headless||"headless"===e.view)&&(t=e,e=null);let{config:o={},headless:n,loading:r="lazy",view:a}=t,i=n||"headless"===a,s=null,l=null;if("string"==typeof e)s=document.querySelector(e);else if(e instanceof HTMLElement)s=e;else if(!i||"object"!=typeof e)throw new Error("A valid container element is required.");if(!s){if(!i)throw new Error(`Cannot find element: "${e}"`);s=document.createElement("div"),C(s),document.body.appendChild(s)}let d=new URL(function(e={}){let t,{appUrl:o="https://livecodes.io",params:n={},config:r={},headless:a,import:i,lite:s,view:l,...d}=e;try{t=new URL(o)}catch(u){throw new Error(`${o} is not a valid URL.`)}let c=new URLSearchParams;Object.entries(d).forEach(([e,o])=>{void 0!==o&&t.searchParams.set(e,String(o))});let p="headless"===e.view||a;if(s&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":t.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==l?r.view=l:t.searchParams.set("view",l)),"string"==typeof r)try{new URL(r),t.searchParams.set("config",encodeURIComponent(r))}catch(u){throw new Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&t.searchParams.set("title",r.title),r.description&&r.description.length>0&&t.searchParams.set("description",r.description),c.set("config","code/"+(0,f.compressToEncodedURIComponent)(JSON.stringify(r))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{c.set("params",(0,f.compressToEncodedURIComponent)(JSON.stringify(n)))}catch(u){Object.keys(n).forEach(e=>{t.searchParams.set(e,encodeURIComponent(String(n[e])))})}return i&&t.searchParams.set("x",encodeURIComponent(i)),p&&t.searchParams.set("headless","true"),c.toString().length>0&&(t.hash=c.toString()),t.href}(t)),c=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",i?"eager":r),d.searchParams.set("sdkVersion","0.13.0"),"object"==typeof o&&Object.keys(o).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let u=!1,h="Cannot call API methods after calling `destroy()`.",m=[],b=(e,t="message")=>{addEventListener(t,e),m.push(e)},g=await new Promise(e=>{var t,n,a,p,u,h,f,m,g;if(!s)return;let v=s.dataset.height||s.style.height;if(v&&!i){let e=isNaN(Number(v))?v:v+"px";s.style.height=e}"false"!==s.dataset.defaultStyles&&!i&&((t=s.style).backgroundColor||(t.backgroundColor="#fff"),(n=s.style).border||(n.border="1px solid black"),(a=s.style).borderRadius||(a.borderRadius="8px"),(p=s.style).boxSizing||(p.boxSizing="border-box"),(u=s.style).padding||(u.padding="0"),(h=s.style).width||(h.width="100%"),(f=s.style).height||(f.height=s.style.height||"300px"),s.style.minHeight="200px",s.style.flexGrow="1",(m=s.style).overflow||(m.overflow="hidden"),(g=s.style).resize||(g.resize="vertical"));let w="livecodes",y=s.querySelector(`iframe.${w}`),k=y||document.createElement("iframe");k.classList.add(w),k.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),k.setAttribute("allowtransparency","true"),k.setAttribute("allowpaymentrequest","true"),k.setAttribute("allowfullscreen","true"),k.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts");let x="eager"===r?"eager":"lazy";k.setAttribute("loading",x),i?C(k):(k.style.height="100%",k.style.minHeight="200px",k.style.width="100%",k.style.margin="0",k.style.border="0",k.style.borderRadius=s.style.borderRadius),b(function e(t){var o;t.source!==k.contentWindow||t.origin!==c||"livecodes-init"!==(null==(o=t.data)?void 0:o.type)||(removeEventListener("message",e),l=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&b(function e(t){var n,r;t.source!==k.contentWindow||t.origin!==c||"livecodes-get-config"!==(null==(n=t.data)?void 0:n.type)||(removeEventListener("message",e),null==(r=k.contentWindow)||r.postMessage({type:"livecodes-config",payload:o},c))}),k.onload=()=>{e(k)},k.src=d.href,y||s.appendChild(k)}),v=new Promise(e=>{b(function t(o){var n;o.source!==g.contentWindow||o.origin!==c||"livecodes-ready"!==(null==(n=o.data)?void 0:n.type)||(removeEventListener("message",t),e(),v.settled=!0)})}),w=()=>u?Promise.reject(h):new Promise(async e=>{var t;v.settled&&e();null==(t=g.contentWindow)||t.postMessage({type:"livecodes-load"},c),await v,e()}),y=(e,t)=>new Promise(async(o,n)=>{var r;if(u)return n(h);await w();let a=P();b(function t(r){var i,s;if(r.source===g.contentWindow&&r.origin===c&&"livecodes-api-response"===(null==(i=r.data)?void 0:i.type)&&(null==(s=r.data)?void 0:s.id)===a&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;null!=e&&e.error?n(e.error):o(e)}}),null==(r=g.contentWindow)||r.postMessage({method:e,id:a,args:t},c)}),k={},x=["load","ready","code","console","tests","destroy"],_=(e,t)=>
1{var o;if(u)throw new Error(h);return x.includes(e)?(y("watch",[e]),k[e]||(k[e]=[]),null==(o=k[e])||o.push(t),{remove:()=>{var o,n;k[e]=null==(o=k[e])?void 0:o.filter(e=>e!==t),0===(null==(n=k[e])?void 0:n.length)&&y("watch",[e,"unsubscribe"])}}):{remove:()=>{}}};b(async function(e){var t,o,n,r;let a={"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"}[null!=(o=null==(t=e.data)?void 0:t.type)?o:""];if(e.source!==g.contentWindow||e.origin!==c||!a||!k[a])return;let i=null==(n=e.data)?void 0:n.payload;null==(r=k[a])||r.forEach(e=>{e(i)})});let j;function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&(j=new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await w(),t.unobserve(s))})},{rootMargin:"150px"}),j.observe(s));let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>w(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>_("code",e),watch:_,exec:(e,...t)=>y("exec",[e,...t]),destroy:()=>{return u?Promise.reject(h):(null==(e=null==g?void 0:g.remove)||e.call(g),Object.values(k).forEach(e=>{e.length=0}),m.forEach(e=>removeEventListener("message",e)),m.length=0,j&&s&&j.unobserve(s),u=!0,Promise.resolve());var e}}}function b(e){let t=(0,a.useRef)(null),[o,n]=(0,a.useState)(e.className||""),[r,s]=(0,a.useState)(e.style||{}),[l,d]=(0,a.useState)(e.height),[c,p]=(0,a.useState)(),[u,h]=(0,a.useState)(JSON.stringify(e.config||"")),[f,b]=(0,a.useState)("");return(0,a.useEffect)(()=>{if(!t.current)return;let{className:o,style:r,height:a,sdkReady:i,config:l,...g}=e;if(n(o||""),s(r||{}),d(a),c&&f===JSON.stringify(g)){if(u===JSON.stringify(l))return;h(JSON.stringify(l)),"string"==typeof l?fetch(l).then(e=>e.json()).then(e=>{null==c||c.setConfig(e)}):l&&c.setConfig(l)}else b(JSON.stringify(g)),null==c||c.destroy(),m(t.current,{config:l,...g}).then(e=>{p(e),"function"==typeof i&&i(e)})},[e]),(0,a.useEffect)(()=>()=>{null==c||c.destroy()},[]),(0,i.jsx)("div",{ref:t,className:o,style:r,"data-height":l})}},34056(e,t,o){o.d(t,{R:()=>i,x:()=>s});var n=o(22155);const r={},a=n.createContext(r);function i(e){const t=n.useContext(a);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(a.Provider,{value:t},e.children)}},72908(e,t,o){o.r(t),o.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>u,frontMatter:()=>s,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"postcode-lookup/multiple","title":"Create Multiple Instances","description":"You can create multiple, independent Postcode Lookup fields on the same page. This is useful for certain requirements, e.g. separate billing and shipping addresses.","source":"@site/docs/postcode-lookup/multiple.mdx","sourceDirName":"postcode-lookup","slug":"/postcode-lookup/multiple","permalink":"/docs/postcode-lookup/multiple","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Create Multiple Instances","sidebar_label":"Create Multiple Instances"},"sidebar":"postcodelookup","previous":{"title":"Retrieve Additional Data","permalink":"/docs/postcode-lookup/additional-data"},"next":{"title":"Enable Full Address Search","permalink":"/docs/postcode-lookup/full-search"}}');var r=o(65723),a=o(34056),i=o(1318);const s={title:"Create Multiple Instances",sidebar_label:"Create Multiple Instances"},l=void 0,d={},c=[{value:"Live Demo",id:"live-demo",level:2}];function p(e){const t={code:"code",h2:"h2",p:"p",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.p,{children:"You can create multiple, independent Postcode Lookup fields on the same page. This is useful for certain requirements, e.g. separate billing and shipping addresses."}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"setup"})," can be invoked multiple times on different DOM elements to create multiple fields."]}),"\n",(0,r.jsx)(t.p,{children:"Each lookup field is independent and so can behave differently if you pass in different c
1onfiguration settings."}),"\n",(0,r.jsx)(t.h2,{id:"live-demo",children:"Live Demo"}),"\n",(0,r.jsx)(i.n,{html:'<form>\n <div class="box">\n <h2>Lookup Field 1</h2>\n <label>Search your Address</label>\n <div id="lookup_field"></div>\n <label>Address Line One</label>\n <input id="first_line" type="text" />\n <label>Address Line Two</label>\n <input id="second_line" type="text" />\n <label>Address Line Three</label>\n <input id="third_line" type="text" />\n <label>Post Town</label>\n <input id="post_town" type="text" />\n <label>Postcode</label>\n <input id="postcode" type="text" />\n </div>\n <div class="box">\n <h2>Lookup Field 2</h2>\n <div id="lookup_field_2"></div>\n <label>Address Line One</label>\n <input id="first_line_2" type="text" />\n <label>Address Line Two</label>\n <input id="second_line_2" type="text" />\n <label>Address Line Three</label>\n <input id="third_line_2" type="text" />\n <label>Post Town</label>\n <input id="post_town_2" type="text" />\n <label>Postcode</label>\n <input id="postcode_2" type="text" />\n </div>\n</form>',js:'\nimport { PostcodeLookup } from "@ideal-postcodes/postcode-lookup";\n\n// Initialise each lookup field individually. You can specify completely different configurations. Each is isolated from the other.\n// Hook up the first lookup field\nPostcodeLookup.setup({\n apiKey: "ak_test",\n context: "#lookup_field",\n outputFields: {\n line_1: "#first_line",\n line_2: "#second_line",\n line_3: "#third_line",\n post_town: "#post_town",\n postcode: "#postcode",\n },\n});\n// Hook up the second lookup field\nPostcodeLookup.setup({\n apiKey: "ak_test",\n context: "#lookup_field_2",\n outputFields: {\n line_1: "#first_line_2",\n line_2: "#second_line_2",\n line_3: "#third_line_2",\n post_town: "#post_town_2",\n postcode: "#postcode_2",\n },\n});\n'})]})}function u(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}}}]);
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.