carbon-components-svelte/assets/SelectableTile.de464bda.js

let s=document.createElement("style");s.innerHTML="",document.head.appendChild(s);import{S as a,i as t,s as n,v as e,w as l,g as c,j as p,c as i,k as o,p as r,l as u,a as $,o as k,N as d,y as g,x as f,q as m,r as b,m as h,I as v,aa as x,z as T,A as S,t as M,b as y,d as w,J as E,B as L,a1 as j,C as D,G as I,H as _,h as A,n as C}from"./index.4c25e3ff.js";import"./Button.b18180bc.js";import"./index.1d7db40c.js";import{a as P,C as U,P as H}from"./Preview.d9075994.js";import"./ChevronDown16.e1f7710f.js";import"./Loading.3d142f94.js";import"./Column.e0763a34.js";import"./Content.ef39761a.js";import"./store.e0a281c6.js";function N(s){let a,t,n,L,j,D,I,_,A,C;j=new P({props:{"aria-label":s[6],title:s[6]}});const U=s[11].default,H=e(U,s,s[10],null);let N=[{for:s[7]},{tabindex:s[5]},s[9]],B={};for(let s=0;s<N.length;s+=1)B=l(B,N[s]);return{c(){a=c("input"),t=p(),n=c("label"),L=c("span"),i(j.$$.fragment),D=p(),I=c("span"),H&&H.c(),this.h()},l(s){a=o(s,"INPUT",{type:!0,tabindex:!0,checked:!0,id:!0,value:!0,name:!0,title:!0}),t=r(s),n=o(s,"LABEL",{for:!0,tabindex:!0});var e=u(n);L=o(e,"SPAN",{});var l=u(L);$(j.$$.fragment,l),l.forEach(k),D=r(e),I=o(e,"SPAN",{});var c=u(I);H&&H.l(c),c.forEach(k),e.forEach(k),this.h()},h(){d(a,"type","checkbox"),d(a,"tabindex","-1"),a.checked=s[0],d(a,"id",s[7]),a.value=s[4],d(a,"name",s[8]),d(a,"title",s[3]),g(a,"bx--tile-input",!0),g(L,"bx--tile__checkmark",!0),g(I,"bx--tile-content",!0),f(n,B),g(n,"bx--tile",!0),g(n,"bx--tile--selectable",!0),g(n,"bx--tile--is-selected",s[0]),g(n,"bx--tile--light",s[2])},m(e,l){m(e,a,l),s[17](a),m(e,t,l),m(e,n,l),b(n,L),h(j,L,null),b(n,D),b(n,I),H&&H.m(I,null),_=!0,A||(C=[v(n,"click",s[12]),v(n,"click",x(s[18])),v(n,"mouseover",s[13]),v(n,"mouseenter",s[14]),v(n,"mouseleave",s[15]),v(n,"keydown",s[16]),v(n,"keydown",s[19])],A=!0)},p(s,[t]){(!_||1&t)&&(a.checked=s[0]),(!_||128&t)&&d(a,"id",s[7]),(!_||16&t)&&(a.value=s[4]),(!_||256&t)&&d(a,"name",s[8]),(!_||8&t)&&d(a,"title",s[3]);const e={};64&t&&(e["aria-label"]=s[6]),64&t&&(e.title=s[6]),j.$set(e),H&&H.p&&1024&t&&T(H,U,s,s[10],t,null,null),f(n,B=S(N,[(!_||128&t)&&{for:s[7]},(!_||32&t)&&{tabindex:s[5]},512&t&&s[9]])),g(n,"bx--tile",!0),g(n,"bx--tile--selectable",!0),g(n,"bx--tile--is-selected",s[0]),g(n,"bx--tile--light",s[2])},i(s){_||(M(j.$$.fragment,s),M(H,s),_=!0)},o(s){y(j.$$.fragment,s),y(H,s),_=!1},d(e){e&&k(a),s[17](null),e&&k(t),e&&k(n),w(j),H&&H.d(e),A=!1,E(C)}}}function B(s,a,t){const n=["selected","light","title","value","tabindex","iconDescription","id","name","ref"];let e=L(a,n),{$$slots:c={},$$scope:p}=a,{selected:i=!1}=a,{light:o=!1}=a,{title:r="title"}=a,{value:u="value"}=a,{tabindex:$="0"}=a,{iconDescription:k="Tile checkmark"}=a,{id:d="ccs-"+Math.random().toString(36)}=a,{name:g=""}=a,{ref:f=null}=a;const m=j();return s.$$set=s=>{a=l(l({},a),D(s)),t(9,e=L(a,n)),"selected"in s&&t(0,i=s.selected),"light"in s&&t(2,o=s.light),"title"in s&&t(3,r=s.title),"value"in s&&t(4,u=s.value),"tabindex"in s&&t(5,$=s.tabindex),"iconDescription"in s&&t(6,k=s.iconDescription),"id"in s&&t(7,d=s.id),"name"in s&&t(8,g=s.name),"ref"in s&&t(1,f=s.ref),"$$scope"in s&&t(10,p=s.$$scope)},s.$$.update=()=>{129&s.$$.dirty&&m(i?"select":"deselect",d)},[i,f,o,r,u,$,k,d,g,e,p,c,function(a){I(s,a)},function(a){I(s,a)},function(a){I(s,a)},function(a){I(s,a)},function(a){I(s,a)},function(s){_[s?"unshift":"push"](()=>{f=s,t(1,f)})},()=>{t(0,i=!i)},s=>{" "!==s.key&&"Enter"!==s.key||(s.preventDefault(),t(0,i=!i))}]}class V extends a{constructor(s){super(),t(this,s,B,N,n,{selected:0,light:2,title:3,value:4,tabindex:5,iconDescription:6,id:7,name:8,ref:1})}}function R(s){let a;return{c(){a=A("Multi-select Tile")},l(s){a=C(s,"Multi-select Tile")},m(s,t){m(s,a,t)},d(s){s&&k(a)}}}function q(s){let a;return{c(){a=A("Multi-select Tile")},l(s){a=C(s,"Multi-select Tile")},m(s,t){m(s,a,t)},d(s){s&&k(a)}}}function z(s){let a;return{c(){a=A("Multi-select Tile")},l(s){a=C(s,"Multi-select Tile")},m(s,t){m(s,a,t)},d(s){s&&k(a)}}}function G(s){let a,t,n,e,l,g,f;return t=new V({props:{selected:!0,$$slots:{default:[R]},$$scope:{ctx:s}}}),e=new V({props:{selected:!0,$$slots:{default:[q]},$$scope:{ctx:s}}}),g=new V({props:{$$slots:{default:[z]},$$scope:{ctx:s}}}),{c(){a=c("div"),i(t.$$.fragment),n=p(),i(e.$$.fragment),l=p(),i(g.$$.fragment),this.h()},l(s){a=o(s,"DIV",{role:!0,"aria-label":!0});var c=u(a);$(t.$$.fragment,c),n=r(c),$(e.$$.fragment,c),l=r(c),$(g.$$.fragment,c),c.forEach(k),this.h()},h(){d(a,"role","group"),d(a,"aria-label","selectable tiles")},m(s,c){m(s,a,c),h(t,a,null),b(a,n),h(e,a,null),b(a,l),h(g,a,null),f=!0},p(s,a){const n={};1&a&&(n.$$scope={dirty:a,ctx:s}),t.$set(n);const l={};1&a&&(l.$$scope={dirty:a,ctx:s}),e.$set(l);const c={};1&a&&(c.$$scope={dirty:a,ctx:s}),g.$set(c)},i(s){f||(M(t.$$.fragment,s),M(e.$$.fragment,s),M(g.$$.fragment,s),f=!0)},o(s){y(t.$$.fragment,s),y(e.$$.fragment,s),y(g.$$.fragment,s),f=!1},d(s){s&&k(a),w(t),w(e),w(g)}}}function J(s){let a;return{c(){a=A("Multi-select Tile")},l(s){a=C(s,"Multi-select Tile")},m(s,t){m(s,a,t)},d(s){s&&k(a)}}}function F(s){let a;return{c(){a=A("Multi-select Tile")},l(s){a=C(s,"Multi-select Tile")},m(s,t){m(s,a,t)},d(s){s&&k(a)}}}function K(s){let a;return{c(){a=A("Multi-select Tile")},l(s){a=C(s,"Multi-select Tile")},m(s,t){m(s,a,t)},d(s){s&&k(a)}}}function O(s){let a,t,n,e,l,g,f;return t=new V({props:{light:!0,selected:!0,$$slots:{default:[J]},$$scope:{ctx:s}}}),e=new V({props:{light:!0,selected:!0,$$slots:{default:[F]},$$scope:{ctx:s}}}),g=new V({props:{light:!0,$$slots:{default:[K]},$$scope:{ctx:s}}}),{c(){a=c("div"),i(t.$$.fragment),n=p(),i(e.$$.fragment),l=p(),i(g.$$.fragment),this.h()},l(s){a=o(s,"DIV",{role:!0,"aria-label":!0});var c=u(a);$(t.$$.fragment,c),n=r(c),$(e.$$.fragment,c),l=r(c),$(g.$$.fragment,c),c.forEach(k),this.h()},h(){d(a,"role","group"),d(a,"aria-label","selectable tiles")},m(s,c){m(s,a,c),h(t,a,null),b(a,n),h(e,a,null),b(a,l),h(g,a,null),f=!0},p(s,a){const n={};1&a&&(n.$$scope={dirty:a,ctx:s}),t.$set(n);const l={};1&a&&(l.$$scope={dirty:a,ctx:s}),e.$set(l);const c={};1&a&&(c.$$scope={dirty:a,ctx:s}),g.$set(c)},i(s){f||(M(t.$$.fragment,s),M(e.$$.fragment,s),M(g.$$.fragment,s),f=!0)},o(s){y(t.$$.fragment,s),y(e.$$.fragment,s),y(g.$$.fragment,s),f=!1},d(s){s&&k(a),w(t),w(e),w(g)}}}function Q(s){let a,t,n,e,l,i,$,g,f,h,v,x,T,S;return{c(){a=c("div"),t=c("ul"),n=c("li"),e=c("a"),l=A("Usage"),i=p(),$=c("ul"),g=c("li"),f=c("a"),h=A("Multi-selectable tiles"),v=p(),x=c("li"),T=c("a"),S=A("Light variant"),this.h()},l(s){a=o(s,"DIV",{slot:!0});var c=u(a);t=o(c,"UL",{class:!0});var p=u(t);n=o(p,"LI",{class:!0});var d=u(n);e=o(d,"A",{class:!0,href:!0});var m=u(e);l=C(m,"Usage"),m.forEach(k),i=r(d),$=o(d,"UL",{class:!0});var b=u($);g=o(b,"LI",{class:!0});var M=u(g);f=o(M,"A",{class:!0,href:!0});var y=u(f);h=C(y,"Multi-selectable tiles"),y.forEach(k),M.forEach(k),v=r(b),x=o(b,"LI",{class:!0});var w=u(x);T=o(w,"A",{class:!0,href:!0});var E=u(T);S=C(E,"Light variant"),E.forEach(k),w.forEach(k),b.forEach(k),d.forEach(k),p.forEach(k),c.forEach(k),this.h()},h(){d(e,"class","bx--link"),d(e,"href","#usage"),d(f,"class","bx--link"),d(f,"href","#multi-selectable-tiles"),d(g,"class","bx--list__item"),d(T,"class","bx--link"),d(T,"href","#light-variant"),d(x,"class","bx--list__item"),d($,"class","bx--list--unordered bx--list--nested"),d(n,"class","bx--list__item"),d(t,"class","bx--list--unordered"),d(a,"slot","aside")},m(s,c){m(s,a,c),b(a,t),b(t,n),b(n,e),b(e,l),b(n,i),b(n,$),b($,g),b(g,f),b(f,h),b($,v),b($,x),b(x,T),b(T,S)},d(s){s&&k(a)}}}function W(s){let a,t,n,e,l,g,f,v,x,T,S;return e=new H({props:{codeRaw:'<script>\n  import { SelectableTile } from "carbon-components-svelte";\n<\/script>\n\n<div role="group" aria-label="selectable tiles">\n  <SelectableTile selected>Multi-select Tile</SelectableTile>\n  <SelectableTile selected>Multi-select Tile</SelectableTile>\n  <SelectableTile>Multi-select Tile</SelectableTile>\n</div>\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> SelectableTile <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>div</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>selectable tiles<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>SelectableTile</span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>Multi-select Tile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SelectableTile</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectableTile</span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>Multi-select Tile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SelectableTile</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectableTile</span><span class="token punctuation">></span></span>Multi-select Tile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SelectableTile</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n',$$slots:{default:[G]},$$scope:{ctx:s}}}),x=new H({props:{codeRaw:'<script>\n  import { SelectableTile } from "carbon-components-svelte";\n<\/script>\n\n<div role="group" aria-label="selectable tiles">\n  <SelectableTile light selected>Multi-select Tile</SelectableTile>\n  <SelectableTile light selected>Multi-select Tile</SelectableTile>\n  <SelectableTile light>Multi-select Tile</SelectableTile>\n</div>\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> SelectableTile <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>div</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>selectable tiles<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>SelectableTile</span> <span class="token attr-name">light</span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>Multi-select Tile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SelectableTile</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectableTile</span> <span class="token attr-name">light</span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>Multi-select Tile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SelectableTile</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectableTile</span> <span class="token attr-name">light</span><span class="token punctuation">></span></span>Multi-select Tile<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SelectableTile</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n',$$slots:{default:[O]},$$scope:{ctx:s}}}),{c(){a=c("h3"),t=A("Multi-selectable tiles"),n=p(),i(e.$$.fragment),l=p(),g=c("h3"),f=A("Light variant"),v=p(),i(x.$$.fragment),T=p(),this.h()},l(s){a=o(s,"H3",{id:!0});var c=u(a);t=C(c,"Multi-selectable tiles"),c.forEach(k),n=r(s),$(e.$$.fragment,s),l=r(s),g=o(s,"H3",{id:!0});var p=u(g);f=C(p,"Light variant"),p.forEach(k),v=r(s),$(x.$$.fragment,s),T=r(s),this.h()},h(){d(a,"id","multi-selectable-tiles"),d(g,"id","light-variant")},m(s,c){m(s,a,c),b(a,t),m(s,n,c),h(e,s,c),m(s,l,c),m(s,g,c),b(g,f),m(s,v,c),h(x,s,c),m(s,T,c),S=!0},p(s,a){const t={};1&a&&(t.$$scope={dirty:a,ctx:s}),e.$set(t);const n={};1&a&&(n.$$scope={dirty:a,ctx:s}),x.$set(n)},i(s){S||(M(e.$$.fragment,s),M(x.$$.fragment,s),S=!0)},o(s){y(e.$$.fragment,s),y(x.$$.fragment,s),S=!1},d(s){s&&k(a),s&&k(n),w(e,s),s&&k(l),s&&k(g),s&&k(v),w(x,s),s&&k(T)}}}function X(s){let a,t;return a=new U({props:{$$slots:{default:[W],aside:[Q]},$$scope:{ctx:s}}}),{c(){i(a.$$.fragment)},l(s){$(a.$$.fragment,s)},m(s,n){h(a,s,n),t=!0},p(s,[t]){const n={};1&t&&(n.$$scope={dirty:t,ctx:s}),a.$set(n)},i(s){t||(M(a.$$.fragment,s),t=!0)},o(s){y(a.$$.fragment,s),t=!1},d(s){w(a,s)}}}export default class extends a{constructor(s){super(),t(this,s,null,X,n,{})}}