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

package/dist/components/passwordinput/README.md

@@ -0,0 +1,19 @@
+# `m-password-input`
+
+A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the password input element, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the password input element, typically used for form submission. | `string` |   |
+| `value` | The current value of the password input field. | `string` `number` |   |
+| `placeholder` | A placeholder text to show in the password input when it is empty. | `string` |   |
+| `isinvalid` | If `true`, applies an invalid state to the password input. | `boolean` |   |
+| `disabled` | If `true`, disables the password input, making it non-interactive. | `boolean` |   |
+| `readonly` | If `true`, the password input is read-only (cannot be edited). | `boolean` |   |
+| `isclearable` | If `true`, a clear button will appear when the password input has a value. | `boolean` |   |
+| `clearlabel` | The label text for the clear button. | `string` | `Clear content` |
+| `buttonlabel` | Labels of the button displayed when showing or hiding the password. | `{ show: string; hide: string; }` | `{ show: 'Show', hide: 'Hide' }` |
+

package/dist/components/pincode/Pincode.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Pincode.js","sources":["../../../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 { 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":["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","fn","args","event","dispatch","createEventDispatcher","id","$.prop","$$props","length","name","value","isInvalid","disabled","readonly","attrsAndEvents","$.rest_props","L","$.derived","otp","$.get","inputs","$.state","$.proxy","$.user_effect","incoming","$.set","_","focusInput","i","emit","joined","onInput","index","digit","onKeyDown","onPaste","pasted","_a","$.attribute_effect","div","$0","$.index","$$anchor","$$value","$.set_attribute","input","$.set_value","$.event","e"],"mappings":"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","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Pincode.js","sources":["../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-pincode' }} />\n\n<script lang=\"ts\">\n  /**\n   * 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.\n   *\n   * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pincode element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The number of input displayed in the pincode element.\n     */\n    length?: 4 | 5 | 6;\n    /**\n     * The name attribute for the pincode element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the pincode field.\n     */\n    value?: string | number;\n    /**\n     * If `true`, applies an invalid state to the pincode.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the pincode, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the pincode is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let {\n    id,\n    length = 6,\n    name,\n    value,\n    isinvalid,\n    disabled,\n    readonly,\n  }: Props = $props();\n\n  const L = $derived(\n    typeof length === 'string' ? parseInt(length, 10) || 6 : length,\n  );\n\n  let otp = $state<string[]>(Array(L).fill(''));\n  let inputs = $state<HTMLInputElement[]>([]);\n  let element: HTMLElement;\n\n  $effect(() => {\n    const incoming = String(value ?? '');\n    otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');\n  });\n\n  const focusInput = (i: number) => {\n    queueMicrotask(() => inputs?.[i]?.focus());\n  };\n\n  const emitInput = () => {\n    const joined = otp.join('');\n    const event = new CustomEvent('input', {\n      detail: { value: joined },\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  const 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    emitInput();\n    if (digit && index + 1 < L) focusInput(index + 1);\n  };\n\n  const 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      emitInput();\n      focusInput(index - 1);\n    }\n  };\n\n  const 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    emitInput();\n    focusInput(Math.min(pasted.length, L - 1));\n  };\n</script>\n\n<div class=\"mc-pincode-input\" onpaste={onPaste} bind:this={element}>\n  {#each Array(L) as _, i}\n    <input\n      id={`pincodeItem${i}`}\n      bind:this={inputs[i]}\n      class={['mc-pincode-input__control', isinvalid && 'is-invalid']}\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      oninput={(e) => onInput(e, i)}\n      onkeydown={(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":["id","$.prop","$$props","length","name","value","isinvalid","disabled","readonly","L","$.derived","otp","$.get","inputs","$.state","$.proxy","element","$.user_effect","incoming","$.set","_","i","focusInput","emitInput","joined","event","onInput","index","digit","onKeyDown","onPaste","pasted","_a","$.index","$$anchor","input","e","$$value","$.set_attribute","$.set_value","$.bind_this","div"],"mappings":"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"}

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

@@ -0,0 +1,99 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Pincode from './Pincode.svelte';
+describe('m-pincode component', () => {
+    const baseProps = {
+        id: 'test-pincode',
+        length: 4,
+    };
+    it('renders correct number of inputs', () => {
+        const { container } = render(Pincode, { props: baseProps });
+        const inputs = container.querySelectorAll('input');
+        expect(inputs.length).toBe(4);
+    });
+    it('displays initial value correctly', () => {
+        const value = '1234';
+        const { container } = render(Pincode, { props: { ...baseProps, value } });
+        const inputs = container.querySelectorAll('input');
+        inputs.forEach((input, i) => {
+            expect(input.value).toBe(value[i]);
+        });
+    });
+    it('focuses next input on input', async () => {
+        const { container } = render(Pincode, { props: baseProps });
+        const inputs = container.querySelectorAll('input');
+        await fireEvent.input(inputs[0], { target: { value: '5' } });
+        expect(document.activeElement).toBe(inputs[1]);
+    });
+    it('applies disabled and readonly props', () => {
+        const { container } = render(Pincode, {
+            props: { ...baseProps, disabled: true, readonly: true },
+        });
+        const inputs = container.querySelectorAll('input');
+        inputs.forEach((input) => {
+            expect(input).toBeDisabled();
+            expect(input).toHaveAttribute('readonly');
+        });
+    });
+    it('applies invalid class when isinvalid is true', () => {
+        const { container } = render(Pincode, {
+            props: { ...baseProps, isinvalid: true },
+        });
+        const inputs = container.querySelectorAll('input');
+        inputs.forEach((input) => {
+            expect(input.classList.contains('is-invalid')).toBe(true);
+        });
+    });
+    it('emits input event with concatenated value on input', async () => {
+        const { container } = render(Pincode, { props: baseProps });
+        const root = container.querySelector('.mc-pincode-input');
+        const inputHandler = vi.fn();
+        root.addEventListener('input', inputHandler);
+        const inputs = container.querySelectorAll('input');
+        await fireEvent.input(inputs[0], { target: { value: '1' } });
+        await fireEvent.input(inputs[1], { target: { value: '2' } });
+        expect(inputHandler).toHaveBeenCalled();
+        const lastEvent = inputHandler.mock.calls[inputHandler.mock.calls.length - 1][0];
+        expect(lastEvent.detail.value).toBe('12');
+    });
+    it('handles backspace key to clear previous input and focus', async () => {
+        const { container } = render(Pincode, { props: baseProps });
+        const inputs = container.querySelectorAll('input');
+        await fireEvent.input(inputs[0], { target: { value: '1' } });
+        await fireEvent.input(inputs[1], { target: { value: '' } });
+        await fireEvent.keyDown(inputs[1], { key: 'Backspace' });
+        expect(inputs[0].value).toBe('');
+        expect(document.activeElement).toBe(inputs[0]);
+    });
+    it('handles arrow navigation keys', async () => {
+        const { container } = render(Pincode, { props: baseProps });
+        const inputs = container.querySelectorAll('input');
+        inputs[1].focus();
+        await fireEvent.keyDown(inputs[1], { key: 'ArrowLeft' });
+        expect(document.activeElement).toBe(inputs[0]);
+        inputs[0].focus();
+        await fireEvent.keyDown(inputs[0], { key: 'ArrowRight' });
+        expect(document.activeElement).toBe(inputs[1]);
+    });
+    it('handles paste event correctly', async () => {
+        const { container } = render(Pincode, { props: baseProps });
+        const root = container.querySelector('.mc-pincode-input');
+        const inputHandler = vi.fn();
+        root.addEventListener('input', inputHandler);
+        const pasteEvent = new Event('paste', {
+            bubbles: true,
+            cancelable: true,
+        });
+        Object.defineProperty(pasteEvent, 'clipboardData', {
+            value: {
+                getData: () => '9876',
+            },
+        });
+        await root.dispatchEvent(pasteEvent);
+        expect(inputHandler).toHaveBeenCalled();
+        const inputs = container.querySelectorAll('input');
+        inputs.forEach((input, i) => {
+            expect(input.value).toBe('9876'[i]);
+        });
+    });
+});

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

@@ -1,14 +1,10 @@
-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;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const WithValue: Story;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
 //# sourceMappingURL=Pincode.stories.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Pincode.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA6CX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

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

@@ -1,140 +1,75 @@
-import { userEvent, expect, within } from 'storybook/test';
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-/**
- * The `MPincode` component is the **Svelte / WebComponent** implementation
- * of the Mozaic Pincode Input.
- */
-export default {
+const meta = {
     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,
-    },
+    component: 'm-pincode',
+    tags: ['v2'],
     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' },
+            control: {
+                type: 'number',
+                min: 4,
+                max: 6,
+            },
         },
         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',
+            control: false,
         },
     },
+    args: {
+        id: 'pincodeId',
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-pincode
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        value=${ifDefined(args.value)}
+        length=${ifDefined(args.length)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        readonly=${ifDefined(args.readonly)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-pincode>
+    `;
+    },
 };
-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 default meta;
+export const WithValue = {
+    args: {
+        id: 'valueId',
+        value: '123098',
+    },
 };
-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 Default = {};
+export const Disabled = {
+    args: {
+        id: 'disableId',
+        disabled: 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 ReadOnly = {
+    args: {
+        id: 'readonlyId',
+        value: '123098',
+        readonly: 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);
+export const Invalid = {
+    args: {
+        id: 'invalidId',
+        isinvalid: true,
+    },
 };