@m3e/form-field 1.0.0-rc.1 → 1.0.0-rc.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.
Files changed (21) hide show
  1. package/README.md +1 -2
  2. package/dist/custom-elements.json +2568 -7
  3. package/dist/html-custom-data.json +1 -1
  4. package/dist/index.js +38 -35
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.js +96 -97
  7. package/dist/index.min.js.map +1 -1
  8. package/dist/src/FormFieldElement.d.ts +2 -3
  9. package/dist/src/FormFieldElement.d.ts.map +1 -1
  10. package/package.json +3 -3
  11. package/cem.config.mjs +0 -16
  12. package/demo/index.html +0 -116
  13. package/eslint.config.mjs +0 -13
  14. package/rollup.config.js +0 -32
  15. package/src/FloatLabelType.ts +0 -2
  16. package/src/FormFieldControl.ts +0 -83
  17. package/src/FormFieldElement.ts +0 -876
  18. package/src/FormFieldVariant.ts +0 -2
  19. package/src/HideSubscriptType.ts +0 -2
  20. package/src/index.ts +0 -5
  21. package/tsconfig.json +0 -9
package/demo/index.html DELETED
@@ -1,116 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" style="overflow-y: auto">
3
- <head>
4
- <title>Form Field for M3E</title>
5
- <meta charset="utf-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <meta name="description" content="Form Field for M3E" />
8
- <base href="./" />
9
- <link rel="preconnect" href="https://fonts.googleapis.com" />
10
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11
- <link
12
- href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
13
- rel="stylesheet"
14
- />
15
- <link
16
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0"
17
- rel="stylesheet"
18
- />
19
- <script type="importmap">
20
- {
21
- "imports": {
22
- "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
23
- "@m3e/core": "../../core/dist/index.min.js",
24
- "@m3e/core/a11y": "../../core/dist/a11y.min.js"
25
- }
26
- }
27
- </script>
28
- <script type="module" src="../../icon/dist/index.min.js"></script>
29
- <script type="module" src="../../theme/dist/index.min.js"></script>
30
- <script type="module" src="../dist/index.min.js"></script>
31
- <style>
32
- body {
33
- font-family: "Roboto";
34
- }
35
- *:not(:defined) {
36
- display: none;
37
- }
38
- </style>
39
- </head>
40
- <body>
41
- <m3e-theme strong-focus>
42
- <m3e-form-field variant="outlined">
43
- <label slot="label" for="fld1">Outlined Field</label>
44
- <input autocomplete="off" id="fld1" />
45
- </m3e-form-field>
46
- <br />
47
- <m3e-form-field variant="filled">
48
- <label slot="label" for="fld2">Filled Field</label>
49
- <input autocomplete="off" id="fld2" />
50
- </m3e-form-field>
51
- <br />
52
- <m3e-form-field float-label="always">
53
- <label slot="label" for="fld3">Always float label</label>
54
- <input autocomplete="off" id="fld3" />
55
- </m3e-form-field>
56
- <br />
57
- <m3e-form-field>
58
- <label slot="label" for="fld4">With hint text (auto)</label>
59
- <input autocomplete="off" id="fld4" />
60
- <span slot="hint">Hint text</span>
61
- </m3e-form-field>
62
- <br />
63
- <m3e-form-field>
64
- <label slot="label" for="fld5">Hide subscript auto</label>
65
- <input autocomplete="off" id="fld5" />
66
- <span slot="hint">Hint text</span>
67
- </m3e-form-field>
68
- <br />
69
- <m3e-form-field hide-subscript="never">
70
- <label slot="label" for="fld6">Hide subscript never</label>
71
- <input autocomplete="off" id="fld6" />
72
- <span slot="hint">Hint text</span>
73
- </m3e-form-field>
74
- <br /><br />
75
- <m3e-form-field hide-subscript="always">
76
- <label slot="label" for="fld7">Hide subscript always</label>
77
- <input autocomplete="off" id="fld7" />
78
- <span slot="hint">Hint text</span>
79
- </m3e-form-field>
80
- <br /><br />
81
- <m3e-form-field style="--md-sys-density-scale: -1">
82
- <label slot="label" for="fld8">Outlined comfortable density</label>
83
- <input autocomplete="off" id="fld8" />
84
- <span slot="hint">Hint text</span>
85
- </m3e-form-field>
86
- <m3e-form-field variant="filled" style="--md-sys-density-scale: -1">
87
- <label slot="label" for="fld9">Filled comfortable density</label>
88
- <input autocomplete="off" id="fld9" />
89
- <span slot="hint">Hint text</span>
90
- </m3e-form-field>
91
- <br />
92
- <m3e-form-field style="--md-sys-density-scale: -2">
93
- <label slot="label" for="fld10">Outlined compact density</label>
94
- <input autocomplete="off" id="fld10" />
95
- <span slot="hint">Hint text</span>
96
- </m3e-form-field>
97
- <m3e-form-field variant="filled" style="--md-sys-density-scale: -2">
98
- <label slot="label" for="fld11">Filled compact density</label>
99
- <input autocomplete="off" id="fld11" />
100
- <span slot="hint">Hint text</span>
101
- </m3e-form-field>
102
- <br /><br />
103
- <m3e-form-field>
104
- <label slot="label" for="fld12">Required field</label>
105
- <input required autocomplete="off" id="fld12" />
106
- <span slot="hint">Required</span>
107
- </m3e-form-field>
108
- <br /><br />
109
- <m3e-form-field>
110
- <label slot="label" for="fld13">Disabled field</label>
111
- <input disabled autocomplete="off" id="fld13" value="Sample value" />
112
- <span slot="hint">Disabled</span>
113
- </m3e-form-field>
114
- </m3e-theme>
115
- </body>
116
- </html>
package/eslint.config.mjs DELETED
@@ -1,13 +0,0 @@
1
- import eslint from "@eslint/js";
2
- import tseslint from "typescript-eslint";
3
- import { fileURLToPath } from "url";
4
- import { dirname } from "path";
5
-
6
- export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
7
- languageOptions: {
8
- parserOptions: {
9
- project: true,
10
- tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
11
- },
12
- },
13
- });
package/rollup.config.js DELETED
@@ -1,32 +0,0 @@
1
- import resolve from "@rollup/plugin-node-resolve";
2
- import terser from "@rollup/plugin-terser";
3
- import typescript from "@rollup/plugin-typescript";
4
-
5
- const banner = `/**
6
- * @license MIT
7
- * Copyright (c) 2025 matraic
8
- * See LICENSE file in the project root for full license text.
9
- */`;
10
-
11
- export default [
12
- {
13
- input: "src/index.ts",
14
- output: [
15
- {
16
- file: "dist/index.js",
17
- format: "esm",
18
- sourcemap: true,
19
- banner: banner,
20
- },
21
- {
22
- file: "dist/index.min.js",
23
- format: "esm",
24
- sourcemap: true,
25
- banner: banner,
26
- plugins: [terser({ mangle: true })],
27
- },
28
- ],
29
- external: ["@m3e/core", "@m3e/core/a11y", "lit"],
30
- plugins: [resolve(), typescript()],
31
- },
32
- ];
package/src/FloatLabelType.ts DELETED
@@ -1,2 +0,0 @@
1
- /** Specifies the possible behaviors used to float labels in a form field. */
2
- export type FloatLabelType = "always" | "auto";
package/src/FormFieldControl.ts DELETED
@@ -1,83 +0,0 @@
1
- /**
2
- * Adapted from Angular Material Form Field Control
3
- * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field-control.ts
4
- *
5
- * @license MIT
6
- * Copyright (c) 2025 Google LLC
7
- * See LICENSE file in the project root for full license text.
8
- */
9
-
10
- /** An interface which allows a control to work inside of a `M3eFormField`. */
11
- export interface FormFieldControl extends HTMLElement {
12
- /** A value indicating whether the control is disabled. */
13
- disabled: boolean;
14
-
15
- /** The value of the control. */
16
- value?: unknown;
17
-
18
- /** A value indicating whether the control is required. */
19
- required?: boolean;
20
-
21
- /** A value indicated whether the content of the control is read-only. */
22
- readonly?: boolean;
23
-
24
- /** A value indicating whether the form field's label should try to float. */
25
- readonly shouldLabelFloat?: boolean;
26
-
27
- /** The error message that would be displayed if the user submits the form, or an empty string if no error message. */
28
- readonly validationMessage?: string;
29
-
30
- /** The `HTMLFormElement` associated with this element. */
31
- readonly form?: HTMLFormElement | null;
32
-
33
- /**
34
- * Handles the click event on the control's container.
35
- * @param {MouseEvent} event The `MouseEvent`.
36
- */
37
- onContainerClick?: (event: MouseEvent) => void;
38
-
39
- /**
40
- * Returns `true` if the element has no validity problems; otherwise,
41
- * returns `false`, fires an invalid event.
42
- */
43
- checkValidity?: () => boolean;
44
- }
45
-
46
- const KNOWN_FORM_FIELD_TAGS = ["m3e-input-chip-set", "m3e-select"];
47
-
48
- /**
49
- * Determines whether a value is a `FormFieldControl`.
50
- * @param {unknown} value The value to test.
51
- * @returns {value is FormFieldControl} A value indicating whether `value` is a `FormFieldControl`.
52
- */
53
- export function isFormFieldControl(value: unknown): value is FormFieldControl {
54
- return (
55
- value instanceof HTMLElement &&
56
- (value instanceof HTMLInputElement ||
57
- value instanceof HTMLTextAreaElement ||
58
- value instanceof HTMLSelectElement ||
59
- KNOWN_FORM_FIELD_TAGS.includes(value.tagName.toLowerCase()))
60
- );
61
- }
62
-
63
- /**
64
- * Locates the first `FormFieldControl` in a given slot.
65
- * @param {HTMLSlotElement} slot The slot in which to locate a `FormFieldControl`.
66
- * @returns {FormFieldControl | null} The `FormFieldControl` located in `slot`.
67
- */
68
- export function findFormFieldControl(slot: HTMLSlotElement): FormFieldControl | null {
69
- for (const element of slot.assignedElements({ flatten: true })) {
70
- if (isFormFieldControl(element)) {
71
- return element;
72
- }
73
-
74
- const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
75
- while (walker.nextNode()) {
76
- if (isFormFieldControl(walker.currentNode)) {
77
- return walker.currentNode;
78
- }
79
- }
80
- }
81
-
82
- return null;
83
- }