@maggioli-design-system/mds-input-otp 1.1.1 → 1.1.3

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.
@@ -13,16 +13,23 @@ export default {
13
13
  },
14
14
  },
15
15
  };
16
- const Template = (args) => h("mds-input-otp", Object.assign({}, args));
17
- export const Default = Template.bind({});
16
+ const Template = (args) => (h("mds-input-otp", Object.assign({}, args)));
17
+ export const Default = {
18
+ render: Template,
19
+ };
18
20
  const FormIntegrationTemplate = (args) => {
19
21
  return (h("div", { class: "grid gap-600" }, h("form", { class: "grid gap-400", id: "mds-icon-fi", name: "mds-icon-fi", onSubmit: (e) => {
20
22
  e.preventDefault();
21
23
  console.info('Submitted', e);
22
24
  const form = document.querySelector('form');
23
25
  const span = document.querySelector('span.input-value');
24
- span.innerText = form['mds-input-otp'].value !== '' ? form['mds-input-otp'].value : 'Empty';
25
- } }, h("mds-input-otp", Object.assign({}, args)), h("mds-button", { class: "w-min", type: "submit", onClick: (e) => { e.preventDefault(); }, disabled: args.autosubmit }, args.autosubmit ? 'autosubmit enabled' : 'Submit'), h("mds-text", { variant: "code" }, "Input value taken from form element: ", h("span", { class: "inline-flex input-value rounded text-tone-neutral-01 bg-tone-neutral-08 px-200 py-50" }, "Empty")))));
26
+ span.innerText =
27
+ form['mds-input-otp'].value !== ''
28
+ ? form['mds-input-otp'].value
29
+ : 'Empty';
30
+ } }, h("mds-input-otp", Object.assign({}, args)), h("mds-button", { class: "w-min", type: "submit", onClick: (e) => {
31
+ e.preventDefault();
32
+ }, disabled: args.autosubmit }, args.autosubmit ? 'autosubmit enabled' : 'Submit'), h("mds-text", { variant: "code" }, "Input value taken from form element:", ' ', h("span", { class: "inline-flex input-value rounded text-tone-neutral-01 bg-tone-neutral-08 px-200 py-50" }, "Empty")))));
26
33
  };
27
34
  const FormAutoSubmitTemplate = (args) => {
28
35
  const [isDisabled, setDisabled] = useState(true);
@@ -41,16 +48,25 @@ const FormAutoSubmitTemplate = (args) => {
41
48
  }, 2000);
42
49
  const form = document.querySelector('form');
43
50
  const span = document.querySelector('span.input-value');
44
- span.innerText = form['mds-input-otp'].value !== '' ? form['mds-input-otp'].value : 'Empty';
45
- } }, h("mds-input-otp", Object.assign({}, args, { class: "justify-center" })), h("mds-button", { disabled: isDisabled === true ? true : undefined, icon: isSubmitted ? 'mi/baseline/done' : '', variant: isSubmitted ? 'success' : 'primary', await: isAwaiting, size: "lg", type: "submit", onClick: (e) => { e.preventDefault(); } }, buttonLabel), h("mds-text", { variant: "code" }, "Input value taken from form element: ", h("span", { class: "inline-flex input-value rounded text-tone-neutral-01 bg-tone-neutral-08 px-200 py-50" }, "Empty")))));
51
+ span.innerText =
52
+ form['mds-input-otp'].value !== ''
53
+ ? form['mds-input-otp'].value
54
+ : 'Empty';
55
+ } }, h("mds-input-otp", Object.assign({}, args, { class: "justify-center" })), h("mds-button", { disabled: isDisabled === true ? true : undefined, icon: isSubmitted ? 'mi/baseline/done' : '', variant: isSubmitted ? 'success' : 'primary', await: isAwaiting, size: "lg", type: "submit", onClick: (e) => {
56
+ e.preventDefault();
57
+ } }, buttonLabel), h("mds-text", { variant: "code" }, "Input value taken from form element:", ' ', h("span", { class: "inline-flex input-value rounded text-tone-neutral-01 bg-tone-neutral-08 px-200 py-50" }, "Empty")))));
46
58
  };
47
- export const FormIntegration = FormIntegrationTemplate.bind({});
48
- FormIntegration.args = {
49
- name: 'mds-input-otp',
50
- autosubmit: false,
59
+ export const FormIntegration = {
60
+ render: FormIntegrationTemplate,
61
+ args: {
62
+ name: 'mds-input-otp',
63
+ autosubmit: false,
64
+ },
51
65
  };
52
- export const AutoSubmit = FormAutoSubmitTemplate.bind({});
53
- AutoSubmit.args = {
54
- name: 'mds-input-otp',
55
- autosubmit: true,
66
+ export const AutoSubmit = {
67
+ render: FormAutoSubmitTemplate,
68
+ args: {
69
+ name: 'mds-input-otp',
70
+ autosubmit: true,
71
+ },
56
72
  };
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-07-04T10:13:15",
2
+ "timestamp": "2026-01-16T14:40:46",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.27.2",
package/dist/stats.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-07-04T10:13:15",
2
+ "timestamp": "2026-01-16T14:40:47",
3
3
  "compiler": {
4
4
  "name": "node",
5
5
  "version": "22.15.0"
@@ -1,3 +1,4 @@
1
+ import { MdsInputOtpInterface } from '../mds-input-otp';
1
2
  declare const _default: {
2
3
  title: string;
3
4
  argTypes: {
@@ -16,6 +17,20 @@ declare const _default: {
16
17
  };
17
18
  };
18
19
  export default _default;
19
- export declare const Default: any;
20
- export declare const FormIntegration: any;
21
- export declare const AutoSubmit: any;
20
+ export declare const Default: {
21
+ render: (args: MdsInputOtpInterface) => any;
22
+ };
23
+ export declare const FormIntegration: {
24
+ render: (args: MdsInputOtpInterface) => any;
25
+ args: {
26
+ name: string;
27
+ autosubmit: boolean;
28
+ };
29
+ };
30
+ export declare const AutoSubmit: {
31
+ render: (args: MdsInputOtpInterface) => any;
32
+ args: {
33
+ name: string;
34
+ autosubmit: boolean;
35
+ };
36
+ };
@@ -1,4 +1,4 @@
1
- declare const iconsDictionary: string[];
1
+ declare const iconsDictionary: any;
2
2
  declare const mggIconsDictionary: string[];
3
3
  declare const svgIconsDictionary: string[];
4
4
  export { iconsDictionary, mggIconsDictionary, svgIconsDictionary, };
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-07-04T09:57:56",
2
+ "timestamp": "2026-01-16T12:28:24",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.27.2",
@@ -285,7 +285,7 @@
285
285
  "path": "src/type/variant.ts"
286
286
  },
287
287
  "src/components/mds-chip/meta/interface.ts::MdsChipEvent": {
288
- "declaration": "interface MdsChipEvent {\n event: Event\n element: HTMLMdsChipElement\n}",
288
+ "declaration": "interface MdsChipEvent {\n event: Event\n selected?: boolean\n element: HTMLMdsChipElement\n}",
289
289
  "docstring": "",
290
290
  "path": "src/components/mds-chip/meta/interface.ts"
291
291
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/mds-input-otp",
3
- "version": "1.1.1",
3
+ "version": "1.1.3",
4
4
  "description": "mds-input-otp is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -24,7 +24,7 @@
24
24
  "test": "stencil test --spec --e2e"
25
25
  },
26
26
  "dependencies": {
27
- "@maggioli-design-system/mds-input": "7.8.1",
27
+ "@maggioli-design-system/mds-input": "7.8.3",
28
28
  "@maggioli-design-system/styles": "15.11.0",
29
29
  "@stencil/core": "4.27.2"
30
30
  },
@@ -12,32 +12,56 @@ export default {
12
12
  },
13
13
  autosubmit: {
14
14
  type: { name: 'boolean' },
15
- description: 'Automatically submits the form when the OTP code is complete',
15
+ description:
16
+ 'Automatically submits the form when the OTP code is complete',
16
17
  },
17
18
  },
18
19
  }
19
20
 
20
- const Template = (args: MdsInputOtpInterface) =>
21
+ const Template = (args: MdsInputOtpInterface) => (
21
22
  <mds-input-otp {...args}></mds-input-otp>
23
+ )
22
24
 
23
- export const Default = Template.bind({})
25
+ export const Default = {
26
+ render: Template,
27
+ }
24
28
 
25
29
  const FormIntegrationTemplate = (args: MdsInputOtpInterface) => {
26
30
  return (
27
31
  <div class="grid gap-600">
28
- <form class="grid gap-400" id="mds-icon-fi" name="mds-icon-fi" onSubmit={(e: SubmitEvent) => {
29
- e.preventDefault()
30
- console.info('Submitted', e)
31
- const form = document.querySelector('form') as HTMLFormElement
32
- const span = document.querySelector('span.input-value') as HTMLSpanElement
33
- span.innerText = form['mds-input-otp'].value !== '' ? form['mds-input-otp'].value : 'Empty'
34
- }}>
32
+ <form
33
+ class="grid gap-400"
34
+ id="mds-icon-fi"
35
+ name="mds-icon-fi"
36
+ onSubmit={(e: SubmitEvent) => {
37
+ e.preventDefault()
38
+ console.info('Submitted', e)
39
+ const form = document.querySelector('form') as HTMLFormElement
40
+ const span = document.querySelector(
41
+ 'span.input-value',
42
+ ) as HTMLSpanElement
43
+ span.innerText =
44
+ form['mds-input-otp'].value !== ''
45
+ ? form['mds-input-otp'].value
46
+ : 'Empty'
47
+ }}
48
+ >
35
49
  <mds-input-otp {...args}></mds-input-otp>
36
- <mds-button class="w-min" type="submit" onClick={(e: MouseEvent) => { e.preventDefault() }} disabled={args.autosubmit}>
37
- {args.autosubmit ? 'autosubmit enabled' : 'Submit' }
50
+ <mds-button
51
+ class="w-min"
52
+ type="submit"
53
+ onClick={(e: MouseEvent) => {
54
+ e.preventDefault()
55
+ }}
56
+ disabled={args.autosubmit}
57
+ >
58
+ {args.autosubmit ? 'autosubmit enabled' : 'Submit'}
38
59
  </mds-button>
39
60
  <mds-text variant="code">
40
- Input value taken from form element: <span class="inline-flex input-value rounded text-tone-neutral-01 bg-tone-neutral-08 px-200 py-50">Empty</span>
61
+ Input value taken from form element:{' '}
62
+ <span class="inline-flex input-value rounded text-tone-neutral-01 bg-tone-neutral-08 px-200 py-50">
63
+ Empty
64
+ </span>
41
65
  </mds-text>
42
66
  </form>
43
67
  </div>
@@ -51,40 +75,69 @@ const FormAutoSubmitTemplate = (args: MdsInputOtpInterface) => {
51
75
  const [buttonLabel, setLabel] = useState('Submit OTP')
52
76
  return (
53
77
  <div class="grid gap-600">
54
- <form class="grid gap-600 max-w-[370px]" id="mds-icon-fi" name="mds-icon-fi" onSubmit={(e: SubmitEvent) => {
55
- e.preventDefault()
56
- setAwait(true)
57
- setLabel('Submitting...')
58
- setDisabled(false)
59
- setTimeout(() => {
60
- setSubmitted(true)
61
- setAwait(false)
62
- setLabel('Submitted successfully')
63
- }, 2000)
64
- const form = document.querySelector('form') as HTMLFormElement
65
- const span = document.querySelector('span.input-value') as HTMLSpanElement
66
- span.innerText = form['mds-input-otp'].value !== '' ? form['mds-input-otp'].value : 'Empty'
67
- }}>
78
+ <form
79
+ class="grid gap-600 max-w-[370px]"
80
+ id="mds-icon-fi"
81
+ name="mds-icon-fi"
82
+ onSubmit={(e: SubmitEvent) => {
83
+ e.preventDefault()
84
+ setAwait(true)
85
+ setLabel('Submitting...')
86
+ setDisabled(false)
87
+ setTimeout(() => {
88
+ setSubmitted(true)
89
+ setAwait(false)
90
+ setLabel('Submitted successfully')
91
+ }, 2000)
92
+ const form = document.querySelector('form') as HTMLFormElement
93
+ const span = document.querySelector(
94
+ 'span.input-value',
95
+ ) as HTMLSpanElement
96
+ span.innerText =
97
+ form['mds-input-otp'].value !== ''
98
+ ? form['mds-input-otp'].value
99
+ : 'Empty'
100
+ }}
101
+ >
68
102
  <mds-input-otp {...args} class="justify-center"></mds-input-otp>
69
- <mds-button disabled={isDisabled === true ? true : undefined} icon={isSubmitted ? 'mi/baseline/done' : ''} variant={isSubmitted ? 'success' : 'primary'} await={isAwaiting} size="lg" type="submit" onClick={(e: MouseEvent) => { e.preventDefault() }}>
70
- { buttonLabel }
103
+ <mds-button
104
+ disabled={isDisabled === true ? true : undefined}
105
+ icon={isSubmitted ? 'mi/baseline/done' : ''}
106
+ variant={isSubmitted ? 'success' : 'primary'}
107
+ await={isAwaiting}
108
+ size="lg"
109
+ type="submit"
110
+ onClick={(e: MouseEvent) => {
111
+ e.preventDefault()
112
+ }}
113
+ >
114
+ {buttonLabel}
71
115
  </mds-button>
72
116
  <mds-text variant="code">
73
- Input value taken from form element: <span class="inline-flex input-value rounded text-tone-neutral-01 bg-tone-neutral-08 px-200 py-50">Empty</span>
117
+ Input value taken from form element:{' '}
118
+ <span class="inline-flex input-value rounded text-tone-neutral-01 bg-tone-neutral-08 px-200 py-50">
119
+ Empty
120
+ </span>
74
121
  </mds-text>
75
122
  </form>
76
123
  </div>
77
124
  )
78
125
  }
79
126
 
80
- export const FormIntegration = FormIntegrationTemplate.bind({})
81
- FormIntegration.args = {
82
- name: 'mds-input-otp',
83
- autosubmit: false,
127
+ export const FormIntegration = {
128
+ render: FormIntegrationTemplate,
129
+
130
+ args: {
131
+ name: 'mds-input-otp',
132
+ autosubmit: false,
133
+ },
84
134
  }
85
135
 
86
- export const AutoSubmit = FormAutoSubmitTemplate.bind({})
87
- AutoSubmit.args = {
88
- name: 'mds-input-otp',
89
- autosubmit: true,
136
+ export const AutoSubmit = {
137
+ render: FormAutoSubmitTemplate,
138
+
139
+ args: {
140
+ name: 'mds-input-otp',
141
+ autosubmit: true,
142
+ },
90
143
  }
@@ -1,176 +0,0 @@
1
- [
2
- "mdi/alien",
3
- "mdi/apple",
4
- "mdi/apple-keyboard-shift",
5
- "mdi/barley",
6
- "mdi/baseball",
7
- "mdi/crown",
8
- "mdi/delete",
9
- "mdi/dots-vertical",
10
- "mdi/email",
11
- "mdi/eye-off-outline",
12
- "mdi/file-document-remove-outline",
13
- "mdi/file-download-outline",
14
- "mdi/file-upload-outline",
15
- "mdi/folder-open",
16
- "mdi/handshake",
17
- "mdi/harddisk",
18
- "mdi/keyboard-space",
19
- "mdi/license",
20
- "mdi/map-marker",
21
- "mdi/npm",
22
- "mdi/numeric-1",
23
- "mdi/numeric-2",
24
- "mdi/numeric-3",
25
- "mdi/numeric-4",
26
- "mdi/numeric-5",
27
- "mdi/numeric-6",
28
- "mdi/numeric-7",
29
- "mdi/numeric-8",
30
- "mdi/replay",
31
- "mdi/vector-curve",
32
- "mgg/ai-brain",
33
- "mgg/ai-chatbot",
34
- "mgg/ai-chatbot-outline",
35
- "mgg/check-small",
36
- "mgg/consumption-high",
37
- "mgg/consumption-low",
38
- "mgg/consumption-medium",
39
- "mgg/google-book-large",
40
- "mgg/historic-building",
41
- "mgg/list-dot",
42
- "mi/baseline/account-balance",
43
- "mi/baseline/account-balance-wallet",
44
- "mi/baseline/add",
45
- "mi/baseline/add-circle",
46
- "mi/baseline/adobe",
47
- "mi/baseline/agriculture",
48
- "mi/baseline/alternate-email",
49
- "mi/baseline/animation",
50
- "mi/baseline/arrow-back",
51
- "mi/baseline/arrow-back-ios-new",
52
- "mi/baseline/arrow-forward",
53
- "mi/baseline/arrow-forward-ios",
54
- "mi/baseline/attach-file",
55
- "mi/baseline/attachment",
56
- "mi/baseline/audiotrack",
57
- "mi/baseline/auto-awesome",
58
- "mi/baseline/badge",
59
- "mi/baseline/block",
60
- "mi/baseline/book",
61
- "mi/baseline/border-all",
62
- "mi/baseline/broken-image",
63
- "mi/baseline/calendar-today",
64
- "mi/baseline/call",
65
- "mi/baseline/cancel",
66
- "mi/baseline/category",
67
- "mi/baseline/check",
68
- "mi/baseline/check-box",
69
- "mi/baseline/check-box-outline-blank",
70
- "mi/baseline/check-circle",
71
- "mi/baseline/chevron-right",
72
- "mi/baseline/close",
73
- "mi/baseline/contrast",
74
- "mi/baseline/css",
75
- "mi/baseline/dark-mode",
76
- "mi/baseline/delete",
77
- "mi/baseline/description",
78
- "mi/baseline/desk",
79
- "mi/baseline/directions-run",
80
- "mi/baseline/directions-walk",
81
- "mi/baseline/done",
82
- "mi/baseline/done-all",
83
- "mi/baseline/downhill-skiing",
84
- "mi/baseline/draw",
85
- "mi/baseline/eco",
86
- "mi/baseline/edit",
87
- "mi/baseline/email",
88
- "mi/baseline/error",
89
- "mi/baseline/expand-more",
90
- "mi/baseline/explore",
91
- "mi/baseline/favorite",
92
- "mi/baseline/favorite-border",
93
- "mi/baseline/file-download-done",
94
- "mi/baseline/folder",
95
- "mi/baseline/folder-zip",
96
- "mi/baseline/horizontal-rule",
97
- "mi/baseline/indeterminate-check-box",
98
- "mi/baseline/info",
99
- "mi/baseline/insert-drive-file",
100
- "mi/baseline/ios-share",
101
- "mi/baseline/keyboard",
102
- "mi/baseline/keyboard-arrow-down",
103
- "mi/baseline/keyboard-arrow-left",
104
- "mi/baseline/keyboard-arrow-right",
105
- "mi/baseline/keyboard-arrow-up",
106
- "mi/baseline/keyboard-capslock",
107
- "mi/baseline/keyboard-command-key",
108
- "mi/baseline/keyboard-option-key",
109
- "mi/baseline/keyboard-return",
110
- "mi/baseline/keyboard-tab",
111
- "mi/baseline/light-mode",
112
- "mi/baseline/list-alt",
113
- "mi/baseline/local-activity",
114
- "mi/baseline/location-city",
115
- "mi/baseline/lock-open",
116
- "mi/baseline/login",
117
- "mi/baseline/logout",
118
- "mi/baseline/meeting-room",
119
- "mi/baseline/more-vert",
120
- "mi/baseline/navigate-next",
121
- "mi/baseline/north",
122
- "mi/baseline/panorama",
123
- "mi/baseline/person",
124
- "mi/baseline/pets",
125
- "mi/baseline/print",
126
- "mi/baseline/privacy-tip",
127
- "mi/baseline/radio-button-checked",
128
- "mi/baseline/radio-button-unchecked",
129
- "mi/baseline/remove",
130
- "mi/baseline/remove-circle",
131
- "mi/baseline/remove-red-eye",
132
- "mi/baseline/route",
133
- "mi/baseline/search",
134
- "mi/baseline/send",
135
- "mi/baseline/settings",
136
- "mi/baseline/south",
137
- "mi/baseline/sports",
138
- "mi/baseline/sports-soccer",
139
- "mi/baseline/stadium",
140
- "mi/baseline/terminal",
141
- "mi/baseline/text-format",
142
- "mi/baseline/text-rotate-up",
143
- "mi/baseline/timer",
144
- "mi/baseline/tv",
145
- "mi/baseline/undo",
146
- "mi/baseline/unfold-less",
147
- "mi/baseline/unfold-more",
148
- "mi/baseline/vertical-align-bottom",
149
- "mi/baseline/vertical-align-top",
150
- "mi/baseline/videocam",
151
- "mi/baseline/visibility",
152
- "mi/baseline/visibility-off",
153
- "mi/baseline/warning",
154
- "mi/baseline/warning-amber",
155
- "mi/baseline/web",
156
- "mi/baseline/wrap-text",
157
- "mi/baseline/wysiwyg",
158
- "mi/outline/auto-awesome",
159
- "mi/outline/backspace",
160
- "mi/outline/circle",
161
- "mi/outline/dark-mode",
162
- "mi/outline/help-outline",
163
- "mi/outline/ios-share",
164
- "mi/outline/mic",
165
- "mi/outline/mic-off",
166
- "mi/outline/policy",
167
- "mi/outline/schedule",
168
- "mi/outline/thumb-down",
169
- "mi/outline/thumb-up",
170
- "mi/round/arrow-circle-down",
171
- "mi/round/email",
172
- "mi/round/menu",
173
- "mi/round/more-vert",
174
- "mi/round/person",
175
- "mi/sharp/window"
176
- ]