npm - @mozaic-ds/web-components - Versions diffs - 0.12.0 → 0.14.0-beta.0 - Mend

@mozaic-ds/web-components 0.12.0 → 0.14.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (501) hide show

package/public/bricoman/components/card/Card.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{S as t,i,a as o,_ as e,b as r,f as m,s as n,c,e as l,d as a,n as d,$ as s,g as b,h,j as u,m as g,o as f,p,a0 as x,q as _,K as w,Z as k}from"../../index-c33b3772.js";function v(t){let i,o,e=`<${t[6]} class="mc-card__subtitle">${t[5]}</${t[6]}>`;return{c(){i=new k(!1),o=w(),i.a=o},m(t,m){i.m(e,t,m),r(t,o,m)},p(t,o){96&o&&e!==(e=`<${t[6]} class="mc-card__subtitle">${t[5]}</${t[6]}>`)&&i.p(e)},d(t){t&&f(o),t&&i.d()}}}function y(t){let i;return{c(){i=l("footer"),i.innerHTML='<slot name="footer"></slot>',b(i,"class","mc-card__footer")},m(t,o){r(t,i,o)},d(t){t&&f(i)}}}function $(t){let i,o,e,m,n,p,x,_,w,$,z,j,C,L=`<${t[3]} class="mc-card__title">${t[0]}</${t[3]}>`,M=t[5]&&v(t),q=t[10].footer&&y(),Y=[{class:C="mc-card"+(t[2]?" mc-card--bordered":"")+" "+t[9]},t[8]],E={};for(let t=0;t<Y.length;t+=1)E=c(E,Y[t]);return{c(){i=l("div"),o=l("figure"),e=l("img"),p=a(),x=l("article"),_=new k(!1),w=a(),M&&M.c(),$=a(),z=l("div"),z.innerHTML="<slot></slot>",j=a(),q&&q.c(),this.c=d,s(e.src,m=t[1])||b(e,"src",m),b(e,"alt",t[4]),b(e,"class","mc-card__img"),b(o,"class",n="mc-card__visual "+(t[7]?`mc-card__visual--${t[7]}`:"")),_.a=w,b(z,"class","mc-card__body"),b(x,"class","mc-card__content"),h(i,E)},m(t,m){r(t,i,m),u(i,o),u(o,e),u(i,p),u(i,x),_.m(L,x),u(x,w),M&&M.m(x,null),u(x,$),u(x,z),u(x,j),q&&q.m(x,null)},p(t,[r]){2&r&&!s(e.src,m=t[1])&&b(e,"src",m),16&r&&b(e,"alt",t[4]),128&r&&n!==(n="mc-card__visual "+(t[7]?`mc-card__visual--${t[7]}`:""))&&b(o,"class",n),9&r&&L!==(L=`<${t[3]} class="mc-card__title">${t[0]}</${t[3]}>`)&&_.p(L),t[5]?M?M.p(t,r):(M=v(t),M.c(),M.m(x,$)):M&&(M.d(1),M=null),t[10].footer?q||(q=y(),q.c(),q.m(x,null)):q&&(q.d(1),q=null),h(i,E=g(Y,[516&r&&C!==(C="mc-card"+(t[2]?" mc-card--bordered":"")+" "+t[9])&&{class:C},256&r&&t[8]]))},i:d,o:d,d(t){t&&f(i),M&&M.d(),q&&q.d()}}}function z(t,i,o){let e,r;const m=["title","imgsrc","outlined","titletag","imgalt","subtitle","subtitletag","imageratio"];let n=p(i,m),{$$slots:l={},$$scope:a}=i;const d=x(l);let{title:s}=i,{imgsrc:b}=i,{outlined:h=!1}=i,{titletag:u="h1"}=i,{imgalt:g}=i,{subtitle:f}=i,{subtitletag:w="h2"}=i,{imageratio:k="4x3"}=i;return t.$$set=t=>{o(12,i=c(c({},i),_(t))),o(11,n=p(i,m)),"title"in t&&o(0,s=t.title),"imgsrc"in t&&o(1,b=t.imgsrc),"outlined"in t&&o(2,h=t.outlined),"titletag"in t&&o(3,u=t.titletag),"imgalt"in t&&o(4,g=t.imgalt),"subtitle"in t&&o(5,f=t.subtitle),"subtitletag"in t&&o(6,w=t.subtitletag),"imageratio"in t&&o(7,k=t.imageratio)},t.$$.update=()=>{o(9,e=i.class),o(8,r=Object.assign({},n)),256&t.$$.dirty&&delete r.class},i=_(i),[s,b,h,u,g,f,w,k,r,e,d]}class j extends t{constructor(t){super();const c=document.createElement("style");c.textContent='.mc-button{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;color:#ffffff;background-color:#120949;font-family:"LeroyMerlin", sans-serif;font-weight:600;font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem;cursor:pointer;border-radius:4px;text-align:center;border:2px solid transparent;-webkit-transition:all ease 200ms;-o-transition:all ease 200ms;transition:all ease 200ms;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;vertical-align:middle;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;fill:currentColor}.mc-button.is-hover,.mc-button:hover{background-color:#161cb6;color:#ffffff}.mc-button.is-active,.mc-button:active{background-color:#161cb6}.mc-button:disabled,.mc-button.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button .mc-button__icon:first-child,.mc-button .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button.is-focus,.mc-button:focus{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-button--s{font-size:0.875rem;line-height:1.2857142857;padding:0.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s .mc-button__icon:first-child,.mc-button--s .mc-button__icon:last-child{margin-bottom:-0.1875rem;margin-top:-0.1875rem}.mc-button--s .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}.mc-button--m{font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:first-child,.mc-button--m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--l{font-size:1.125rem;line-height:1.3333333333;padding:0.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:first-child,.mc-button--l .mc-button__icon:last-child{margin-bottom:-0.25rem;margin-top:-0.25rem}.mc-button--l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--fit{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:auto}.mc-button--full{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){.mc-button--full{width:-webkit-fill-available;width:-moz-available;width:stretch}}.mc-button--square{-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:0;padding:0}.mc-button__icon{-ms-flex-negative:0;flex-shrink:0}.mc-button__icon:last-child{margin-left:0.5rem;margin-right:-0.25rem}.mc-button__icon:first-child{margin-right:0.5rem;margin-left:-0.25rem}.mc-button__icon:only-child{margin:0}.mc-button__label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;pointer-events:none}.mc-button--solid-primary-02{background-color:#ff5800}.mc-button--solid-primary-02.is-hover,.mc-button--solid-primary-02:hover{background-color:#b83f00}.mc-button--solid-primary-02.is-active,.mc-button--solid-primary-02:active{background-color:#421700}.mc-button--solid-primary-02:disabled,.mc-button--solid-primary-02.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button--solid-neutral{background-color:#333333}.mc-button--solid-neutral.is-hover,.mc-button--solid-neutral:hover{background-color:#191919}.mc-button--solid-neutral.is-active,.mc-button--solid-neutral:active{background-color:#333333}.mc-button--solid-neutral:disabled,.mc-button--solid-neutral.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button--solid-danger{background-color:#c61112}.mc-button--solid-danger.is-hover,.mc-button--solid-danger:hover{background-color:#8c0003}.mc-button--solid-danger.is-active,.mc-button--solid-danger:active{background-color:#8c0003}.mc-button--solid-danger:disabled,.mc-button--solid-danger.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button--bordered{color:#120949;border-color:#120949;background-color:#ffffff}.mc-button--bordered.is-hover,.mc-button--bordered:hover{background-color:#e5e7fa;color:#161cb6}.mc-button--bordered.is-active,.mc-button--bordered:active{background-color:#b8bef4;color:#130f7b}.mc-button--bordered.is-active,.mc-button--bordered:active{background-color:#b8bef4;color:#130f7b}.mc-button--bordered:disabled,.mc-button--bordered.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button--bordered-primary-02{color:#ff5800;border-color:#ff5800;background-color:#ffffff}.mc-button--bordered-primary-02.is-hover,.mc-button--bordered-primary-02:hover{background-color:#ffe1d1;color:#ff5800}.mc-button--bordered-primary-02.is-active,.mc-button--bordered-primary-02:active{background-color:#ffab80}.mc-button--bordered-primary-02:disabled,.mc-button--bordered-primary-02.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button--bordered-neutral{color:#333333;border-color:#333333;background-color:#ffffff}.mc-button--bordered-neutral.is-hover,.mc-button--bordered-neutral:hover{background-color:#e6e6e6;color:#333333}.mc-button--bordered-neutral.is-active,.mc-button--bordered-neutral:active{background-color:#cccccc}.mc-button--bordered-neutral:disabled,.mc-button--bordered-neutral.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button--bordered-danger{color:#c61112;border-color:#c61112;background-color:#ffffff}.mc-button--bordered-danger.is-hover,.mc-button--bordered-danger:hover{background-color:#fdeaea;color:#8c0003}.mc-button--bordered-danger.is-active,.mc-button--bordered-danger:active{background-color:#f8bcbb;color:#530000}.mc-button--bordered-danger.is-active,.mc-button--bordered-danger:active{background-color:#f8bcbb;color:#530000}.mc-button--bordered-danger:disabled,.mc-button--bordered-danger.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}@media screen and (min-width: 680px){.mc-button--s\\@from-m{font-size:0.875rem;line-height:1.2857142857;padding:0.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-m .mc-button__icon:first-child,.mc-button--s\\@from-m .mc-button__icon:last-child{margin-bottom:-0.1875rem;margin-top:-0.1875rem}.mc-button--s\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}.mc-button--m\\@from-m{font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-m .mc-button__icon:first-child,.mc-button--m\\@from-m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--l\\@from-m{font-size:1.125rem;line-height:1.3333333333;padding:0.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-m .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-m .mc-button__icon:first-child,.mc-button--l\\@from-m .mc-button__icon:last-child{margin-bottom:-0.25rem;margin-top:-0.25rem}.mc-button--l\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--fit\\@from-m{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:auto}.mc-button--full\\@from-m{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){.mc-button--full\\@from-m{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1024px){.mc-button--s\\@from-l{font-size:0.875rem;line-height:1.2857142857;padding:0.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-l .mc-button__icon:first-child,.mc-button--s\\@from-l .mc-button__icon:last-child{margin-bottom:-0.1875rem;margin-top:-0.1875rem}.mc-button--s\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}.mc-button--m\\@from-l{font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-l .mc-button__icon:first-child,.mc-button--m\\@from-l .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--l\\@from-l{font-size:1.125rem;line-height:1.3333333333;padding:0.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-l .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-l .mc-button__icon:first-child,.mc-button--l\\@from-l .mc-button__icon:last-child{margin-bottom:-0.25rem;margin-top:-0.25rem}.mc-button--l\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--fit\\@from-l{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:auto}.mc-button--full\\@from-l{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){.mc-button--full\\@from-l{width:-webkit-fill-available;width:-moz-available;width:stretch}}.mc-button--square{padding:0}}@media screen and (min-width: 1280px){.mc-button--s\\@from-xl{font-size:0.875rem;line-height:1.2857142857;padding:0.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xl .mc-button__icon:first-child,.mc-button--s\\@from-xl .mc-button__icon:last-child{margin-bottom:-0.1875rem;margin-top:-0.1875rem}.mc-button--s\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}.mc-button--m\\@from-xl{font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xl .mc-button__icon:first-child,.mc-button--m\\@from-xl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--l\\@from-xl{font-size:1.125rem;line-height:1.3333333333;padding:0.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xl .mc-button__icon:first-child,.mc-button--l\\@from-xl .mc-button__icon:last-child{margin-bottom:-0.25rem;margin-top:-0.25rem}.mc-button--l\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--fit\\@from-xl{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:auto}.mc-button--full\\@from-xl{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){.mc-button--full\\@from-xl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1920px){.mc-button--s\\@from-xxl{font-size:0.875rem;line-height:1.2857142857;padding:0.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xxl .mc-button__icon:first-child,.mc-button--s\\@from-xxl .mc-button__icon:last-child{margin-bottom:-0.1875rem;margin-top:-0.1875rem}.mc-button--s\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}.mc-button--m\\@from-xxl{font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xxl .mc-button__icon:first-child,.mc-button--m\\@from-xxl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--l\\@from-xxl{font-size:1.125rem;line-height:1.3333333333;padding:0.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xxl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xxl .mc-button__icon:first-child,.mc-button--l\\@from-xxl .mc-button__icon:last-child{margin-bottom:-0.25rem;margin-top:-0.25rem}.mc-button--l\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--fit\\@from-xxl{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:auto}.mc-button--full\\@from-xxl{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){.mc-button--full\\@from-xxl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}.mc-link{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:inherit;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:inherit;text-decoration:underline;-webkit-transition:color ease 200ms;-o-transition:color ease 200ms;transition:color ease 200ms;gap:0.25rem;color:#000000;position:relative;font-size:1rem;line-height:1.375}.mc-link:focus{outline:none}.mc-link:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-link.is-visited,.mc-link:visited{color:#333333}.mc-link.is-hover,.mc-link:hover{color:#666666}.mc-link.is-active,.mc-link:active{color:#333333}.mc-link.is-disabled{color:#e6e6e6;cursor:not-allowed}.mc-link--s{font-size:0.875rem;line-height:1.2857142857}.mc-link--m{font-size:1rem;line-height:1.375}.mc-link::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-link__icon{display:block;height:1rem;fill:currentColor;-ms-flex-negative:0;flex-shrink:0;width:1rem}.mc-link--light{color:#ffffff}.mc-link--light.is-visited,.mc-link--light:visited{color:#cccccc}.mc-link--light.is-hover,.mc-link--light:hover{color:#999999}.mc-link--light.is-active,.mc-link--light:active{color:#cccccc}.mc-link--light.is-disabled{color:#e6e6e6;cursor:not-allowed}.mc-link--primary{color:#ff5800}.mc-link--primary.is-visited,.mc-link--primary:visited{color:#ff5800}.mc-link--primary.is-hover,.mc-link--primary:hover{color:#b83f00}.mc-link--primary.is-active,.mc-link--primary:active{color:#ff5800}.mc-link--primary.is-disabled{color:#e6e6e6;cursor:not-allowed}.mc-link--primary-02{color:#b83f00}.mc-link--primary-02.is-visited,.mc-link--primary-02:visited{color:#943300}.mc-link--primary-02.is-hover,.mc-link--primary-02:hover{color:#421700}.mc-link--primary-02.is-active,.mc-link--primary-02:active{color:#943300}.mc-link--primary-02.is-disabled{color:#e6e6e6;cursor:not-allowed}.mc-link--danger{color:#c61112}.mc-link--danger.is-visited,.mc-link--danger:visited{color:#8c0003}.mc-link--danger.is-hover,.mc-link--danger:hover{color:#530000}.mc-link--danger.is-active,.mc-link--danger:active{color:#8c0003}.mc-link--danger.is-disabled{color:#e6e6e6;cursor:not-allowed}@media screen and (min-width: 680px){.mc-link--s\\@from-m{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-m{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-link--s\\@from-l{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-l{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-link--s\\@from-xl{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-xl{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-link--s\\@from-xxl{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-xxl{font-size:1rem;line-height:1.375}}.mc-card{font-family:"LeroyMerlin", sans-serif;max-width:17.75rem}.mc-card,.mc-card *{-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (min-width: 680px){.mc-card{max-width:18.25rem}}@media screen and (min-width: 1024px){.mc-card{max-width:18rem}}@media screen and (min-width: 1280px){.mc-card{max-width:17.5rem}}@media screen and (min-width: 1920px){.mc-card{max-width:27.25rem}}.mc-card__visual{margin:0;overflow:hidden;position:relative}.mc-card__visual::before{content:"";display:block;width:100%;padding-top:75%}.mc-card__visual--1x1::before{padding-top:100%}.mc-card__visual--16x9::before{padding-top:56.25%}.mc-card__img{height:auto;left:0;position:absolute;top:50%;width:100%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.mc-card__content{padding-top:1rem}.mc-card__title,.mc-card__subtitle{margin-top:0;margin-bottom:0.5rem}.mc-card__title{font-size:1.125rem;line-height:1.3333333333;font-weight:600;color:#000000}.mc-card__subtitle{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-card__body{font-size:1rem;line-height:1.375;color:#191919}.mc-card__body:not(:last-child){margin-bottom:1rem}.mc-card--bordered{background:#ffffff;border:2px solid #808080;border-radius:0.25rem;overflow:hidden}.mc-card--bordered .mc-card__content{padding-bottom:1.5rem;padding-left:1rem;padding-right:1rem}.mc-card--fluid{max-width:none}',this.shadowRoot.appendChild(c),i(this,{target:this.shadowRoot,props:{...o(this.attributes),$$slots:e(this)},customElement:!0},z,$,n,{title:0,imgsrc:1,outlined:2,titletag:3,imgalt:4,subtitle:5,subtitletag:6,imageratio:7},null),t&&(t.target&&r(t.target,this,t.anchor),t.props&&(this.$set(t.props),m()))}static get observedAttributes(){return["title","imgsrc","outlined","titletag","imgalt","subtitle","subtitletag","imageratio"]}get title(){return this.$$.ctx[0]}set title(t){this.$$set({title:t}),m()}get imgsrc(){return this.$$.ctx[1]}set imgsrc(t){this.$$set({imgsrc:t}),m()}get outlined(){return this.$$.ctx[2]}set outlined(t){this.$$set({outlined:t}),m()}get titletag(){return this.$$.ctx[3]}set titletag(t){this.$$set({titletag:t}),m()}get imgalt(){return this.$$.ctx[4]}set imgalt(t){this.$$set({imgalt:t}),m()}get subtitle(){return this.$$.ctx[5]}set subtitle(t){this.$$set({subtitle:t}),m()}get subtitletag(){return this.$$.ctx[6]}set subtitletag(t){this.$$set({subtitletag:t}),m()}get imageratio(){return this.$$.ctx[7]}set imageratio(t){this.$$set({imageratio:t}),m()}}export{j as default};
+import{S as t,i,a as o,_ as e,b as r,f as m,s as n,c,e as l,d as a,n as d,$ as s,g as b,h,j as u,m as g,o as f,p,a0 as x,q as _,P as w,Z as k}from"../../index-52f16292.js";function v(t){let i,o,e=`<${t[6]} class="mc-card__subtitle">${t[5]}</${t[6]}>`;return{c(){i=new k(!1),o=w(),i.a=o},m(t,m){i.m(e,t,m),r(t,o,m)},p(t,o){96&o&&e!==(e=`<${t[6]} class="mc-card__subtitle">${t[5]}</${t[6]}>`)&&i.p(e)},d(t){t&&f(o),t&&i.d()}}}function y(t){let i;return{c(){i=l("footer"),i.innerHTML='<slot name="footer"></slot>',b(i,"class","mc-card__footer")},m(t,o){r(t,i,o)},d(t){t&&f(i)}}}function $(t){let i,o,e,m,n,p,x,_,w,$,z,j,C,L=`<${t[3]} class="mc-card__title">${t[0]}</${t[3]}>`,M=t[5]&&v(t),q=t[10].footer&&y(),Y=[{class:C="mc-card"+(t[2]?" mc-card--bordered":"")+" "+t[9]},t[8]],E={};for(let t=0;t<Y.length;t+=1)E=c(E,Y[t]);return{c(){i=l("div"),o=l("figure"),e=l("img"),p=a(),x=l("article"),_=new k(!1),w=a(),M&&M.c(),$=a(),z=l("div"),z.innerHTML="<slot></slot>",j=a(),q&&q.c(),this.c=d,s(e.src,m=t[1])||b(e,"src",m),b(e,"alt",t[4]),b(e,"class","mc-card__img"),b(o,"class",n="mc-card__visual "+(t[7]?`mc-card__visual--${t[7]}`:"")),_.a=w,b(z,"class","mc-card__body"),b(x,"class","mc-card__content"),h(i,E)},m(t,m){r(t,i,m),u(i,o),u(o,e),u(i,p),u(i,x),_.m(L,x),u(x,w),M&&M.m(x,null),u(x,$),u(x,z),u(x,j),q&&q.m(x,null)},p(t,[r]){2&r&&!s(e.src,m=t[1])&&b(e,"src",m),16&r&&b(e,"alt",t[4]),128&r&&n!==(n="mc-card__visual "+(t[7]?`mc-card__visual--${t[7]}`:""))&&b(o,"class",n),9&r&&L!==(L=`<${t[3]} class="mc-card__title">${t[0]}</${t[3]}>`)&&_.p(L),t[5]?M?M.p(t,r):(M=v(t),M.c(),M.m(x,$)):M&&(M.d(1),M=null),t[10].footer?q||(q=y(),q.c(),q.m(x,null)):q&&(q.d(1),q=null),h(i,E=g(Y,[516&r&&C!==(C="mc-card"+(t[2]?" mc-card--bordered":"")+" "+t[9])&&{class:C},256&r&&t[8]]))},i:d,o:d,d(t){t&&f(i),M&&M.d(),q&&q.d()}}}function z(t,i,o){let e,r;const m=["title","imgsrc","outlined","titletag","imgalt","subtitle","subtitletag","imageratio"];let n=p(i,m),{$$slots:l={},$$scope:a}=i;const d=x(l);let{title:s}=i,{imgsrc:b}=i,{outlined:h=!1}=i,{titletag:u="h1"}=i,{imgalt:g}=i,{subtitle:f}=i,{subtitletag:w="h2"}=i,{imageratio:k="4x3"}=i;return t.$$set=t=>{o(12,i=c(c({},i),_(t))),o(11,n=p(i,m)),"title"in t&&o(0,s=t.title),"imgsrc"in t&&o(1,b=t.imgsrc),"outlined"in t&&o(2,h=t.outlined),"titletag"in t&&o(3,u=t.titletag),"imgalt"in t&&o(4,g=t.imgalt),"subtitle"in t&&o(5,f=t.subtitle),"subtitletag"in t&&o(6,w=t.subtitletag),"imageratio"in t&&o(7,k=t.imageratio)},t.$$.update=()=>{o(9,e=i.class),o(8,r=Object.assign({},n)),256&t.$$.dirty&&delete r.class},i=_(i),[s,b,h,u,g,f,w,k,r,e,d]}class j extends t{constructor(t){super();const c=document.createElement("style");c.textContent='.mc-button{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;color:#ffffff;background-color:#120949;font-family:"LeroyMerlin", sans-serif;font-weight:600;font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem;cursor:pointer;border-radius:4px;text-align:center;border:2px solid transparent;-webkit-transition:all ease 200ms;-o-transition:all ease 200ms;transition:all ease 200ms;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;vertical-align:middle;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;fill:currentColor}.mc-button.is-hover,.mc-button:hover{background-color:#161cb6;color:#ffffff}.mc-button.is-active,.mc-button:active{background-color:#161cb6}.mc-button:disabled,.mc-button.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button .mc-button__icon:first-child,.mc-button .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button.is-focus,.mc-button:focus{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-button--s{font-size:0.875rem;line-height:1.2857142857;padding:0.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s .mc-button__icon:first-child,.mc-button--s .mc-button__icon:last-child{margin-bottom:-0.1875rem;margin-top:-0.1875rem}.mc-button--s .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}.mc-button--m{font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:first-child,.mc-button--m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--l{font-size:1.125rem;line-height:1.3333333333;padding:0.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:first-child,.mc-button--l .mc-button__icon:last-child{margin-bottom:-0.25rem;margin-top:-0.25rem}.mc-button--l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--fit{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:auto}.mc-button--full{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){.mc-button--full{width:-webkit-fill-available;width:-moz-available;width:stretch}}.mc-button--square{-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:0;padding:0}.mc-button__icon{-ms-flex-negative:0;flex-shrink:0}.mc-button__icon:last-child{margin-left:0.5rem;margin-right:-0.25rem}.mc-button__icon:first-child{margin-right:0.5rem;margin-left:-0.25rem}.mc-button__icon:only-child{margin:0}.mc-button__label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;pointer-events:none}.mc-button--solid-primary-02{background-color:#ff5800}.mc-button--solid-primary-02.is-hover,.mc-button--solid-primary-02:hover{background-color:#b83f00}.mc-button--solid-primary-02.is-active,.mc-button--solid-primary-02:active{background-color:#421700}.mc-button--solid-primary-02:disabled,.mc-button--solid-primary-02.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button--solid-neutral{background-color:#333333}.mc-button--solid-neutral.is-hover,.mc-button--solid-neutral:hover{background-color:#191919}.mc-button--solid-neutral.is-active,.mc-button--solid-neutral:active{background-color:#333333}.mc-button--solid-neutral:disabled,.mc-button--solid-neutral.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button--solid-danger{background-color:#c61112}.mc-button--solid-danger.is-hover,.mc-button--solid-danger:hover{background-color:#8c0003}.mc-button--solid-danger.is-active,.mc-button--solid-danger:active{background-color:#8c0003}.mc-button--solid-danger:disabled,.mc-button--solid-danger.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button--bordered{color:#120949;border-color:#120949;background-color:#ffffff}.mc-button--bordered.is-hover,.mc-button--bordered:hover{background-color:#e5e7fa;color:#161cb6}.mc-button--bordered.is-active,.mc-button--bordered:active{background-color:#b8bef4;color:#130f7b}.mc-button--bordered.is-active,.mc-button--bordered:active{background-color:#b8bef4;color:#130f7b}.mc-button--bordered:disabled,.mc-button--bordered.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button--bordered-primary-02{color:#ff5800;border-color:#ff5800;background-color:#ffffff}.mc-button--bordered-primary-02.is-hover,.mc-button--bordered-primary-02:hover{background-color:#ffe1d1;color:#ff5800}.mc-button--bordered-primary-02.is-active,.mc-button--bordered-primary-02:active{background-color:#ffab80}.mc-button--bordered-primary-02:disabled,.mc-button--bordered-primary-02.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button--bordered-neutral{color:#333333;border-color:#333333;background-color:#ffffff}.mc-button--bordered-neutral.is-hover,.mc-button--bordered-neutral:hover{background-color:#e6e6e6;color:#333333}.mc-button--bordered-neutral.is-active,.mc-button--bordered-neutral:active{background-color:#cccccc}.mc-button--bordered-neutral:disabled,.mc-button--bordered-neutral.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-button--bordered-danger{color:#c61112;border-color:#c61112;background-color:#ffffff}.mc-button--bordered-danger.is-hover,.mc-button--bordered-danger:hover{background-color:#fdeaea;color:#8c0003}.mc-button--bordered-danger.is-active,.mc-button--bordered-danger:active{background-color:#f8bcbb;color:#530000}.mc-button--bordered-danger.is-active,.mc-button--bordered-danger:active{background-color:#f8bcbb;color:#530000}.mc-button--bordered-danger:disabled,.mc-button--bordered-danger.is-disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}@media screen and (min-width: 680px){.mc-button--s\\@from-m{font-size:0.875rem;line-height:1.2857142857;padding:0.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-m .mc-button__icon:first-child,.mc-button--s\\@from-m .mc-button__icon:last-child{margin-bottom:-0.1875rem;margin-top:-0.1875rem}.mc-button--s\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}.mc-button--m\\@from-m{font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-m .mc-button__icon:first-child,.mc-button--m\\@from-m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--l\\@from-m{font-size:1.125rem;line-height:1.3333333333;padding:0.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-m .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-m .mc-button__icon:first-child,.mc-button--l\\@from-m .mc-button__icon:last-child{margin-bottom:-0.25rem;margin-top:-0.25rem}.mc-button--l\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--fit\\@from-m{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:auto}.mc-button--full\\@from-m{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){.mc-button--full\\@from-m{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1024px){.mc-button--s\\@from-l{font-size:0.875rem;line-height:1.2857142857;padding:0.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-l .mc-button__icon:first-child,.mc-button--s\\@from-l .mc-button__icon:last-child{margin-bottom:-0.1875rem;margin-top:-0.1875rem}.mc-button--s\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}.mc-button--m\\@from-l{font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-l .mc-button__icon:first-child,.mc-button--m\\@from-l .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--l\\@from-l{font-size:1.125rem;line-height:1.3333333333;padding:0.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-l .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-l .mc-button__icon:first-child,.mc-button--l\\@from-l .mc-button__icon:last-child{margin-bottom:-0.25rem;margin-top:-0.25rem}.mc-button--l\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--fit\\@from-l{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:auto}.mc-button--full\\@from-l{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){.mc-button--full\\@from-l{width:-webkit-fill-available;width:-moz-available;width:stretch}}.mc-button--square{padding:0}}@media screen and (min-width: 1280px){.mc-button--s\\@from-xl{font-size:0.875rem;line-height:1.2857142857;padding:0.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xl .mc-button__icon:first-child,.mc-button--s\\@from-xl .mc-button__icon:last-child{margin-bottom:-0.1875rem;margin-top:-0.1875rem}.mc-button--s\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}.mc-button--m\\@from-xl{font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xl .mc-button__icon:first-child,.mc-button--m\\@from-xl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--l\\@from-xl{font-size:1.125rem;line-height:1.3333333333;padding:0.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xl .mc-button__icon:first-child,.mc-button--l\\@from-xl .mc-button__icon:last-child{margin-bottom:-0.25rem;margin-top:-0.25rem}.mc-button--l\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--fit\\@from-xl{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:auto}.mc-button--full\\@from-xl{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){.mc-button--full\\@from-xl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1920px){.mc-button--s\\@from-xxl{font-size:0.875rem;line-height:1.2857142857;padding:0.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xxl .mc-button__icon:first-child,.mc-button--s\\@from-xxl .mc-button__icon:last-child{margin-bottom:-0.1875rem;margin-top:-0.1875rem}.mc-button--s\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}.mc-button--m\\@from-xxl{font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xxl .mc-button__icon:first-child,.mc-button--m\\@from-xxl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--l\\@from-xxl{font-size:1.125rem;line-height:1.3333333333;padding:0.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xxl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xxl .mc-button__icon:first-child,.mc-button--l\\@from-xxl .mc-button__icon:last-child{margin-bottom:-0.25rem;margin-top:-0.25rem}.mc-button--l\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button--fit\\@from-xxl{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:auto}.mc-button--full\\@from-xxl{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){.mc-button--full\\@from-xxl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}.mc-link{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:inherit;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:inherit;text-decoration:underline;-webkit-transition:color ease 200ms;-o-transition:color ease 200ms;transition:color ease 200ms;gap:0.25rem;color:#000000;position:relative;font-size:1rem;line-height:1.375}.mc-link:focus{outline:none}.mc-link:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-link.is-visited,.mc-link:visited{color:#333333}.mc-link.is-hover,.mc-link:hover{color:#666666}.mc-link.is-active,.mc-link:active{color:#333333}.mc-link.is-disabled{color:#e6e6e6;cursor:not-allowed}.mc-link--s{font-size:0.875rem;line-height:1.2857142857}.mc-link--m{font-size:1rem;line-height:1.375}.mc-link::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-link__icon{display:block;height:1rem;fill:currentColor;-ms-flex-negative:0;flex-shrink:0;width:1rem}.mc-link--light{color:#ffffff}.mc-link--light.is-visited,.mc-link--light:visited{color:#cccccc}.mc-link--light.is-hover,.mc-link--light:hover{color:#999999}.mc-link--light.is-active,.mc-link--light:active{color:#cccccc}.mc-link--light.is-disabled{color:#e6e6e6;cursor:not-allowed}.mc-link--primary{color:#ff5800}.mc-link--primary.is-visited,.mc-link--primary:visited{color:#ff5800}.mc-link--primary.is-hover,.mc-link--primary:hover{color:#b83f00}.mc-link--primary.is-active,.mc-link--primary:active{color:#ff5800}.mc-link--primary.is-disabled{color:#e6e6e6;cursor:not-allowed}.mc-link--primary-02{color:#b83f00}.mc-link--primary-02.is-visited,.mc-link--primary-02:visited{color:#943300}.mc-link--primary-02.is-hover,.mc-link--primary-02:hover{color:#421700}.mc-link--primary-02.is-active,.mc-link--primary-02:active{color:#943300}.mc-link--primary-02.is-disabled{color:#e6e6e6;cursor:not-allowed}.mc-link--danger{color:#c61112}.mc-link--danger.is-visited,.mc-link--danger:visited{color:#8c0003}.mc-link--danger.is-hover,.mc-link--danger:hover{color:#530000}.mc-link--danger.is-active,.mc-link--danger:active{color:#8c0003}.mc-link--danger.is-disabled{color:#e6e6e6;cursor:not-allowed}@media screen and (min-width: 680px){.mc-link--s\\@from-m{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-m{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-link--s\\@from-l{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-l{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-link--s\\@from-xl{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-xl{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-link--s\\@from-xxl{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-xxl{font-size:1rem;line-height:1.375}}.mc-card{font-family:"LeroyMerlin", sans-serif;max-width:17.75rem}.mc-card,.mc-card *{-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (min-width: 680px){.mc-card{max-width:18.25rem}}@media screen and (min-width: 1024px){.mc-card{max-width:18rem}}@media screen and (min-width: 1280px){.mc-card{max-width:17.5rem}}@media screen and (min-width: 1920px){.mc-card{max-width:27.25rem}}.mc-card__visual{margin:0;overflow:hidden;position:relative}.mc-card__visual::before{content:"";display:block;width:100%;padding-top:75%}.mc-card__visual--1x1::before{padding-top:100%}.mc-card__visual--16x9::before{padding-top:56.25%}.mc-card__img{height:auto;left:0;position:absolute;top:50%;width:100%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.mc-card__content{padding-top:1rem}.mc-card__title,.mc-card__subtitle{margin-top:0;margin-bottom:0.5rem}.mc-card__title{font-size:1.125rem;line-height:1.3333333333;font-weight:600;color:#000000}.mc-card__subtitle{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-card__body{font-size:1rem;line-height:1.375;color:#191919}.mc-card__body:not(:last-child){margin-bottom:1rem}.mc-card--bordered{background:#ffffff;border:2px solid #808080;border-radius:0.25rem;overflow:hidden}.mc-card--bordered .mc-card__content{padding-bottom:1.5rem;padding-left:1rem;padding-right:1rem}.mc-card--fluid{max-width:none}',this.shadowRoot.appendChild(c),i(this,{target:this.shadowRoot,props:{...o(this.attributes),$$slots:e(this)},customElement:!0},z,$,n,{title:0,imgsrc:1,outlined:2,titletag:3,imgalt:4,subtitle:5,subtitletag:6,imageratio:7},null),t&&(t.target&&r(t.target,this,t.anchor),t.props&&(this.$set(t.props),m()))}static get observedAttributes(){return["title","imgsrc","outlined","titletag","imgalt","subtitle","subtitletag","imageratio"]}get title(){return this.$$.ctx[0]}set title(t){this.$$set({title:t}),m()}get imgsrc(){return this.$$.ctx[1]}set imgsrc(t){this.$$set({imgsrc:t}),m()}get outlined(){return this.$$.ctx[2]}set outlined(t){this.$$set({outlined:t}),m()}get titletag(){return this.$$.ctx[3]}set titletag(t){this.$$set({titletag:t}),m()}get imgalt(){return this.$$.ctx[4]}set imgalt(t){this.$$set({imgalt:t}),m()}get subtitle(){return this.$$.ctx[5]}set subtitle(t){this.$$set({subtitle:t}),m()}get subtitletag(){return this.$$.ctx[6]}set subtitletag(t){this.$$set({subtitletag:t}),m()}get imageratio(){return this.$$.ctx[7]}set imageratio(t){this.$$set({imageratio:t}),m()}}export{j as default};
 //# sourceMappingURL=Card.js.map

package/public/bricoman/components/carousel/Carousel.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{S as e,i as t,a as i,b as s,f as a,s as o,e as l,d as n,B as r,n as c,g as d,J as m,j as u,C as p,l as b,y as h,x as f,w,o as x,D as _,O as g,a1 as $,Z as v,z as k,H as y}from"../../index-52f16292.js";import z from"../link/Link.nested.js";import j from"./CarouselCard.nested.js";import L from"../button/Button.nested.js";import{E as V}from"../../EventHandler-f4efd23c.js";import"../../EventForward-422700d7.js";import"../loader/Loader.nested.js";function W(e,t,i){const s=e.slice();return s[33]=t[i],s}function S(e){let t,i,a,o,c,m;function f(...t){return e[24](e[33],...t)}return i=new j({props:{title:e[33].title,imgSrc:e[33].imgSrc,imgAlt:e[33].imgAlt}}),{c(){t=l("button"),r(i.$$.fragment),a=n(),d(t,"class","mc-carousel__item")},m(e,l){s(e,t,l),p(i,t,null),u(t,a),o=!0,c\|\|(m=b(t,"click",f),c=!0)},p(t,s){e=t;const a={};32&s[0]&&(a.title=e[33].title),32&s[0]&&(a.imgSrc=e[33].imgSrc),32&s[0]&&(a.imgAlt=e[33].imgAlt),i.$set(a)},i(e){o\|\|(h(i.$$.fragment,e),o=!0)},o(e){w(i.$$.fragment,e),o=!1},d(e){e&&x(t),_(i),c=!1,m()}}}function H(e){let t,i,a,o,$,y,j,V,H,I,N,O,B,J,M,P,R,D,F,T=`<${e[1]} style="margin:0">${e[0]}</${e[1]}>`;j=new z({props:{href:"#layer",iconname:"navigation-arrow-arrow--right-24px",iconposition:"right",label:e[2],size:"s",target:"_self"}}),j.$on("click",e[16]),I=new L({props:{theme:"neutral",size:"s",bordered:!0,iconmode:"only",iconname:"navigation-arrow-arrow--left-32px","aria-label":"Previous page",disabled:e[7],label:"Previous",loader:""}}),I.$on("click",e[13]),O=new L({props:{theme:"neutral",size:"s",type:"button",bordered:!0,disabled:e[8],iconmode:"only",iconname:"navigation-arrow-arrow--right-32px","aria-label":"Next Page",label:"Next",loader:""}}),O.$on("click",e[12]);let Z=e[5],q=[];for(let t=0;t<Z.length;t+=1)q[t]=S(W(e,Z,t));const G=e=>w(q[e],1,1,(()=>{q[e]=null}));return{c(){t=l("div"),i=l("div"),a=l("div"),o=new v(!1),$=n(),y=l("div"),r(j.$$.fragment),V=n(),H=l("nav"),r(I.$$.fragment),N=n(),r(O.$$.fragment),J=n(),M=l("div"),P=l("div");for(let e=0;e<q.length;e+=1)q[e].c();this.c=c,o.a=$,d(y,"class","mc-carousel__subtitle"),d(a,"class","mc-carousel__titles"),d(H,"aria-label","pagination"),d(H,"class",B="mc-carousel__nav "+(e[3]?"mc-carousel__nav--mobile":"mc-carousel__nav--desktop")),d(i,"class","mc-carousel__header"),d(P,"class","mc-carousel__content"),m(P,"--carousel__container-width-space",e[10]+"px"),m(P,"--carousel__items-count",e[4]),m(P,"--carousel__item-width-space",e[11]+"px"),m(P,"--carousel__items-visible",e[9]),m(P,"--carousel__scrollbar-left",E),m(P,"--carousel__container-separate-item-size",A+"px"),d(M,"class","mc-carousel__body"),m(M,"--carousel__accessibility-focus-padding",C+"px"),d(t,"class","mc-carousel")},m(l,n){s(l,t,n),u(t,i),u(i,a),o.m(T,a),u(a,$),u(a,y),p(j,y,null),u(i,V),u(i,H),p(I,H,null),u(H,N),p(O,H,null),u(t,J),u(t,M),u(M,P);for(let e=0;e<q.length;e+=1)q[e]&&q[e].m(P,null);e[25](M),R=!0,D\|\|(F=b(M,"scroll",e[14]),D=!0)},p(e,t){(!R\|\|3&t[0])&&T!==(T=`<${e[1]} style="margin:0">${e[0]}</${e[1]}>`)&&o.p(T);const i={};4&t[0]&&(i.label=e[2]),j.$set(i);const s={};128&t[0]&&(s.disabled=e[7]),I.$set(s);const a={};if(256&t[0]&&(a.disabled=e[8]),O.$set(a),(!R\|\|8&t[0]&&B!==(B="mc-carousel__nav "+(e[3]?"mc-carousel__nav--mobile":"mc-carousel__nav--desktop")))&&d(H,"class",B),32800&t[0]){let i;for(Z=e[5],i=0;i<Z.length;i+=1){const s=W(e,Z,i);q[i]?(q[i].p(s,t),h(q[i],1)):(q[i]=S(s),q[i].c(),h(q[i],1),q[i].m(P,null))}for(k(),i=Z.length;i<q.length;i+=1)G(i);f()}(!R\|\|1024&t[0])&&m(P,"--carousel__container-width-space",e[10]+"px"),(!R\|\|16&t[0])&&m(P,"--carousel__items-count",e[4]),(!R\|\|2048&t[0])&&m(P,"--carousel__item-width-space",e[11]+"px"),(!R\|\|512&t[0])&&m(P,"--carousel__items-visible",e[9])},i(e){if(!R){h(j.$$.fragment,e),h(I.$$.fragment,e),h(O.$$.fragment,e);for(let e=0;e<Z.length;e+=1)h(q[e]);R=!0}},o(e){w(j.$$.fragment,e),w(I.$$.fragment,e),w(O.$$.fragment,e),q=q.filter(Boolean);for(let e=0;e<q.length;e+=1)w(q[e]);R=!1},d(i){i&&x(t),_(j),_(I),_(O),g(q,i),e[25](null),D=!1,F()}}}let A=16,C=4,E=0;function I(e,t){return t?eA:(e-1)A}function N(e,t,i){let s,a,o,l,n,r,c,d,m,{title:u}=t,{titletag:p="h1"}=t,{subtitlelink:b}=t,{mobile:h=!1}=t,{options:f}=t,{items:w}=t;const x=window.matchMedia("(max-width: 679px)"),_=window.matchMedia("(min-width: 680px) and (max-width: 1279px)"),g=window.matchMedia("(min-width: 1280px)"),v={s:{itemsVisible:1,hasHalfItemVisible:!0},m:{itemsVisible:3,hasHalfItemVisible:!1},xl:{itemsVisible:5,hasHalfItemVisible:!1}};let k,z=new V,j=function(e,t){return t.matches?"xl":e.matches?"m":"s"}(_,g),L=!0,W=!1;function S(e){k.scrollTo({behavior:"smooth",left:function(){if(!n)return k.scrollLeft+e(k.clientWidth+A-2C);const t=function(){const e=I(l,n);return n?(k.clientWidth-e)/c:(k.clientWidth-e)/l}();return L?k.scrollLeft+(e(k.clientWidth-3/4t-A)+C):W?k.scrollLeft+e(k.clientWidth-3/4t-A):k.scrollLeft+e(k.clientWidth-t/2-A+2C)}()})}function H(e,t){return z.dispatch("carousel-item-clicked",e),t}function E(e,t){return e.matches&&i(19,j=t),e}$((()=>{x.onchange=e=>{E(e,"s")},_.onchange=e=>{E(e,"m")},g.onchange=e=>{E(e,"xl")}}));return e.$$set=e=>{"title"in e&&i(0,u=e.title),"titletag"in e&&i(1,p=e.titletag),"subtitlelink"in e&&i(2,b=e.subtitlelink),"mobile"in e&&i(3,h=e.mobile),"options"in e&&i(17,f=e.options),"items"in e&&i(18,w=e.items)},e.$$.update=()=>{262144&e.$$.dirty[0]&&i(5,s=w?JSON.parse(w):[]),131072&e.$$.dirty[0]&&i(23,a=f?Object.assign({},v,JSON.parse(f)):v),32&e.$$.dirty[0]&&i(22,o=null==s?void 0:s.length),8912896&e.$$.dirty[0]&&i(21,l=a[j].itemsVisible),8912896&e.$$.dirty[0]&&i(20,n=a[j].hasHalfItemVisible\|\|!1),6291456&e.$$.dirty[0]&&i(4,r=o<l?l:o),3145728&e.$$.dirty[0]&&i(9,c=n?l+.5:l),3145728&e.$$.dirty[0]&&i(11,d=I(l,n)),16&e.$$.dirty[0]&&i(10,m=(r-1)A)},[u,p,b,h,r,s,k,L,W,c,m,d,function(){S(1)},function(){S(-1)},function(){i(7,L=(null==k?void 0:k.scrollLeft)<=0),i(8,W=(null==k?void 0:k.scrollWidth)-(null==k?void 0:k.scrollLeft)<=k.offsetWidth)},H,function(e){return z.dispatch("carousel-link-clicked",{}),e},f,w,j,n,l,o,a,(e,t)=>H(e,t),function(e){y[e?"unshift":"push"]((()=>{k=e,i(6,k)}))}]}class O extends e{constructor(e){super();const l=document.createElement("style");l.textContent='@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){}@media screen and (min-width: 680px){@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){}}@media screen and (min-width: 1024px){@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){}}@media screen and (min-width: 1280px){@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){}}@media screen and (min-width: 1920px){@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){}}@media screen and (min-width: 680px){}@media screen and (min-width: 1024px){}@media screen and (min-width: 1280px){}@media screen and (min-width: 1920px){}@media screen and (min-width: 1024px){}.mc-carousel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:1rem}.mc-carousel__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mc-carousel__titles{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:0.25rem}.mc-carousel__nav{gap:0.5rem}.mc-carousel__nav--mobile{display:none}.mc-carousel__nav--desktop{display:-webkit-box;display:-ms-flexbox;display:flex}.mc-carousel__body{position:relative;overflow-x:auto;overflow-y:hidden;padding:var(--carousel__accessibility-focus-padding)}.mc-carousel__content{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-column-gap:var(--carousel__container-separate-item-size);-moz-column-gap:var(--carousel__container-separate-item-size);column-gap:var(--carousel__container-separate-item-size);width:calc((100% - var(--carousel__item-width-space)) / var(--carousel__items-visible) var(--carousel__items-count) + var(--carousel__container-width-space));margin-bottom:1.25rem}.mc-carousel__item{display:-webkit-box;display:-ms-flexbox;display:flex;background:none;border:none;margin:0;padding:0;cursor:pointer;width:calc((100% - var(--carousel__item-width-space)) / var(--carousel__items-visible));position:relative}.mc-carousel__item::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-carousel__item:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}::-webkit-scrollbar{border-radius:0.25rem;height:6px;background:#e6e6e6;border-top:1px solid white;border-bottom:1px solid white}::-webkit-scrollbar-thumb{background:#333333;border-radius:6px}',this.shadowRoot.appendChild(l),t(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},N,H,o,{title:0,titletag:1,subtitlelink:2,mobile:3,options:17,items:18},null,[-1,-1]),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["title","titletag","subtitlelink","mobile","options","items"]}get title(){return this.$$.ctx[0]}set title(e){this.$$set({title:e}),a()}get titletag(){return this.$$.ctx[1]}set titletag(e){this.$$set({titletag:e}),a()}get subtitlelink(){return this.$$.ctx[2]}set subtitlelink(e){this.$$set({subtitlelink:e}),a()}get mobile(){return this.$$.ctx[3]}set mobile(e){this.$$set({mobile:e}),a()}get options(){return this.$$.ctx[17]}set options(e){this.$$set({options:e}),a()}get items(){return this.$$.ctx[18]}set items(e){this.$$set({items:e}),a()}}export{O as default};
2	+ //# sourceMappingURL=Carousel.js.map

package/public/bricoman/components/carousel/Carousel.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Carousel.js","sources":["../../../../src/components/carousel/Carousel.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import type {\n CarouselDevice,\n CarouselItem,\n CarouselOptions,\n CarouselTitleTag,\n } from './carousel.types';\n import Link from '../link/Link.nested.svelte';\n import CarouselCard from './CarouselCard.nested.svelte';\n import Button from '../button/Button.nested.svelte';\n import { EventHandler } from '../../utilities/EventHandler';\n import { onMount } from 'svelte';\n\n export let title: string;\n export let titletag: CarouselTitleTag = 'h1';\n export let subtitlelink: string;\n export let mobile = false;\n export let options: string;\n export let items: string;\n\n const mediaQueryS: MediaQueryList = window.matchMedia('(max-width: 679px)');\n const mediaQueryM: MediaQueryList = window.matchMedia(\n '(min-width: 680px) and (max-width: 1279px)',\n );\n const mediaQueryXL: MediaQueryList = window.matchMedia('(min-width: 1280px)');\n\n // default options for all 3 screen sizes (s = <m ; m = >=m to <xl ; xl = >=xl)\n const defaultCarouselOptions: CarouselOptions = {\n s: {\n itemsVisible: 1,\n hasHalfItemVisible: true,\n },\n m: {\n itemsVisible: 3,\n hasHalfItemVisible: false,\n },\n xl: {\n itemsVisible: 5,\n hasHalfItemVisible: false,\n },\n };\n\n // size using to separate item. Useful for gap in css and for move the scroll.\n let betweenItemsPixelSize = 16;\n\n // needed padding to display the outlined focus border on carousel items\n let accessibilityFocusPadding = 4;\n\n let eventHandler = new EventHandler();\n\n let currentDevice: CarouselDevice = initCurrentDevice(\n mediaQueryM,\n mediaQueryXL,\n );\n\n let carouselContainer: HTMLDivElement;\n let carouselScrollbarLeft = 0;\n\n let isScrollBeginning = true;\n let isScrollEnd = false;\n\n $: carouselItems = items ? (JSON.parse(items) as CarouselItem[]) : [];\n $: carouselOptions = options\n ? Object.assign(\n {},\n defaultCarouselOptions,\n JSON.parse(options) as CarouselOptions,\n )\n : defaultCarouselOptions;\n $: carouselItemsSize = carouselItems?.length;\n\n $: carouselCurrentItemsVisible = carouselOptions[currentDevice].itemsVisible;\n $: carouselCurrentHasHalfItemVisible =\n carouselOptions[currentDevice].hasHalfItemVisible || false;\n $: carouselCurrentItemsSize =\n carouselItemsSize < carouselCurrentItemsVisible\n ? carouselCurrentItemsVisible\n : carouselItemsSize;\n\n $: carouselCurrentItemsVisibleAndHalf = carouselCurrentHasHalfItemVisible\n ? carouselCurrentItemsVisible + 0.5\n : carouselCurrentItemsVisible;\n\n $: carouselItemWidthSpace = getCarouselItemsWidthSpace(\n carouselCurrentItemsVisible,\n carouselCurrentHasHalfItemVisible,\n );\n $: carouselContainerWidthSpace = getCarouselContainerWidthSpace(\n carouselCurrentItemsSize,\n );\n\n /* returns the total size of the spacing between items for the big container */\n function getCarouselContainerWidthSpace(totalItems: number) {\n return (totalItems - 1) * betweenItemsPixelSize;\n }\n\n /* returns the total size of the spacing between items for the screen size */\n function getCarouselItemsWidthSpace(\n itemsVisible: number,\n itemsAndHalfVisible: boolean,\n ) {\n if (itemsAndHalfVisible) {\n return itemsVisible * betweenItemsPixelSize;\n }\n return (itemsVisible - 1) * betweenItemsPixelSize;\n }\n\n /* move the scroll to change the displaying items.\n 1 to move right, -1 to move left\n */\n function moveScroll(signe: 1 | -1) {\n /* returns the size in pixel of an item according to screen size and the number of items visible. */\n function getCarouselItemWidth() {\n const carouselItemsWidthSpace = getCarouselItemsWidthSpace(\n carouselCurrentItemsVisible,\n carouselCurrentHasHalfItemVisible,\n );\n if (carouselCurrentHasHalfItemVisible) {\n return (\n (carouselContainer.clientWidth - carouselItemsWidthSpace) /\n carouselCurrentItemsVisibleAndHalf\n );\n } else {\n return (\n (carouselContainer.clientWidth - carouselItemsWidthSpace) /\n carouselCurrentItemsVisible\n );\n }\n }\n\n /* returns the new left position of the scrollbar\n * in the case of visible half items, the calculation depends if the carousel is at the beginnind, at the end or in the middle.\n *\n */\n function getLeft() {\n if (!carouselCurrentHasHalfItemVisible) {\n return (\n carouselContainer.scrollLeft +\n signe *\n (carouselContainer.clientWidth +\n betweenItemsPixelSize -\n accessibilityFocusPadding * 2)\n );\n }\n const itemWidth = getCarouselItemWidth();\n if (isScrollBeginning) {\n return (\n carouselContainer.scrollLeft +\n (signe *\n (carouselContainer.clientWidth -\n (3 / 4) * itemWidth -\n betweenItemsPixelSize) +\n accessibilityFocusPadding)\n );\n }\n if (isScrollEnd) {\n return (\n carouselContainer.scrollLeft +\n signe *\n (carouselContainer.clientWidth -\n (3 / 4) * itemWidth -\n betweenItemsPixelSize)\n );\n }\n return (\n carouselContainer.scrollLeft +\n signe *\n (carouselContainer.clientWidth -\n itemWidth / 2 -\n betweenItemsPixelSize +\n accessibilityFocusPadding * 2)\n );\n }\n\n carouselContainer.scrollTo({ behavior: 'smooth', left: getLeft() });\n }\n\n function nextCards() {\n moveScroll(1);\n }\n\n function previousCards() {\n moveScroll(-1);\n }\n\n function handleScrollCarousel() {\n isScrollBeginning = carouselContainer?.scrollLeft <= 0;\n isScrollEnd =\n carouselContainer?.scrollWidth - carouselContainer?.scrollLeft <=\n carouselContainer.offsetWidth;\n }\n\n function handleClickCard(item: CarouselItem, event: MouseEvent): MouseEvent {\n eventHandler.dispatch('carousel-item-clicked', item);\n return event;\n }\n function handleClickLink(event: MouseEvent): MouseEvent {\n eventHandler.dispatch('carousel-link-clicked', {});\n return event;\n }\n\n // returns device according to screen size\n function initCurrentDevice(\n mediaQueryM: MediaQueryList,\n mediaQueryXL: MediaQueryList,\n ) {\n if (mediaQueryXL.matches) {\n return 'xl';\n }\n if (mediaQueryM.matches) {\n return 'm';\n }\n return 's';\n }\n\n function handleMediaQueryChange(\n event: MediaQueryListEvent,\n matchingDevice: CarouselDevice,\n ): MediaQueryListEvent {\n if (event.matches) {\n currentDevice = matchingDevice;\n }\n return event;\n }\n\n onMount(() => {\n mediaQueryS.onchange = (e) => {\n handleMediaQueryChange(e, 's');\n };\n mediaQueryM.onchange = (e) => {\n handleMediaQueryChange(e, 'm');\n };\n mediaQueryXL.onchange = (e) => {\n handleMediaQueryChange(e, 'xl');\n };\n });\n</script>\n\n<div class=\"mc-carousel\">\n <div class=\"mc-carousel__header\">\n <div class=\"mc-carousel__titles\">\n {@html `<${titletag} style=\"margin:0\">${title}</${titletag}>`}\n <div class=\"mc-carousel__subtitle\">\n <Link\n href=\"#layer\"\n iconname=\"navigation-arrow-arrow--right-24px\"\n iconposition=\"right\"\n label={subtitlelink}\n on:click={handleClickLink}\n size=\"s\"\n target=\"_self\"\n />\n </div>\n </div>\n <nav\n aria-label=\"pagination\"\n class=\"mc-carousel__nav {mobile\n ? 'mc-carousel__nav--mobile'\n : 'mc-carousel__nav--desktop'}\"\n >\n <Button\n theme=\"neutral\"\n size=\"s\"\n bordered={true}\n iconmode=\"only\"\n iconname=\"navigation-arrow-arrow--left-32px\"\n aria-label=\"Previous page\"\n disabled={isScrollBeginning}\n on:click={previousCards}\n label=\"Previous\"\n loader=\"\"\n />\n <Button\n theme=\"neutral\"\n size=\"s\"\n type=\"button\"\n bordered={true}\n disabled={isScrollEnd}\n iconmode=\"only\"\n iconname=\"navigation-arrow-arrow--right-32px\"\n aria-label=\"Next Page\"\n on:click={nextCards}\n label=\"Next\"\n loader=\"\"\n />\n </nav>\n </div>\n <div\n class=\"mc-carousel__body\"\n bind:this={carouselContainer}\n on:scroll={handleScrollCarousel}\n style=\"--carousel__accessibility-focus-padding: {accessibilityFocusPadding}px;\"\n >\n <div\n class=\"mc-carousel__content\"\n style=\"\n --carousel__container-width-space: {carouselContainerWidthSpace}px;\n --carousel__items-count: {carouselCurrentItemsSize};\n --carousel__item-width-space: {carouselItemWidthSpace}px;\n --carousel__items-visible: {carouselCurrentItemsVisibleAndHalf};\n --carousel__scrollbar-left: {carouselScrollbarLeft};\n --carousel__container-separate-item-size: {betweenItemsPixelSize}px;\"\n >\n {#each carouselItems as item}\n <button\n class=\"mc-carousel__item\"\n on:click={(event) => handleClickCard(item, event)}\n >\n <CarouselCard\n title={item.title}\n imgSrc={item.imgSrc}\n imgAlt={item.imgAlt}\n />\n </button>\n {/each}\n </div>\n </div>\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import '@mozaic-ds/styles/components/c.button';\n @import '@mozaic-ds/styles/components/c.links';\n @import '@mozaic-ds/styles/components/c.pagination';\n\n .mc-carousel {\n display: flex;\n flex-direction: column;\n gap: $mu100;\n\n &__header {\n /* Auto layout */\n\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n }\n &__titles {\n display: flex;\n flex-direction: column;\n gap: $mu025;\n }\n &__nav {\n gap: $mu050;\n &--mobile {\n display: none;\n }\n &--desktop {\n display: flex;\n }\n }\n\n &__body {\n position: relative;\n overflow-x: auto;\n overflow-y: hidden;\n padding: var(--carousel__accessibility-focus-padding);\n }\n\n &__content {\n display: flex;\n flex-wrap: nowrap;\n column-gap: var(--carousel__container-separate-item-size);\n // the total size of the big container for all items: taille d'un item * le nbre d'items + espace entre chaque item\n width: calc(\n (\n (100% - var(--carousel__item-width-space)) /\n var(--carousel__items-visible)\n ) * var(--carousel__items-count) +\n var(--carousel__container-width-space)\n );\n margin-bottom: $mu125;\n }\n\n &__item {\n display: flex;\n background: none;\n border: none;\n margin: 0;\n padding: 0;\n cursor: pointer;\n // taille d'un item: (100% - les espaces entre chaque item isible) / le nombre d'items visible\n width: calc(\n (100% - var(--carousel__item-width-space)) /\n var(--carousel__items-visible)\n );\n @include set-focus-floating-base();\n\n &:focus {\n @include set-focus-floating();\n }\n }\n\n &-footer {\n display: flex;\n flex-direction: column;\n }\n }\n\n ::-webkit-scrollbar {\n border-radius: $mu025;\n height: 6px;\n background: $color-grey-100;\n border-top: 1px solid white;\n border-bottom: 1px solid white;\n }\n\n ::-webkit-scrollbar-thumb {\n background: $color-grey-800;\n border-radius: 6px;\n }\n</style>\n"],"names":["title","ctx","imgSrc","imgAlt","insert","target","button","anchor","dirty","carouselcard_changes","length","i","carouselScrollbarLeft","betweenItemsPixelSize","accessibilityFocusPadding","div5","append","div2","div1","div0","nav","div4","div3","html_tag","p","raw_value","each_blocks","getCarouselItemsWidthSpace","itemsVisible","itemsAndHalfVisible","$$props","titletag","subtitlelink","mobile","options","items","mediaQueryS","window","matchMedia","mediaQueryM","mediaQueryXL","defaultCarouselOptions","s","hasHalfItemVisible","m","xl","carouselContainer","eventHandler","EventHandler","currentDevice","matches","initCurrentDevice","isScrollBeginning","isScrollEnd","moveScroll","signe","scrollTo","behavior","left","carouselCurrentHasHalfItemVisible","scrollLeft","clientWidth","itemWidth","carouselItemsWidthSpace","carouselCurrentItemsVisible","carouselCurrentItemsVisibleAndHalf","getCarouselItemWidth","getLeft","handleClickCard","item","event","dispatch","handleMediaQueryChange","matchingDevice","$$invalidate","onMount","onchange","e","carouselItems","JSON","parse","carouselOptions","Object","assign","carouselItemsSize","carouselCurrentItemsSize","carouselItemWidthSpace","carouselContainerWidthSpace","scrollWidth","offsetWidth","$$value"],"mappings":"4lBAuTmBA,MAAAC,MAAKD,MACJE,OAAAD,MAAKC,OACLC,OAAAF,MAAKE,6FAPjBC,EASQC,EAAAC,EAAAC,6EAJG,GAAAC,EAAA,KAAAC,EAAAT,MAAAC,MAAKD,OACJ,GAAAQ,EAAA,KAAAC,EAAAP,OAAAD,MAAKC,QACL,GAAAM,EAAA,KAAAC,EAAAN,OAAAF,MAAKE,+KAtERF,EAAQ,uBAAqBA,EAAK,OAAKA,EAAQ,6GAM/CA,EAAY,4CACTA,EAAe,wDAejB,qGAIAA,EAAiB,+CACjBA,EAAa,sEAQb,WACAA,EAAW,kIAIXA,EAAS,WAsBdA,EAAa,wBAAlBS,OAAIC,GAAA,yaA/CmBV,EAAA,GACrB,2BACA,6IAsCuCA,EAA2B,IAAA,oCACrCA,EAAwB,uCACnBA,EAAsB,IAAA,sCACzBA,EAAkC,qCACjCW,kDACcC,EAAqB,qFAVxBC,EAAyB,yCArD9EV,EA+EKC,EAAAU,EAAAR,GA9EHS,EA+CKD,EAAAE,GA9CHD,EAaKC,EAAAC,mBAXHF,EAUKE,EAAAC,sBAEPH,EA+BKC,EAAAG,yCAEPJ,EA6BKD,EAAAM,GAvBHL,EAsBKK,EAAAC,qFAzBMrB,EAAoB,4CAjDlBA,EAAQ,uBAAqBA,EAAK,OAAKA,EAAQ,QAAAsB,EAAAC,EAAAC,+BAM/CxB,EAAY,+CAoBXA,EAAiB,kDAUjBA,EAAW,uDArBEA,EAAA,GACrB,2BACA,uEA6CGA,EAAa,WAAlBS,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAe,EAAAhB,OAAAC,GAAA,oEAPqCV,EAA2B,IAAA,mDACrCA,EAAwB,wDACnBA,EAAsB,IAAA,sDACzBA,EAAkC,0FAInES,OAAIC,GAAA,uMApQN,IAAAE,EAAwB,GAGxBC,EAA4B,EAU5BF,EAAwB,WAyCnBe,EACPC,EACAC,UAEIA,EACKD,EAAef,GAEhBe,EAAe,GAAKf,iDA3FnBb,GAAa8B,GACbC,SAAAA,EAA6B,MAAID,gBACjCE,GAAoBF,GACpBG,OAAAA,GAAS,GAAKH,WACdI,GAAeJ,SACfK,GAAaL,EAElB,MAAAM,EAA8BC,OAAOC,WAAW,sBAChDC,EAA8BF,OAAOC,WACzC,8CAEIE,EAA+BH,OAAOC,WAAW,uBAGjDG,EAAsB,CAC1BC,EAAC,CACCd,aAAc,EACde,oBAAoB,GAEtBC,EAAC,CACChB,aAAc,EACde,oBAAoB,GAEtBE,GAAE,CACAjB,aAAc,EACde,oBAAoB,IAUpB,IAOAG,EAPAC,MAAmBC,EAEnBC,WAyJFV,EACAC,GAEI,OAAAA,EAAaU,QACR,KAELX,EAAYW,QACP,IAEF,IAlK2BC,CAClCZ,EACAC,GAMEY,GAAoB,EACpBC,GAAc,EAmDT,SAAAC,EAAWC,GAgElBT,EAAkBU,SAAW,CAAAC,SAAU,SAAUC,oBAvC1CC,EAED,OAAAb,EAAkBc,WAClBL,GACGT,EAAkBe,YACjBhD,EAC4B,EAA5BC,GAGF,MAAAgD,aA/BA,MAAAC,EAA0BpC,EAC9BqC,EACAL,UAEEA,GAECb,EAAkBe,YAAcE,GACjCE,GAICnB,EAAkBe,YAAcE,GACjCC,EAmBcE,UACdd,EAEAN,EAAkBc,YACjBL,GACET,EAAkBe,YAChB,EAAI,EAAKC,EACVjD,GACFC,GAGFuC,EAEAP,EAAkBc,WAClBL,GACGT,EAAkBe,YAChB,EAAI,EAAKC,EACVjD,GAINiC,EAAkBc,WAClBL,GACGT,EAAkBe,YACjBC,EAAY,EACZjD,EAC4B,EAA5BC,GAI+CqD,cAkBhDC,EAAgBC,EAAoBC,UAC3CvB,EAAawB,SAAS,wBAAyBF,GACxCC,WAqBAE,EACPF,EACAG,UAEIH,EAAMpB,SACRwB,EAAA,GAAAzB,EAAgBwB,GAEXH,EAGTK,GAAO,KACLvC,EAAYwC,SAAYC,IACtBL,EAAuBK,EAAG,IAAG,EAE/BtC,EAAYqC,SAAYC,IACtBL,EAAuBK,EAAG,IAAG,EAE/BrC,EAAaoC,SAAYC,IACvBL,EAAuBK,EAAG,KAAI,oQA5KjCH,EAAA,EAAEI,EAAgB3C,EAAS4C,KAAKC,MAAM7C,GAAK,0BAC3CuC,EAAA,GAAEO,EAAkB/C,EACjBgD,OAAOC,OAEL,GAAA1C,EACAsC,KAAKC,MAAM9C,IAEbO,qBACHiC,EAAA,GAAEU,EAAoBN,eAAAA,EAAepE,oCAEnCsD,EAA8BiB,EAAgBhC,GAAerB,qCAC/D8C,EAAA,GAAEf,EACDsB,EAAgBhC,GAAeN,qBAAsB,0BACpD+B,EAAA,EAAAW,EACDD,EAAoBpB,EAChBA,EACAoB,0BAELV,EAAA,EAAET,EAAqCN,EACpCK,EAA8B,GAC9BA,+BAEDsB,EAAyB3D,EAC1BqC,EACAL,sBAECe,EAAA,GAAAa,GACDF,EAKqB,GAAKxE,wCAqF1ByC,EAAW,eAIXA,GAAY,eAIZoB,EAAA,EAAAtB,GAAoBN,eAAAA,EAAmBc,aAAc,GACrDc,EAAA,EAAArB,GACEP,eAAAA,EAAmB0C,cAAc1C,eAAAA,EAAmBc,aACpDd,EAAkB2C,gBAOb,SAAgBnB,UACvBvB,EAAawB,SAAS,wBAAuB,CAAA,GACtCD,iBA4GU,CAAAD,EAAAC,IAAUF,EAAgBC,EAAMC,2CAjBtCxB,EAAiB4C"}

package/public/bricoman/components/carousel/Carousel.svelte ADDED Viewed

@@ -0,0 +1,414 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import type {
+    CarouselDevice,
+    CarouselItem,
+    CarouselOptions,
+    CarouselTitleTag,
+  } from './carousel.types';
+  import Link from '../link/Link.nested.svelte';
+  import CarouselCard from './CarouselCard.nested.svelte';
+  import Button from '../button/Button.nested.svelte';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import { onMount } from 'svelte';
+  export let title: string;
+  export let titletag: CarouselTitleTag = 'h1';
+  export let subtitlelink: string;
+  export let mobile = false;
+  export let options: string;
+  export let items: string;
+  const mediaQueryS: MediaQueryList = window.matchMedia('(max-width: 679px)');
+  const mediaQueryM: MediaQueryList = window.matchMedia(
+    '(min-width: 680px) and (max-width: 1279px)',
+  );
+  const mediaQueryXL: MediaQueryList = window.matchMedia('(min-width: 1280px)');
+  // default options for all 3 screen sizes (s = <m ; m = >=m to <xl ; xl  = >=xl)
+  const defaultCarouselOptions: CarouselOptions = {
+    s: {
+      itemsVisible: 1,
+      hasHalfItemVisible: true,
+    },
+    m: {
+      itemsVisible: 3,
+      hasHalfItemVisible: false,
+    },
+    xl: {
+      itemsVisible: 5,
+      hasHalfItemVisible: false,
+    },
+  };
+  // size using to separate item. Useful for gap in css and for move the scroll.
+  let betweenItemsPixelSize = 16;
+  // needed padding to display the outlined focus border on carousel items
+  let accessibilityFocusPadding = 4;
+  let eventHandler = new EventHandler();
+  let currentDevice: CarouselDevice = initCurrentDevice(
+    mediaQueryM,
+    mediaQueryXL,
+  );
+  let carouselContainer: HTMLDivElement;
+  let carouselScrollbarLeft = 0;
+  let isScrollBeginning = true;
+  let isScrollEnd = false;
+  $: carouselItems = items ? (JSON.parse(items) as CarouselItem[]) : [];
+  $: carouselOptions = options
+    ? Object.assign(
+        {},
+        defaultCarouselOptions,
+        JSON.parse(options) as CarouselOptions,
+      )
+    : defaultCarouselOptions;
+  $: carouselItemsSize = carouselItems?.length;
+  $: carouselCurrentItemsVisible = carouselOptions[currentDevice].itemsVisible;
+  $: carouselCurrentHasHalfItemVisible =
+    carouselOptions[currentDevice].hasHalfItemVisible || false;
+  $: carouselCurrentItemsSize =
+    carouselItemsSize < carouselCurrentItemsVisible
+      ? carouselCurrentItemsVisible
+      : carouselItemsSize;
+  $: carouselCurrentItemsVisibleAndHalf = carouselCurrentHasHalfItemVisible
+    ? carouselCurrentItemsVisible + 0.5
+    : carouselCurrentItemsVisible;
+  $: carouselItemWidthSpace = getCarouselItemsWidthSpace(
+    carouselCurrentItemsVisible,
+    carouselCurrentHasHalfItemVisible,
+  );
+  $: carouselContainerWidthSpace = getCarouselContainerWidthSpace(
+    carouselCurrentItemsSize,
+  );
+  /* returns the total size of the spacing between items for the big container */
+  function getCarouselContainerWidthSpace(totalItems: number) {
+    return (totalItems - 1) * betweenItemsPixelSize;
+  }
+  /* returns the total size of the spacing between items for the screen size */
+  function getCarouselItemsWidthSpace(
+    itemsVisible: number,
+    itemsAndHalfVisible: boolean,
+  ) {
+    if (itemsAndHalfVisible) {
+      return itemsVisible * betweenItemsPixelSize;
+    }
+    return (itemsVisible - 1) * betweenItemsPixelSize;
+  }
+  /* move the scroll to change the displaying items.
+     1 to move right, -1 to move left
+     */
+  function moveScroll(signe: 1 | -1) {
+    /* returns the size in pixel of an item according to screen size and the number of items visible. */
+    function getCarouselItemWidth() {
+      const carouselItemsWidthSpace = getCarouselItemsWidthSpace(
+        carouselCurrentItemsVisible,
+        carouselCurrentHasHalfItemVisible,
+      );
+      if (carouselCurrentHasHalfItemVisible) {
+        return (
+          (carouselContainer.clientWidth - carouselItemsWidthSpace) /
+          carouselCurrentItemsVisibleAndHalf
+        );
+      } else {
+        return (
+          (carouselContainer.clientWidth - carouselItemsWidthSpace) /
+          carouselCurrentItemsVisible
+        );
+      }
+    }
+    /* returns the new left position of the scrollbar
+     *  in the case of visible half items, the calculation depends if the carousel is at the beginnind, at the end or in the middle.
+     *
+     */
+    function getLeft() {
+      if (!carouselCurrentHasHalfItemVisible) {
+        return (
+          carouselContainer.scrollLeft +
+          signe *
+            (carouselContainer.clientWidth +
+              betweenItemsPixelSize -
+              accessibilityFocusPadding * 2)
+        );
+      }
+      const itemWidth = getCarouselItemWidth();
+      if (isScrollBeginning) {
+        return (
+          carouselContainer.scrollLeft +
+          (signe *
+            (carouselContainer.clientWidth -
+              (3 / 4) * itemWidth -
+              betweenItemsPixelSize) +
+            accessibilityFocusPadding)
+        );
+      }
+      if (isScrollEnd) {
+        return (
+          carouselContainer.scrollLeft +
+          signe *
+            (carouselContainer.clientWidth -
+              (3 / 4) * itemWidth -
+              betweenItemsPixelSize)
+        );
+      }
+      return (
+        carouselContainer.scrollLeft +
+        signe *
+          (carouselContainer.clientWidth -
+            itemWidth / 2 -
+            betweenItemsPixelSize +
+            accessibilityFocusPadding * 2)
+      );
+    }
+    carouselContainer.scrollTo({ behavior: 'smooth', left: getLeft() });
+  }
+  function nextCards() {
+    moveScroll(1);
+  }
+  function previousCards() {
+    moveScroll(-1);
+  }
+  function handleScrollCarousel() {
+    isScrollBeginning = carouselContainer?.scrollLeft <= 0;
+    isScrollEnd =
+      carouselContainer?.scrollWidth - carouselContainer?.scrollLeft <=
+      carouselContainer.offsetWidth;
+  }
+  function handleClickCard(item: CarouselItem, event: MouseEvent): MouseEvent {
+    eventHandler.dispatch('carousel-item-clicked', item);
+    return event;
+  }
+  function handleClickLink(event: MouseEvent): MouseEvent {
+    eventHandler.dispatch('carousel-link-clicked', {});
+    return event;
+  }
+  // returns device according to screen size
+  function initCurrentDevice(
+    mediaQueryM: MediaQueryList,
+    mediaQueryXL: MediaQueryList,
+  ) {
+    if (mediaQueryXL.matches) {
+      return 'xl';
+    }
+    if (mediaQueryM.matches) {
+      return 'm';
+    }
+    return 's';
+  }
+  function handleMediaQueryChange(
+    event: MediaQueryListEvent,
+    matchingDevice: CarouselDevice,
+  ): MediaQueryListEvent {
+    if (event.matches) {
+      currentDevice = matchingDevice;
+    }
+    return event;
+  }
+  onMount(() => {
+    mediaQueryS.onchange = (e) => {
+      handleMediaQueryChange(e, 's');
+    };
+    mediaQueryM.onchange = (e) => {
+      handleMediaQueryChange(e, 'm');
+    };
+    mediaQueryXL.onchange = (e) => {
+      handleMediaQueryChange(e, 'xl');
+    };
+  });
+</script>
+<div class="mc-carousel">
+  <div class="mc-carousel__header">
+    <div class="mc-carousel__titles">
+      {@html `<${titletag} style="margin:0">${title}</${titletag}>`}
+      <div class="mc-carousel__subtitle">
+        <Link
+          href="#layer"
+          iconname="navigation-arrow-arrow--right-24px"
+          iconposition="right"
+          label={subtitlelink}
+          on:click={handleClickLink}
+          size="s"
+          target="_self"
+        />
+      </div>
+    </div>
+    <nav
+      aria-label="pagination"
+      class="mc-carousel__nav {mobile
+        ? 'mc-carousel__nav--mobile'
+        : 'mc-carousel__nav--desktop'}"
+    >
+      <Button
+        theme="neutral"
+        size="s"
+        bordered={true}
+        iconmode="only"
+        iconname="navigation-arrow-arrow--left-32px"
+        aria-label="Previous page"
+        disabled={isScrollBeginning}
+        on:click={previousCards}
+        label="Previous"
+        loader=""
+      />
+      <Button
+        theme="neutral"
+        size="s"
+        type="button"
+        bordered={true}
+        disabled={isScrollEnd}
+        iconmode="only"
+        iconname="navigation-arrow-arrow--right-32px"
+        aria-label="Next Page"
+        on:click={nextCards}
+        label="Next"
+        loader=""
+      />
+    </nav>
+  </div>
+  <div
+    class="mc-carousel__body"
+    bind:this={carouselContainer}
+    on:scroll={handleScrollCarousel}
+    style="--carousel__accessibility-focus-padding: {accessibilityFocusPadding}px;"
+  >
+    <div
+      class="mc-carousel__content"
+      style="
+             --carousel__container-width-space: {carouselContainerWidthSpace}px;
+             --carousel__items-count: {carouselCurrentItemsSize};
+             --carousel__item-width-space: {carouselItemWidthSpace}px;
+             --carousel__items-visible: {carouselCurrentItemsVisibleAndHalf};
+             --carousel__scrollbar-left: {carouselScrollbarLeft};
+             --carousel__container-separate-item-size: {betweenItemsPixelSize}px;"
+    >
+      {#each carouselItems as item}
+        <button
+          class="mc-carousel__item"
+          on:click={(event) => handleClickCard(item, event)}
+        >
+          <CarouselCard
+            title={item.title}
+            imgSrc={item.imgSrc}
+            imgAlt={item.imgAlt}
+          />
+        </button>
+      {/each}
+    </div>
+  </div>
+</div>
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.button';
+  @import '@mozaic-ds/styles/components/c.links';
+  @import '@mozaic-ds/styles/components/c.pagination';
+  .mc-carousel {
+    display: flex;
+    flex-direction: column;
+    gap: $mu100;
+    &__header {
+      /* Auto layout */
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+    }
+    &__titles {
+      display: flex;
+      flex-direction: column;
+      gap: $mu025;
+    }
+    &__nav {
+      gap: $mu050;
+      &--mobile {
+        display: none;
+      }
+      &--desktop {
+        display: flex;
+      }
+    }
+    &__body {
+      position: relative;
+      overflow-x: auto;
+      overflow-y: hidden;
+      padding: var(--carousel__accessibility-focus-padding);
+    }
+    &__content {
+      display: flex;
+      flex-wrap: nowrap;
+      column-gap: var(--carousel__container-separate-item-size);
+      // the total size of the big container for all items: taille d'un item * le nbre d'items + espace entre chaque item
+      width: calc(
+        (
+            (100% - var(--carousel__item-width-space)) /
+              var(--carousel__items-visible)
+          ) * var(--carousel__items-count) +
+          var(--carousel__container-width-space)
+      );
+      margin-bottom: $mu125;
+    }
+    &__item {
+      display: flex;
+      background: none;
+      border: none;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      // taille d'un item: (100% - les espaces entre chaque item isible) / le nombre d'items visible
+      width: calc(
+        (100% - var(--carousel__item-width-space)) /
+          var(--carousel__items-visible)
+      );
+      @include set-focus-floating-base();
+      &:focus {
+        @include set-focus-floating();
+      }
+    }
+    &-footer {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  ::-webkit-scrollbar {
+    border-radius: $mu025;
+    height: 6px;
+    background: $color-grey-100;
+    border-top: 1px solid white;
+    border-bottom: 1px solid white;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: $color-grey-800;
+    border-radius: 6px;
+  }
+</style>

package/public/bricoman/components/carousel/CarouselCard.nested.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{E as e,i as o,s as t,F as s,c as l,e as i,d as a,t as r,g as k,$ as c,h as d,v as m,b as g,j as n,k as v,m as q,n as f,o as b,p as x,q as p}from"../../index-52f16292.js";function u(e){s(e,"svelte-1gooqkk",'.mc-card.svelte-1gooqkk.svelte-1gooqkk{font-family:"LeroyMerlin", sans-serif;max-width:17.75rem}.mc-card.svelte-1gooqkk.svelte-1gooqkk,.mc-card.svelte-1gooqkk .svelte-1gooqkk{-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (min-width: 680px){.mc-card.svelte-1gooqkk.svelte-1gooqkk{max-width:18.25rem}}@media screen and (min-width: 1024px){.mc-card.svelte-1gooqkk.svelte-1gooqkk{max-width:18rem}}@media screen and (min-width: 1280px){.mc-card.svelte-1gooqkk.svelte-1gooqkk{max-width:17.5rem}}@media screen and (min-width: 1920px){.mc-card.svelte-1gooqkk.svelte-1gooqkk{max-width:27.25rem}}.mc-card__visual.svelte-1gooqkk.svelte-1gooqkk{margin:0;overflow:hidden;position:relative}.mc-card__visual.svelte-1gooqkk.svelte-1gooqkk::before{content:"";display:block;width:100%;padding-top:75%}.mc-card__visual--1x1.svelte-1gooqkk.svelte-1gooqkk::before{padding-top:100%}.mc-card__visual--16x9.svelte-1gooqkk.svelte-1gooqkk::before{padding-top:56.25%}.mc-card__img.svelte-1gooqkk.svelte-1gooqkk{height:auto;left:0;position:absolute;top:50%;width:100%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.mc-card__content.svelte-1gooqkk.svelte-1gooqkk{padding-top:1rem}.mc-card__title.svelte-1gooqkk.svelte-1gooqkk,.mc-card__subtitle.svelte-1gooqkk.svelte-1gooqkk{margin-top:0;margin-bottom:0.5rem}.mc-card__title.svelte-1gooqkk.svelte-1gooqkk{font-size:1.125rem;line-height:1.3333333333;font-weight:600;color:#000000}.mc-card__subtitle.svelte-1gooqkk.svelte-1gooqkk{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-card__body.svelte-1gooqkk.svelte-1gooqkk{font-size:1rem;line-height:1.375;color:#191919}.mc-card__body.svelte-1gooqkk.svelte-1gooqkk:not(:last-child){margin-bottom:1rem}.mc-card--bordered.svelte-1gooqkk.svelte-1gooqkk{background:#ffffff;border:2px solid #808080;border-radius:0.25rem;overflow:hidden}.mc-card--fluid.svelte-1gooqkk.svelte-1gooqkk{max-width:none}.mc-carousel-card.svelte-1gooqkk.svelte-1gooqkk{font-family:"LeroyMerlin", sans-serif;font-weight:400;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:0.5rem;gap:0.25rem;border:1px solid #666666;border-radius:0.25rem}.mc-carousel-card.svelte-1gooqkk .mc-carousel-card__image.svelte-1gooqkk{width:100%}')}function h(e){let o,t,s,x,p,u,h,_=[e[3],{class:"mc-carousel-card"}],w={};for(let e=0;e<_.length;e+=1)w=l(w,_[e]);return{c(){o=i("div"),t=i("picture"),s=i("img"),p=a(),u=i("div"),h=r(e[0]),k(s,"class","mc-carousel-card__image svelte-1gooqkk"),c(s.src,x=e[1])\|\|k(s,"src",x),k(s,"alt",e[2]),k(t,"class","svelte-1gooqkk"),k(u,"class","mc-carousel-card__title svelte-1gooqkk"),d(o,w),m(o,"svelte-1gooqkk",!0)},m(e,l){g(e,o,l),n(o,t),n(t,s),n(o,p),n(o,u),n(u,h)},p(e,[t]){2&t&&!c(s.src,x=e[1])&&k(s,"src",x),4&t&&k(s,"alt",e[2]),1&t&&v(h,e[0]),d(o,w=q(_,[8&t&&e[3],{class:"mc-carousel-card"}])),m(o,"svelte-1gooqkk",!0)},i:f,o:f,d(e){e&&b(o)}}}function _(e,o,t){let s;const i=["title","imgSrc","imgAlt"];let a=x(o,i),{title:r}=o,{imgSrc:k}=o,{imgAlt:c}=o;return e.$$set=e=>{o=l(l({},o),p(e)),t(4,a=x(o,i)),"title"in e&&t(0,r=e.title),"imgSrc"in e&&t(1,k=e.imgSrc),"imgAlt"in e&&t(2,c=e.imgAlt)},e.$$.update=()=>{t(3,s=Object.assign({},a))},[r,k,c,s]}class w extends e{constructor(e){super(),o(this,e,_,h,t,{title:0,imgSrc:1,imgAlt:2},u)}}export{w as default};
2	+ //# sourceMappingURL=CarouselCard.nested.js.map

package/public/bricoman/components/carousel/CarouselCard.nested.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CarouselCard.nested.js","sources":["../../../../src/components/carousel/CarouselCard.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n export let title: string;\n export let imgSrc: string;\n export let imgAlt: string;\n $: attributes = { ...$$restProps };\n</script>\n\n<div {...attributes} class=\"mc-carousel-card\">\n <picture>\n <img class=\"mc-carousel-card__image\" src={imgSrc} alt={imgAlt} />\n </picture>\n <div class=\"mc-carousel-card__title\">{title}</div>\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import '@mozaic-ds/styles/components/c.card';\n\n .mc-carousel-card {\n $parent: get-parent-selector(&);\n @include set-font-face();\n\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: $mu050;\n gap: $mu025;\n border: 1px solid $color-grey-600;\n border-radius: $mu025;\n\n #{$parent}__image {\n width: 100%;\n }\n }\n</style>\n"],"names":["ctx","class","attr","img","img_src_value","insert","target","div1","anchor","append","picture","div0","title","$$props","imgSrc","imgAlt","attributes","Object","assign","$$restProps"],"mappings":"woFASSA,EAAU,GAAA,CAAAC,MAAA,uIAIqBD,EAAK,oEAFCA,EAAM,KAAAE,EAAAC,EAAA,MAAAC,aAAOJ,EAAM,gIAFjEK,EAKKC,EAAAC,EAAAC,GAJHC,EAESF,EAAAG,GADPD,EAAgEC,EAAAP,UAElEM,EAAiDF,EAAAI,oCAFLX,EAAM,iCAAOA,EAAM,aAEzBA,EAAK,oBAJpCA,EAAU,kKANNY,GAAaC,UACbC,GAAcD,UACdE,GAAcF,mKACtBG,EAALC,OAAAC,UAAuBC,GAAW"}

package/public/bricoman/components/carousel/carousel.types.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+export type CarouselTitleTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type CarouselDevice = 's' | 'm' | 'xl';
+export type CarouselOptions = {
+    s: ItemOptions;
+    m: ItemOptions;
+    xl: ItemOptions;
+};
+type ItemOptions = {
+    itemsVisible: number;
+    hasHalfItemVisible?: boolean;
+};
+export type CarouselItem = {
+    id?: string;
+    title: string;
+    imgSrc: string;
+    imgAlt: string;
+};
+export {};
+//# sourceMappingURL=carousel.types.d.ts.map

package/public/bricoman/components/carousel/carousel.types.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"carousel.types.d.ts","sourceRoot":"","sources":["../../../../src/components/carousel/carousel.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvE,MAAM,MAAM,cAAc,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG;IAC1B,CAAC,EAAE,WAAW,CAAC;IACf,CAAC,EAAE,WAAW,CAAC;IACf,EAAE,EAAE,WAAW,CAAC;CACnB,CAAA;AAED,KAAK,WAAW,GAAG;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB,CAAA"}