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

package/public/components/phonenumber/PhoneNumber.svelte

@@ -4,22 +4,34 @@
   import {
     parsePhoneNumber,
     formatIncompletePhoneNumber,
+    AsYouType,
+    CountryCode,
   } from 'libphonenumber-js';
+  import * as examples from 'libphonenumber-js/examples.mobile.json';
   import type { CountryItems } from './phonenumber.types';
   import { EventHandler } from '../../utilities/EventHandler';
+  import { onMount } from 'svelte';
+  import { clickOutside } from '../../utilities/ClickOutside';
+
   export let phonenumber: string;
   export let placeholder = '0102030405';
+  export let countrysearchplaceholder = 'Search Country';
   export let buttonId = 'dropdown_country';
   export let listId = 'phone_number_list';
   export let countries: string;
   export let selectedcountry: string;
   export let isvalid: boolean;
   export let isinvalid: boolean;
+  export let enablecountrysearch: boolean;
 
   let isCountriesListOpened = false;
   let maxlength = 25;
   let eventHandler = new EventHandler();
   let phoneNumber: string;
+  let searchcountrytext: string = '';
+  let rootElement: Element;
+  let selectedCountry: CountryItems;
+  let searchCountryDomElement: Element;
 
   $: selectedCountry = selectedcountry
     ? JSON.parse(selectedcountry)
@@ -33,15 +45,26 @@
     ? (JSON.parse(countries) as CountryItems[])
     : [];
 
-  $: phoneNumber = phonenumber ? getNumber() : '';
-
-  function getNumber(): string {
-    return parsePhoneNumber(
-      phonenumber,
-      selectedCountry.shortName,
-    ).formatNational();
+  $: if (isCountriesListOpened && searchCountryDomElement) {
+    scrollIntoSearchElement();
   }
+  $: placeholder = selectedCountry
+    ? getSelectedCountryPlaceholder()
+    : 'Search Country';
+
+  onMount(() => {
+    phoneNumber = phonenumber
+      ? parsePhoneNumber(
+          phonenumber,
+          selectedCountry?.shortName,
+        ).formatNational()
+      : phoneNumber;
+  });
 
+  function getSelectedCountryPlaceholder(): string {
+    const example = examples.default[selectedCountry.shortName as CountryCode];
+    return new AsYouType(selectedCountry.shortName).input(example);
+  }
   function dispatchEvent(
     eventName: string,
     data?: string | CountryItems,
@@ -92,7 +115,8 @@
         phoneNumberValue,
         selectedCountry.shortName,
       ).formatInternational();
-
+      isvalid = true;
+      isinvalid = false;
       dispatchEvent('blur', formatInternational);
     } catch (error) {
       const formatIncomplete: string = formatIncompletePhoneNumber(
@@ -153,15 +177,34 @@
         break;
     }
   }
+  function scrollIntoSearchElement(): void {
+    const searchElement = parsedCountries.find(
+      (country) =>
+        country.isd.toLowerCase().includes(searchcountrytext.toLowerCase()) ||
+        country.name.toLowerCase().includes(searchcountrytext.toLowerCase()),
+    );
+    const domElement = searchElement
+      ? (rootElement.querySelector(`li#${searchElement.shortName}`) as Element)
+      : (rootElement.querySelector(`li.mc-phone-number__item`) as Element);
+    domElement.scrollIntoView({
+      behavior: 'auto',
+      block: 'center',
+      inline: 'nearest',
+    });
+  }
 </script>
 
 <div
+  bind:this={rootElement}
   class="mc-phone-number
   {isCountriesListOpened ? ' mc-phone-number--focused' : ''}"
 >
   <div
     class="mc-phone-number__dropdown"
+    tabindex="-1"
     on:keydown={initKeyboardNav}
+    use:clickOutside
+    on:outclick={closeCountriesList}
     {...$$restProps}
   >
     <button
@@ -182,14 +225,29 @@
     {#if isCountriesListOpened}
       <ul
         id={listId}
-        tabindex="-1"
+        tabindex="0"
         role="listbox"
         aria-labelledby={listId}
         class="mc-phone-number__list"
         aria-activedescendant={selectedCountry.isd}
       >
+        {#if enablecountrysearch}
+          <input
+            id="searchfield"
+            type="text"
+            class="mc-phone-number__input mc-phone-number__flag-search-field  mc-text-input mc-text-input--m mc-field__input"
+            name="search-country-input"
+            spellcheck="false"
+            bind:value={searchcountrytext}
+            on:input={scrollIntoSearchElement}
+            placeholder={countrysearchplaceholder}
+            on:focus|preventDefault={scrollIntoSearchElement}
+            bind:this={searchCountryDomElement}
+          />
+        {/if}
         {#each parsedCountries as country}
           <li
+            id={country.shortName}
             role="option"
             class="mc-phone-number__item
             {country.isd === selectedCountry.isd
@@ -241,6 +299,11 @@
   .mc-phone-number {
     max-width: none;
 
+    &__flag-search-field {
+      position: sticky;
+      top: 0;
+    }
+
     &__indicator,
     &__country {
       padding-left: 1rem;

package/public/components/quantityselector/QuantitySelector.js

@@ -1,2 +1,2 @@
-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 t,i as e,a as i,b as o,f as n,s as r,c as m,e as l,d as c,n as a,g as d,h as s,j as u,U as h,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,r,y,z,v,k,M,I,A,D,q,$,j,E=[{class:"mc-quantity-selector"},t[13]],C={};for(let t=0;t<E.length;t+=1)C=m(C,E[t]);return{c(){e=l("div"),i=l("button"),n=l("span"),n.innerHTML='<navigation-control-less-32px size="100%"></navigation-control-less-32px>',z=c(),v=l("input"),M=c(),I=l("button"),A=l("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",r="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left "+(t[5]?"mc-button--s":"")),d(i,"aria-label",t[6]),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",t[7]),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",t[8]),I.disabled=q=t[0]===t[3],s(e,C)},m(r,m){o(r,e,m),u(e,i),u(i,n),u(e,z),u(e,v),h(v,t[0]),u(e,M),u(e,I),u(I,A),$||(j=[b(i,"click",t[14]),p(t[9].call(null,v)),b(v,"input",t[15]),b(v,"input",g(t[10])),b(I,"click",t[16])],$=!0)},p(t,[o]){2&o&&d(i,"aria-controls",t[1]),32&o&&r!==(r="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left "+(t[5]?"mc-button--s":""))&&d(i,"class",r),64&o&&d(i,"aria-label",t[6]),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),128&o&&d(v,"aria-label",t[7]),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]&&h(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),256&o&&d(I,"aria-label",t[8]),9&o&&q!==(q=t[0]===t[3])&&(I.disabled=q),s(e,C=x(E,[{class:"mc-quantity-selector"},8192&o&&t[13]]))},i:a,o:a,d(t){t&&w(e),$=!1,_(j)}}}function A(t,e,i){const o=["id","quantity","valuemin","valuemax","placeholder","small","decrementarialabel","inputarialabel","incrementarialabel"];let n=y(e,o),{id:r}=e,{quantity:l=1}=e,{valuemin:c=1}=e,{valuemax:a=100}=e,{placeholder:d}=e,{small:s=!1}=e,{decrementarialabel:u="Decrement"}=e,{inputarialabel:h="Quantity Selector"}=e,{incrementarialabel:b="Increment"}=e,p=new k;const g=M(z());function x(){l>c&&i(0,l--,l),p.dispatch("decrement",l)}function w(){l<a&&i(0,l++,l),p.dispatch("increment",l)}return t.$$set=t=>{e=m(m({},e),v(t)),i(13,n=y(e,o)),"id"in t&&i(1,r=t.id),"quantity"in t&&i(0,l=t.quantity),"valuemin"in t&&i(2,c=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),"decrementarialabel"in t&&i(6,u=t.decrementarialabel),"inputarialabel"in t&&i(7,h=t.inputarialabel),"incrementarialabel"in t&&i(8,b=t.incrementarialabel)},[l,r,c,a,d,s,u,h,b,g,function(){l>a&&i(0,l=a),l<c&&i(0,l=c),p.dispatch("input",l)},x,w,n,()=>x(),function(){l=f(this.value),i(0,l)},()=>w()]}class D extends t{constructor(t){super();const m=document.createElement("style");m.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(m),e(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},A,I,r,{id:1,quantity:0,valuemin:2,valuemax:3,placeholder:4,small:5,decrementarialabel:6,inputarialabel:7,incrementarialabel:8},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","decrementarialabel","inputarialabel","incrementarialabel"]}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()}get decrementarialabel(){return this.$$.ctx[6]}set decrementarialabel(t){this.$$set({decrementarialabel:t}),n()}get inputarialabel(){return this.$$.ctx[7]}set inputarialabel(t){this.$$set({inputarialabel:t}),n()}get incrementarialabel(){return this.$$.ctx[8]}set incrementarialabel(t){this.$$set({incrementarialabel:t}),n()}}export{D 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  export let decrementarialabel = 'Decrement';\n  export let inputarialabel = 'Quantity Selector';\n  export let incrementarialabel = 'Increment';\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={decrementarialabel}\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={inputarialabel}\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={incrementarialabel}\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","decrementarialabel","inputarialabel","incrementarialabel","eventHandler","EventHandler","forwardEvents","createEventForwarder","get_current_component","decrement","dispatch","increment","$$invalidate","to_number","this","value"],"mappings":"sYA4CsCA,EAAW,iYAE9BA,EAAE,wGACyEA,EAAA,GACtF,eACA,sBACQA,EAAkB,IAEpBC,EAAAC,SAAAC,EAAAH,OAAaA,EAAQ,iKAemBA,EAAA,GAC9C,eACA,sBACQA,EAAc,wBACXA,EAAQ,wBACRA,EAAQ,wBACRA,EAAQ,iFAKRA,EAAE,yGAC0EA,EAAA,GACvF,eACA,sBACQA,EAAkB,IAEpBI,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,mEAlBrBA,EAAE,uGACyEA,EAAA,GACtF,eACA,4CACQA,EAAkB,IAEpB,EAAAc,GAAAX,KAAAA,EAAAH,OAAaA,EAAQ,iIAemBA,EAAA,GAC9C,eACA,6CACQA,EAAc,6BACXA,EAAQ,6BACRA,EAAQ,6BACRA,EAAQ,sBAVXA,EAAQ,QAARA,EAAQ,6BAeLA,EAAE,wGAC0EA,EAAA,GACvF,eACA,6CACQA,EAAkB,IAEpB,EAAAc,GAAAT,KAAAA,EAAAL,OAAaA,EAAQ,sEAxCGA,EAAW,0MAtCpCe,GAAAA,GAAkCC,GAClCC,SAAAA,EAAW,GAACD,GACZE,SAAAA,EAAW,GAACF,GACZG,SAAAA,EAAW,KAAGH,GACdI,YAAAA,GAA2CJ,GAC3CK,MAAAA,GAAQ,GAAKL,GACbM,mBAAAA,EAAqB,aAAWN,GAChCO,eAAAA,EAAiB,qBAAmBP,GACpCQ,mBAAAA,EAAqB,aAAWR,EAEvCS,MAAmBC,QACjBC,EAAgBC,EAAqBC,cAYlCC,IACHb,EAAWC,OACbD,IAAQA,GAEVQ,EAAaM,SAAS,YAAad,YAG5Be,IACHf,EAAWE,OACbF,IAAQA,GAEVQ,EAAaM,SAAS,YAAad,kbApB/BA,EAAWE,GACbc,EAAA,EAAAhB,EAAWE,GAETF,EAAWC,GACbe,EAAA,EAAAhB,EAAWC,GAEbO,EAAaM,SAAS,QAASd,cAyBfa,eAYJb,EAAQiB,EAAAC,KAAAC,mBAoBJJ"}

package/public/components/quantityselector/QuantitySelector.svelte

@@ -10,6 +10,9 @@
   export let valuemax = 100;
   export let placeholder: string | undefined = undefined;
   export let small = false;
+  export let decrementarialabel = 'Decrement';
+  export let inputarialabel = 'Quantity Selector';
+  export let incrementarialabel = 'Increment';
 
   let eventHandler = new EventHandler();
   const forwardEvents = createEventForwarder(get_current_component());
@@ -45,7 +48,7 @@
     class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left {small
       ? 'mc-button--s'
       : ''}"
-    aria-label="Decrement"
+    aria-label={decrementarialabel}
     on:click={() => decrement()}
     disabled={quantity === valuemin}
   >
@@ -65,7 +68,7 @@
     class="mc-text-input mc-quantity-selector__input {small
       ? 'mc-button--s'
       : ''}"
-    aria-label="QuantitySelector"
+    aria-label={inputarialabel}
     aria-valuemin={valuemin}
     aria-valuemax={valuemax}
     aria-valuenow={quantity}
@@ -77,7 +80,7 @@
     class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right {small
       ? 'mc-button--s'
       : ''}"
-    aria-label="Increment"
+    aria-label={incrementarialabel}
     on:click={() => increment()}
     disabled={quantity === valuemax}
   >

package/public/utilities/stories/phonenumber/PhoneNumber.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/phonenumber/PhoneNumber.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;;AAGnD,wBA6CU;AA2DV,eAAO,MAAM,OAAO,uCAAoB,CAAC;AAEzC,eAAO,MAAM,SAAS,uCAAoB,CAAC;AAK3C,eAAO,MAAM,mBAAmB,uCAAoB,CAAC"}
+{"version":3,"file":"PhoneNumber.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/phonenumber/PhoneNumber.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;;AAGnD,wBAiDU;AA+DV,eAAO,MAAM,OAAO,uCAAoB,CAAC;AAEzC,eAAO,MAAM,SAAS,uCAAoB,CAAC;AAK3C,eAAO,MAAM,mBAAmB,uCAAoB,CAAC"}

package/public/utilities/stories/quantityselector/QuantitySelector.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/quantityselector/QuantitySelector.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;;AAGnD,wBA+BU;AA0BV,eAAO,MAAM,OAAO,uCAAoB,CAAC;AAEzC,eAAO,MAAM,KAAK,uCAAoB,CAAC"}
+{"version":3,"file":"QuantitySelector.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/quantityselector/QuantitySelector.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;;AAGnD,wBA2CU;AA4CV,eAAO,MAAM,OAAO,uCAAoB,CAAC;AAEzC,eAAO,MAAM,KAAK,uCAAoB,CAAC"}