@emuanalytics/flow-rdf-ui 0.0.1 → 0.0.3

package/src/internal/default-value.ts

@@ -1,49 +0,0 @@
-// @defaultValue decorator
-//
-// Runs when the corresponding attribute of the observed property changes, e.g. after calling Element.setAttribute or after updating
-// the observed property.
-//
-// The decorator checks whether the value of the attribute is different from the value of the property and in that case
-// it saves the new value.
-//
-//
-// Usage:
-//
-//  @property({ type: Boolean, reflect: true }) checked = false;
-//
-//  @defaultValue('checked') defaultChecked = false;
-//
-
-import { defaultConverter } from 'lit';
-import type { ReactiveElement } from 'lit';
-
-export const defaultValue =
-  (propertyName = 'value') =>
-  (proto: ReactiveElement, key: string) => {
-    const ctor = proto.constructor as typeof ReactiveElement;
-
-    const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
-    ctor.prototype.attributeChangedCallback = function (
-      this: ReactiveElement & { [name: string]: unknown },
-      name,
-      old,
-      value
-    ) {
-      const options = ctor.getPropertyOptions(propertyName);
-      const attributeName = typeof options.attribute === 'string' ? options.attribute : propertyName;
-
-      if (name === attributeName) {
-        const converter = options.converter || defaultConverter;
-        const fromAttribute =
-          typeof converter === 'function' ? converter : converter?.fromAttribute ?? defaultConverter.fromAttribute;
-
-        const newValue: unknown = fromAttribute!(value, options.type);
-
-        if (this[propertyName] !== newValue) {
-          this[key] = newValue;
-        }
-      }
-
-      attributeChangedCallback.call(this, name, old, value);
-    };
-  };

package/src/internal/drag.ts

@@ -1,48 +0,0 @@
-import { throttle } from './throttle';
-
-interface DragOptions {
-  /** Callback that runs as dragging occurs. */
-  onMove: (x: number, y: number) => void;
-  /** Callback that runs when dragging stops. */
-  onStop: () => void;
-  /**
-   * When an initial event is passed, the first drag will be triggered immediately using the coordinates therein. This
-   * is useful when the drag is initiated by a mousedown/touchstart event but you want the initial "click" to activate
-   * a drag (e.g. positioning a handle initially at the click target).
-   */
-  initialEvent: PointerEvent;
-}
-
-/** Begins listening for dragging. */
-export function drag(container: HTMLElement, options?: Partial<DragOptions>) {
-
-  function move(pointerEvent: PointerEvent) {
-    const dims = container.getBoundingClientRect();
-    const defaultView = container.ownerDocument.defaultView!;
-    const offsetX = dims.left + defaultView.pageXOffset;
-    const offsetY = dims.top + defaultView.pageYOffset;
-    const x = pointerEvent.pageX - offsetX;
-    const y = pointerEvent.pageY - offsetY;
-
-    if (options?.onMove) {
-      options.onMove(x, y);
-    }
-  }
-
-  function stop() {
-    document.removeEventListener('pointermove', move);
-    document.removeEventListener('pointerup', stop);
-
-    if (options?.onStop) {
-      options.onStop();
-    }
-  }
-
-  document.addEventListener('pointermove', move, { passive: true });
-  document.addEventListener('pointerup', stop);
-
-  // If an initial event is set, trigger the first drag immediately
-  if (options?.initialEvent instanceof PointerEvent) {
-    move(options.initialEvent);
-  }
-}

package/src/internal/event.ts

@@ -1,13 +0,0 @@
-/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */
-export function waitForEvent(el: HTMLElement, eventName: string) {
-  return new Promise<void>(resolve => {
-    function done(event: Event) {
-      if (event.target === el) {
-        el.removeEventListener(eventName, done);
-        resolve();
-      }
-    }
-
-    el.addEventListener(eventName, done);
-  });
-}

package/src/internal/flow-ui-rdf-element.ts

@@ -1,124 +0,0 @@
-import { LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-
-// Match event type name strings that are registered on GlobalEventHandlersEventMap...
-type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap
-  ? // ...where the event detail is an object...
-    GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>
-    ? // ...that is non-empty...
-      GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>
-      ? never
-      : // ...and has at least one non-optional property
-      Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']
-      ? never
-      : T
-    : never
-  : never;
-
-// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail)
-type EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap
-  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>
-    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>
-      ? T
-      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']
-      ? T
-      : never
-    : T
-  : T;
-
-// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail
-type EventTypesWithRequiredDetail = {
-  [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;
-};
-
-// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail
-type EventTypesWithoutRequiredDetail = {
-  [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;
-};
-
-// Helper to make a specific property of an object non-optional
-type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
-
-// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than
-// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the
-// event requires it)
-type SlEventInit<T> = T extends keyof GlobalEventHandlersEventMap
-  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>
-    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>
-      ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>
-      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']
-      ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>
-      : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'>
-    : CustomEventInit
-  : CustomEventInit;
-
-// Given an event name string, get the type of the event
-type GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap
-  ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown>
-    ? GlobalEventHandlersEventMap[T]
-    : CustomEvent<unknown>
-  : CustomEvent<unknown>;
-
-// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message
-type ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail;
-
-export default class FlowRdfElement extends LitElement {
-  // Make localization attributes reactive
-  @property() dir: string;
-  @property() lang: string;
-
-  /** Emits a custom event with more convenient defaults. */
-  emit<T extends string & keyof EventTypesWithoutRequiredDetail>(
-    name: EventTypeDoesNotRequireDetail<T>,
-    options?: SlEventInit<T> | undefined
-  ): GetCustomEventType<T>;
-  emit<T extends string & keyof EventTypesWithRequiredDetail>(
-    name: EventTypeRequiresDetail<T>,
-    options: SlEventInit<T>
-  ): GetCustomEventType<T>;
-  emit<T extends string & keyof ValidEventTypeMap>(
-    name: T,
-    options?: SlEventInit<T> | undefined
-  ): GetCustomEventType<T> {
-    const event = new CustomEvent(name, {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: {},
-      ...options
-    });
-
-    this.dispatchEvent(event);
-
-    return event as GetCustomEventType<T>;
-  }
-}
-
-export interface FlowRdfFormControl extends FlowRdfElement {
-  // Form attributes
-  name: string;
-  value: unknown;
-  disabled?: boolean;
-  defaultValue?: unknown;
-  defaultChecked?: boolean;
-  form?: string;
-
-  // Constraint validation attributes
-  pattern?: string;
-  min?: number | string | Date;
-  max?: number | string | Date;
-  step?: number | 'any';
-  required?: boolean;
-  minlength?: number;
-  maxlength?: number;
-
-  // Form validation properties
-  readonly validity: ValidityState;
-  readonly validationMessage: string;
-
-  // Form validation methods
-  checkValidity: () => boolean;
-  getForm: () => HTMLFormElement | null;
-  reportValidity: () => boolean;
-  setCustomValidity: (message: string) => void;
-}

package/src/internal/form.ts

@@ -1,409 +0,0 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-import type SlButton from '../components/button/button';
-import type { FlowRdfFormControl } from './flow-ui-rdf-element';
-
-//
-// We store a WeakMap of forms + controls so we can keep references to all Shoelace controls within a given form. As
-// elements connect and disconnect to/from the DOM, their containing form is used as the key and the form control is
-// added and removed from the form's set, respectively.
-//
-export const formCollections: WeakMap<HTMLFormElement, Set<FlowRdfFormControl>> = new WeakMap();
-
-//
-// We store a WeakMap of reportValidity() overloads so we can override it when form controls connect to the DOM and
-// restore the original behavior when they disconnect.
-//
-const reportValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();
-
-//
-// We store a Set of controls that users have interacted with. This allows us to determine the interaction state
-// without littering the DOM with additional data attributes.
-//
-const userInteractedControls: WeakSet<FlowRdfFormControl> = new WeakSet();
-
-//
-// We store a WeakMap of interactions for each form control so we can track when all conditions are met for validation.
-//
-const interactions = new WeakMap<FlowRdfFormControl, string[]>();
-
-export interface FormControlControllerOptions {
-  /** A function that returns the form containing the form control. */
-  form: (input: FlowRdfFormControl) => HTMLFormElement | null;
-  /** A function that returns the form control's name, which will be submitted with the form data. */
-  name: (input: FlowRdfFormControl) => string;
-  /** A function that returns the form control's current value. */
-  value: (input: FlowRdfFormControl) => unknown | unknown[];
-  /** A function that returns the form control's default value. */
-  defaultValue: (input: FlowRdfFormControl) => unknown | unknown[];
-  /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
-  disabled: (input: FlowRdfFormControl) => boolean;
-  /**
-   * A function that maps to the form control's reportValidity() function. When the control is invalid, this will
-   * prevent submission and trigger the browser's constraint violation warning.
-   */
-  reportValidity: (input: FlowRdfFormControl) => boolean;
-  /** A function that sets the form control's value */
-  setValue: (input: FlowRdfFormControl, value: unknown) => void;
-  /**
-   * An array of event names to listen to. When all events in the list are emitted, the control will receive validity
-   * states such as user-valid and user-invalid.user interacted validity states. */
-  assumeInteractionOn: string[];
-}
-
-/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
-export class FormControlController implements ReactiveController {
-  host: FlowRdfFormControl & ReactiveControllerHost;
-  form?: HTMLFormElement | null;
-  options: FormControlControllerOptions;
-
-  constructor(host: ReactiveControllerHost & FlowRdfFormControl, options?: Partial<FormControlControllerOptions>) {
-    (this.host = host).addController(this);
-    this.options = {
-      form: input => {
-        // If there's a form attribute, use it to find the target form by id
-        if (input.hasAttribute('form') && input.getAttribute('form') !== '') {
-          const root = input.getRootNode() as Document | ShadowRoot;
-          const formId = input.getAttribute('form');
-
-          if (formId) {
-            return root.getElementById(formId) as HTMLFormElement;
-          }
-        }
-
-        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: string) => (input.value = value),
-      assumeInteractionOn: ['flow-ui-input'],
-      ...options
-    };
-    this.handleFormData = this.handleFormData.bind(this);
-    this.handleFormSubmit = this.handleFormSubmit.bind(this);
-    this.handleFormReset = this.handleFormReset.bind(this);
-    this.reportFormValidity = this.reportFormValidity.bind(this);
-    this.handleInteraction = this.handleInteraction.bind(this);
-  }
-
-  hostConnected() {
-    const form = this.options.form(this.host);
-
-    if (form) {
-      this.attachForm(form);
-    }
-
-    // Listen for interactions
-    interactions.set(this.host, []);
-    this.options.assumeInteractionOn.forEach(event => {
-      this.host.addEventListener(event, this.handleInteraction);
-    });
-  }
-
-  hostDisconnected() {
-    this.detachForm();
-
-    // Clean up interactions
-    interactions.delete(this.host);
-    this.options.assumeInteractionOn.forEach(event => {
-      this.host.removeEventListener(event, this.handleInteraction);
-    });
-  }
-
-  hostUpdated() {
-    const form = this.options.form(this.host);
-
-    // Detach if the form no longer exists
-    if (!form) {
-      this.detachForm();
-    }
-
-    // If the form has changed, reattach it
-    if (form && this.form !== form) {
-      this.detachForm();
-      this.attachForm(form);
-    }
-
-    if (this.host.hasUpdated) {
-      this.setValidity(this.host.validity.valid);
-    }
-  }
-
-  private attachForm(form?: HTMLFormElement) {
-    if (form) {
-      this.form = form;
-
-      // Add this element to the form's collection
-      if (formCollections.has(this.form)) {
-        formCollections.get(this.form)!.add(this.host);
-      } else {
-        formCollections.set(this.form, new Set<FlowRdfFormControl>([this.host]));
-      }
-
-      this.form.addEventListener('formdata', this.handleFormData);
-      this.form.addEventListener('submit', this.handleFormSubmit);
-      this.form.addEventListener('reset', this.handleFormReset);
-
-      // Overload the form's reportValidity() method so it looks at Shoelace form controls
-      if (!reportValidityOverloads.has(this.form)) {
-        reportValidityOverloads.set(this.form, this.form.reportValidity);
-        this.form.reportValidity = () => this.reportFormValidity();
-      }
-    } else {
-      this.form = undefined;
-    }
-  }
-
-  private detachForm() {
-    if (this.form) {
-      // Remove this element from the form's collection
-      formCollections.get(this.form)?.delete(this.host);
-
-      this.form.removeEventListener('formdata', this.handleFormData);
-      this.form.removeEventListener('submit', this.handleFormSubmit);
-      this.form.removeEventListener('reset', this.handleFormReset);
-
-      // Remove the overload and restore the original method
-      if (reportValidityOverloads.has(this.form)) {
-        this.form.reportValidity = reportValidityOverloads.get(this.form)!;
-        reportValidityOverloads.delete(this.form);
-      }
-    }
-
-    this.form = undefined;
-  }
-
-  private handleFormData(event: FormDataEvent) {
-    const disabled = this.options.disabled(this.host);
-    const name = this.options.name(this.host);
-    const value = this.options.value(this.host);
-
-    // For buttons, we only submit the value if they were the submitter. This is currently done in doAction() by
-    // injecting the name/value on a temporary button, so we can just skip them here.
-    const isButton = this.host.tagName.toLowerCase() === 'flow-ui-button';
-
-    if (!disabled && !isButton && typeof name === 'string' && name.length > 0 && typeof value !== 'undefined') {
-      if (Array.isArray(value)) {
-        (value as unknown[]).forEach(val => {
-          event.formData.append(name, (val as string | number | boolean).toString());
-        });
-      } else {
-        event.formData.append(name, (value as string | number | boolean).toString());
-      }
-    }
-  }
-
-  private handleFormSubmit(event: Event) {
-    const disabled = this.options.disabled(this.host);
-    const reportValidity = this.options.reportValidity;
-
-    // Update the interacted state for all controls when the form is submitted
-    if (this.form && !this.form.noValidate) {
-      formCollections.get(this.form)?.forEach(control => {
-        this.setUserInteracted(control, true);
-      });
-    }
-
-    if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  }
-
-  private handleFormReset() {
-    this.options.setValue(this.host, this.options.defaultValue(this.host));
-    this.setUserInteracted(this.host, false);
-    interactions.set(this.host, []);
-  }
-
-  private handleInteraction(event: Event) {
-    const emittedEvents = interactions.get(this.host)!;
-
-    if (!emittedEvents.includes(event.type)) {
-      emittedEvents.push(event.type);
-    }
-
-    // Mark it as user-interacted as soon as all associated events have been emitted
-    if (emittedEvents.length === this.options.assumeInteractionOn.length) {
-      this.setUserInteracted(this.host, true);
-    }
-  }
-
-  private reportFormValidity() {
-    //
-    // Shoelace form controls work hard to act like regular form controls. They support the Constraint Validation API
-    // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also
-    // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using
-    // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.
-    //
-    // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger
-    // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't
-    // be necessary once we can use ElementInternals.
-    //
-    // Note that we're also honoring the form's novalidate attribute.
-    //
-    if (this.form && !this.form.noValidate) {
-      // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom
-      // elements that support the constraint validation API.
-      const elements = this.form.querySelectorAll<HTMLInputElement>('*');
-
-      for (const element of elements) {
-        if (typeof element.reportValidity === 'function') {
-          if (!element.reportValidity()) {
-            return false;
-          }
-        }
-      }
-    }
-
-    return true;
-  }
-
-  private setUserInteracted(el: FlowRdfFormControl, hasInteracted: boolean) {
-    if (hasInteracted) {
-      userInteractedControls.add(el);
-    } else {
-      userInteractedControls.delete(el);
-    }
-
-    el.requestUpdate();
-  }
-
-  private doAction(type: 'submit' | 'reset', submitter?: HTMLInputElement | SlButton) {
-    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';
-
-      // Pass name, value, and form attributes through to the temporary button
-      if (submitter) {
-        button.name = submitter.name;
-        button.value = submitter.value;
-
-        ['formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget'].forEach(attr => {
-          if (submitter.hasAttribute(attr)) {
-            button.setAttribute(attr, submitter.getAttribute(attr)!);
-          }
-        });
-      }
-
-      this.form.append(button);
-      button.click();
-      button.remove();
-    }
-  }
-
-  /** Returns the associated `<form>` element, if one exists. */
-  getForm() {
-    return this.form ?? null;
-  }
-
-  /** Resets the form, restoring all the control to their default value */
-  reset(submitter?: HTMLInputElement | SlButton) {
-    this.doAction('reset', submitter);
-  }
-
-  /** Submits the form, triggering validation and form data injection. */
-  submit(submitter?: HTMLInputElement | SlButton) {
-    // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
-    // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
-    this.doAction('submit', submitter);
-  }
-
-  /**
-   * 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: boolean) {
-    const host = this.host;
-    const hasInteracted = Boolean(userInteractedControls.has(host));
-    const required = Boolean(host.required);
-
-    //
-    // We're mapping the following "states" to data attributes. In the future, we can use ElementInternals.states to
-    // create a similar mapping, but instead of [data-invalid] it will look like :--invalid.
-    //
-    // See this RFC for more details: https://github.com/shoelace-style/shoelace/issues/1011
-    //
-    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);
-  }
-
-  /**
-   * 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.validity.valid);
-  }
-
-  /**
-   * Dispatches a non-bubbling, cancelable custom event of type `flow-ui-invalid`.
-   * If the `flow-ui-invalid` event will be cancelled then the original `invalid`
-   * event (which may have been passed as argument) will also be cancelled.
-   * If no original `invalid` event has been passed then the `flow-ui-invalid`
-   * event will be cancelled before being dispatched.
-   */
-  emitInvalidEvent(originalInvalidEvent?: Event) {
-    const slInvalidEvent = new CustomEvent<Record<PropertyKey, never>>('flow-ui-invalid', {
-      bubbles: false,
-      composed: false,
-      cancelable: true,
-      detail: {}
-    });
-
-    if (!originalInvalidEvent) {
-      slInvalidEvent.preventDefault();
-    }
-
-    if (!this.host.dispatchEvent(slInvalidEvent)) {
-      originalInvalidEvent?.preventDefault();
-    }
-  }
-}
-
-/*
- * Predefined common validity states.
- * All of them are read-only.
- */
-
-// A validity state object that represents `valid`
-export const validValidityState: ValidityState = Object.freeze({
-  badInput: false,
-  customError: false,
-  patternMismatch: false,
-  rangeOverflow: false,
-  rangeUnderflow: false,
-  stepMismatch: false,
-  tooLong: false,
-  tooShort: false,
-  typeMismatch: false,
-  valid: true,
-  valueMissing: false
-});
-
-// A validity state object that represents `value missing`
-export const valueMissingValidityState: ValidityState = Object.freeze({
-  ...validValidityState,
-  valid: false,
-  valueMissing: true
-});
-
-// A validity state object that represents a custom error
-export const customErrorValidityState: ValidityState = Object.freeze({
-  ...validValidityState,
-  valid: false,
-  customError: true
-});

package/src/internal/math.ts

@@ -1,14 +0,0 @@
-/** Ensures a number stays within a minimum and maximum value */
-export function clamp(value: number, min: number, max: number) {
-  const noNegativeZero = (n: number) => (Object.is(n, -0) ? 0 : n);
-
-  if (value < min) {
-    return noNegativeZero(min);
-  }
-
-  if (value > max) {
-    return noNegativeZero(max);
-  }
-
-  return noNegativeZero(value);
-}