@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

package/dist/components/pincode/Pincode.svelte

@@ -1,67 +1,88 @@
 <svelte:options customElement={{ tag: 'm-pincode' }} />
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  type PincodeLen = 4 | 5 | 6;
+  /**
+   * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.
+   *
+   * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.
+   */
   interface Props {
+    /**
+     * A unique identifier for the pincode element, used to associate the label with the form element.
+     */
     id: string;
-    length?: PincodeLen | string; // <- peut arriver en string via l'attribut
+    /**
+     * The number of input displayed in the pincode element.
+     */
+    length?: 4 | 5 | 6;
+    /**
+     * The name attribute for the pincode element, typically used for form submission.
+     */
     name?: string;
+    /**
+     * The current value of the pincode field.
+     */
     value?: string | number;
-    isInvalid?: boolean;
+    /**
+     * If `true`, applies an invalid state to the pincode.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, disables the pincode, making it non-interactive.
+     */
     disabled?: boolean;
+    /**
+     * If `true`, the pincode is read-only (cannot be edited).
+     */
     readonly?: boolean;
-    [key: string]: any;
   }
 
-  const dispatch = createEventDispatcher();
-
   let {
     id,
     length = 6,
     name,
-    value = '',
-    isInvalid = false,
-    disabled = false,
-    readonly = false,
-    ...attrsAndEvents
+    value,
+    isinvalid,
+    disabled,
+    readonly,
   }: Props = $props();
 
-  // Normalisation: length numérique (ex. "6" -> 6)
   const L = $derived(
     typeof length === 'string' ? parseInt(length, 10) || 6 : length,
   );
 
-  // État minimal
   let otp = $state<string[]>(Array(L).fill(''));
   let inputs = $state<HTMLInputElement[]>([]);
+  let element: HTMLElement;
 
-  // Sync depuis props (value/length normalisé)
   $effect(() => {
     const incoming = String(value ?? '');
     otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');
   });
 
-  function focusInput(i: number) {
+  const focusInput = (i: number) => {
     queueMicrotask(() => inputs?.[i]?.focus());
-  }
+  };
 
-  function emit() {
+  const emitInput = () => {
     const joined = otp.join('');
-    dispatch('input', { value: joined });
-    dispatch('change', { value: joined });
-  }
+    const event = new CustomEvent('input', {
+      detail: { value: joined },
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(event);
+  };
 
-  function onInput(e: Event, index: number) {
+  const onInput = (e: Event, index: number) => {
     const el = e.target as HTMLInputElement;
     const digit = el.value.replace(/\D/g, '').slice(0, 1);
     otp[index] = digit;
-    emit();
+    emitInput();
     if (digit && index + 1 < L) focusInput(index + 1);
-  }
+  };
 
-  function onKeyDown(e: KeyboardEvent, index: number) {
+  const onKeyDown = (e: KeyboardEvent, index: number) => {
     if (e.key === 'ArrowLeft' && index > 0) {
       e.preventDefault();
       focusInput(index - 1);
@@ -70,34 +91,28 @@
       focusInput(index + 1);
     } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {
       otp[index - 1] = '';
-      emit();
+      emitInput();
       focusInput(index - 1);
     }
-  }
+  };
 
-  function onPaste(e: ClipboardEvent) {
+  const onPaste = (e: ClipboardEvent) => {
     e.preventDefault();
     const pasted = (e.clipboardData?.getData('text') ?? '')
       .replace(/\D/g, '')
       .slice(0, L);
     otp = Array.from({ length: L }, (_, i) => pasted[i] ?? '');
-    emit();
+    emitInput();
     focusInput(Math.min(pasted.length, L - 1));
-  }
+  };
 </script>
 
-<div
-  class="mc-pincode-input"
-  on:paste|preventDefault={onPaste}
-  class:is-invalid={isInvalid}
-  {...attrsAndEvents}
->
+<div class="mc-pincode-input" onpaste={onPaste} bind:this={element}>
   {#each Array(L) as _, i}
     <input
       id={`pincodeItem${i}`}
       bind:this={inputs[i]}
-      class="mc-pincode-input__control"
-      class:is-invalid={isInvalid}
+      class={['mc-pincode-input__control', isinvalid && 'is-invalid']}
       type="text"
       inputmode="numeric"
       maxlength="1"
@@ -107,8 +122,8 @@
       {disabled}
       {readonly}
       value={otp[i]}
-      on:input={(e) => onInput(e, i)}
-      on:keydown={(e) => onKeyDown(e as KeyboardEvent, i)}
+      oninput={(e) => onInput(e, i)}
+      onkeydown={(e) => onKeyDown(e as KeyboardEvent, i)}
     />
   {/each}
 </div>
@@ -116,9 +131,6 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-pincode-input {
   display: inline-flex;
   column-gap: 0.5rem;
@@ -130,45 +142,45 @@
   }
 }
 .mc-pincode-input__control {
-  font-size: 1.75rem;
+  font-size: var(--font-size-400, 1.75rem);
   transition: box-shadow 200ms ease;
-  background-color: #ffffff;
-  border: 1px solid #666666;
-  border-radius: 0.25rem;
+  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: #000000;
+  color: var(--forms-color-text-default, #000000);
   display: block;
   width: 3rem;
   box-sizing: border-box;
   height: 4rem;
   text-align: center;
-  line-height: 1.3;
+  line-height: var(--line-height-s, 1.3);
 }
 .mc-pincode-input__control::placeholder {
-  color: #666666;
+  color: var(--forms-color-placeholder, #666666);
 }
 .mc-pincode-input__control:focus-within {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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-pincode-input__control:hover:not(:focus-within) {
-  border-color: #4d4d4d;
-  box-shadow: 0 0 0 1px #4d4d4d;
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-pincode-input__control:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
   border-color: transparent;
   box-shadow: none;
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
   pointer-events: none;
 }
 .mc-pincode-input__control.is-invalid {
-  border-color: #ea302d;
-  box-shadow: 0 0 0 1px #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-pincode-input__control.is-invalid:hover:not(:focus-within) {
-  border-color: #c61112;
-  box-shadow: 0 0 0 1px #c61112;
+  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);
 }</style>

package/dist/components/pincode/Pincode.svelte.d.ts

@@ -1,33 +1,39 @@
-type PincodeLen = 4 | 5 | 6;
+/**
+ * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.
+ *
+ * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.
+ */
 interface Props {
+    /**
+     * A unique identifier for the pincode element, used to associate the label with the form element.
+     */
     id: string;
-    length?: PincodeLen | string;
+    /**
+     * The number of input displayed in the pincode element.
+     */
+    length?: 4 | 5 | 6;
+    /**
+     * The name attribute for the pincode element, typically used for form submission.
+     */
     name?: string;
+    /**
+     * The current value of the pincode field.
+     */
     value?: string | number;
-    isInvalid?: boolean;
+    /**
+     * If `true`, applies an invalid state to the pincode.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, disables the pincode, making it non-interactive.
+     */
     disabled?: boolean;
+    /**
+     * If `true`, the pincode is read-only (cannot be edited).
+     */
     readonly?: boolean;
-    [key: string]: any;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Pincode: $$__sveltets_2_IsomorphicComponent<Props, {
-    input: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Pincode = InstanceType<typeof Pincode>;
+declare const Pincode: import("svelte").Component<Props, {}, "">;
+type Pincode = ReturnType<typeof Pincode>;
 export default Pincode;
 //# sourceMappingURL=Pincode.svelte.d.ts.map

package/dist/components/pincode/Pincode.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pincode.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.svelte.ts"],"names":[],"mappings":"AAME,KAAK,UAAU,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC5B,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAyFH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,OAAO;;;;;cAA+E,CAAC;AAC3E,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Pincode.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsFH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/pincode/README.md

@@ -0,0 +1,22 @@
+# `m-pincode`
+
+A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the pincode element, used to associate the label with the form element. | `string` |   |
+| `length` | The number of input displayed in the pincode element. | `4` `5` `6` | `6` |
+| `name` | The name attribute for the pincode element, typically used for form submission. | `string` |   |
+| `value` | The current value of the pincode field. | `string` `number` |   |
+| `isinvalid` | If `true`, applies an invalid state to the pincode. | `boolean` |   |
+| `disabled` | If `true`, disables the pincode, making it non-interactive. | `boolean` |   |
+| `readonly` | If `true`, the pincode is read-only (cannot be edited). | `boolean` |   |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `input` | Emits when the pincode value changes. | `CustomEvent<{ value: string }>` |
+

package/dist/components/quantityselector/QuantitySelector.js

@@ -1,9 +1,5 @@
-import{c as F,p as H,b as n,q as J,t as C,h as G,i as K,j as i,e as L,u as O,n as ee,a as te,f as ne,d as f,s as w,g as A,o as ie,r as v}from"../../custom-element.js";import{s as d,a as P,r as re}from"../../attributes.js";import{c as se}from"../../input.js";import"../../legacy.js";var le=J('<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 R(b,e){H(e,!1);let l=n(e,"id",12,void 0),r=n(e,"style",12,void 0),o=n(e,"className",12,void 0),a=n(e,"fill",12,void 0),m=n(e,"size",12,"1.5rem");var c=le();return C(()=>{d(c,"id",l()),P(c,r()),L(c,0,O(o())),d(c,"fill",a())}),G(b,c),K({get id(){return l()},set id(s){l(s),i()},get style(){return r()},set style(s){r(s),i()},get className(){return o()},set className(s){o(s),i()},get fill(){return a()},set fill(s){a(s),i()},get size(){return m()},set size(s){m(s),i()}})}customElements.define("less-24",F(R,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var ae=J('<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 T(b,e){H(e,!1);let l=n(e,"id",12,void 0),r=n(e,"style",12,void 0),o=n(e,"className",12,void 0),a=n(e,"fill",12,void 0),m=n(e,"size",12,"1.5rem");var c=ae();return C(()=>{d(c,"id",l()),P(c,r()),L(c,0,O(o())),d(c,"fill",a())}),G(b,c),K({get id(){return l()},set id(s){l(s),i()},get style(){return r()},set style(s){r(s),i()},get className(){return o()},set className(s){o(s),i()},get fill(){return a()},set fill(s){a(s),i()},get size(){return m()},set size(s){m(s),i()}})}customElements.define("more-24",F(T,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function oe(b,e,l,r,o,a){var m,c;e()>l()&&e(l()),e()<r()&&e(r()),(m=o())==null||m(e()),(c=a())==null||c(b)}function ce(b,e,l,r,o){var a;e()-Number(l())>r()&&e(e()-Number(l())),(a=o())==null||a(e())}function ue(b,e,l,r,o){var a;e()+Number(l())<r()&&e(e()+Number(l())),(a=o())==null||a(e())}var de=ne('<div><input type="number" class="mc-quantity-selector__control svelte-529exj" spellcheck="false"/> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-529exj" tabindex="-1"><span class="mc-quantity-selector__icon svelte-529exj"><!></span> <span class="mc-quantity-selector__label svelte-529exj"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-529exj" tabindex="-1"><span class="mc-quantity-selector__icon svelte-529exj"><!></span> <span class="mc-quantity-selector__label svelte-529exj"> </span></button></div>');const me={hash:"svelte-529exj",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.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-quantity-selector.svelte-529exj {background-color:#ffffff;border:1px solid #666666;border-radius:0.25rem;transition:all ease 200ms;color:#000000;display:block;width:100%;height:3rem;border-radius:0.25rem;box-sizing:border-box;display:flex;gap:0.25rem;padding:0.1875rem;position:relative;}.mc-quantity-selector__control.svelte-529exj {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-529exj {
-  /* For Blink & WebKit rendering engines */
-  /* For Gecko rendering engine */appearance:textfield;}.mc-quantity-selector__control[type=number].svelte-529exj::-webkit-inner-spin-button, .mc-quantity-selector__control[type=number].svelte-529exj::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-quantity-selector__control.svelte-529exj::placeholder {color:#666666;}.mc-quantity-selector__button.svelte-529exj {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:#242938;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}.mc-quantity-selector__button.svelte-529exj:disabled {color:#d9d9d9;cursor:not-allowed;}.mc-quantity-selector__button.svelte-529exj:hover:not(:disabled) {background-color:rgba(255, 255, 255, 0.1);}.mc-quantity-selector__button--decrease.svelte-529exj {order:-1;}.mc-quantity-selector__icon.svelte-529exj {height:1.5rem;width:1.5rem;fill:currentcolor;}.mc-quantity-selector__label.svelte-529exj {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-529exj::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-529exj:hover:not(:focus-within) {border-color:#4d4d4d;box-shadow:0 0 0 1px #4d4d4d;}.mc-quantity-selector.svelte-529exj:has(input:where(.svelte-529exj):disabled) {background-color:#d9d9d9;cursor:not-allowed;border-color:transparent;box-shadow:none;color:#737373;pointer-events:none;}.mc-quantity-selector.svelte-529exj:has(input:where(.svelte-529exj):disabled) .mc-quantity-selector__button:where(.svelte-529exj):disabled {color:#737373;}.mc-quantity-selector.svelte-529exj:has(input:where(.svelte-529exj):focus)::after {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-quantity-selector--s.svelte-529exj {--inset-x: 2rem;height:2rem;}.mc-quantity-selector--s.svelte-529exj .mc-quantity-selector__button:where(.svelte-529exj) {height:1.5rem;width:1.5rem;}.mc-quantity-selector--s.svelte-529exj .mc-quantity-selector__icon:where(.svelte-529exj) {height:1.25rem;width:1.25rem;}.mc-quantity-selector.is-invalid.svelte-529exj {border-color:#ea302d;box-shadow:0 0 0 1px #ea302d;}.mc-quantity-selector.is-invalid.svelte-529exj:hover:not(:focus-within) {border-color:#c61112;box-shadow:0 0 0 1px #c61112;}.mc-quantity-selector.svelte-529exj :where(.svelte-529exj) {box-sizing:border-box;}`};function be(b,e){H(e,!0),te(b,me);let l=n(e,"id",7,void 0),r=n(e,"quantity",15,1),o=n(e,"min",7,1),a=n(e,"max",7,100),m=n(e,"size",7,"m"),c=n(e,"decrementlabel",7,"Decrement"),s=n(e,"inputarialabel",7,"Quantity Selector"),j=n(e,"incrementlabel",7,"Increment"),x=n(e,"disabled",7,!1),_=n(e,"isinvalid",7,!1),z=n(e,"required",7,!1),k=n(e,"name",7,"quantity-selector-input"),y=n(e,"step",7,1),N=n(e,"increment",7),D=n(e,"decrement",7),S=n(e,"inputqty",7),B=n(e,"oninput",7),E=n(e,"onblur",7);function U(t,q){const Q=["mc-quantity-selector"];return t&&Q.push("is-invalid"),q==="s"&&Q.push("mc-quantity-selector--s"),Q.join(" ")}var p=de(),u=f(p);re(u),u.__input=[oe,r,a,o,S,B];var h=w(u,2);h.__click=[ue,r,y,a,N];var I=f(h),X=f(I);T(X,{}),v(I);var V=w(I,2),Y=f(V,!0);v(V),v(h);var g=w(h,2);g.__click=[ce,r,y,o,D];var M=f(g),Z=f(M);R(Z,{}),v(M);var W=w(M,2),$=f(W,!0);return v(W),v(g),v(p),C(t=>{L(p,1,t,"svelte-529exj"),d(u,"id",l()),d(u,"name",k()),d(u,"aria-label",s()),d(u,"aria-valuemin",o()),d(u,"aria-valuemax",a()),d(u,"aria-valuenow",r()),d(u,"aria-invalid",_()),u.disabled=x(),u.required=z(),d(h,"aria-controls",l()),h.disabled=r()===a()||x(),A(Y,c()),d(g,"aria-controls",l()),g.disabled=r()===o()||x(),A($,j())},[()=>U(_(),m())]),ie("blur",u,function(...t){var q;(q=E())==null||q.apply(this,t)}),se(u,r),G(b,p),K({get id(){return l()},set id(t=void 0){l(t),i()},get quantity(){return r()},set quantity(t=1){r(t),i()},get min(){return o()},set min(t=1){o(t),i()},get max(){return a()},set max(t=100){a(t),i()},get size(){return m()},set size(t="m"){m(t),i()},get decrementlabel(){return c()},set decrementlabel(t="Decrement"){c(t),i()},get inputarialabel(){return s()},set inputarialabel(t="Quantity Selector"){s(t),i()},get incrementlabel(){return j()},set incrementlabel(t="Increment"){j(t),i()},get disabled(){return x()},set disabled(t=!1){x(t),i()},get isinvalid(){return _()},set isinvalid(t=!1){_(t),i()},get required(){return z()},set required(t=!1){z(t),i()},get name(){return k()},set name(t="quantity-selector-input"){k(t),i()},get step(){return y()},set step(t=1){y(t),i()},get increment(){return N()},set increment(t){N(t),i()},get decrement(){return D()},set decrement(t){D(t),i()},get inputqty(){return S()},set inputqty(t){S(t),i()},get oninput(){return B()},set oninput(t){B(t),i()},get onblur(){return E()},set onblur(t){E(t),i()}})}ee(["input","click"]);customElements.define("m-quantityselector",F(be,{id:{},quantity:{},min:{},max:{},size:{},decrementlabel:{},inputarialabel:{},incrementlabel:{},disabled:{},isinvalid:{},required:{},name:{},step:{},increment:{},decrement:{},inputqty:{},oninput:{},onblur:{}},[],[],!0));
+ */.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[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,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,8VCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,uGC6CWE,GAAYC,EAAoBC,EAAAC,EAAAC,EAAAC,EAAAC,EAAA,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,GAAwBC,EAAAR,EAAAS,EAAAP,EAAAQ,EAAA,OAC3BV,IAAW,OAAOS,EAAI,CAAA,EAAIP,EAAG,GAC/BF,EAAWA,EAAW,EAAA,OAAOS,EAAI,CAAA,CAAA,GAEnCJ,EAAAK,EAAS,IAAT,MAAAL,EAAYL,IACd,CAES,SAAAW,GAAwBC,EAAAZ,EAAAS,EAAAR,EAAAY,EAAA,OAC3Bb,IAAW,OAAOS,EAAI,CAAA,EAAIR,EAAG,GAC/BD,EAAWA,EAAW,EAAA,OAAOS,EAAI,CAAA,CAAA,GAEnCJ,EAAAQ,EAAS,IAAT,MAAAR,EAAYL,IACd;;;;;;;qqFA3EF,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,oCASW5B,GAAWE,EAAAC,EAAAC,EAAAC,EAAAC,CAAA,0BAiBXO,GAAeX,EAAAS,EAAAR,EAAAY,CAAA,0FAafN,GAAeP,EAAAS,EAAAP,EAAAQ,CAAA,4JA3BZK,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,MAKKD,GAAc,QA1ChDQ,EAAWN,EAAS,EAAErB,EAAI,CAAA,CAAA,0EAKvBG,CAAQ,0CAnEf,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,mRAgDZ","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\n  class={[\n    'mc-quantity-selector',\n    `mc-quantity-selector--${size}`,\n    isinvalid && 'is-invalid',\n  ]}\n>\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,0CAiDnBnB,GAAOE,EAAAC,EAAAC,CAAA,0BAePE,GAAWJ,EAAAM,EAAAL,CAAA,0FAaXO,GAAWR,EAAAM,EAAAJ,CAAA,8FAtCpB,gDACyBL,EAAI,CAAA,GAC7BgB,KAAa,kFAUEX,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,sBA/C7D,+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,12 @@
-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;
+export declare const readOnly: 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;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}