@mozaic-ds/web-components 0.4.1-beta.0 → 0.5.0

package/public/components/quantityselector/QuantitySelector.js

@@ -1,2 +1,334 @@
-import{S as t,i as e,a as i,b as o,f as n,s as m,c as r,e as c,d as l,n as a,g as d,h as s,j as h,U as u,l as b,B as p,Y as g,aa as f,m as x,o as w,H as _,p as y,r as z,q as v}from"../../index-c33b3772.js";import{E as k}from"../../EventHandler-02058705.js";import{c as M}from"../../EventForward-8492ff62.js";function I(t){let e,i,n,m,y,z,v,k,M,I,A,D,q,j,E,$=[{class:"mc-quantity-selector"},t[10]],C={};for(let t=0;t<$.length;t+=1)C=r(C,$[t]);return{c(){e=c("div"),i=c("button"),n=c("span"),n.innerHTML='<navigation-control-less-32px size="100%"></navigation-control-less-32px>',z=l(),v=c("input"),M=l(),I=c("button"),A=c("span"),A.innerHTML='<navigation-control-more-32px size="100%"></navigation-control-more-32px>',this.c=a,d(n,"class","mc-button__icon"),d(i,"aria-controls",t[1]),d(i,"class",m="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left "+(t[5]?"mc-button--s":"")),d(i,"aria-label","Decrement"),i.disabled=y=t[0]===t[2],d(v,"id",t[1]),d(v,"placeholder",t[4]),d(v,"type","number"),d(v,"name","quantity-selector-input"),d(v,"class",k="mc-text-input mc-quantity-selector__input "+(t[5]?"mc-button--s":"")),d(v,"aria-label","QuantitySelector"),d(v,"aria-valuemin",t[2]),d(v,"aria-valuemax",t[3]),d(v,"aria-valuenow",t[0]),d(v,"spellcheck","false"),d(A,"class","mc-button__icon"),d(I,"aria-controls",t[1]),d(I,"class",D="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right "+(t[5]?"mc-button--s":"")),d(I,"aria-label","Increment"),I.disabled=q=t[0]===t[3],s(e,C)},m(m,r){o(m,e,r),h(e,i),h(i,n),h(e,z),h(e,v),u(v,t[0]),h(e,M),h(e,I),h(I,A),j||(E=[b(i,"click",t[11]),p(t[6].call(null,v)),b(v,"input",t[12]),b(v,"input",g(t[7])),b(I,"click",t[13])],j=!0)},p(t,[o]){2&o&&d(i,"aria-controls",t[1]),32&o&&m!==(m="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left "+(t[5]?"mc-button--s":""))&&d(i,"class",m),5&o&&y!==(y=t[0]===t[2])&&(i.disabled=y),2&o&&d(v,"id",t[1]),16&o&&d(v,"placeholder",t[4]),32&o&&k!==(k="mc-text-input mc-quantity-selector__input "+(t[5]?"mc-button--s":""))&&d(v,"class",k),4&o&&d(v,"aria-valuemin",t[2]),8&o&&d(v,"aria-valuemax",t[3]),1&o&&d(v,"aria-valuenow",t[0]),1&o&&f(v.value)!==t[0]&&u(v,t[0]),2&o&&d(I,"aria-controls",t[1]),32&o&&D!==(D="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right "+(t[5]?"mc-button--s":""))&&d(I,"class",D),9&o&&q!==(q=t[0]===t[3])&&(I.disabled=q),s(e,C=x($,[{class:"mc-quantity-selector"},1024&o&&t[10]]))},i:a,o:a,d(t){t&&w(e),j=!1,_(E)}}}function A(t,e,i){const o=["id","quantity","valuemin","valuemax","placeholder","small"];let n=y(e,o),{id:m}=e,{quantity:c=1}=e,{valuemin:l=1}=e,{valuemax:a=100}=e,{placeholder:d}=e,{small:s=!1}=e,h=new k;const u=M(z());function b(){c>l&&i(0,c--,c),h.dispatch("decrement",c)}function p(){c<a&&i(0,c++,c),h.dispatch("increment",c)}return t.$$set=t=>{e=r(r({},e),v(t)),i(10,n=y(e,o)),"id"in t&&i(1,m=t.id),"quantity"in t&&i(0,c=t.quantity),"valuemin"in t&&i(2,l=t.valuemin),"valuemax"in t&&i(3,a=t.valuemax),"placeholder"in t&&i(4,d=t.placeholder),"small"in t&&i(5,s=t.small)},[c,m,l,a,d,s,u,function(){c>a&&i(0,c=a),c<l&&i(0,c=l),h.dispatch("input",c)},b,p,n,()=>b(),function(){c=f(this.value),i(0,c)},()=>p()]}class D extends t{constructor(t){super();const r=document.createElement("style");r.textContent='.mc-text-input{font-family:"LeroyMerlin", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:none;font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem;-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;display:block;width:100%;position:relative;border:1px solid #666666;color:#191919;background-color:#ffffff;border-radius:4px}.mc-text-input[type=number]::-webkit-inner-spin-button,.mc-text-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.mc-text-input[type=number]{-moz-appearance:textfield}.mc-text-input[type=search]::-webkit-search-decoration:hover,.mc-text-input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-text-input::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input::placeholder{font-size:1rem;line-height:1.375}.mc-text-input::-webkit-input-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input::-moz-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input:-ms-input-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input::-ms-input-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input::placeholder{margin:0;color:#666666;opacity:1}.mc-text-input.is-valid,.mc-text-input.is-invalid{background-repeat:no-repeat;background-size:1.5rem 1.5rem;background-position:right 0.4375rem center;padding-right:2.5rem}.mc-text-input.is-valid{border-color:#46a610;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNDZhNjEwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+")}.mc-text-input.is-valid:hover,.mc-text-input.is-valid.is-hover{border-color:#035010}.mc-text-input.is-invalid{border-color:#c61112;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==")}.mc-text-input.is-invalid:hover,.mc-text-input.is-invalid.is-hover{border-color:#530000}.mc-text-input.is-hover,.mc-text-input:hover{border-color:#191919}.mc-text-input.is-focus,.mc-text-input: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-text-input:disabled{background:#e6e6e6;border-color:#e6e6e6;color:#666666;cursor:not-allowed}.mc-text-input--s{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m::placeholder{font-size:1rem;line-height:1.375}@media screen and (min-width: 680px){.mc-text-input--s\\@from-m{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-m::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-m{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-m::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-text-input--s\\@from-l{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-l::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-l{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-l::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-text-input--s\\@from-xl{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-xl::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-xl{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-xl::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-text-input--s\\@from-xxl{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-xxl::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-xxl{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-xxl::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl::placeholder{font-size:1rem;line-height:1.375}}.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:#188803;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:#006902;color:#ffffff}.mc-button.is-active,.mc-button:active{background-color:#006902}.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:#6a7081}.mc-button--solid-primary-02.is-hover,.mc-button--solid-primary-02:hover{background-color:#242938}.mc-button--solid-primary-02.is-active,.mc-button--solid-primary-02:active{background-color:#171b26}.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:#188803;border-color:#188803;background-color:#ffffff}.mc-button--bordered.is-hover,.mc-button--bordered:hover{background-color:#ebf5de;color:#006902}.mc-button--bordered.is-active,.mc-button--bordered:active{background-color:#c5e39e;color:#035010}.mc-button--bordered.is-active,.mc-button--bordered:active{background-color:#c5e39e;color:#035010}.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:#6a7081;border-color:#6a7081;background-color:#ffffff}.mc-button--bordered-primary-02.is-hover,.mc-button--bordered-primary-02:hover{background-color:#eeeff1;color:#6a7081}.mc-button--bordered-primary-02.is-active,.mc-button--bordered-primary-02:active{background-color:#cfd2d8}.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-quantity-selector{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mc-quantity-selector__button-right,.mc-quantity-selector__button-left{z-index:1}.mc-quantity-selector__button-right{border-radius:0 0.25rem 0.25rem 0}.mc-quantity-selector__button-left{border-radius:0.25rem 0 0 0.25rem}.mc-quantity-selector__input{border-radius:0}.mc-quantity-selector__input::-webkit-input-placeholder{text-align:center}.mc-quantity-selector__input::-moz-placeholder{text-align:center}.mc-quantity-selector__input:-ms-input-placeholder{text-align:center}.mc-quantity-selector__input::-ms-input-placeholder{text-align:center}.mc-quantity-selector__input,.mc-quantity-selector__input::placeholder{text-align:center}.mc-quantity-selector__input:not(:focus){border-left:none;border-right:none}.mc-quantity-selector__input:focus{z-index:2}',this.shadowRoot.appendChild(r),e(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},A,I,m,{id:1,quantity:0,valuemin:2,valuemax:3,placeholder:4,small:5},null),t&&(t.target&&o(t.target,this,t.anchor),t.props&&(this.$set(t.props),n()))}static get observedAttributes(){return["id","quantity","valuemin","valuemax","placeholder","small"]}get id(){return this.$$.ctx[1]}set id(t){this.$$set({id:t}),n()}get quantity(){return this.$$.ctx[0]}set quantity(t){this.$$set({quantity:t}),n()}get valuemin(){return this.$$.ctx[2]}set valuemin(t){this.$$set({valuemin:t}),n()}get valuemax(){return this.$$.ctx[3]}set valuemax(t){this.$$set({valuemax:t}),n()}get placeholder(){return this.$$.ctx[4]}set placeholder(t){this.$$set({placeholder:t}),n()}get small(){return this.$$.ctx[5]}set small(t){this.$$set({small:t}),n()}}export{D as default};
+import { S as SvelteElement, i as init, a as attribute_to_object, b as insert, f as flush, s as safe_not_equal, c as assign, e as element, d as space, n as noop, g as attr, h as set_attributes, j as append, U as set_input_value, l as listen, B as action_destroyer, Y as prevent_default, aa as to_number, m as get_spread_update, o as detach, H as run_all, p as compute_rest_props, r as get_current_component, q as exclude_internal_props } from '../../index-c33b3772.js';
+import { E as EventHandler } from '../../EventHandler-02058705.js';
+import { c as createEventForwarder } from '../../EventForward-8492ff62.js';
+
+/* src/components/quantityselector/QuantitySelector.svelte generated by Svelte v3.58.0 */
+
+function create_fragment(ctx) {
+	let div;
+	let button0;
+	let span0;
+	let button0_class_value;
+	let button0_disabled_value;
+	let t0;
+	let input;
+	let input_class_value;
+	let t1;
+	let button1;
+	let span1;
+	let button1_class_value;
+	let button1_disabled_value;
+	let mounted;
+	let dispose;
+	let div_levels = [{ class: "mc-quantity-selector" }, /*$$restProps*/ ctx[10]];
+	let div_data = {};
+
+	for (let i = 0; i < div_levels.length; i += 1) {
+		div_data = assign(div_data, div_levels[i]);
+	}
+
+	return {
+		c() {
+			div = element("div");
+			button0 = element("button");
+			span0 = element("span");
+			span0.innerHTML = `<navigation-control-less-32px size="100%"></navigation-control-less-32px>`;
+			t0 = space();
+			input = element("input");
+			t1 = space();
+			button1 = element("button");
+			span1 = element("span");
+			span1.innerHTML = `<navigation-control-more-32px size="100%"></navigation-control-more-32px>`;
+			this.c = noop;
+			attr(span0, "class", "mc-button__icon");
+			attr(button0, "aria-controls", /*id*/ ctx[1]);
+			attr(button0, "class", button0_class_value = "mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left " + (/*small*/ ctx[5] ? 'mc-button--s' : ''));
+			attr(button0, "aria-label", "Decrement");
+			button0.disabled = button0_disabled_value = /*quantity*/ ctx[0] === /*valuemin*/ ctx[2];
+			attr(input, "id", /*id*/ ctx[1]);
+			attr(input, "placeholder", /*placeholder*/ ctx[4]);
+			attr(input, "type", "number");
+			attr(input, "name", "quantity-selector-input");
+			attr(input, "class", input_class_value = "mc-text-input mc-quantity-selector__input " + (/*small*/ ctx[5] ? 'mc-button--s' : ''));
+			attr(input, "aria-label", "QuantitySelector");
+			attr(input, "aria-valuemin", /*valuemin*/ ctx[2]);
+			attr(input, "aria-valuemax", /*valuemax*/ ctx[3]);
+			attr(input, "aria-valuenow", /*quantity*/ ctx[0]);
+			attr(input, "spellcheck", "false");
+			attr(span1, "class", "mc-button__icon");
+			attr(button1, "aria-controls", /*id*/ ctx[1]);
+			attr(button1, "class", button1_class_value = "mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right " + (/*small*/ ctx[5] ? 'mc-button--s' : ''));
+			attr(button1, "aria-label", "Increment");
+			button1.disabled = button1_disabled_value = /*quantity*/ ctx[0] === /*valuemax*/ ctx[3];
+			set_attributes(div, div_data);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, button0);
+			append(button0, span0);
+			append(div, t0);
+			append(div, input);
+			set_input_value(input, /*quantity*/ ctx[0]);
+			append(div, t1);
+			append(div, button1);
+			append(button1, span1);
+
+			if (!mounted) {
+				dispose = [
+					listen(button0, "click", /*click_handler*/ ctx[11]),
+					action_destroyer(/*forwardEvents*/ ctx[6].call(null, input)),
+					listen(input, "input", /*input_input_handler*/ ctx[12]),
+					listen(input, "input", prevent_default(/*handleValue*/ ctx[7])),
+					listen(button1, "click", /*click_handler_1*/ ctx[13])
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*id*/ 2) {
+				attr(button0, "aria-controls", /*id*/ ctx[1]);
+			}
+
+			if (dirty & /*small*/ 32 && button0_class_value !== (button0_class_value = "mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left " + (/*small*/ ctx[5] ? 'mc-button--s' : ''))) {
+				attr(button0, "class", button0_class_value);
+			}
+
+			if (dirty & /*quantity, valuemin*/ 5 && button0_disabled_value !== (button0_disabled_value = /*quantity*/ ctx[0] === /*valuemin*/ ctx[2])) {
+				button0.disabled = button0_disabled_value;
+			}
+
+			if (dirty & /*id*/ 2) {
+				attr(input, "id", /*id*/ ctx[1]);
+			}
+
+			if (dirty & /*placeholder*/ 16) {
+				attr(input, "placeholder", /*placeholder*/ ctx[4]);
+			}
+
+			if (dirty & /*small*/ 32 && input_class_value !== (input_class_value = "mc-text-input mc-quantity-selector__input " + (/*small*/ ctx[5] ? 'mc-button--s' : ''))) {
+				attr(input, "class", input_class_value);
+			}
+
+			if (dirty & /*valuemin*/ 4) {
+				attr(input, "aria-valuemin", /*valuemin*/ ctx[2]);
+			}
+
+			if (dirty & /*valuemax*/ 8) {
+				attr(input, "aria-valuemax", /*valuemax*/ ctx[3]);
+			}
+
+			if (dirty & /*quantity*/ 1) {
+				attr(input, "aria-valuenow", /*quantity*/ ctx[0]);
+			}
+
+			if (dirty & /*quantity*/ 1 && to_number(input.value) !== /*quantity*/ ctx[0]) {
+				set_input_value(input, /*quantity*/ ctx[0]);
+			}
+
+			if (dirty & /*id*/ 2) {
+				attr(button1, "aria-controls", /*id*/ ctx[1]);
+			}
+
+			if (dirty & /*small*/ 32 && button1_class_value !== (button1_class_value = "mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right " + (/*small*/ ctx[5] ? 'mc-button--s' : ''))) {
+				attr(button1, "class", button1_class_value);
+			}
+
+			if (dirty & /*quantity, valuemax*/ 9 && button1_disabled_value !== (button1_disabled_value = /*quantity*/ ctx[0] === /*valuemax*/ ctx[3])) {
+				button1.disabled = button1_disabled_value;
+			}
+
+			set_attributes(div, div_data = get_spread_update(div_levels, [
+				{ class: "mc-quantity-selector" },
+				dirty & /*$$restProps*/ 1024 && /*$$restProps*/ ctx[10]
+			]));
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	const omit_props_names = ["id","quantity","valuemin","valuemax","placeholder","small"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { id = undefined } = $$props;
+	let { quantity = 1 } = $$props;
+	let { valuemin = 1 } = $$props;
+	let { valuemax = 100 } = $$props;
+	let { placeholder = undefined } = $$props;
+	let { small = false } = $$props;
+	let eventHandler = new EventHandler();
+	const forwardEvents = createEventForwarder(get_current_component());
+
+	function handleValue() {
+		if (quantity > valuemax) {
+			$$invalidate(0, quantity = valuemax);
+		}
+
+		if (quantity < valuemin) {
+			$$invalidate(0, quantity = valuemin);
+		}
+
+		eventHandler.dispatch('input', quantity);
+	}
+
+	function decrement() {
+		if (quantity > valuemin) {
+			$$invalidate(0, quantity--, quantity);
+		}
+
+		eventHandler.dispatch('decrement', quantity);
+	}
+
+	function increment() {
+		if (quantity < valuemax) {
+			$$invalidate(0, quantity++, quantity);
+		}
+
+		eventHandler.dispatch('increment', quantity);
+	}
+
+	const click_handler = () => decrement();
+
+	function input_input_handler() {
+		quantity = to_number(this.value);
+		$$invalidate(0, quantity);
+	}
+
+	const click_handler_1 = () => increment();
+
+	$$self.$$set = $$new_props => {
+		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
+		$$invalidate(10, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('id' in $$new_props) $$invalidate(1, id = $$new_props.id);
+		if ('quantity' in $$new_props) $$invalidate(0, quantity = $$new_props.quantity);
+		if ('valuemin' in $$new_props) $$invalidate(2, valuemin = $$new_props.valuemin);
+		if ('valuemax' in $$new_props) $$invalidate(3, valuemax = $$new_props.valuemax);
+		if ('placeholder' in $$new_props) $$invalidate(4, placeholder = $$new_props.placeholder);
+		if ('small' in $$new_props) $$invalidate(5, small = $$new_props.small);
+	};
+
+	return [
+		quantity,
+		id,
+		valuemin,
+		valuemax,
+		placeholder,
+		small,
+		forwardEvents,
+		handleValue,
+		decrement,
+		increment,
+		$$restProps,
+		click_handler,
+		input_input_handler,
+		click_handler_1
+	];
+}
+
+class QuantitySelector extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-text-input{font-family:"LeroyMerlin", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:none;font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem;-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;display:block;width:100%;position:relative;border:1px solid #666666;color:#191919;background-color:#ffffff;border-radius:4px}.mc-text-input[type=number]::-webkit-inner-spin-button,.mc-text-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.mc-text-input[type=number]{-moz-appearance:textfield}.mc-text-input[type=search]::-webkit-search-decoration:hover,.mc-text-input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-text-input::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input::placeholder{font-size:1rem;line-height:1.375}.mc-text-input::-webkit-input-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input::-moz-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input:-ms-input-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input::-ms-input-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input::placeholder{margin:0;color:#666666;opacity:1}.mc-text-input.is-valid,.mc-text-input.is-invalid{background-repeat:no-repeat;background-size:1.5rem 1.5rem;background-position:right 0.4375rem center;padding-right:2.5rem}.mc-text-input.is-valid{border-color:#46a610;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNDZhNjEwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+")}.mc-text-input.is-valid:hover,.mc-text-input.is-valid.is-hover{border-color:#035010}.mc-text-input.is-invalid{border-color:#c61112;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==")}.mc-text-input.is-invalid:hover,.mc-text-input.is-invalid.is-hover{border-color:#530000}.mc-text-input.is-hover,.mc-text-input:hover{border-color:#191919}.mc-text-input.is-focus,.mc-text-input: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-text-input:disabled{background:#e6e6e6;border-color:#e6e6e6;color:#666666;cursor:not-allowed}.mc-text-input--s{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m::placeholder{font-size:1rem;line-height:1.375}@media screen and (min-width: 680px){.mc-text-input--s\\@from-m{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-m::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-m{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-m::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-text-input--s\\@from-l{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-l::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-l{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-l::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-text-input--s\\@from-xl{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-xl::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-xl{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-xl::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-text-input--s\\@from-xxl{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-xxl::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-xxl{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-xxl::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl::placeholder{font-size:1rem;line-height:1.375}}.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:#188803;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:#006902;color:#ffffff}.mc-button.is-active,.mc-button:active{background-color:#006902}.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:#6a7081}.mc-button--solid-primary-02.is-hover,.mc-button--solid-primary-02:hover{background-color:#242938}.mc-button--solid-primary-02.is-active,.mc-button--solid-primary-02:active{background-color:#171b26}.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:#188803;border-color:#188803;background-color:#ffffff}.mc-button--bordered.is-hover,.mc-button--bordered:hover{background-color:#ebf5de;color:#006902}.mc-button--bordered.is-active,.mc-button--bordered:active{background-color:#c5e39e;color:#035010}.mc-button--bordered.is-active,.mc-button--bordered:active{background-color:#c5e39e;color:#035010}.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:#6a7081;border-color:#6a7081;background-color:#ffffff}.mc-button--bordered-primary-02.is-hover,.mc-button--bordered-primary-02:hover{background-color:#eeeff1;color:#6a7081}.mc-button--bordered-primary-02.is-active,.mc-button--bordered-primary-02:active{background-color:#cfd2d8}.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-quantity-selector{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mc-quantity-selector__button-right,.mc-quantity-selector__button-left{z-index:1}.mc-quantity-selector__button-right{border-radius:0 0.25rem 0.25rem 0}.mc-quantity-selector__button-left{border-radius:0.25rem 0 0 0.25rem}.mc-quantity-selector__input{border-radius:0}.mc-quantity-selector__input::-webkit-input-placeholder{text-align:center}.mc-quantity-selector__input::-moz-placeholder{text-align:center}.mc-quantity-selector__input:-ms-input-placeholder{text-align:center}.mc-quantity-selector__input::-ms-input-placeholder{text-align:center}.mc-quantity-selector__input,.mc-quantity-selector__input::placeholder{text-align:center}.mc-quantity-selector__input:not(:focus){border-left:none;border-right:none}.mc-quantity-selector__input:focus{z-index:2}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				id: 1,
+				quantity: 0,
+				valuemin: 2,
+				valuemax: 3,
+				placeholder: 4,
+				small: 5
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["id", "quantity", "valuemin", "valuemax", "placeholder", "small"];
+	}
+
+	get id() {
+		return this.$$.ctx[1];
+	}
+
+	set id(id) {
+		this.$$set({ id });
+		flush();
+	}
+
+	get quantity() {
+		return this.$$.ctx[0];
+	}
+
+	set quantity(quantity) {
+		this.$$set({ quantity });
+		flush();
+	}
+
+	get valuemin() {
+		return this.$$.ctx[2];
+	}
+
+	set valuemin(valuemin) {
+		this.$$set({ valuemin });
+		flush();
+	}
+
+	get valuemax() {
+		return this.$$.ctx[3];
+	}
+
+	set valuemax(valuemax) {
+		this.$$set({ valuemax });
+		flush();
+	}
+
+	get placeholder() {
+		return this.$$.ctx[4];
+	}
+
+	set placeholder(placeholder) {
+		this.$$set({ placeholder });
+		flush();
+	}
+
+	get small() {
+		return this.$$.ctx[5];
+	}
+
+	set small(small) {
+		this.$$set({ small });
+		flush();
+	}
+}
+
+export { QuantitySelector as default };
 //# sourceMappingURL=QuantitySelector.js.map

package/public/components/quantityselector/QuantitySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.js","sources":["../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  export let id: string | undefined = undefined;\n  export let quantity = 1;\n  export let valuemin = 1;\n  export let valuemax = 100;\n  export let placeholder: string | undefined = undefined;\n  export let small = false;\n\n  let eventHandler = new EventHandler();\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  function handleValue(): void {\n    if (quantity > valuemax) {\n      quantity = valuemax;\n    }\n    if (quantity < valuemin) {\n      quantity = valuemin;\n    }\n    eventHandler.dispatch('input', quantity);\n  }\n\n  function decrement(): void {\n    if (quantity > valuemin) {\n      quantity--;\n    }\n    eventHandler.dispatch('decrement', quantity);\n  }\n\n  function increment(): void {\n    if (quantity < valuemax) {\n      quantity++;\n    }\n    eventHandler.dispatch('increment', quantity);\n  }\n</script>\n\n<div class=\"mc-quantity-selector\" {...$$restProps}>\n  <button\n    aria-controls={id}\n    class=\"mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left {small\n      ? 'mc-button--s'\n      : ''}\"\n    aria-label=\"Decrement\"\n    on:click={() => decrement()}\n    disabled={quantity === valuemin}\n  >\n    <span class=\"mc-button__icon\">\n      <navigation-control-less-32px size=\"100%\" />\n    </span>\n  </button>\n\n  <input\n    use:forwardEvents\n    {id}\n    {placeholder}\n    bind:value={quantity}\n    on:input|preventDefault={handleValue}\n    type=\"number\"\n    name=\"quantity-selector-input\"\n    class=\"mc-text-input mc-quantity-selector__input {small\n      ? 'mc-button--s'\n      : ''}\"\n    aria-label=\"QuantitySelector\"\n    aria-valuemin={valuemin}\n    aria-valuemax={valuemax}\n    aria-valuenow={quantity}\n    spellcheck=\"false\"\n  />\n\n  <button\n    aria-controls={id}\n    class=\"mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right {small\n      ? 'mc-button--s'\n      : ''}\"\n    aria-label=\"Increment\"\n    on:click={() => increment()}\n    disabled={quantity === valuemax}\n  >\n    <span class=\"mc-button__icon\">\n      <navigation-control-more-32px size=\"100%\" />\n    </span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/_c.text-input';\n  @import '@mozaic-ds/styles/components/_c.button';\n  @import '@mozaic-ds/styles/components/_c.quantity-selector';\n</style>\n"],"names":["ctx","button0","disabled","button0_disabled_value","button1","button1_disabled_value","insert","target","div","anchor","append","span0","input","span1","dirty","id","$$props","quantity","valuemin","valuemax","placeholder","small","eventHandler","EventHandler","forwardEvents","createEventForwarder","get_current_component","decrement","dispatch","increment","$$invalidate","to_number","this","value"],"mappings":"sYAyCsCA,EAAW,iYAE9BA,EAAE,wGACyEA,EAAA,GACtF,eACA,mCAGMC,EAAAC,SAAAC,EAAAH,OAAaA,EAAQ,iKAemBA,EAAA,GAC9C,eACA,8DAEWA,EAAQ,wBACRA,EAAQ,wBACRA,EAAQ,iFAKRA,EAAE,yGAC0EA,EAAA,GACvF,eACA,mCAGMI,EAAAF,SAAAG,EAAAL,OAAaA,EAAQ,kBAxCnCM,EA8CKC,EAAAC,EAAAC,GA7CHC,EAYQF,EAAAP,GAHNS,EAEMT,EAAAU,UAGRD,EAgBCF,EAAAI,OAZaZ,EAAQ,WActBU,EAYQF,EAAAJ,GAHNM,EAEMN,EAAAS,mFAxBmBb,EAAW,kEAlBrBA,EAAE,uGACyEA,EAAA,GACtF,eACA,qBAGM,EAAAc,GAAAX,KAAAA,EAAAH,OAAaA,EAAQ,iIAemBA,EAAA,GAC9C,eACA,8CAEWA,EAAQ,6BACRA,EAAQ,6BACRA,EAAQ,sBAVXA,EAAQ,QAARA,EAAQ,6BAeLA,EAAE,wGAC0EA,EAAA,GACvF,eACA,qBAGM,EAAAc,GAAAT,KAAAA,EAAAL,OAAaA,EAAQ,sEAxCGA,EAAW,+IAnCpCe,GAAAA,GAAkCC,GAClCC,SAAAA,EAAW,GAACD,GACZE,SAAAA,EAAW,GAACF,GACZG,SAAAA,EAAW,KAAGH,GACdI,YAAAA,GAA2CJ,GAC3CK,MAAAA,GAAQ,GAAKL,EAEpBM,MAAmBC,QACjBC,EAAgBC,EAAqBC,cAYlCC,IACHV,EAAWC,OACbD,IAAQA,GAEVK,EAAaM,SAAS,YAAaX,YAG5BY,IACHZ,EAAWE,OACbF,IAAQA,GAEVK,EAAaM,SAAS,YAAaX,kRApB/BA,EAAWE,GACbW,EAAA,EAAAb,EAAWE,GAETF,EAAWC,GACbY,EAAA,EAAAb,EAAWC,GAEbI,EAAaM,SAAS,QAASX,cAyBfU,eAYJV,EAAQc,EAAAC,KAAAC,mBAoBJJ"}
+{"version":3,"file":"QuantitySelector.js","sources":["../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  export let id: string | undefined = undefined;\n  export let quantity = 1;\n  export let valuemin = 1;\n  export let valuemax = 100;\n  export let placeholder: string | undefined = undefined;\n  export let small = false;\n\n  let eventHandler = new EventHandler();\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  function handleValue(): void {\n    if (quantity > valuemax) {\n      quantity = valuemax;\n    }\n    if (quantity < valuemin) {\n      quantity = valuemin;\n    }\n    eventHandler.dispatch('input', quantity);\n  }\n\n  function decrement(): void {\n    if (quantity > valuemin) {\n      quantity--;\n    }\n    eventHandler.dispatch('decrement', quantity);\n  }\n\n  function increment(): void {\n    if (quantity < valuemax) {\n      quantity++;\n    }\n    eventHandler.dispatch('increment', quantity);\n  }\n</script>\n\n<div class=\"mc-quantity-selector\" {...$$restProps}>\n  <button\n    aria-controls={id}\n    class=\"mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left {small\n      ? 'mc-button--s'\n      : ''}\"\n    aria-label=\"Decrement\"\n    on:click={() => decrement()}\n    disabled={quantity === valuemin}\n  >\n    <span class=\"mc-button__icon\">\n      <navigation-control-less-32px size=\"100%\" />\n    </span>\n  </button>\n\n  <input\n    use:forwardEvents\n    {id}\n    {placeholder}\n    bind:value={quantity}\n    on:input|preventDefault={handleValue}\n    type=\"number\"\n    name=\"quantity-selector-input\"\n    class=\"mc-text-input mc-quantity-selector__input {small\n      ? 'mc-button--s'\n      : ''}\"\n    aria-label=\"QuantitySelector\"\n    aria-valuemin={valuemin}\n    aria-valuemax={valuemax}\n    aria-valuenow={quantity}\n    spellcheck=\"false\"\n  />\n\n  <button\n    aria-controls={id}\n    class=\"mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right {small\n      ? 'mc-button--s'\n      : ''}\"\n    aria-label=\"Increment\"\n    on:click={() => increment()}\n    disabled={quantity === valuemax}\n  >\n    <span class=\"mc-button__icon\">\n      <navigation-control-more-32px size=\"100%\" />\n    </span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/_c.text-input';\n  @import '@mozaic-ds/styles/components/_c.button';\n  @import '@mozaic-ds/styles/components/_c.quantity-selector';\n</style>\n"],"names":[],"mappings":"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"}