@emuanalytics/flow-rdf-ui 0.0.1 → 0.0.2

package/src/internal/test/form-control-base-tests.ts

@@ -1,307 +0,0 @@
-import { expect, fixture } from '@open-wc/testing';
-import type { FlowRdfFormControl } from '../flow-ui-rdf-element';
-
-type CreateControlFn = () => Promise<FlowRdfFormControl>;
-
-/** Runs a set of generic tests for Shoelace form controls */
-export function runFormControlBaseTests<T extends FlowRdfFormControl = FlowRdfFormControl>(
-  tagNameOrConfig:
-    | string
-    | {
-        tagName: string;
-        init?: (control: T) => void;
-        variantName: string;
-      }
-) {
-  const isStringArg = typeof tagNameOrConfig === 'string';
-  const tagName = isStringArg ? tagNameOrConfig : tagNameOrConfig.tagName;
-
-  // component initialization function or null
-  const init =
-    isStringArg || !tagNameOrConfig.init //
-      ? null
-      : tagNameOrConfig.init || null;
-
-  // either `<tagName>` or `<tagName> (<variantName>)
-  const displayName = isStringArg //
-    ? tagName
-    : `${tagName} (${tagNameOrConfig.variantName})`;
-
-  // creates a testable form control instance
-  const createControl = async () => {
-    const control = await createFormControl<T>(tagName);
-    init?.(control);
-    return control;
-  };
-
-  runAllValidityTests(tagName, displayName, createControl);
-}
-
-//
-// Applicable for all Shoelace form controls. This function checks the behavior of:
-//   - `.validity`
-//   - `.validationMessage`,
-//   - `.checkValidity()`
-//   - `.reportValidity()`
-//   - `.setCustomValidity(msg)`
-//
-function runAllValidityTests(
-  tagName: string, //
-  displayName: string,
-  createControl: () => Promise<FlowRdfFormControl>
-) {
-  // will be used later to retrieve meta information about the control
-  describe(`Form validity base test for ${displayName}`, async () => {
-    it('should have a property `validity` of type `object`', async () => {
-      const control = await createControl();
-      expect(control).satisfy(() => control.validity !== null && typeof control.validity === 'object');
-    });
-
-    it('should have a property `validationMessage` of type `string`', async () => {
-      const control = await createControl();
-      expect(control).satisfy(() => typeof control.validationMessage === 'string');
-    });
-
-    it('should implement method `checkValidity`', async () => {
-      const control = await createControl();
-      expect(control).satisfies(() => typeof control.checkValidity === 'function');
-    });
-
-    it('should implement method `setCustomValidity`', async () => {
-      const control = await createControl();
-      expect(control).satisfies(() => typeof control.setCustomValidity === 'function');
-    });
-
-    it('should implement method `reportValidity`', async () => {
-      const control = await createControl();
-      expect(control).satisfies(() => typeof control.reportValidity === 'function');
-    });
-
-    it('should be valid initially', async () => {
-      const control = await createControl();
-      expect(control.validity.valid).to.equal(true);
-    });
-
-    it('should make sure that calling `.checkValidity()` will return `true` when valid', async () => {
-      const control = await createControl();
-      expect(control.checkValidity()).to.equal(true);
-    });
-
-    it('should make sure that calling `.reportValidity()` will return `true` when valid', async () => {
-      const control = await createControl();
-      expect(control.reportValidity()).to.equal(true);
-    });
-
-    it('should not emit an `sl-invalid` event when `.checkValidity()` is called while valid', async () => {
-      const control = await createControl();
-      const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.checkValidity());
-      expect(emittedEvents.length).to.equal(0);
-    });
-
-    it('should not emit an `sl-invalid` event when `.reportValidity()` is called while valid', async () => {
-      const control = await createControl();
-      const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.reportValidity());
-      expect(emittedEvents.length).to.equal(0);
-    });
-
-    // TODO: As soon as `SlRadioGroup` has a property `disabled` this
-    // condition can be removed
-    if (tagName !== 'sl-radio-group') {
-      it('should not emit an `sl-invalid` event when `.checkValidity()` is called in custom error case while disabled', async () => {
-        const control = await createControl();
-        control.setCustomValidity('error');
-        control.disabled = true;
-        await control.updateComplete;
-        const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.checkValidity());
-        expect(emittedEvents.length).to.equal(0);
-      });
-
-      it('should not emit an `sl-invalid` event when `.reportValidity()` is called in custom error case while disabled', async () => {
-        const control = await createControl();
-        control.setCustomValidity('error');
-        control.disabled = true;
-        await control.updateComplete;
-        const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.reportValidity());
-        expect(emittedEvents.length).to.equal(0);
-      });
-    }
-
-    // Run special tests depending on component type
-
-    const mode = getMode(await createControl());
-
-    if (mode === 'slButtonOfTypeButton') {
-      runSpecialTests_slButtonOfTypeButton(createControl);
-    } else if (mode === 'slButtonWithHRef') {
-      runSpecialTests_slButtonWithHref(createControl);
-    } else {
-      runSpecialTests_standard(createControl);
-    }
-  });
-}
-
-//
-//  Special tests for <sl-button type="button">
-//
-function runSpecialTests_slButtonOfTypeButton(createControl: CreateControlFn) {
-  it('should make sure that `.validity.valid` is `false` in custom error case', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    expect(control.validity.valid).to.equal(false);
-  });
-
-  it('should make sure that calling `.checkValidity()` will still return `true` when custom error has been set', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    expect(control.checkValidity()).to.equal(true);
-  });
-
-  it('should make sure that calling `.reportValidity()` will still return `true` when custom error has been set', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    expect(control.reportValidity()).to.equal(true);
-  });
-
-  it('should not emit an `sl-invalid` event when `.checkValidity()` is called in custom error case, and not disabled', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    control.disabled = false;
-    await control.updateComplete;
-    const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.checkValidity());
-    expect(emittedEvents.length).to.equal(0);
-  });
-
-  it('should not emit an `sl-invalid` event when `.reportValidity()` is called in custom error case, and not disabled', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    control.disabled = false;
-    await control.updateComplete;
-    const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.reportValidity());
-
-    expect(emittedEvents.length).to.equal(0);
-  });
-}
-
-//
-// Special tests for <sl-button href="...">
-//
-function runSpecialTests_slButtonWithHref(createControl: CreateControlFn) {
-  it('should make sure that calling `.checkValidity()` will return `true` in custom error case', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    expect(control.checkValidity()).to.equal(true);
-  });
-
-  it('should make sure that calling `.reportValidity()` will return `true` in custom error case', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    expect(control.reportValidity()).to.equal(true);
-  });
-
-  it('should not emit an `sl-invalid` event when `.checkValidity()` is called in custom error case', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    await control.updateComplete;
-    const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.checkValidity());
-    expect(emittedEvents.length).to.equal(0);
-  });
-
-  it('should not emit an `sl-invalid` event when `.reportValidity()` is called in custom error case', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    await control.updateComplete;
-    const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.reportValidity());
-    expect(emittedEvents.length).to.equal(0);
-  });
-}
-
-//
-// Special tests for all components with standard behavior
-//
-function runSpecialTests_standard(createControl: CreateControlFn) {
-  it('should make sure that `.validity.valid` is `false` in custom error case', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    expect(control.validity.valid).to.equal(false);
-  });
-
-  it('should make sure that calling `.checkValidity()` will return `false` in custom error case', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    expect(control.checkValidity()).to.equal(false);
-  });
-
-  it('should make sure that calling `.reportValidity()` will return `false` in custom error case', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    expect(control.reportValidity()).to.equal(false);
-  });
-
-  it('should emit an `sl-invalid` event when `.checkValidity()` is called in custom error case and not disabled', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    control.disabled = false;
-    await control.updateComplete;
-    const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.checkValidity());
-    expect(emittedEvents.length).to.equal(1);
-  });
-
-  it('should emit an `sl-invalid` event when `.reportValidity()` is called in custom error case and not disabled', async () => {
-    const control = await createControl();
-    control.setCustomValidity('error');
-    control.disabled = false;
-    await control.updateComplete;
-    const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.reportValidity());
-    expect(emittedEvents.length).to.equal(1);
-  });
-}
-
-//
-// Local helper functions
-//
-
-// Creates a testable Shoelace form control instance
-async function createFormControl<T extends FlowRdfFormControl = FlowRdfFormControl>(tagName: string): Promise<T> {
-  return await fixture<T>(`<${tagName}></${tagName}>`);
-}
-
-// Runs an action while listening for emitted events of a given type. Returns an array of all events of the given type
-// that have been been emitted while the action was running.
-function checkEventEmissions(control: FlowRdfFormControl, eventType: string, action: () => void): Event[] {
-  const emittedEvents: Event[] = [];
-
-  const eventHandler = (event: Event) => {
-    emittedEvents.push(event);
-  };
-
-  try {
-    control.addEventListener(eventType, eventHandler);
-    action();
-  } finally {
-    control.removeEventListener(eventType, eventHandler);
-  }
-
-  return emittedEvents;
-}
-
-// Component `sl-button` behaves quite different to the other components. To keep things simple we use simple conditions
-// here. `sl-button` might stay the only component in Shoelace core behaves that way, so we just hard code it here.
-function getMode(control: FlowRdfFormControl) {
-  if (
-    control.localName === 'sl-button' && //
-    'href' in control &&
-    'type' in control &&
-    control.type === 'button' &&
-    !control.href
-  ) {
-    return 'slButtonOfTypeButton';
-  }
-
-  // <sl-button href="...">
-  if (control.localName === 'sl-button' && 'href' in control && !!control.href) {
-    return 'slButtonWithHRef';
-  }
-
-  // all other components
-  return 'standard';
-}

package/src/internal/test/wait-for-scrolling.ts

@@ -1,36 +0,0 @@
-/**
- * Wait until an element has stopped scrolling
- * This considers the element to have stopped scrolling, as soon as it did not change its
- * scroll position for 20 successive animation frames
- * @param {HTMLElement} element - The element which is scrolled
- * @param {numeric} timeoutInMs - A timeout in ms. If the timeout has elapsed, the promise rejects
- * @returns A promise which resolves after the scrolling has stopped
- */
-export const waitForScrollingToEnd = (element: Element, timeoutInMs = 500): Promise<void> => {
-  let lastLeft = element.scrollLeft;
-  let lastTop = element.scrollTop;
-  let framesWithoutChange = 0;
-
-  return new Promise((resolve, reject) => {
-    const timeout = window.setTimeout(() => {
-      reject(new Error('Waiting for scroll end timed out'));
-    }, timeoutInMs);
-
-    function checkScrollingChanged() {
-      if (element.scrollLeft !== lastLeft || element.scrollTop !== lastTop) {
-        framesWithoutChange = 0;
-        lastLeft = window.scrollX;
-        lastTop = window.scrollY;
-      } else {
-        framesWithoutChange++;
-        if (framesWithoutChange >= 20) {
-          clearTimeout(timeout);
-          resolve();
-        }
-      }
-      window.requestAnimationFrame(checkScrollingChanged);
-    }
-
-    checkScrollingChanged();
-  });
-};

package/src/internal/test.ts

@@ -1,83 +0,0 @@
-import { sendMouse } from '@web/test-runner-commands';
-
-function determineMousePosition(el: Element, position: string, offsetX: number, offsetY: number) {
-  const { x, y, width, height } = el.getBoundingClientRect();
-  const centerX = Math.floor(x + window.pageXOffset + width / 2);
-  const centerY = Math.floor(y + window.pageYOffset + height / 2);
-  let clickX: number;
-  let clickY: number;
-
-  switch (position) {
-    case 'top':
-      clickX = centerX;
-      clickY = y;
-      break;
-    case 'right':
-      clickX = x + width - 1;
-      clickY = centerY;
-      break;
-    case 'bottom':
-      clickX = centerX;
-      clickY = y + height - 1;
-      break;
-    case 'left':
-      clickX = x;
-      clickY = centerY;
-      break;
-    default:
-      clickX = centerX;
-      clickY = centerY;
-  }
-
-  clickX += offsetX;
-  clickY += offsetY;
-  return { clickX, clickY };
-}
-
-/** A testing utility that measures an element's position and clicks on it. */
-export async function clickOnElement(
-  /** The element to click */
-  el: Element,
-  /** The location of the element to click */
-  position: 'top' | 'right' | 'bottom' | 'left' | 'center' = 'center',
-  /** The horizontal offset to apply to the position when clicking */
-  offsetX = 0,
-  /** The vertical offset to apply to the position when clicking */
-  offsetY = 0
-) {
-  const { clickX, clickY } = determineMousePosition(el, position, offsetX, offsetY);
-
-  await sendMouse({ type: 'click', position: [clickX, clickY] });
-}
-
-/** A testing utility that moves the mouse onto an element. */
-export async function moveMouseOnElement(
-  /** The element to click */
-  el: Element,
-  /** The location of the element to click */
-  position: 'top' | 'right' | 'bottom' | 'left' | 'center' = 'center',
-  /** The horizontal offset to apply to the position when clicking */
-  offsetX = 0,
-  /** The vertical offset to apply to the position when clicking */
-  offsetY = 0
-) {
-  const { clickX, clickY } = determineMousePosition(el, position, offsetX, offsetY);
-
-  await sendMouse({ type: 'move', position: [clickX, clickY] });
-}
-
-/** A testing utility that drags an element with the mouse. */
-export async function dragElement(
-  /** The element to drag */
-  el: Element,
-  /** The horizontal distance to drag in pixels */
-  deltaX = 0,
-  /** The vertical distance to drag in pixels */
-  deltaY = 0
-): Promise<void> {
-  await moveMouseOnElement(el);
-  await sendMouse({ type: 'down' });
-  const { clickX, clickY } = determineMousePosition(el, 'center', deltaX, deltaY);
-  await sendMouse({ type: 'move', position: [clickX, clickY] });
-  await sendMouse({ type: 'up' });
-}

package/src/internal/throttle.ts

@@ -1,50 +0,0 @@
-// @debounce decorator
-//
-// Delays the execution until the provided delay in milliseconds has
-// passed since the last time the function has been called.
-//
-//
-// Usage:
-//
-//  @debounce(1000)
-//  handleInput() {
-//    ...
-//  }
-//
-
-// Each class instance will need to store its timer id, so this unique symbol will be used as property key.
-const TIMER_ID_KEY = Symbol();
-
-export const throttle = (delay: number) => {
-  return <T>(_target: T, _propertyKey: string, descriptor: PropertyDescriptor) => {
-    const fn = descriptor.value as (this: T & { [TIMER_ID_KEY]: number }, ...args: unknown[]) => unknown;
-    let pendingFn: (() => void) | undefined;
-
-    descriptor.value = function (this: ThisParameterType<typeof fn>, ...args: Parameters<typeof fn>) {
-
-      // Function to start timer to delay running of pending fn
-      const startTimer = () => {
-        this[TIMER_ID_KEY] = window.setTimeout(() => {
-          // Timer has fired - run pending fn if any
-          if (pendingFn) {
-            pendingFn();
-            pendingFn = undefined;
-            startTimer();
-          } else {
-            // Timer has fired with no pending call. Clear timer - next call will execute immediately
-            this[TIMER_ID_KEY] = 0;
-          }
-        }, delay);
-      }
-
-      if (this[TIMER_ID_KEY]) {
-        // Timer is running - queue as pending
-        pendingFn = () => fn.apply(this, args);
-      } else {
-        // Timer is not running - run immediately then start timer
-        fn.apply(this, args);
-        startTimer();
-      }
-    };
-  };
-};

package/src/internal/watch.ts

@@ -1,59 +0,0 @@
-import type { LitElement } from 'lit';
-
-type UpdateHandler = (prev?: unknown, next?: unknown) => void;
-
-type NonUndefined<A> = A extends undefined ? never : A;
-
-type UpdateHandlerFunctionKeys<T extends object> = {
-  [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
-}[keyof T];
-
-interface WatchOptions {
-  /**
-   * If true, will only start watching after the initial update/render
-   */
-  waitUntilFirstUpdate?: boolean;
-}
-
-/**
- * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
- * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
- * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
- *
- * Usage:
- *
- * @watch('propName')
- * handlePropChange(oldValue, newValue) {
- *   ...
- * }
- */
-export function watch(propertyName: string | string[], options?: WatchOptions) {
-  const resolvedOptions: Required<WatchOptions> = {
-    waitUntilFirstUpdate: false,
-    ...options
-  };
-  return <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => {
-    // @ts-expect-error - update is a protected property
-    const { update } = proto;
-    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
-
-    // @ts-expect-error - update is a protected property
-    proto.update = function (this: ElemClass, changedProps: Map<keyof ElemClass, ElemClass[keyof ElemClass]>) {
-      watchedProperties.forEach(property => {
-        const key = property as keyof ElemClass;
-        if (changedProps.has(key)) {
-          const oldValue = changedProps.get(key);
-          const newValue = this[key];
-
-          if (oldValue !== newValue) {
-            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
-              (this[decoratedFnName] as unknown as UpdateHandler)(oldValue, newValue);
-            }
-          }
-        }
-      });
-
-      update.call(this, changedProps);
-    };
-  };
-}

package/src/styles/component.styles.ts

@@ -1,17 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    box-sizing: border-box;
-  }
-
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-`;

package/src/styles/form-control.styles.ts

@@ -1,59 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .form-control .form-control__label {
-    display: none;
-  }
-
-  .form-control .form-control__help-text {
-    display: none;
-  }
-
-  /* Label */
-  .form-control--has-label .form-control__label {
-    display: inline-block;
-    color: var(--flow-ui-input-label-color);
-    margin-bottom: var(--flow-ui-spacing-3x-small);
-  }
-
-  .form-control--has-label.form-control--small .form-control__label {
-    font-size: var(--flow-ui-input-label-font-size-small);
-  }
-
-  .form-control--has-label.form-control--medium .form-control__label {
-    font-size: var(--flow-ui-input-label-font-size-medium);
-  }
-
-  .form-control--has-label.form-control--large .form-control__label {
-    font-size: var(--flow-ui-input-label-font-size-large);
-  }
-
-  :host([required]) .form-control--has-label .form-control__label::after {
-    content: var(--flow-ui-input-required-content);
-    margin-inline-start: var(--flow-ui-input-required-content-offset);
-    color: var(--flow-ui-input-required-content-color);
-  }
-
-  /* Help text */
-  .form-control--has-help-text .form-control__help-text {
-    display: block;
-    color: var(--flow-ui-input-help-text-color);
-    margin-top: var(--flow-ui-spacing-3x-small);
-  }
-
-  .form-control--has-help-text.form-control--small .form-control__help-text {
-    font-size: var(--flow-ui-input-help-text-font-size-small);
-  }
-
-  .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: var(--flow-ui-input-help-text-font-size-medium);
-  }
-
-  .form-control--has-help-text.form-control--large .form-control__help-text {
-    font-size: var(--flow-ui-input-help-text-font-size-large);
-  }
-
-  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
-    margin-top: var(--flow-ui-spacing-2x-small);
-  }
-`;

package/src/themes/_utility.css

@@ -1,29 +0,0 @@
-/*
- * This file contains utility classes that can't be contained in a component and must be applied to the light DOM. None
- * of the rules in this stylesheet should target component tags or HTML tags, and all classes *must* start with ".flow-ui-"
- * to reduce the possibility of collisions.
- */
-
-.flow-ui-scroll-lock {
-  padding-right: var(--flow-ui-scroll-lock-size) !important;
-  overflow: hidden !important;
-}
-
-.flow-ui-toast-stack {
-  position: fixed;
-  top: 0;
-  inset-inline-end: 0;
-  z-index: var(--flow-ui-z-index-toast);
-  width: 28rem;
-  max-width: 100%;
-  max-height: 100%;
-  overflow: auto;
-}
-
-.flow-ui-toast-stack flow-ui-alert {
-  margin: var(--flow-ui-spacing-medium);
-}
-
-.flow-ui-toast-stack flow-ui-alert::part(base) {
-  box-shadow: var(--flow-ui-shadow-large);
-}