fix(deps): update dependency @material/web to v1
This CL also fixes many things necessary for the update.
It also changes the entire md3 theme, since there have been a lot of
breaking changes and this is the easiest way to have a working theme
again (it is also an improvement).
Change-Id: I4a412e0c0ca4345084c724fcaba000293521e907
diff --git a/src/common/components/FormField.js b/src/common/components/FormField.js
new file mode 100644
index 0000000..aa32732
--- /dev/null
+++ b/src/common/components/FormField.js
@@ -0,0 +1,53 @@
+import {css, html, LitElement} from 'lit';
+
+/**
+ * Lite component inspired in the now removed material-web's Formfield.
+ * https://github.com/material-components/material-web/commit/753a03be963f7b5242e98b73d1309abbe9f5bf51
+ */
+export default class TwptFormField extends LitElement {
+ static styles = [
+ css`
+ .formfield {
+ align-items: center;
+ display: inline-flex;
+ vertical-align: middle;
+ }
+
+ label {
+ margin-inline: 0px auto;
+ order: 0;
+ padding-inline: 4px 0px;
+ }
+ `,
+ ];
+
+ render() {
+ return html`
+ <span class="formfield">
+ <slot></slot>
+ <label @click="${this._labelClick}">
+ <slot name="label"></slot>
+ </label>
+ </span>
+ `;
+ }
+
+ _labelClick() {
+ const input = this._input;
+ if (!input || !this.shadowRoot) return;
+
+ input.focus();
+ input.click();
+ }
+
+ get _input() {
+ return this._slottedChildren?.[0] ?? null;
+ }
+
+ get _slottedChildren() {
+ if (!this.shadowRoot) return null;
+ const slot = this.shadowRoot.querySelector('slot');
+ return slot.assignedElements({flatten: true});
+ }
+}
+window.customElements.define('twpt-form-field', TwptFormField);