@mozaic-ds/web-components 0.28.1 → 1.0.0-alpha.0

package/public/components/phonenumber/PhoneNumber.svelte

@@ -1,21 +1,19 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
   import {
     parsePhoneNumber,
     formatIncompletePhoneNumber,
     AsYouType,
-    CountryCode,
+    type 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';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { createEventDispatcher, onMount } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
 
   export let phonenumber: string;
   export let placeholder = '0102030405';
@@ -130,7 +128,8 @@
         phoneNumberValue,
         selectedCountry.shortName,
       );
-      const formatInternational: string = parsedPhoneNumber.formatInternational();
+      const formatInternational: string =
+        parsedPhoneNumber.formatInternational();
       isvalid = parsedPhoneNumber.isValid();
       isinvalid = !isvalid;
 

package/public/components/price/Price.svelte

@@ -1,4 +1,4 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
   import type { PriceType } from './price.types';

package/public/components/progressbar/ProgressBar.svelte

@@ -1,4 +1,4 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
   import type { ProgressBarSize } from './progressbar.types';

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 r,c as m,e as l,d as c,n as a,h as d,j as s,k as u,X as b,x as h,N as p,a3 as f,l as g,af as x,m as w,P as _,o as y,q as v,r as z,u as k}from"../../index-c222d0b7.js";import{E as q}from"../../EventHandler-f7ee47ca.js";import{c as $}from"../../EventForward-c4c8cd29.js";function E(t){let e,i,n,r,y,v,z,k,q,$,E,C,M,j,L,A=[{id:t[1]},{placeholder:t[4]},{type:"number"},{name:"quantity-selector-input"},{class:k="mc-text-input mc-quantity-selector__input "+(t[5]?"mc-button--s":"")},{"aria-label":t[7]},{"aria-valuemin":t[2]},{"aria-valuemax":t[3]},{"aria-valuenow":t[0]},{spellcheck:"false"},t[9]],H={};for(let t=0;t<A.length;t+=1)H=m(H,A[t]);let B=[{class:"mc-quantity-selector"},t[14]],R={};for(let t=0;t<B.length;t+=1)R=m(R,B[t]);return{c(){e=l("div"),i=l("button"),n=l("span"),n.innerHTML='<navigation-control-less-32px size="100%"></navigation-control-less-32px>',v=c(),z=l("input"),q=c(),$=l("button"),E=l("span"),E.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],s(z,H),d(E,"class","mc-button__icon"),d($,"aria-controls",t[1]),d($,"class",C="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right "+(t[5]?"mc-button--s":"")),d($,"aria-label",t[8]),$.disabled=M=t[0]===t[3],s(e,R)},m(r,m){o(r,e,m),u(e,i),u(i,n),u(e,v),u(e,z),z.autofocus&&z.focus(),b(z,t[0]),u(e,q),u(e,$),u($,E),j||(L=[h(i,"click",t[15]),p(t[10].call(null,z)),h(z,"input",t[16]),h(z,"input",f(t[11])),h($,"click",t[17])],j=!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),s(z,H=g(A,[2&o&&{id:t[1]},16&o&&{placeholder:t[4]},{type:"number"},{name:"quantity-selector-input"},32&o&&k!==(k="mc-text-input mc-quantity-selector__input "+(t[5]?"mc-button--s":""))&&{class:k},128&o&&{"aria-label":t[7]},4&o&&{"aria-valuemin":t[2]},8&o&&{"aria-valuemax":t[3]},1&o&&{"aria-valuenow":t[0]},{spellcheck:"false"},512&o&&t[9]])),1&o&&x(z.value)!==t[0]&&b(z,t[0]),2&o&&d($,"aria-controls",t[1]),32&o&&C!==(C="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right "+(t[5]?"mc-button--s":""))&&d($,"class",C),256&o&&d($,"aria-label",t[8]),9&o&&M!==(M=t[0]===t[3])&&($.disabled=M),s(e,R=g(B,[{class:"mc-quantity-selector"},16384&o&&t[14]]))},i:a,o:a,d(t){t&&w(e),j=!1,_(L)}}}function C(t,e,i){let o;const n=["id","quantity","valuemin","valuemax","placeholder","small","decrementarialabel","inputarialabel","incrementarialabel"];let r=y(e,n),{id:l}=e,{quantity:c=1}=e,{valuemin:a=1}=e,{valuemax:d=100}=e,{placeholder:s}=e,{small:u=!1}=e,{decrementarialabel:b="Decrement"}=e,{inputarialabel:h="Quantity Selector"}=e,{incrementarialabel:p="Increment"}=e,f=new q(v(),z());const g=$(v());function w(){c>a&&i(0,c--,c),f.dispatch("decrement",c)}function _(){c<d&&i(0,c++,c),f.dispatch("increment",c)}return t.$$set=t=>{e=m(m({},e),k(t)),i(14,r=y(e,n)),"id"in t&&i(1,l=t.id),"quantity"in t&&i(0,c=t.quantity),"valuemin"in t&&i(2,a=t.valuemin),"valuemax"in t&&i(3,d=t.valuemax),"placeholder"in t&&i(4,s=t.placeholder),"small"in t&&i(5,u=t.small),"decrementarialabel"in t&&i(6,b=t.decrementarialabel),"inputarialabel"in t&&i(7,h=t.inputarialabel),"incrementarialabel"in t&&i(8,p=t.incrementarialabel)},t.$$.update=()=>{i(9,o=Object.assign({},r)),512&t.$$.dirty&&delete o.class},[c,l,a,d,s,u,b,h,p,o,g,function(){c>d&&i(0,c=d),c<a&&i(0,c=a),f.dispatch("input-qty",c)},w,_,r,()=>w(),function(){c=x(this.value),i(0,c)},()=>_()]}class M 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;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,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%2346a610' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 11-8 8 8 8 0 018-8m0-2a10 10 0 1010 10A10 10 0 0012 2z'/%3E%3Cpath d='M10.73 15.75a1 1 0 01-.68-.26l-3-2.74a1 1 0 011.36-1.47l2.25 2.08 4.36-4.42a1 1 0 111.42 1.41l-5 5.1a1 1 0 01-.71.3z'/%3E%3C/svg%3E\")}.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,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' viewBox='0 0 24 24' fill='%23c61112'%3E%3Cpath d='M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8 8 8 0 01-8 8z'/%3E%3Cpath d='M12 7a1 1 0 00-1 1v4.38a1 1 0 002 0V8a1 1 0 00-1-1z'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3C/svg%3E\")}.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;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,.mc-button[aria-disabled=true]{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,.mc-button--solid-primary-02[aria-disabled=true]{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,.mc-button--solid-neutral[aria-disabled=true]{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,.mc-button--solid-danger[aria-disabled=true]{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,.mc-button--bordered[aria-disabled=true]{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,.mc-button--bordered-primary-02[aria-disabled=true]{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,.mc-button--bordered-neutral[aria-disabled=true]{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,.mc-button--bordered-danger[aria-disabled=true]{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:var(--qty-selector-button-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:var(--qty-selector-focus-z-index, 2)}",this.shadowRoot.appendChild(m),e(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},C,E,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{M as default};
+import{c as e,S as t,i as r,f as l,s as o,a as s,p as a,e as n,b as i,F as c,E as d,t as b,d as u,g as m,h as v,O as p,L as h,Y as y,Z as f,G as q,y as x,m as _,M as $,n as g,P as w,q as k}from"../../index-c0bfe08f.js";import{g as j}from"../../spread-ed04f539.js";function N(e){s(e,"svelte-rbl4od",'.mc-quantity-selector.svelte-rbl4od.svelte-rbl4od{background-color:var(--forms-color-background-default, #ffffff);border:1px solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;border-radius:0.25rem;display:flex;gap:0.25rem;padding:0.1875rem;position:relative}.mc-quantity-selector.svelte-rbl4od.svelte-rbl4od,.mc-quantity-selector.svelte-rbl4od .svelte-rbl4od{box-sizing:border-box}.mc-quantity-selector__control.svelte-rbl4od.svelte-rbl4od{background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none;padding:0;font-size:inherit;font-size:1rem;line-height:1.5;font-weight:600;cursor:inherit;text-align:center;flex-grow:1}.mc-quantity-selector__control[type=number].svelte-rbl4od.svelte-rbl4od::-webkit-inner-spin-button,.mc-quantity-selector__control[type=number].svelte-rbl4od.svelte-rbl4od::-webkit-outer-spin-button{appearance:none;margin:0}.mc-quantity-selector__control[type=number].svelte-rbl4od.svelte-rbl4od{appearance:textfield}.mc-quantity-selector__control[type=search].svelte-rbl4od.svelte-rbl4od::-webkit-search-decoration,.mc-quantity-selector__control[type=search].svelte-rbl4od.svelte-rbl4od::-webkit-search-cancel-button{appearance:none}.mc-quantity-selector__control.svelte-rbl4od.svelte-rbl4od::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-quantity-selector__button.svelte-rbl4od.svelte-rbl4od{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;height:2.5rem;width:2.5rem;border-radius:100%;color:var(--quantity-selector-color-button-text-default, #242938);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.mc-quantity-selector__button.svelte-rbl4od.svelte-rbl4od:disabled{color:var(--quantity-selector-color-button-text-disabled, #d9d9d9);cursor:not-allowed}.mc-quantity-selector__button.svelte-rbl4od.svelte-rbl4od:hover:not(:disabled){background-color:var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1))}.mc-quantity-selector__button--decrease.svelte-rbl4od.svelte-rbl4od{order:-1}.mc-quantity-selector__icon.svelte-rbl4od.svelte-rbl4od{height:1.5rem;width:1.5rem;fill:currentcolor}.mc-quantity-selector__label.svelte-rbl4od.svelte-rbl4od{clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-quantity-selector.svelte-rbl4od.svelte-rbl4od::after{transition:box-shadow 200ms ease;border-radius:0.25rem;content:"";position:absolute;inset:-0.125rem var(--inset-x, 3rem);pointer-events:none;display:block}.mc-quantity-selector.svelte-rbl4od.svelte-rbl4od:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 1px var(--forms-color-border-hover, #4d4d4d)}.mc-quantity-selector.svelte-rbl4od.svelte-rbl4od:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-quantity-selector.svelte-rbl4od:has(input:disabled) .mc-quantity-selector__button.svelte-rbl4od:disabled{color:var(--forms-color-icon-disabled, #737373)}.mc-quantity-selector.svelte-rbl4od.svelte-rbl4od:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-quantity-selector.svelte-rbl4od:has(input[readonly]) .mc-quantity-selector__control[readonly].svelte-rbl4od{text-align:left;padding-left:0.5rem}.mc-quantity-selector.svelte-rbl4od.svelte-rbl4od:has(input:focus)::after{box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem}.mc-quantity-selector--s.svelte-rbl4od.svelte-rbl4od{--inset-x:2rem;height:2rem}.mc-quantity-selector--s.svelte-rbl4od .mc-quantity-selector__button.svelte-rbl4od{height:1.5rem;width:1.5rem}.mc-quantity-selector--s.svelte-rbl4od .mc-quantity-selector__icon.svelte-rbl4od{height:1.25rem;width:1.25rem}.mc-quantity-selector.is-invalid.svelte-rbl4od.svelte-rbl4od{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 1px var(--forms-color-border-invalid, #ea302d)}.mc-quantity-selector.is-invalid.svelte-rbl4od.svelte-rbl4od:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 1px var(--forms-color-border-invalid-hover, #c61112)}')}function z(e){let t,r,l,o,s,g,w,k,N,z,L,M,B,H,O,S,T,D,E=[{type:"number"},{id:e[1]},{name:e[9]},{class:"mc-quantity-selector__control"},{"aria-label":e[6]},{"aria-valuemin":e[2]},{"aria-valuemax":e[3]},{"aria-valuenow":e[0]},{spellcheck:"false"},{disabled:e[8]},e[10]],F={};for(let e=0;e<E.length;e+=1)F=a(F,E[e]);let G=[{class:"mc-quantity-selector"},e[14]],I={};for(let e=0;e<G.length;e+=1)I=a(I,G[e]);return{c(){t=n("div"),r=n("input"),l=i(),o=n("button"),s=n("span"),s.innerHTML='<ui-more-24 class="svelte-rbl4od"></ui-more-24>',g=i(),w=n("span"),k=c(e[5]),z=i(),L=n("button"),M=n("span"),M.innerHTML='<ui-less-24 class="svelte-rbl4od"></ui-less-24>',B=i(),H=n("span"),O=c(e[7]),d(r,F),b(r,"svelte-rbl4od",!0),u(s,"class","mc-quantity-selector__icon svelte-rbl4od"),u(w,"class","mc-quantity-selector__label svelte-rbl4od"),u(o,"type","button"),u(o,"aria-controls",e[1]),u(o,"class","mc-quantity-selector__button mc-quantity-selector__button--increase svelte-rbl4od"),u(o,"tabindex","-1"),o.disabled=N=e[0]===e[3]||e[8],u(M,"class","mc-quantity-selector__icon svelte-rbl4od"),u(H,"class","mc-quantity-selector__label svelte-rbl4od"),u(L,"type","button"),u(L,"aria-controls",e[1]),u(L,"class","mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-rbl4od"),u(L,"tabindex","-1"),L.disabled=S=e[0]===e[2]||e[8],d(t,I),b(t,"mc-quantity-selector--s",e[4]),b(t,"svelte-rbl4od",!0)},m(a,n){m(a,t,n),v(t,r),r.autofocus&&r.focus(),p(r,e[0]),v(t,l),v(t,o),v(o,s),v(o,g),v(o,w),v(w,k),v(t,z),v(t,L),v(L,M),v(L,B),v(L,H),v(H,O),T||(D=[h(r,"input",e[16]),h(r,"input",y(e[11])),h(o,"click",e[17]),h(L,"click",e[18])],T=!0)},p(e,[l]){d(r,F=j(E,[{type:"number"},2&l&&{id:e[1]},512&l&&{name:e[9]},{class:"mc-quantity-selector__control"},64&l&&{"aria-label":e[6]},4&l&&{"aria-valuemin":e[2]},8&l&&{"aria-valuemax":e[3]},1&l&&{"aria-valuenow":e[0]},{spellcheck:"false"},256&l&&{disabled:e[8]},1024&l&&e[10]])),1&l&&f(r.value)!==e[0]&&p(r,e[0]),b(r,"svelte-rbl4od",!0),32&l&&q(k,e[5]),2&l&&u(o,"aria-controls",e[1]),265&l&&N!==(N=e[0]===e[3]||e[8])&&(o.disabled=N),128&l&&q(O,e[7]),2&l&&u(L,"aria-controls",e[1]),261&l&&S!==(S=e[0]===e[2]||e[8])&&(L.disabled=S),d(t,I=j(G,[{class:"mc-quantity-selector"},16384&l&&e[14]])),b(t,"mc-quantity-selector--s",e[4]),b(t,"svelte-rbl4od",!0)},i:x,o:x,d(e){e&&_(t),T=!1,$(D)}}}function L(e,t,r){let l;const o=["id","quantity","min","max","small","decrementlabel","inputarialabel","incrementlabel","disabled","name","step"];let s=g(t,o),{id:n}=t,{quantity:i=1}=t,{min:c=1}=t,{max:d=100}=t,{small:b=!1}=t,{decrementlabel:u="Decrement"}=t,{inputarialabel:m="Quantity Selector"}=t,{incrementlabel:v="Increment"}=t,{disabled:p=!1}=t,{name:h="quantity-selector-input"}=t,{step:y=1}=t,q=w();function x(){i-Number(y)>c&&r(0,i-=Number(y)),q("decrement",i)}function _(){i+Number(y)<d&&r(0,i+=Number(y)),q("increment",i)}return e.$$set=e=>{t=a(a({},t),k(e)),r(14,s=g(t,o)),"id"in e&&r(1,n=e.id),"quantity"in e&&r(0,i=e.quantity),"min"in e&&r(2,c=e.min),"max"in e&&r(3,d=e.max),"small"in e&&r(4,b=e.small),"decrementlabel"in e&&r(5,u=e.decrementlabel),"inputarialabel"in e&&r(6,m=e.inputarialabel),"incrementlabel"in e&&r(7,v=e.incrementlabel),"disabled"in e&&r(8,p=e.disabled),"name"in e&&r(9,h=e.name),"step"in e&&r(15,y=e.step)},e.$$.update=()=>{r(10,l=Object.assign({},s)),1024&e.$$.dirty&&delete l.class},[i,n,c,d,b,u,m,v,p,h,l,function(){i>d&&r(0,i=d),i<c&&r(0,i=c),q("input-qty",i)},x,_,s,y,function(){i=f(this.value),r(0,i)},()=>_(),()=>x()]}class M extends t{constructor(e){super(),r(this,e,L,z,o,{id:1,quantity:0,min:2,max:3,small:4,decrementlabel:5,inputarialabel:6,incrementlabel:7,disabled:8,name:9,step:15},N)}get id(){return this.$$.ctx[1]}set id(e){this.$$set({id:e}),l()}get quantity(){return this.$$.ctx[0]}set quantity(e){this.$$set({quantity:e}),l()}get min(){return this.$$.ctx[2]}set min(e){this.$$set({min:e}),l()}get max(){return this.$$.ctx[3]}set max(e){this.$$set({max:e}),l()}get small(){return this.$$.ctx[4]}set small(e){this.$$set({small:e}),l()}get decrementlabel(){return this.$$.ctx[5]}set decrementlabel(e){this.$$set({decrementlabel:e}),l()}get inputarialabel(){return this.$$.ctx[6]}set inputarialabel(e){this.$$set({inputarialabel:e}),l()}get incrementlabel(){return this.$$.ctx[7]}set incrementlabel(e){this.$$set({incrementlabel:e}),l()}get disabled(){return this.$$.ctx[8]}set disabled(e){this.$$set({disabled:e}),l()}get name(){return this.$$.ctx[9]}set name(e){this.$$set({name:e}),l()}get step(){return this.$$.ctx[15]}set step(e){this.$$set({step:e}),l()}}e(M,{id:{},quantity:{},min:{},max:{},small:{type:"Boolean"},decrementlabel:{},inputarialabel:{},incrementlabel:{},disabled:{type:"Boolean"},name:{},step:{}},[],[],!0);export{M 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 {\n    get_current_component,\n    createEventDispatcher,\n  } 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  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\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-qty', 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    {...attributes}\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","class","input_class_value","id","$$props","quantity","valuemin","valuemax","placeholder","small","decrementarialabel","inputarialabel","incrementarialabel","eventHandler","EventHandler","get_current_component","createEventDispatcher","forwardEvents","createEventForwarder","decrement","dispatch","increment","attributes","Object","assign","$$restProps","$$invalidate","to_number","this","value"],"mappings":"ofA4EsDA,EAAA,GAC9C,eACA,mBACQA,EAAc,qBACXA,EAAQ,qBACRA,EAAQ,qBACRA,EAAQ,yBAEnBA,EAAU,uFA/BoBA,EAAW,iYAE9BA,EAAE,wGACyEA,EAAA,GACtF,eACA,sBACQA,EAAkB,IAEpBC,EAAAC,SAAAC,EAAAH,OAAaA,EAAQ,6DA2BhBA,EAAE,yGAC0EA,EAAA,GACvF,eACA,sBACQA,EAAkB,IAEpBI,EAAAF,SAAAG,EAAAL,OAAaA,EAAQ,kBAzCnCM,EA+CKC,EAAAC,EAAAC,GA9CHC,EAYQF,EAAAP,GAHNS,EAEMT,EAAAU,UAGRD,EAiBCF,EAAAI,8BAbaZ,EAAQ,WAetBU,EAYQF,EAAAJ,GAHNM,EAEMN,EAAAS,oFAzBmBb,EAAW,mEAlBrBA,EAAE,uGACyEA,EAAA,GACtF,eACA,4CACQA,EAAkB,IAEpB,EAAAc,GAAAX,KAAAA,EAAAH,OAAaA,EAAQ,mLAemBA,EAAA,GAC9C,eACA,MAAE,CAAAe,MAAAC,wBACMhB,EAAc,0BACXA,EAAQ,0BACRA,EAAQ,0BACRA,EAAQ,gCAEnBA,EAAU,wBAZFA,EAAQ,QAARA,EAAQ,6BAgBLA,EAAE,wGAC0EA,EAAA,GACvF,eACA,6CACQA,EAAkB,IAEpB,EAAAc,GAAAT,KAAAA,EAAAL,OAAaA,EAAQ,uEAzCGA,EAAW,gNA5CpCiB,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,EAKvCS,EAAmB,IAAAC,EACrBC,IACAC,WAEIC,EAAgBC,EAAqBH,cAYlCI,IACHd,EAAWC,OACbD,IAAQA,GAEVQ,EAAaO,SAAS,YAAaf,YAG5BgB,IACHhB,EAAWE,OACbF,IAAQA,GAEVQ,EAAaO,SAAS,YAAaf,uaA9BlCiB,EAALC,OAAAC,UAAuBC,2BACXH,EAAWrB,yCASfI,EAAWE,GACbmB,EAAA,EAAArB,EAAWE,GAETF,EAAWC,GACboB,EAAA,EAAArB,EAAWC,GAEbO,EAAaO,SAAS,YAAaf,cAyBnBc,eAYJd,EAAQsB,EAAAC,KAAAC,mBAqBJR"}
+{"version":3,"file":"QuantitySelector.js","sources":["../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\n  export let id: string | undefined = undefined;\n  export let quantity = 1;\n  export let min = 1;\n  export let max = 100;\n  export let small = false;\n  export let decrementlabel = 'Decrement';\n  export let inputarialabel = 'Quantity Selector';\n  export let incrementlabel = 'Increment';\n  export let disabled = false;\n  export let name = 'quantity-selector-input';\n  export let step = 1;\n\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  let dispatch = createEventDispatcher();\n\n  function handleValue(): void {\n    if (quantity > max) {\n      quantity = max;\n    }\n    if (quantity < min) {\n      quantity = min;\n    }\n    dispatch('input-qty', quantity);\n  }\n\n  function decrement(): void {\n    if (quantity - Number(step) > min) {\n      quantity = quantity - Number(step);\n    }\n    dispatch('decrement', quantity);\n  }\n\n  function increment(): void {\n    if (quantity + Number(step) < max) {\n      quantity = quantity + Number(step);\n    }\n    dispatch('increment', quantity);\n  }\n</script>\n\n<div\n  class=\"mc-quantity-selector\"\n  class:mc-quantity-selector--s={small}\n  {...$$restProps}\n>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value={quantity}\n    on:input|preventDefault={handleValue}\n    class=\"mc-quantity-selector__control\"\n    aria-label={inputarialabel}\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={quantity}\n    spellcheck=\"false\"\n    {disabled}\n    {...attributes}\n  />\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n    tabindex=\"-1\"\n    on:click={() => increment()}\n    disabled={quantity === max || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <ui-more-24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{decrementlabel}</span>\n  </button>\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n    tabindex=\"-1\"\n    on:click={() => decrement()}\n    disabled={quantity === min || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <ui-less-24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{incrementlabel}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n"],"names":["ctx","insert","target","div","anchor","append","input","button0","span0","span1","button1","span2","span3","id","$$props","quantity","min","max","small","decrementlabel","inputarialabel","incrementlabel","disabled","name","step","dispatch","createEventDispatcher","decrement","Number","$$invalidate","increment","attributes","Object","assign","$$restProps","class","to_number","this","value"],"mappings":"g+JA2DgBA,EAAc,qBACXA,EAAG,qBACHA,EAAG,qBACHA,EAAQ,yCAGnBA,EAAU,wFAfZA,EAAW,yMA4B8BA,EAAc,wHAadA,EAAc,6LAtB1CA,EAAE,uIAIPA,EAAQ,KAAKA,EAAG,IAAIA,EAAQ,6JASvBA,EAAE,uIAIPA,EAAQ,KAAKA,EAAG,IAAIA,EAAQ,wCArCTA,EAAK,oCAFtCC,EA8CKC,EAAAC,EAAAC,GAzCHC,EAcCF,EAAAG,8BAVaN,EAAQ,WAWtBK,EAYQF,EAAAI,GAJNF,EAEME,EAAAC,UACNH,EAAgEE,EAAAE,iBAElEJ,EAYQF,EAAAO,GAJNL,EAEMK,EAAAC,UACNN,EAAgEK,EAAAE,kDAlCvCZ,EAAW,sLAExBA,EAAc,0BACXA,EAAG,0BACHA,EAAG,0BACHA,EAAQ,wDAGnBA,EAAU,yBATFA,EAAQ,QAARA,EAAQ,sCAsBuBA,EAAc,6BAT1CA,EAAE,kBAIPA,EAAQ,KAAKA,EAAG,IAAIA,EAAQ,+BAkBKA,EAAc,6BAT1CA,EAAE,kBAIPA,EAAQ,KAAKA,EAAG,IAAIA,EAAQ,uEApCpCA,EAAW,qCADgBA,EAAK,8NA5CzBa,GAAAA,GAAkCC,GAClCC,SAAAA,EAAW,GAACD,GACZE,IAAAA,EAAM,GAACF,GACPG,IAAAA,EAAM,KAAGH,GACTI,MAAAA,GAAQ,GAAKJ,GACbK,eAAAA,EAAiB,aAAWL,GAC5BM,eAAAA,EAAiB,qBAAmBN,GACpCO,eAAAA,EAAiB,aAAWP,GAC5BQ,SAAAA,GAAW,GAAKR,GAChBS,KAAAA,EAAO,2BAAyBT,GAChCU,KAAAA,EAAO,GAACV,EAKfW,EAAWC,aAYNC,IACHZ,EAAWa,OAAOJ,GAAQR,GAC5Ba,EAAA,EAAAd,GAAsBa,OAAOJ,IAE/BC,EAAS,YAAaV,YAGfe,IACHf,EAAWa,OAAOJ,GAAQP,GAC5BY,EAAA,EAAAd,GAAsBa,OAAOJ,IAE/BC,EAAS,YAAaV,8aA1BvBc,EAAA,GAAEE,EAAUC,OAAAC,OAAA,CAAA,EAAQC,4BACXH,EAAWI,yCAKfpB,EAAWE,GACbY,EAAA,EAAAd,EAAWE,GAETF,EAAWC,GACba,EAAA,EAAAd,EAAWC,GAEbS,EAAS,YAAaV,uBA2BVA,EAAQqB,EAAAC,KAAAC,mBAgBJR,QAaAH"}

package/public/components/quantityselector/QuantitySelector.svelte

@@ -1,108 +1,98 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { createEventForwarder } from '../../utilities/EventForward';
+  import { createEventDispatcher } from 'svelte';
+
   export let id: string | undefined = undefined;
   export let quantity = 1;
-  export let valuemin = 1;
-  export let valuemax = 100;
-  export let placeholder: string | undefined = undefined;
+  export let min = 1;
+  export let max = 100;
   export let small = false;
-  export let decrementarialabel = 'Decrement';
+  export let decrementlabel = 'Decrement';
   export let inputarialabel = 'Quantity Selector';
-  export let incrementarialabel = 'Increment';
+  export let incrementlabel = 'Increment';
+  export let disabled = false;
+  export let name = 'quantity-selector-input';
+  export let step = 1;
 
   $: attributes = { ...$$restProps };
   $: delete attributes.class;
 
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  const forwardEvents = createEventForwarder(get_current_component());
+  let dispatch = createEventDispatcher();
 
   function handleValue(): void {
-    if (quantity > valuemax) {
-      quantity = valuemax;
+    if (quantity > max) {
+      quantity = max;
     }
-    if (quantity < valuemin) {
-      quantity = valuemin;
+    if (quantity < min) {
+      quantity = min;
     }
-    eventHandler.dispatch('input-qty', quantity);
+    dispatch('input-qty', quantity);
   }
 
   function decrement(): void {
-    if (quantity > valuemin) {
-      quantity--;
+    if (quantity - Number(step) > min) {
+      quantity = quantity - Number(step);
     }
-    eventHandler.dispatch('decrement', quantity);
+    dispatch('decrement', quantity);
   }
 
   function increment(): void {
-    if (quantity < valuemax) {
-      quantity++;
+    if (quantity + Number(step) < max) {
+      quantity = quantity + Number(step);
     }
-    eventHandler.dispatch('increment', quantity);
+    dispatch('increment', quantity);
   }
 </script>
 
-<div class="mc-quantity-selector" {...$$restProps}>
-  <button
-    aria-controls={id}
-    class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left {small
-      ? 'mc-button--s'
-      : ''}"
-    aria-label={decrementarialabel}
-    on:click={() => decrement()}
-    disabled={quantity === valuemin}
-  >
-    <span class="mc-button__icon">
-      <navigation-control-less-32px size="100%" />
-    </span>
-  </button>
-
+<div
+  class="mc-quantity-selector"
+  class:mc-quantity-selector--s={small}
+  {...$$restProps}
+>
   <input
-    use:forwardEvents
+    type="number"
     {id}
-    {placeholder}
+    {name}
     bind:value={quantity}
     on:input|preventDefault={handleValue}
-    type="number"
-    name="quantity-selector-input"
-    class="mc-text-input mc-quantity-selector__input {small
-      ? 'mc-button--s'
-      : ''}"
+    class="mc-quantity-selector__control"
     aria-label={inputarialabel}
-    aria-valuemin={valuemin}
-    aria-valuemax={valuemax}
+    aria-valuemin={min}
+    aria-valuemax={max}
     aria-valuenow={quantity}
     spellcheck="false"
+    {disabled}
     {...attributes}
   />
-
   <button
+    type="button"
     aria-controls={id}
-    class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right {small
-      ? 'mc-button--s'
-      : ''}"
-    aria-label={incrementarialabel}
+    class="mc-quantity-selector__button mc-quantity-selector__button--increase"
+    tabindex="-1"
     on:click={() => increment()}
-    disabled={quantity === valuemax}
+    disabled={quantity === max || disabled}
+  >
+    <span class="mc-quantity-selector__icon">
+      <ui-more-24 />
+    </span>
+    <span class="mc-quantity-selector__label">{decrementlabel}</span>
+  </button>
+  <button
+    type="button"
+    aria-controls={id}
+    class="mc-quantity-selector__button mc-quantity-selector__button--decrease"
+    tabindex="-1"
+    on:click={() => decrement()}
+    disabled={quantity === min || disabled}
   >
-    <span class="mc-button__icon">
-      <navigation-control-more-32px size="100%" />
+    <span class="mc-quantity-selector__icon">
+      <ui-less-24 />
     </span>
+    <span class="mc-quantity-selector__label">{incrementlabel}</span>
   </button>
 </div>
 
 <style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/_c.text-input';
-  @import '@mozaic-ds/styles/components/_c.button';
-  @import '@mozaic-ds/styles/components/_c.quantity-selector';
+  @use '@mozaic-ds/styles/components/quantity-selector';
 </style>

package/public/components/radar/Radar.svelte

@@ -1,13 +1,15 @@
-<svelte:options tag={null} />
+<svelte:options customElement='' />
 
 <script lang="ts">
   // @ts-nocheck
-  import { onMount } from 'svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
 
   import {
     select,
     scaleLinear,
-    Selection,
+    type Selection,
     line,
     symbolTriangle,
     symbolCircle,

package/public/components/radio/Radio.js

@@ -1,2 +1,2 @@
-import{S as e,i,a as o,b as r,f as a,s as t,c,e as s,d as n,v as d,n as l,j as m,h as b,k as h,N as u,x as p,l as f,y as _,m as k,P as g,o as v,q as x,u as $,V as w}from"../../index-c222d0b7.js";import{c as y}from"../../EventForward-c4c8cd29.js";function j(e){let i,o,a,t,v,x,$,w,y,j=[{id:e[0]},{type:"radio"},{class:a=z(e[4])},{"aria-invalid":e[4]},{name:e[1]},{checked:e[2]},{disabled:e[3]},e[6]],E={};for(let e=0;e<j.length;e+=1)E=c(E,j[e]);return{c(){i=s("div"),o=s("input"),t=n(),v=s("label"),x=d(e[5]),this.c=l,m(o,E),b(v,"for",e[0]),b(v,"class","mc-radio__label"),b(i,"class",$="mc-radio "+e[7])},m(a,c){r(a,i,c),h(i,o),o.autofocus&&o.focus(),h(i,t),h(i,v),h(v,x),w||(y=[u(e[8].call(null,o)),p(i,"click",e[9])],w=!0)},p(e,[r]){m(o,E=f(j,[1&r&&{id:e[0]},{type:"radio"},16&r&&a!==(a=z(e[4]))&&{class:a},16&r&&{"aria-invalid":e[4]},2&r&&{name:e[1]},4&r&&{checked:e[2]},8&r&&{disabled:e[3]},64&r&&e[6]])),32&r&&_(x,e[5]),1&r&&b(v,"for",e[0]),128&r&&$!==($="mc-radio "+e[7])&&b(i,"class",$)},i:l,o:l,d(e){e&&k(i),w=!1,g(y)}}}function z(e){const i=["mc-radio__input"];return e&&i.push("is-invalid"),i.join(" ")}function E(e,i,o){let r,a;const t=["id","name","checked","disabled","isinvalid","label"];let s=v(i,t),{id:n}=i,{name:d}=i,{checked:l}=i,{disabled:m=!1}=i,{isinvalid:b=!1}=i,{label:h}=i;const u=y(x());return e.$$set=e=>{o(11,i=c(c({},i),$(e))),o(10,s=v(i,t)),"id"in e&&o(0,n=e.id),"name"in e&&o(1,d=e.name),"checked"in e&&o(2,l=e.checked),"disabled"in e&&o(3,m=e.disabled),"isinvalid"in e&&o(4,b=e.isinvalid),"label"in e&&o(5,h=e.label)},e.$$.update=()=>{o(7,r=i.class),o(6,a=Object.assign({},s)),64&e.$$.dirty&&delete a.class},i=$(i),[n,d,l,m,b,h,a,r,u,function(i){w.call(this,e,i)}]}class C extends e{constructor(e){super();const c=document.createElement("style");c.textContent='.mc-radio{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mc-radio__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:0.5rem;color:#000000}.mc-radio__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;border:2px solid #666666;min-width:20px;width:1.25rem;min-height:20px;height:1.25rem;border-radius:50%;background-color:#ffffff;position:relative;-webkit-transition:all 200ms ease;transition:all 200ms ease;cursor:pointer}.mc-radio__input[type=number]::-webkit-inner-spin-button,.mc-radio__input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.mc-radio__input[type=number]{-moz-appearance:textfield}.mc-radio__input[type=search]::-webkit-search-decoration:hover,.mc-radio__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-radio__input::before{border-radius:50%;content:"";display:block;height:0.375rem;left:50%;min-height:6px;min-width:6px;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:0.375rem}.mc-radio__input::-ms-check{background-color:#ffffff;border:2px solid #666666;color:#ffffff}.mc-radio__input.is-hover,.mc-radio__input:hover{border-color:#191919}.mc-radio__input.is-hover::-ms-check,.mc-radio__input:hover::-ms-check{border-color:#191919}.mc-radio__input.is-focus,.mc-radio__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-radio__input.is-focus::-ms-check,.mc-radio__input:focus::-ms-check{box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-radio__input:checked{background-color:#46a610;border-color:#46a610}.mc-radio__input:checked::-ms-check{border-color:#46a610;background-color:#46a610}.mc-radio__input:checked::before{background-color:#ffffff}.mc-radio__input:checked:hover{border-color:#035010}.mc-radio__input:checked:hover::-ms-check{border-color:#035010}.mc-radio__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-radio__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-radio__input:disabled+.mc-radio__label{color:#808080}.mc-radio__input:disabled:checked::before{background-color:#999999}.mc-radio__input.is-invalid{border-color:#c61112}.mc-radio__input.is-invalid::-ms-check{border-color:#c61112}.mc-radio__input.is-invalid.is-hover,.mc-radio__input.is-invalid:hover{border-color:#530000}.mc-radio__input.is-invalid.is-hover::-ms-check,.mc-radio__input.is-invalid:hover::-ms-check{border-color:#530000}',this.shadowRoot.appendChild(c),i(this,{target:this.shadowRoot,props:o(this.attributes),customElement:!0},E,j,t,{id:0,name:1,checked:2,disabled:3,isinvalid:4,label:5},null),e&&(e.target&&r(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["id","name","checked","disabled","isinvalid","label"]}get id(){return this.$$.ctx[0]}set id(e){this.$$set({id:e}),a()}get name(){return this.$$.ctx[1]}set name(e){this.$$set({name:e}),a()}get checked(){return this.$$.ctx[2]}set checked(e){this.$$set({checked:e}),a()}get disabled(){return this.$$.ctx[3]}set disabled(e){this.$$set({disabled:e}),a()}get isinvalid(){return this.$$.ctx[4]}set isinvalid(e){this.$$set({isinvalid:e}),a()}get label(){return this.$$.ctx[5]}set label(e){this.$$set({label:e}),a()}}export{C as default};
+import{c as e,S as s,i as o,f as r,s as a,a as i,p as t,e as l,b as d,F as c,E as n,t as v,d as u,g as p,h as m,I as b,L as f,G as h,y as _,m as k,M as $,n as g,K as x,q as y,N as w}from"../../index-c0bfe08f.js";import{g as j}from"../../spread-ed04f539.js";import{c as B}from"../../EventForward-bb916157.js";function E(e){i(e,"svelte-1u25pv4",'.mc-radio.svelte-1u25pv4.svelte-1u25pv4{align-items:center;display:flex;gap:0.5rem}.mc-radio__label.svelte-1u25pv4.svelte-1u25pv4{font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-radio__input.svelte-1u25pv4.svelte-1u25pv4{appearance:none;margin:0;cursor:pointer;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:0.125rem solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative}.mc-radio__input.svelte-1u25pv4.svelte-1u25pv4::before{border-radius:100%;content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem}.mc-radio__input.svelte-1u25pv4.svelte-1u25pv4:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-radio__input.svelte-1u25pv4.svelte-1u25pv4:focus-visible{box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem}.mc-radio__input.svelte-1u25pv4.svelte-1u25pv4:checked{background-color:var(--forms-color-background-checked, #117f03)}.mc-radio__input.svelte-1u25pv4.svelte-1u25pv4:checked::before{background-color:var(--forms-color-background-default, #ffffff)}.mc-radio__input.svelte-1u25pv4.svelte-1u25pv4:checked,.mc-radio__input.svelte-1u25pv4.svelte-1u25pv4:disabled{border-color:transparent}.mc-radio__input.svelte-1u25pv4.svelte-1u25pv4:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-radio__input.svelte-1u25pv4.svelte-1u25pv4:disabled:checked::before{background-color:var(--forms-color-icon-disabled, #737373)}.mc-radio__input.svelte-1u25pv4:disabled+.mc-radio__label.svelte-1u25pv4{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-radio__input.svelte-1u25pv4.svelte-1u25pv4:not(:disabled):checked:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-radio__input.is-invalid.svelte-1u25pv4.svelte-1u25pv4:not(:checked){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-radio__input.is-invalid.svelte-1u25pv4.svelte-1u25pv4:not(:checked):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}')}function F(e){let s,o,r,a,i,g,x,y,w,B=[{id:e[0]},{type:"radio"},{class:r=q(e[4])},{"aria-invalid":e[4]},{name:e[1]},{checked:e[2]},{disabled:e[3]},e[6]],E={};for(let e=0;e<B.length;e+=1)E=t(E,B[e]);return{c(){s=l("div"),o=l("input"),a=d(),i=l("label"),g=c(e[5]),n(o,E),v(o,"svelte-1u25pv4",!0),u(i,"for",e[0]),u(i,"class","mc-radio__label svelte-1u25pv4"),u(s,"class",x="mc-radio "+e[7]+" svelte-1u25pv4")},m(r,t){p(r,s,t),m(s,o),o.autofocus&&o.focus(),m(s,a),m(s,i),m(i,g),y||(w=[b(e[8].call(null,o)),f(s,"click",e[9])],y=!0)},p(e,[a]){n(o,E=j(B,[1&a&&{id:e[0]},{type:"radio"},16&a&&r!==(r=q(e[4]))&&{class:r},16&a&&{"aria-invalid":e[4]},2&a&&{name:e[1]},4&a&&{checked:e[2]},8&a&&{disabled:e[3]},64&a&&e[6]])),v(o,"svelte-1u25pv4",!0),32&a&&h(g,e[5]),1&a&&u(i,"for",e[0]),128&a&&x!==(x="mc-radio "+e[7]+" svelte-1u25pv4")&&u(s,"class",x)},i:_,o:_,d(e){e&&k(s),y=!1,$(w)}}}function q(e){const s=["mc-radio__input"];return e&&s.push("is-invalid"),s.join(" ")}function z(e,s,o){let r,a;const i=["id","name","checked","disabled","isinvalid","label"];let l=g(s,i),{id:d}=s,{name:c}=s,{checked:n}=s,{disabled:v=!1}=s,{isinvalid:u=!1}=s,{label:p}=s;const m=B(x());return e.$$set=e=>{o(11,s=t(t({},s),y(e))),o(10,l=g(s,i)),"id"in e&&o(0,d=e.id),"name"in e&&o(1,c=e.name),"checked"in e&&o(2,n=e.checked),"disabled"in e&&o(3,v=e.disabled),"isinvalid"in e&&o(4,u=e.isinvalid),"label"in e&&o(5,p=e.label)},e.$$.update=()=>{o(7,r=s.class),o(6,a=Object.assign({},l)),64&e.$$.dirty&&delete a.class},s=y(s),[d,c,n,v,u,p,a,r,m,function(s){w.call(this,e,s)}]}class G extends s{constructor(e){super(),o(this,e,z,F,a,{id:0,name:1,checked:2,disabled:3,isinvalid:4,label:5},E)}get id(){return this.$$.ctx[0]}set id(e){this.$$set({id:e}),r()}get name(){return this.$$.ctx[1]}set name(e){this.$$set({name:e}),r()}get checked(){return this.$$.ctx[2]}set checked(e){this.$$set({checked:e}),r()}get disabled(){return this.$$.ctx[3]}set disabled(e){this.$$set({disabled:e}),r()}get isinvalid(){return this.$$.ctx[4]}set isinvalid(e){this.$$set({isinvalid:e}),r()}get label(){return this.$$.ctx[5]}set label(e){this.$$set({label:e}),r()}}e(G,{id:{},name:{},checked:{},disabled:{type:"Boolean"},isinvalid:{type:"Boolean"},label:{}},[],[],!0);export{G as default};
 //# sourceMappingURL=Radio.js.map

package/public/components/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { get_current_component } from 'svelte/internal';\n  import { createEventForwarder } from '../../utilities/EventForward';\n\n  export let id: string;\n  export let name: string;\n  export let checked: boolean;\n  export let disabled = false;\n  export let isinvalid = false;\n  export let label: string;\n\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function getClasses(isInvalid: boolean): string {\n    const classes = ['mc-radio__input'];\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<!-- svelte-ignore a11y-click-events-have-key-events -->\n<div class=\"mc-radio {userClass}\" on:click>\n  <input\n    use:forwardEvents\n    {id}\n    type=\"radio\"\n    class={getClasses(isinvalid)}\n    aria-invalid={isinvalid}\n    {name}\n    {checked}\n    {disabled}\n    {...attributes}\n  />\n  <label for={id} class=\"mc-radio__label\">{label}</label>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.radio';\n</style>\n"],"names":["class","input_class_value","getClasses","ctx","insert","target","div","anchor","append","input","label_1","dirty","isInvalid","classes","push","join","id","$$props","name","checked","disabled","isinvalid","label","forwardEvents","createEventForwarder","get_current_component","$$invalidate","userClass","attributes","Object","assign","$$restProps"],"mappings":"uTAkCWA,MAAAC,EAAAC,EAAWC,EAAS,qBACbA,EAAS,+CAInBA,EAAU,2GAEyBA,EAAK,8BAAlCA,EAAE,6DAZMA,EAAS,YAA/BC,EAaKC,EAAAC,EAAAC,GAZHC,EAUCF,EAAAG,iCACDD,EAAsDF,EAAAI,kHAP7C,GAAAC,GAAAV,KAAAA,EAAAC,EAAWC,EAAS,MAAA,CAAAH,MAAAC,yBACbE,EAAS,oEAInBA,EAAU,gBAEyBA,EAAK,mBAAlCA,EAAE,8BAZMA,EAAS,sDAVpB,SAAAD,EAAWU,GACZ,MAAAC,GAAW,0BACbD,GACFC,EAAQC,KAAK,cAERD,EAAQE,KAAK,+GAlBXC,GAAUC,QACVC,GAAYD,WACZE,GAAgBF,GAChBG,SAAAA,GAAW,GAAKH,GAChBI,UAAAA,GAAY,GAAKJ,SACjBK,GAAaL,QAElBM,EAAgBC,EAAqBC,mQAExCC,EAAA,EAAAC,EAAYV,EAAQjB,WACpB4B,EAALC,OAAAC,UAAuBC,0BACXH,EAAW5B"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  // @ts-ignore Need to use internal Svelte function\n  import { get_current_component } from 'svelte/internal';\n  import { createEventForwarder } from '../../utilities/EventForward';\n\n  export let id: string;\n  export let name: string;\n  export let checked: boolean;\n  export let disabled = false;\n  export let isinvalid = false;\n  export let label: string;\n\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function getClasses(isInvalid: boolean): string {\n    const classes = ['mc-radio__input'];\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<!-- svelte-ignore a11y-click-events-have-key-events -->\n<div class=\"mc-radio {userClass}\" on:click>\n  <input\n    use:forwardEvents\n    {id}\n    type=\"radio\"\n    class={getClasses(isinvalid)}\n    aria-invalid={isinvalid}\n    {name}\n    {checked}\n    {disabled}\n    {...attributes}\n  />\n  <label for={id} class=\"mc-radio__label\">{label}</label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n</style>\n"],"names":["class","input_class_value","getClasses","ctx","insert","target","div","anchor","append","input","label_1","dirty","isInvalid","classes","push","join","id","$$props","name","checked","disabled","isinvalid","label","forwardEvents","createEventForwarder","get_current_component","$$invalidate","userClass","attributes","Object","assign","$$restProps"],"mappings":"wtFAmCWA,MAAAC,EAAAC,EAAWC,EAAS,qBACbA,EAAS,+CAInBA,EAAU,2GAEyBA,EAAK,8CAAlCA,EAAE,4EAZMA,EAAS,GAAA,2BAA/BC,EAaKC,EAAAC,EAAAC,GAZHC,EAUCF,EAAAG,iCACDD,EAAsDF,EAAAI,kHAP7C,GAAAC,GAAAV,KAAAA,EAAAC,EAAWC,EAAS,MAAA,CAAAH,MAAAC,yBACbE,EAAS,oEAInBA,EAAU,yCAEyBA,EAAK,mBAAlCA,EAAE,8BAZMA,EAAS,GAAA,qEAVpB,SAAAD,EAAWU,GACZ,MAAAC,GAAW,0BACbD,GACFC,EAAQC,KAAK,cAERD,EAAQE,KAAK,+GAlBXC,GAAUC,QACVC,GAAYD,WACZE,GAAgBF,GAChBG,SAAAA,GAAW,GAAKH,GAChBI,UAAAA,GAAY,GAAKJ,SACjBK,GAAaL,QAElBM,EAAgBC,EAAqBC,mQAExCC,EAAA,EAAAC,EAAYV,EAAQjB,OACtB0B,EAAA,EAAEE,EAAUC,OAAAC,OAAA,CAAA,EAAQC,0BACXH,EAAW5B"}

package/public/components/radio/Radio.svelte

@@ -1,6 +1,7 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
+  // @ts-ignore Need to use internal Svelte function
   import { get_current_component } from 'svelte/internal';
   import { createEventForwarder } from '../../utilities/EventForward';
 
@@ -43,6 +44,5 @@
 </div>
 
 <style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.radio';
+  @use '@mozaic-ds/styles/components/radio';
 </style>

package/public/components/radiogroup/RadioGroup.js

@@ -1,2 +1,2 @@
-import{S as e,i,a as n,b as t,f as o,s as r,c as l,e as a,d as c,n as d,h as s,j as m,k as _,a7 as f,l as p,m as u,o as h,q as b,r as g,u as v,v as k,y as x,a1 as w,N as $,x as y,P as z,a8 as j}from"../../index-c222d0b7.js";import{E}from"../../EventHandler-f7ee47ca.js";import{c as q}from"../../EventForward-c4c8cd29.js";function C(e,i,n){const t=e.slice();return t[16]=i[n],t}function F(e){let i,n;return{c(){i=a("legend"),n=k(e[1]),s(i,"class","mc-field__legend")},m(e,o){t(e,i,o),_(i,n)},p(e,i){2&i&&x(n,e[1])},d(e){e&&u(i)}}}function M(e,i){let n,o,r,l,d,m,f,p,h,b,g,v,j,E,q,C=!1,F=i[16].label+"";function M(){return i[13](i[16])}return j=w(i[12][0]),{key:e,first:null,c(){n=a("div"),o=a("input"),f=c(),p=a("label"),h=k(F),g=c(),s(o,"type","radio"),s(o,"class","mc-radio__input"),s(o,"id",r=i[16].id),s(o,"name",l=i[16].name),o.__value=d=i[16].value,o.value=o.__value,o.disabled=m=i[16].disabled,s(p,"for",b=i[16].id),s(p,"class","mc-radio__label"),s(n,"class",v="mc-radio mc-field__item "+i[8].class),j.p(o),this.first=n},m(e,r){t(e,n,r),_(n,o),o.checked=o.__value===i[4],_(n,f),_(n,p),_(p,h),_(n,g),E||(q=[$(i[6].call(null,o)),y(o,"change",i[11]),y(o,"change",M)],E=!0)},p(e,t){i=e,32&t&&r!==(r=i[16].id)&&s(o,"id",r),32&t&&l!==(l=i[16].name)&&s(o,"name",l),32&t&&d!==(d=i[16].value)&&(o.__value=d,o.value=o.__value,C=!0),32&t&&m!==(m=i[16].disabled)&&(o.disabled=m),(C||48&t)&&(o.checked=o.__value===i[4]),32&t&&F!==(F=i[16].label+"")&&x(h,F),32&t&&b!==(b=i[16].id)&&s(p,"for",b),256&t&&v!==(v="mc-radio mc-field__item "+i[8].class)&&s(n,"class",v)},d(e){e&&u(n),j.r(),E=!1,z(q)}}}function N(e){let i,n,o,r,h,b=[],g=new Map,v=e[1]&&e[1].length&&F(e),k=e[5];const x=e=>e[16].id;for(let i=0;i<k.length;i+=1){let n=C(e,k,i),t=x(n);g.set(t,b[i]=M(t,n))}let w=[{id:e[0]},{class:"radio-group-container"},e[3]],$={};for(let e=0;e<w.length;e+=1)$=l($,w[e]);return{c(){i=a("div"),n=a("fieldset"),v&&v.c(),o=c(),r=a("div");for(let e=0;e<b.length;e+=1)b[e].c();this.c=d,s(r,"class",h="mc-field__container "+(e[2]?"mc-field__container--inline":"")),s(n,"class","mc-field mc-field--group"),m(i,$)},m(e,l){t(e,i,l),_(i,n),v&&v.m(n,null),_(n,o),_(n,r);for(let e=0;e<b.length;e+=1)b[e]&&b[e].m(r,null)},p(e,[t]){e[1]&&e[1].length?v?v.p(e,t):(v=F(e),v.c(),v.m(n,o)):v&&(v.d(1),v=null),432&t&&(k=e[5],b=f(b,t,x,1,e,k,g,r,j,M,null,C)),4&t&&h!==(h="mc-field__container "+(e[2]?"mc-field__container--inline":""))&&s(r,"class",h),m(i,$=p(w,[1&t&&{id:e[0]},{class:"radio-group-container"},8&t&&e[3]]))},i:d,o:d,d(e){e&&u(i),v&&v.d();for(let e=0;e<b.length;e+=1)b[e].d()}}}function O(e,i,n){let t,o;const r=["id","selectedvalue","options","legend","inline"];let a=h(i,r),{id:c}=i,{selectedvalue:d}=i,{options:s}=i,{legend:m}=i,{inline:_}=i,f=new E(b(),g());const p=q(b());let u;function k(e){n(4,u=e),f.dispatch("change",e)}return e.$$set=e=>{n(8,i=l(l({},i),v(e))),n(15,a=h(i,r)),"id"in e&&n(0,c=e.id),"selectedvalue"in e&&n(9,d=e.selectedvalue),"options"in e&&n(10,s=e.options),"legend"in e&&n(1,m=e.legend),"inline"in e&&n(2,_=e.inline)},e.$$.update=()=>{1024&e.$$.dirty&&n(5,t=s?JSON.parse(s):[]),n(3,o=Object.assign({},a)),8&e.$$.dirty&&delete o.class,512&e.$$.dirty&&n(4,u=d)},i=v(i),[c,m,_,o,u,t,p,k,i,d,s,function(){u=this.__value,n(4,u),n(9,d)},[[]],e=>k(e.value)]}class R extends e{constructor(e){super();const l=document.createElement("style");l.textContent='@charset "UTF-8";.mc-radio{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mc-radio__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:0.5rem;color:#000000}.mc-radio__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;border:2px solid #666666;min-width:20px;width:1.25rem;min-height:20px;height:1.25rem;border-radius:50%;background-color:#ffffff;position:relative;-webkit-transition:all 200ms ease;transition:all 200ms ease;cursor:pointer}.mc-radio__input[type=number]::-webkit-inner-spin-button,.mc-radio__input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.mc-radio__input[type=number]{-moz-appearance:textfield}.mc-radio__input[type=search]::-webkit-search-decoration:hover,.mc-radio__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-radio__input::before{border-radius:50%;content:"";display:block;height:0.375rem;left:50%;min-height:6px;min-width:6px;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:0.375rem}.mc-radio__input::-ms-check{background-color:#ffffff;border:2px solid #666666;color:#ffffff}.mc-radio__input.is-hover,.mc-radio__input:hover{border-color:#191919}.mc-radio__input.is-hover::-ms-check,.mc-radio__input:hover::-ms-check{border-color:#191919}.mc-radio__input.is-focus,.mc-radio__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-radio__input.is-focus::-ms-check,.mc-radio__input:focus::-ms-check{box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-radio__input:checked{background-color:#46a610;border-color:#46a610}.mc-radio__input:checked::-ms-check{border-color:#46a610;background-color:#46a610}.mc-radio__input:checked::before{background-color:#ffffff}.mc-radio__input:checked:hover{border-color:#035010}.mc-radio__input:checked:hover::-ms-check{border-color:#035010}.mc-radio__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-radio__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-radio__input:disabled+.mc-radio__label{color:#808080}.mc-radio__input:disabled:checked::before{background-color:#999999}.mc-radio__input.is-invalid{border-color:#c61112}.mc-radio__input.is-invalid::-ms-check{border-color:#c61112}.mc-radio__input.is-invalid.is-hover,.mc-radio__input.is-invalid:hover{border-color:#530000}.mc-radio__input.is-invalid.is-hover::-ms-check,.mc-radio__input.is-invalid:hover::-ms-check{border-color:#530000}.mc-field__label,.mc-field__legend{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-field__legend{padding-left:0;padding-right:0}.mc-field__legend+.mc-field__container,.mc-field__help+.mc-field__container{margin-top:1rem}.mc-field__requirement,.mc-field__help{font-size:0.75rem;line-height:1.3333333333;font-weight:400;color:#666666}.mc-field__requirement::before{content:" - "}.mc-field__help{display:block;margin-top:0.125rem}.mc-field .mc-field__input,.mc-field .mc-field__element{margin-top:0.5rem}@media screen and (min-width: 769px){.mc-field__container--inline,.mc-field__element--inline{display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (min-width: 769px){.mc-field__container--inline .mc-field__item:not(:last-child),.mc-field__element--inline .mc-field__item:not(:last-child){margin-bottom:0;margin-right:1rem}}@media screen and (min-width: 1024px){.mc-field__container--inline .mc-field__item:not(:last-child),.mc-field__element--inline .mc-field__item:not(:last-child){margin-right:2rem}}.mc-field__item:not(:last-child){margin-bottom:1rem}.mc-field__error-message{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-field--group{border:none;margin-left:0;margin-right:0;padding:0}.mc-field--group .mc-field__error-message{margin-top:0.5rem}',this.shadowRoot.appendChild(l),i(this,{target:this.shadowRoot,props:n(this.attributes),customElement:!0},O,N,r,{id:0,selectedvalue:9,options:10,legend:1,inline:2},null),e&&(e.target&&t(e.target,this,e.anchor),e.props&&(this.$set(e.props),o()))}static get observedAttributes(){return["id","selectedvalue","options","legend","inline"]}get id(){return this.$$.ctx[0]}set id(e){this.$$set({id:e}),o()}get selectedvalue(){return this.$$.ctx[9]}set selectedvalue(e){this.$$set({selectedvalue:e}),o()}get options(){return this.$$.ctx[10]}set options(e){this.$$set({options:e}),o()}get legend(){return this.$$.ctx[1]}set legend(e){this.$$set({legend:e}),o()}get inline(){return this.$$.ctx[2]}set inline(e){this.$$set({inline:e}),o()}}export{R as default};
+import{c as e,S as l,i,f as r,s as t,a as s,p as o,e as a,b as n,d,E as v,t as c,g as k,h as m,y as b,m as f,n as _,K as u,P as w,q as g,F as h,G as p,_ as $,O as x,I as y,L as E,M}from"../../index-c0bfe08f.js";import{e as Z,u as j,d as C}from"../../each-45e2db5c.js";import{g as z}from"../../spread-ed04f539.js";import{E as q}from"../../EventHandler-f7ee47ca.js";import{c as B}from"../../EventForward-bb916157.js";function F(e){s(e,"svelte-1bvrkkw",".mc-radio.svelte-1bvrkkw.svelte-1bvrkkw{align-items:center;display:flex;gap:0.5rem}.mc-radio__label.svelte-1bvrkkw.svelte-1bvrkkw{font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-radio__input.svelte-1bvrkkw.svelte-1bvrkkw{appearance:none;margin:0;cursor:pointer;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:0.125rem solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative}.mc-radio__input.svelte-1bvrkkw.svelte-1bvrkkw::before{border-radius:100%;content:\"\";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem}.mc-radio__input.svelte-1bvrkkw.svelte-1bvrkkw:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-radio__input.svelte-1bvrkkw.svelte-1bvrkkw:focus-visible{box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem}.mc-radio__input.svelte-1bvrkkw.svelte-1bvrkkw:checked{background-color:var(--forms-color-background-checked, #117f03)}.mc-radio__input.svelte-1bvrkkw.svelte-1bvrkkw:checked::before{background-color:var(--forms-color-background-default, #ffffff)}.mc-radio__input.svelte-1bvrkkw.svelte-1bvrkkw:checked,.mc-radio__input.svelte-1bvrkkw.svelte-1bvrkkw:disabled{border-color:transparent}.mc-radio__input.svelte-1bvrkkw.svelte-1bvrkkw:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-radio__input.svelte-1bvrkkw.svelte-1bvrkkw:disabled:checked::before{background-color:var(--forms-color-icon-disabled, #737373)}.mc-radio__input.svelte-1bvrkkw:disabled+.mc-radio__label.svelte-1bvrkkw{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-radio__input.svelte-1bvrkkw.svelte-1bvrkkw:not(:disabled):checked:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-radio__input.is-invalid.svelte-1bvrkkw.svelte-1bvrkkw:not(:checked){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-radio__input.is-invalid.svelte-1bvrkkw.svelte-1bvrkkw:not(:checked):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-field__label.svelte-1bvrkkw.svelte-1bvrkkw,.mc-field__legend.svelte-1bvrkkw.svelte-1bvrkkw{font-size:0.875rem;line-height:1.3;font-weight:400;color:var(--field-color-label, #000000)}.mc-field__legend.svelte-1bvrkkw.svelte-1bvrkkw{padding-left:0;padding-right:0}.mc-field__legend.svelte-1bvrkkw+.mc-field__container.svelte-1bvrkkw,.mc-field__help.svelte-1bvrkkw+.mc-field__container.svelte-1bvrkkw{margin-top:0.5rem}.mc-field__requirement.svelte-1bvrkkw.svelte-1bvrkkw,.mc-field__help.svelte-1bvrkkw.svelte-1bvrkkw{font-size:0.75rem;line-height:1.5;font-weight:400;vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help.svelte-1bvrkkw.svelte-1bvrkkw{display:block;margin-top:0.125rem}.mc-field__content.svelte-1bvrkkw.svelte-1bvrkkw{margin-top:0.5rem}@media screen and (min-width: 769px){.mc-field__content__container--inline.svelte-1bvrkkw.svelte-1bvrkkw,.mc-field__content__element--inline.svelte-1bvrkkw.svelte-1bvrkkw{display:flex;flex-wrap:wrap}}@media screen and (min-width: 769px){.mc-field__content__container--inline__item.svelte-1bvrkkw.svelte-1bvrkkw:not(:last-child),.mc-field__content__element--inline__item.svelte-1bvrkkw.svelte-1bvrkkw:not(:last-child){margin-bottom:0.25rem;margin-right:1rem}}.mc-field__item.svelte-1bvrkkw.svelte-1bvrkkw{padding-top:0.375rem;padding-bottom:0.375rem}.mc-field__item.svelte-1bvrkkw.svelte-1bvrkkw:not(:last-child){margin-bottom:0.25rem}.mc-field__validation-message.svelte-1bvrkkw.svelte-1bvrkkw{font-size:0.875rem;line-height:1.5;display:inline-flex;gap:0.25rem;margin-top:0.25rem}.mc-field__validation-message.svelte-1bvrkkw.svelte-1bvrkkw::before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid.svelte-1bvrkkw.svelte-1bvrkkw{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid.svelte-1bvrkkw.svelte-1bvrkkw::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-invalid.svelte-1bvrkkw.svelte-1bvrkkw{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid.svelte-1bvrkkw.svelte-1bvrkkw::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\")}.mc-field--group.svelte-1bvrkkw.svelte-1bvrkkw{border:none;margin-left:0;margin-right:0;padding:0}")}function L(e,l,i){const r=e.slice();return r[17]=l[i],r}function O(e){let l,i;return{c(){l=a("legend"),i=h(e[1]),d(l,"class","mc-field__legend svelte-1bvrkkw")},m(e,r){k(e,l,r),m(l,i)},p(e,l){2&l&&p(i,e[1])},d(e){e&&f(l)}}}function A(e,l){let i,r,t,s,o,v,b,_,u,w,g,Z,j,C,z,q=!1,B=l[17].label+"";function F(){return l[14](l[17])}return j=$(l[13][0]),{key:e,first:null,c(){i=a("div"),r=a("input"),b=n(),_=a("label"),u=h(B),g=n(),d(r,"type","radio"),d(r,"class","mc-radio__input svelte-1bvrkkw"),d(r,"id",t=l[17].id),d(r,"name",s=l[17].name),r.__value=o=l[17].value,x(r,r.__value),r.disabled=v=l[17].disabled,c(r,"is-invalid",l[3]),d(_,"for",w=l[17].id),d(_,"class","mc-radio__label svelte-1bvrkkw"),d(i,"class",Z="mc-radio mc-field__item "+l[9].class+" svelte-1bvrkkw"),j.p(r),this.first=i},m(e,t){k(e,i,t),m(i,r),r.checked=r.__value===l[5],m(i,b),m(i,_),m(_,u),m(i,g),C||(z=[y(l[7].call(null,r)),E(r,"change",l[12]),E(r,"change",F)],C=!0)},p(e,a){l=e,64&a&&t!==(t=l[17].id)&&d(r,"id",t),64&a&&s!==(s=l[17].name)&&d(r,"name",s),64&a&&o!==(o=l[17].value)&&(r.__value=o,x(r,r.__value),q=!0),64&a&&v!==(v=l[17].disabled)&&(r.disabled=v),(q||96&a)&&(r.checked=r.__value===l[5]),8&a&&c(r,"is-invalid",l[3]),64&a&&B!==(B=l[17].label+"")&&p(u,B),64&a&&w!==(w=l[17].id)&&d(_,"for",w),512&a&&Z!==(Z="mc-radio mc-field__item "+l[9].class+" svelte-1bvrkkw")&&d(i,"class",Z)},d(e){e&&f(i),j.r(),C=!1,M(z)}}}function G(e){let l,i,r,t,s,_=[],u=new Map,w=e[1]&&e[1].length&&O(e),g=Z(e[6]);const h=e=>e[17].id;for(let l=0;l<g.length;l+=1){let i=L(e,g,l),r=h(i);u.set(r,_[l]=A(r,i))}let p=[{id:e[0]},{class:"radio-group-container"},e[4]],$={};for(let e=0;e<p.length;e+=1)$=o($,p[e]);return{c(){l=a("div"),i=a("fieldset"),w&&w.c(),r=n(),t=a("div");for(let e=0;e<_.length;e+=1)_[e].c();d(t,"class",s="mc-field__content "+(e[2]?"mc-field__content--inline":"")+" svelte-1bvrkkw"),d(i,"class","mc-field mc-field--group svelte-1bvrkkw"),v(l,$),c(l,"svelte-1bvrkkw",!0)},m(e,s){k(e,l,s),m(l,i),w&&w.m(i,null),m(i,r),m(i,t);for(let e=0;e<_.length;e+=1)_[e]&&_[e].m(t,null)},p(e,[o]){e[1]&&e[1].length?w?w.p(e,o):(w=O(e),w.c(),w.m(i,r)):w&&(w.d(1),w=null),872&o&&(g=Z(e[6]),_=j(_,o,h,1,e,g,u,t,C,A,null,L)),4&o&&s!==(s="mc-field__content "+(e[2]?"mc-field__content--inline":"")+" svelte-1bvrkkw")&&d(t,"class",s),v(l,$=z(p,[1&o&&{id:e[0]},{class:"radio-group-container"},16&o&&e[4]])),c(l,"svelte-1bvrkkw",!0)},i:b,o:b,d(e){e&&f(l),w&&w.d();for(let e=0;e<_.length;e+=1)_[e].d()}}}function H(e,l,i){let r,t;const s=["id","selectedvalue","options","legend","inline","isinvalid"];let a=_(l,s),{id:n}=l,{selectedvalue:d}=l,{options:v}=l,{legend:c}=l,{inline:k}=l,{isinvalid:m=!1}=l,b=new q(u(),w());const f=B(u());let h;function p(e){i(5,h=e),b.dispatch("change",h)}return e.$$set=e=>{i(9,l=o(o({},l),g(e))),i(16,a=_(l,s)),"id"in e&&i(0,n=e.id),"selectedvalue"in e&&i(10,d=e.selectedvalue),"options"in e&&i(11,v=e.options),"legend"in e&&i(1,c=e.legend),"inline"in e&&i(2,k=e.inline),"isinvalid"in e&&i(3,m=e.isinvalid)},e.$$.update=()=>{2048&e.$$.dirty&&i(6,r=v),i(4,t=Object.assign({},a)),16&e.$$.dirty&&delete t.class,1024&e.$$.dirty&&i(5,h=d)},l=g(l),[n,c,k,m,t,h,r,f,p,l,d,v,function(){h=this.__value,i(5,h),i(10,d)},[[]],e=>p(e.value)]}class I extends l{constructor(e){super(),i(this,e,H,G,t,{id:0,selectedvalue:10,options:11,legend:1,inline:2,isinvalid:3},F)}get id(){return this.$$.ctx[0]}set id(e){this.$$set({id:e}),r()}get selectedvalue(){return this.$$.ctx[10]}set selectedvalue(e){this.$$set({selectedvalue:e}),r()}get options(){return this.$$.ctx[11]}set options(e){this.$$set({options:e}),r()}get legend(){return this.$$.ctx[1]}set legend(e){this.$$set({legend:e}),r()}get inline(){return this.$$.ctx[2]}set inline(e){this.$$set({inline:e}),r()}get isinvalid(){return this.$$.ctx[3]}set isinvalid(e){this.$$set({isinvalid:e}),r()}}e(I,{id:{},selectedvalue:{},options:{type:"Array",attribute:"options"},legend:{},inline:{},isinvalid:{type:"Boolean"}},[],[],!0);export{I as default};
 //# sourceMappingURL=RadioGroup.js.map

package/public/components/radiogroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  import type { RadioGroupOption } from './radioGroup.types';\n\n  export let id: string;\n  export let selectedvalue: string;\n  export let options: string;\n  export let legend: string;\n  export let inline: boolean;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  const forwardEvents = createEventForwarder(get_current_component());\n  let selectedValue: string | undefined;\n\n  $: parsedOptions = options ? (JSON.parse(options) as RadioGroupOption[]) : [];\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  $: selectedValue = selectedvalue;\n\n  function onChange(value: string) {\n    selectedValue = value;\n    eventHandler.dispatch('change', value);\n  }\n</script>\n\n<div {id} class=\"radio-group-container\" {...attributes}>\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend && legend.length}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n\n    <div\n      class=\"mc-field__container {inline ? 'mc-field__container--inline' : ''}\"\n    >\n      {#each parsedOptions as opt (opt.id)}\n        <div class=\"mc-radio mc-field__item {$$props.class}\">\n          <input\n            use:forwardEvents\n            type=\"radio\"\n            class=\"mc-radio__input\"\n            id={opt.id}\n            name={opt.name}\n            bind:group={selectedValue}\n            value={opt.value}\n            disabled={opt.disabled}\n            on:change={() => onChange(opt.value)}\n          />\n          <label for={opt.id} class=\"mc-radio__label\">{opt.label}</label>\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.radio';\n  @import '@mozaic-ds/styles/components/c.fields';\n</style>\n"],"names":["ctx","insert","target","legend_1","anchor","t1_value","label","attr","input","input_id_value","id","input_name_value","name","__value","input_value_value","value","disabled","input_disabled_value","label_for_value","div","div_class_value","class","append","dirty","set_data","t1","length","create_if_block","get_key","i","div1","fieldset","div0","$$props","selectedvalue","options","legend","inline","eventHandler","EventHandler","get_current_component","createEventDispatcher","forwardEvents","createEventForwarder","selectedValue","onChange","$$invalidate","dispatch","parsedOptions","JSON","parse","attributes","Object","assign","$$restProps","this","opt"],"mappings":"4aAsCSA,EAAM,4CADTC,EAEQC,EAAAC,EAAAC,2BADLJ,EAAM,2EAoBwCK,EAAAL,MAAIM,MAAK,0LAPhDC,EAAAC,EAAA,KAAAC,EAAAT,MAAIU,IACFH,EAAAC,EAAA,OAAAG,EAAAX,MAAIY,MAEHJ,EAAAK,QAAAC,EAAAd,MAAIe,wBACDP,EAAAQ,SAAAC,EAAAjB,MAAIgB,SAGJT,EAAAD,EAAA,MAAAY,EAAAlB,MAAIU,mCAZmBH,EAAAY,EAAA,QAAAC,EAAA,2BAAApB,KAAQqB,mCAA7CpB,EAaKC,EAAAiB,EAAAf,GAZHkB,EAUCH,EAAAX,yBAJaR,EAAa,UAK3BsB,EAA8DH,EAAAb,oGAPxD,GAAAiB,GAAAd,KAAAA,EAAAT,MAAIU,iBACF,GAAAa,GAAAZ,KAAAA,EAAAX,MAAIY,qBAEH,GAAAW,GAAAT,KAAAA,EAAAd,MAAIe,6CACD,GAAAQ,GAAAN,KAAAA,EAAAjB,MAAIgB,4DAFFhB,EAAa,IAKkB,GAAAuB,GAAAlB,KAAAA,EAAAL,MAAIM,MAAK,KAAAkB,EAAAC,EAAApB,GAA1C,GAAAkB,GAAAL,KAAAA,EAAAlB,MAAIU,kBAZmB,IAAAa,GAAAH,KAAAA,EAAA,2BAAApB,KAAQqB,oGAV5CrB,EAAM,IAAIA,EAAM,GAAC0B,QAAMC,EAAA3B,KASnBA,EAAa,GAAS,MAAA4B,EAAA5B,GAAAA,MAAIU,mBAA/BgB,OAAIG,GAAA,EAAA,6FAXgC7B,EAAU,qMASpBA,EAAM,GAAG,8BAAgC,4DAT3EC,EA6BKC,EAAA4B,EAAA1B,GA5BHkB,EA2BUQ,EAAAC,yBApBRT,EAmBKS,EAAAC,8DAzBAhC,EAAM,IAAIA,EAAM,GAAC0B,uEASb1B,EAAa,wEAFQA,EAAM,GAAG,8BAAgC,oFAT/BA,EAAU,kLAvBzCU,GAAUuB,iBACVC,GAAqBD,WACrBE,GAAeF,UACfG,GAAcH,UACdI,GAAeJ,EACtBK,EAAmB,IAAAC,EACrBC,IACAC,WAEIC,EAAgBC,EAAqBH,SACvCI,EAOK,SAAAC,EAAS9B,GAChB+B,EAAA,EAAAF,EAAgB7B,GAChBuB,EAAaS,SAAS,SAAUhC,8PAPjC+B,EAAA,EAAEE,EAAgBb,EAAWc,KAAKC,MAAMf,GAAO,QAC7CgB,EAALC,OAAAC,UAAuBC,yBACXH,EAAW9B,sBACpByB,EAAA,EAAEF,EAAgBV,6CA2BGU,EAAaW,KAAA1C,+BAGRgC,EAASW,EAAIzC"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: '',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n  // @ts-ignore Need to use internal Svelte function\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  import type { RadioGroupOption } from './radioGroup.types';\n\n  export let id: string;\n  export let selectedvalue: string;\n  export let options: Array<RadioGroupOption>;\n  export let legend: string;\n  export let inline: boolean;\n  export let isinvalid = false;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  const forwardEvents = createEventForwarder(get_current_component());\n  let selectedValue: string | undefined;\n\n  $: parsedOptions = options;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  $: selectedValue = selectedvalue;\n\n  function onChange(value: string) {\n    selectedValue = value;\n    eventHandler.dispatch('change', selectedValue);\n  }\n</script>\n\n<div {id} class=\"radio-group-container\" {...attributes}>\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend && legend.length}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n\n    <div class=\"mc-field__content {inline ? 'mc-field__content--inline' : ''}\">\n      {#each parsedOptions as opt (opt.id)}\n        <div class=\"mc-radio mc-field__item {$$props.class}\">\n          <input\n            use:forwardEvents\n            type=\"radio\"\n            class=\"mc-radio__input\"\n            class:is-invalid={isinvalid}\n            id={opt.id}\n            name={opt.name}\n            bind:group={selectedValue}\n            value={opt.value}\n            disabled={opt.disabled}\n            on:change={() => onChange(opt.value)}\n          />\n          <label for={opt.id} class=\"mc-radio__label\">{opt.label}</label>\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["ctx","insert","target","legend_1","anchor","t1_value","label","attr","input","input_id_value","id","input_name_value","name","__value","input_value_value","value","disabled","input_disabled_value","label_for_value","div","div_class_value","class","append","dirty","set_data","t1","length","create_if_block","get_key","i","div1","fieldset","div0","$$props","selectedvalue","options","legend","inline","isinvalid","eventHandler","EventHandler","get_current_component","createEventDispatcher","forwardEvents","createEventForwarder","selectedValue","onChange","$$invalidate","dispatch","parsedOptions","attributes","Object","assign","$$restProps","this","opt"],"mappings":"mhNA6CSA,EAAM,2DADTC,EAEQC,EAAAC,EAAAC,2BADLJ,EAAM,2EAmBwCK,EAAAL,MAAIM,MAAK,yMAPhDC,EAAAC,EAAA,KAAAC,EAAAT,MAAIU,IACFH,EAAAC,EAAA,OAAAG,EAAAX,MAAIY,MAEHJ,EAAAK,QAAAC,EAAAd,MAAIe,qBACDP,EAAAQ,SAAAC,EAAAjB,MAAIgB,0BALIhB,EAAS,IAQjBO,EAAAD,EAAA,MAAAY,EAAAlB,MAAIU,kDAbmBH,EAAAY,EAAA,QAAAC,EAAA,2BAAApB,KAAQqB,MAAK,+CAAlDpB,EAcKC,EAAAiB,EAAAf,GAbHkB,EAWCH,EAAAX,yBAJaR,EAAa,UAK3BsB,EAA8DH,EAAAb,oGAPxD,GAAAiB,GAAAd,KAAAA,EAAAT,MAAIU,iBACF,GAAAa,GAAAZ,KAAAA,EAAAX,MAAIY,qBAEH,GAAAW,GAAAT,KAAAA,EAAAd,MAAIe,0CACD,GAAAQ,GAAAN,KAAAA,EAAAjB,MAAIgB,4DAFFhB,EAAa,0BAHPA,EAAS,IAQgB,GAAAuB,GAAAlB,KAAAA,EAAAL,MAAIM,MAAK,KAAAkB,EAAAC,EAAApB,GAA1C,GAAAkB,GAAAL,KAAAA,EAAAlB,MAAIU,kBAbmB,IAAAa,GAAAH,KAAAA,EAAA,2BAAApB,KAAQqB,MAAK,gHARjDrB,EAAM,IAAIA,EAAM,GAAC0B,QAAMC,EAAA3B,OAOnBA,EAAa,IAAS,MAAA4B,EAAA5B,GAAAA,MAAIU,mBAA/BgB,OAAIG,GAAA,EAAA,6FATgC7B,EAAU,0LAQnBA,EAAM,GAAG,4BAA8B,IAAE,kHAR5EC,EA4BKC,EAAA4B,EAAA1B,GA3BHkB,EA0BUQ,EAAAC,yBAnBRT,EAkBKS,EAAAC,8DAxBAhC,EAAM,IAAIA,EAAM,GAAC0B,yEAOb1B,EAAa,uEADSA,EAAM,GAAG,4BAA8B,IAAE,mGARhCA,EAAU,uNAxBzCU,GAAUuB,iBACVC,GAAqBD,WACrBE,GAAgCF,UAChCG,GAAcH,UACdI,GAAeJ,GACfK,UAAAA,GAAY,GAAKL,EACxBM,EAAmB,IAAAC,EACrBC,IACAC,WAEIC,EAAgBC,EAAqBH,SACvCI,EAOK,SAAAC,EAAS/B,GAChBgC,EAAA,EAAAF,EAAgB9B,GAChBwB,EAAaS,SAAS,SAAUH,mSAPjCE,EAAA,EAAEE,EAAgBd,GAClBY,EAAA,EAAEG,EAAUC,OAAAC,OAAA,CAAA,EAAQC,0BACXH,EAAW7B,uBACpB0B,EAAA,EAAEF,EAAgBX,+CA0BGW,EAAaS,KAAAzC,gCAGRiC,EAASS,EAAIxC"}

package/public/components/radiogroup/RadioGroup.svelte

@@ -1,19 +1,26 @@
-<svelte:options tag={null} />
+<svelte:options
+  customElement={{
+    tag: '',
+    props: {
+      options: { type: 'Array', attribute: 'options' },
+    },
+  }}
+/>
 
 <script lang="ts">
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
   import { EventHandler } from '../../utilities/EventHandler';
   import { createEventForwarder } from '../../utilities/EventForward';
   import type { RadioGroupOption } from './radioGroup.types';
 
   export let id: string;
   export let selectedvalue: string;
-  export let options: string;
+  export let options: Array<RadioGroupOption>;
   export let legend: string;
   export let inline: boolean;
+  export let isinvalid = false;
   let eventHandler = new EventHandler(
     get_current_component(),
     createEventDispatcher(),
@@ -21,14 +28,14 @@
   const forwardEvents = createEventForwarder(get_current_component());
   let selectedValue: string | undefined;
 
-  $: parsedOptions = options ? (JSON.parse(options) as RadioGroupOption[]) : [];
+  $: parsedOptions = options;
   $: attributes = { ...$$restProps };
   $: delete attributes.class;
   $: selectedValue = selectedvalue;
 
   function onChange(value: string) {
     selectedValue = value;
-    eventHandler.dispatch('change', value);
+    eventHandler.dispatch('change', selectedValue);
   }
 </script>
 
@@ -40,15 +47,14 @@
       </legend>
     {/if}
 
-    <div
-      class="mc-field__container {inline ? 'mc-field__container--inline' : ''}"
-    >
+    <div class="mc-field__content {inline ? 'mc-field__content--inline' : ''}">
       {#each parsedOptions as opt (opt.id)}
         <div class="mc-radio mc-field__item {$$props.class}">
           <input
             use:forwardEvents
             type="radio"
             class="mc-radio__input"
+            class:is-invalid={isinvalid}
             id={opt.id}
             name={opt.name}
             bind:group={selectedValue}
@@ -64,7 +70,6 @@
 </div>
 
 <style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.radio';
-  @import '@mozaic-ds/styles/components/c.fields';
+  @use '@mozaic-ds/styles/components/radio';
+  @use '@mozaic-ds/styles/components/field';
 </style>