carbon-components-svelte/assets/ExpandableTile.651748cf.js

let n=document.createElement("style");n.innerHTML="",document.head.appendChild(n);import{S as a,i as s,s as t,v as e,w as o,g as p,j as l,c,k as i,l as r,o as u,p as d,a as h,y as k,N as f,x as g,q as m,r as v,m as $,I as x,z as b,A as E,t as y,b as w,d as T,J as I,B as A,Q as D,C as B,G as C,H as _,K as j,h as V,n as L,a3 as P,Y as H}from"./index.6b674a45.js";import"./Button.f0f995b5.js";import"./index.77bc22b8.js";import{C as M,P as S}from"./Preview.da06bf80.js";import{C as U}from"./ChevronDown16.5983f6dc.js";import"./Loading.1494bed2.js";import"./Column.6ef18044.js";import"./Content.7baad37e.js";import"./store.4e2c42a1.js";const N=n=>({}),R=n=>({}),q=n=>({}),z=n=>({});function G(n){let a,s,t,A,D,B,C,_,j,V,L,P,H,M,S;const G=n[13].above,J=e(G,n,n[12],z);C=new U({});const K=n[13].below,O=e(K,n,n[12],R);let Q=[{id:n[8]},{tabindex:n[7]},n[11],{style:P=n[0]?n[11].style:`${n[11].style}; max-height: ${n[1]+n[2]}px`}],Y={};for(let n=0;n<Q.length;n+=1)Y=o(Y,Q[n]);return{c(){a=p("div"),s=p("div"),t=p("div"),A=p("span"),J&&J.c(),D=l(),B=p("button"),c(C.$$.fragment),j=l(),V=p("div"),L=p("span"),O&&O.c(),this.h()},l(n){a=i(n,"DIV",{id:!0,tabindex:!0,style:!0});var e=r(a);s=i(e,"DIV",{});var o=r(s);t=i(o,"DIV",{});var p=r(t);A=i(p,"SPAN",{});var l=r(A);J&&J.l(l),l.forEach(u),p.forEach(u),D=d(o),B=i(o,"BUTTON",{"aria-expanded":!0,"aria-label":!0});var c=r(B);h(C.$$.fragment,c),c.forEach(u),j=d(o),V=i(o,"DIV",{});var k=r(V);L=i(k,"SPAN",{});var f=r(L);O&&O.l(f),f.forEach(u),k.forEach(u),o.forEach(u),e.forEach(u),this.h()},h(){k(A,"bx--tile-content__above-the-fold",!0),k(t,"bx--tile-content",!0),f(B,"aria-expanded",n[0]),f(B,"aria-label",_=n[0]?n[6]:n[5]),k(B,"bx--tile__chevron",!0),k(L,"bx--tile-content__below-the-fold",!0),k(V,"bx--tile-content",!0),g(a,Y),k(a,"bx--tile",!0),k(a,"bx--tile--expandable",!0),k(a,"bx--tile--is-expanded",n[0]),k(a,"bx--tile--light",n[4])},m(e,o){m(e,a,o),v(a,s),v(s,t),v(t,A),J&&J.m(A,null),n[27](t),v(s,D),v(s,B),$(C,B,null),v(s,j),v(s,V),v(V,L),O&&O.m(L,null),n[28](s),n[29](a),H=!0,M||(S=[x(A,"click",n[23]),x(A,"mouseover",n[24]),x(A,"mouseenter",n[25]),x(A,"mouseleave",n[26]),x(L,"click",n[19]),x(L,"mouseover",n[20]),x(L,"mouseenter",n[21]),x(L,"mouseleave",n[22]),x(a,"click",n[14]),x(a,"click",n[30]),x(a,"keypress",n[15]),x(a,"keypress",n[31]),x(a,"mouseover",n[16]),x(a,"mouseenter",n[17]),x(a,"mouseleave",n[18])],M=!0)},p(n,s){J&&J.p&&4096&s[0]&&b(J,G,n,n[12],s,q,z),(!H||1&s[0])&&f(B,"aria-expanded",n[0]),(!H||97&s[0]&&_!==(_=n[0]?n[6]:n[5]))&&f(B,"aria-label",_),O&&O.p&&4096&s[0]&&b(O,K,n,n[12],s,N,R),g(a,Y=E(Q,[(!H||256&s[0])&&{id:n[8]},(!H||128&s[0])&&{tabindex:n[7]},2048&s[0]&&n[11],(!H||2055&s[0]&&P!==(P=n[0]?n[11].style:`${n[11].style}; max-height: ${n[1]+n[2]}px`))&&{style:P}])),k(a,"bx--tile",!0),k(a,"bx--tile--expandable",!0),k(a,"bx--tile--is-expanded",n[0]),k(a,"bx--tile--light",n[4])},i(n){H||(y(J,n),y(C.$$.fragment,n),y(O,n),H=!0)},o(n){w(J,n),w(C.$$.fragment,n),w(O,n),H=!1},d(s){s&&u(a),J&&J.d(s),n[27](null),T(C),O&&O.d(s),n[28](null),n[29](null),M=!1,I(S)}}}function J(n,a,s){const t=["expanded","light","tileMaxHeight","tilePadding","tileCollapsedIconText","tileExpandedIconText","tabindex","id","ref"];let e=A(a,t),{$$slots:p={},$$scope:l}=a,{expanded:c=!1}=a,{light:i=!1}=a,{tileMaxHeight:r=0}=a,{tilePadding:u=0}=a,{tileCollapsedIconText:d="Interact to expand Tile"}=a,{tileExpandedIconText:h="Interact to collapse Tile"}=a,{tabindex:k="0"}=a,{id:f="ccs-"+Math.random().toString(36)}=a,{ref:g=null}=a,m=null,v=null;D(()=>{0===r&&s(1,r=v.getBoundingClientRect().height);const n=getComputedStyle(g);s(2,u=parseInt(n.getPropertyValue("padding-top"),10)+parseInt(n.getPropertyValue("padding-bottom"),10))});return n.$$set=n=>{a=o(o({},a),B(n)),s(11,e=A(a,t)),"expanded"in n&&s(0,c=n.expanded),"light"in n&&s(4,i=n.light),"tileMaxHeight"in n&&s(1,r=n.tileMaxHeight),"tilePadding"in n&&s(2,u=n.tilePadding),"tileCollapsedIconText"in n&&s(5,d=n.tileCollapsedIconText),"tileExpandedIconText"in n&&s(6,h=n.tileExpandedIconText),"tabindex"in n&&s(7,k=n.tabindex),"id"in n&&s(8,f=n.id),"ref"in n&&s(3,g=n.ref),"$$scope"in n&&s(12,l=n.$$scope)},[c,r,u,g,i,d,h,k,f,m,v,e,l,p,function(a){C(n,a)},function(a){C(n,a)},function(a){C(n,a)},function(a){C(n,a)},function(a){C(n,a)},function(a){C(n,a)},function(a){C(n,a)},function(a){C(n,a)},function(a){C(n,a)},function(a){C(n,a)},function(a){C(n,a)},function(a){C(n,a)},function(a){C(n,a)},function(n){_[n?"unshift":"push"](()=>{v=n,s(10,v)})},function(n){_[n?"unshift":"push"](()=>{m=n,s(9,m)})},function(n){_[n?"unshift":"push"](()=>{g=n,s(3,g)})},()=>{s(0,c=!c)},n=>{" "!==n.key&&"Enter"!==n.key||(n.preventDefault(),s(0,c=!c))}]}class K extends a{constructor(n){super(),s(this,n,J,G,t,{expanded:0,light:4,tileMaxHeight:1,tilePadding:2,tileCollapsedIconText:5,tileExpandedIconText:6,tabindex:7,id:8,ref:3},[-1,-1])}}function O(n){let a,s;return{c(){a=p("div"),s=V("Above the fold content here"),this.h()},l(n){a=i(n,"DIV",{slot:!0,style:!0});var t=r(a);s=L(t,"Above the fold content here"),t.forEach(u),this.h()},h(){f(a,"slot","above"),P(a,"height","10rem")},m(n,t){m(n,a,t),v(a,s)},d(n){n&&u(a)}}}function Q(n){let a,s;return{c(){a=p("div"),s=V("Below the fold content here"),this.h()},l(n){a=i(n,"DIV",{slot:!0,style:!0});var t=r(a);s=L(t,"Below the fold content here"),t.forEach(u),this.h()},h(){f(a,"slot","below"),P(a,"height","10rem")},m(n,t){m(n,a,t),v(a,s)},d(n){n&&u(a)}}}function Y(n){let a;return{c(){a=l()},l(n){a=d(n)},m(n,s){m(n,a,s)},p:H,d(n){n&&u(a)}}}function F(n){let a,s;return a=new K({props:{$$slots:{default:[Y],below:[Q],above:[O]},$$scope:{ctx:n}}}),{c(){c(a.$$.fragment)},l(n){h(a.$$.fragment,n)},m(n,t){$(a,n,t),s=!0},p(n,s){const t={};1&s&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(y(a.$$.fragment,n),s=!0)},o(n){w(a.$$.fragment,n),s=!1},d(n){T(a,n)}}}function W(n){let a,s;return{c(){a=p("div"),s=V("Above the fold content here"),this.h()},l(n){a=i(n,"DIV",{slot:!0,style:!0});var t=r(a);s=L(t,"Above the fold content here"),t.forEach(u),this.h()},h(){f(a,"slot","above"),P(a,"height","10rem")},m(n,t){m(n,a,t),v(a,s)},d(n){n&&u(a)}}}function X(n){let a,s;return{c(){a=p("div"),s=V("Below the fold content here"),this.h()},l(n){a=i(n,"DIV",{slot:!0,style:!0});var t=r(a);s=L(t,"Below the fold content here"),t.forEach(u),this.h()},h(){f(a,"slot","below"),P(a,"height","10rem")},m(n,t){m(n,a,t),v(a,s)},d(n){n&&u(a)}}}function Z(n){let a;return{c(){a=l()},l(n){a=d(n)},m(n,s){m(n,a,s)},p:H,d(n){n&&u(a)}}}function nn(n){let a,s;return a=new K({props:{expanded:!0,$$slots:{default:[Z],below:[X],above:[W]},$$scope:{ctx:n}}}),{c(){c(a.$$.fragment)},l(n){h(a.$$.fragment,n)},m(n,t){$(a,n,t),s=!0},p(n,s){const t={};1&s&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(y(a.$$.fragment,n),s=!0)},o(n){w(a.$$.fragment,n),s=!1},d(n){T(a,n)}}}function an(n){let a,s;return{c(){a=p("div"),s=V("Above the fold content here"),this.h()},l(n){a=i(n,"DIV",{slot:!0,style:!0});var t=r(a);s=L(t,"Above the fold content here"),t.forEach(u),this.h()},h(){f(a,"slot","above"),P(a,"height","10rem")},m(n,t){m(n,a,t),v(a,s)},d(n){n&&u(a)}}}function sn(n){let a,s;return{c(){a=p("div"),s=V("Below the fold content here"),this.h()},l(n){a=i(n,"DIV",{slot:!0,style:!0});var t=r(a);s=L(t,"Below the fold content here"),t.forEach(u),this.h()},h(){f(a,"slot","below"),P(a,"height","10rem")},m(n,t){m(n,a,t),v(a,s)},d(n){n&&u(a)}}}function tn(n){let a;return{c(){a=l()},l(n){a=d(n)},m(n,s){m(n,a,s)},p:H,d(n){n&&u(a)}}}function en(n){let a,s;return a=new K({props:{light:!0,$$slots:{default:[tn],below:[sn],above:[an]},$$scope:{ctx:n}}}),{c(){c(a.$$.fragment)},l(n){h(a.$$.fragment,n)},m(n,t){$(a,n,t),s=!0},p(n,s){const t={};1&s&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(y(a.$$.fragment,n),s=!0)},o(n){w(a.$$.fragment,n),s=!1},d(n){T(a,n)}}}function on(n){let a,s,t,e,o,c,h,k,g,$,x,b,E,y,w,T,I,A;return{c(){a=p("div"),s=p("ul"),t=p("li"),e=p("a"),o=V("Usage"),c=l(),h=p("ul"),k=p("li"),g=p("a"),$=V("Default (unexpanded)"),x=l(),b=p("li"),E=p("a"),y=V("Expanded"),w=l(),T=p("li"),I=p("a"),A=V("Light variant"),this.h()},l(n){a=i(n,"DIV",{slot:!0});var p=r(a);s=i(p,"UL",{class:!0});var l=r(s);t=i(l,"LI",{class:!0});var f=r(t);e=i(f,"A",{class:!0,href:!0});var m=r(e);o=L(m,"Usage"),m.forEach(u),c=d(f),h=i(f,"UL",{class:!0});var v=r(h);k=i(v,"LI",{class:!0});var D=r(k);g=i(D,"A",{class:!0,href:!0});var B=r(g);$=L(B,"Default (unexpanded)"),B.forEach(u),D.forEach(u),x=d(v),b=i(v,"LI",{class:!0});var C=r(b);E=i(C,"A",{class:!0,href:!0});var _=r(E);y=L(_,"Expanded"),_.forEach(u),C.forEach(u),w=d(v),T=i(v,"LI",{class:!0});var j=r(T);I=i(j,"A",{class:!0,href:!0});var V=r(I);A=L(V,"Light variant"),V.forEach(u),j.forEach(u),v.forEach(u),f.forEach(u),l.forEach(u),p.forEach(u),this.h()},h(){f(e,"class","bx--link"),f(e,"href","#usage"),f(g,"class","bx--link"),f(g,"href","#default-unexpanded"),f(k,"class","bx--list__item"),f(E,"class","bx--link"),f(E,"href","#expanded"),f(b,"class","bx--list__item"),f(I,"class","bx--link"),f(I,"href","#light-variant"),f(T,"class","bx--list__item"),f(h,"class","bx--list--unordered bx--list--nested"),f(t,"class","bx--list__item"),f(s,"class","bx--list--unordered"),f(a,"slot","aside")},m(n,p){m(n,a,p),v(a,s),v(s,t),v(t,e),v(e,o),v(t,c),v(t,h),v(h,k),v(k,g),v(g,$),v(h,x),v(h,b),v(b,E),v(E,y),v(h,w),v(h,T),v(T,I),v(I,A)},d(n){n&&u(a)}}}function pn(n){let a,s,t,e,o,k,g,x,b,E,I,A,D,B,C,_;return e=new S({props:{codeRaw:'<script>\n  import { ExpandableTile } from "carbon-components-svelte";\n<\/script>\n\n<ExpandableTile>\n  <div slot="above" style="height: 10rem">Above the fold content here</div>\n  <div slot="below" style="height: 10rem">Below the fold content here</div>\n</ExpandableTile>\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> ExpandableTile <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>ExpandableTile</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 attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>above<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>height: 10rem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Above the fold content here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</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 attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>below<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>height: 10rem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Below the fold content here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ExpandableTile</span><span class="token punctuation">></span></span>\n',$$slots:{default:[F]},$$scope:{ctx:n}}}),b=new S({props:{codeRaw:'<script>\n  import { ExpandableTile } from "carbon-components-svelte";\n<\/script>\n\n<ExpandableTile expanded>\n  <div slot="above" style="height: 10rem">Above the fold content here</div>\n  <div slot="below" style="height: 10rem">Below the fold content here</div>\n</ExpandableTile>\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> ExpandableTile <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>ExpandableTile</span> <span class="token attr-name">expanded</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 attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>above<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>height: 10rem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Above the fold content here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</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 attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>below<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>height: 10rem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Below the fold content here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ExpandableTile</span><span class="token punctuation">></span></span>\n',$$slots:{default:[nn]},$$scope:{ctx:n}}}),B=new S({props:{codeRaw:'<script>\n  import { ExpandableTile } from "carbon-components-svelte";\n<\/script>\n\n<ExpandableTile light>\n  <div slot="above" style="height: 10rem">Above the fold content here</div>\n  <div slot="below" style="height: 10rem">Below the fold content here</div>\n</ExpandableTile>\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> ExpandableTile <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>ExpandableTile</span> <span class="token attr-name">light</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 attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>above<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>height: 10rem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Above the fold content here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</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 attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>below<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>height: 10rem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Below the fold content here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ExpandableTile</span><span class="token punctuation">></span></span>\n',$$slots:{default:[en]},$$scope:{ctx:n}}}),{c(){a=p("h3"),s=V("Default (unexpanded)"),t=l(),c(e.$$.fragment),o=l(),k=p("h3"),g=V("Expanded"),x=l(),c(b.$$.fragment),E=l(),I=p("h3"),A=V("Light variant"),D=l(),c(B.$$.fragment),C=l(),this.h()},l(n){a=i(n,"H3",{id:!0});var p=r(a);s=L(p,"Default (unexpanded)"),p.forEach(u),t=d(n),h(e.$$.fragment,n),o=d(n),k=i(n,"H3",{id:!0});var l=r(k);g=L(l,"Expanded"),l.forEach(u),x=d(n),h(b.$$.fragment,n),E=d(n),I=i(n,"H3",{id:!0});var c=r(I);A=L(c,"Light variant"),c.forEach(u),D=d(n),h(B.$$.fragment,n),C=d(n),this.h()},h(){f(a,"id","default-unexpanded"),f(k,"id","expanded"),f(I,"id","light-variant")},m(n,p){m(n,a,p),v(a,s),m(n,t,p),$(e,n,p),m(n,o,p),m(n,k,p),v(k,g),m(n,x,p),$(b,n,p),m(n,E,p),m(n,I,p),v(I,A),m(n,D,p),$(B,n,p),m(n,C,p),_=!0},p(n,a){const s={};1&a&&(s.$$scope={dirty:a,ctx:n}),e.$set(s);const t={};1&a&&(t.$$scope={dirty:a,ctx:n}),b.$set(t);const o={};1&a&&(o.$$scope={dirty:a,ctx:n}),B.$set(o)},i(n){_||(y(e.$$.fragment,n),y(b.$$.fragment,n),y(B.$$.fragment,n),_=!0)},o(n){w(e.$$.fragment,n),w(b.$$.fragment,n),w(B.$$.fragment,n),_=!1},d(n){n&&u(a),n&&u(t),T(e,n),n&&u(o),n&&u(k),n&&u(x),T(b,n),n&&u(E),n&&u(I),n&&u(D),T(B,n),n&&u(C)}}}function ln(n){let a,s;const t=[cn];let e={$$slots:{default:[pn],aside:[on]},$$scope:{ctx:n}};for(let n=0;n<t.length;n+=1)e=o(e,t[n]);return a=new M({props:e}),{c(){c(a.$$.fragment)},l(n){h(a.$$.fragment,n)},m(n,t){$(a,n,t),s=!0},p(n,[s]){const e=0&s?E(t,[j(cn)]):{};1&s&&(e.$$scope={dirty:s,ctx:n}),a.$set(e)},i(n){s||(y(a.$$.fragment,n),s=!0)},o(n){w(a.$$.fragment,n),s=!1},d(n){T(a,n)}}}const cn={source:"Tile/ExpandableTile.svelte"};export default class extends a{constructor(n){super(),s(this,n,null,ln,t,{})}}export{cn as metadata};