@m3e/form-field 1.0.0-rc.1 → 1.0.0-rc.2
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/README.md +1 -2
- package/dist/custom-elements.json +2573 -7
- package/dist/index.js +2 -3
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +68 -68
- package/dist/index.min.js.map +1 -1
- package/package.json +3 -3
- package/cem.config.mjs +0 -16
- package/demo/index.html +0 -116
- package/dist/src/FloatLabelType.d.ts +0 -3
- package/dist/src/FloatLabelType.d.ts.map +0 -1
- package/dist/src/FormFieldControl.d.ts +0 -48
- package/dist/src/FormFieldControl.d.ts.map +0 -1
- package/dist/src/FormFieldElement.d.ts +0 -144
- package/dist/src/FormFieldElement.d.ts.map +0 -1
- package/dist/src/FormFieldVariant.d.ts +0 -3
- package/dist/src/FormFieldVariant.d.ts.map +0 -1
- package/dist/src/HideSubscriptType.d.ts +0 -3
- package/dist/src/HideSubscriptType.d.ts.map +0 -1
- package/dist/src/index.d.ts +0 -6
- package/dist/src/index.d.ts.map +0 -1
- package/eslint.config.mjs +0 -13
- package/rollup.config.js +0 -32
- package/src/FloatLabelType.ts +0 -2
- package/src/FormFieldControl.ts +0 -83
- package/src/FormFieldElement.ts +0 -876
- package/src/FormFieldVariant.ts +0 -2
- package/src/HideSubscriptType.ts +0 -2
- package/src/index.ts +0 -5
- 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>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FloatLabelType.d.ts","sourceRoot":"","sources":["../../src/FloatLabelType.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC"}
|
|
@@ -1,48 +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
|
-
/** An interface which allows a control to work inside of a `M3eFormField`. */
|
|
10
|
-
export interface FormFieldControl extends HTMLElement {
|
|
11
|
-
/** A value indicating whether the control is disabled. */
|
|
12
|
-
disabled: boolean;
|
|
13
|
-
/** The value of the control. */
|
|
14
|
-
value?: unknown;
|
|
15
|
-
/** A value indicating whether the control is required. */
|
|
16
|
-
required?: boolean;
|
|
17
|
-
/** A value indicated whether the content of the control is read-only. */
|
|
18
|
-
readonly?: boolean;
|
|
19
|
-
/** A value indicating whether the form field's label should try to float. */
|
|
20
|
-
readonly shouldLabelFloat?: boolean;
|
|
21
|
-
/** The error message that would be displayed if the user submits the form, or an empty string if no error message. */
|
|
22
|
-
readonly validationMessage?: string;
|
|
23
|
-
/** The `HTMLFormElement` associated with this element. */
|
|
24
|
-
readonly form?: HTMLFormElement | null;
|
|
25
|
-
/**
|
|
26
|
-
* Handles the click event on the control's container.
|
|
27
|
-
* @param {MouseEvent} event The `MouseEvent`.
|
|
28
|
-
*/
|
|
29
|
-
onContainerClick?: (event: MouseEvent) => void;
|
|
30
|
-
/**
|
|
31
|
-
* Returns `true` if the element has no validity problems; otherwise,
|
|
32
|
-
* returns `false`, fires an invalid event.
|
|
33
|
-
*/
|
|
34
|
-
checkValidity?: () => boolean;
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* Determines whether a value is a `FormFieldControl`.
|
|
38
|
-
* @param {unknown} value The value to test.
|
|
39
|
-
* @returns {value is FormFieldControl} A value indicating whether `value` is a `FormFieldControl`.
|
|
40
|
-
*/
|
|
41
|
-
export declare function isFormFieldControl(value: unknown): value is FormFieldControl;
|
|
42
|
-
/**
|
|
43
|
-
* Locates the first `FormFieldControl` in a given slot.
|
|
44
|
-
* @param {HTMLSlotElement} slot The slot in which to locate a `FormFieldControl`.
|
|
45
|
-
* @returns {FormFieldControl | null} The `FormFieldControl` located in `slot`.
|
|
46
|
-
*/
|
|
47
|
-
export declare function findFormFieldControl(slot: HTMLSlotElement): FormFieldControl | null;
|
|
48
|
-
//# sourceMappingURL=FormFieldControl.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldControl.d.ts","sourceRoot":"","sources":["../../src/FormFieldControl.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,8EAA8E;AAC9E,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,0DAA0D;IAC1D,QAAQ,EAAE,OAAO,CAAC;IAElB,gCAAgC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6EAA6E;IAC7E,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAEpC,sHAAsH;IACtH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAEpC,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAEvC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAE/C;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC;CAC/B;AAID;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,gBAAgB,CAQ5E;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,eAAe,GAAG,gBAAgB,GAAG,IAAI,CAenF"}
|
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Adapted from Angular Material Form Field
|
|
3
|
-
* Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field.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
|
-
import { CSSResultGroup, LitElement, PropertyValues } from "lit";
|
|
10
|
-
import { FormFieldControl } from "./FormFieldControl";
|
|
11
|
-
import { FormFieldVariant } from "./FormFieldVariant";
|
|
12
|
-
import { HideSubscriptType } from "./HideSubscriptType";
|
|
13
|
-
import { FloatLabelType } from "./FloatLabelType";
|
|
14
|
-
declare const M3eFormFieldElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
|
|
15
|
-
/**
|
|
16
|
-
* @summary
|
|
17
|
-
* A container for form controls that applies Material Design styling and behavior.
|
|
18
|
-
*
|
|
19
|
-
* @description
|
|
20
|
-
* The `m3e-form-field` component is a semantic, expressive container for form controls that anchors
|
|
21
|
-
* label behavior, subscript messaging, and variant-specific layout. Designed according to Material Design 3
|
|
22
|
-
* guidelines, it supports two visual variants—`outlined` and `filled`—each with dynamic elevation,
|
|
23
|
-
* shape transitions, and adaptive color theming. The component responds to control state changes
|
|
24
|
-
* (focus, hover, press, disabled, invalid) with smooth motion and semantic clarity, ensuring
|
|
25
|
-
* visual hierarchy and emotional resonance.
|
|
26
|
-
|
|
27
|
-
* The component is accessible by default, with ARIA annotations, contrast-safe color tokens,
|
|
28
|
-
* and dynamic descriptions for hint and error messaging. It supports prefix and suffix content,
|
|
29
|
-
* floating labels, and adaptive subscript visibility. When hosting a control with validation,
|
|
30
|
-
* error messages are surfaced with `aria-invalid` and described for assistive technology.
|
|
31
|
-
|
|
32
|
-
* Native form controls may not expose full state or messaging on their own. `m3e-form-field` bridges
|
|
33
|
-
* these gaps by coordinating label floating, container styling, and subscript feedback.
|
|
34
|
-
*
|
|
35
|
-
* @example
|
|
36
|
-
* The following example illustrates a basic usage of the `m3e-form-field`.
|
|
37
|
-
* ```html
|
|
38
|
-
* <m3e-form-field>
|
|
39
|
-
* <label slot="label" for="field">Text field</label>
|
|
40
|
-
* <input id="field" />
|
|
41
|
-
* </m3e-form-field>
|
|
42
|
-
* ```
|
|
43
|
-
*
|
|
44
|
-
* @tag m3e-form-field
|
|
45
|
-
*
|
|
46
|
-
* @slot - Renders the control of the field.
|
|
47
|
-
* @slot prefix - Renders content before the fields's control.
|
|
48
|
-
* @slot prefix-text - Renders text before the fields's control.
|
|
49
|
-
* @slot suffix - Renders content after the fields's control.
|
|
50
|
-
* @slot suffix-text - Renders text after the fields's control.
|
|
51
|
-
* @slot hint - Renders hint text in the fields's subscript, when the control is valid.
|
|
52
|
-
* @slot error - Renders error text in the fields's subscript, when the control is invalid.
|
|
53
|
-
*
|
|
54
|
-
* @attr float-label - Specifies whether the label should float always or only when necessary.
|
|
55
|
-
* @attr hide-required-marker - Whether the required marker should be hidden.
|
|
56
|
-
* @attr hide-subscript - Whether subscript content is hidden.
|
|
57
|
-
* @attr variant - The appearance variant of the field.
|
|
58
|
-
*
|
|
59
|
-
* @cssprop --m3e-form-field-font-size - Font size for the form field container text.
|
|
60
|
-
* @cssprop --m3e-form-field-font-weight - Font weight for the form field container text.
|
|
61
|
-
* @cssprop --m3e-form-field-line-height - Line height for the form field container text.
|
|
62
|
-
* @cssprop --m3e-form-field-tracking - Letter spacing for the form field container text.
|
|
63
|
-
* @cssprop --m3e-form-field-label-font-size - Font size for the floating label.
|
|
64
|
-
* @cssprop --m3e-form-field-label-font-weight - Font weight for the floating label.
|
|
65
|
-
* @cssprop --m3e-form-field-label-line-height - Line height for the floating label.
|
|
66
|
-
* @cssprop --m3e-form-field-label-tracking - Letter spacing for the floating label.
|
|
67
|
-
* @cssprop --m3e-form-field-subscript-font-size - Font size for hint and error text.
|
|
68
|
-
* @cssprop --m3e-form-field-subscript-font-weight - Font weight for hint and error text.
|
|
69
|
-
* @cssprop --m3e-form-field-subscript-line-height - Line height for hint and error text.
|
|
70
|
-
* @cssprop --m3e-form-field-subscript-tracking - Letter spacing for hint and error text.
|
|
71
|
-
* @cssprop --m3e-form-field-color - Text color for the form field container.
|
|
72
|
-
* @cssprop --m3e-form-field-subscript-color - Color for hint and error text.
|
|
73
|
-
* @cssprop --m3e-form-field-invalid-color - Color used when the control is invalid.
|
|
74
|
-
* @cssprop --m3e-form-field-focused-outline-color - Outline color when focused.
|
|
75
|
-
* @cssprop --m3e-form-field-focused-color - Label color when focused.
|
|
76
|
-
* @cssprop --m3e-form-field-outline-color - Outline color in outlined variant.
|
|
77
|
-
* @cssprop --m3e-form-field-container-color - Background color in filled variant.
|
|
78
|
-
* @cssprop --m3e-form-field-hover-container-color - Hover background color in filled variant.
|
|
79
|
-
* @cssprop --m3e-form-field-width - Width of the form field container.
|
|
80
|
-
* @cssprop --m3e-form-field-icon-size - Size of prefix and suffix icons.
|
|
81
|
-
* @cssprop --m3e-outlined-form-field-container-shape - Corner radius for outlined container.
|
|
82
|
-
* @cssprop --m3e-form-field-container-shape - Corner radius for filled container.
|
|
83
|
-
* @cssprop --m3e-form-field-hover-container-opacity - Opacity for hover background in filled variant.
|
|
84
|
-
* @cssprop --m3e-form-field-disabled-opacity - Opacity for disabled text.
|
|
85
|
-
* @cssprop --m3e-form-field-disabled-container-opacity - Opacity for disabled container background.
|
|
86
|
-
*/
|
|
87
|
-
export declare class M3eFormFieldElement extends M3eFormFieldElement_base {
|
|
88
|
-
#private;
|
|
89
|
-
/** The styles of the element. */
|
|
90
|
-
static styles: CSSResultGroup;
|
|
91
|
-
/** @private */ private readonly _base;
|
|
92
|
-
/** @private */ private readonly _prefix;
|
|
93
|
-
/** @private */ private readonly _error;
|
|
94
|
-
/** @private */ private readonly _hint;
|
|
95
|
-
/** @private */ private _pseudoLabel;
|
|
96
|
-
/** @private */ private _required;
|
|
97
|
-
/** @private */ private _invalid;
|
|
98
|
-
/** @private */ private _validationMessage;
|
|
99
|
-
constructor();
|
|
100
|
-
/** A reference to the hosted form field control. */
|
|
101
|
-
get control(): FormFieldControl | null;
|
|
102
|
-
/**
|
|
103
|
-
* The appearance variant of the field.
|
|
104
|
-
* @default "outlined"
|
|
105
|
-
*/
|
|
106
|
-
variant: FormFieldVariant;
|
|
107
|
-
/**
|
|
108
|
-
* Whether the required marker should be hidden.
|
|
109
|
-
* @default false
|
|
110
|
-
*/
|
|
111
|
-
hideRequiredMarker: boolean;
|
|
112
|
-
/**
|
|
113
|
-
* Whether subscript content is hidden.
|
|
114
|
-
* @default "auto"
|
|
115
|
-
*/
|
|
116
|
-
hideSubscript: HideSubscriptType;
|
|
117
|
-
/**
|
|
118
|
-
* Specifies whether the label should float always or only when necessary.
|
|
119
|
-
* @default "auto"
|
|
120
|
-
*/
|
|
121
|
-
floatLabel: FloatLabelType;
|
|
122
|
-
/**
|
|
123
|
-
* Notifies the form field that the state of the hosted `control` has changed.
|
|
124
|
-
* @param [checkValidity=false] Whether to check validity.
|
|
125
|
-
*/
|
|
126
|
-
notifyControlStateChange(checkValidity?: boolean): void;
|
|
127
|
-
/** @inheritdoc */
|
|
128
|
-
connectedCallback(): void;
|
|
129
|
-
/** @inheritdoc */
|
|
130
|
-
disconnectedCallback(): void;
|
|
131
|
-
/** @private */
|
|
132
|
-
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
133
|
-
/** @inheritdoc */
|
|
134
|
-
protected update(changedProperties: PropertyValues): void;
|
|
135
|
-
/** @inheritdoc */
|
|
136
|
-
protected render(): unknown;
|
|
137
|
-
}
|
|
138
|
-
declare global {
|
|
139
|
-
interface HTMLElementTagNameMap {
|
|
140
|
-
"m3e-form-field": M3eFormFieldElement;
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
export {};
|
|
144
|
-
//# sourceMappingURL=FormFieldElement.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldElement.d.ts","sourceRoot":"","sources":["../../src/FormFieldElement.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;AAmBhG,OAAO,EAAwB,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,qBACa,mBAAoB,SAAQ,wBAAyC;;IAChF,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAoapC;IAmCF,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAe;IACrE,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAe;IACzE,eAAe,CAAkB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAe;IACvE,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAe;IAiBrE,eAAe,CAAU,OAAO,CAAC,YAAY,CAAM;IACnD,eAAe,CAAU,OAAO,CAAC,SAAS,CAAS;IACnD,eAAe,CAAU,OAAO,CAAC,QAAQ,CAAS;IAClD,eAAe,CAAU,OAAO,CAAC,kBAAkB,CAAM;;IAoBzD,oDAAoD;IACpD,IAAI,OAAO,4BAEV;IAED;;;OAGG;IAC0B,OAAO,EAAE,gBAAgB,CAAc;IAEpE;;;OAGG;IAC4E,kBAAkB,UAAS;IAE1G;;;OAGG;IACuD,aAAa,EAAE,iBAAiB,CAAU;IAEpG;;;OAGG;IACoD,UAAU,EAAE,cAAc,CAAU;IAE3F;;;OAGG;IACH,wBAAwB,CAAC,aAAa,UAAQ,GAAG,IAAI;IAqBrD,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAMlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,eAAe;cACI,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAYzE,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAgBlE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAqKrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldVariant.d.ts","sourceRoot":"","sources":["../../src/FormFieldVariant.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"HideSubscriptType.d.ts","sourceRoot":"","sources":["../../src/HideSubscriptType.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC"}
|
package/dist/src/index.d.ts
DELETED
package/dist/src/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}
|
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
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
|
-
}
|