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

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