@mozaic-ds/web-components 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components/pincode/Pincode.js

@@ -0,0 +1,6 @@
+import{$ as T,a0 as K,a1 as R,q as Y,a2 as F,u as G,a3 as H,a4 as J,c as N,p as Q,a as U,b as p,C as A,l as S,m as a,v as V,a5 as W,f as j,z as X,o as I,h as E,i as Z,j as h,_ as z,r as $,t as ee,e as te}from"../../custom-element.js";import{e as re,i as oe}from"../../each.js";import{a as ae,C as se,r as ne,s as C,e as ie}from"../../attributes.js";function le(r,t,{bubbles:c=!1,cancelable:d=!1}={}){return new CustomEvent(r,{detail:t,bubbles:c,cancelable:d})}function ce(){const r=K;return r===null&&T(),(t,c,d)=>{var i;const s=(i=r.s.$$events)==null?void 0:i[t];if(s){const b=R(s)?s.slice():[s],v=le(t,c,d);for(const g of b)g.call(r.x,v);return!v.defaultPrevented}return!0}}function L(r,t){return r===t||(r==null?void 0:r[J])===t}function de(r={},t,c,d){return Y(()=>{var s,i;return F(()=>{s=i,i=(d==null?void 0:d())||[],G(()=>{r!==c(...i)&&(t(r,...i),s&&L(c(...s),r)&&t(null,...s))})}),()=>{H(()=>{i&&L(c(...i),r)&&t(null,...i)})}}),r}function ue(r){return function(...t){var c=t[0];return c.preventDefault(),r==null?void 0:r.apply(this,t)}}var fe=j('<input type="text" inputmode="numeric" maxlength="1" pattern="\\d*" autocomplete="one-time-code"/>'),ve=j("<div></div>");const me={hash:"svelte-u9qvms",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-pincode-input.svelte-u9qvms {display:inline-flex;column-gap:0.5rem;}
+@media screen and (width <= 1024px) {.mc-pincode-input.svelte-u9qvms {flex-wrap:wrap;row-gap:0.75rem;}
+}.mc-pincode-input__control.svelte-u9qvms {font-size:var(--font-size-400, 1.75rem);transition:box-shadow 200ms ease;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:3rem;box-sizing:border-box;height:4rem;text-align:center;line-height:var(--line-height-s, 1.3);}.mc-pincode-input__control.svelte-u9qvms::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-pincode-input__control.svelte-u9qvms:focus-within {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.svelte-u9qvms: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-pincode-input__control.svelte-u9qvms: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-pincode-input__control.is-invalid.svelte-u9qvms {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.svelte-u9qvms: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);}`};function pe(r,t){Q(t,!0),U(r,me);const c=ce();let d=p(t,"id",7),s=p(t,"length",7,6),i=p(t,"name",7),b=p(t,"value",7,""),v=p(t,"isInvalid",7,!1),g=p(t,"disabled",7,!1),q=p(t,"readonly",7,!1),M=X(t,["$$slots","$$events","$$legacy","$$host","id","length","name","value","isInvalid","disabled","readonly"]);const f=V(()=>typeof s()=="string"?parseInt(s(),10)||6:s());let m=A(S(Array(a(f)).fill(""))),k=A(S([]));W(()=>{const e=String(b()??"");z(m,Array.from({length:a(f)},(o,l)=>e[l]??""),!0)});function _(e){queueMicrotask(()=>{var o,l;return(l=(o=a(k))==null?void 0:o[e])==null?void 0:l.focus()})}function D(){const e=a(m).join("");c("input",{value:e}),c("change",{value:e})}function P(e,o){const n=e.target.value.replace(/\D/g,"").slice(0,1);a(m)[o]=n,D(),n&&o+1<a(f)&&_(o+1)}function B(e,o){e.key==="ArrowLeft"&&o>0?(e.preventDefault(),_(o-1)):e.key==="ArrowRight"&&o<a(f)-1?(e.preventDefault(),_(o+1)):e.key==="Backspace"&&a(m)[o]===""&&o>0&&(a(m)[o-1]="",D(),_(o-1))}function O(e){var l;e.preventDefault();const o=(((l=e.clipboardData)==null?void 0:l.getData("text"))??"").replace(/\D/g,"").slice(0,a(f));z(m,Array.from({length:a(f)},(n,w)=>o[w]??""),!0),D(),_(Math.min(o.length,a(f)-1))}var y=ve();return ae(y,e=>({class:"mc-pincode-input",...M,[se]:e}),[()=>({"is-invalid":v()})],void 0,"svelte-u9qvms"),re(y,21,()=>Array(a(f)),oe,(e,o,l)=>{var n=fe();ne(n),C(n,"id",`pincodeItem${l}`);let w;de(n,(u,x)=>a(k)[x]=u,u=>{var x;return(x=a(k))==null?void 0:x[u]},()=>[l]),ee(u=>{w=te(n,1,"mc-pincode-input__control svelte-u9qvms",null,w,u),C(n,"name",i()??`pincode-${d()}`),n.disabled=g(),n.readOnly=q(),ie(n,a(m)[l])},[()=>({"is-invalid":v()})]),I("input",n,u=>P(u,l)),I("keydown",n,u=>B(u,l)),E(e,n)}),$(y),I("paste",y,ue(O)),E(r,y),Z({get id(){return d()},set id(e){d(e),h()},get length(){return s()},set length(e=6){s(e),h()},get name(){return i()},set name(e){i(e),h()},get value(){return b()},set value(e=""){b(e),h()},get isInvalid(){return v()},set isInvalid(e=!1){v(e),h()},get disabled(){return g()},set disabled(e=!1){g(e),h()},get readonly(){return q()},set readonly(e=!1){q(e),h()}})}customElements.define("m-pincode",N(pe,{id:{},length:{},name:{},value:{},isInvalid:{},disabled:{},readonly:{}},[],[],!0));
+//# sourceMappingURL=Pincode.js.map

package/dist/components/pincode/Pincode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pincode.js","sources":["../../../node_modules/svelte/src/index-client.js","../../../node_modules/svelte/src/internal/client/dom/elements/bindings/this.js","../../../node_modules/svelte/src/internal/client/dom/legacy/event-modifiers.js","../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["/** @import { ComponentContext, ComponentContextLegacy } from '#client' */\n/** @import { EventDispatcher } from './index.js' */\n/** @import { NotFunction } from './internal/types.js' */\nimport { active_reaction, untrack } from './internal/client/runtime.js';\nimport { is_array } from './internal/shared/utils.js';\nimport { user_effect } from './internal/client/index.js';\nimport * as e from './internal/client/errors.js';\nimport { legacy_mode_flag } from './internal/flags/index.js';\nimport { component_context } from './internal/client/context.js';\nimport { DEV } from 'esm-env';\n\nif (DEV) {\n\t/**\n\t * @param {string} rune\n\t */\n\tfunction throw_rune_error(rune) {\n\t\tif (!(rune in globalThis)) {\n\t\t\t// TODO if people start adjusting the \"this can contain runes\" config through v-p-s more, adjust this message\n\t\t\t/** @type {any} */\n\t\t\tlet value; // let's hope noone modifies this global, but belts and braces\n\t\t\tObject.defineProperty(globalThis, rune, {\n\t\t\t\tconfigurable: true,\n\t\t\t\t// eslint-disable-next-line getter-return\n\t\t\t\tget: () => {\n\t\t\t\t\tif (value !== undefined) {\n\t\t\t\t\t\treturn value;\n\t\t\t\t\t}\n\n\t\t\t\t\te.rune_outside_svelte(rune);\n\t\t\t\t},\n\t\t\t\tset: (v) => {\n\t\t\t\t\tvalue = v;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tthrow_rune_error('$state');\n\tthrow_rune_error('$effect');\n\tthrow_rune_error('$derived');\n\tthrow_rune_error('$inspect');\n\tthrow_rune_error('$props');\n\tthrow_rune_error('$bindable');\n}\n\n/**\n * Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.\n *\n * Must be called while a derived or effect is running.\n *\n * ```svelte\n * <script>\n * \timport { getAbortSignal } from 'svelte';\n *\n * \tlet { id } = $props();\n *\n * \tasync function getData(id) {\n * \t\tconst response = await fetch(`/items/${id}`, {\n * \t\t\tsignal: getAbortSignal()\n * \t\t});\n *\n * \t\treturn await response.json();\n * \t}\n *\n * \tconst data = $derived(await getData(id));\n * </script>\n * ```\n */\nexport function getAbortSignal() {\n\tif (active_reaction === null) {\n\t\te.get_abort_signal_outside_reaction();\n\t}\n\n\treturn (active_reaction.ac ??= new AbortController()).signal;\n}\n\n/**\n * `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.\n * Unlike `$effect`, the provided function only runs once.\n *\n * It must be called during the component's initialisation (but doesn't need to live _inside_ the component;\n * it can be called from an external module). If a function is returned _synchronously_ from `onMount`,\n * it will be called when the component is unmounted.\n *\n * `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).\n *\n * @template T\n * @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn\n * @returns {void}\n */\nexport function onMount(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onMount');\n\t}\n\n\tif (legacy_mode_flag && component_context.l !== null) {\n\t\tinit_update_callbacks(component_context).m.push(fn);\n\t} else {\n\t\tuser_effect(() => {\n\t\t\tconst cleanup = untrack(fn);\n\t\t\tif (typeof cleanup === 'function') return /** @type {() => void} */ (cleanup);\n\t\t});\n\t}\n}\n\n/**\n * Schedules a callback to run immediately before the component is unmounted.\n *\n * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the\n * only one that runs inside a server-side component.\n *\n * @param {() => any} fn\n * @returns {void}\n */\nexport function onDestroy(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onDestroy');\n\t}\n\n\tonMount(() => () => untrack(fn));\n}\n\n/**\n * @template [T=any]\n * @param {string} type\n * @param {T} [detail]\n * @param {any}params_0\n * @returns {CustomEvent<T>}\n */\nfunction create_custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {\n\treturn new CustomEvent(type, { detail, bubbles, cancelable });\n}\n\n/**\n * Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).\n * Event dispatchers are functions that can take two arguments: `name` and `detail`.\n *\n * Component events created with `createEventDispatcher` create a\n * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).\n * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).\n * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)\n * property and can contain any type of data.\n *\n * The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:\n * ```ts\n * const dispatch = createEventDispatcher<{\n *  loaded: null; // does not take a detail argument\n *  change: string; // takes a detail argument of type string, which is required\n *  optional: number | null; // takes an optional detail argument of type number\n * }>();\n * ```\n *\n * @deprecated Use callback props and/or the `$host()` rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)\n * @template {Record<string, any>} [EventMap = any]\n * @returns {EventDispatcher<EventMap>}\n */\nexport function createEventDispatcher() {\n\tconst active_component_context = component_context;\n\tif (active_component_context === null) {\n\t\te.lifecycle_outside_component('createEventDispatcher');\n\t}\n\n\treturn (type, detail, options) => {\n\t\tconst events = /** @type {Record<string, Function | Function[]>} */ (\n\t\t\tactive_component_context.s.$$events\n\t\t)?.[/** @type {any} */ (type)];\n\n\t\tif (events) {\n\t\t\tconst callbacks = is_array(events) ? events.slice() : [events];\n\t\t\t// TODO are there situations where events could be dispatched\n\t\t\t// in a server (non-DOM) environment?\n\t\t\tconst event = create_custom_event(/** @type {string} */ (type), detail, options);\n\t\t\tfor (const fn of callbacks) {\n\t\t\t\tfn.call(active_component_context.x, event);\n\t\t\t}\n\t\t\treturn !event.defaultPrevented;\n\t\t}\n\n\t\treturn true;\n\t};\n}\n\n// TODO mark beforeUpdate and afterUpdate as deprecated in Svelte 6\n\n/**\n * Schedules a callback to run immediately before the component is updated after any state change.\n *\n * The first time the callback runs will be before the initial `onMount`.\n *\n * In runes mode use `$effect.pre` instead.\n *\n * @deprecated Use [`$effect.pre`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function beforeUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('beforeUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('beforeUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).b.push(fn);\n}\n\n/**\n * Schedules a callback to run immediately after the component has been updated.\n *\n * The first time the callback runs will be after the initial `onMount`.\n *\n * In runes mode use `$effect` instead.\n *\n * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function afterUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('afterUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('afterUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).a.push(fn);\n}\n\n/**\n * Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate\n * @param {ComponentContext} context\n */\nfunction init_update_callbacks(context) {\n\tvar l = /** @type {ComponentContextLegacy} */ (context).l;\n\treturn (l.u ??= { a: [], b: [], m: [] });\n}\n\nexport { flushSync } from './internal/client/reactivity/batch.js';\nexport { getContext, getAllContexts, hasContext, setContext } from './internal/client/context.js';\nexport { hydrate, mount, unmount } from './internal/client/render.js';\nexport { tick, untrack, settled } from './internal/client/runtime.js';\nexport { createRawSnippet } from './internal/client/dom/blocks/snippet.js';\n","import { STATE_SYMBOL } from '#client/constants';\nimport { effect, render_effect } from '../../../reactivity/effects.js';\nimport { untrack } from '../../../runtime.js';\nimport { queue_micro_task } from '../../task.js';\n\n/**\n * @param {any} bound_value\n * @param {Element} element_or_component\n * @returns {boolean}\n */\nfunction is_bound_this(bound_value, element_or_component) {\n\treturn (\n\t\tbound_value === element_or_component || bound_value?.[STATE_SYMBOL] === element_or_component\n\t);\n}\n\n/**\n * @param {any} element_or_component\n * @param {(value: unknown, ...parts: unknown[]) => void} update\n * @param {(...parts: unknown[]) => unknown} get_value\n * @param {() => unknown[]} [get_parts] Set if the this binding is used inside an each block,\n * \t\t\t\t\t\t\t\t\t\treturns all the parts of the each block context that are used in the expression\n * @returns {void}\n */\nexport function bind_this(element_or_component = {}, update, get_value, get_parts) {\n\teffect(() => {\n\t\t/** @type {unknown[]} */\n\t\tvar old_parts;\n\n\t\t/** @type {unknown[]} */\n\t\tvar parts;\n\n\t\trender_effect(() => {\n\t\t\told_parts = parts;\n\t\t\t// We only track changes to the parts, not the value itself to avoid unnecessary reruns.\n\t\t\tparts = get_parts?.() || [];\n\n\t\t\tuntrack(() => {\n\t\t\t\tif (element_or_component !== get_value(...parts)) {\n\t\t\t\t\tupdate(element_or_component, ...parts);\n\t\t\t\t\t// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at\n\t\t\t\t\t// the previous position if it isn't already taken over by a different effect.\n\t\t\t\t\tif (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {\n\t\t\t\t\t\tupdate(null, ...old_parts);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\t// We cannot use effects in the teardown phase, we we use a microtask instead.\n\t\t\tqueue_micro_task(() => {\n\t\t\t\tif (parts && is_bound_this(get_value(...parts), element_or_component)) {\n\t\t\t\t\tupdate(null, ...parts);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\t});\n\n\treturn element_or_component;\n}\n","import { noop } from '../../../shared/utils.js';\nimport { user_pre_effect } from '../../reactivity/effects.js';\nimport { on } from '../elements/events.js';\n\n/**\n * Substitute for the `trusted` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function trusted(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tif (event.isTrusted) {\n\t\t\t// @ts-ignore\n\t\t\tfn?.apply(this, args);\n\t\t}\n\t};\n}\n\n/**\n * Substitute for the `self` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function self(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\t// @ts-ignore\n\t\tif (event.target === this) {\n\t\t\t// @ts-ignore\n\t\t\tfn?.apply(this, args);\n\t\t}\n\t};\n}\n\n/**\n * Substitute for the `stopPropagation` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function stopPropagation(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tevent.stopPropagation();\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `once` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function once(fn) {\n\tvar ran = false;\n\n\treturn function (...args) {\n\t\tif (ran) return;\n\t\tran = true;\n\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `stopImmediatePropagation` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function stopImmediatePropagation(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tevent.stopImmediatePropagation();\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `preventDefault` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function preventDefault(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tevent.preventDefault();\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `passive` event modifier, implemented as an action\n * @deprecated\n * @param {HTMLElement} node\n * @param {[event: string, handler: () => EventListener]} options\n */\nexport function passive(node, [event, handler]) {\n\tuser_pre_effect(() => {\n\t\treturn on(node, event, handler() ?? noop, {\n\t\t\tpassive: true\n\t\t});\n\t});\n}\n\n/**\n * Substitute for the `nonpassive` event modifier, implemented as an action\n * @deprecated\n * @param {HTMLElement} node\n * @param {[event: string, handler: () => EventListener]} options\n */\nexport function nonpassive(node, [event, handler]) {\n\tuser_pre_effect(() => {\n\t\treturn on(node, event, handler() ?? noop, {\n\t\t\tpassive: false\n\t\t});\n\t});\n}\n","<svelte:options customElement={{ tag: 'm-pincode' }} />\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\n  type PincodeLen = 4 | 5 | 6;\n  interface Props {\n    id: string;\n    length?: PincodeLen | string; // <- peut arriver en string via l'attribut\n    name?: string;\n    value?: string | number;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    [key: string]: any;\n  }\n\n  const dispatch = createEventDispatcher();\n\n  let {\n    id,\n    length = 6,\n    name,\n    value = '',\n    isInvalid = false,\n    disabled = false,\n    readonly = false,\n    ...attrsAndEvents\n  }: Props = $props();\n\n  // Normalisation: length numérique (ex. \"6\" -> 6)\n  const L = $derived(\n    typeof length === 'string' ? parseInt(length, 10) || 6 : length,\n  );\n\n  // État minimal\n  let otp = $state<string[]>(Array(L).fill(''));\n  let inputs = $state<HTMLInputElement[]>([]);\n\n  // Sync depuis props (value/length normalisé)\n  $effect(() => {\n    const incoming = String(value ?? '');\n    otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');\n  });\n\n  function focusInput(i: number) {\n    queueMicrotask(() => inputs?.[i]?.focus());\n  }\n\n  function emit() {\n    const joined = otp.join('');\n    dispatch('input', { value: joined });\n    dispatch('change', { value: joined });\n  }\n\n  function onInput(e: Event, index: number) {\n    const el = e.target as HTMLInputElement;\n    const digit = el.value.replace(/\\D/g, '').slice(0, 1);\n    otp[index] = digit;\n    emit();\n    if (digit && index + 1 < L) focusInput(index + 1);\n  }\n\n  function onKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault();\n      focusInput(index - 1);\n    } else if (e.key === 'ArrowRight' && index < L - 1) {\n      e.preventDefault();\n      focusInput(index + 1);\n    } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {\n      otp[index - 1] = '';\n      emit();\n      focusInput(index - 1);\n    }\n  }\n\n  function onPaste(e: ClipboardEvent) {\n    e.preventDefault();\n    const pasted = (e.clipboardData?.getData('text') ?? '')\n      .replace(/\\D/g, '')\n      .slice(0, L);\n    otp = Array.from({ length: L }, (_, i) => pasted[i] ?? '');\n    emit();\n    focusInput(Math.min(pasted.length, L - 1));\n  }\n</script>\n\n<div\n  class=\"mc-pincode-input\"\n  on:paste|preventDefault={onPaste}\n  class:is-invalid={isInvalid}\n  {...attrsAndEvents}\n>\n  {#each Array(L) as _, i}\n    <input\n      id={`pincodeItem${i}`}\n      bind:this={inputs[i]}\n      class=\"mc-pincode-input__control\"\n      class:is-invalid={isInvalid}\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      pattern=\"\\d*\"\n      autocomplete=\"one-time-code\"\n      name={name ?? `pincode-${id}`}\n      {disabled}\n      {readonly}\n      value={otp[i]}\n      on:input={(e) => onInput(e, i)}\n      on:keydown={(e) => onKeyDown(e as KeyboardEvent, i)}\n    />\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pincode-input';\n</style>\n"],"names":["create_custom_event","type","detail","bubbles","cancelable","createEventDispatcher","active_component_context","component_context","e.lifecycle_outside_component","options","events","_a","callbacks","is_array","event","fn","is_bound_this","bound_value","element_or_component","STATE_SYMBOL","bind_this","update","get_value","get_parts","effect","old_parts","parts","render_effect","untrack","queue_micro_task","preventDefault","args","dispatch","id","$.prop","$$props","length","name","value","isInvalid","disabled","readonly","attrsAndEvents","$.rest_props","L","$.derived","otp","$.get","inputs","$.state","$.proxy","$.user_effect","incoming","$.set","_","i","focusInput","emit","joined","onInput","index","digit","onKeyDown","onPaste","pasted","$.attribute_effect","div","$0","$.index","$$anchor","$$value","$.set_attribute","input","$.set_value","$.event","e"],"mappings":"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","x_google_ignoreList":[0,1,2]}

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

@@ -0,0 +1,14 @@
+import type { Meta } from '@storybook/html-vite';
+/**
+ * The `MPincode` component is the **Svelte / WebComponent** implementation
+ * of the Mozaic Pincode Input.
+ */
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const FourDigits: any;
+export declare const WithInitialValue: any;
+export declare const Disabled: any;
+export declare const Readonly: any;
+export declare const Invalid: any;
+//# sourceMappingURL=Pincode.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pincode.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAI1D;;;GAGG;wBA2DE,IAAI;AAzDT,wBAyDU;AAqBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAoBzC,eAAO,MAAM,UAAU,KAAoB,CAAC;AAe5C,eAAO,MAAM,gBAAgB,KAAoB,CAAC;AAclD,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAW1C,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAW1C,eAAO,MAAM,OAAO,KAAoB,CAAC"}

package/dist/components/pincode/Pincode.stories.js

@@ -0,0 +1,140 @@
+import { userEvent, expect, within } from 'storybook/test';
+import { action } from 'storybook/actions';
+/**
+ * The `MPincode` component is the **Svelte / WebComponent** implementation
+ * of the Mozaic Pincode Input.
+ */
+export default {
+    title: 'Form Elements/Pincode',
+    tags: ['autodocs', 'beta', 'version:2.0.0'],
+    context: 'sidebar',
+    args: {
+        id: 'pincode-demo',
+        name: 'otp',
+        length: 6,
+        value: '',
+        isInvalid: false,
+        disabled: false,
+        readonly: false,
+    },
+    argTypes: {
+        id: {
+            description: 'Identifiant unique du pincode',
+            control: 'text',
+        },
+        name: {
+            description: 'Attribut name pour la soumission de formulaire',
+            control: 'text',
+        },
+        length: {
+            description: 'Nombre de cases du pincode',
+            control: { type: 'radio' },
+            options: [4, 5, 6],
+        },
+        value: {
+            description: 'Valeur initiale/contrôlée du pincode',
+            control: 'text',
+        },
+        isInvalid: {
+            description: 'Applique l’état invalide',
+            control: 'boolean',
+            table: { category: 'State' },
+        },
+        disabled: {
+            description: 'Désactive le pincode',
+            control: 'boolean',
+            table: { category: 'State' },
+        },
+        readonly: {
+            description: 'Lecture seule',
+            control: 'boolean',
+            table: { category: 'State' },
+        },
+        input: {
+            description: 'Émis à la saisie (CustomEvent<{ value: string }>)',
+            table: { category: 'Events' },
+            action: 'input',
+        },
+        change: {
+            description: 'Émis à chaque changement (CustomEvent<{ value: string }>)',
+            table: { category: 'Events' },
+            action: 'change',
+        },
+    },
+};
+const Template = (args) => {
+    const el = document.createElement('m-pincode');
+    // Attributs (kebab-case pour WC)
+    if (args.id)
+        el.setAttribute('id', args.id);
+    if (args.name)
+        el.setAttribute('name', args.name);
+    if (args.length)
+        el.setAttribute('length', String(args.length));
+    if (args.value)
+        el.setAttribute('value', String(args.value));
+    if (args.isInvalid)
+        el.setAttribute('isinvalid', 'true');
+    if (args.disabled)
+        el.setAttribute('disabled', 'true');
+    if (args.readonly)
+        el.setAttribute('readonly', 'true');
+    // Actions Storybook
+    el.addEventListener('input', action('input'));
+    el.addEventListener('change', action('change'));
+    return el;
+};
+export const Default = Template.bind({});
+Default.args = {};
+Default.play = async ({ canvasElement }) => {
+    const host = canvasElement.querySelector('m-pincode');
+    const root = host.shadowRoot;
+    const inputs = root.querySelectorAll('.mc-pincode-input__control');
+    expect(inputs.length).toBe(6);
+    await userEvent.click(inputs[0]);
+    await userEvent.type(inputs[0], '123456');
+    const joined = Array.from(inputs)
+        .map((i) => i.value)
+        .join('');
+    expect(joined).toBe('123456');
+};
+export const FourDigits = Template.bind({});
+FourDigits.args = { length: 4 };
+FourDigits.play = async ({ canvasElement }) => {
+    const host = canvasElement.querySelector('m-pincode');
+    const vals = Array.from(host.shadowRoot.querySelectorAll('.mc-pincode-input__control'));
+    expect(vals.length).toBe(4);
+    await userEvent.type(vals[0], '9876');
+    expect(vals.map((i) => i.value).join('')).toBe('9876');
+};
+export const WithInitialValue = Template.bind({});
+WithInitialValue.args = { length: 4, value: '2468' };
+WithInitialValue.play = async ({ canvasElement }) => {
+    const host = canvasElement.querySelector('m-pincode');
+    const inputs = host.shadowRoot.querySelectorAll('.mc-pincode-input__control');
+    const joined = Array.from(inputs)
+        .map((i) => i.value)
+        .join('');
+    expect(joined).toBe('2468'.padEnd(inputs.length, ''));
+};
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+Disabled.play = async ({ canvasElement }) => {
+    const host = canvasElement.querySelector('m-pincode');
+    const inputs = host.shadowRoot.querySelectorAll('.mc-pincode-input__control');
+    inputs.forEach((i) => expect(i.disabled).toBe(true));
+};
+export const Readonly = Template.bind({});
+Readonly.args = { readonly: true, length: 4, value: '2468' };
+Readonly.play = async ({ canvasElement }) => {
+    const host = canvasElement.querySelector('m-pincode');
+    const inputs = host.shadowRoot.querySelectorAll('.mc-pincode-input__control');
+    inputs.forEach((i) => expect(i.readOnly).toBe(true));
+};
+export const Invalid = Template.bind({});
+Invalid.args = { isInvalid: true };
+Invalid.play = async ({ canvasElement }) => {
+    const host = canvasElement.querySelector('m-pincode');
+    const container = host.shadowRoot.querySelector('.mc-pincode-input');
+    expect(container.classList.contains('is-invalid')).toBe(true);
+};

package/dist/components/pincode/Pincode.svelte

@@ -0,0 +1,171 @@
+<svelte:options customElement={{ tag: 'm-pincode' }} />
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  type PincodeLen = 4 | 5 | 6;
+  interface Props {
+    id: string;
+    length?: PincodeLen | string; // <- peut arriver en string via l'attribut
+    name?: string;
+    value?: string | number;
+    isInvalid?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    [key: string]: any;
+  }
+
+  const dispatch = createEventDispatcher();
+
+  let {
+    id,
+    length = 6,
+    name,
+    value = '',
+    isInvalid = false,
+    disabled = false,
+    readonly = false,
+    ...attrsAndEvents
+  }: 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[]>([]);
+
+  // Sync depuis props (value/length normalisé)
+  $effect(() => {
+    const incoming = String(value ?? '');
+    otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');
+  });
+
+  function focusInput(i: number) {
+    queueMicrotask(() => inputs?.[i]?.focus());
+  }
+
+  function emit() {
+    const joined = otp.join('');
+    dispatch('input', { value: joined });
+    dispatch('change', { value: joined });
+  }
+
+  function 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();
+    if (digit && index + 1 < L) focusInput(index + 1);
+  }
+
+  function onKeyDown(e: KeyboardEvent, index: number) {
+    if (e.key === 'ArrowLeft' && index > 0) {
+      e.preventDefault();
+      focusInput(index - 1);
+    } else if (e.key === 'ArrowRight' && index < L - 1) {
+      e.preventDefault();
+      focusInput(index + 1);
+    } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {
+      otp[index - 1] = '';
+      emit();
+      focusInput(index - 1);
+    }
+  }
+
+  function 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();
+    focusInput(Math.min(pasted.length, L - 1));
+  }
+</script>
+
+<div
+  class="mc-pincode-input"
+  on:paste|preventDefault={onPaste}
+  class:is-invalid={isInvalid}
+  {...attrsAndEvents}
+>
+  {#each Array(L) as _, i}
+    <input
+      id={`pincodeItem${i}`}
+      bind:this={inputs[i]}
+      class="mc-pincode-input__control"
+      class:is-invalid={isInvalid}
+      type="text"
+      inputmode="numeric"
+      maxlength="1"
+      pattern="\d*"
+      autocomplete="one-time-code"
+      name={name ?? `pincode-${id}`}
+      {disabled}
+      {readonly}
+      value={otp[i]}
+      on:input={(e) => onInput(e, i)}
+      on:keydown={(e) => onKeyDown(e as KeyboardEvent, i)}
+    />
+  {/each}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-pincode-input {
+  display: inline-flex;
+  column-gap: 0.5rem;
+}
+@media screen and (width <= 1024px) {
+  .mc-pincode-input {
+    flex-wrap: wrap;
+    row-gap: 0.75rem;
+  }
+}
+.mc-pincode-input__control {
+  font-size: var(--font-size-400, 1.75rem);
+  transition: box-shadow 200ms ease;
+  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: 3rem;
+  box-sizing: border-box;
+  height: 4rem;
+  text-align: center;
+  line-height: var(--line-height-s, 1.3);
+}
+.mc-pincode-input__control::placeholder {
+  color: var(--forms-color-placeholder, #666666);
+}
+.mc-pincode-input__control:focus-within {
+  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: 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: 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-pincode-input__control.is-invalid {
+  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: 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

@@ -0,0 +1,33 @@
+type PincodeLen = 4 | 5 | 6;
+interface Props {
+    id: string;
+    length?: PincodeLen | string;
+    name?: string;
+    value?: string | number;
+    isInvalid?: boolean;
+    disabled?: boolean;
+    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>;
+export default Pincode;
+//# sourceMappingURL=Pincode.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/quantityselector/QuantitySelector.js

@@ -1,6 +1,6 @@
-import{c as S,a as E,d as n,A as K,t as I,j as M,l as Q,m as l,i as j,B as L,u as T,b as U,f as X,g as v,s as k,k as G,r as f}from"../../custom-element.js";import{s as d,c as V,r as Y}from"../../attributes.js";import{a as Z}from"../../input.js";import"../../legacy.js";var $=K('<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 W(m,e){E(e,!1);let s=n(e,"id",12,void 0),r=n(e,"style",12,void 0),i=n(e,"className",12,void 0),c=n(e,"fill",12,void 0),b=n(e,"size",12,"1.5rem");var o=$();return I(()=>{d(o,"id",s()),V(o,r()),j(o,0,L(i())),d(o,"fill",c())}),M(m,o),Q({get id(){return s()},set id(a){s(a),l()},get style(){return r()},set style(a){r(a),l()},get className(){return i()},set className(a){i(a),l()},get fill(){return c()},set fill(a){c(a),l()},get size(){return b()},set size(a){b(a),l()}})}customElements.define("less-24",S(W,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var ee=K('<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 C(m,e){E(e,!1);let s=n(e,"id",12,void 0),r=n(e,"style",12,void 0),i=n(e,"className",12,void 0),c=n(e,"fill",12,void 0),b=n(e,"size",12,"1.5rem");var o=ee();return I(()=>{d(o,"id",s()),V(o,r()),j(o,0,L(i())),d(o,"fill",c())}),M(m,o),Q({get id(){return s()},set id(a){s(a),l()},get style(){return r()},set style(a){r(a),l()},get className(){return i()},set className(a){i(a),l()},get fill(){return c()},set fill(a){c(a),l()},get size(){return b()},set size(a){b(a),l()}})}customElements.define("more-24",S(C,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function te(m,e,s,r,i){e()>s()&&e(s()),e()<r()&&e(r()),i()(e())}function re(m,e,s,r,i){e()-Number(s())>r()&&e(e()-Number(s())),i()(e())}function ne(m,e,s,r,i){e()+Number(s())<r()&&e(e()+Number(s())),i()(e())}var le=X('<div><input type="number" class="mc-quantity-selector__control svelte-1k0p008" spellcheck="false"/> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-1k0p008" tabindex="-1"><span class="mc-quantity-selector__icon svelte-1k0p008"><!></span> <span class="mc-quantity-selector__label svelte-1k0p008"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-1k0p008" tabindex="-1"><span class="mc-quantity-selector__icon svelte-1k0p008"><!></span> <span class="mc-quantity-selector__label svelte-1k0p008"> </span></button></div>');const ae={hash:"svelte-1k0p008",code:`/**
+import{c as F,p as H,b as r,A as J,t as A,h as C,i as G,j as n,e as K,B as O,n as ee,a as te,f as re,d as b,s as q,g as W,o as ne,r as f}from"../../custom-element.js";import{s as u,c as P,r as ie}from"../../attributes.js";import{c as le}from"../../input.js";import"../../legacy.js";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="M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1"></path></svg>');function R(v,e){H(e,!1);let a=r(e,"id",12,void 0),i=r(e,"style",12,void 0),o=r(e,"className",12,void 0),s=r(e,"fill",12,void 0),m=r(e,"size",12,"1.5rem");var c=ae();return A(()=>{u(c,"id",a()),P(c,i()),K(c,0,O(o())),u(c,"fill",s())}),C(v,c),G({get id(){return a()},set id(l){a(l),n()},get style(){return i()},set style(l){i(l),n()},get className(){return o()},set className(l){o(l),n()},get fill(){return s()},set fill(l){s(l),n()},get size(){return m()},set size(l){m(l),n()}})}customElements.define("less-24",F(R,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var se=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(v,e){H(e,!1);let a=r(e,"id",12,void 0),i=r(e,"style",12,void 0),o=r(e,"className",12,void 0),s=r(e,"fill",12,void 0),m=r(e,"size",12,"1.5rem");var c=se();return A(()=>{u(c,"id",a()),P(c,i()),K(c,0,O(o())),u(c,"fill",s())}),C(v,c),G({get id(){return a()},set id(l){a(l),n()},get style(){return i()},set style(l){i(l),n()},get className(){return o()},set className(l){o(l),n()},get fill(){return s()},set fill(l){s(l),n()},get size(){return m()},set size(l){m(l),n()}})}customElements.define("more-24",F(T,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function oe(v,e,a,i,o,s){var m,c;e()>a()&&e(a()),e()<i()&&e(i()),(m=o())==null||m(e()),(c=s())==null||c(v)}function ce(v,e,a,i,o){var s;e()-Number(a())>i()&&e(e()-Number(a())),(s=o())==null||s(e())}function de(v,e,a,i,o){var s;e()+Number(a())<i()&&e(e()+Number(a())),(s=o())==null||s(e())}var ue=re('<div><input type="number" class="mc-quantity-selector__control svelte-1k0p008" spellcheck="false"/> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-1k0p008" tabindex="-1"><span class="mc-quantity-selector__icon svelte-1k0p008"><!></span> <span class="mc-quantity-selector__label svelte-1k0p008"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-1k0p008" tabindex="-1"><span class="mc-quantity-selector__icon svelte-1k0p008"><!></span> <span class="mc-quantity-selector__label svelte-1k0p008"> </span></button></div>');const me={hash:"svelte-1k0p008",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-quantity-selector.svelte-1k0p008 {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-1k0p008 {background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none;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[type=number].svelte-1k0p008 {
   /* For Blink & WebKit rendering engines */
-  /* For Gecko rendering engine */appearance:textfield;}.mc-quantity-selector__control[type=number].svelte-1k0p008::-webkit-inner-spin-button, .mc-quantity-selector__control[type=number].svelte-1k0p008::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-quantity-selector__control.svelte-1k0p008::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-quantity-selector__button.svelte-1k0p008 {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-1k0p008:disabled {color:var(--quantity-selector-color-button-text-disabled, #d9d9d9);cursor:not-allowed;}.mc-quantity-selector__button.svelte-1k0p008:hover:not(:disabled) {background-color:var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));}.mc-quantity-selector__button--decrease.svelte-1k0p008 {order:-1;}.mc-quantity-selector__icon.svelte-1k0p008 {height:1.5rem;width:1.5rem;fill:currentcolor;}.mc-quantity-selector__label.svelte-1k0p008 {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-1k0p008::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-1k0p008: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-1k0p008:has(input:where(.svelte-1k0p008):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-1k0p008:has(input:where(.svelte-1k0p008):disabled) .mc-quantity-selector__button:where(.svelte-1k0p008):disabled {color:var(--forms-color-icon-disabled, #737373);}.mc-quantity-selector.svelte-1k0p008:has(input:where(.svelte-1k0p008):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-1k0p008 {--inset-x: 2rem;height:2rem;}.mc-quantity-selector--s.svelte-1k0p008 .mc-quantity-selector__button:where(.svelte-1k0p008) {height:1.5rem;width:1.5rem;}.mc-quantity-selector--s.svelte-1k0p008 .mc-quantity-selector__icon:where(.svelte-1k0p008) {height:1.25rem;width:1.25rem;}.mc-quantity-selector.svelte-1k0p008 :where(.svelte-1k0p008) {box-sizing:border-box;}`};function se(m,e){E(e,!0),U(m,ae);let s=n(e,"id",7,void 0),r=n(e,"quantity",15,1),i=n(e,"min",7,1),c=n(e,"max",7,100),b=n(e,"small",7,!1),o=n(e,"decrementlabel",7,"Decrement"),a=n(e,"inputarialabel",7,"Quantity Selector"),x=n(e,"incrementlabel",7,"Increment"),h=n(e,"disabled",7,!1),w=n(e,"name",7,"quantity-selector-input"),_=n(e,"step",7,1),q=n(e,"increment",7),z=n(e,"decrement",7),N=n(e,"inputqty",7);var y=le();let F;var u=v(y);Y(u),u.__input=[te,r,c,i,N];var p=k(u,2);p.__click=[ne,r,_,c,q];var B=v(p),J=v(B);C(J,{}),f(B);var H=k(B,2),O=v(H,!0);f(H),f(p);var g=k(p,2);g.__click=[re,r,_,i,z];var D=v(g),P=v(D);W(P,{}),f(D);var A=k(D,2),R=v(A,!0);return f(A),f(g),f(y),I(t=>{F=j(y,1,"mc-quantity-selector svelte-1k0p008",null,F,t),d(u,"id",s()),d(u,"name",w()),d(u,"aria-label",a()),d(u,"aria-valuemin",i()),d(u,"aria-valuemax",c()),d(u,"aria-valuenow",r()),u.disabled=h(),d(p,"aria-controls",s()),p.disabled=r()===c()||h(),G(O,o()),d(g,"aria-controls",s()),g.disabled=r()===i()||h(),G(R,x())},[()=>({"mc-quantity-selector--s":b()})]),Z(u,r),M(m,y),Q({get id(){return s()},set id(t=void 0){s(t),l()},get quantity(){return r()},set quantity(t=1){r(t),l()},get min(){return i()},set min(t=1){i(t),l()},get max(){return c()},set max(t=100){c(t),l()},get small(){return b()},set small(t=!1){b(t),l()},get decrementlabel(){return o()},set decrementlabel(t="Decrement"){o(t),l()},get inputarialabel(){return a()},set inputarialabel(t="Quantity Selector"){a(t),l()},get incrementlabel(){return x()},set incrementlabel(t="Increment"){x(t),l()},get disabled(){return h()},set disabled(t=!1){h(t),l()},get name(){return w()},set name(t="quantity-selector-input"){w(t),l()},get step(){return _()},set step(t=1){_(t),l()},get increment(){return q()},set increment(t){q(t),l()},get decrement(){return z()},set decrement(t){z(t),l()},get inputqty(){return N()},set inputqty(t){N(t),l()}})}T(["input","click"]);customElements.define("m-quantityselector",S(se,{id:{},quantity:{},min:{},max:{},small:{},decrementlabel:{},inputarialabel:{},incrementlabel:{},disabled:{},name:{},step:{},increment:{},decrement:{},inputqty:{}},[],[],!0));
+  /* For Gecko rendering engine */appearance:textfield;}.mc-quantity-selector__control[type=number].svelte-1k0p008::-webkit-inner-spin-button, .mc-quantity-selector__control[type=number].svelte-1k0p008::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-quantity-selector__control.svelte-1k0p008::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-quantity-selector__button.svelte-1k0p008 {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-1k0p008:disabled {color:var(--quantity-selector-color-button-text-disabled, #d9d9d9);cursor:not-allowed;}.mc-quantity-selector__button.svelte-1k0p008:hover:not(:disabled) {background-color:var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));}.mc-quantity-selector__button--decrease.svelte-1k0p008 {order:-1;}.mc-quantity-selector__icon.svelte-1k0p008 {height:1.5rem;width:1.5rem;fill:currentcolor;}.mc-quantity-selector__label.svelte-1k0p008 {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-1k0p008::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-1k0p008: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-1k0p008:has(input:where(.svelte-1k0p008):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-1k0p008:has(input:where(.svelte-1k0p008):disabled) .mc-quantity-selector__button:where(.svelte-1k0p008):disabled {color:var(--forms-color-icon-disabled, #737373);}.mc-quantity-selector.svelte-1k0p008:has(input:where(.svelte-1k0p008):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-1k0p008 {--inset-x: 2rem;height:2rem;}.mc-quantity-selector--s.svelte-1k0p008 .mc-quantity-selector__button:where(.svelte-1k0p008) {height:1.5rem;width:1.5rem;}.mc-quantity-selector--s.svelte-1k0p008 .mc-quantity-selector__icon:where(.svelte-1k0p008) {height:1.25rem;width:1.25rem;}.mc-quantity-selector.is-invalid.svelte-1k0p008 {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-1k0p008: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-1k0p008 :where(.svelte-1k0p008) {box-sizing:border-box;}`};function ve(v,e){H(e,!0),te(v,me);let a=r(e,"id",7,void 0),i=r(e,"quantity",15,1),o=r(e,"min",7,1),s=r(e,"max",7,100),m=r(e,"size",7,"m"),c=r(e,"decrementlabel",7,"Decrement"),l=r(e,"inputarialabel",7,"Quantity Selector"),w=r(e,"incrementlabel",7,"Increment"),h=r(e,"disabled",7,!1),y=r(e,"isinvalid",7,!1),z=r(e,"required",7,!1),N=r(e,"name",7,"quantity-selector-input"),_=r(e,"step",7,1),B=r(e,"increment",7),D=r(e,"decrement",7),S=r(e,"inputqty",7),j=r(e,"oninput",7),E=r(e,"onblur",7);function U(t,x){const Q=["mc-quantity-selector"];return t&&Q.push("is-invalid"),x==="s"&&Q.push("mc-quantity-selector--s"),Q.join(" ")}var k=ue(),d=b(k);ie(d),d.__input=[oe,i,s,o,S,j];var p=q(d,2);p.__click=[de,i,_,s,B];var I=b(p),X=b(I);T(X,{}),f(I);var L=q(I,2),Y=b(L,!0);f(L),f(p);var g=q(p,2);g.__click=[ce,i,_,o,D];var M=b(g),Z=b(M);R(Z,{}),f(M);var V=q(M,2),$=b(V,!0);return f(V),f(g),f(k),A(t=>{K(k,1,t,"svelte-1k0p008"),u(d,"id",a()),u(d,"name",N()),u(d,"aria-label",l()),u(d,"aria-valuemin",o()),u(d,"aria-valuemax",s()),u(d,"aria-valuenow",i()),u(d,"aria-invalid",y()),d.disabled=h(),d.required=z(),u(p,"aria-controls",a()),p.disabled=i()===s()||h(),W(Y,c()),u(g,"aria-controls",a()),g.disabled=i()===o()||h(),W($,w())},[()=>U(y(),m())]),ne("blur",d,function(...t){var x;(x=E())==null||x.apply(this,t)}),le(d,i),C(v,k),G({get id(){return a()},set id(t=void 0){a(t),n()},get quantity(){return i()},set quantity(t=1){i(t),n()},get min(){return o()},set min(t=1){o(t),n()},get max(){return s()},set max(t=100){s(t),n()},get size(){return m()},set size(t="m"){m(t),n()},get decrementlabel(){return c()},set decrementlabel(t="Decrement"){c(t),n()},get inputarialabel(){return l()},set inputarialabel(t="Quantity Selector"){l(t),n()},get incrementlabel(){return w()},set incrementlabel(t="Increment"){w(t),n()},get disabled(){return h()},set disabled(t=!1){h(t),n()},get isinvalid(){return y()},set isinvalid(t=!1){y(t),n()},get required(){return z()},set required(t=!1){z(t),n()},get name(){return N()},set name(t="quantity-selector-input"){N(t),n()},get step(){return _()},set step(t=1){_(t),n()},get increment(){return B()},set increment(t){B(t),n()},get decrement(){return D()},set decrement(t){D(t),n()},get inputqty(){return S()},set inputqty(t){S(t),n()},get oninput(){return j()},set oninput(t){j(t),n()},get onblur(){return E()},set onblur(t){E(t),n()}})}ee(["input","click"]);customElements.define("m-quantityselector",F(ve,{id:{},quantity:{},min:{},max:{},size:{},decrementlabel:{},inputarialabel:{},incrementlabel:{},disabled:{},isinvalid:{},required:{},name:{},step:{},increment:{},decrement:{},inputqty:{},oninput:{},onblur:{}},[],[],!0));
 //# 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  interface Props {\n    id?: string | undefined;\n    quantity?: number;\n    min?: number;\n    max?: number;\n    small?: boolean;\n    decrementlabel?: string;\n    inputarialabel?: string;\n    incrementlabel?: string;\n    disabled?: boolean;\n    name?: string;\n    step?: number;\n    [key: string]: any;\n  }\n\n  let {\n    id = undefined,\n    quantity = $bindable(1),\n    min = 1,\n    max = 100,\n    small = false,\n    decrementlabel = 'Decrement',\n    inputarialabel = 'Quantity Selector',\n    incrementlabel = 'Increment',\n    disabled = false,\n    name = 'quantity-selector-input',\n    step = 1,\n    increment,\n    decrement,\n    inputqty,\n  }: Props = $props();\n\n  function handleValue(): void {\n    if (quantity > max) {\n      quantity = max;\n    }\n    if (quantity < min) {\n      quantity = min;\n    }\n    inputqty(quantity);\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</script>\n\n<div class=\"mc-quantity-selector\" class:mc-quantity-selector--s={small}>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value={quantity}\n    oninput={handleValue}\n    class=\"mc-quantity-selector__control\"\n    aria-label={inputarialabel}\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={quantity}\n    spellcheck=\"false\"\n    {disabled}\n  />\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n    tabindex=\"-1\"\n    onclick={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","_","quantity","max","min","inputqty","handleDecrement","__1","step","decrement","handleIncrement","__2","increment","small","decrementlabel","inputarialabel","incrementlabel","disabled","name","$.prop","$$props"],"mappings":"kfAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,mCAGAJ,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,8FCkCW,SAAAE,GAAoBC,EAAAC,EAAAC,EAAAC,EAAAC,EAAA,CACvBH,EAAQ,EAAGC,KACbD,EAAWC,EAAG,CAAA,EAEZD,EAAQ,EAAGE,KACbF,EAAWE,EAAG,CAAA,EAEhBC,EAAQ,EAACH,GAAQ,CACnB,CAES,SAAAI,GAAwBC,EAAAL,EAAAM,EAAAJ,EAAAK,EAAA,CAC3BP,IAAW,OAAOM,EAAI,CAAA,EAAIJ,EAAG,GAC/BF,EAAWA,EAAW,EAAA,OAAOM,EAAI,CAAA,CAAA,EAEnCC,EAAS,EAACP,GAAQ,CACpB,CAES,SAAAQ,GAAwBC,EAAAT,EAAAM,EAAAL,EAAAS,EAAA,CAC3BV,IAAW,OAAOM,EAAI,CAAA,EAAIL,EAAG,GAC/BD,EAAWA,EAAW,EAAA,OAAOM,EAAI,CAAA,CAAA,EAEnCI,EAAS,EAACV,GAAQ,CACpB;;;;s8FA/DF,iBAyBI,IAAAP,aAAK,MAAS,EACdO,oBAAqB,CAAC,EACtBE,cAAM,CAAC,EACPD,cAAM,GAAG,EACTU,gBAAQ,EAAK,EACbC,yBAAiB,WAAW,EAC5BC,yBAAiB,mBAAmB,EACpCC,yBAAiB,WAAW,EAC5BC,mBAAW,EAAK,EAChBC,eAAO,yBAAyB,EAChCV,eAAO,CAAC,EACRI,EAASO,EAAAC,EAAA,YAAA,CAAA,EACTX,EAASU,EAAAC,EAAA,YAAA,CAAA,EACTf,EAAQc,EAAAC,EAAA,WAAA,CAAA,8CAkCCpB,GAAWE,EAAAC,EAAAC,EAAAC,CAAA,0BAcXK,GAAeR,EAAAM,EAAAL,EAAAS,CAAA,0FAafN,GAAeJ,EAAAM,EAAAJ,EAAAK,CAAA,2LAzBZM,GAAc,sBACXX,GAAG,sBACHD,GAAG,sBACHD,GAAQ,qCAMRP,GAAE,aAIPO,EAAQ,IAAKC,EAAG,GAAIc,EAAQ,MAKKH,GAAc,sBAI1CnB,GAAE,aAIPO,EAAQ,IAAKE,EAAG,GAAIa,EAAQ,MAKKD,GAAc,oCAvCIH,EAAK,GAAA,OAKtDX,CAAQ,0CA9Cf,OAAS,qDACO,EAAC,2CAChB,EAAC,2CACD,IAAG,+CACD,GAAK,iEACI,YAAW,iEACX,oBAAmB,iEACnB,YAAW,qDACjB,GAAK,6CACT,0BAAyB,6CACzB,EAAC,+KA6BZ","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  }}\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;;;;i2GA3EF,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,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,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]}

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

@@ -0,0 +1,16 @@
+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;
+//# sourceMappingURL=QuantitySelector.stories.d.ts.map

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

@@ -0,0 +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"}