carbon-components-svelte/assets/ComboBox.5b4ada10.js

let n=document.createElement("style");n.innerHTML="",document.head.appendChild(n);import{S as a,i as s,s as t,g as e,h as p,k as o,l as c,n as l,o as i,N as r,y as u,q as d,r as k,M as m,w as $,j as x,c as f,p as g,a as h,x as b,m as v,I as w,A as E,t as S,b as C,d as y,B as T,a1 as I,Q as z,C as B,D as _,E as j,F,G as L,H as D,a0 as W,J as A,Z as H,_ as N,Y as U}from"./index.4c25e3ff.js";import"./Button.b18180bc.js";import"./index.1d7db40c.js";import{W as M,C as R,P}from"./Preview.d9075994.js";import{L as V,a as q,b as G,c as J}from"./ListBoxMenuItem.7e6d4bf5.js";import{L as O,a as Q}from"./ListBoxSelection.e1cd99e8.js";import"./ChevronDown16.e1f7710f.js";import"./Close16.0f5d35dc.js";import"./Loading.3d142f94.js";import"./Column.e0763a34.js";import"./Content.ef39761a.js";import"./store.e0a281c6.js";function Y(n,a,s){const t=n.slice();return t[45]=a[s],t[47]=s,t}function Z(n){let a,s;return{c(){a=e("label"),s=p(n[7]),this.h()},l(t){a=o(t,"LABEL",{for:!0});var e=c(a);s=l(e,n[7]),e.forEach(i),this.h()},h(){r(a,"for",n[14]),u(a,"bx--label",!0),u(a,"bx--label--disabled",n[6])},m(n,t){d(n,a,t),k(a,s)},p(n,t){128&t[0]&&m(s,n[7]),16384&t[0]&&r(a,"for",n[14]),64&t[0]&&u(a,"bx--label--disabled",n[6])},d(n){n&&i(a)}}}function K(n){let a,s;return a=new M({props:{class:"bx--list-box__invalid-icon"}}),{c(){f(a.$$.fragment)},l(n){h(a.$$.fragment,n)},m(n,t){v(a,n,t),s=!0},i(n){s||(S(a.$$.fragment,n),s=!0)},o(n){C(a.$$.fragment,n),s=!1},d(n){y(a,n)}}}function X(n){let a,s;return a=new Q({props:{translateWithId:n[13],disabled:n[6],open:n[1]}}),a.$on("clear",n[36]),a.$on("clear",n[37]),{c(){f(a.$$.fragment)},l(n){h(a.$$.fragment,n)},m(n,t){v(a,n,t),s=!0},p(n,s){const t={};8192&s[0]&&(t.translateWithId=n[13]),64&s[0]&&(t.disabled=n[6]),2&s[0]&&(t.open=n[1]),a.$set(t)},i(n){s||(S(a.$$.fragment,n),s=!0)},o(n){C(a.$$.fragment,n),s=!1},d(n){y(a,n)}}}function nn(n){let a,s,t,p,c,l,k,m,$,b,E=n[11]&&K(),T=n[17]&&X(n);return k=new q({props:{translateWithId:n[13],open:n[1]}}),k.$on("click",n[38]),{c(){a=e("input"),p=x(),E&&E.c(),c=x(),T&&T.c(),l=x(),f(k.$$.fragment),this.h()},l(n){a=o(n,"INPUT",{tabindex:!0,autocomplete:!0,"aria-autocomplete":!0,"aria-expanded":!0,"aria-activedescendant":!0,"aria-labelledby":!0,"aria-disabled":!0,"aria-controls":!0,"aria-owns":!0,disabled:!0,placeholder:!0,id:!0,value:!0}),p=g(n),E&&E.l(n),c=g(n),T&&T.l(n),l=g(n),h(k.$$.fragment,n),this.h()},h(){r(a,"tabindex","0"),r(a,"autocomplete","off"),r(a,"aria-autocomplete","list"),r(a,"aria-expanded",n[1]),r(a,"aria-activedescendant",n[23]),r(a,"aria-labelledby",n[22]),r(a,"aria-disabled",n[6]),r(a,"aria-controls",s=n[1]?n[21]:void 0),r(a,"aria-owns",t=n[1]?n[21]:void 0),a.disabled=n[6],r(a,"placeholder",n[8]),r(a,"id",n[14]),a.value=n[17],u(a,"bx--text-input",!0),u(a,"bx--text-input--empty",""===n[17])},m(s,t){d(s,a,t),n[32](a),d(s,p,t),E&&E.m(s,t),d(s,c,t),T&&T.m(s,t),d(s,l,t),v(k,s,t),m=!0,$||(b=[w(a,"input",n[33]),w(a,"keydown",n[28]),w(a,"keydown",W(n[34])),w(a,"focus",n[29]),w(a,"blur",n[30]),w(a,"blur",n[35])],$=!0)},p(n,e){(!m||2&e[0])&&r(a,"aria-expanded",n[1]),(!m||8388608&e[0])&&r(a,"aria-activedescendant",n[23]),(!m||4194304&e[0])&&r(a,"aria-labelledby",n[22]),(!m||64&e[0])&&r(a,"aria-disabled",n[6]),(!m||2097154&e[0]&&s!==(s=n[1]?n[21]:void 0))&&r(a,"aria-controls",s),(!m||2097154&e[0]&&t!==(t=n[1]?n[21]:void 0))&&r(a,"aria-owns",t),(!m||64&e[0])&&(a.disabled=n[6]),(!m||256&e[0])&&r(a,"placeholder",n[8]),(!m||16384&e[0])&&r(a,"id",n[14]),(!m||131072&e[0]&&a.value!==n[17])&&(a.value=n[17]),131072&e[0]&&u(a,"bx--text-input--empty",""===n[17]),n[11]?E?2048&e[0]&&S(E,1):(E=K(),E.c(),S(E,1),E.m(c.parentNode,c)):E&&(j(),C(E,1,1,()=>{E=null}),F()),n[17]?T?(T.p(n,e),131072&e[0]&&S(T,1)):(T=X(n),T.c(),S(T,1),T.m(l.parentNode,l)):T&&(j(),C(T,1,1,()=>{T=null}),F());const p={};8192&e[0]&&(p.translateWithId=n[13]),2&e[0]&&(p.open=n[1]),k.$set(p)},i(n){m||(S(E),S(T),S(k.$$.fragment,n),m=!0)},o(n){C(E),C(T),C(k.$$.fragment,n),m=!1},d(s){s&&i(a),n[32](null),s&&i(p),E&&E.d(s),s&&i(c),T&&T.d(s),s&&i(l),y(k,s),$=!1,A(b)}}}function an(n){let a,s;return a=new G({props:{"aria-label":n[20],id:n[14],$$slots:{default:[en]},$$scope:{ctx:n}}}),{c(){f(a.$$.fragment)},l(n){h(a.$$.fragment,n)},m(n,t){v(a,n,t),s=!0},p(n,s){const t={};1048576&s[0]&&(t["aria-label"]=n[20]),16384&s[0]&&(t.id=n[14]),851995&s[0]|131072&s[1]&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(S(a.$$.fragment,n),s=!0)},o(n){C(a.$$.fragment,n),s=!1},d(n){y(a,n)}}}function sn(n){let a,s,t=n[4](n[45])+"";return{c(){a=p(t),s=x()},l(n){a=l(n,t),s=g(n)},m(n,t){d(n,a,t),d(n,s,t)},p(n,s){524304&s[0]&&t!==(t=n[4](n[45])+"")&&m(a,t)},d(n){n&&i(a),n&&i(s)}}}function tn(n,a){let s,t,e;return t=new J({props:{id:a[45].id,active:a[0]===a[47]||a[16]===a[45].id,highlighted:a[18]===a[47]||a[0]===a[47],$$slots:{default:[sn]},$$scope:{ctx:a}}}),t.$on("click",(function(...n){return a[40](a[47],...n)})),t.$on("mouseenter",(function(...n){return a[41](a[47],...n)})),{key:n,first:null,c(){s=_(),f(t.$$.fragment),this.h()},l(n){s=_(),h(t.$$.fragment,n),this.h()},h(){this.first=s},m(n,a){d(n,s,a),v(t,n,a),e=!0},p(n,s){a=n;const e={};524288&s[0]&&(e.id=a[45].id),589825&s[0]&&(e.active=a[0]===a[47]||a[16]===a[45].id),786433&s[0]&&(e.highlighted=a[18]===a[47]||a[0]===a[47]),524304&s[0]|131072&s[1]&&(e.$$scope={dirty:s,ctx:a}),t.$set(e)},i(n){e||(S(t.$$.fragment,n),e=!0)},o(n){C(t.$$.fragment,n),e=!1},d(n){n&&i(s),y(t,n)}}}function en(n){let a,s,t=[],e=new Map,p=n[19];const o=n=>n[45].id||n[47];for(let a=0;a<p.length;a+=1){let s=Y(n,p,a),c=o(s);e.set(c,t[a]=tn(c,s))}return{c(){for(let n=0;n<t.length;n+=1)t[n].c();a=_()},l(n){for(let a=0;a<t.length;a+=1)t[a].l(n);a=_()},m(n,e){for(let a=0;a<t.length;a+=1)t[a].m(n,e);d(n,a,e),s=!0},p(n,s){if(851995&s[0]){const p=n[19];j(),t=H(t,s,o,1,n,p,e,a.parentNode,N,tn,a,Y),F()}},i(n){if(!s){for(let n=0;n<p.length;n+=1)S(t[n]);s=!0}},o(n){for(let n=0;n<t.length;n+=1)C(t[n]);s=!1},d(n){for(let a=0;a<t.length;a+=1)t[a].d(n);n&&i(a)}}}function pn(n){let a,s,t,e;a=new O({props:{role:"button","aria-expanded":n[1],id:n[14],name:n[15],disabled:n[6],translateWithId:n[13],$$slots:{default:[nn]},$$scope:{ctx:n}}}),a.$on("click",n[39]);let p=n[1]&&an(n);return{c(){f(a.$$.fragment),s=x(),p&&p.c(),t=_()},l(n){h(a.$$.fragment,n),s=g(n),p&&p.l(n),t=_()},m(n,o){v(a,n,o),d(n,s,o),p&&p.m(n,o),d(n,t,o),e=!0},p(n,s){const e={};2&s[0]&&(e["aria-expanded"]=n[1]),16384&s[0]&&(e.id=n[14]),32768&s[0]&&(e.name=n[15]),64&s[0]&&(e.disabled=n[6]),8192&s[0]&&(e.translateWithId=n[13]),15100231&s[0]|131072&s[1]&&(e.$$scope={dirty:s,ctx:n}),a.$set(e),n[1]?p?(p.p(n,s),2&s[0]&&S(p,1)):(p=an(n),p.c(),S(p,1),p.m(t.parentNode,t)):p&&(j(),C(p,1,1,()=>{p=null}),F())},i(n){e||(S(a.$$.fragment,n),S(p),e=!0)},o(n){C(a.$$.fragment,n),C(p),e=!1},d(n){y(a,n),n&&i(s),p&&p.d(n),n&&i(t)}}}function on(n){let a,s;return{c(){a=e("div"),s=p(n[9]),this.h()},l(t){a=o(t,"DIV",{});var e=c(a);s=l(e,n[9]),e.forEach(i),this.h()},h(){u(a,"bx--form__helper-text",!0),u(a,"bx--form__helper-text--disabled",n[6])},m(n,t){d(n,a,t),k(a,s)},p(n,t){512&t[0]&&m(s,n[9]),64&t[0]&&u(a,"bx--form__helper-text--disabled",n[6])},d(n){n&&i(a)}}}function cn(n){let a,s,t,p,l,r,m,T,I=n[7]&&Z(n);p=new V({props:{class:"bx--combo-box",id:n[22],"aria-label":n[20],disabled:n[6],invalid:n[11],invalidText:n[10],open:n[1],light:n[12],size:n[5],$$slots:{default:[pn]},$$scope:{ctx:n}}});let z=!n[11]&&n[9]&&on(n),B=[n[25]],_={};for(let n=0;n<B.length;n+=1)_=$(_,B[n]);return{c(){a=x(),s=e("div"),I&&I.c(),t=x(),f(p.$$.fragment),l=x(),z&&z.c(),this.h()},l(n){a=g(n),s=o(n,"DIV",{});var e=c(s);I&&I.l(e),t=g(e),h(p.$$.fragment,e),l=g(e),z&&z.l(e),e.forEach(i),this.h()},h(){b(s,_),u(s,"bx--list-box__wrapper",!0)},m(e,o){d(e,a,o),d(e,s,o),I&&I.m(s,null),k(s,t),v(p,s,null),k(s,l),z&&z.m(s,null),r=!0,m||(T=w(document.body,"click",n[31]),m=!0)},p(n,a){n[7]?I?I.p(n,a):(I=Z(n),I.c(),I.m(s,t)):I&&(I.d(1),I=null);const e={};4194304&a[0]&&(e.id=n[22]),1048576&a[0]&&(e["aria-label"]=n[20]),64&a[0]&&(e.disabled=n[6]),2048&a[0]&&(e.invalid=n[11]),1024&a[0]&&(e.invalidText=n[10]),2&a[0]&&(e.open=n[1]),4096&a[0]&&(e.light=n[12]),32&a[0]&&(e.size=n[5]),16771423&a[0]|131072&a[1]&&(e.$$scope={dirty:a,ctx:n}),p.$set(e),!n[11]&&n[9]?z?z.p(n,a):(z=on(n),z.c(),z.m(s,null)):z&&(z.d(1),z=null),b(s,_=E(B,[33554432&a[0]&&n[25]])),u(s,"bx--list-box__wrapper",!0)},i(n){r||(S(p.$$.fragment,n),r=!0)},o(n){C(p.$$.fragment,n),r=!1},d(n){n&&i(a),n&&i(s),I&&I.d(),y(p),z&&z.d(),m=!1,T()}}}function ln(n,a,s){const t=["items","itemToString","selectedIndex","value","size","disabled","titleText","placeholder","helperText","invalidText","invalid","light","open","shouldFilterItem","translateWithId","id","name","ref"];let e=T(a,t),{items:p=[]}=a,{itemToString:o=(n=>n.text||n.id)}=a,{selectedIndex:c=-1}=a,{value:l=""}=a,{size:i}=a,{disabled:r=!1}=a,{titleText:u=""}=a,{placeholder:d=""}=a,{helperText:k=""}=a,{invalidText:m=""}=a,{invalid:x=!1}=a,{light:f=!1}=a,{open:g=!1}=a,{shouldFilterItem:h=(()=>!0)}=a,{translateWithId:b}=a,{id:v="ccs-"+Math.random().toString(36)}=a,{name:w}=a,{ref:E=null}=a;const S=I();let C=void 0,y="",_=-1;function j(n){let a=_+n;a<0?a=p.length-1:a>=p.length&&(a=0),s(18,_=a)}z(()=>{g?(E.focus(),s(19,N=p.filter(n=>h(n,l)))):(s(18,_=-1),s(17,y=U?U.text:""),U||(s(16,C=void 0),s(0,c=-1)))});let F,W,A,H,N,U;return n.$$set=n=>{s(44,a=$($({},a),B(n))),s(25,e=T(a,t)),"items"in n&&s(3,p=n.items),"itemToString"in n&&s(4,o=n.itemToString),"selectedIndex"in n&&s(0,c=n.selectedIndex),"value"in n&&s(26,l=n.value),"size"in n&&s(5,i=n.size),"disabled"in n&&s(6,r=n.disabled),"titleText"in n&&s(7,u=n.titleText),"placeholder"in n&&s(8,d=n.placeholder),"helperText"in n&&s(9,k=n.helperText),"invalidText"in n&&s(10,m=n.invalidText),"invalid"in n&&s(11,x=n.invalid),"light"in n&&s(12,f=n.light),"open"in n&&s(1,g=n.open),"shouldFilterItem"in n&&s(27,h=n.shouldFilterItem),"translateWithId"in n&&s(13,b=n.translateWithId),"id"in n&&s(14,v=n.id),"name"in n&&s(15,w=n.name),"ref"in n&&s(2,E=n.ref)},n.$$.update=()=>{9&n.$$.dirty[0]&&s(42,U=p[c]),65545&n.$$.dirty[0]|2048&n.$$.dirty[1]&&c>-1&&(s(16,C=p[c].id),S("select",{selectedId:C,selectedIndex:c,selectedItem:U})),s(20,F=a["aria-label"]||"Choose an item"),16384&n.$$.dirty[0]&&s(21,W="menu-"+v),16384&n.$$.dirty[0]&&s(22,A="combo-"+v),262152&n.$$.dirty[0]&&s(23,H=p[_]?p[_].id:void 0),2048&n.$$.dirty[1]&&s(17,y=U?U.text:void 0),131072&n.$$.dirty[0]&&s(26,l=y),201326600&n.$$.dirty[0]&&s(19,N=p.filter(n=>h(n,l)))},a=B(a),[c,g,E,p,o,i,r,u,d,k,m,x,f,b,v,w,C,y,_,N,F,W,A,H,j,e,l,h,function(a){L(n,a)},function(a){L(n,a)},function(a){L(n,a)},({target:n})=>{g&&E&&!E.contains(n)&&s(1,g=!1)},function(n){D[n?"unshift":"push"](()=>{E=n,s(2,E)})},({target:n})=>{s(17,y=n.value)},({key:n})=>{"Enter"===n?(s(1,g=!g),_>-1&&_!==c&&(s(0,c=_),s(1,g=!1))):"Tab"===n?s(1,g=!1):"ArrowDown"===n?j(1):"ArrowUp"===n?j(-1):"Escape"===n&&s(1,g=!1)},({relatedTarget:n})=>{n&&"button"!==n.getAttribute("role")&&E.focus()},function(a){L(n,a)},()=>{s(0,c=-1),s(1,g=!1),E.focus()},n=>{n.stopPropagation(),s(1,g=!g)},()=>{s(1,g=!0)},n=>{s(0,c=p.map(({id:n})=>n).indexOf(N[n].id)),s(1,g=!1)},n=>{s(18,_=n)}]}class rn extends a{constructor(n){super(),s(this,n,ln,cn,t,{items:3,itemToString:4,selectedIndex:0,value:26,size:5,disabled:6,titleText:7,placeholder:8,helperText:9,invalidText:10,invalid:11,light:12,open:1,shouldFilterItem:27,translateWithId:13,id:14,name:15,ref:2},[-1,-1])}}function un(n){let a,s;return a=new rn({props:{titleText:"Contact",placeholder:"Select contact method",items:[{id:"0",text:"Slack"},{id:"1",text:"Email"},{id:"2",text:"Fax"}]}}),{c(){f(a.$$.fragment)},l(n){h(a.$$.fragment,n)},m(n,t){v(a,n,t),s=!0},p:U,i(n){s||(S(a.$$.fragment,n),s=!0)},o(n){C(a.$$.fragment,n),s=!1},d(n){y(a,n)}}}function dn(n){let a,s;return a=new rn({props:{titleText:"Contact",placeholder:"Select contact method",selectedIndex:1,items:[{id:"0",text:"Slack"},{id:"1",text:"Email"},{id:"2",text:"Fax"}]}}),{c(){f(a.$$.fragment)},l(n){h(a.$$.fragment,n)},m(n,t){v(a,n,t),s=!0},p:U,i(n){s||(S(a.$$.fragment,n),s=!0)},o(n){C(a.$$.fragment,n),s=!1},d(n){y(a,n)}}}function kn(n){let a,s;return a=new rn({props:{titleText:"Contact",placeholder:"Select contact method",size:"xl",items:[{id:"0",text:"Slack"},{id:"1",text:"Email"},{id:"2",text:"Fax"}]}}),{c(){f(a.$$.fragment)},l(n){h(a.$$.fragment,n)},m(n,t){v(a,n,t),s=!0},p:U,i(n){s||(S(a.$$.fragment,n),s=!0)},o(n){C(a.$$.fragment,n),s=!1},d(n){y(a,n)}}}function mn(n){let a,s;return a=new rn({props:{titleText:"Contact",placeholder:"Select contact method",size:"sm",items:[{id:"0",text:"Slack"},{id:"1",text:"Email"},{id:"2",text:"Fax"}]}}),{c(){f(a.$$.fragment)},l(n){h(a.$$.fragment,n)},m(n,t){v(a,n,t),s=!0},p:U,i(n){s||(S(a.$$.fragment,n),s=!0)},o(n){C(a.$$.fragment,n),s=!1},d(n){y(a,n)}}}function $n(n){let a,s;return a=new rn({props:{titleText:"Contact",placeholder:"Select contact method",disabled:!0,items:[{id:"0",text:"Slack"},{id:"1",text:"Email"},{id:"2",text:"Fax"}]}}),{c(){f(a.$$.fragment)},l(n){h(a.$$.fragment,n)},m(n,t){v(a,n,t),s=!0},p:U,i(n){s||(S(a.$$.fragment,n),s=!0)},o(n){C(a.$$.fragment,n),s=!1},d(n){y(a,n)}}}function xn(n){let a,s,t,u,m,$,f,h,b,v,w,E,S,C,y,T,I,z,B,_,j,F,L,D,W,A;return{c(){a=e("div"),s=e("ul"),t=e("li"),u=e("a"),m=p("Usage"),$=x(),f=e("ul"),h=e("li"),b=e("a"),v=p("Default"),w=x(),E=e("li"),S=e("a"),C=p("Selected index"),y=x(),T=e("li"),I=e("a"),z=p("Extra-large size"),B=x(),_=e("li"),j=e("a"),F=p("Small size"),L=x(),D=e("li"),W=e("a"),A=p("Disabled"),this.h()},l(n){a=o(n,"DIV",{slot:!0});var e=c(a);s=o(e,"UL",{class:!0});var p=c(s);t=o(p,"LI",{class:!0});var r=c(t);u=o(r,"A",{class:!0,href:!0});var d=c(u);m=l(d,"Usage"),d.forEach(i),$=g(r),f=o(r,"UL",{class:!0});var k=c(f);h=o(k,"LI",{class:!0});var x=c(h);b=o(x,"A",{class:!0,href:!0});var H=c(b);v=l(H,"Default"),H.forEach(i),x.forEach(i),w=g(k),E=o(k,"LI",{class:!0});var N=c(E);S=o(N,"A",{class:!0,href:!0});var U=c(S);C=l(U,"Selected index"),U.forEach(i),N.forEach(i),y=g(k),T=o(k,"LI",{class:!0});var M=c(T);I=o(M,"A",{class:!0,href:!0});var R=c(I);z=l(R,"Extra-large size"),R.forEach(i),M.forEach(i),B=g(k),_=o(k,"LI",{class:!0});var P=c(_);j=o(P,"A",{class:!0,href:!0});var V=c(j);F=l(V,"Small size"),V.forEach(i),P.forEach(i),L=g(k),D=o(k,"LI",{class:!0});var q=c(D);W=o(q,"A",{class:!0,href:!0});var G=c(W);A=l(G,"Disabled"),G.forEach(i),q.forEach(i),k.forEach(i),r.forEach(i),p.forEach(i),e.forEach(i),this.h()},h(){r(u,"class","bx--link"),r(u,"href","#usage"),r(b,"class","bx--link"),r(b,"href","#default"),r(h,"class","bx--list__item"),r(S,"class","bx--link"),r(S,"href","#selected-index"),r(E,"class","bx--list__item"),r(I,"class","bx--link"),r(I,"href","#extra-large-size"),r(T,"class","bx--list__item"),r(j,"class","bx--link"),r(j,"href","#small-size"),r(_,"class","bx--list__item"),r(W,"class","bx--link"),r(W,"href","#disabled"),r(D,"class","bx--list__item"),r(f,"class","bx--list--unordered bx--list--nested"),r(t,"class","bx--list__item"),r(s,"class","bx--list--unordered"),r(a,"slot","aside")},m(n,e){d(n,a,e),k(a,s),k(s,t),k(t,u),k(u,m),k(t,$),k(t,f),k(f,h),k(h,b),k(b,v),k(f,w),k(f,E),k(E,S),k(S,C),k(f,y),k(f,T),k(T,I),k(I,z),k(f,B),k(f,_),k(_,j),k(j,F),k(f,L),k(f,D),k(D,W),k(W,A)},d(n){n&&i(a)}}}function fn(n){let a,s,t,u,m,$,b,w,E,T,I,z,B,_,j,F,L,D,W,A,H,N,U,M,R,V;return u=new P({props:{codeRaw:"<script>\n  import { ComboBox } from \"carbon-components-svelte\";\n<\/script>\n\n<ComboBox\n  titleText=\"Contact\"\n  placeholder=\"Select contact method\"\n  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}\n/>\n",code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span> ComboBox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ComboBox</span>\n  <span class="token attr-name">titleText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Contact<span class="token punctuation">"</span></span>\n  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select contact method<span class="token punctuation">"</span></span>\n  <span class="token attr-name">items=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'0\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Slack\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Email\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Fax\'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>\n<span class="token punctuation">/></span></span>\n',$$slots:{default:[un]},$$scope:{ctx:n}}}),E=new P({props:{codeRaw:"<script>\n  import { ComboBox } from \"carbon-components-svelte\";\n<\/script>\n\n<ComboBox\n  titleText=\"Contact\"\n  placeholder=\"Select contact method\"\n  selectedIndex={1}\n  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}\n/>\n",code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span> ComboBox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ComboBox</span>\n  <span class="token attr-name">titleText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Contact<span class="token punctuation">"</span></span>\n  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select contact method<span class="token punctuation">"</span></span>\n  <span class="token attr-name">selectedIndex=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n  <span class="token attr-name">items=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'0\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Slack\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Email\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Fax\'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>\n<span class="token punctuation">/></span></span>\n',$$slots:{default:[dn]},$$scope:{ctx:n}}}),_=new P({props:{codeRaw:"<script>\n  import { ComboBox } from \"carbon-components-svelte\";\n<\/script>\n\n<ComboBox\n  titleText=\"Contact\"\n  placeholder=\"Select contact method\"\n  size=\"xl\"\n  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}\n/>\n",code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span> ComboBox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ComboBox</span>\n  <span class="token attr-name">titleText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Contact<span class="token punctuation">"</span></span>\n  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select contact method<span class="token punctuation">"</span></span>\n  <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>xl<span class="token punctuation">"</span></span>\n  <span class="token attr-name">items=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'0\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Slack\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Email\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Fax\'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>\n<span class="token punctuation">/></span></span>\n',$$slots:{default:[kn]},$$scope:{ctx:n}}}),W=new P({props:{codeRaw:"<script>\n  import { ComboBox } from \"carbon-components-svelte\";\n<\/script>\n\n<ComboBox\n  titleText=\"Contact\"\n  placeholder=\"Select contact method\"\n  size=\"sm\"\n  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}\n/>\n",code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span> ComboBox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ComboBox</span>\n  <span class="token attr-name">titleText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Contact<span class="token punctuation">"</span></span>\n  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select contact method<span class="token punctuation">"</span></span>\n  <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sm<span class="token punctuation">"</span></span>\n  <span class="token attr-name">items=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'0\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Slack\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Email\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Fax\'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>\n<span class="token punctuation">/></span></span>\n',$$slots:{default:[mn]},$$scope:{ctx:n}}}),M=new P({props:{codeRaw:"<script>\n  import { ComboBox } from \"carbon-components-svelte\";\n<\/script>\n\n<ComboBox\n  titleText=\"Contact\"\n  placeholder=\"Select contact method\"\n  disabled\n  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}\n/>\n",code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span> ComboBox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ComboBox</span>\n  <span class="token attr-name">titleText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Contact<span class="token punctuation">"</span></span>\n  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select contact method<span class="token punctuation">"</span></span>\n  <span class="token attr-name">disabled</span>\n  <span class="token attr-name">items=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'0\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Slack\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Email\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Fax\'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>\n<span class="token punctuation">/></span></span>\n',$$slots:{default:[$n]},$$scope:{ctx:n}}}),{c(){a=e("h3"),s=p("Default"),t=x(),f(u.$$.fragment),m=x(),$=e("h3"),b=p("Selected index"),w=x(),f(E.$$.fragment),T=x(),I=e("h3"),z=p("Extra-large size"),B=x(),f(_.$$.fragment),j=x(),F=e("h3"),L=p("Small size"),D=x(),f(W.$$.fragment),A=x(),H=e("h3"),N=p("Disabled"),U=x(),f(M.$$.fragment),R=x(),this.h()},l(n){a=o(n,"H3",{id:!0});var e=c(a);s=l(e,"Default"),e.forEach(i),t=g(n),h(u.$$.fragment,n),m=g(n),$=o(n,"H3",{id:!0});var p=c($);b=l(p,"Selected index"),p.forEach(i),w=g(n),h(E.$$.fragment,n),T=g(n),I=o(n,"H3",{id:!0});var r=c(I);z=l(r,"Extra-large size"),r.forEach(i),B=g(n),h(_.$$.fragment,n),j=g(n),F=o(n,"H3",{id:!0});var d=c(F);L=l(d,"Small size"),d.forEach(i),D=g(n),h(W.$$.fragment,n),A=g(n),H=o(n,"H3",{id:!0});var k=c(H);N=l(k,"Disabled"),k.forEach(i),U=g(n),h(M.$$.fragment,n),R=g(n),this.h()},h(){r(a,"id","default"),r($,"id","selected-index"),r(I,"id","extra-large-size"),r(F,"id","small-size"),r(H,"id","disabled")},m(n,e){d(n,a,e),k(a,s),d(n,t,e),v(u,n,e),d(n,m,e),d(n,$,e),k($,b),d(n,w,e),v(E,n,e),d(n,T,e),d(n,I,e),k(I,z),d(n,B,e),v(_,n,e),d(n,j,e),d(n,F,e),k(F,L),d(n,D,e),v(W,n,e),d(n,A,e),d(n,H,e),k(H,N),d(n,U,e),v(M,n,e),d(n,R,e),V=!0},p(n,a){const s={};1&a&&(s.$$scope={dirty:a,ctx:n}),u.$set(s);const t={};1&a&&(t.$$scope={dirty:a,ctx:n}),E.$set(t);const e={};1&a&&(e.$$scope={dirty:a,ctx:n}),_.$set(e);const p={};1&a&&(p.$$scope={dirty:a,ctx:n}),W.$set(p);const o={};1&a&&(o.$$scope={dirty:a,ctx:n}),M.$set(o)},i(n){V||(S(u.$$.fragment,n),S(E.$$.fragment,n),S(_.$$.fragment,n),S(W.$$.fragment,n),S(M.$$.fragment,n),V=!0)},o(n){C(u.$$.fragment,n),C(E.$$.fragment,n),C(_.$$.fragment,n),C(W.$$.fragment,n),C(M.$$.fragment,n),V=!1},d(n){n&&i(a),n&&i(t),y(u,n),n&&i(m),n&&i($),n&&i(w),y(E,n),n&&i(T),n&&i(I),n&&i(B),y(_,n),n&&i(j),n&&i(F),n&&i(D),y(W,n),n&&i(A),n&&i(H),n&&i(U),y(M,n),n&&i(R)}}}function gn(n){let a,s;return a=new R({props:{$$slots:{default:[fn],aside:[xn]},$$scope:{ctx:n}}}),{c(){f(a.$$.fragment)},l(n){h(a.$$.fragment,n)},m(n,t){v(a,n,t),s=!0},p(n,[s]){const t={};1&s&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(S(a.$$.fragment,n),s=!0)},o(n){C(a.$$.fragment,n),s=!1},d(n){y(a,n)}}}export default class extends a{constructor(n){super(),s(this,n,null,gn,t,{})}}