@mozaic-ds/web-components 1.8.0 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/builtinmenu/BuiltInMenu.js +2 -2
- package/dist/components/builtinmenu/BuiltInMenu.js.map +1 -1
- package/dist/components/builtinmenu/BuiltInMenu.svelte +1 -5
- package/dist/components/builtinmenu/BuiltInMenu.svelte.d.ts +1 -5
- package/dist/components/builtinmenu/BuiltInMenu.svelte.d.ts.map +1 -1
- package/dist/components/builtinmenu/README.md +0 -1
- package/dist/components/optionlistbox/OptionListbox.js +2 -21
- package/dist/components/optionlistbox/OptionListbox.js.map +1 -1
- package/dist/components/optionlistbox/OptionListbox.svelte +19 -14
- package/dist/components/optionlistbox/OptionListbox.svelte.d.ts.map +1 -1
- package/dist/components/pincode/Pincode.js +2 -2
- package/dist/components/pincode/Pincode.js.map +1 -1
- package/dist/components/pincode/Pincode.spec.js +2 -4
- package/dist/components/pincode/Pincode.svelte +12 -2
- package/dist/components/pincode/Pincode.svelte.d.ts.map +1 -1
- package/dist/components/sidebar/floating-item.spec.js +1 -1
- package/package.json +3 -4
|
@@ -19,7 +19,6 @@
|
|
|
19
19
|
* @event close {CustomEvent<void>} - Emits when the listbox should close.
|
|
20
20
|
*/
|
|
21
21
|
import { Check20, CheckCircleFilled24, Less20, Search24 } from '@mozaic-ds/icons-svelte';
|
|
22
|
-
import { debounce } from 'lodash';
|
|
23
22
|
import Button from '../button/Button.svelte';
|
|
24
23
|
import Textinput from '../textinput/Textinput.svelte';
|
|
25
24
|
import { SvelteMap } from 'svelte/reactivity';
|
|
@@ -115,24 +114,32 @@
|
|
|
115
114
|
let textInput: HTMLElement | null = $state(null);
|
|
116
115
|
|
|
117
116
|
let searchText = $state('');
|
|
118
|
-
|
|
119
117
|
let filteredResults = $state<ListboxOption[]>(options);
|
|
120
118
|
|
|
119
|
+
let searchDebounce: ReturnType<typeof setTimeout> | undefined;
|
|
120
|
+
|
|
121
121
|
const activeDescendantId = $derived.by(() => {
|
|
122
122
|
return activeindex >= 0 ? `option-${id}-${activeindex}` : undefined;
|
|
123
123
|
});
|
|
124
124
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
if (!search) {
|
|
128
|
-
filteredResults = options;
|
|
129
|
-
return;
|
|
130
|
-
}
|
|
125
|
+
function updateFilteredResults() {
|
|
126
|
+
clearTimeout(searchDebounce);
|
|
131
127
|
|
|
132
|
-
|
|
128
|
+
searchDebounce = setTimeout(() => {
|
|
129
|
+
const search = searchText.toLowerCase().trim();
|
|
133
130
|
|
|
134
|
-
|
|
135
|
-
|
|
131
|
+
if (!search) {
|
|
132
|
+
filteredResults = options;
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
filteredResults = options.filter((option) =>
|
|
137
|
+
option.label.toLowerCase().includes(search)
|
|
138
|
+
);
|
|
139
|
+
|
|
140
|
+
activeindex = filteredResults.length ? 0 : -1;
|
|
141
|
+
}, 200);
|
|
142
|
+
}
|
|
136
143
|
|
|
137
144
|
const sectionMap = $derived.by(() => {
|
|
138
145
|
const map = new SvelteMap<string, ListboxOption[]>();
|
|
@@ -375,9 +382,7 @@
|
|
|
375
382
|
: isOptionSelected(item),
|
|
376
383
|
}}
|
|
377
384
|
{...item.type === 'section' && !checkablesections
|
|
378
|
-
? {
|
|
379
|
-
role: 'presentation',
|
|
380
|
-
}
|
|
385
|
+
? { role: 'presentation' }
|
|
381
386
|
: {
|
|
382
387
|
role: 'option',
|
|
383
388
|
['aria-disabled']: item.disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionListbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/optionlistbox/OptionListbox.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"OptionListbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/optionlistbox/OptionListbox.svelte.ts"],"names":[],"mappings":"AAeE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACpD;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAyVH,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;AAUD,QAAA,MAAM,aAAa;;;;;yBA1QY,aAAa;;2BAsGX,aAAa;gDAoK0D,CAAC;AACvF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{o as K,c as O,e as R,a as F,p as
|
|
1
|
+
import{o as K,c as O,e as R,a as F,p as l,v as x,g as D,B as G,q as z,i as o,b as A,d as H,w as J,f as j,l as N,m as d,t as Q,u as B,r as T}from"../../custom-element.js";import{e as U}from"../../each.js";import{a as V,r as W,s as I,e as X}from"../../attributes.js";import{b as E}from"../../this.js";var Y=j('<input class="mc-pincode-input__control svelte-h63szf" type="text" inputmode="numeric" maxlength="1" pattern="\\d*" autocomplete="one-time-code"/>'),Z=j("<div></div>");const $={hash:"svelte-h63szf",code:`/**
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
3
|
*/.mc-pincode-input.svelte-h63szf {display:inline-flex;column-gap:0.5rem;}
|
|
4
4
|
@media screen and (width <= 1024px) {.mc-pincode-input.svelte-h63szf {flex-wrap:wrap;row-gap:0.75rem;}
|
|
5
|
-
}.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-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 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-width-s, 0.0625rem) 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-width-s, 0.0625rem) 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-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}`};function
|
|
5
|
+
}.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-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 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-width-s, 0.0625rem) 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-width-s, 0.0625rem) 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-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}`};function ee(k,s){R(s,!0),F(k,$);let p=l(s,"id",7),c=l(s,"length",7,6),h=l(s,"name",7),b=l(s,"value",15),g=l(s,"isinvalid",7),m=l(s,"disabled",7),v=l(s,"readonly",7),q=N(s,["$$slots","$$events","$$legacy","$$host","id","length","name","value","isinvalid","disabled","readonly"]);const n=J(()=>typeof c()=="string"?parseInt(c(),10)||6:c());let i=x(D([])),_=x(D([])),y;G(()=>{const e=String(b()??"");z(i,Array(o(n)).fill(""),!0),z(i,Array.from({length:o(n)},(t,r)=>e[r]??""),!0)});const u=e=>{queueMicrotask(()=>o(_)?.[e]?.focus())},w=()=>{const e=o(i).join(""),t=new CustomEvent("input",{detail:{value:e},bubbles:!0,composed:!0});y.dispatchEvent(t)},L=(e,t)=>{const a=e.target.value.replace(/\D/g,"").slice(0,1);o(i)[t]=a,w(),a&&t+1<o(n)&&u(t+1)},M=(e,t)=>{e.key==="ArrowLeft"&&t>0?(e.preventDefault(),u(t-1)):e.key==="ArrowRight"&&t<o(n)-1?(e.preventDefault(),u(t+1)):e.key==="Backspace"&&o(i)[t]===""&&t>0&&(o(i)[t-1]="",w(),u(t-1))},P=e=>{e.preventDefault();const t=(e.clipboardData?.getData("text")??"").replace(/\D/g,"").slice(0,o(n));z(i,Array.from({length:o(n)},(r,a)=>t[a]??""),!0),w(),u(Math.min(t.length,o(n)-1))};var S={get id(){return p()},set id(e){p(e),d()},get length(){return c()},set length(e=6){c(e),d()},get name(){return h()},set name(e){h(e),d()},get value(){return b()},set value(e){b(e),d()},get isinvalid(){return g()},set isinvalid(e){g(e),d()},get disabled(){return m()},set disabled(e){m(e),d()},get readonly(){return v()},set readonly(e){v(e),d()}},f=Z();return V(f,()=>({class:{"mc-pincode-input":!0,"mc-pincode-input__disabled":m(),"mc-pincode-input__readonly":v(),"is-invalid":g()},onpaste:P,...q}),void 0,void 0,void 0,"svelte-h63szf"),U(f,20,()=>[...Array(o(n)).keys()],e=>e,(e,t)=>{var r=Y();W(r),E(r,(a,C)=>o(_)[C]=a,a=>o(_)?.[a],()=>[t]),Q(()=>{I(r,"id",`pincodeItem${t}`),I(r,"name",h()??`pincode-${p()}`),r.disabled=m(),r.readOnly=v(),X(r,o(i)[t])}),B("input",r,a=>L(a,t)),B("keydown",r,a=>M(a,t)),A(e,r)}),T(f),E(f,e=>y=e,()=>y),A(k,f),H(S)}K(["input","keydown"]);customElements.define("m-pincode",O(ee,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},id:{},length:{},name:{},value:{}},[],[],{mode:"open"}));
|
|
6
6
|
//# sourceMappingURL=Pincode.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pincode.js","sources":["../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-pincode',\n props: {\n isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n },\n }}\n/>\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 [key: string]: any;\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 { id, length = 6, name, value = $bindable(), isinvalid, disabled, readonly, ...attrs }: Props = $props();\n\n const L = $derived(typeof length === 'string' ? parseInt(length, 10) || 6 : length);\n\n let otp = $state<string[]>([]);\n let inputs = $state<HTMLInputElement[]>([]);\n let element: HTMLElement;\n\n $effect(() => {\n const incoming = String(value ?? '');\n otp = Array(L).fill('');\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') ?? '').replace(/\\D/g, '').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
|
|
1
|
+
{"version":3,"file":"Pincode.js","sources":["../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-pincode',\n props: {\n isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n },\n }}\n/>\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 [key: string]: any;\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 { id, length = 6, name, value = $bindable(), isinvalid, disabled, readonly, ...attrs }: Props = $props();\n\n const L = $derived(typeof length === 'string' ? parseInt(length, 10) || 6 : length);\n\n let otp = $state<string[]>([]);\n let inputs = $state<HTMLInputElement[]>([]);\n let element: HTMLElement;\n\n $effect(() => {\n const incoming = String(value ?? '');\n otp = Array(L).fill('');\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') ?? '').replace(/\\D/g, '').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\n class={{\n 'mc-pincode-input': true,\n 'mc-pincode-input__disabled': disabled,\n 'mc-pincode-input__readonly': readonly,\n 'is-invalid': isinvalid,\n }}\n onpaste={onPaste}\n bind:this={element}\n {...attrs}\n>\n {#each [...Array(L).keys()] as i (i)}\n <input\n id={`pincodeItem${i}`}\n bind:this={inputs[i]}\n class=\"mc-pincode-input__control\"\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","attrs","$.rest_props","L","$.derived","otp","$.state","$.proxy","inputs","element","$.user_effect","incoming","$.set","$.get","_","i","focusInput","emitInput","joined","event","onInput","index","digit","onKeyDown","onPaste","pasted","div","root","$$anchor","input","root_1","$.remove_input_defaults","$.bind_this","$$value","$.set_attribute","$.delegated","e","$.append","$.reset"],"mappings":"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"}
|
|
@@ -39,10 +39,8 @@ describe('m-pincode component', () => {
|
|
|
39
39
|
const { container } = render(Pincode, {
|
|
40
40
|
props: { ...baseProps, isinvalid: true },
|
|
41
41
|
});
|
|
42
|
-
const
|
|
43
|
-
|
|
44
|
-
expect(input.classList.contains('is-invalid')).toBe(true);
|
|
45
|
-
});
|
|
42
|
+
const wrapper = container.querySelector('.mc-pincode-input');
|
|
43
|
+
expect(wrapper.classList.contains('is-invalid')).toBe(true);
|
|
46
44
|
});
|
|
47
45
|
it('emits input event with concatenated value on input', async () => {
|
|
48
46
|
const { container } = render(Pincode, { props: baseProps });
|
|
@@ -106,12 +106,22 @@
|
|
|
106
106
|
};
|
|
107
107
|
</script>
|
|
108
108
|
|
|
109
|
-
<div
|
|
109
|
+
<div
|
|
110
|
+
class={{
|
|
111
|
+
'mc-pincode-input': true,
|
|
112
|
+
'mc-pincode-input__disabled': disabled,
|
|
113
|
+
'mc-pincode-input__readonly': readonly,
|
|
114
|
+
'is-invalid': isinvalid,
|
|
115
|
+
}}
|
|
116
|
+
onpaste={onPaste}
|
|
117
|
+
bind:this={element}
|
|
118
|
+
{...attrs}
|
|
119
|
+
>
|
|
110
120
|
{#each [...Array(L).keys()] as i (i)}
|
|
111
121
|
<input
|
|
112
122
|
id={`pincodeItem${i}`}
|
|
113
123
|
bind:this={inputs[i]}
|
|
114
|
-
class=
|
|
124
|
+
class="mc-pincode-input__control"
|
|
115
125
|
type="text"
|
|
116
126
|
inputmode="numeric"
|
|
117
127
|
maxlength="1"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pincode.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"Pincode.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuFH,QAAA,MAAM,OAAO,gDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { beforeEach, afterEach, describe, it, expect, vi, afterAll, beforeAll } from 'vitest';
|
|
2
|
-
import { useFloatingItem } from './floating-item.svelte
|
|
2
|
+
import { useFloatingItem } from './floating-item.svelte';
|
|
3
3
|
beforeAll(() => {
|
|
4
4
|
vi.stubGlobal('matchMedia', (query) => ({
|
|
5
5
|
matches: query.includes('max-width: 780px'),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mozaic-ds/web-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.9.0",
|
|
4
4
|
"description": "Web component Mozaic DS implementation",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"check": "svelte-check --tsconfig ./tsconfig.json --compiler-warnings 'css_unused_selector:ignore,custom_element_props_identifier:ignore'",
|
|
34
34
|
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
|
|
35
35
|
"format": "prettier --write .",
|
|
36
|
-
"lint": "eslint
|
|
36
|
+
"lint": "eslint ./src --fix",
|
|
37
37
|
"test:unit": "vitest",
|
|
38
38
|
"test": "npm run test:unit -- --run",
|
|
39
39
|
"clean": "rm -rf dist/",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
57
|
"@mozaic-ds/icons-svelte": "^2.3.1",
|
|
58
|
-
"@mozaic-ds/styles": "^2.
|
|
58
|
+
"@mozaic-ds/styles": "^2.14.0",
|
|
59
59
|
"@mozaic-ds/web-fonts": "1.65.0",
|
|
60
60
|
"libphonenumber-js": "^1.12.31",
|
|
61
61
|
"svelte": "^5.38.0"
|
|
@@ -76,7 +76,6 @@
|
|
|
76
76
|
"@testing-library/jest-dom": "^6.9.1",
|
|
77
77
|
"@testing-library/svelte": "^5.2.8",
|
|
78
78
|
"@tsconfig/svelte": "^5.0.4",
|
|
79
|
-
"@types/lodash": "^4.17.23",
|
|
80
79
|
"@vitest/coverage-v8": "^4.0.7",
|
|
81
80
|
"eslint": "^10.0.3",
|
|
82
81
|
"eslint-config-prettier": "^10.1.8",
|