@viasat/beam-web-components 2.0.0

package/wip/FileUpload/FileUpload.js

@@ -0,0 +1,451 @@
+import { consume as G, provide as K } from "@lit/context";
+import { unsafeCSS as J, nothing as b, html as y } from "lit";
+import { property as c, queryAssignedElements as N, state as P } from "lit/decorators.js";
+import { createRef as Q } from "lit/directives/ref.js";
+import X from "clsx";
+import { t as Y } from "../../chunks/constants.jOWREYQE.js";
+import { p as Z, a as q, g as ee, d as z } from "../../chunks/classNames.Cq_tbDRp.js";
+import { f as te } from "../../chunks/fileUpload.module.kN6o64aL.js";
+import { d as ie } from "../../chunks/tokens.CTW8Tt94.js";
+import { r as re } from "../../chunks/delegate.baxDQosr.js";
+import { c as se } from "../../chunks/register-custom-element.DHGKOhmA.js";
+import { bmFormContext as oe, bmFormInitials as H } from "../Form/Form.context.js";
+import { FormField as ae } from "../Form/Form.decorator.js";
+import { fileUploadContext as le } from "./FileUploadContext.js";
+import "../../chunks/HelperText.CcVVOtA3.js";
+import "./FileUpload.Dropzone.js";
+import "./FileUpload.List.js";
+var ne = function(e, t) {
+  if (e && t) {
+    var i = Array.isArray(t) ? t : t.split(",");
+    if (i.length === 0)
+      return !0;
+    var r = e.name || "", s = (e.type || "").toLowerCase(), n = s.replace(/\/.*$/, "");
+    return i.some(function(p) {
+      var d = p.trim().toLowerCase();
+      return d.charAt(0) === "." ? r.toLowerCase().endsWith(d) : d.endsWith("/*") ? n === d.replace(/\/.*$/, "") : s === d;
+    });
+  }
+  return !0;
+};
+const de = (e, t) => {
+  const i = new FormData();
+  return t.files.forEach((r, s) => {
+    t.shouldAddToFormData[s] && i.append(e, r);
+  }), i;
+}, he = {
+  fileItems: [],
+  abortControllers: [],
+  files: [],
+  shouldAddToFormData: [],
+  validFileCount: 0
+};
+function pe(e) {
+  return e < 6 ? `${e} B` : e < 1048576 / 2 ? `${(e / 1024).toFixed(2)} KB` : e < 1073741824 / 2 ? `${(e / 1048576).toFixed(2)} MB` : e < 1099511627776 / 2 ? `${(e / 1073741824).toFixed(2)} GB` : `${(e / 1099511627776 / 2).toFixed(2)} TB`;
+}
+const ce = (e, t, { accept: i, fileLimit: r, maxFileSize: s }) => {
+  if (i && !ne(e, i))
+    return "Incorrect file type";
+  if (r && t >= r)
+    return "Attachment limit reached";
+  if (s && e.size > s)
+    return "File size exceeds limit";
+}, me = (e, {
+  state: t,
+  error: i
+}) => ({
+  id: URL.createObjectURL(e),
+  fileName: e.name,
+  fileSize: pe(e.size),
+  state: t ?? "uploaded",
+  progress: 0,
+  error: i
+}), ue = (e, t) => {
+  const i = new Image();
+  i.src = URL.createObjectURL(e), i.onload = () => {
+    const r = document.createElement("canvas"), s = r.getContext("2d");
+    s && (r.width = i.width, r.height = i.height, s.drawImage(i, 0, 0), t(r.toDataURL("image/jpeg")));
+  };
+}, fe = (e) => URL.createObjectURL(e), ye = (e, t) => {
+  const i = document.createElement("video"), r = document.createElement("source"), s = document.createElement("canvas"), n = s.getContext("2d");
+  if (!n)
+    return;
+  i.crossOrigin = "anonymous", i.preload = "metadata", i.appendChild(r), r.src = URL.createObjectURL(e), i.currentTime = 0, i.load(), i.addEventListener("loadedmetadata", () => {
+    s.width = i.videoWidth, s.height = i.videoHeight;
+  });
+  const p = () => {
+    n.drawImage(i, 0, 0, s.width, s.height), t(s.toDataURL("image/jpeg"));
+  };
+  if (typeof i.requestVideoFrameCallback < "u")
+    i.requestVideoFrameCallback(p);
+  else {
+    const d = () => {
+      setTimeout(p, 0), i.removeEventListener("seeked", d);
+    };
+    i.addEventListener("seeked", d);
+  }
+}, ve = (e, t) => {
+  if (e.type === "image/gif")
+    return ue(e, t);
+  if (e.type.startsWith("image/"))
+    return fe(e);
+  if (e.type.startsWith("video/"))
+    return ye(e, t);
+};
+function xe(e, t) {
+  t({ type: "remove", payload: e });
+}
+function Fe(e, t, i, r, s, n, p, d) {
+  if (!e)
+    return;
+  let f = i;
+  const k = Array.from(e).map((v) => {
+    const C = ce(v, f, {
+      accept: r,
+      fileLimit: s,
+      maxFileSize: n
+    }), m = me(v, {
+      error: C,
+      state: C ? "error" : p
+    }), V = new AbortController();
+    m.thumbnail = ve(v, (x) => {
+      t({
+        type: "update",
+        payload: { fileItem: m, updates: { thumbnail: x } }
+      });
+    });
+    let $ = !C;
+    return C || (f++, d ? $ = (d == null ? void 0 : d(
+      v,
+      {
+        progress(x) {
+          t({
+            type: "update",
+            payload: { fileItem: m, updates: { state: "uploading", progress: x } }
+          });
+        },
+        success() {
+          t({
+            type: "update",
+            payload: { fileItem: m, updates: { state: "success" } }
+          }), setTimeout(() => {
+            t({
+              type: "update",
+              payload: { fileItem: m, updates: { state: "uploaded" } }
+            });
+          }, 3e3);
+        },
+        error(x) {
+          t({
+            type: "update",
+            payload: { fileItem: m, updates: { state: "error", error: x } }
+          });
+        },
+        dismiss() {
+          t({ type: "remove", payload: m });
+        }
+      },
+      V.signal
+    )) ?? !1 : $ = !0), { file: v, fileItem: m, abortController: V, shouldAddToFormData: $ };
+  });
+  t({ type: "add", payload: k });
+}
+function Ce(e, t) {
+  var i;
+  switch (t.type) {
+    case "add":
+      return {
+        fileItems: [
+          ...e.fileItems,
+          ...t.payload.map(({ fileItem: r }) => r)
+        ],
+        abortControllers: [
+          ...e.abortControllers,
+          ...t.payload.map(({ abortController: r }) => r)
+        ],
+        files: [...e.files, ...t.payload.map(({ file: r }) => r)],
+        shouldAddToFormData: [
+          ...e.shouldAddToFormData,
+          ...t.payload.map(({ shouldAddToFormData: r }) => r)
+        ],
+        validFileCount: t.payload.reduce(
+          (r, { fileItem: s }) => s.state !== "error" ? r + 1 : r,
+          e.validFileCount
+        )
+      };
+    case "remove": {
+      const { payload: r } = t, s = e.fileItems.findIndex((n) => n.id === r.id);
+      return s < 0 ? e : ((i = e.abortControllers[s]) == null || i.abort(), {
+        fileItems: [
+          ...e.fileItems.slice(0, s),
+          ...e.fileItems.slice(s + 1)
+        ],
+        abortControllers: [
+          ...e.abortControllers.slice(0, s),
+          ...e.abortControllers.slice(s + 1)
+        ],
+        files: [...e.files.slice(0, s), ...e.files.slice(s + 1)],
+        shouldAddToFormData: [
+          ...e.shouldAddToFormData.slice(0, s),
+          ...e.shouldAddToFormData.slice(s + 1)
+        ],
+        validFileCount: e.validFileCount - (r.state !== "error" ? 1 : 0)
+      });
+    }
+    case "update": {
+      const { fileItem: r, updates: s } = t.payload, n = e.fileItems.findIndex((k) => k.id === r.id);
+      if (n < 0)
+        return e;
+      const p = e.fileItems[n].state, d = s.state ?? p;
+      let f = e.validFileCount;
+      return p !== "error" && d === "error" && (f -= 1), p === "error" && d !== "error" && (f += 1), {
+        ...e,
+        fileItems: [
+          ...e.fileItems.slice(0, n),
+          { ...e.fileItems[n], ...s },
+          ...e.fileItems.slice(n + 1)
+        ],
+        validFileCount: f
+      };
+    }
+    default:
+      return e;
+  }
+}
+var be = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, j = (e) => {
+  throw TypeError(e);
+}, l = (e, t, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? ge(t, i) : t, n = e.length - 1, p; n >= 0; n--)
+    (p = e[n]) && (s = (r ? p(t, i, s) : p(s)) || s);
+  return r && s && be(t, i, s), s;
+}, we = (e, t, i) => t.has(e) || j("Cannot " + i), o = (e, t, i) => (we(e, t, "read from private field"), i ? i.call(e) : t.get(e)), h = (e, t, i) => t.has(e) ? j("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), u, L, A, S, T, W, E, _, I, F, M, R, D, B, U, O;
+const { baseClassNamePrefix: Se, classModifierPrefix: g, subElementClassPrefix: w } = ee("file-upload");
+class _e extends CustomEvent {
+  constructor(t, i, r) {
+    super("bm-selected", {
+      detail: { file: t, actions: i, abortSignal: r },
+      cancelable: !0,
+      bubbles: !0,
+      composed: !0
+    });
+  }
+}
+let a = class extends ae {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.validationRules = [], this.fileUploadContext = {}, this.pickerRef = Q(), h(this, u, () => {
+      var e;
+      return !!(this.disabled || (e = this.formContext) != null && e.disabled);
+    }), h(this, L, () => {
+      var e;
+      return !!(this.readOnly || (e = this.formContext) != null && e.readOnly);
+    }), h(this, A, () => {
+      var e;
+      return !!(this.required || (e = this.formContext) != null && e.required);
+    }), this.filesState = he, h(this, S, (e) => {
+      this.filesState = Ce(this.filesState, e), this.fileUploadContext = {
+        ...this.fileUploadContext,
+        ctxFileItems: this.filesState.fileItems
+      }, this.setAssociatedValue(o(this, I).call(this));
+    }), h(this, T, (e, t, i) => {
+      const r = new _e(e, t, i);
+      return this.dispatchEvent(r);
+    }), h(this, W, (e) => {
+      Fe(
+        e,
+        o(this, S),
+        this.filesState.validFileCount,
+        this.accept,
+        this.fileLimit,
+        this.maxFileSize,
+        "uploaded",
+        o(this, T)
+      );
+    }), h(this, E, (e) => {
+      xe(e, o(this, S));
+    }), h(this, _, new CSSStyleSheet()), h(this, I, () => de(this.name, this.filesState)), h(this, F, () => {
+      const { initialValues: e } = this.formContext || H, { [this.name]: t } = e || {};
+      this.setAssociatedValue(
+        t instanceof FormData ? t : new FormData()
+      );
+    }), h(this, M, () => {
+      var e;
+      (e = this.pickerRef.value) == null || e.focus();
+    }), h(this, R, (e) => this.error ? y`
+      <bm-helper-text
+        id="${e}"
+        text="${this.error}"
+        appearance="negative"
+        .disabled="${o(this, u).call(this)}"
+        class="${w}helper-text"
+      ></bm-helper-text>
+    ` : b), this._hasPickerSlot = !1, h(this, D, () => !!this._hasPickerSlot), h(this, B, () => y`
+      <slot name="picker" @slotchange=${(t) => {
+      this._hasPickerSlot = z(t);
+    }}></slot>
+      ${o(this, D).call(this) ? b : y`<bm-file-upload-dropzone></bm-file-upload-dropzone>`}
+    `), this._hasFilesListSlot = !1, h(this, U, () => !!this._hasFilesListSlot), h(this, O, () => y`
+      <div class="${w}files-list">
+        <slot name="files-list" @slotchange=${(t) => {
+      this._hasFilesListSlot = z(t);
+    }}></slot>
+        ${o(this, U).call(this) ? b : y`<bm-file-upload-list thumbnail="false"></bm-file-upload-list>`}
+      </div>
+    `);
+  }
+  willUpdate() {
+    this.fileUploadContext = {
+      ctxAccept: this.accept,
+      ctxMultiple: this.multiple,
+      ctxFileLimit: this.fileLimit,
+      ctxMaxFileSize: this.maxFileSize,
+      ctxFileItems: this.filesState.fileItems,
+      ctxAddFiles: o(this, W),
+      ctxDismissFile: o(this, E),
+      ctxError: !!this.error,
+      ctxDisabled: o(this, u).call(this)
+    };
+    const e = this.fluid ? "100%" : this.width ?? ie;
+    o(this, _).replace(`:host { width: ${e}; }`);
+  }
+  firstUpdated() {
+    var i, r;
+    (r = (i = this.shadowRoot) == null ? void 0 : i.adoptedStyleSheets) == null || r.push(o(this, _));
+    const { value: e } = this.pickerRef, { registerField: t } = this.formContext || H;
+    !e || o(this, u).call(this) || t({
+      validators: this.validationRules,
+      initializer: o(this, F),
+      field: e,
+      errorSetter: this.setValidationErrors.bind(this)
+    });
+  }
+  updated(e) {
+    const [t] = this._textFieldLabel, [i] = this._textFieldHelperText, { decorate: r } = q(t), { decorate: s } = q(i);
+    Z(e, ["formContext"]) && this.ctxValueChanged(this.formContext, this.pickerRef) && o(this, F).call(this), s({ disabled: o(this, u).call(this) }), r({
+      disabled: o(this, u).call(this),
+      required: o(this, A).call(this) && !this.hideRequiredMarker
+    });
+  }
+  formAssociatedCallback() {
+    this.setAssociatedValue(o(this, I).call(this));
+  }
+  formResetCallback() {
+    o(this, F).call(this);
+  }
+  render() {
+    const { length: e } = this.validationErrors(), t = !!this.error || !!e, i = X(
+      Se,
+      t && `${g}error`,
+      this.theme && Y(this.theme),
+      this.fluid && `${g}fluid`,
+      o(this, u).call(this) && `${g}disabled`,
+      o(this, L).call(this) && `${g}read-only`
+    );
+    return y`
+      <div class=${i} style="max-width: ${this.width ?? b}">
+        <div class="${w}uploader">
+          <slot
+            name="label"
+            id=${this.labelId}
+            @bm-label-clicked=${o(this, M)}
+          ></slot>
+          <div class="${w}field">${o(this, B).call(this)}</div>
+          <slot name="helper-text" id="${this.helperTextId}"></slot>
+          ${o(this, R).call(this, this.errorId)} ${this.renderValidationErrors()}
+        </div>
+
+        ${o(this, O).call(this)}
+      </div>
+    `;
+  }
+};
+u = /* @__PURE__ */ new WeakMap();
+L = /* @__PURE__ */ new WeakMap();
+A = /* @__PURE__ */ new WeakMap();
+S = /* @__PURE__ */ new WeakMap();
+T = /* @__PURE__ */ new WeakMap();
+W = /* @__PURE__ */ new WeakMap();
+E = /* @__PURE__ */ new WeakMap();
+_ = /* @__PURE__ */ new WeakMap();
+I = /* @__PURE__ */ new WeakMap();
+F = /* @__PURE__ */ new WeakMap();
+M = /* @__PURE__ */ new WeakMap();
+R = /* @__PURE__ */ new WeakMap();
+D = /* @__PURE__ */ new WeakMap();
+B = /* @__PURE__ */ new WeakMap();
+U = /* @__PURE__ */ new WeakMap();
+O = /* @__PURE__ */ new WeakMap();
+a.styles = J(te);
+re(a);
+l([
+  c({ type: String })
+], a.prototype, "accept", 2);
+l([
+  c({
+    type: String,
+    converter(e) {
+      return e === "true" ? !0 : e === "false" ? !1 : e;
+    }
+  })
+], a.prototype, "error", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "disabled", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "multiple", 2);
+l([
+  c({ type: Number })
+], a.prototype, "fileLimit", 2);
+l([
+  c({ type: Number })
+], a.prototype, "maxFileSize", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "required", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "readOnly", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "hideRequiredMarker", 2);
+l([
+  c({ type: Array })
+], a.prototype, "validationRules", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "fluid", 2);
+l([
+  c({ type: String })
+], a.prototype, "width", 2);
+l([
+  c({ type: String })
+], a.prototype, "theme", 2);
+l([
+  G({ context: oe, subscribe: !0 }),
+  c({ attribute: !1 })
+], a.prototype, "formContext", 2);
+l([
+  K({ context: le })
+], a.prototype, "fileUploadContext", 2);
+l([
+  N({ slot: "label" })
+], a.prototype, "_textFieldLabel", 2);
+l([
+  N({ slot: "helper-text" })
+], a.prototype, "_textFieldHelperText", 2);
+l([
+  P()
+], a.prototype, "filesState", 2);
+l([
+  P()
+], a.prototype, "_hasPickerSlot", 2);
+l([
+  P()
+], a.prototype, "_hasFilesListSlot", 2);
+a = l([
+  se("bm-file-upload")
+], a);
+export {
+  a as BmFileUpload,
+  _e as BmFileUploadFileSelectedEvent
+};

package/wip/FileUpload/FileUploadContext.d.ts

@@ -0,0 +1,5 @@
+import { FileUploadContextValue } from '@viasat/beam-shared/components/fileUpload';
+export declare const fileUploadContext: {
+    __context__: FileUploadContextValue;
+};
+//# sourceMappingURL=FileUploadContext.d.ts.map

package/wip/FileUpload/FileUploadContext.js

@@ -0,0 +1,8 @@
+import { createContext as o } from "@lit/context";
+import { p as t } from "../../chunks/constants.jOWREYQE.js";
+const m = o(
+  Symbol(`${t}form-context`)
+);
+export {
+  m as fileUploadContext
+};

package/wip/FileUpload/FileUploadListContext.d.ts

@@ -0,0 +1,5 @@
+import { FileUploadListContextValue } from '@viasat/beam-shared/components/fileUpload';
+export declare const fileUploadListContext: {
+    __context__: FileUploadListContextValue;
+};
+//# sourceMappingURL=FileUploadListContext.d.ts.map

package/wip/FileUpload/FileUploadListContext.js

@@ -0,0 +1,8 @@
+import { createContext as t } from "@lit/context";
+import { p as o } from "../../chunks/constants.jOWREYQE.js";
+const i = t(
+  Symbol(`${o}form-list-context`)
+);
+export {
+  i as fileUploadListContext
+};

package/wip/FileUpload/index.d.ts

@@ -0,0 +1,6 @@
+export * from './FileUpload';
+export * from './FileUpload.Button';
+export * from './FileUpload.Dropzone';
+export * from './FileUpload.List';
+export * from './FileUpload.List.Item';
+//# sourceMappingURL=index.d.ts.map

package/wip/FileUpload/index.js

@@ -0,0 +1,13 @@
+import { BmFileUpload as l, BmFileUploadFileSelectedEvent as m } from "./FileUpload.js";
+import { BmFileUploadButton as t } from "./FileUpload.Button.js";
+import { BmFileUploadDropzone as i } from "./FileUpload.Dropzone.js";
+import { BmFileUploadList as B } from "./FileUpload.List.js";
+import { BmFileUploadListItem as a } from "./FileUpload.List.Item.js";
+export {
+  l as BmFileUpload,
+  t as BmFileUploadButton,
+  i as BmFileUploadDropzone,
+  m as BmFileUploadFileSelectedEvent,
+  B as BmFileUploadList,
+  a as BmFileUploadListItem
+};

package/wip/Form/Form.context.d.ts

@@ -0,0 +1,19 @@
+import { FormValue, FieldMeta } from '@viasat/beam-shared/components/form';
+export interface BmFormContextStates {
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+}
+export interface BmFormContextHandlers {
+    formChangeHandler: (event: Event) => void;
+    formBlurHandler: (event: FocusEvent) => void;
+}
+export interface BmFormContext extends BmFormContextStates, BmFormContextHandlers {
+    initialValues: Record<string, FormValue>;
+    registerField: (metaData: FieldMeta) => void;
+}
+export declare const bmFormInitials: BmFormContext;
+export declare const bmFormContext: {
+    __context__: BmFormContext;
+};
+//# sourceMappingURL=Form.context.d.ts.map

package/wip/Form/Form.context.js

@@ -0,0 +1,20 @@
+import { createContext as e } from "@lit/context";
+import { p as r } from "../../chunks/constants.jOWREYQE.js";
+const t = {
+  required: !1,
+  disabled: !1,
+  readOnly: !1,
+  initialValues: {},
+  registerField: () => {
+  },
+  formBlurHandler: () => {
+  },
+  formChangeHandler: () => {
+  }
+}, a = e(
+  Symbol(`${r}form-context`)
+);
+export {
+  a as bmFormContext,
+  t as bmFormInitials
+};

package/wip/Form/Form.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+import { FormValue, FieldMeta, ValidationMode } from '@viasat/beam-shared/components/form';
+import { Optional } from '@viasat/beam-shared/utils/types';
+import { BmFormContext } from './Form.context';
+export { validators } from '@viasat/beam-shared/components/form';
+/**
+ * @summary `bm-form`
+ *
+ * @slot slot - Add controls to the Form
+ * @fires submit - Validates the inputs and submits the form
+ */
+export declare class BmForm extends LitElement {
+    #private;
+    /**
+     * Specify if validation runs on change or when loosing focus
+     */
+    validationMode: ValidationMode;
+    /**
+     * Specify initial values on Form controls based on their names
+     */
+    initialValues: Record<string, FormValue>;
+    /**
+     * Specify if input is a required
+     */
+    required: boolean;
+    /**
+     * Specify if input is a disabled
+     */
+    disabled: boolean;
+    /**
+     * Specify if input is a read only
+     */
+    readOnly: boolean;
+    action: Optional<string>;
+    method: Optional<string>;
+    target: Optional<string>;
+    enctype: Optional<string>;
+    formMeta: Record<string, FieldMeta>;
+    formRef: import('lit-html/directives/ref').Ref<HTMLFormElement>;
+    private _actionFired;
+    formContext: BmFormContext;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-form': BmForm;
+    }
+}
+//# sourceMappingURL=Form.d.ts.map

package/wip/Form/Form.decorator.d.ts

@@ -0,0 +1,47 @@
+import { nothing, LitElement } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+import { FormValidator, FormValue } from '@viasat/beam-shared/components/form';
+import { Optional } from '@viasat/beam-shared/utils/types';
+import { FinalizeAssociatedResult } from '../../../utils/mixins/types';
+import { BmFormContext } from '../Form/Form.context';
+export declare class FormField extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    protected labelId: string;
+    protected errorId: string;
+    protected helperTextId: string;
+    protected validationErrorsId: string;
+    protected internals: ElementInternals;
+    protected formFieldRef: Ref<Element>;
+    protected contextInitialValue: Optional<string>;
+    protected contextBrowserValue: Optional<string>;
+    id: string;
+    name: string;
+    value: string;
+    validationRules: Array<FormValidator>;
+    inputAriaLabel: Optional<string>;
+    formContext: BmFormContext;
+    private _validationErrors;
+    protected validationErrors: () => Array<Optional<string>>;
+    protected setAssociatedValue(value: FormValue): void;
+    protected requestAssociatedSubmit(): void;
+    protected setValidationErrors: (errors: Array<Optional<string>>) => void;
+    protected validationErrorShown: () => boolean;
+    connectedCallback(): void;
+    protected ctxValueChanged(ctx: BmFormContext, ref: Ref): boolean;
+    disconnectedCallback(): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    finalizeAssociatedCallback(ctxValue: string): FinalizeAssociatedResult;
+    protected submitFormByEnter: ({ key }: KeyboardEvent) => void;
+    protected forwardLabelFocus: () => void;
+    protected validateFieldOnBlur: (event: FocusEvent) => void;
+    protected validateFieldOnChange: (event: Event) => void;
+    protected getContextValue: () => string;
+    protected setContextValue: () => void;
+    protected setContextValidation: () => void;
+    protected contextInitialsChanged: () => boolean;
+    protected renderError: (error: Optional<string>, disabled: boolean) => typeof nothing | import('lit-html').TemplateResult<1>;
+    protected renderValidationErrors: () => typeof nothing | import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=Form.decorator.d.ts.map