@mozaic-ds/web-components 1.0.0-beta.7 → 1.1.0

package/dist/components/quantityselector/QuantitySelector.js

@@ -1,5 +1,5 @@
-import{c as H,p as C,b as r,q as O,t as F,h as G,i as L,j as l,e as V,u as P,n as te,a as re,f as le,d as f,s as z,g as K,o as se,r as p}from"../../custom-element.js";import{s as u,a as R,r as ne}from"../../attributes.js";import{c as ie}from"../../input.js";import"../../legacy.js";var ae=O('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1"></path></svg>');function T(v,e){C(e,!1);let i=r(e,"id",12,void 0),s=r(e,"style",12,void 0),o=r(e,"className",12,void 0),a=r(e,"fill",12,void 0),m=r(e,"size",12,"1.5rem");var b={get id(){return i()},set id(n){i(n),l()},get style(){return s()},set style(n){s(n),l()},get className(){return o()},set className(n){o(n),l()},get fill(){return a()},set fill(n){a(n),l()},get size(){return m()},set size(n){m(n),l()}},d=ae();return F(()=>{u(d,"id",i()),R(d,s()),V(d,0,P(o())),u(d,"fill",a())}),G(v,d),L(b)}customElements.define("less-24",H(T,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var oe=O('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6z"></path></svg>');function U(v,e){C(e,!1);let i=r(e,"id",12,void 0),s=r(e,"style",12,void 0),o=r(e,"className",12,void 0),a=r(e,"fill",12,void 0),m=r(e,"size",12,"1.5rem");var b={get id(){return i()},set id(n){i(n),l()},get style(){return s()},set style(n){s(n),l()},get className(){return o()},set className(n){o(n),l()},get fill(){return a()},set fill(n){a(n),l()},get size(){return m()},set size(n){m(n),l()}},d=oe();return F(()=>{u(d,"id",i()),R(d,s()),V(d,0,P(o())),u(d,"fill",a())}),G(v,d),L(b)}customElements.define("more-24",H(U,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function de(v,e,i,s,o,a){var m,b;e()>i()&&e(i()),e()<s()&&e(s()),(m=o())==null||m(e()),(b=a())==null||b(v)}function ce(v,e,i,s,o){var a;e()-Number(i())>s()&&e(e()-Number(i())),(a=o())==null||a(e())}function ue(v,e,i,s,o){var a;e()+Number(i())<s()&&e(e()+Number(i())),(a=o())==null||a(e())}var me=le('<div><input type="number" class="mc-quantity-selector__control svelte-ptlds1" spellcheck="false"/> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><!></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><!></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button></div>');const ve={hash:"svelte-ptlds1",code:`/**
+import{c as E,p as D,b as n,A,t as S,i as V,j as I,k as a,e as M,g as j,v as R,a as T,f as U,d as p,s as g,r as f,h as H}from"../../custom-element.js";import{s as u,a as G,r as W}from"../../attributes.js";import{c as X}from"../../input.js";import{c as Y}from"../../custom-element-forward-events.js";import"../../legacy.js";var Z=A('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1"></path></svg>');function L(v,e){D(e,!1);let o=n(e,"id",12,void 0),t=n(e,"style",12,void 0),r=n(e,"className",12,void 0),i=n(e,"fill",12,void 0),m=n(e,"size",12,"1.5rem");var b={get id(){return o()},set id(s){o(s),a()},get style(){return t()},set style(s){t(s),a()},get className(){return r()},set className(s){r(s),a()},get fill(){return i()},set fill(s){i(s),a()},get size(){return m()},set size(s){m(s),a()}},d=Z();return S(()=>{u(d,"id",o()),G(d,t()),M(d,0,j(r())),u(d,"fill",i())}),V(v,d),I(b)}customElements.define("less-24",E(L,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var $=A('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6z"></path></svg>');function O(v,e){D(e,!1);let o=n(e,"id",12,void 0),t=n(e,"style",12,void 0),r=n(e,"className",12,void 0),i=n(e,"fill",12,void 0),m=n(e,"size",12,"1.5rem");var b={get id(){return o()},set id(s){o(s),a()},get style(){return t()},set style(s){t(s),a()},get className(){return r()},set className(s){r(s),a()},get fill(){return i()},set fill(s){i(s),a()},get size(){return m()},set size(s){m(s),a()}},d=$();return S(()=>{u(d,"id",o()),G(d,t()),M(d,0,j(r())),u(d,"fill",i())}),V(v,d),I(b)}customElements.define("more-24",E(O,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));const ee=(v,e,o,t)=>{const r=Number(e());r>o()?e(o()):r<t()?e(t()):e(r)},te=(v,e,o,t)=>{const r=Number(e()),i=Number(o());r+i<=t()?e(r+i):e(t())},re=(v,e,o,t)=>{const r=Number(e()),i=Number(o());r-i>=t()?e(r-i):e(t())};var se=U('<div><input type="number" class="mc-quantity-selector__control svelte-ptlds1"/> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><!></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><!></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button></div>');const le={hash:"svelte-ptlds1",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-quantity-selector.svelte-ptlds1 {background-color:var(--forms-color-background-default, #ffffff);border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;border-radius:var(--radius-s, 0.25rem);box-sizing:border-box;display:flex;gap:0.25rem;padding:0.1875rem;position:relative;}.mc-quantity-selector__control.svelte-ptlds1 {background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none;}.mc-quantity-selector__control[type=number].svelte-ptlds1::-webkit-inner-spin-button, .mc-quantity-selector__control[type=number].svelte-ptlds1::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-quantity-selector__control[type=number].svelte-ptlds1 {
-  /* For Gecko rendering engine */appearance:textfield;}.mc-quantity-selector__control.svelte-ptlds1 {padding:0;font-size:inherit;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-semi-bold, 600);cursor:inherit;text-align:center;flex-grow:1;}.mc-quantity-selector__control.svelte-ptlds1::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-quantity-selector__button.svelte-ptlds1 {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:var(--radius-full, 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-ptlds1:disabled {color:var(--quantity-selector-color-button-text-disabled, #d9d9d9);cursor:not-allowed;}.mc-quantity-selector__button.svelte-ptlds1:hover:not(:disabled) {background-color:var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));}.mc-quantity-selector__button--decrease.svelte-ptlds1 {order:-1;}.mc-quantity-selector__icon.svelte-ptlds1 {height:1.5rem;width:1.5rem;fill:currentcolor;}.mc-quantity-selector__label.svelte-ptlds1 {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-ptlds1::after {transition:box-shadow 200ms ease;border-radius:var(--radius-s, 0.25rem);content:"";position:absolute;inset:-0.125rem var(--inset-x, 3rem);pointer-events:none;display:block;}.mc-quantity-selector.svelte-ptlds1:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):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-ptlds1:has(input:where(.svelte-ptlds1):disabled) .mc-quantity-selector__button:where(.svelte-ptlds1):disabled {color:var(--forms-color-icon-disabled, #737373);}.mc-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):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-ptlds1 {--inset-x: 2rem;height:2rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__button:where(.svelte-ptlds1) {height:1.5rem;width:1.5rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__icon:where(.svelte-ptlds1) {height:1.25rem;width:1.25rem;}.mc-quantity-selector.is-invalid.svelte-ptlds1 {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-quantity-selector.is-invalid.svelte-ptlds1:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}.mc-quantity-selector.svelte-ptlds1 :where(.svelte-ptlds1) {box-sizing:border-box;}`};function be(v,e){C(e,!0),re(v,ve);let i=r(e,"id",7,void 0),s=r(e,"quantity",15,1),o=r(e,"min",7,1),a=r(e,"max",7,100),m=r(e,"size",7,"m"),b=r(e,"decrementlabel",7,"Decrement"),d=r(e,"inputarialabel",7,"Quantity Selector"),n=r(e,"incrementlabel",7,"Increment"),g=r(e,"disabled",7,!1),y=r(e,"isinvalid",7,!1),k=r(e,"required",7,!1),N=r(e,"name",7,"quantity-selector-input"),x=r(e,"step",7,1),D=r(e,"increment",7),S=r(e,"decrement",7),j=r(e,"inputqty",7),E=r(e,"oninput",7),I=r(e,"onblur",7);function W(t,w){const B=["mc-quantity-selector"];return t&&B.push("is-invalid"),w==="s"&&B.push("mc-quantity-selector--s"),B.join(" ")}var X={get id(){return i()},set id(t=void 0){i(t),l()},get quantity(){return s()},set quantity(t=1){s(t),l()},get min(){return o()},set min(t=1){o(t),l()},get max(){return a()},set max(t=100){a(t),l()},get size(){return m()},set size(t="m"){m(t),l()},get decrementlabel(){return b()},set decrementlabel(t="Decrement"){b(t),l()},get inputarialabel(){return d()},set inputarialabel(t="Quantity Selector"){d(t),l()},get incrementlabel(){return n()},set incrementlabel(t="Increment"){n(t),l()},get disabled(){return g()},set disabled(t=!1){g(t),l()},get isinvalid(){return y()},set isinvalid(t=!1){y(t),l()},get required(){return k()},set required(t=!1){k(t),l()},get name(){return N()},set name(t="quantity-selector-input"){N(t),l()},get step(){return x()},set step(t=1){x(t),l()},get increment(){return D()},set increment(t){D(t),l()},get decrement(){return S()},set decrement(t){S(t),l()},get inputqty(){return j()},set inputqty(t){j(t),l()},get oninput(){return E()},set oninput(t){E(t),l()},get onblur(){return I()},set onblur(t){I(t),l()}},q=me(),c=f(q);ne(c),c.__input=[de,s,a,o,j,E];var h=z(c,2);h.__click=[ue,s,x,a,D];var M=f(h),Y=f(M);U(Y,{}),p(M);var A=z(M,2),Z=f(A,!0);p(A),p(h);var _=z(h,2);_.__click=[ce,s,x,o,S];var Q=f(_),$=f(Q);T($,{}),p(Q);var J=z(Q,2),ee=f(J,!0);return p(J),p(_),p(q),F(t=>{V(q,1,t,"svelte-ptlds1"),u(c,"id",i()),u(c,"name",N()),u(c,"aria-label",d()),u(c,"aria-valuemin",o()),u(c,"aria-valuemax",a()),u(c,"aria-valuenow",s()),u(c,"aria-invalid",y()),c.disabled=g(),c.required=k(),u(h,"aria-controls",i()),h.disabled=s()===a()||g(),K(Z,b()),u(_,"aria-controls",i()),_.disabled=s()===o()||g(),K(ee,n())},[()=>W(y(),m())]),se("blur",c,function(...t){var w;(w=I())==null||w.apply(this,t)}),ie(c,s),G(v,q),L(X)}te(["input","click"]);customElements.define("m-quantityselector",H(be,{id:{},quantity:{},min:{},max:{},size:{},decrementlabel:{},inputarialabel:{},incrementlabel:{},disabled:{},isinvalid:{},required:{},name:{},step:{},increment:{},decrement:{},inputqty:{},oninput:{},onblur:{}},[],[],!0));
+  /* For Gecko rendering engine */appearance:textfield;}.mc-quantity-selector__control.svelte-ptlds1 {padding:0;font-size:inherit;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-semi-bold, 600);cursor:inherit;text-align:center;flex-grow:1;}.mc-quantity-selector__control.svelte-ptlds1::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-quantity-selector__button.svelte-ptlds1 {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:var(--radius-full, 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-ptlds1:disabled {color:var(--quantity-selector-color-button-text-disabled, #d9d9d9);cursor:not-allowed;}.mc-quantity-selector__button.svelte-ptlds1:hover:not(:disabled) {background-color:var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));}.mc-quantity-selector__button--decrease.svelte-ptlds1 {order:-1;}.mc-quantity-selector__icon.svelte-ptlds1 {height:1.5rem;width:1.5rem;fill:currentcolor;}.mc-quantity-selector__label.svelte-ptlds1 {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-ptlds1::after {transition:box-shadow 200ms ease;border-radius:var(--radius-s, 0.25rem);content:"";position:absolute;inset:-0.125rem var(--inset-x, 3rem);pointer-events:none;display:block;}.mc-quantity-selector.svelte-ptlds1:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):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-ptlds1:has(input:where(.svelte-ptlds1):disabled) .mc-quantity-selector__button:where(.svelte-ptlds1):disabled {color:var(--forms-color-icon-disabled, #737373);}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) .mc-quantity-selector__control[readonly]:where(.svelte-ptlds1) {text-align:left;padding-left:0.5rem;}.mc-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):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-ptlds1 {--inset-x: 2rem;height:2rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__button:where(.svelte-ptlds1) {height:1.5rem;width:1.5rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__icon:where(.svelte-ptlds1) {height:1.25rem;width:1.25rem;}.mc-quantity-selector.is-invalid.svelte-ptlds1 {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-quantity-selector.is-invalid.svelte-ptlds1:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}.mc-quantity-selector.svelte-ptlds1 :where(.svelte-ptlds1) {box-sizing:border-box;}`};function ne(v,e){D(e,!0),T(v,le);let o=n(e,"id",7),t=n(e,"value",15,1),r=n(e,"min",7,1),i=n(e,"max",7,100),m=n(e,"step",7,1),b=n(e,"size",7,"m"),d=n(e,"disabled",7),s=n(e,"isinvalid",7,!1),x=n(e,"name",7,"quantity-selector-input"),w=n(e,"readonly",7),q=n(e,"decrementlabel",7,"Decrement"),z=n(e,"incrementlabel",7,"Increment");var Q={get id(){return o()},set id(l){o(l),a()},get value(){return t()},set value(l=1){t(l),a()},get min(){return r()},set min(l=1){r(l),a()},get max(){return i()},set max(l=100){i(l),a()},get step(){return m()},set step(l=1){m(l),a()},get size(){return b()},set size(l="m"){b(l),a()},get disabled(){return d()},set disabled(l){d(l),a()},get isinvalid(){return s()},set isinvalid(l=!1){s(l),a()},get name(){return x()},set name(l="quantity-selector-input"){x(l),a()},get readonly(){return w()},set readonly(l){w(l),a()},get decrementlabel(){return q()},set decrementlabel(l="Decrement"){q(l),a()},get incrementlabel(){return z()},set incrementlabel(l="Increment"){z(l),a()}},_=se(),c=p(_);W(c),c.__input=[ee,t,i,r];var h=g(c,2);h.__click=[te,t,m,i];var k=p(h),C=p(k);O(C,{}),f(k);var B=g(k,2),J=p(B,!0);f(B),f(h);var y=g(h,2);y.__click=[re,t,m,r];var N=p(y),K=p(N);L(K,{}),f(N);var F=g(N,2),P=p(F,!0);return f(F),f(y),f(_),S(()=>{M(_,1,j(["mc-quantity-selector",`mc-quantity-selector--${b()}`,s()&&"is-invalid"]),"svelte-ptlds1"),u(c,"id",o()),u(c,"name",x()),u(c,"aria-valuemin",r()),u(c,"aria-valuemax",i()),u(c,"aria-valuenow",t()),u(c,"aria-invalid",`${s()}`),c.readOnly=w(),c.disabled=d(),u(h,"aria-controls",o()),h.disabled=t()===i()||d(),H(J,z()),u(y,"aria-controls",o()),y.disabled=t()===r()||d(),H(P,q())}),X(c,t),V(v,_),I(Q)}R(["input","click"]);customElements.define("m-quantityselector",E(ne,{id:{},value:{},min:{},max:{},step:{},size:{},disabled:{},isinvalid:{},name:{},readonly:{},decrementlabel:{},incrementlabel:{}},[],[],!0,Y));
 //# sourceMappingURL=QuantitySelector.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/Less24/Less24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/More24/More24.svelte","../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'less-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1\"/></svg>","<svelte:options customElement={{ tag: 'more-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6z\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-quantityselector',\n  }}\n/>\n\n<script lang=\"ts\">\n  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';\n  import More24 from '@mozaic-ds/icons-svelte/svelte/More24/More24.svelte';\n  import type { QuantitySelectorSize } from './quantitySelector.types';\n  interface Props {\n    id?: string | undefined;\n    quantity?: number;\n    min?: number;\n    max?: number;\n    size?: QuantitySelectorSize;\n    decrementlabel?: string;\n    inputarialabel?: string;\n    incrementlabel?: string;\n    disabled?: boolean;\n    isinvalid?: boolean;\n    required?: boolean;\n    name?: string;\n    step?: number;\n    increment?: (qty: number) => void;\n    decrement?: (qty: number) => void;\n    inputqty?: (qty: number) => void;\n    oninput?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    id = undefined,\n    quantity = $bindable(1),\n    min = 1,\n    max = 100,\n    size = 'm',\n    decrementlabel = 'Decrement',\n    inputarialabel = 'Quantity Selector',\n    incrementlabel = 'Increment',\n    disabled = false,\n    isinvalid = false,\n    required = false,\n    name = 'quantity-selector-input',\n    step = 1,\n    increment,\n    decrement,\n    inputqty,\n    oninput,\n    onblur,\n  }: Props = $props();\n\n  function handleValue(event: Event): void {\n    if (quantity > max) {\n      quantity = max;\n    }\n    if (quantity < min) {\n      quantity = min;\n    }\n    inputqty?.(quantity);\n    oninput?.(event);\n  }\n\n  function handleDecrement(): void {\n    if (quantity - Number(step) > min) {\n      quantity = quantity - Number(step);\n    }\n    decrement?.(quantity);\n  }\n\n  function handleIncrement(): void {\n    if (quantity + Number(step) < max) {\n      quantity = quantity + Number(step);\n    }\n    increment?.(quantity);\n  }\n\n  function getClasses(\n    isInvalid: boolean,\n    size: QuantitySelectorSize,\n  ): string {\n    const classes = ['mc-quantity-selector'];\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n\n    if (size === 's') {\n      classes.push('mc-quantity-selector--s');\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class=\"{getClasses(isinvalid, size)}\">\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value={quantity}\n    oninput={handleValue}\n    {onblur}\n    class=\"mc-quantity-selector__control\"\n    aria-label={inputarialabel}\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={quantity}\n    aria-invalid={isinvalid}\n    spellcheck=\"false\"\n    {disabled}\n    {required}\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={handleIncrement}\n    disabled={quantity === max || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <More24 />\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={handleDecrement}\n    disabled={quantity === min || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <Less24 />\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":["id","style","className","fill","size","handleValue","event","quantity","max","min","inputqty","oninput","_a","_b","handleDecrement","_","step","decrement","handleIncrement","__1","increment","decrementlabel","inputarialabel","incrementlabel","disabled","isinvalid","required","name","$.prop","$$props","onblur","getClasses","isInvalid","classes"],"mappings":"ggBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,8VCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,uGC6CWE,GAAYC,EAAYC,EAAAC,EAAAC,EAAAC,EAAAC,EAAQ,SACnCJ,EAAQ,EAAGC,KACbD,EAAWC,EAAG,CAAA,EAEZD,EAAQ,EAAGE,KACbF,EAAWE,EAAG,CAAA,GAEhBG,EAAAF,EAAQ,IAAR,MAAAE,EAAWL,MACXM,EAAAF,EAAO,IAAP,MAAAE,EAAUP,EACZ,CAES,SAAAQ,GAAeC,EAAAR,EAAAS,EAAAP,EAAAQ,EAAS,OAC3BV,EAAQ,EAAG,OAAOS,EAAI,CAAA,EAAIP,EAAG,GAC/BF,EAAWA,EAAQ,EAAG,OAAOS,EAAI,CAAA,CAAA,GAEnCJ,EAAAK,EAAS,IAAT,MAAAL,EAAYL,IACd,CAES,SAAAW,GAAeC,EAAAZ,EAAAS,EAAAR,EAAAY,EAAS,OAC3Bb,EAAQ,EAAG,OAAOS,EAAI,CAAA,EAAIR,EAAG,GAC/BD,EAAWA,EAAQ,EAAG,OAAOS,EAAI,CAAA,CAAA,GAEnCJ,EAAAQ,EAAS,IAAT,MAAAR,EAAYL,IACd;;;i3GA3EF,kBAgCI,IAAAP,aAAK,MAAS,EACdO,oBAAqB,CAAC,EACtBE,cAAM,CAAC,EACPD,cAAM,GAAG,EACTJ,eAAO,GAAG,EACViB,yBAAiB,WAAW,EAC5BC,yBAAiB,mBAAmB,EACpCC,yBAAiB,WAAW,EAC5BC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,eAAO,yBAAyB,EAChCX,eAAO,CAAC,EACRI,EAASQ,EAAAC,EAAA,YAAA,CAAA,EACTZ,EAASW,EAAAC,EAAA,YAAA,CAAA,EACTnB,EAAQkB,EAAAC,EAAA,WAAA,CAAA,EACRlB,EAAOiB,EAAAC,EAAA,UAAA,CAAA,EACPC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EA4BC,SAAAE,EACPC,EACA5B,EACQ,CACF,MAAA6B,GAAW,sBAAsB,EACnC,OAAAD,GACFC,EAAQ,KAAK,YAAY,EAGvB7B,IAAS,KACX6B,EAAQ,KAAK,yBAAyB,EAGjCA,EAAQ,KAAK,GAAG,CACzB,sCA3DO,OAAS,qDACO,EAAC,2CAChB,EAAC,2CACD,IAAG,6CACF,IAAG,iEACO,YAAW,iEACX,oBAAmB,iEACnB,YAAW,qDACjB,GAAK,uDACJ,GAAK,qDACN,GAAK,6CACT,0BAAyB,6CACzB,EAAC,kTAwDC5B,GAAWE,EAAAC,EAAAC,EAAAC,EAAAC,CAAA,0BAiBXO,GAAeX,EAAAS,EAAAR,EAAAY,CAAA,0FAafN,GAAeP,EAAAS,EAAAP,EAAAQ,CAAA,6JA3BZK,GAAc,sBACXb,GAAG,sBACHD,GAAG,sBACHD,GAAQ,qBACTkB,GAAS,oDAORzB,GAAE,aAIPO,EAAQ,IAAKC,EAAG,GAAIgB,EAAQ,MAKKH,GAAc,sBAI1CrB,GAAE,aAIPO,EAAQ,IAAKE,EAAG,GAAIe,EAAQ,OAKKD,GAAc,QA1ChDQ,EAAWN,EAAS,EAAErB,EAAI,CAAA,CAAA,0EAKvBG,CAAQ,aAPxB","x_google_ignoreList":[0,1]}
+{"version":3,"file":"QuantitySelector.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/Less24/Less24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/More24/More24.svelte","../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'less-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1\"/></svg>","<svelte:options customElement={{ tag: 'more-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6z\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-quantityselector',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';\n  import More24 from '@mozaic-ds/icons-svelte/svelte/More24/More24.svelte';\n  /**\n   * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the quantity selector element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the quantity selector element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the quantity selector field.\n     */\n    value?: number;\n    /**\n     * If `true`, applies an invalid state to the quantity selector.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the quantity selector, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the quantity selector.\n     */\n    size?: 's' | 'm';\n    /**\n     * Minimum acceptable value for the quantity selector.\n     */\n    min?: number;\n    /**\n     * Maximum acceptable value for the quantity selector.\n     */\n    max?: number;\n    /**\n     * Determines how much the value will change per click when the quantity is increased or decreased.\n     */\n    step?: number;\n    /**\n     * If `true`, the quantity selector is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * The label text for the increment button.\n     */\n    incrementlabel?: string;\n    /**\n     * The label text for the decrement button.\n     */\n    decrementlabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    min = 1,\n    max = 100,\n    step = 1,\n    size = 'm',\n    disabled,\n    isinvalid = false,\n    name = 'quantity-selector-input',\n    readonly,\n    decrementlabel = 'Decrement',\n    incrementlabel = 'Increment',\n  }: Props = $props();\n\n  const onValue = (): void => {\n    const numericValue = Number(value);\n    if (numericValue > max) {\n      value = max;\n    } else if (numericValue < min) {\n      value = min;\n    } else {\n      value = numericValue;\n    }\n  };\n\n  const onIncrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue + numericStep <= max) {\n      value = numericValue + numericStep;\n    } else {\n      value = max;\n    }\n  };\n\n  const onDecrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue - numericStep >= min) {\n      value = numericValue - numericStep;\n    } else {\n      value = min;\n    }\n  };\n</script>\n\n<div class={['mc-quantity-selector', `mc-quantity-selector--${size}`, isinvalid && 'is-invalid']}>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value\n    oninput={onValue}\n    class=\"mc-quantity-selector__control\"\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={value}\n    aria-invalid={`${isinvalid}`}\n    {readonly}\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    disabled={value === max || disabled}\n    onclick={onIncrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <More24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{incrementlabel}</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    disabled={value === min || disabled}\n    onclick={onDecrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <Less24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{decrementlabel}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n"],"names":["id","style","className","fill","size","onValue","_","value","max","min","numericValue","onIncrement","__1","step","numericStep","onDecrement","__2","$.prop","$$props","disabled","isinvalid","name","readonly","decrementlabel","incrementlabel","customElementForwardEvents"],"mappings":"wiBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,6VCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,8FCyEQ,MAAAE,GAAO,CAAAC,EAAAC,EAAAC,EAAAC,IAAe,OACpBC,EAAe,OAAOH,GAAK,EAC7BG,EAAeF,IACjBD,EAAQC,EAAG,CAAA,EACFE,EAAeD,IACxBF,EAAQE,EAAG,CAAA,EAEXF,EAAQG,CAAY,CAExB,EAEMC,GAAW,CAAAC,EAAAL,EAAAM,EAAAL,IAAe,OACxBE,EAAe,OAAOH,GAAK,EAC3BO,EAAc,OAAOD,GAAI,EAE3BH,EAAeI,GAAeN,IAChCD,EAAQG,EAAeI,CAAW,EAElCP,EAAQC,EAAG,CAAA,CAEf,EAEMO,GAAW,CAAAC,EAAAT,EAAAM,EAAAJ,IAAe,OACxBC,EAAe,OAAOH,GAAK,EAC3BO,EAAc,OAAOD,GAAI,EAE3BH,EAAeI,GAAeL,IAChCF,EAAQG,EAAeI,CAAW,EAElCP,EAAQE,EAAG,CAAA,CAEf;;;osHA/GF,qBAkEIT,EAAEiB,EAAAC,EAAA,KAAA,CAAA,EACFX,iBAAkB,CAAC,EACnBE,cAAM,CAAC,EACPD,cAAM,GAAG,EACTK,eAAO,CAAC,EACRT,eAAO,GAAG,EACVe,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,oBAAY,EAAK,EACjBC,eAAO,yBAAyB,EAChCC,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,yBAAiB,WAAW,EAC5BC,yBAAiB,WAAW,sFAVV,EAAC,2CACb,EAAC,2CACD,IAAG,6CACF,EAAC,6CACD,IAAG,4GAEE,GAAK,6CACV,0BAAyB,sHAEf,YAAW,iEACX,YAAW,0CA2CnBnB,GAAOE,EAAAC,EAAAC,CAAA,0BAePE,GAAWJ,EAAAM,EAAAL,CAAA,0FAaXO,GAAWR,EAAAM,EAAAJ,CAAA,8FAlCX,gDAAiDL,EAAI,CAAA,GAAIgB,KAAa,kFAQhEX,GAAG,sBACHD,GAAG,sBACHD,GAAK,wBACHa,EAAS,CAAA,EAAA,oDAMXpB,GAAE,aAGPO,EAAK,IAAKC,EAAG,GAAIW,EAAQ,MAMQK,GAAc,sBAI1CxB,GAAE,aAGPO,EAAK,IAAKE,EAAG,GAAIU,EAAQ,MAMQI,GAAc,sBAzC7D,+MA7GYE","x_google_ignoreList":[0,1]}

package/dist/components/quantityselector/QuantitySelector.spec.js

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import QuantitySelector from './QuantitySelector.svelte';
+describe('m-quantityselector component', () => {
+    const baseProps = {
+        id: 'test-qty',
+        value: 2,
+        min: 1,
+        max: 5,
+        step: 1,
+        incrementlabel: 'Add one',
+        decrementlabel: 'Remove one',
+    };
+    let input;
+    let increaseBtn;
+    let decreaseBtn;
+    const getElements = (container) => {
+        input = container.querySelector('input');
+        const buttons = container.querySelectorAll('button');
+        increaseBtn = buttons[0];
+        decreaseBtn = buttons[1];
+    };
+    it('renders input and two buttons', () => {
+        const { container } = render(QuantitySelector, { props: baseProps });
+        const inputs = container.querySelectorAll('input');
+        const buttons = container.querySelectorAll('button');
+        expect(inputs.length).toBe(1);
+        expect(buttons.length).toBe(2);
+    });
+    it('displays initial value correctly', () => {
+        const { container } = render(QuantitySelector, { props: baseProps });
+        getElements(container);
+        expect(input.value).toBe('2');
+    });
+    it('increments value when increment button is clicked', async () => {
+        const { container } = render(QuantitySelector, { props: baseProps });
+        getElements(container);
+        await fireEvent.click(increaseBtn);
+        expect(input.value).toBe('3');
+    });
+    it('decrements value when decrement button is clicked', async () => {
+        const { container } = render(QuantitySelector, { props: baseProps });
+        getElements(container);
+        await fireEvent.click(decreaseBtn);
+        expect(input.value).toBe('1');
+    });
+    it('does not exceed max value on increment', async () => {
+        const { container } = render(QuantitySelector, {
+            props: { ...baseProps, value: 5 },
+        });
+        getElements(container);
+        await fireEvent.click(increaseBtn);
+        expect(input.value).toBe('5');
+        expect(increaseBtn).toBeDisabled();
+    });
+    it('does not go below min value on decrement', async () => {
+        const { container } = render(QuantitySelector, {
+            props: { ...baseProps, value: 1 },
+        });
+        getElements(container);
+        await fireEvent.click(decreaseBtn);
+        expect(input.value).toBe('1');
+        expect(decreaseBtn).toBeDisabled();
+    });
+    it('applies disabled prop to input and buttons', () => {
+        const { container } = render(QuantitySelector, {
+            props: { ...baseProps, disabled: true },
+        });
+        getElements(container);
+        expect(input).toBeDisabled();
+        expect(increaseBtn).toBeDisabled();
+        expect(decreaseBtn).toBeDisabled();
+    });
+    it('applies readonly prop to input', () => {
+        const { container } = render(QuantitySelector, {
+            props: { ...baseProps, readonly: true },
+        });
+        getElements(container);
+        expect(input).toHaveAttribute('readonly');
+    });
+    it('adds invalid class when isinvalid is true', () => {
+        const { container } = render(QuantitySelector, {
+            props: { ...baseProps, isinvalid: true },
+        });
+        const wrapper = container.querySelector('.mc-quantity-selector');
+        expect(wrapper.classList.contains('is-invalid')).toBe(true);
+    });
+    it('clamps value on manual input above max', async () => {
+        const { container } = render(QuantitySelector, {
+            props: { ...baseProps, value: 4 },
+        });
+        getElements(container);
+        await fireEvent.input(input, { target: { value: '10' } });
+        expect(input.value).toBe('5');
+    });
+    it('clamps value on manual input below min', async () => {
+        const { container } = render(QuantitySelector, {
+            props: { ...baseProps, value: 2 },
+        });
+        getElements(container);
+        await fireEvent.input(input, { target: { value: '0' } });
+        expect(input.value).toBe('1');
+    });
+});

package/dist/components/quantityselector/QuantitySelector.stories.d.ts

@@ -1,16 +1,11 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * The quantity selector is a form element used to enter or select a number.
- * This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart.
- *
- * The `MQuantitySelector` component is the **Svelte / WebComponent** implementation of the **Quantity Selector** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/quantity-selector/).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Small: any;
-export declare const Disabled: any;
-export declare const Invalid: any;
-export declare const Required: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Step: Story;
+export declare const Small: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
 //# sourceMappingURL=QuantitySelector.stories.d.ts.map

package/dist/components/quantityselector/QuantitySelector.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.stories.d.ts","sourceRoot":"","sources":["../../../src/components/quantityselector/QuantitySelector.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBAmFE,IAAI;AAjFT,wBAiFU;AAqBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAczC,eAAO,MAAM,KAAK,KAAoB,CAAC;AASvC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAU1C,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,QAAQ,KAAoB,CAAC"}
+{"version":3,"file":"QuantitySelector.stories.d.ts","sourceRoot":"","sources":["../../../src/components/quantityselector/QuantitySelector.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAkDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/quantityselector/QuantitySelector.stories.js

@@ -1,159 +1,85 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * The quantity selector is a form element used to enter or select a number.
- * This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart.
- *
- * The `MQuantitySelector` component is the **Svelte / WebComponent** implementation of the **Quantity Selector** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/quantity-selector/).
- */
-export default {
+const meta = {
     title: 'Form Elements/Quantity Selector',
-    tags: ['autodocs', 'beta'],
+    component: 'm-quantityselector',
+    args: {
+        id: 'quantitySelectorId',
+        value: 10,
+        min: 5,
+        max: 20,
+    },
     argTypes: {
-        id: {
-            description: 'Specify id for qty selector',
-            control: 'text',
-        },
-        name: {
-            description: 'Specify name attr for qty selector',
-            control: 'text',
-        },
         size: {
-            description: 'Specify the text qty selector size',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['s', 'm'],
         },
-        disabled: {
-            description: 'Specify whether the qty selector is disabled',
-            control: { type: 'boolean' },
-        },
-        isinvalid: {
-            description: 'Determine whether the qty selector is invalid',
-            control: 'boolean',
-        },
-        required: {
-            description: 'Determine whether the qty selector is required',
-            control: 'boolean',
-        },
-        quantity: {
-            description: 'Specify the quantity. Default is 1',
-            control: 'number',
-        },
-        step: {
-            description: 'Determines how much the value will change per click when the quantity is increased or decreased. Default is 1',
-            control: 'number',
-        },
-        valuemin: {
-            description: 'Specify the minimum quantity. Default is 1',
-            control: 'number',
-        },
-        valuemax: {
-            description: 'Specify the maximum quantity. Default is 100',
-            control: 'number',
-        },
-        decrementlabel: {
-            description: 'Specify the decrement label for a11y',
-            control: 'number',
-        },
-        inputarialabel: {
-            description: 'Specify the input aria label for a11y.',
-            control: 'number',
-        },
-        incrementlabel: {
-            description: 'Specify the increment label for a11y',
-            control: 'number',
-        },
-        increment: {
-            description: 'Event that occurs when the increment button is clicked',
-            action: 'on:increment',
-            table: {
-                category: 'Events',
-            },
-        },
-        decrement: {
-            description: 'Event that occurs when the decrement button is clicked',
-            action: 'on:decrement',
-            table: {
-                category: 'Events',
-            },
-        },
-        inputQty: {
-            description: 'Event that occurs when a quantity is entered in the input field',
-            action: 'oninputqty',
-            table: {
-                category: 'Events',
-            },
-        },
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-quantityselector
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        value=${ifDefined(args.value)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        size=${ifDefined(args.size)}
+        min=${ifDefined(args.min)}
+        max=${ifDefined(args.max)}
+        step=${ifDefined(args.step)}
+        readonly=${ifDefined(args.readonly)}
+        incrementlabel=${ifDefined(args.incrementlabel)}
+        decrementlabel=${ifDefined(args.decrementlabel)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-quantityselector>
+    `;
     },
 };
-const Template = (args) => {
-    const MQuantitySelector = document.createElement('m-quantityselector');
-    MQuantitySelector.setAttribute('id', args.id || 'quantityID');
-    MQuantitySelector.setAttribute('quantity', args.quantity || '1');
-    if (args.size)
-        MQuantitySelector.setAttribute('size', args.size);
-    if (args.disabled)
-        MQuantitySelector.setAttribute('disabled', 'true');
-    if (args.isinvalid)
-        MQuantitySelector.setAttribute('isinvalid', 'true');
-    if (args.required)
-        MQuantitySelector.setAttribute('required', 'true');
-    if (args.step)
-        MQuantitySelector.setAttribute('step', args.step);
-    if (args.valuemax)
-        MQuantitySelector.setAttribute('valuemax', args.valuemax.toString());
-    if (args.valuemin)
-        MQuantitySelector.setAttribute('valuemin', args.valuemin.toString());
-    MQuantitySelector.increment = action('increment');
-    MQuantitySelector.decrement = action('decrement');
-    MQuantitySelector.inputqty = action('inputqty');
-    return MQuantitySelector;
-};
-export const Default = Template.bind({});
-Default.args = {};
-Default.play = async ({ canvasElement }) => {
-    const qtySelector = canvasElement.querySelector('m-quantityselector');
-    const input = qtySelector?.shadowRoot?.querySelector('input');
-    const button = qtySelector?.shadowRoot?.querySelector('button');
-    expect(qtySelector).not.toBeNull();
-    await userEvent.type(input, '5');
-    expect(input).toHaveValue(15);
-    await userEvent.click(button);
-    expect(input).toHaveValue(16);
-};
-export const Small = Template.bind({});
-Small.args = {
-    size: 's',
-};
-Small.play = async ({ canvasElement }) => {
-    const qtySelector = canvasElement.querySelector('m-quantityselector');
-    expect(qtySelector).toHaveAttribute('size', 's');
-};
-export const Disabled = Template.bind({});
-Disabled.args = {
-    disabled: true,
-};
-Disabled.play = async ({ canvasElement }) => {
-    const qtySelector = canvasElement.querySelector('m-quantityselector');
-    const input = qtySelector?.shadowRoot?.querySelector('input');
-    expect(input).toBeDisabled();
+export default meta;
+export const Default = {};
+export const Step = {
+    args: {
+        id: 'stepId',
+        step: 5,
+    },
 };
-export const Invalid = Template.bind({});
-Invalid.args = {
-    isinvalid: true,
+export const Small = {
+    args: {
+        id: 'smallId',
+        size: 's',
+    },
 };
-Invalid.play = async ({ canvasElement }) => {
-    const qtySelector = canvasElement.querySelector('m-quantityselector');
-    const input = qtySelector?.shadowRoot?.querySelector('input');
-    expect(input).toHaveAttribute('aria-invalid', 'true');
+export const Disabled = {
+    args: {
+        id: 'disableId',
+        disabled: true,
+    },
 };
-export const Required = Template.bind({});
-Required.args = {
-    required: true,
+export const ReadOnly = {
+    args: {
+        id: 'readonlyId',
+        readonly: true,
+    },
 };
-Required.play = async ({ canvasElement }) => {
-    const qtySelector = canvasElement.querySelector('m-quantityselector');
-    const input = qtySelector?.shadowRoot?.querySelector('input');
-    expect(input).toHaveAttribute('required');
+export const Invalid = {
+    args: {
+        id: 'invalidId',
+        isinvalid: true,
+    },
 };