carbon-components-svelte/assets/Form.50b5d02c.js

let n=document.createElement("style");n.innerHTML="",document.head.appendChild(n);import{S as a,i as s,s as t,c as p,a as e,m as o,t as c,b as l,d as u,g as i,h as r,j as k,k as $,l as m,n as d,o as g,p as f,N as b,q as x,r as h,G as v,Y as B}from"./index.c2c9d961.js";import{B as S}from"./Button.37430222.js";import{C}from"./Checkbox.4e02ac4e.js";import"./index.af83b04a.js";import{C as R,P as T,S as F,b as w}from"./Preview.4c9c0c28.js";import"./ChevronDown16.d70ae9ed.js";import"./Loading.8dea5962.js";import{F as G}from"./Form.6ed8ccf2.js";import{F as y,R as L,a as j}from"./RadioButtonGroup.823c4a52.js";import"./Column.2e03e551.js";import"./Content.94950662.js";import"./store.a9279dc1.js";function I(n){let a,s,t,i,r,$;return a=new C({props:{id:"checkbox-0",labelText:"Checkbox Label",checked:!0}}),t=new C({props:{id:"checkbox-1",labelText:"Checkbox Label"}}),r=new C({props:{id:"checkbox-2",labelText:"Checkbox Label",disabled:!0}}),{c(){p(a.$$.fragment),s=k(),p(t.$$.fragment),i=k(),p(r.$$.fragment)},l(n){e(a.$$.fragment,n),s=f(n),e(t.$$.fragment,n),i=f(n),e(r.$$.fragment,n)},m(n,p){o(a,n,p),x(n,s,p),o(t,n,p),x(n,i,p),o(r,n,p),$=!0},p:B,i(n){$||(c(a.$$.fragment,n),c(t.$$.fragment,n),c(r.$$.fragment,n),$=!0)},o(n){l(a.$$.fragment,n),l(t.$$.fragment,n),l(r.$$.fragment,n),$=!1},d(n){u(a,n),n&&g(s),u(t,n),n&&g(i),u(r,n)}}}function E(n){let a,s,t,i,r,$;return a=new j({props:{id:"radio-1",value:"standard",labelText:"Standard Radio Button"}}),t=new j({props:{id:"radio-2",value:"default-selected",labelText:"Default Selected Radio Button"}}),r=new j({props:{id:"radio-4",value:"disabled",labelText:"Disabled Radio Button",disabled:!0}}),{c(){p(a.$$.fragment),s=k(),p(t.$$.fragment),i=k(),p(r.$$.fragment)},l(n){e(a.$$.fragment,n),s=f(n),e(t.$$.fragment,n),i=f(n),e(r.$$.fragment,n)},m(n,p){o(a,n,p),x(n,s,p),o(t,n,p),x(n,i,p),o(r,n,p),$=!0},p:B,i(n){$||(c(a.$$.fragment,n),c(t.$$.fragment,n),c(r.$$.fragment,n),$=!0)},o(n){l(a.$$.fragment,n),l(t.$$.fragment,n),l(r.$$.fragment,n),$=!1},d(n){u(a,n),n&&g(s),u(t,n),n&&g(i),u(r,n)}}}function O(n){let a,s;return a=new L({props:{name:"radio-button-group",selected:"default-selected",$$slots:{default:[E]},$$scope:{ctx:n}}}),{c(){p(a.$$.fragment)},l(n){e(a.$$.fragment,n)},m(n,t){o(a,n,t),s=!0},p(n,s){const t={};2&s&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(c(a.$$.fragment,n),s=!0)},o(n){l(a.$$.fragment,n),s=!1},d(n){u(a,n)}}}function D(n){let a,s,t,i,r,$,m,d;return a=new w({props:{disabled:!0,hidden:!0,value:"placeholder-item",text:"Choose an option"}}),t=new w({props:{value:"option-1",text:"Option 1"}}),r=new w({props:{value:"option-2",text:"Option 2"}}),m=new w({props:{value:"option-3",text:"Option 3"}}),{c(){p(a.$$.fragment),s=k(),p(t.$$.fragment),i=k(),p(r.$$.fragment),$=k(),p(m.$$.fragment)},l(n){e(a.$$.fragment,n),s=f(n),e(t.$$.fragment,n),i=f(n),e(r.$$.fragment,n),$=f(n),e(m.$$.fragment,n)},m(n,p){o(a,n,p),x(n,s,p),o(t,n,p),x(n,i,p),o(r,n,p),x(n,$,p),o(m,n,p),d=!0},p:B,i(n){d||(c(a.$$.fragment,n),c(t.$$.fragment,n),c(r.$$.fragment,n),c(m.$$.fragment,n),d=!0)},o(n){l(a.$$.fragment,n),l(t.$$.fragment,n),l(r.$$.fragment,n),l(m.$$.fragment,n),d=!1},d(n){u(a,n),n&&g(s),u(t,n),n&&g(i),u(r,n),n&&g($),u(m,n)}}}function U(n){let a,s;return a=new F({props:{id:"select-1",labelText:"Select menu",value:"placeholder-item",$$slots:{default:[D]},$$scope:{ctx:n}}}),{c(){p(a.$$.fragment)},l(n){e(a.$$.fragment,n)},m(n,t){o(a,n,t),s=!0},p(n,s){const t={};2&s&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(c(a.$$.fragment,n),s=!0)},o(n){l(a.$$.fragment,n),s=!1},d(n){u(a,n)}}}function _(n){let a;return{c(){a=r("Submit")},l(n){a=d(n,"Submit")},m(n,s){x(n,a,s)},d(n){n&&g(a)}}}function A(n){let a,s,t,i,r,$,m,d;return a=new y({props:{legendText:"Checkboxes",$$slots:{default:[I]},$$scope:{ctx:n}}}),t=new y({props:{legendText:"Radio buttons",$$slots:{default:[O]},$$scope:{ctx:n}}}),r=new y({props:{$$slots:{default:[U]},$$scope:{ctx:n}}}),m=new S({props:{type:"submit",$$slots:{default:[_]},$$scope:{ctx:n}}}),{c(){p(a.$$.fragment),s=k(),p(t.$$.fragment),i=k(),p(r.$$.fragment),$=k(),p(m.$$.fragment)},l(n){e(a.$$.fragment,n),s=f(n),e(t.$$.fragment,n),i=f(n),e(r.$$.fragment,n),$=f(n),e(m.$$.fragment,n)},m(n,p){o(a,n,p),x(n,s,p),o(t,n,p),x(n,i,p),o(r,n,p),x(n,$,p),o(m,n,p),d=!0},p(n,s){const p={};2&s&&(p.$$scope={dirty:s,ctx:n}),a.$set(p);const e={};2&s&&(e.$$scope={dirty:s,ctx:n}),t.$set(e);const o={};2&s&&(o.$$scope={dirty:s,ctx:n}),r.$set(o);const c={};2&s&&(c.$$scope={dirty:s,ctx:n}),m.$set(c)},i(n){d||(c(a.$$.fragment,n),c(t.$$.fragment,n),c(r.$$.fragment,n),c(m.$$.fragment,n),d=!0)},o(n){l(a.$$.fragment,n),l(t.$$.fragment,n),l(r.$$.fragment,n),l(m.$$.fragment,n),d=!1},d(n){u(a,n),n&&g(s),u(t,n),n&&g(i),u(r,n),n&&g($),u(m,n)}}}function H(n){let a,s;return a=new G({props:{$$slots:{default:[A]},$$scope:{ctx:n}}}),a.$on("submit",n[0]),{c(){p(a.$$.fragment)},l(n){e(a.$$.fragment,n)},m(n,t){o(a,n,t),s=!0},p(n,s){const t={};2&s&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(c(a.$$.fragment,n),s=!0)},o(n){l(a.$$.fragment,n),s=!1},d(n){u(a,n)}}}function P(n){let a,s,t,p,e,o,c,l,u,v;return{c(){a=i("div"),s=i("ul"),t=i("li"),p=i("a"),e=r("Usage"),o=k(),c=i("ul"),l=i("li"),u=i("a"),v=r("Form"),this.h()},l(n){a=$(n,"DIV",{slot:!0});var i=m(a);s=$(i,"UL",{class:!0});var r=m(s);t=$(r,"LI",{class:!0});var k=m(t);p=$(k,"A",{class:!0,href:!0});var b=m(p);e=d(b,"Usage"),b.forEach(g),o=f(k),c=$(k,"UL",{class:!0});var x=m(c);l=$(x,"LI",{class:!0});var h=m(l);u=$(h,"A",{class:!0,href:!0});var B=m(u);v=d(B,"Form"),B.forEach(g),h.forEach(g),x.forEach(g),k.forEach(g),r.forEach(g),i.forEach(g),this.h()},h(){b(p,"class","bx--link"),b(p,"href","#usage"),b(u,"class","bx--link"),b(u,"href","#form"),b(l,"class","bx--list__item"),b(c,"class","bx--list--unordered bx--list--nested"),b(t,"class","bx--list__item"),b(s,"class","bx--list--unordered"),b(a,"slot","aside")},m(n,i){x(n,a,i),h(a,s),h(s,t),h(t,p),h(p,e),h(t,o),h(t,c),h(c,l),h(l,u),h(u,v)},d(n){n&&g(a)}}}function q(n){let a,s,t,v,B,S;return v=new T({props:{codeRaw:'<script>\n  import {\n    Form,\n    FormGroup,\n    Checkbox,\n    RadioButtonGroup,\n    RadioButton,\n    Select,\n    SelectItem,\n    Button,\n  } from "carbon-components-svelte";\n<\/script>\n\n<Form on:submit>\n  <FormGroup legendText="Checkboxes">\n    <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />\n    <Checkbox id="checkbox-1" labelText="Checkbox Label" />\n    <Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />\n  </FormGroup>\n  <FormGroup legendText="Radio buttons">\n    <RadioButtonGroup name="radio-button-group" selected="default-selected">\n      <RadioButton\n        id="radio-1"\n        value="standard"\n        labelText="Standard Radio Button"\n      />\n      <RadioButton\n        id="radio-2"\n        value="default-selected"\n        labelText="Default Selected Radio Button"\n      />\n      <RadioButton\n        id="radio-4"\n        value="disabled"\n        labelText="Disabled Radio Button"\n        disabled\n      />\n    </RadioButtonGroup>\n  </FormGroup>\n  <FormGroup>\n    <Select id="select-1" labelText="Select menu" value="placeholder-item">\n      <SelectItem\n        disabled\n        hidden\n        value="placeholder-item"\n        text="Choose an option"\n      />\n      <SelectItem value="option-1" text="Option 1" />\n      <SelectItem value="option-2" text="Option 2" />\n      <SelectItem value="option-3" text="Option 3" />\n    </Select>\n  </FormGroup>\n  <Button type="submit">Submit</Button>\n</Form>\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>\n    Form<span class="token punctuation">,</span>\n    FormGroup<span class="token punctuation">,</span>\n    Checkbox<span class="token punctuation">,</span>\n    RadioButtonGroup<span class="token punctuation">,</span>\n    RadioButton<span class="token punctuation">,</span>\n    Select<span class="token punctuation">,</span>\n    SelectItem<span class="token punctuation">,</span>\n    Button<span class="token punctuation">,</span>\n  <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>Form</span> <span class="token attr-name"><span class="token namespace">on:</span>submit</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormGroup</span> <span class="token attr-name">legendText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Checkboxes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Checkbox</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox-0<span class="token punctuation">"</span></span> <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Checkbox Label<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Checkbox</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox-1<span class="token punctuation">"</span></span> <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Checkbox Label<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Checkbox</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox-2<span class="token punctuation">"</span></span> <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Checkbox Label<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormGroup</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormGroup</span> <span class="token attr-name">legendText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Radio buttons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>RadioButtonGroup</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio-button-group<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>default-selected<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>RadioButton</span>\n        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio-1<span class="token punctuation">"</span></span>\n        <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>standard<span class="token punctuation">"</span></span>\n        <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Standard Radio Button<span class="token punctuation">"</span></span>\n      <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>RadioButton</span>\n        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio-2<span class="token punctuation">"</span></span>\n        <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>default-selected<span class="token punctuation">"</span></span>\n        <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Default Selected Radio Button<span class="token punctuation">"</span></span>\n      <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>RadioButton</span>\n        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio-4<span class="token punctuation">"</span></span>\n        <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span>\n        <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Disabled Radio Button<span class="token punctuation">"</span></span>\n        <span class="token attr-name">disabled</span>\n      <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>RadioButtonGroup</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormGroup</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormGroup</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>select-1<span class="token punctuation">"</span></span> <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select menu<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>placeholder-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span>\n        <span class="token attr-name">disabled</span>\n        <span class="token attr-name">hidden</span>\n        <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>placeholder-item<span class="token punctuation">"</span></span>\n        <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Choose an option<span class="token punctuation">"</span></span>\n      <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Option 1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Option 2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Option 3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormGroup</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Form</span><span class="token punctuation">></span></span>\n',$$slots:{default:[H]},$$scope:{ctx:n}}}),{c(){a=i("h3"),s=r("Form"),t=k(),p(v.$$.fragment),B=k(),this.h()},l(n){a=$(n,"H3",{id:!0});var p=m(a);s=d(p,"Form"),p.forEach(g),t=f(n),e(v.$$.fragment,n),B=f(n),this.h()},h(){b(a,"id","form")},m(n,p){x(n,a,p),h(a,s),x(n,t,p),o(v,n,p),x(n,B,p),S=!0},p(n,a){const s={};2&a&&(s.$$scope={dirty:a,ctx:n}),v.$set(s)},i(n){S||(c(v.$$.fragment,n),S=!0)},o(n){l(v.$$.fragment,n),S=!1},d(n){n&&g(a),n&&g(t),u(v,n),n&&g(B)}}}function M(n){let a,s;return a=new R({props:{$$slots:{default:[q],aside:[P]},$$scope:{ctx:n}}}),{c(){p(a.$$.fragment)},l(n){e(a.$$.fragment,n)},m(n,t){o(a,n,t),s=!0},p(n,[s]){const t={};2&s&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(c(a.$$.fragment,n),s=!0)},o(n){l(a.$$.fragment,n),s=!1},d(n){u(a,n)}}}function N(n){return[function(a){v(n,a)}]}export default class extends a{constructor(n){super(),s(this,n,N,M,t,{})}}