@solid-design-system/components 3.24.0 → 4.0.0-next.1

package/dist/versioned-package/internal/form.js

@@ -1,302 +0,0 @@
-import { html } from "lit";
-const formCollections = /* @__PURE__ */ new WeakMap();
-const reportValidityOverloads = /* @__PURE__ */ new WeakMap();
-const userInteractedControls = /* @__PURE__ */ new WeakMap();
-const interactions = /* @__PURE__ */ new WeakMap();
-class FormControlController {
-  constructor(host, options) {
-    this.handleFormData = (event) => {
-      const disabled = this.options.disabled(this.host);
-      const name = this.options.name(this.host);
-      const value = this.options.value(this.host);
-      const isButton = this.host.tagName.toLowerCase() === "sd-3-24-0-button";
-      if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
-        if (Array.isArray(value)) {
-          value.forEach((val) => {
-            event.formData.append(name, val.toString());
-          });
-        } else {
-          event.formData.append(name, value.toString());
-        }
-      }
-    };
-    this.handleFormSubmit = (event) => {
-      var _a, _b;
-      const disabled = this.options.disabled(this.host);
-      const reportValidity = this.options.reportValidity;
-      if (this.form && !this.form.noValidate) {
-        (_a = formCollections.get(this.form)) == null ? void 0 : _a.forEach((control) => {
-          this.setUserInteracted(control, true);
-        });
-      }
-      if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        const invalidElements = (_b = this.form) == null ? void 0 : _b.querySelectorAll("[data-invalid]");
-        const sdRadioGroups = Array.from(invalidElements).filter(
-          (element) => element.tagName.toLowerCase() === "sd-3-24-0-radio-group"
-        );
-        sdRadioGroups.forEach((radioGroup) => {
-          var _a2, _b2;
-          (_b2 = (_a2 = radioGroup.shadowRoot) == null ? void 0 : _a2.querySelector("input")) == null ? void 0 : _b2.dispatchEvent(new Event("invalid"));
-        });
-        if (invalidElements == null ? void 0 : invalidElements.length) invalidElements[0].focus();
-      }
-    };
-    this.handleFormReset = () => {
-      this.options.setValue(this.host, this.options.defaultValue(this.host));
-      this.setUserInteracted(this.host, false);
-      interactions.set(this.host, []);
-    };
-    this.handleInteraction = (event) => {
-      const emittedEvents = interactions.get(this.host);
-      if (!emittedEvents.includes(event.type)) {
-        emittedEvents.push(event.type);
-      }
-      if (emittedEvents.length === this.options.assumeInteractionOn.length) {
-        this.setUserInteracted(this.host, true);
-      }
-    };
-    this.fakeUserInteraction = () => {
-      this.setUserInteracted(this.host, true);
-    };
-    (this.host = host).addController(this);
-    this.options = {
-      form: (input) => {
-        if (input.hasAttribute("form") && input.getAttribute("form") !== "") {
-          const root = input.getRootNode();
-          const formId = input.getAttribute("form");
-          if (formId) {
-            return root.getElementById(formId);
-          }
-        }
-        return input.closest("form");
-      },
-      name: (input) => input.name,
-      value: (input) => input.value,
-      defaultValue: (input) => input.defaultValue,
-      disabled: (input) => input.disabled ?? false,
-      reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
-      setValue: (input, value) => input.value = value,
-      assumeInteractionOn: ["sd-3-24-0-input"],
-      ...options
-    };
-  }
-  hostConnected() {
-    const form = this.options.form(this.host);
-    if (form) {
-      this.attachForm(form);
-    }
-    interactions.set(this.host, []);
-    this.options.assumeInteractionOn.forEach((event) => {
-      this.host.addEventListener(event, this.handleInteraction);
-    });
-  }
-  hostDisconnected() {
-    this.detachForm();
-    interactions.delete(this.host);
-    this.options.assumeInteractionOn.forEach((event) => {
-      this.host.removeEventListener(event, this.handleInteraction);
-    });
-  }
-  hostUpdated() {
-    var _a;
-    const form = this.options.form(this.host);
-    if (!form) {
-      this.detachForm();
-    }
-    if (form && this.form !== form) {
-      this.detachForm();
-      this.attachForm(form);
-    }
-    if (this.host.hasUpdated) {
-      this.setValidity((_a = this.host) == null ? void 0 : _a.validity.valid);
-      this.updateValidityStyle();
-    }
-  }
-  attachForm(form) {
-    if (form) {
-      this.form = form;
-      if (formCollections.has(this.form)) {
-        formCollections.get(this.form).add(this.host);
-      } else {
-        formCollections.set(this.form, /* @__PURE__ */ new Set([this.host]));
-      }
-      this.form.addEventListener("formdata", this.handleFormData);
-      this.form.addEventListener("submit", this.handleFormSubmit);
-      this.form.addEventListener("reset", this.handleFormReset);
-      if (!reportValidityOverloads.has(this.form)) {
-        reportValidityOverloads.set(this.form, this.form.reportValidity);
-        this.form.reportValidity = () => this.reportFormValidity();
-      }
-    } else {
-      this.form = void 0;
-    }
-  }
-  detachForm() {
-    var _a;
-    if (this.form) {
-      (_a = formCollections.get(this.form)) == null ? void 0 : _a.delete(this.host);
-      this.form.removeEventListener("formdata", this.handleFormData);
-      this.form.removeEventListener("submit", this.handleFormSubmit);
-      this.form.removeEventListener("reset", this.handleFormReset);
-      if (reportValidityOverloads.has(this.form)) {
-        this.form.reportValidity = reportValidityOverloads.get(this.form);
-        reportValidityOverloads.delete(this.form);
-      }
-    }
-    this.form = void 0;
-  }
-  reportFormValidity() {
-    if (this.form && !this.form.noValidate) {
-      const elements = this.form.querySelectorAll("*");
-      for (const element of elements) {
-        if (typeof element.reportValidity === "function") {
-          if (!element.reportValidity()) {
-            return false;
-          }
-        }
-      }
-    }
-    return true;
-  }
-  setUserInteracted(el, hasInteracted) {
-    userInteractedControls.set(el, hasInteracted);
-    el.requestUpdate();
-  }
-  doAction(type, invoker) {
-    if (this.form) {
-      const button = document.createElement("button");
-      button.type = type;
-      button.style.position = "absolute";
-      button.style.width = "0";
-      button.style.height = "0";
-      button.style.clipPath = "inset(50%)";
-      button.style.overflow = "hidden";
-      button.style.whiteSpace = "nowrap";
-      if (invoker) {
-        button.name = invoker.name;
-        button.value = invoker.value;
-        ["formaction", "formenctype", "formmethod", "formnovalidate", "formtarget"].forEach((attr) => {
-          if (invoker.hasAttribute(attr)) {
-            button.setAttribute(attr, invoker.getAttribute(attr));
-          }
-        });
-      }
-      this.form.append(button);
-      button.click();
-      button.remove();
-    }
-  }
-  /** Checks for the presence of the attributes 'data-user-valid' or 'data-user-invalid' on the host form element and updates its corresponding style state. */
-  updateValidityStyle() {
-    if (this.host.hasAttribute("data-user-valid") && this.host.checkValidity()) {
-      if (this.host.showValidStyle !== void 0) this.host.showValidStyle = true;
-      this.host.showInvalidStyle = false;
-    } else if (this.host.hasAttribute("data-user-invalid") && !this.host.checkValidity()) {
-      if (this.host.showValidStyle !== void 0) this.host.showValidStyle = false;
-      this.host.showInvalidStyle = true;
-    } else {
-      if (this.host.showValidStyle !== void 0) this.host.showValidStyle = false;
-      this.host.showInvalidStyle = false;
-    }
-  }
-  /** Returns the associated `<form>` element, if one exists. */
-  getForm() {
-    return this.form ?? null;
-  }
-  /** Returns a styled `<div>` element to display inline validation messages via its `textContent` property when a form element is invalid. */
-  renderInvalidMessage() {
-    return html`<div id="invalid-message" class="text-error text-sm mt-2 text-left" part="invalid-message" aria-live="polite" ?hidden="${!this.host.showInvalidStyle}"></div>`;
-  }
-  /** Resets the form, restoring all the control to their default value */
-  reset(invoker) {
-    this.doAction("reset", invoker);
-  }
-  /** Submits the form, triggering validation and form data injection. */
-  submit(invoker) {
-    this.doAction("submit", invoker);
-  }
-  /**
-   * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
-   * the host element immediately, i.e. before Lit updates the component in the next update.
-   */
-  setValidity(isValid) {
-    var _a;
-    const host = this.host;
-    const hasInteracted = Boolean(userInteractedControls.get(host));
-    const required = Boolean(host.required);
-    if ((_a = this.form) == null ? void 0 : _a.noValidate) {
-      host.removeAttribute("data-required");
-      host.removeAttribute("data-optional");
-      host.removeAttribute("data-invalid");
-      host.removeAttribute("data-valid");
-      host.removeAttribute("data-user-invalid");
-      host.removeAttribute("data-user-valid");
-      host.removeAttribute("aria-invalid");
-    } else {
-      host.toggleAttribute("data-required", required);
-      host.toggleAttribute("data-optional", !required);
-      host.toggleAttribute("data-invalid", !isValid);
-      host.toggleAttribute("data-valid", isValid);
-      host.toggleAttribute("data-user-invalid", !isValid && hasInteracted);
-      host.toggleAttribute("data-user-valid", isValid && hasInteracted);
-      host.setAttribute("aria-invalid", (!isValid).toString());
-    }
-  }
-  /**
-   * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
-   * that affects constraint validation changes so the component receives the correct validity states.
-   */
-  updateValidity() {
-    const host = this.host;
-    this.setValidity(host == null ? void 0 : host.validity.valid);
-  }
-  /**
-   * Dispatches a non-bubbling, cancelable custom event of type `sd-invalid`.
-   * If no original `invalid` event has been passed then the `sd-invalid`
-   * event will be cancelled before being dispatched.
-   */
-  emitInvalidEvent(originalInvalidEvent) {
-    originalInvalidEvent == null ? void 0 : originalInvalidEvent.preventDefault();
-    const sdInvalidEvent = new CustomEvent("sd-invalid", {
-      bubbles: false,
-      composed: false,
-      cancelable: true,
-      detail: {}
-    });
-    if (!originalInvalidEvent) {
-      sdInvalidEvent.preventDefault();
-    }
-  }
-}
-const validValidityState = Object.freeze({
-  badInput: false,
-  customError: false,
-  patternMismatch: false,
-  rangeOverflow: false,
-  rangeUnderflow: false,
-  stepMismatch: false,
-  tooLong: false,
-  tooShort: false,
-  typeMismatch: false,
-  valid: true,
-  valueMissing: false
-});
-const valueMissingValidityState = Object.freeze({
-  ...validValidityState,
-  valid: false,
-  valueMissing: true
-});
-const customErrorValidityState = Object.freeze({
-  ...validValidityState,
-  valid: false,
-  customError: true
-});
-export {
-  FormControlController,
-  customErrorValidityState,
-  formCollections,
-  validValidityState,
-  valueMissingValidityState
-};

package/dist/versioned-package/internal/longpress.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="node" />
-import { AsyncDirective, type DirectiveParameters, type Part } from 'lit/async-directive.js';
-import { type ElementPart, noChange, nothing } from 'lit';
-interface Callbacks {
-    start: () => void;
-    end: () => void;
-}
-declare class LongPressDirective extends AsyncDirective {
-    host: HTMLButtonElement;
-    observer: MutationObserver;
-    callbacks: Callbacks;
-    interval: NodeJS.Timeout;
-    timeout: NodeJS.Timeout;
-    constructor(part: Part);
-    render(_callback: Callbacks): typeof nothing;
-    update(part: ElementPart, [callbacks]: DirectiveParameters<this>): typeof noChange;
-    protected disconnected(): void;
-    private handlePointerDown;
-    private spinOnLongPressCallback;
-    private handlePointerUp;
-    private stopSpinningAndCleanUp;
-}
-export declare const longPress: (_callback: Callbacks) => import("lit/async-directive").DirectiveResult<typeof LongPressDirective>;
-export type { LongPressDirective };

package/dist/versioned-package/internal/longpress.js

@@ -1,80 +0,0 @@
-import { directive, AsyncDirective, PartType } from "lit/async-directive.js";
-import { nothing, noChange } from "lit";
-class LongPressDirective extends AsyncDirective {
-  constructor(part) {
-    super(part);
-    this.handlePointerDown = (event) => {
-      if (event.button !== 0 || this.host.disabled) {
-        return;
-      }
-      this.spinOnLongPressCallback(event);
-    };
-    this.handlePointerUp = (pointerUp) => {
-      pointerUp == null ? void 0 : pointerUp.preventDefault();
-      pointerUp == null ? void 0 : pointerUp.stopPropagation();
-      if (this.timeout) {
-        this.callbacks.start();
-      }
-      this.stopSpinningAndCleanUp();
-      this.callbacks.end();
-      document.removeEventListener("pointerup", this.handlePointerUp);
-    };
-    if (part.type !== PartType.ELEMENT || !(part.element instanceof HTMLButtonElement)) {
-      throw new Error("The `longPress` directive must be used on an HTMLButtonElement.");
-    }
-  }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, class-methods-use-this
-  render(_callback) {
-    return nothing;
-  }
-  update(part, [callbacks]) {
-    if (this.callbacks === void 0 && this.host === void 0) {
-      this.host = part.element;
-      this.callbacks = { ...callbacks };
-      this.host.addEventListener("pointerdown", this.handlePointerDown);
-    }
-    return noChange;
-  }
-  disconnected() {
-    this.stopSpinningAndCleanUp();
-    this.host.removeEventListener("pointerdown", this.handlePointerDown);
-    document.removeEventListener("pointerup", this.handlePointerUp);
-  }
-  /**
-   * Start spinning on long press clicks otherwise handle as single click event
-   */
-  spinOnLongPressCallback(event) {
-    var _a;
-    event.preventDefault();
-    event.stopPropagation();
-    this.timeout = setTimeout(() => {
-      this.timeout = void 0;
-      this.interval = setInterval(() => {
-        this.callbacks.start();
-      }, 50);
-    }, 500);
-    document.addEventListener("pointerup", this.handlePointerUp);
-    (_a = this.observer) == null ? void 0 : _a.disconnect();
-    this.observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.attributeName === "disabled") {
-          this.stopSpinningAndCleanUp();
-        }
-      });
-    });
-    this.observer.observe(this.host, { attributes: true });
-  }
-  /**
-   * Stop the spinning and clean up all timer and observer
-   */
-  stopSpinningAndCleanUp() {
-    var _a;
-    clearInterval(this.interval);
-    clearTimeout(this.timeout);
-    (_a = this.observer) == null ? void 0 : _a.disconnect();
-  }
-}
-const longPress = directive(LongPressDirective);
-export {
-  longPress
-};

package/dist/versioned-package/internal/math.js

@@ -1,13 +0,0 @@
-function clamp(value, min, max) {
-  const noNegativeZero = (n) => Object.is(n, -0) ? 0 : n;
-  if (value < min) {
-    return noNegativeZero(min);
-  }
-  if (value > max) {
-    return noNegativeZero(max);
-  }
-  return noNegativeZero(value);
-}
-export {
-  clamp
-};

package/dist/versioned-package/internal/modal.js

@@ -1,52 +0,0 @@
-import { getTabbableBoundary } from "./tabbable.js";
-let activeModals = [];
-class Modal {
-  constructor(element) {
-    this.tabDirection = "forward";
-    this.element = element;
-    this.handleFocusIn = this.handleFocusIn.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleKeyUp = this.handleKeyUp.bind(this);
-  }
-  activate() {
-    activeModals.push(this.element);
-    document.addEventListener("focusin", this.handleFocusIn);
-    document.addEventListener("keydown", this.handleKeyDown);
-    document.addEventListener("keyup", this.handleKeyUp);
-  }
-  deactivate() {
-    activeModals = activeModals.filter((modal) => modal !== this.element);
-    document.removeEventListener("focusin", this.handleFocusIn);
-    document.removeEventListener("keydown", this.handleKeyDown);
-    document.removeEventListener("keyup", this.handleKeyUp);
-  }
-  isActive() {
-    return activeModals[activeModals.length - 1] === this.element;
-  }
-  checkFocus() {
-    if (this.isActive()) {
-      if (!this.element.matches(":focus-within")) {
-        const { start, end } = getTabbableBoundary(this.element);
-        const target = this.tabDirection === "forward" ? start : end;
-        if (typeof (target == null ? void 0 : target.focus) === "function") {
-          target.focus({ preventScroll: true });
-        }
-      }
-    }
-  }
-  handleFocusIn() {
-    this.checkFocus();
-  }
-  handleKeyDown(event) {
-    if (event.key === "Tab" && event.shiftKey) {
-      this.tabDirection = "backward";
-      requestAnimationFrame(() => this.checkFocus());
-    }
-  }
-  handleKeyUp() {
-    this.tabDirection = "forward";
-  }
-}
-export {
-  Modal as default
-};

package/dist/versioned-package/internal/offset.js

@@ -1,9 +0,0 @@
-function getOffset(element, parent) {
-  return {
-    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
-    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
-  };
-}
-export {
-  getOffset
-};

package/dist/versioned-package/internal/register-custom-element.d.ts

@@ -1,19 +0,0 @@
-interface Constructor<T> {
-    new (...args: any[]): T;
-}
-interface ClassDescriptor {
-    kind: 'class';
-    elements: ClassElement[];
-    finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;
-}
-interface ClassElement {
-    kind: 'field' | 'method';
-    key: PropertyKey;
-    placement: 'static' | 'prototype' | 'own';
-    initializer?: Function;
-    extras?: ClassElement[];
-    finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;
-    descriptor?: PropertyDescriptor;
-}
-export declare const customElement: (tagName: string) => (classOrDescriptor: Constructor<HTMLElement> | ClassDescriptor) => any;
-export {};

package/dist/versioned-package/internal/register-custom-element.js

@@ -1,30 +0,0 @@
-const legacyCustomElement = (tagName, clazz) => {
-  if (window.customElements.get(tagName)) {
-    console.warn(`Custom element ${tagName} already defined. Registration skipped.`);
-    return clazz;
-  }
-  window.customElements.define(tagName, clazz);
-  return clazz;
-};
-const standardCustomElement = (tagName, descriptor) => {
-  const { kind, elements } = descriptor;
-  return {
-    kind,
-    elements,
-    // This callback is called once the class is otherwise fully defined
-    finisher(clazz) {
-      if (window.customElements.get(tagName)) {
-        console.warn(`Custom element ${tagName} already defined. Registration skipped.`);
-        return;
-      }
-      window.customElements.define(tagName, clazz);
-    }
-  };
-};
-const customElement = (tagName) => (classOrDescriptor) => (
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-  typeof classOrDescriptor === "function" ? legacyCustomElement(tagName, classOrDescriptor) : standardCustomElement(tagName, classOrDescriptor)
-);
-export {
-  customElement
-};

package/dist/versioned-package/internal/scroll.js

@@ -1,49 +0,0 @@
-import { getOffset } from "./offset.js";
-const locks = /* @__PURE__ */ new Set();
-function getScrollbarWidth() {
-  const documentWidth = document.documentElement.clientWidth;
-  return Math.abs(window.innerWidth - documentWidth);
-}
-function lockBodyScrolling(lockingEl) {
-  locks.add(lockingEl);
-  if (!document.body.classList.contains("sd-scroll-lock")) {
-    const scrollbarWidth = getScrollbarWidth();
-    document.body.classList.add("sd-scroll-lock");
-    document.body.style.setProperty("--sd-scroll-lock-size", `${scrollbarWidth}px`);
-  }
-}
-function unlockBodyScrolling(lockingEl) {
-  locks.delete(lockingEl);
-  if (locks.size === 0) {
-    document.body.classList.remove("sd-scroll-lock");
-    document.body.style.removeProperty("--sd-scrollbar-width");
-  }
-}
-function scrollIntoView(element, container, direction = "vertical", behavior = "smooth") {
-  const offset = getOffset(element, container);
-  const offsetTop = offset.top + container.scrollTop;
-  const offsetLeft = offset.left + container.scrollLeft;
-  const minX = container.scrollLeft;
-  const maxX = container.scrollLeft + container.offsetWidth;
-  const minY = container.scrollTop;
-  const maxY = container.scrollTop + container.offsetHeight;
-  if (direction === "horizontal" || direction === "both") {
-    if (offsetLeft < minX) {
-      container.scrollTo({ left: offsetLeft, behavior });
-    } else if (offsetLeft + element.clientWidth > maxX) {
-      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
-    }
-  }
-  if (direction === "vertical" || direction === "both") {
-    if (offsetTop < minY) {
-      container.scrollTo({ top: offsetTop, behavior });
-    } else if (offsetTop + element.clientHeight > maxY) {
-      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
-    }
-  }
-}
-export {
-  lockBodyScrolling,
-  scrollIntoView,
-  unlockBodyScrolling
-};

package/dist/versioned-package/internal/slot.js

@@ -1,47 +0,0 @@
-class HasSlotController {
-  constructor(host, ...slotNames) {
-    this.slotNames = [];
-    (this.host = host).addController(this);
-    this.slotNames = slotNames;
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-  }
-  hasDefaultSlot() {
-    return [...this.host.childNodes].some((node) => {
-      if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "") {
-        return true;
-      }
-      if (node.nodeType === node.ELEMENT_NODE) {
-        const el = node;
-        const tagName = el.tagName.toLowerCase();
-        if (tagName === "sd-visually-hidden") {
-          return false;
-        }
-        if (!el.hasAttribute("slot")) {
-          return true;
-        }
-      }
-      return false;
-    });
-  }
-  hasNamedSlot(name) {
-    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
-  }
-  test(slotName) {
-    return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
-  }
-  hostConnected() {
-    this.host.shadowRoot.addEventListener("slotchange", this.handleSlotChange);
-  }
-  hostDisconnected() {
-    this.host.shadowRoot.removeEventListener("slotchange", this.handleSlotChange);
-  }
-  handleSlotChange(event) {
-    const slot = event.target;
-    if (this.slotNames.includes("[default]") && !slot.name || slot.name && this.slotNames.includes(slot.name)) {
-      this.host.requestUpdate();
-    }
-  }
-}
-export {
-  HasSlotController
-};

package/dist/versioned-package/internal/solid-element.d.ts

@@ -1,30 +0,0 @@
-import { LitElement } from 'lit';
-import type { CSSResultGroup } from 'lit';
-export default class SolidElement extends LitElement {
-    dir: string;
-    lang: string;
-    static styles: CSSResultGroup;
-    emit(name: string, options?: CustomEventInit): CustomEvent<any>;
-}
-export interface SolidFormControl extends SolidElement {
-    name: string;
-    value: unknown;
-    disabled?: boolean;
-    defaultValue?: unknown;
-    defaultChecked?: boolean;
-    form?: string;
-    pattern?: string;
-    min?: number | Date | string;
-    max?: number | Date | string;
-    step?: number | 'any';
-    required?: boolean;
-    minlength?: number;
-    maxlength?: number;
-    readonly validity?: ValidityState;
-    readonly validationMessage?: string;
-    checkValidity: () => boolean;
-    reportValidity: () => boolean;
-    setCustomValidity: (message: string) => void;
-    showValidStyle?: boolean;
-    showInvalidStyle?: boolean;
-}