@mfp-design-system/input 0.1.0 → 0.2.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.
Files changed (7) hide show
  1. package/README.md +14 -2
  2. package/dist/input.d.ts +12 -0
  3. package/dist/input.d.ts.map +1 -1
  4. package/dist/input.js +69 -33
  5. package/dist/input.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/input.ts +48 -0
package/README.md CHANGED
@@ -83,6 +83,18 @@ mfp-input::part(label) {
83
83
  - **Angular**: add `CUSTOM_ELEMENTS_SCHEMA` to modules using the component
84
84
  - **React 19+**: works natively
85
85
 
86
- ## Known limitations
86
+ ## Forms
87
87
 
88
- - Does not yet participate in HTML form submission (no `ElementInternals` form-association). Listen for `input`/`change` events instead. On the roadmap, will land at the same time as Button gets it.
88
+ `<mfp-input>` is form-associated via `ElementInternals`:
89
+
90
+ - Its `value` is submitted with the form under the configured `name`
91
+ - `required` triggers native `valueMissing` validation
92
+ - `error` (when set) becomes a custom validity message
93
+ - `checkValidity()` and `reportValidity()` mirror the native HTMLInputElement methods
94
+
95
+ ```html
96
+ <form @submit.prevent="onSubmit">
97
+ <mfp-input name="email" type="email" required label="Email"></mfp-input>
98
+ <mfp-button type="submit">Submit</mfp-button>
99
+ </form>
100
+ ```
package/dist/input.d.ts CHANGED
@@ -14,7 +14,19 @@ export declare class MfpInput extends LitElement {
14
14
  disabled: boolean;
15
15
  readonly: boolean;
16
16
  required: boolean;
17
+ static formAssociated: boolean;
18
+ private _internals;
19
+ constructor();
20
+ /** The associated <form>, if any. */
21
+ get form(): HTMLFormElement | null;
22
+ /** Run native HTML validation. Mirrors HTMLInputElement.checkValidity(). */
23
+ checkValidity(): boolean;
24
+ /** Run validation and show validity UI. */
25
+ reportValidity(): boolean;
17
26
  private _id;
27
+ private _syncFormValue;
28
+ willUpdate(changed: Map<string, unknown>): void;
29
+ connectedCallback(): void;
18
30
  private _onInput;
19
31
  private _onChange;
20
32
  render(): import("lit").TemplateResult<1>;
package/dist/input.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;AAI5F,qBACa,QAAS,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BA0HpB;IAGF,IAAI,EAAE,SAAS,CAAQ;IAGvB,IAAI,EAAE,SAAS,CAAU;IAGzB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,OAAO,CAAC,GAAG,CAAmC;IAE9C,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,SAAS,CAUf;IAEO,MAAM;CA0ClB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}
1
+ {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;AAI5F,qBACa,QAAS,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BA0HpB;IAGF,IAAI,EAAE,SAAS,CAAQ;IAGvB,IAAI,EAAE,SAAS,CAAU;IAGzB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,UAAU,CAAmB;;IAOrC,qCAAqC;IACrC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,4EAA4E;IAC5E,aAAa,IAAI,OAAO;IAIxB,2CAA2C;IAC3C,cAAc,IAAI,OAAO;IAIzB,OAAO,CAAC,GAAG,CAAmC;IAE9C,OAAO,CAAC,cAAc;IAab,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxC,iBAAiB;IAK1B,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,SAAS,CAUf;IAEO,MAAM;CA0ClB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}
package/dist/input.js CHANGED
@@ -8,39 +8,6 @@ import { LitElement, html, css, nothing } from 'lit';
8
8
  import { customElement, property } from 'lit/decorators.js';
9
9
  let inputIdCounter = 0;
10
10
  let MfpInput = class MfpInput extends LitElement {
11
- constructor() {
12
- super(...arguments);
13
- this.size = 'md';
14
- this.type = 'text';
15
- this.value = '';
16
- this.name = '';
17
- this.label = '';
18
- this.placeholder = '';
19
- this.hint = '';
20
- this.error = '';
21
- this.disabled = false;
22
- this.readonly = false;
23
- this.required = false;
24
- this._id = `mfp-input-${++inputIdCounter}`;
25
- this._onInput = (e) => {
26
- const input = e.target;
27
- this.value = input.value;
28
- this.dispatchEvent(new CustomEvent('input', {
29
- bubbles: true,
30
- composed: true,
31
- detail: { value: input.value },
32
- }));
33
- };
34
- this._onChange = (e) => {
35
- const input = e.target;
36
- this.value = input.value;
37
- this.dispatchEvent(new CustomEvent('change', {
38
- bubbles: true,
39
- composed: true,
40
- detail: { value: input.value },
41
- }));
42
- };
43
- }
44
11
  static { this.styles = css `
45
12
  :host {
46
13
  display: block;
@@ -164,6 +131,75 @@ let MfpInput = class MfpInput extends LitElement {
164
131
  }
165
132
  }
166
133
  `; }
134
+ static { this.formAssociated = true; }
135
+ constructor() {
136
+ super();
137
+ this.size = 'md';
138
+ this.type = 'text';
139
+ this.value = '';
140
+ this.name = '';
141
+ this.label = '';
142
+ this.placeholder = '';
143
+ this.hint = '';
144
+ this.error = '';
145
+ this.disabled = false;
146
+ this.readonly = false;
147
+ this.required = false;
148
+ this._id = `mfp-input-${++inputIdCounter}`;
149
+ this._onInput = (e) => {
150
+ const input = e.target;
151
+ this.value = input.value;
152
+ this.dispatchEvent(new CustomEvent('input', {
153
+ bubbles: true,
154
+ composed: true,
155
+ detail: { value: input.value },
156
+ }));
157
+ };
158
+ this._onChange = (e) => {
159
+ const input = e.target;
160
+ this.value = input.value;
161
+ this.dispatchEvent(new CustomEvent('change', {
162
+ bubbles: true,
163
+ composed: true,
164
+ detail: { value: input.value },
165
+ }));
166
+ };
167
+ this._internals = this.attachInternals();
168
+ }
169
+ /** The associated <form>, if any. */
170
+ get form() {
171
+ return this._internals.form;
172
+ }
173
+ /** Run native HTML validation. Mirrors HTMLInputElement.checkValidity(). */
174
+ checkValidity() {
175
+ return this._internals.checkValidity();
176
+ }
177
+ /** Run validation and show validity UI. */
178
+ reportValidity() {
179
+ return this._internals.reportValidity();
180
+ }
181
+ _syncFormValue() {
182
+ this._internals.setFormValue(this.value);
183
+ // Validity: explicit error wins; otherwise enforce required.
184
+ if (this.error) {
185
+ this._internals.setValidity({ customError: true }, this.error);
186
+ }
187
+ else if (this.required && !this.value) {
188
+ this._internals.setValidity({ valueMissing: true }, 'Please fill out this field.');
189
+ }
190
+ else {
191
+ this._internals.setValidity({});
192
+ }
193
+ }
194
+ willUpdate(changed) {
195
+ if (changed.has('value') || changed.has('required') || changed.has('error')) {
196
+ this._syncFormValue();
197
+ }
198
+ }
199
+ connectedCallback() {
200
+ super.connectedCallback();
201
+ this._syncFormValue();
202
+ }
167
203
  render() {
168
204
  const invalid = this.error.length > 0;
169
205
  const inputId = this._id;
package/dist/input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.js","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK5D,IAAI,cAAc,GAAG,CAAC,CAAC;AAGhB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QA8HH,SAAI,GAAc,IAAI,CAAC;QAGvB,SAAI,GAAc,MAAM,CAAC;QAGzB,UAAK,GAAG,EAAE,CAAC;QAGX,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAG,EAAE,CAAC;QAGX,gBAAW,GAAG,EAAE,CAAC;QAGjB,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAG,EAAE,CAAC;QAGX,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;QAET,QAAG,GAAG,aAAa,EAAE,cAAc,EAAE,CAAC;QAEtC,aAAQ,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC5B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,OAAO,EAAE;gBACrB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE;aACjC,CAAC,CACL,CAAC;QACN,CAAC,CAAC;QAEM,cAAS,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACtB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE;aACjC,CAAC,CACL,CAAC;QACN,CAAC,CAAC;IA4CN,CAAC;aAjOmB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0H3B,AA1HqB,CA0HpB;IA6DO,MAAM;QACX,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACtC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;QACzB,MAAM,MAAM,GAAG,GAAG,OAAO,OAAO,CAAC;QACjC,MAAM,OAAO,GAAG,GAAG,OAAO,QAAQ,CAAC;QACnC,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;QAEvE,OAAO,IAAI,CAAA;cACL,IAAI,CAAC,KAAK;YACR,CAAC,CAAC,IAAI,CAAA,2BAA2B,OAAO;wBAChC,IAAI,CAAC,KAAK;wBACV,IAAI,CAAC,QAAQ;gBACX,CAAC,CAAC,IAAI,CAAA,oDAAoD;gBAC1D,CAAC,CAAC,OAAO;2BACR;YACX,CAAC,CAAC,OAAO;iDACwB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;;yBAGhD,OAAO;;2BAEL,IAAI,CAAC,IAAI;6BACP,IAAI,CAAC,KAAK;2BACZ,IAAI,CAAC,IAAI;kCACF,IAAI,CAAC,WAAW;gCAClB,IAAI,CAAC,QAAQ;gCACb,IAAI,CAAC,QAAQ;gCACb,IAAI,CAAC,QAAQ;mCACV,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;uCACtB,WAAW,IAAI,OAAO;6BAChC,IAAI,CAAC,QAAQ;8BACZ,IAAI,CAAC,SAAS;;;;cAI9B,OAAO;YACL,CAAC,CAAC,IAAI,CAAA,sBAAsB,OAAO,+BAA+B,IAAI,CAAC,KAAK,MAAM;YAClF,CAAC,CAAC,IAAI,CAAC,IAAI;gBACT,CAAC,CAAC,IAAI,CAAA,qBAAqB,MAAM,iBAAiB,IAAI,CAAC,IAAI,MAAM;gBACjE,CAAC,CAAC,OAAO;SAClB,CAAC;IACN,CAAC;;AAnGD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACL;AAGvB;IADC,QAAQ,EAAE;sCACc;AAGzB;IADC,QAAQ,EAAE;uCACA;AAGX;IADC,QAAQ,EAAE;sCACD;AAGV;IADC,QAAQ,EAAE;uCACA;AAGX;IADC,QAAQ,EAAE;6CACM;AAGjB;IADC,QAAQ,EAAE;sCACD;AAGV;IADC,QAAQ,EAAE;uCACA;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC1B;AA5JR,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAkOpB"}
1
+ {"version":3,"file":"input.js","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mfp-design-system/input",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Input web component for the mfp-design-system, built with Lit.",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/src/input.ts CHANGED
@@ -165,8 +165,56 @@ export class MfpInput extends LitElement {
165
165
  @property({ type: Boolean, reflect: true })
166
166
  required = false;
167
167
 
168
+ static formAssociated = true;
169
+
170
+ private _internals: ElementInternals;
171
+
172
+ constructor() {
173
+ super();
174
+ this._internals = this.attachInternals();
175
+ }
176
+
177
+ /** The associated <form>, if any. */
178
+ get form(): HTMLFormElement | null {
179
+ return this._internals.form;
180
+ }
181
+
182
+ /** Run native HTML validation. Mirrors HTMLInputElement.checkValidity(). */
183
+ checkValidity(): boolean {
184
+ return this._internals.checkValidity();
185
+ }
186
+
187
+ /** Run validation and show validity UI. */
188
+ reportValidity(): boolean {
189
+ return this._internals.reportValidity();
190
+ }
191
+
168
192
  private _id = `mfp-input-${++inputIdCounter}`;
169
193
 
194
+ private _syncFormValue() {
195
+ this._internals.setFormValue(this.value);
196
+
197
+ // Validity: explicit error wins; otherwise enforce required.
198
+ if (this.error) {
199
+ this._internals.setValidity({ customError: true }, this.error);
200
+ } else if (this.required && !this.value) {
201
+ this._internals.setValidity({ valueMissing: true }, 'Please fill out this field.');
202
+ } else {
203
+ this._internals.setValidity({});
204
+ }
205
+ }
206
+
207
+ override willUpdate(changed: Map<string, unknown>) {
208
+ if (changed.has('value') || changed.has('required') || changed.has('error')) {
209
+ this._syncFormValue();
210
+ }
211
+ }
212
+
213
+ override connectedCallback() {
214
+ super.connectedCallback();
215
+ this._syncFormValue();
216
+ }
217
+
170
218
  private _onInput = (e: Event) => {
171
219
  const input = e.target as HTMLInputElement;
172
220
  this.value = input.value;