@m3e/core 1.0.0-rc.1 → 1.0.0-rc.2

package/src/shared/mixins/ConstraintValidation.ts

@@ -1,213 +0,0 @@
-import { LitElement, PropertyDeclaration, PropertyValues, isServer } from "lit";
-
-import { internals } from "./AttachInternals";
-import { Constructor } from "./Constructor";
-import { FormAssociatedMixin, isFormAssociatedMixin } from "./FormAssociated";
-import { hasKeys } from "./hasKeys";
-import { isTouchedMixin } from "./Touched";
-
-/** A symbol through which a "Form Associated" custom element validates its current state. */
-export const validate = Symbol("validate");
-
-/** Defines functionality for a "Form Associated" custom element that supports constraint validation. */
-export interface ConstraintValidationMixin extends FormAssociatedMixin {
-  /** Whether the element is a submittable element that is a candidate for constraint validation. */
-  readonly willValidate: boolean;
-
-  /** The validity state of the element. */
-  readonly validity: ValidityState;
-
-  /** The error message that would be displayed if the user submits the form, or an empty string if no error message. */
-  readonly validationMessage: string;
-
-  /**
-   * Validates the current state of the control.
-   * @returns {ValidityStateFlags | undefined} The current validity state.
-   */
-  [validate](): ValidityStateFlags | undefined;
-
-  /**
-   * Returns `true` if the element has no validity problems; otherwise, returns `false`, fires
-   * an invalid event, and (if the event isn't canceled) reports the problem to the user.
-   */
-  reportValidity(): boolean;
-
-  /**
-   * Returns `true` if the element has no validity problems; otherwise,
-   * returns `false`, fires an invalid event.
-   */
-  checkValidity(): boolean;
-
-  /**
-   * Sets a custom validity message for the element.
-   * @param error The message to use for validity errors.
-   */
-  setCustomValidity(error: string): void;
-}
-
-/**
- * Determines whether a value is a `ConstraintValidationMixin`.
- * @param {unknown} value The value to test.
- * @returns Whether `value` is a `ConstraintValidationMixin`.
- */
-export function isConstraintValidationMixin(value: unknown): value is ConstraintValidationMixin {
-  return (
-    hasKeys<ConstraintValidationMixin>(
-      value,
-      "willValidate",
-      "validity",
-      "validationMessage",
-      "reportValidity",
-      "checkValidity",
-      "setCustomValidity"
-    ) && isFormAssociatedMixin(value)
-  );
-}
-
-const _updateValidity = Symbol("_updateValidity");
-const _validityMessage = Symbol("_validityMessage");
-
-/**
- * Mixin to augment an element with "Form Associated" behavior that supports constraint validation.
- * @template T The type of the base class.
- * @param {T} base The base class.
- * @returns {Constructor<ConstraintValidationMixin> & T} A constructor that implements `ConstraintValidationMixin`.
- */
-export function ConstraintValidation<T extends Constructor<LitElement & FormAssociatedMixin>>(
-  base: T
-): Constructor<ConstraintValidationMixin> & T {
-  abstract class _ConstraintValidation extends base implements ConstraintValidationMixin {
-    private [_validityMessage]?: string;
-
-    get willValidate(): boolean {
-      return this[internals].willValidate;
-    }
-
-    get validity(): ValidityState {
-      this[_updateValidity]();
-      return this[internals].validity;
-    }
-
-    get validationMessage(): string {
-      this[_updateValidity]();
-      return this[internals].validationMessage;
-    }
-
-    [validate](): ValidityStateFlags | undefined {
-      return this[_validityMessage] ? { customError: true } : undefined;
-    }
-
-    reportValidity(): boolean {
-      if (isTouchedMixin(this)) {
-        this.markAsTouched();
-      }
-
-      this[_updateValidity]();
-      return this[internals].reportValidity();
-    }
-
-    checkValidity(): boolean {
-      this[_updateValidity]();
-      return this[internals].checkValidity();
-    }
-
-    setCustomValidity(error: string): void {
-      if (error) {
-        this[_validityMessage] = error;
-      } else {
-        this[_validityMessage] = undefined;
-      }
-
-      this[_updateValidity]();
-    }
-
-    override requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void {
-      super.requestUpdate(name, oldValue, options);
-      this[_updateValidity]();
-    }
-    protected override firstUpdated(_changedProperties: PropertyValues): void {
-      super.firstUpdated(_changedProperties);
-      this[_updateValidity]();
-    }
-
-    private [_updateValidity](): void {
-      if (isServer || !this.isConnected) return;
-
-      const validity = this[validate]();
-      const invalid = validity && Object.keys(validity).some((x) => validity[<keyof ValidityStateFlags>x] === true);
-
-      let validityMessage = validity?.customError ? this[_validityMessage] : "";
-      if (validity && !validityMessage) {
-        validityMessage = this.#getNativeMessage(validity);
-      }
-
-      this[internals].setValidity(validity, validityMessage);
-      this.ariaInvalid = invalid ? "true" : null;
-      this.classList.toggle("-invalid", invalid === true);
-    }
-
-    /** @private */
-    #getNativeMessage(flags: ValidityStateFlags): string {
-      const input = document.createElement("input");
-
-      // Default to text input unless overridden
-      input.type = "text";
-
-      // Simulate constraints and values based on flags
-      if (flags.valueMissing) {
-        input.required = true;
-        input.value = ""; // triggers valueMissing
-      }
-
-      if (flags.typeMismatch) {
-        input.type = "email";
-        input.value = "not-an-email"; // triggers typeMismatch
-      }
-
-      if (flags.patternMismatch) {
-        input.pattern = "[0-9]{4}";
-        input.value = "abcd"; // triggers patternMismatch
-      }
-
-      if (flags.tooShort) {
-        input.minLength = 5;
-        input.value = "abc"; // triggers tooShort
-      }
-
-      if (flags.tooLong) {
-        input.maxLength = 2;
-        input.value = "abcdef"; // triggers tooLong
-      }
-
-      if (flags.rangeUnderflow) {
-        input.type = "number";
-        input.min = "10";
-        input.value = "5"; // triggers rangeUnderflow
-      }
-
-      if (flags.rangeOverflow) {
-        input.type = "number";
-        input.max = "5";
-        input.value = "10"; // triggers rangeOverflow
-      }
-
-      if (flags.stepMismatch) {
-        input.type = "number";
-        input.step = "2";
-        input.value = "3"; // triggers stepMismatch
-      }
-
-      if (flags.badInput) {
-        input.type = "number";
-        input.value = "abc"; // triggers badInput
-      }
-
-      input.setCustomValidity("");
-      input.checkValidity();
-
-      return input.validationMessage;
-    }
-  }
-
-  return _ConstraintValidation;
-}

package/src/shared/mixins/Constructor.ts

@@ -1,2 +0,0 @@
-/** Constructor used to define mixins. */
-export type Constructor<T = object> = abstract new (...args: any[]) => T;

package/src/shared/mixins/Dirty.ts

@@ -1,71 +0,0 @@
-import { LitElement } from "lit";
-
-import { Constructor } from "./Constructor";
-import { hasKeys } from "./hasKeys";
-
-/** Defines functionality for an element that can be marked as dirty. */
-export interface DirtyMixin {
-  /** Whether the user has not modified the value of the element. */
-  readonly pristine: boolean;
-
-  /** Whether the user has modified the value of the element. */
-  readonly dirty: boolean;
-
-  /** Marks the element as pristine. */
-  markAsPristine(): void;
-
-  /** Marks the element as dirty. */
-  markAsDirty(): void;
-}
-
-/**
- * Determines whether a value is a `DirtyMixin`.
- * @param {unknown} value The value to test.
- * @returns A value indicating whether `value` is a `DirtyMixin`.
- */
-export function isDirtyMixin(value: unknown): value is DirtyMixin {
-  return hasKeys<DirtyMixin>(value, "dirty", "pristine", "markAsDirty", "markAsPristine");
-}
-
-const _eventHandler = Symbol("_eventHandler");
-
-/**
- * Mixin to augment an element with functionality used to mark it as dirty.
- * @template T The type of the base class.
- * @param {T} base The base class.
- * @returns {Constructor<DirtyMixin> & T} A constructor that implements `DirtyMixin`.
- */
-export function Dirty<T extends Constructor<LitElement>>(base: T): Constructor<DirtyMixin> & T {
-  abstract class _Dirty extends base implements DirtyMixin {
-    private [_eventHandler] = () => this.markAsDirty();
-
-    get dirty(): boolean {
-      return this.classList.contains("-dirty");
-    }
-
-    get pristine(): boolean {
-      return !this.dirty;
-    }
-
-    override connectedCallback(): void {
-      this.markAsPristine();
-      super.connectedCallback();
-      this.addEventListener("change", this[_eventHandler]);
-    }
-
-    override disconnectedCallback(): void {
-      super.disconnectedCallback();
-      this.removeEventListener("change", this[_eventHandler]);
-    }
-
-    markAsPristine(): void {
-      this.classList.toggle("-dirty", false);
-    }
-
-    markAsDirty(): void {
-      this.classList.toggle("-dirty", true);
-    }
-  }
-
-  return _Dirty;
-}

package/src/shared/mixins/Disabled.ts

@@ -1,49 +0,0 @@
-import { LitElement, PropertyValues } from "lit";
-import { property } from "lit/decorators.js";
-
-import { Constructor } from "./Constructor";
-import { hasKeys } from "./hasKeys";
-
-/** Defines functionality for an element which supports a disabled state. */
-export interface DisabledMixin {
-  /**
-   * Whether the element is disabled.
-   * @default false
-   */
-  disabled: boolean;
-}
-
-/**
- * Determines whether a value is a `DisabledMixin`.
- * @param {unknown} value The value to test.
- * @returns {value is DisabledMixin} Whether `value` is a `DisabledMixin`.
- */
-export function isDisabledMixin(value: unknown): value is DisabledMixin {
-  return hasKeys<DisabledMixin>(value, "disabled");
-}
-
-/**
- * Mixin to augment an element with behavior that supports a disabled state.
- * @template T The type of the base class.
- * @param {T} base The base class.
- * @param {boolean} [reflect=true] Whether the disabled property is reflected as an attribute.
- * @returns {Constructor<DisabledMixin> & T} A constructor that implements `DisabledMixin`.
- */
-export function Disabled<T extends Constructor<LitElement>>(
-  base: T,
-  reflect: boolean = true
-): Constructor<DisabledMixin> & T {
-  abstract class _DisabledMixin extends base implements DisabledMixin {
-    @property({ type: Boolean, reflect: reflect }) disabled = false;
-
-    protected override update(changedProperties: PropertyValues<this>): void {
-      super.update(changedProperties);
-
-      if (changedProperties.has("disabled") && this.role && this.role !== "none" && this.role !== "presentation") {
-        this.ariaDisabled = this.disabled ? "true" : null;
-      }
-    }
-  }
-
-  return _DisabledMixin;
-}

package/src/shared/mixins/DisabledInteractive.ts

@@ -1,78 +0,0 @@
-import { LitElement, PropertyValues } from "lit";
-import { property } from "lit/decorators.js";
-
-import { Constructor } from "./Constructor";
-import { DisabledMixin, isDisabledMixin } from "./Disabled";
-import { hasKeys } from "./hasKeys";
-
-/** Defines functionality for an element which supports an interactive disabled state. */
-export interface DisabledInteractiveMixin extends DisabledMixin {
-  /**
-   * Whether the element is disabled and interactive.
-   * @default false
-   */
-  disabledInteractive: boolean;
-}
-
-/**
- * Determines whether a value is a `DisabledInteractiveMixin`.
- * @param {unknown} value The value to test.
- * @returns {value is DisabledInteractiveMixin} Whether `value` is a `DisabledInteractiveMixin`.
- */
-export function isDisabledInteractiveMixin(value: unknown): value is DisabledInteractiveMixin {
-  return hasKeys<DisabledInteractiveMixin>(value, "disabledInteractive") && isDisabledMixin(value);
-}
-
-const SUPPRESSED_EVENTS = ["click", "dblclick", "auxclick", "keydown", "keyup"];
-const INTERACTIVE_KEYS = ["Tab", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "Left", "Up", "Right", "Down"];
-const _suppressedEventHandler = Symbol("_suppressedEventHandler");
-
-/**
- * Mixin to augment an element with behavior that supports an interactive disabled state.
- * @template T The type of the base class.
- * @param {T} base The base class.
- * @returns {Constructor<DisabledInteractiveMixin>} A constructor that implements `DisabledInteractiveMixin`.
- */
-export function DisabledInteractive<T extends Constructor<LitElement & DisabledMixin>>(
-  base: T
-): Constructor<DisabledInteractiveMixin> & T {
-  abstract class _DisabledInteractiveMixin extends base implements DisabledInteractiveMixin {
-    private readonly [_suppressedEventHandler] = (e: Event) => {
-      if (this.disabledInteractive) {
-        // Only allow specific keys when disabled and interactive.
-        if (e instanceof KeyboardEvent && INTERACTIVE_KEYS.includes(e.key)) {
-          return;
-        }
-        e.stopImmediatePropagation();
-        e.preventDefault();
-      }
-    };
-    @property({ attribute: "disabled-interactive", type: Boolean, reflect: true }) disabledInteractive = false;
-
-    override connectedCallback(): void {
-      SUPPRESSED_EVENTS.forEach((x) => this.addEventListener(x, this[_suppressedEventHandler], true));
-      super.connectedCallback();
-    }
-
-    override disconnectedCallback(): void {
-      SUPPRESSED_EVENTS.forEach((x) => this.removeEventListener(x, this[_suppressedEventHandler], true));
-      super.disconnectedCallback();
-    }
-
-    protected override update(changedProperties: PropertyValues<this>): void {
-      super.update(changedProperties);
-
-      if (
-        (changedProperties.has("disabled") || changedProperties.has("disabledInteractive")) &&
-        this.role &&
-        this.role !== "none" &&
-        this.role !== "presentation" &&
-        this.role !== "none"
-      ) {
-        this.ariaDisabled = this.disabled || this.disabledInteractive ? "true" : null;
-      }
-    }
-  }
-
-  return _DisabledInteractiveMixin;
-}

package/src/shared/mixins/EventAttribute.ts

@@ -1,25 +0,0 @@
-import { LitElement } from "lit";
-
-import { Constructor } from "./Constructor";
-
-/**
- * Mixin that adds support for custom event attributes.
- * @template T The type of base class from which to inherit.
- * @param {T} base The base class from which to inherit.
- * @param {string[]} types The types of event attributes.
- * @returns {T} A class extending `base` that supports custom event attributes.
- */
-export function EventAttribute<T extends Constructor<LitElement>>(base: T, ...types: string[]): T {
-  abstract class _EventAttribute extends base {
-    override dispatchEvent(event: Event): boolean {
-      if (types.includes(event.type)) {
-        const eventAttribute = this.getAttribute(`on${event.type}`);
-        if (eventAttribute) {
-          new Function("e", `${eventAttribute};`).call(this, event);
-        }
-      }
-      return super.dispatchEvent(event);
-    }
-  }
-  return _EventAttribute;
-}

package/src/shared/mixins/Focusable.ts

@@ -1,52 +0,0 @@
-import { LitElement, PropertyValues } from "lit";
-
-import { Constructor } from "./Constructor";
-import { DisabledMixin } from "./Disabled";
-
-const _tabindex = Symbol("_tabindex");
-
-/**
- * Mixin to augment an element with behavior that supports a focused state.
- * @template T The type of the base class.
- * @param {T} base The base class.
- * @returns {Constructor & T} A constructor that implements focusable behavior.
- */
-export function Focusable<T extends Constructor<LitElement & DisabledMixin>>(base: T): Constructor & T {
-  abstract class _FocusableMixin extends base {
-    private [_tabindex] = 0;
-
-    /** @inheritdoc */
-    override connectedCallback(): void {
-      this[_tabindex] = Number.parseInt(this.getAttribute("tabindex") ?? "0");
-      super.connectedCallback();
-    }
-
-    protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
-      super.firstUpdated(_changedProperties);
-
-      if (!this.hasAttribute("tabindex") && !_changedProperties.has("disabled")) {
-        this.setAttribute("tabindex", `${this[_tabindex]}`);
-      }
-    }
-
-    protected override update(changedProperties: PropertyValues<this>): void {
-      super.update(changedProperties);
-
-      if (changedProperties.has("disabled")) {
-        if (!this.disabled && this.role !== "none") {
-          if (!this.hasAttribute("tabindex")) {
-            this.setAttribute("tabindex", `${this[_tabindex]}`);
-          }
-        } else {
-          const tabIndex = this.getAttribute("tabindex");
-          if (tabIndex) {
-            this[_tabindex] = Number.parseInt(tabIndex);
-          }
-          this.removeAttribute("tabindex");
-        }
-      }
-    }
-  }
-
-  return _FocusableMixin;
-}

package/src/shared/mixins/FormAssociated.ts

@@ -1,152 +0,0 @@
-import { LitElement, PropertyDeclaration } from "lit";
-import { property } from "lit/decorators.js";
-
-import { AttachInternalsMixin, internals, isAttachInternalsMixin } from "./AttachInternals";
-import { Constructor } from "./Constructor";
-import { DisabledMixin } from "./Disabled";
-import { isCheckedMixin } from "./Checked";
-import { isCheckedIndeterminateMixin } from "./CheckedIndeterminate";
-import { isDirtyMixin } from "./Dirty";
-import { isTouchedMixin } from "./Touched";
-import { isLabelledMixin, LabelledMixin } from "./Labelled";
-import { hasKeys } from "./hasKeys";
-
-/** A symbol through which a "Form Associated" custom element provides a value for a form. */
-export const formValue = Symbol("formValue");
-
-/** A symbol through which a "Form Associated" custom element provides a default value for resetting a form. */
-export const defaultValue = Symbol("defaultValue");
-
-/** Defines functionality for a "Form Associated" custom element. */
-export interface FormAssociatedMixin extends LabelledMixin, DisabledMixin, AttachInternalsMixin {
-  /** The `HTMLFormElement` associated with this element. */
-  readonly form: HTMLFormElement | null;
-
-  /** The form value of the element. */
-  readonly [formValue]: string | File | FormData | null;
-
-  /** The default value (value or checked state) of the element. */
-  readonly [defaultValue]: unknown;
-
-  /** The name that identifies the element when submitting the associated form. */
-  name: string;
-}
-
-/**
- * Determines whether a value is a `FormAssociatedMixin`.
- * @param {unknown} value The value to test.
- * @returns A value indicating whether `value` is a `FormAssociatedMixin`.
- */
-export function isFormAssociatedMixin(value: unknown): value is FormAssociatedMixin {
-  return (
-    hasKeys<FormAssociatedMixin>(value, "disabled", "form", "name") &&
-    isLabelledMixin(value) &&
-    isAttachInternalsMixin(value)
-  );
-}
-
-const _defaultValue = Symbol("_defaultValue");
-const _defaultIndeterminate = Symbol("_defaultIndeterminate");
-const _formDisabled = Symbol("_formDisabled");
-
-/**
- * Mixin to augment an element with "Form Associated" behavior.
- * @template T The type of the base class.
- * @param {T} base The base class.
- * @returns {Constructor<FormAssociatedMixin> & T} A constructor that implements `FormAssociatedMixin`.
- */
-export function FormAssociated<T extends Constructor<LitElement & DisabledMixin & AttachInternalsMixin>>(
-  base: T
-): Constructor<FormAssociatedMixin> & T {
-  abstract class _FormAssociatedMixin extends base implements FormAssociatedMixin {
-    static readonly formAssociated = true;
-    private [_defaultValue]: unknown;
-    private [_defaultIndeterminate] = false;
-    private [_formDisabled] = false;
-
-    get form(): HTMLFormElement | null {
-      return this[internals].form;
-    }
-
-    get labels(): NodeListOf<HTMLLabelElement> {
-      return this[internals].labels as NodeListOf<HTMLLabelElement>;
-    }
-
-    get [formValue](): string | File | FormData | null {
-      return null;
-    }
-
-    get [defaultValue](): unknown {
-      return this[_defaultValue];
-    }
-
-    @property({ noAccessor: true }) get name() {
-      return this.getAttribute("name") ?? "";
-    }
-    set name(value: string) {
-      if (value) {
-        this.setAttribute("name", value);
-      } else {
-        this.removeAttribute("name");
-      }
-    }
-
-    // Disabled attributes should not be reflected for form associated elements due to
-    // how the formDisabledCallback overrides an element's disabled state.
-    // See https://github.com/whatwg/html/issues/8365
-
-    @property({ type: Boolean })
-    override get disabled(): boolean {
-      return super.disabled || this[_formDisabled];
-    }
-    override set disabled(value: boolean) {
-      super.disabled = value;
-    }
-
-    override connectedCallback(): void {
-      super.connectedCallback();
-
-      if (isCheckedMixin(this)) {
-        this[_defaultValue] = this.checked;
-        if (isCheckedIndeterminateMixin(this)) {
-          this[_defaultIndeterminate] = this.indeterminate;
-        }
-      } else if ("value" in this) {
-        this[_defaultValue] = this.value;
-      }
-    }
-
-    override requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void {
-      super.requestUpdate(name, oldValue, options);
-      this[internals].setFormValue(this[formValue]);
-    }
-
-    formDisabledCallback(disabled: boolean): void {
-      const wasDisabled = this.disabled;
-      this[_formDisabled] = disabled;
-      if (this.disabled != wasDisabled) {
-        this.requestUpdate("disabled", wasDisabled);
-      }
-    }
-
-    formResetCallback(): void {
-      if (isCheckedMixin(this)) {
-        this.checked = this[_defaultValue] === true;
-        if (isCheckedIndeterminateMixin(this)) {
-          this.indeterminate = this[_defaultIndeterminate];
-        }
-      } else if ("value" in this) {
-        this.value = this[defaultValue];
-      }
-
-      if (isDirtyMixin(this)) {
-        this.markAsPristine();
-      }
-      if (isTouchedMixin(this)) {
-        this.markAsUntouched();
-      }
-    }
-  }
-
-  return _FormAssociatedMixin;
-}