mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
1 line
16 KiB
JavaScript
1 line
16 KiB
JavaScript
let a=document.createElement("style");a.innerHTML="",document.head.appendChild(a);import{S as n,i as s,s as t,v as e,w as p,g as l,j as c,c as o,k as i,p as u,l as r,a as d,o as $,N as k,y as g,x as f,q as m,r as h,m as v,I as x,z as b,A as T,t as R,b as y,d as E,J as w,B as L,a5 as S,e as G,C as D,G as P,h as j,n as I,M as _,a1 as A,a4 as C,a2 as N}from"./index.c724c7a8.js";import"./Button.050f7fa6.js";import"./index.353a6bed.js";import{a as U,C as V,P as B}from"./Preview.cac03ac9.js";import"./ChevronDown16.65632e2b.js";import"./Loading.04ab43b5.js";import"./Column.1268d8a6.js";import"./Content.8eaa1372.js";import"./store.063a32c5.js";function H(a){let n,s,t,L,S,G,D,P,j,I;S=new U({props:{"aria-label":a[4],title:a[4]}});const _=a[11].default,A=e(_,a,a[10],null);let C=[{for:a[5]},a[9]],N={};for(let a=0;a<C.length;a+=1)N=p(N,C[a]);return{c(){n=l("input"),s=c(),t=l("label"),L=l("span"),o(S.$$.fragment),G=c(),D=l("span"),A&&A.c(),this.h()},l(a){n=i(a,"INPUT",{type:!0,id:!0,name:!0,value:!0,checked:!0,tabindex:!0}),s=u(a),t=i(a,"LABEL",{for:!0});var e=r(t);L=i(e,"SPAN",{});var p=r(L);d(S.$$.fragment,p),p.forEach($),G=u(e),D=i(e,"SPAN",{});var l=r(D);A&&A.l(l),l.forEach($),e.forEach($),this.h()},h(){k(n,"type","radio"),k(n,"id",a[5]),k(n,"name",a[6]),n.value=a[2],n.checked=a[0],k(n,"tabindex",a[3]),g(n,"bx--tile-input",!0),g(L,"bx--tile__checkmark",!0),g(D,"bx--tile-content",!0),f(t,N),g(t,"bx--tile",!0),g(t,"bx--tile--selectable",!0),g(t,"bx--tile--is-selected",a[0]),g(t,"bx--tile--light",a[1])},m(e,p){m(e,n,p),m(e,s,p),m(e,t,p),h(t,L),v(S,L,null),h(t,G),h(t,D),A&&A.m(D,null),P=!0,j||(I=[x(n,"change",a[16]),x(n,"change",a[18]),x(n,"keydown",a[17]),x(n,"keydown",a[19]),x(t,"click",a[12]),x(t,"mouseover",a[13]),x(t,"mouseenter",a[14]),x(t,"mouseleave",a[15])],j=!0)},p(a,[s]){(!P||32&s)&&k(n,"id",a[5]),(!P||64&s)&&k(n,"name",a[6]),(!P||4&s)&&(n.value=a[2]),(!P||1&s)&&(n.checked=a[0]),(!P||8&s)&&k(n,"tabindex",a[3]);const e={};16&s&&(e["aria-label"]=a[4]),16&s&&(e.title=a[4]),S.$set(e),A&&A.p&&1024&s&&b(A,_,a,a[10],s,null,null),f(t,N=T(C,[(!P||32&s)&&{for:a[5]},512&s&&a[9]])),g(t,"bx--tile",!0),g(t,"bx--tile--selectable",!0),g(t,"bx--tile--is-selected",a[0]),g(t,"bx--tile--light",a[1])},i(a){P||(R(S.$$.fragment,a),R(A,a),P=!0)},o(a){y(S.$$.fragment,a),y(A,a),P=!1},d(a){a&&$(n),a&&$(s),a&&$(t),E(S),A&&A.d(a),j=!1,w(I)}}}function M(a,n,s){const t=["checked","light","value","tabindex","iconDescription","id","name"];let e,l=L(n,t),{$$slots:c={},$$scope:o}=n,{checked:i=!1}=n,{light:u=!1}=n,{value:r=""}=n,{tabindex:d="0"}=n,{iconDescription:$="Tile checkmark"}=n,{id:k="ccs-"+Math.random().toString(36)}=n,{name:g=""}=n;const{add:f,update:m,selectedValue:h}=S("TileGroup");G(a,h,a=>s(20,e=a)),f({value:r,checked:i});return a.$$set=a=>{n=p(p({},n),D(a)),s(9,l=L(n,t)),"checked"in a&&s(0,i=a.checked),"light"in a&&s(1,u=a.light),"value"in a&&s(2,r=a.value),"tabindex"in a&&s(3,d=a.tabindex),"iconDescription"in a&&s(4,$=a.iconDescription),"id"in a&&s(5,k=a.id),"name"in a&&s(6,g=a.name),"$$scope"in a&&s(10,o=a.$$scope)},a.$$.update=()=>{1048580&a.$$.dirty&&s(0,i=r===e)},[i,u,r,d,$,k,g,m,h,l,o,c,function(n){P(a,n)},function(n){P(a,n)},function(n){P(a,n)},function(n){P(a,n)},function(n){P(a,n)},function(n){P(a,n)},()=>{m(r)},a=>{" "!==a.key&&"Enter"!==a.key||(a.preventDefault(),m(r))}]}class q extends n{constructor(a){super(),s(this,a,M,H,t,{checked:0,light:1,value:2,tabindex:3,iconDescription:4,id:5,name:6})}}function z(a){let n,s;return{c(){n=l("legend"),s=j(a[1]),this.h()},l(t){n=i(t,"LEGEND",{});var e=r(n);s=I(e,a[1]),e.forEach($),this.h()},h(){g(n,"bx--label",!0)},m(a,t){m(a,n,t),h(n,s)},p(a,n){2&n&&_(s,a[1])},d(a){a&&$(n)}}}function F(a){let n,s,t,o,d=a[1]&&z(a);const k=a[6].default,v=e(k,a,a[5],null);let x=[{disabled:a[0]},a[3]],E={};for(let a=0;a<x.length;a+=1)E=p(E,x[a]);return{c(){n=l("fieldset"),d&&d.c(),s=c(),t=l("div"),v&&v.c(),this.h()},l(a){n=i(a,"FIELDSET",{disabled:!0});var e=r(n);d&&d.l(e),s=u(e),t=i(e,"DIV",{});var p=r(t);v&&v.l(p),p.forEach($),e.forEach($),this.h()},h(){f(n,E),g(n,"bx--tile-group",!0)},m(a,e){m(a,n,e),d&&d.m(n,null),h(n,s),h(n,t),v&&v.m(t,null),o=!0},p(a,[t]){a[1]?d?d.p(a,t):(d=z(a),d.c(),d.m(n,s)):d&&(d.d(1),d=null),v&&v.p&&32&t&&b(v,k,a,a[5],t,null,null),f(n,E=T(x,[(!o||1&t)&&{disabled:a[0]},8&t&&a[3]])),g(n,"bx--tile-group",!0)},i(a){o||(R(v,a),o=!0)},o(a){y(v,a),o=!1},d(a){a&&$(n),d&&d.d(),v&&v.d(a)}}}function J(a,n,s){const t=["selected","disabled","legend"];let e,l=L(n,t),{$$slots:c={},$$scope:o}=n,{selected:i}=n,{disabled:u=!1}=n,{legend:r=""}=n;const d=A(),$=N(i);return G(a,$,a=>s(7,e=a)),C("TileGroup",{selectedValue:$,add:({checked:a,value:n})=>{a&&$.set(n)},update:a=>{$.set(a)}}),a.$$set=a=>{n=p(p({},n),D(a)),s(3,l=L(n,t)),"selected"in a&&s(4,i=a.selected),"disabled"in a&&s(0,u=a.disabled),"legend"in a&&s(1,r=a.legend),"$$scope"in a&&s(5,o=a.$$scope)},a.$$.update=()=>{128&a.$$.dirty&&s(4,i=e),128&a.$$.dirty&&d("select",e)},[u,r,$,l,i,o,c]}class K extends n{constructor(a){super(),s(this,a,J,F,t,{selected:4,disabled:0,legend:1})}}function O(a){let n;return{c(){n=j("Lite plan")},l(a){n=I(a,"Lite plan")},m(a,s){m(a,n,s)},d(a){a&&$(n)}}}function Q(a){let n;return{c(){n=j("Standard plan")},l(a){n=I(a,"Standard plan")},m(a,s){m(a,n,s)},d(a){a&&$(n)}}}function W(a){let n;return{c(){n=j("Plus plan")},l(a){n=I(a,"Plus plan")},m(a,s){m(a,n,s)},d(a){a&&$(n)}}}function X(a){let n,s,t,e,p,l;return n=new q({props:{value:"0",checked:!0,$$slots:{default:[O]},$$scope:{ctx:a}}}),t=new q({props:{value:"1",$$slots:{default:[Q]},$$scope:{ctx:a}}}),p=new q({props:{value:"2",$$slots:{default:[W]},$$scope:{ctx:a}}}),{c(){o(n.$$.fragment),s=c(),o(t.$$.fragment),e=c(),o(p.$$.fragment)},l(a){d(n.$$.fragment,a),s=u(a),d(t.$$.fragment,a),e=u(a),d(p.$$.fragment,a)},m(a,c){v(n,a,c),m(a,s,c),v(t,a,c),m(a,e,c),v(p,a,c),l=!0},p(a,s){const e={};1&s&&(e.$$scope={dirty:s,ctx:a}),n.$set(e);const l={};1&s&&(l.$$scope={dirty:s,ctx:a}),t.$set(l);const c={};1&s&&(c.$$scope={dirty:s,ctx:a}),p.$set(c)},i(a){l||(R(n.$$.fragment,a),R(t.$$.fragment,a),R(p.$$.fragment,a),l=!0)},o(a){y(n.$$.fragment,a),y(t.$$.fragment,a),y(p.$$.fragment,a),l=!1},d(a){E(n,a),a&&$(s),E(t,a),a&&$(e),E(p,a)}}}function Y(a){let n,s;return n=new K({props:{legend:"Service pricing tiers",$$slots:{default:[X]},$$scope:{ctx:a}}}),{c(){o(n.$$.fragment)},l(a){d(n.$$.fragment,a)},m(a,t){v(n,a,t),s=!0},p(a,s){const t={};1&s&&(t.$$scope={dirty:s,ctx:a}),n.$set(t)},i(a){s||(R(n.$$.fragment,a),s=!0)},o(a){y(n.$$.fragment,a),s=!1},d(a){E(n,a)}}}function Z(a){let n;return{c(){n=j("Lite plan")},l(a){n=I(a,"Lite plan")},m(a,s){m(a,n,s)},d(a){a&&$(n)}}}function aa(a){let n;return{c(){n=j("Standard plan")},l(a){n=I(a,"Standard plan")},m(a,s){m(a,n,s)},d(a){a&&$(n)}}}function na(a){let n;return{c(){n=j("Plus plan")},l(a){n=I(a,"Plus plan")},m(a,s){m(a,n,s)},d(a){a&&$(n)}}}function sa(a){let n,s,t,e,p,l;return n=new q({props:{value:"0",checked:!0,$$slots:{default:[Z]},$$scope:{ctx:a}}}),t=new q({props:{value:"1",$$slots:{default:[aa]},$$scope:{ctx:a}}}),p=new q({props:{value:"2",$$slots:{default:[na]},$$scope:{ctx:a}}}),{c(){o(n.$$.fragment),s=c(),o(t.$$.fragment),e=c(),o(p.$$.fragment)},l(a){d(n.$$.fragment,a),s=u(a),d(t.$$.fragment,a),e=u(a),d(p.$$.fragment,a)},m(a,c){v(n,a,c),m(a,s,c),v(t,a,c),m(a,e,c),v(p,a,c),l=!0},p(a,s){const e={};1&s&&(e.$$scope={dirty:s,ctx:a}),n.$set(e);const l={};1&s&&(l.$$scope={dirty:s,ctx:a}),t.$set(l);const c={};1&s&&(c.$$scope={dirty:s,ctx:a}),p.$set(c)},i(a){l||(R(n.$$.fragment,a),R(t.$$.fragment,a),R(p.$$.fragment,a),l=!0)},o(a){y(n.$$.fragment,a),y(t.$$.fragment,a),y(p.$$.fragment,a),l=!1},d(a){E(n,a),a&&$(s),E(t,a),a&&$(e),E(p,a)}}}function ta(a){let n,s;return n=new K({props:{legend:"Service pricing tiers",$$slots:{default:[sa]},$$scope:{ctx:a}}}),{c(){o(n.$$.fragment)},l(a){d(n.$$.fragment,a)},m(a,t){v(n,a,t),s=!0},p(a,s){const t={};1&s&&(t.$$scope={dirty:s,ctx:a}),n.$set(t)},i(a){s||(R(n.$$.fragment,a),s=!0)},o(a){y(n.$$.fragment,a),s=!1},d(a){E(n,a)}}}function ea(a){let n,s,t,e,p,o,d,g,f,v,x,b,T,R;return{c(){n=l("div"),s=l("ul"),t=l("li"),e=l("a"),p=j("Usage"),o=c(),d=l("ul"),g=l("li"),f=l("a"),v=j("Default"),x=c(),b=l("li"),T=l("a"),R=j("Light variant"),this.h()},l(a){n=i(a,"DIV",{slot:!0});var l=r(n);s=i(l,"UL",{class:!0});var c=r(s);t=i(c,"LI",{class:!0});var k=r(t);e=i(k,"A",{class:!0,href:!0});var m=r(e);p=I(m,"Usage"),m.forEach($),o=u(k),d=i(k,"UL",{class:!0});var h=r(d);g=i(h,"LI",{class:!0});var y=r(g);f=i(y,"A",{class:!0,href:!0});var E=r(f);v=I(E,"Default"),E.forEach($),y.forEach($),x=u(h),b=i(h,"LI",{class:!0});var w=r(b);T=i(w,"A",{class:!0,href:!0});var L=r(T);R=I(L,"Light variant"),L.forEach($),w.forEach($),h.forEach($),k.forEach($),c.forEach($),l.forEach($),this.h()},h(){k(e,"class","bx--link"),k(e,"href","#usage"),k(f,"class","bx--link"),k(f,"href","#default"),k(g,"class","bx--list__item"),k(T,"class","bx--link"),k(T,"href","#light-variant"),k(b,"class","bx--list__item"),k(d,"class","bx--list--unordered bx--list--nested"),k(t,"class","bx--list__item"),k(s,"class","bx--list--unordered"),k(n,"slot","aside")},m(a,l){m(a,n,l),h(n,s),h(s,t),h(t,e),h(e,p),h(t,o),h(t,d),h(d,g),h(g,f),h(f,v),h(d,x),h(d,b),h(b,T),h(T,R)},d(a){a&&$(n)}}}function pa(a){let n,s,t,e,p,g,f,x,b,T,w;return e=new B({props:{codeRaw:'<script>\n import { TileGroup, RadioTile } from "carbon-components-svelte";\n<\/script>\n\n<TileGroup legend="Service pricing tiers">\n <RadioTile value="0" checked>Lite plan</RadioTile>\n <RadioTile value="1">Standard plan</RadioTile>\n <RadioTile value="2">Plus plan</RadioTile>\n</TileGroup>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation"><</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> TileGroup<span class="token punctuation">,</span> RadioTile <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"></</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TileGroup</span> <span class="token attr-name">legend</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Service pricing tiers<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"><</span>RadioTile</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>Lite plan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>RadioTile</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RadioTile</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Standard plan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>RadioTile</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RadioTile</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Plus plan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>RadioTile</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TileGroup</span><span class="token punctuation">></span></span>\n',$$slots:{default:[Y]},$$scope:{ctx:a}}}),b=new B({props:{codeRaw:'<script>\n import { TileGroup, RadioTile } from "carbon-components-svelte";\n<\/script>\n\n<TileGroup legend="Service pricing tiers">\n <RadioTile value="0" checked>Lite plan</RadioTile>\n <RadioTile value="1">Standard plan</RadioTile>\n <RadioTile value="2">Plus plan</RadioTile>\n</TileGroup>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation"><</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> TileGroup<span class="token punctuation">,</span> RadioTile <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"></</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TileGroup</span> <span class="token attr-name">legend</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Service pricing tiers<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"><</span>RadioTile</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>Lite plan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>RadioTile</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RadioTile</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Standard plan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>RadioTile</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RadioTile</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Plus plan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>RadioTile</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TileGroup</span><span class="token punctuation">></span></span>\n',$$slots:{default:[ta]},$$scope:{ctx:a}}}),{c(){n=l("h3"),s=j("Default"),t=c(),o(e.$$.fragment),p=c(),g=l("h3"),f=j("Light variant"),x=c(),o(b.$$.fragment),T=c(),this.h()},l(a){n=i(a,"H3",{id:!0});var l=r(n);s=I(l,"Default"),l.forEach($),t=u(a),d(e.$$.fragment,a),p=u(a),g=i(a,"H3",{id:!0});var c=r(g);f=I(c,"Light variant"),c.forEach($),x=u(a),d(b.$$.fragment,a),T=u(a),this.h()},h(){k(n,"id","default"),k(g,"id","light-variant")},m(a,l){m(a,n,l),h(n,s),m(a,t,l),v(e,a,l),m(a,p,l),m(a,g,l),h(g,f),m(a,x,l),v(b,a,l),m(a,T,l),w=!0},p(a,n){const s={};1&n&&(s.$$scope={dirty:n,ctx:a}),e.$set(s);const t={};1&n&&(t.$$scope={dirty:n,ctx:a}),b.$set(t)},i(a){w||(R(e.$$.fragment,a),R(b.$$.fragment,a),w=!0)},o(a){y(e.$$.fragment,a),y(b.$$.fragment,a),w=!1},d(a){a&&$(n),a&&$(t),E(e,a),a&&$(p),a&&$(g),a&&$(x),E(b,a),a&&$(T)}}}function la(a){let n,s;return n=new V({props:{$$slots:{default:[pa],aside:[ea]},$$scope:{ctx:a}}}),{c(){o(n.$$.fragment)},l(a){d(n.$$.fragment,a)},m(a,t){v(n,a,t),s=!0},p(a,[s]){const t={};1&s&&(t.$$scope={dirty:s,ctx:a}),n.$set(t)},i(a){s||(R(n.$$.fragment,a),s=!0)},o(a){y(n.$$.fragment,a),s=!1},d(a){E(n,a)}}}export default class extends n{constructor(a){super(),s(this,a,null,la,t,{})}}
|