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

package/public/components/quantityselector/QuantitySelector.js

@@ -1,2 +1,2 @@
-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};
+import{O as e,c as t,p as r,a as o,b as l,P as n,t as a,g as s,k as i,s as c,d,h as u,i as b,j as m,r as v,f as p}from"../../custom-element-C0xaDU2s.js";import{r as y,s as f}from"../../attributes-C2cU7aS9.js";import{a as h}from"../../input-B-lhkJUW.js";function _(e,t,r,o,l){t()>r()&&t(r()),t()<o()&&t(o()),l("input-qty",t())}function q(e,t,r,o,l){t()-Number(r())>o()&&t(t()-Number(r())),l("decrement",t())}function g(e,t,r,o,l){t()+Number(r())<o()&&t(t()+Number(r())),l("increment",t())}var x=a('<div><input type="number" class="mc-quantity-selector__control svelte-rbl4od" spellcheck="false"> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-rbl4od" tabindex="-1"><span class="mc-quantity-selector__icon svelte-rbl4od"><ui-more-24></ui-more-24></span> <span class="mc-quantity-selector__label svelte-rbl4od"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-rbl4od" tabindex="-1"><span class="mc-quantity-selector__icon svelte-rbl4od"><ui-less-24></ui-less-24></span> <span class="mc-quantity-selector__label svelte-rbl4od"> </span></button></div>',2);const w={hash:"svelte-rbl4od",code:'/**\n * Do not edit directly, this file was auto-generated.\n */.mc-quantity-selector.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,\n.mc-quantity-selector.svelte-rbl4od :where(.svelte-rbl4od) {box-sizing:border-box;}.mc-quantity-selector__control.svelte-rbl4od {background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none;\n  /* For Blink & WebKit rendering engines */\n  /* For Gecko rendering engine */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::-webkit-inner-spin-button, .mc-quantity-selector__control[type=number].svelte-rbl4od::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-quantity-selector__control[type=number].svelte-rbl4od {appearance:textfield;}.mc-quantity-selector__control.svelte-rbl4od::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-quantity-selector__button.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:disabled {color:var(--quantity-selector-color-button-text-disabled, #d9d9d9);cursor:not-allowed;}.mc-quantity-selector__button.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 {order:-1;}.mc-quantity-selector__icon.svelte-rbl4od {height:1.5rem;width:1.5rem;fill:currentcolor;}.mc-quantity-selector__label.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::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: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:has(input:where(.svelte-rbl4od):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:where(.svelte-rbl4od):disabled) .mc-quantity-selector__button:where(.svelte-rbl4od):disabled {color:var(--forms-color-icon-disabled, #737373);}.mc-quantity-selector.svelte-rbl4od:has(input:where(.svelte-rbl4od):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 {--inset-x: 2rem;height:2rem;}.mc-quantity-selector--s.svelte-rbl4od .mc-quantity-selector__button:where(.svelte-rbl4od) {height:1.5rem;width:1.5rem;}.mc-quantity-selector--s.svelte-rbl4od .mc-quantity-selector__icon:where(.svelte-rbl4od) {height:1.25rem;width:1.25rem;}'};function k(e,t){r(t,!0),o(e,w);let a=l(t,"id",7,void 0),k=l(t,"quantity",15,1),j=l(t,"min",7,1),N=l(t,"max",7,100),z=l(t,"small",7,!1),D=l(t,"decrementlabel",7,"Decrement"),F=l(t,"inputarialabel",7,"Quantity Selector"),I=l(t,"incrementlabel",7,"Increment"),Q=l(t,"disabled",7,!1),S=l(t,"name",7,"quantity-selector-input"),B=l(t,"step",7,1),E=n();var G=x();let K;var O=s(G);y(O),O.__input=[_,k,N,j,E];var P=i(O,2);P.__click=[g,k,B,N,E];var W=s(P),A=s(W);c(A,1,"svelte-rbl4od"),v(W);var C=i(W,2),H=s(C,!0);v(C),v(P);var J=i(P,2);J.__click=[q,k,B,j,E];var L=s(J),M=s(L);c(M,1,"svelte-rbl4od"),v(L);var R=i(L,2),T=s(R,!0);return v(R),v(J),v(G),d((()=>{K=c(G,1,"mc-quantity-selector svelte-rbl4od",null,K,{"mc-quantity-selector--s":z()}),f(O,"id",a()),f(O,"name",S()),f(O,"aria-label",F()),f(O,"aria-valuemin",j()),f(O,"aria-valuemax",N()),f(O,"aria-valuenow",k()),O.disabled=Q(),f(P,"aria-controls",a()),P.disabled=k()===N()||Q(),p(H,D()),f(J,"aria-controls",a()),J.disabled=k()===j()||Q(),p(T,I())})),h(O,k),u(e,G),b({get id(){return a()},set id(e=void 0){a(e),m()},get quantity(){return k()},set quantity(e=1){k(e),m()},get min(){return j()},set min(e=1){j(e),m()},get max(){return N()},set max(e=100){N(e),m()},get small(){return z()},set small(e=!1){z(e),m()},get decrementlabel(){return D()},set decrementlabel(e="Decrement"){D(e),m()},get inputarialabel(){return F()},set inputarialabel(e="Quantity Selector"){F(e),m()},get incrementlabel(){return I()},set incrementlabel(e="Increment"){I(e),m()},get disabled(){return Q()},set disabled(e=!1){Q(e),m()},get name(){return S()},set name(e="quantity-selector-input"){S(e),m()},get step(){return B()},set step(e=1){B(e),m()}})}e(["input","click"]),customElements.define("m-qty-selector",t(k,{id:{},quantity:{},min:{},max:{},small:{},decrementlabel:{},inputarialabel:{},incrementlabel:{},disabled:{},name:{},step:{}},[],[],!1));export{k 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 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"}
+{"version":3,"file":"QuantitySelector.js","sources":["../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-qty-selector',\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\n  interface Props {\n    id?: string | undefined;\n    quantity?: number;\n    min?: number;\n    max?: number;\n    small?: boolean;\n    decrementlabel?: string;\n    inputarialabel?: string;\n    incrementlabel?: string;\n    disabled?: boolean;\n    name?: string;\n    step?: number;\n    [key: string]: any;\n  }\n\n  let {\n    id = undefined,\n    quantity = $bindable(1),\n    min = 1,\n    max = 100,\n    small = false,\n    decrementlabel = 'Decrement',\n    inputarialabel = 'Quantity Selector',\n    incrementlabel = 'Increment',\n    disabled = false,\n    name = 'quantity-selector-input',\n    step = 1,\n  }: Props = $props();\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 class=\"mc-quantity-selector\" class:mc-quantity-selector--s={small}>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value={quantity}\n    oninput={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  />\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n    tabindex=\"-1\"\n    onclick={increment}\n    disabled={quantity === max || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <ui-more-24></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    onclick={decrement}\n    disabled={quantity === min || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <ui-less-24></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":["handleValue","_","quantity","max","min","dispatch","decrement","__1","step","Number","increment","__2","id","undefined","small","decrementlabel","inputarialabel","incrementlabel","disabled","name","createEventDispatcher"],"mappings":"sQAyCWA,EAAWC,EAAAC,EAAAC,EAAAC,EAAAC,GACdH,IAAWC,KACbD,EAAWC,KAETD,IAAWE,KACbF,EAAWE,KAEbC,EAAS,YAAaH,IACxB,UAESI,EAASC,EAAAL,EAAAM,EAAAJ,EAAAC,GACZH,IAAWO,OAAOD,KAAQJ,KAC5BF,EAAWA,IAAWO,OAAOD,MAE/BH,EAAS,YAAaH,IACxB,UAESQ,EAASC,EAAAT,EAAAM,EAAAL,EAAAE,GACZH,IAAWO,OAAOD,KAAQL,KAC5BD,EAAWA,IAAWO,OAAOD,MAE/BH,EAAS,YAAaH,IACxB,46IArCE,IAAAU,kBAAKC,GACLX,oBAAqB,GACrBE,cAAM,GACND,cAAM,KACNW,iBAAQ,GACRC,yBAAiB,aACjBC,yBAAiB,qBACjBC,yBAAiB,aACjBC,oBAAW,GACXC,eAAO,2BACPX,eAAO,GAGLH,EAAWe,+CAiCJpB,EAAWE,EAAAC,EAAAC,EAAAC,2BAcXK,EAASR,EAAAM,EAAAL,EAAAE,0GAaTC,EAASJ,EAAAM,EAAAJ,EAAAC,qLAjC2CS,qDAQjDE,yBACGZ,yBACAD,yBACAD,wCAMAU,gBAILV,MAAaC,KAAOe,QAKaH,yBAI5BH,gBAILV,MAAaE,KAAOc,QAKaD,IAAc,QAlC7Cf,gDA7CPW,uDACgB,6CACf,6CACA,oDACE,mEACS,6EACA,qFACA,kEACN,+CACJ,uEACA"}

package/public/components/quantityselector/QuantitySelector.svelte

@@ -1,22 +1,41 @@
-<svelte:options customElement="" />
+<svelte:options
+  customElement={{
+    tag: 'm-qty-selector',
+    shadow: 'none',
+  }}
+/>
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
-  export let id: string | undefined = undefined;
-  export let quantity = 1;
-  export let min = 1;
-  export let max = 100;
-  export let small = false;
-  export let decrementlabel = 'Decrement';
-  export let inputarialabel = 'Quantity Selector';
-  export let incrementlabel = 'Increment';
-  export let disabled = false;
-  export let name = 'quantity-selector-input';
-  export let step = 1;
+  interface Props {
+    id?: string | undefined;
+    quantity?: number;
+    min?: number;
+    max?: number;
+    small?: boolean;
+    decrementlabel?: string;
+    inputarialabel?: string;
+    incrementlabel?: string;
+    disabled?: boolean;
+    name?: string;
+    step?: number;
+    [key: string]: any;
+  }
 
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
+  let {
+    id = undefined,
+    quantity = $bindable(1),
+    min = 1,
+    max = 100,
+    small = false,
+    decrementlabel = 'Decrement',
+    inputarialabel = 'Quantity Selector',
+    incrementlabel = 'Increment',
+    disabled = false,
+    name = 'quantity-selector-input',
+    step = 1,
+  }: Props = $props();
 
   let dispatch = createEventDispatcher();
 
@@ -45,17 +64,13 @@
   }
 </script>
 
-<div
-  class="mc-quantity-selector"
-  class:mc-quantity-selector--s={small}
-  {...$$restProps}
->
+<div class="mc-quantity-selector" class:mc-quantity-selector--s={small}>
   <input
     type="number"
     {id}
     {name}
     bind:value={quantity}
-    on:input|preventDefault={handleValue}
+    oninput={handleValue}
     class="mc-quantity-selector__control"
     aria-label={inputarialabel}
     aria-valuemin={min}
@@ -63,18 +78,17 @@
     aria-valuenow={quantity}
     spellcheck="false"
     {disabled}
-    {...attributes}
   />
   <button
     type="button"
     aria-controls={id}
     class="mc-quantity-selector__button mc-quantity-selector__button--increase"
     tabindex="-1"
-    on:click={() => increment()}
+    onclick={increment}
     disabled={quantity === max || disabled}
   >
     <span class="mc-quantity-selector__icon">
-      <ui-more-24 />
+      <ui-more-24></ui-more-24>
     </span>
     <span class="mc-quantity-selector__label">{decrementlabel}</span>
   </button>
@@ -83,11 +97,11 @@
     aria-controls={id}
     class="mc-quantity-selector__button mc-quantity-selector__button--decrease"
     tabindex="-1"
-    on:click={() => decrement()}
+    onclick={decrement}
     disabled={quantity === min || disabled}
   >
     <span class="mc-quantity-selector__icon">
-      <ui-less-24 />
+      <ui-less-24></ui-less-24>
     </span>
     <span class="mc-quantity-selector__label">{incrementlabel}</span>
   </button>

package/public/components/radio/Radio.js

@@ -1,2 +1,2 @@
-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};
+import{c as e,p as r,a as o,b as a,t as d,k as i,g as s,d as t,s as l,e as c,f as n,h as u,i as v,j as m,r as f}from"../../custom-element-C0xaDU2s.js";import{s as p,a as b,r as _}from"../../attributes-C2cU7aS9.js";var h=d('<div class="mc-radio svelte-1u25pv4"><input type="radio"> <label class="mc-radio__label svelte-1u25pv4"> </label></div>');const k={hash:"svelte-1u25pv4",code:'/**\n * Do not edit directly, this file was auto-generated.\n */.mc-radio.svelte-1u25pv4 {align-items:center;display:flex;gap:0.5rem;}.mc-radio__label.svelte-1u25pv4 {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.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::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:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.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:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-1u25pv4:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-1u25pv4:checked, .mc-radio__input.svelte-1u25pv4:disabled {border-color:transparent;}.mc-radio__input.svelte-1u25pv4:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-1u25pv4:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-1u25pv4:disabled + .mc-radio__label:where(.svelte-1u25pv4) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-1u25pv4:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-1u25pv4:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-1u25pv4:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}'};function g(e,d){r(d,!0),o(e,k);let g=a(d,"id",7,""),w=a(d,"name",7,""),x=a(d,"checked",7,!1),j=a(d,"disabled",7,!1),y=a(d,"isinvalid",7,!1),z=a(d,"label",7,"");var D=h(),E=s(D);_(E);var q=i(E,2),A=s(q,!0);return f(q),f(D),t((e=>{p(E,"id",g()),l(E,1,c(e),"svelte-1u25pv4"),p(E,"name",w()),b(E,x()),E.disabled=j(),p(q,"for",g()),n(A,z())}),[()=>function(e){const r=["mc-radio__input"];return e&&r.push("is-invalid"),r.join(" ")}(y())]),u(e,D),v({get id(){return g()},set id(e=""){g(e),m()},get name(){return w()},set name(e=""){w(e),m()},get checked(){return x()},set checked(e=!1){x(e),m()},get disabled(){return j()},set disabled(e=!1){j(e),m()},get isinvalid(){return y()},set isinvalid(e=!1){y(e),m()},get label(){return z()},set label(e=""){z(e),m()}})}customElements.define("m-radio",e(g,{id:{},name:{},checked:{},disabled:{},isinvalid:{},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 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"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-radio' }} />\n\n<script lang=\"ts\">\n  let {\n    id = '',\n    name = '',\n    checked = false,\n    disabled = false,\n    isinvalid = false,\n    label = '',\n  } = $props();\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\">\n  <input\n    {id}\n    type=\"radio\"\n    class={getClasses(isinvalid)}\n    {name}\n    {checked}\n    {disabled}\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":["id","name","checked","disabled","isinvalid","label","isInvalid","classes","push","join","getClasses"],"mappings":"omFAII,IAAAA,aAAK,IACLC,eAAO,IACPC,mBAAU,GACVC,oBAAW,GACXC,qBAAY,GACZC,gBAAQ,sKAsBEL,SAA6BK,IAAK,GALrC,CAAA,IAdA,SAAWC,GACZ,MAAAC,GAAW,0BACbD,GACFC,EAAQC,KAAK,cAERD,EAAQE,KAAK,IACtB,CAQSC,CAAWN,+CAtBb,gDACE,uDACG,wDACC,0DACC,iDACJ"}

package/public/components/radio/Radio.svelte

@@ -1,22 +1,14 @@
-<svelte:options customElement="" />
+<svelte:options customElement={{ tag: 'm-radio' }} />
 
 <script lang="ts">
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-  import { createEventForwarder } from '../../utilities/EventForward';
-
-  export let id: string;
-  export let name: string;
-  export let checked: boolean;
-  export let disabled = false;
-  export let isinvalid = false;
-  export let label: string;
-
-  const forwardEvents = createEventForwarder(get_current_component());
-
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
+  let {
+    id = '',
+    name = '',
+    checked = false,
+    disabled = false,
+    isinvalid = false,
+    label = '',
+  } = $props();
 
   function getClasses(isInvalid: boolean): string {
     const classes = ['mc-radio__input'];
@@ -27,18 +19,15 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="mc-radio {userClass}" on:click>
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div class="mc-radio">
   <input
-    use:forwardEvents
     {id}
     type="radio"
     class={getClasses(isinvalid)}
-    aria-invalid={isinvalid}
     {name}
     {checked}
     {disabled}
-    {...attributes}
   />
   <label for={id} class="mc-radio__label">{label}</label>
 </div>

package/public/components/radiogroup/RadioGroup.js

@@ -1,2 +1,2 @@
-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};
+import{O as e,c as o,p as r,a as t,b as i,K as l,L as a,t as d,k as s,g as n,d as c,h as m,i as v,j as g,r as b,f as u,s as f,M as _,N as p}from"../../custom-element-C0xaDU2s.js";import{i as h}from"../../if-B_xe8pYW.js";import{e as j}from"../../each-6TetsjSv.js";import{r as z,s as k}from"../../attributes-C2cU7aS9.js";import{c as w}from"../../input-B-lhkJUW.js";var y=d('<legend class="mc-field__legend svelte-jgbztm"> </legend>'),x=(e,o,r)=>o(_(r).value),A=d('<div class="mc-radio mc-field__item svelte-jgbztm"><input type="radio"> <label class="mc-radio__label svelte-jgbztm"> </label></div>'),D=d('<div class="radio-group-container"><fieldset class="mc-field mc-field--group svelte-jgbztm"><!> <div></div></fieldset></div>');const E={hash:"svelte-jgbztm",code:'/**\n * Do not edit directly, this file was auto-generated.\n */.mc-radio.svelte-jgbztm {align-items:center;display:flex;gap:0.5rem;}.mc-radio__label.svelte-jgbztm {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-jgbztm {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-jgbztm::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-jgbztm:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-jgbztm: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-jgbztm:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-jgbztm:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-jgbztm:checked, .mc-radio__input.svelte-jgbztm:disabled {border-color:transparent;}.mc-radio__input.svelte-jgbztm:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-jgbztm:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-jgbztm:disabled + .mc-radio__label:where(.svelte-jgbztm) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-jgbztm:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-jgbztm:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-jgbztm:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}\n\n/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-jgbztm {font-size:0.875rem;line-height:1.3;font-weight:400;color:var(--field-color-label, #000000);}.mc-field__legend.svelte-jgbztm {padding-left:0;padding-right:0;}.mc-field__content.svelte-jgbztm {margin-top:0.5rem;}.mc-field__item.svelte-jgbztm {padding-top:0.375rem;padding-bottom:0.375rem;}.mc-field__item.svelte-jgbztm:not(:last-child) {margin-bottom:0.25rem;}.mc-field--group.svelte-jgbztm {border:none;margin-left:0;margin-right:0;padding:0;}\n\n/* stylelint-enable string-no-newline */'};function K(e,o){r(o,!0),t(e,E);const d=[];let K=i(o,"id",7),L=i(o,"selectedvalue",7),M=i(o,"options",7),N=i(o,"legend",7),O=i(o,"inline",7),$=i(o,"isinvalid",7,!1),q=l(a(L()));function B(e){p(q,a(e))}var C=D(),F=n(C),G=n(F),H=e=>{var o=y(),r=n(o,!0);b(o),c((()=>u(r,N()))),m(e,o)};h(G,(e=>{N()&&N().length&&e(H)}));var I=s(G,2);return j(I,21,M,(e=>e.id),((e,o)=>{var r=A(),t=n(r);let i;var l;z(t),t.__change=[x,B,o];var a=s(t,2),v=n(a,!0);b(a),b(r),c((()=>{i=f(t,1,"mc-radio__input svelte-jgbztm",null,i,{"is-invalid":$()}),k(t,"id",_(o).id),k(t,"name",_(o).name),l!==(l=_(o).value)&&(t.value=null==(t.__value=_(o).value)?"":_(o).value),t.disabled=_(o).disabled,k(a,"for",_(o).id),u(v,_(o).label)})),w(d,[],t,(()=>(_(o).value,_(q))),(e=>p(q,e))),m(e,r)})),b(I),b(F),b(C),c((()=>{k(C,"id",K()),f(I,1,`mc-field__content ${(O()?"mc-field__content--inline":"")??""}`,"svelte-jgbztm")})),m(e,C),v({get id(){return K()},set id(e){K(e),g()},get selectedvalue(){return L()},set selectedvalue(e){L(e),g()},get options(){return M()},set options(e){M(e),g()},get legend(){return N()},set legend(e){N(e),g()},get inline(){return O()},set inline(e){O(e),g()},get isinvalid(){return $()},set isinvalid(e=!1){$(e),g()}})}e(["change"]),customElements.define("m-radio-group",o(K,{options:{attribute:"options",type:"Array"},id:{},selectedvalue:{},legend:{},inline:{},isinvalid:{}},[],[],!1));export{K 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\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"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio-group',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { RadioGroupOption } from './radioGroup.types';\n\n  interface Props {\n    id: string;\n    selectedvalue: string;\n    options: Array<RadioGroupOption>;\n    legend: string;\n    inline: boolean;\n    isinvalid?: boolean;\n  }\n\n  let {\n    id,\n    selectedvalue,\n    options,\n    legend,\n    inline,\n    isinvalid = false,\n  }: Props = $props();\n\n  let selectedValue: string | undefined = $state(selectedvalue);\n\n  function onChange(value: string) {\n    selectedValue = value;\n    // dispatch('change', selectedValue);\n  }\n</script>\n\n<div {id} class=\"radio-group-container\">\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 options as opt (opt.id)}\n        <div class=\"mc-radio mc-field__item\">\n          <input\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            onchange={() => 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":["onChange","$.get","opt","value","id","$.prop","$$props","selectedvalue","options","legend","inline","isinvalid","selectedValue","$.set","length","$$render","consequent","$.each","div_1","$.set_attribute","input","name","input_value","__value","disabled","label","$.set_text","text_1","$$value"],"mappings":"2bA2D4BA,EAAQC,EAACC,GAAIC,olGApCrCC,EAAEC,EAAAC,EAAA,KAAA,GACFC,EAAaF,EAAAC,EAAA,gBAAA,GACbE,EAAOH,EAAAC,EAAA,UAAA,GACPG,EAAMJ,EAAAC,EAAA,SAAA,GACNI,EAAML,EAAAC,EAAA,SAAA,GACNK,qBAAY,GAGVC,MAA2CL,MAEtC,SAAAP,EAASG,GAChBU,EAAAD,IAAgBT,GAElB,mEAOOM,wBAFAA,KAAUA,IAAOK,QAAMC,EAAAC,EAAA,wBAOnBC,EAAAC,EAAA,GAAAV,GAAWN,GAAKA,EAAIE,QAATF,gKAKMS,MACdQ,EAAAC,EAAA,KAAAnB,EAAAC,GAAIE,IACFe,EAAAC,EAAA,OAAAnB,EAAAC,GAAImB,MAEHC,KAAAA,EAAArB,EAAAC,GAAIC,SAAJiB,EAAAjB,MAAA,OAAAiB,EAAAG,QAAAtB,EAAAC,GAAIC,OAAJ,GAAAF,EAAAC,GAAIC,OACDiB,EAAAI,SAAAvB,EAAAC,GAAIsB,SAGJL,EAAAM,EAAA,MAAAxB,EAAAC,GAAIE,IAA6BsB,EAAAC,EAAA1B,EAAAC,GAAIuB,MAAK,mBAJ7CxB,EAAAC,GAAIC,QADCS,WAAAA,EAAagB,gFATFlB,IAAS,4BAA8B,KAAE,KAAA,gBAAA,wTAnB5D"}

package/public/components/radiogroup/RadioGroup.svelte

@@ -1,45 +1,43 @@
 <svelte:options
   customElement={{
-    tag: '',
+    tag: 'm-radio-group',
     props: {
       options: { type: 'Array', attribute: 'options' },
     },
+    shadow: 'none',
   }}
 />
 
 <script lang="ts">
-  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: Array<RadioGroupOption>;
-  export let legend: string;
-  export let inline: boolean;
-  export let isinvalid = false;
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  const forwardEvents = createEventForwarder(get_current_component());
-  let selectedValue: string | undefined;
+  interface Props {
+    id: string;
+    selectedvalue: string;
+    options: Array<RadioGroupOption>;
+    legend: string;
+    inline: boolean;
+    isinvalid?: boolean;
+  }
+
+  let {
+    id,
+    selectedvalue,
+    options,
+    legend,
+    inline,
+    isinvalid = false,
+  }: Props = $props();
 
-  $: parsedOptions = options;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-  $: selectedValue = selectedvalue;
+  let selectedValue: string | undefined = $state(selectedvalue);
 
   function onChange(value: string) {
     selectedValue = value;
-    eventHandler.dispatch('change', selectedValue);
+    // dispatch('change', selectedValue);
   }
 </script>
 
-<div {id} class="radio-group-container" {...attributes}>
+<div {id} class="radio-group-container">
   <fieldset class="mc-field mc-field--group">
     {#if legend && legend.length}
       <legend class="mc-field__legend">
@@ -48,10 +46,9 @@
     {/if}
 
     <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}">
+      {#each options as opt (opt.id)}
+        <div class="mc-radio mc-field__item">
           <input
-            use:forwardEvents
             type="radio"
             class="mc-radio__input"
             class:is-invalid={isinvalid}
@@ -60,7 +57,7 @@
             bind:group={selectedValue}
             value={opt.value}
             disabled={opt.disabled}
-            on:change={() => onChange(opt.value)}
+            onchange={() => onChange(opt.value)}
           />
           <label for={opt.id} class="mc-radio__label">{opt.label}</label>
         </div>

package/public/components/select/Select.js

@@ -1,2 +1,2 @@
-import{c as e,S as s,i as t,f as o,s as r,a as l,p as i,e as a,x as d,E as n,T as c,t as u,g as v,h as m,U as h,V as f,I as p,L as b,y as g,m as $,W as x,M as w,n as z,K as _,P as k,q as y,F as E,O as j,G as C,b as B,X as L}from"../../index-c0bfe08f.js";import{e as M}from"../../each-45e2db5c.js";import{g as O}from"../../spread-ed04f539.js";import{E as F}from"../../EventHandler-f7ee47ca.js";import{c as S}from"../../EventForward-bb916157.js";function q(e){l(e,"svelte-i0s2u",".mc-select.svelte-i0s2u{appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:1rem;line-height:1.3;height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");border:1px solid var(--forms-color-border-default, #666666);border-radius:0.25rem;display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem}.mc-select.svelte-i0s2u:hover{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 1px var(--forms-color-border-hover, #4d4d4d)}.mc-select.svelte-i0s2u:focus{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-select.svelte-i0s2u:disabled{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-select--readonly.svelte-i0s2u{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-select.is-invalid.svelte-i0s2u{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 1px var(--forms-color-border-invalid, #ea302d)}.mc-select.is-invalid.svelte-i0s2u:hover{border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 1px var(--forms-color-border-invalid-hover, #c61112)}.mc-select--s.svelte-i0s2u{font-size:0.875rem;line-height:1.3;height:2rem;padding:0 2rem 0 0.5rem;background-position:right 0.5rem center}")}function G(e,s,t){const o=e.slice();return o[18]=s[t],o}function H(e){let s,t,o,r;return{c(){s=a("option"),t=E("-- "),o=E(e[1]),r=E(" --\n    "),s.__value="",j(s,s.__value),s.disabled=!0,s.selected=!0},m(e,l){v(e,s,l),m(s,t),m(s,o),m(s,r)},p(e,s){2&s&&C(o,e[1])},d(e){e&&$(s)}}}function I(e){let s,t,o,r,l,i=e[18].text+"";return{c(){s=a("option"),t=E(i),o=B(),s.disabled=r=e[18].disabled,s.__value=l=e[18].value,j(s,s.__value)},m(e,r){v(e,s,r),m(s,t),m(s,o)},p(e,o){256&o&&i!==(i=e[18].text+"")&&C(t,i),256&o&&r!==(r=e[18].disabled)&&(s.disabled=r),256&o&&l!==(l=e[18].value)&&(s.__value=l,j(s,s.__value))},d(e){e&&$(s)}}}function J(e){let s,t,o,r,l,z=e[1]&&H(e),_=M(e[8]),k=[];for(let s=0;s<_.length;s+=1)k[s]=I(G(e,_,s));let y=[{id:e[0]},{class:o=K(e[3],e[2])+" "+e[7]},{disabled:e[4]},e[5]],E={};for(let e=0;e<y.length;e+=1)E=i(E,y[e]);return{c(){s=a("select"),z&&z.c(),t=d();for(let e=0;e<k.length;e+=1)k[e].c();n(s,E),void 0===e[6]&&c((()=>e[14].call(s))),u(s,"svelte-i0s2u",!0)},m(o,i){v(o,s,i),z&&z.m(s,null),m(s,t);for(let e=0;e<k.length;e+=1)k[e]&&k[e].m(s,null);"value"in E&&(E.multiple?h:f)(s,E.value),s.autofocus&&s.focus(),f(s,e[6],!0),r||(l=[p(e[10].call(null,s)),b(s,"change",e[14]),b(s,"change",e[15])],r=!0)},p(e,[r]){if(e[1]?z?z.p(e,r):(z=H(e),z.c(),z.m(s,t)):z&&(z.d(1),z=null),256&r){let t;for(_=M(e[8]),t=0;t<_.length;t+=1){const o=G(e,_,t);k[t]?k[t].p(o,r):(k[t]=I(o),k[t].c(),k[t].m(s,null))}for(;t<k.length;t+=1)k[t].d(1);k.length=_.length}n(s,E=O(y,[1&r&&{id:e[0]},140&r&&o!==(o=K(e[3],e[2])+" "+e[7])&&{class:o},16&r&&{disabled:e[4]},32&r&&e[5]])),189&r&&"value"in E&&(E.multiple?h:f)(s,E.value),320&r&&f(s,e[6]),u(s,"svelte-i0s2u",!0)},i:g,o:g,d(e){e&&$(s),z&&z.d(),x(k,e),r=!1,w(l)}}}function K(e,s){const t=["mc-select"];return e&&t.push("is-invalid"),s&&t.push(`mc-select--${s}`),t.join(" ")}function N(e,s,t){let o,r,l;const a=["id","name","valueselected","placeholder","size","isinvalid","disabled","options"];let d=z(s,a),{id:n}=s,{name:c}=s,{valueselected:u=""}=s,{placeholder:v}=s,{size:m="m"}=s,{isinvalid:h=!1}=s,{disabled:f=!1}=s,{options:p}=s,b=new F(_(),k());const g=S(_());let $="";return e.$$set=e=>{t(17,s=i(i({},s),y(e))),t(16,d=z(s,a)),"id"in e&&t(0,n=e.id),"name"in e&&t(11,c=e.name),"valueselected"in e&&t(12,u=e.valueselected),"placeholder"in e&&t(1,v=e.placeholder),"size"in e&&t(2,m=e.size),"isinvalid"in e&&t(3,h=e.isinvalid),"disabled"in e&&t(4,f=e.disabled),"options"in e&&t(13,p=e.options)},e.$$.update=()=>{8192&e.$$.dirty&&t(8,o=p?JSON.parse(p):[]),4096&e.$$.dirty&&t(6,$=u),t(7,r=s.class),t(5,l=Object.assign({},d)),32&e.$$.dirty&&delete l.class},s=y(s),[n,v,m,h,f,l,$,r,o,b,g,c,u,p,function(){$=L(this),t(6,$),t(12,u),t(8,o),t(13,p)},()=>b.dispatch("change",$)]}class P extends s{constructor(e){super(),t(this,e,N,J,r,{id:0,name:11,valueselected:12,placeholder:1,size:2,isinvalid:3,disabled:4,options:13},q)}get id(){return this.$$.ctx[0]}set id(e){this.$$set({id:e}),o()}get name(){return this.$$.ctx[11]}set name(e){this.$$set({name:e}),o()}get valueselected(){return this.$$.ctx[12]}set valueselected(e){this.$$set({valueselected:e}),o()}get placeholder(){return this.$$.ctx[1]}set placeholder(e){this.$$set({placeholder:e}),o()}get size(){return this.$$.ctx[2]}set size(e){this.$$set({size:e}),o()}get isinvalid(){return this.$$.ctx[3]}set isinvalid(e){this.$$set({isinvalid:e}),o()}get disabled(){return this.$$.ctx[4]}set disabled(e){this.$$set({disabled:e}),o()}get options(){return this.$$.ctx[13]}set options(e){this.$$set({options:e}),o()}}e(P,{id:{},name:{},valueselected:{},placeholder:{},size:{},isinvalid:{type:"Boolean"},disabled:{type:"Boolean"},options:{}},[],[],!0);export{P as default};
+import{a5 as e,a6 as r,a7 as o,c as s,p as a,a as t,b as l,K as i,L as d,t as n,k as c,g as u,d as v,s as m,e as f,M as b,h,i as p,j as g,N as w,r as x,f as k}from"../../custom-element-C0xaDU2s.js";import{i as y}from"../../if-B_xe8pYW.js";import{e as _,i as z}from"../../each-6TetsjSv.js";import{s as E}from"../../attributes-C2cU7aS9.js";function j(e,r,s){if(e.multiple)return function(e,r){for(var o of e.options)o.selected=~r.indexOf(q(o))}(e,r);for(var a of e.options){var t=q(a);if(o(t,r))return void(a.selected=!0)}s&&void 0===r||(e.selectedIndex=-1)}function C(o,s,a=s){var t=!0;e(o,"change",(e=>{var r,s=e?"[selected]":":checked";if(o.multiple)r=[].map.call(o.querySelectorAll(s),q);else{var t=o.querySelector(s)??o.querySelector("option:not([disabled])");r=t&&q(t)}a(r)})),r((()=>{var e=s();if(j(o,e,t),t&&void 0===e){var r=o.querySelector(":checked");null!==r&&(e=q(r),a(e))}o.__value=e,t=!1})),function(e){r((()=>{var r=new MutationObserver((()=>{var r=e.__value;j(e,r)}));return r.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),()=>{r.disconnect()}}))}(o)}function q(e){return"__value"in e?e.__value:e.value}var L=n("<option disabled selected> </option>"),M=n("<option> </option>"),S=n("<select><!><!></select>");const A={hash:"svelte-i0s2u",code:"/**\n * Do not edit directly, this file was auto-generated.\n */\n/* stylelint-disable string-no-newline */.mc-select.svelte-i0s2u {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:1rem;line-height:1.3;height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");border:1px solid var(--forms-color-border-default, #666666);border-radius:0.25rem;display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-i0s2u:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 1px var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-i0s2u:focus {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-select.svelte-i0s2u:disabled {background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-select--readonly.svelte-i0s2u {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-select.is-invalid.svelte-i0s2u {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 1px var(--forms-color-border-invalid, #ea302d);}.mc-select.is-invalid.svelte-i0s2u:hover {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 1px var(--forms-color-border-invalid-hover, #c61112);}.mc-select--s.svelte-i0s2u {font-size:0.875rem;line-height:1.3;height:2rem;padding:0 2rem 0 0.5rem;background-position:right 0.5rem center;}\n\n/* stylelint-enable string-no-newline */"};function B(e,r){a(r,!0),t(e,A);let o=l(r,"id",7),s=l(r,"valueselected",7,""),n=l(r,"placeholder",7),j=l(r,"size",7,"m"),q=l(r,"isinvalid",7,!1),B=l(r,"disabled",7,!1),O=l(r,"options",7),$=i(d(s()));var D=S(),F=u(D),I=e=>{var r=L();r.value=(r.__value="","");var o=u(r);x(r),v((()=>k(o,`-- ${n()??""} --`))),h(e,r)};y(F,(e=>{n()&&e(I)}));var K=c(F);return _(K,17,O,z,((e,r)=>{var o=M(),s={},a=u(o,!0);x(o),v((()=>{o.disabled=b(r).disabled,s!==(s=b(r).value)&&(o.value=null==(o.__value=b(r).value)?"":b(r).value),k(a,b(r).text)})),h(e,o)})),x(D),v((e=>{E(D,"id",o()),m(D,1,f(e),"svelte-i0s2u"),D.disabled=B()}),[()=>function(e,r){const o=["mc-select"];return e&&o.push("is-invalid"),r&&o.push(`mc-select--${r}`),o.join(" ")}(q(),j())]),C(D,(()=>b($)),(e=>w($,e))),h(e,D),p({get id(){return o()},set id(e){o(e),g()},get valueselected(){return s()},set valueselected(e=""){s(e),g()},get placeholder(){return n()},set placeholder(e){n(e),g()},get size(){return j()},set size(e="m"){j(e),g()},get isinvalid(){return q()},set isinvalid(e=!1){q(e),g()},get disabled(){return B()},set disabled(e=!1){B(e),g()},get options(){return O()},set options(e){O(e),g()}})}customElements.define("m-select",s(B,{options:{attribute:"options",type:"Array"},id:{},valueselected:{},placeholder:{},size:{},isinvalid:{},disabled:{}},[],[],!1));export{B as default};
 //# sourceMappingURL=Select.js.map

package/public/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\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\n  import type { SelectOption, SelectSize } from './select.types';\n\n  export let id: string;\n  export let name: string;\n  export let valueselected = '';\n  export let placeholder: string;\n  export let size: SelectSize = 'm';\n  export let isinvalid = false;\n  export let disabled = false;\n  export let options: string;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  const forwardEvents = createEventForwarder(get_current_component());\n  let valueSelected = '';\n\n  $: parsedOptions = options ? (JSON.parse(options) as SelectOption[]) : [];\n  $: valueSelected = valueselected;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function setClasses(isinvalid: boolean, size: SelectSize): string {\n    const classes = ['mc-select'];\n\n    if (isinvalid) {\n      classes.push('is-invalid');\n    }\n    if (size) {\n      classes.push(`mc-select--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<!-- svelte-ignore a11y-no-onchange -->\n<select\n  use:forwardEvents\n  {id}\n  class=\"{setClasses(isinvalid, size)} {userClass}\"\n  {disabled}\n  bind:value={valueSelected}\n  on:change={() => eventHandler.dispatch('change', valueSelected)}\n  {...attributes}\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each parsedOptions as opt}\n    <option disabled={opt.disabled} value={opt.value}>\n      {opt.text}\n    </option>\n  {/each}\n</select>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["ctx","insert","target","option","anchor","t0_value","text","disabled","option_disabled_value","__value","option_value_value","value","dirty","set_data","t0","create_if_block","length","i","class","select_class_value","setClasses","add_render_callback","call","select","isinvalid","size","classes","push","join","id","$$props","name","valueselected","placeholder","options","eventHandler","EventHandler","get_current_component","createEventDispatcher","forwardEvents","createEventForwarder","valueSelected","$$invalidate","parsedOptions","JSON","parse","userClass","attributes","Object","assign","$$restProps","select_value","this","dispatch"],"mappings":"o4FAwDsC,WAC5BA,EAAW,QAAC,6EADlBC,EAEQC,EAAAC,EAAAC,yCADFJ,EAAW,gDAMdK,EAAAL,MAAIM,KAAI,yCADOH,EAAAI,SAAAC,EAAAR,MAAIO,SAAiBJ,EAAAM,QAAAC,EAAAV,MAAIW,6BAA3CV,EAEQC,EAAAC,EAAAC,yBADL,IAAAQ,GAAAP,KAAAA,EAAAL,MAAIM,KAAI,KAAAO,EAAAC,EAAAT,GADO,IAAAO,GAAAJ,KAAAA,EAAAR,MAAIO,0BAAiB,IAAAK,GAAAF,KAAAA,EAAAV,MAAIW,mFAPxCX,EAAW,IAAAe,EAAAf,OAMTA,EAAa,yBAAlBgB,OAAIC,GAAA,qCAZEC,MAAAC,EAAAC,EAAWpB,EAAW,GAAAA,UAAQA,EAAS,oBAI3CA,EAAU,0IAFW,IAAbA,EAAa,IAAAqB,GAAA,IAAArB,EAAA,IAAAsB,KAAAC,oCAL3BtB,EAoBQC,EAAAqB,EAAAnB,8IAfMJ,EAAa,IAAA,4FAIpBA,EAAW,8EAMTA,EAAa,YAAlBgB,OAAIC,GAAA,EAAA,iHAAJD,iCAZM,IAAAJ,GAAAO,KAAAA,EAAAC,EAAWpB,EAAW,GAAAA,UAAQA,EAAS,KAAA,CAAAkB,MAAAC,+BAI3CnB,EAAU,iEAFFA,EAAa,sFApBhBoB,EAAWI,EAAoBC,GAChC,MAAAC,GAAW,oBAEbF,GACFE,EAAQC,KAAK,cAEXF,GACFC,EAAQC,KAAI,cAAeF,KAGtBC,EAAQE,KAAK,8IA9BXC,GAAUC,QACVC,GAAYD,GACZE,cAAAA,EAAgB,IAAEF,eAClBG,GAAmBH,GACnBL,KAAAA,EAAmB,KAAGK,GACtBN,UAAAA,GAAY,GAAKM,GACjBvB,SAAAA,GAAW,GAAKuB,WAChBI,GAAeJ,EACtBK,EAAmB,IAAAC,EACrBC,IACAC,WAEIC,EAAgBC,EAAqBH,KACvC,IAAAI,EAAgB,uWAEnBC,EAAA,EAAEC,EAAgBT,EAAWU,KAAKC,MAAMX,GAAO,qBAC/CQ,EAAA,EAAED,EAAgBT,GAChBU,EAAA,EAAAI,EAAYhB,EAAQZ,OACtBwB,EAAA,EAAEK,EAAUC,OAAAC,OAAA,CAAA,EAAQC,0BACXH,EAAW7B,sDAqBTuB,EAAaU,EAAAC,qCACR,IAAAjB,EAAakB,SAAS,SAAUZ"}
+{"version":3,"file":"Select.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/bindings/select.js","../../../src/components/select/Select.svelte"],"sourcesContent":["import { effect } from '../../../reactivity/effects.js';\nimport { listen_to_event_and_reset_event } from './shared.js';\nimport { untrack } from '../../../runtime.js';\nimport { is } from '../../../proxy.js';\n\n/**\n * Selects the correct option(s) (depending on whether this is a multiple select)\n * @template V\n * @param {HTMLSelectElement} select\n * @param {V} value\n * @param {boolean} [mounting]\n */\nexport function select_option(select, value, mounting) {\n\tif (select.multiple) {\n\t\treturn select_options(select, value);\n\t}\n\n\tfor (var option of select.options) {\n\t\tvar option_value = get_option_value(option);\n\t\tif (is(option_value, value)) {\n\t\t\toption.selected = true;\n\t\t\treturn;\n\t\t}\n\t}\n\n\tif (!mounting || value !== undefined) {\n\t\tselect.selectedIndex = -1; // no option should be selected\n\t}\n}\n\n/**\n * Selects the correct option(s) if `value` is given,\n * and then sets up a mutation observer to sync the\n * current selection to the dom when it changes. Such\n * changes could for example occur when options are\n * inside an `#each` block.\n * @template V\n * @param {HTMLSelectElement} select\n * @param {() => V} [get_value]\n */\nexport function init_select(select, get_value) {\n\tlet mounting = true;\n\teffect(() => {\n\t\tif (get_value) {\n\t\t\tselect_option(select, untrack(get_value), mounting);\n\t\t}\n\t\tmounting = false;\n\n\t\tvar observer = new MutationObserver(() => {\n\t\t\t// @ts-ignore\n\t\t\tvar value = select.__value;\n\t\t\tselect_option(select, value);\n\t\t\t// Deliberately don't update the potential binding value,\n\t\t\t// the model should be preserved unless explicitly changed\n\t\t});\n\n\t\tobserver.observe(select, {\n\t\t\t// Listen to option element changes\n\t\t\tchildList: true,\n\t\t\tsubtree: true, // because of <optgroup>\n\t\t\t// Listen to option element value attribute changes\n\t\t\t// (doesn't get notified of select value changes,\n\t\t\t// because that property is not reflected as an attribute)\n\t\t\tattributes: true,\n\t\t\tattributeFilter: ['value']\n\t\t});\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t});\n}\n\n/**\n * @param {HTMLSelectElement} select\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_select_value(select, get, set = get) {\n\tvar mounting = true;\n\n\tlisten_to_event_and_reset_event(select, 'change', (is_reset) => {\n\t\tvar query = is_reset ? '[selected]' : ':checked';\n\t\t/** @type {unknown} */\n\t\tvar value;\n\n\t\tif (select.multiple) {\n\t\t\tvalue = [].map.call(select.querySelectorAll(query), get_option_value);\n\t\t} else {\n\t\t\t/** @type {HTMLOptionElement | null} */\n\t\t\tvar selected_option =\n\t\t\t\tselect.querySelector(query) ??\n\t\t\t\t// will fall back to first non-disabled option if no option is selected\n\t\t\t\tselect.querySelector('option:not([disabled])');\n\t\t\tvalue = selected_option && get_option_value(selected_option);\n\t\t}\n\n\t\tset(value);\n\t});\n\n\t// Needs to be an effect, not a render_effect, so that in case of each loops the logic runs after the each block has updated\n\teffect(() => {\n\t\tvar value = get();\n\t\tselect_option(select, value, mounting);\n\n\t\t// Mounting and value undefined -> take selection from dom\n\t\tif (mounting && value === undefined) {\n\t\t\t/** @type {HTMLOptionElement | null} */\n\t\t\tvar selected_option = select.querySelector(':checked');\n\t\t\tif (selected_option !== null) {\n\t\t\t\tvalue = get_option_value(selected_option);\n\t\t\t\tset(value);\n\t\t\t}\n\t\t}\n\n\t\t// @ts-ignore\n\t\tselect.__value = value;\n\t\tmounting = false;\n\t});\n\n\t// don't pass get_value, we already initialize it in the effect above\n\tinit_select(select);\n}\n\n/**\n * @template V\n * @param {HTMLSelectElement} select\n * @param {V} value\n */\nfunction select_options(select, value) {\n\tfor (var option of select.options) {\n\t\t// @ts-ignore\n\t\toption.selected = ~value.indexOf(get_option_value(option));\n\t}\n}\n\n/** @param {HTMLOptionElement} option */\nfunction get_option_value(option) {\n\t// __value only exists if the <option> has a value attribute\n\tif ('__value' in option) {\n\t\treturn option.__value;\n\t} else {\n\t\treturn option.value;\n\t}\n}\n","<svelte:options\n  customElement={{\n    tag: 'm-select',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\n  import type { SelectOption, SelectSize } from './select.types';\n\n  interface Props {\n    id: string;\n    name: string;\n    valueselected?: string;\n    placeholder: string;\n    size?: SelectSize;\n    isinvalid?: boolean;\n    disabled?: boolean;\n    options: Array<SelectOption>;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    valueselected = '',\n    placeholder,\n    size = 'm',\n    isinvalid = false,\n    disabled = false,\n    options,\n  }: Props = $props();\n  let valueSelected = $state(valueselected);\n\n  function setClasses(isinvalid: boolean, size: SelectSize): string {\n    const classes = ['mc-select'];\n\n    if (isinvalid) {\n      classes.push('is-invalid');\n    }\n    if (size) {\n      classes.push(`mc-select--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<!-- svelte-ignore a11y_no_onchange -->\n<select\n  {id}\n  class={setClasses(isinvalid, size)}\n  {disabled}\n  bind:value={valueSelected}\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each options as opt}\n    <option disabled={opt.disabled} value={opt.value}>\n      {opt.text}\n    </option>\n  {/each}\n</select>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["select_option","select","value","mounting","multiple","option","options","selected","indexOf","get_option_value","select_options","option_value","is","undefined","selectedIndex","bind_select_value","get","set","listen_to_event_and_reset_event","is_reset","query","map","call","querySelectorAll","selected_option","querySelector","effect","__value","observer","MutationObserver","observe","childList","subtree","attributes","attributeFilter","disconnect","init_select","id","$.prop","$$props","valueselected","placeholder","size","isinvalid","disabled","valueSelected","$$render","consequent","$.each","node_1","opt","option_1","$.get","option_1_value","$.set_text","text_1","text","classes","push","join","setClasses","$.bind_select_value","$$value"],"mappings":"kVAYO,SAASA,EAAcC,EAAQC,EAAOC,GAC5C,GAAIF,EAAOG,SACV,OAoHF,SAAwBH,EAAQC,GAC/B,IAAK,IAAIG,KAAUJ,EAAOK,QAEzBD,EAAOE,UAAYL,EAAMM,QAAQC,EAAiBJ,GAEpD,CAzHSK,CAAeT,EAAQC,GAG/B,IAAK,IAAIG,KAAUJ,EAAOK,QAAS,CAClC,IAAIK,EAAeF,EAAiBJ,GACpC,GAAIO,EAAGD,EAAcT,GAEpB,YADAG,EAAOE,UAAW,EAGrB,CAEMJ,QAAsBU,IAAVX,IAChBD,EAAOa,iBAET,CAmDO,SAASC,EAAkBd,EAAQe,EAAKC,EAAMD,GACpD,IAAIb,GAAW,EAEfe,EAAgCjB,EAAQ,UAAWkB,IAClD,IAEIjB,EAFAkB,EAAQD,EAAW,aAAe,WAItC,GAAIlB,EAAOG,SACVF,EAAQ,GAAGmB,IAAIC,KAAKrB,EAAOsB,iBAAiBH,GAAQX,OAC9C,CAEN,IAAIe,EACHvB,EAAOwB,cAAcL,IAErBnB,EAAOwB,cAAc,0BACtBvB,EAAQsB,GAAmBf,EAAiBe,EAC/C,CAEEP,EAAIf,EAAM,IAIXwB,GAAO,KACN,IAAIxB,EAAQc,IAIZ,GAHAhB,EAAcC,EAAQC,EAAOC,GAGzBA,QAAsBU,IAAVX,EAAqB,CAEpC,IAAIsB,EAAkBvB,EAAOwB,cAAc,YACnB,OAApBD,IACHtB,EAAQO,EAAiBe,GACzBP,EAAIf,GAER,CAGED,EAAO0B,QAAUzB,EACjBC,GAAW,CAAK,IA9EX,SAAqBF,GAE3ByB,GAAO,KAMN,IAAIE,EAAW,IAAIC,kBAAiB,KAEnC,IAAI3B,EAAQD,EAAO0B,QACnB3B,EAAcC,EAAQC,EAAM,IAgB7B,OAXA0B,EAASE,QAAQ7B,EAAQ,CAExB8B,WAAW,EACXC,SAAS,EAITC,YAAY,EACZC,gBAAiB,CAAC,WAGZ,KACNN,EAASO,YAAY,CACrB,GAEH,CAmDCC,CAAYnC,EACb,CAeA,SAASQ,EAAiBJ,GAEzB,MAAI,YAAaA,EACTA,EAAOsB,QAEPtB,EAAOH,KAEhB,8oFCrHImC,EAAEC,EAAAC,EAAA,KAAA,GACFC,wBAAgB,IAChBC,EAAWH,EAAAC,EAAA,cAAA,GACXG,eAAO,KACPC,qBAAY,GACZC,oBAAW,GACXtC,EAAOgC,EAAAC,EAAA,UAAA,GAELM,MAAuBL,kGAyBnBC,KAAW,4BAFdA,KAAWK,EAAAC,EAAA,sBAMTC,EAAAC,EAAA,GAAA3C,QAAW4C,2CACEC,EAAAP,SAAAQ,EAAAF,GAAIN,SAAiBS,KAAAA,EAAAD,EAAAF,GAAIhD,SAAJiD,EAAAjD,MAAA,OAAAiD,EAAAxB,QAAAyB,EAAAF,GAAIhD,OAAJ,GAAAkD,EAAAF,GAAIhD,OACxCoD,EAAAC,EAAAH,EAAAF,GAAIM,KAAI,kGA7BOb,EAAoBD,GAChC,MAAAe,GAAW,oBAEbd,GACFc,EAAQC,KAAK,cAEXhB,GACFe,EAAQC,KAAI,cAAehB,KAGtBe,EAAQE,KAAK,IACtB,CAMOC,CAAWjB,IAAWD,OAEjBmB,EAAA5D,GAAA,IAAAmD,EAAAP,UAAAA,EAAaiB,4GA5BP,2GAET,4DACK,wDACD","x_google_ignoreList":[0]}