@ds-autonomie/web-components 1.0.1

package/dist/internal/slot.d.ts

@@ -0,0 +1,23 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** A reactive controller that determines when slots exist. */
+export declare class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[];
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]);
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    handleSlotChange(event: Event): void;
+}
+/**
+ * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated
+ * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
+ */
+export declare function getInnerHTML(slot: HTMLSlotElement): string;
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+export declare function getTextContent(slot: HTMLSlotElement | undefined | null): string;

package/dist/internal/slot.js

@@ -0,0 +1,84 @@
+/** A reactive controller that determines when slots exist. */
+export 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();
+                // Ignore visually hidden elements since they aren't rendered
+                if (tagName === 'dsa-visually-hidden') {
+                    return false;
+                }
+                // If it doesn't have a slot attribute, it's part of the default slot
+                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();
+        }
+    }
+}
+/**
+ * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated
+ * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
+ */
+export function getInnerHTML(slot) {
+    const nodes = slot.assignedNodes({ flatten: true });
+    let html = '';
+    [...nodes].forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            html += node.outerHTML;
+        }
+        if (node.nodeType === Node.TEXT_NODE) {
+            html += node.textContent;
+        }
+    });
+    return html;
+}
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+export function getTextContent(slot) {
+    if (!slot) {
+        return '';
+    }
+    const nodes = slot.assignedNodes({ flatten: true });
+    let text = '';
+    [...nodes].forEach((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += node.textContent;
+        }
+    });
+    return text;
+}

package/dist/internal/string.d.ts

@@ -0,0 +1,2 @@
+/** Converts the first letter of a string to uppercase */
+export declare function uppercaseFirstLetter(string: string): string;

package/dist/internal/string.js

@@ -0,0 +1,4 @@
+/** Converts the first letter of a string to uppercase */
+export function uppercaseFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}

package/dist/internal/tabbable.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+ * element because it short-circuits after finding the first and last ones.
+ */
+export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
+    start: HTMLElement | null;
+    end: HTMLElement | null;
+};

package/dist/internal/tabbable.js

@@ -0,0 +1,79 @@
+/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */
+function isTabbable(el) {
+    const tag = el.tagName.toLowerCase();
+    // Elements with a -1 tab index are not tabbable
+    if (el.getAttribute('tabindex') === '-1') {
+        return false;
+    }
+    // Elements with a disabled attribute are not tabbable
+    if (el.hasAttribute('disabled')) {
+        return false;
+    }
+    // Elements with aria-disabled are not tabbable
+    if (el.hasAttribute('aria-disabled') &&
+        el.getAttribute('aria-disabled') !== 'false') {
+        return false;
+    }
+    // Radios without a checked attribute are not tabbable
+    if (tag === 'input' &&
+        el.getAttribute('type') === 'radio' &&
+        !el.hasAttribute('checked')) {
+        return false;
+    }
+    // Elements that are hidden have no offsetParent and are not tabbable
+    if (el.offsetParent === null) {
+        return false;
+    }
+    // Elements without visibility are not tabbable
+    if (window.getComputedStyle(el).visibility === 'hidden') {
+        return false;
+    }
+    // Audio and video elements with the controls attribute are tabbable
+    if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {
+        return true;
+    }
+    // Elements with a tabindex other than -1 are tabbable
+    if (el.hasAttribute('tabindex')) {
+        return true;
+    }
+    // Elements with a contenteditable attribute are tabbable
+    if (el.hasAttribute('contenteditable') &&
+        el.getAttribute('contenteditable') !== 'false') {
+        return true;
+    }
+    // At this point, the following elements are considered tabbable
+    return [
+        'button',
+        'input',
+        'select',
+        'textarea',
+        'a',
+        'audio',
+        'video',
+        'summary',
+    ].includes(tag);
+}
+/**
+ * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+ * element because it short-circuits after finding the first and last ones.
+ */
+export function getTabbableBoundary(root) {
+    var _a, _b;
+    const allElements = [];
+    function walk(el) {
+        if (el instanceof HTMLElement) {
+            allElements.push(el);
+            if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
+                walk(el.shadowRoot);
+            }
+        }
+        // @ts-expect-error cleanup upon implementation
+        [...el.children].forEach((e) => walk(e));
+    }
+    // Collect all elements including the root
+    walk(root);
+    // Find the first and last tabbable elements
+    const start = (_a = allElements.find((el) => isTabbable(el))) !== null && _a !== void 0 ? _a : null;
+    const end = (_b = allElements.reverse().find((el) => isTabbable(el))) !== null && _b !== void 0 ? _b : null;
+    return { start, end };
+}

package/dist/internal/test/data-testid-helpers.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Allows you to find a DOM element based on the value of its `data-testid` attribute.
+ * This attribute can be used to decouple identifying dom elements for testing from
+ * styling (which is typically done via class selectors) or other ids which serve
+ * different purposes.
+ * See also https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change
+ * Inspired by https://testing-library.com/docs/queries/bytestid/
+ * @param {HTMLElement} container - A parent element of the DOM element to find
+ * @param {string} testId - The value of the `data-testid` attribute of the component to find.
+ * @returns The found element or null if there was no such element
+ */
+export declare const queryByTestId: <T extends Element>(container: HTMLElement, testId: string) => T | null;

package/dist/internal/test/data-testid-helpers.js

@@ -0,0 +1,14 @@
+/**
+ * Allows you to find a DOM element based on the value of its `data-testid` attribute.
+ * This attribute can be used to decouple identifying dom elements for testing from
+ * styling (which is typically done via class selectors) or other ids which serve
+ * different purposes.
+ * See also https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change
+ * Inspired by https://testing-library.com/docs/queries/bytestid/
+ * @param {HTMLElement} container - A parent element of the DOM element to find
+ * @param {string} testId - The value of the `data-testid` attribute of the component to find.
+ * @returns The found element or null if there was no such element
+ */
+export const queryByTestId = (container, testId) => {
+    return container.querySelector(`[data-testid="${testId}"]`);
+};

package/dist/internal/test/element-visible-overflow.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Given a parent element featuring `overflow: hidden` and a child element inside the parent, this
+ * function determines whether the child will be visible taking only the overflow of the parent into account
+ * Id does NOT check whether it is hidden or overlapped by another element
+ * It basically checks whether the bounding rects of the parent and the child overlap
+ *
+ * @param {HTMLElement} outerElement - The parent element
+ * @param {HTMLElement} innerElement - the child element
+ * @returns {Boolean} whether the two elements overlap
+ */
+export declare const isElementVisibleFromOverflow: (outerElement: Element, innerElement: Element) => boolean;

package/dist/internal/test/element-visible-overflow.js

@@ -0,0 +1,18 @@
+/**
+ * Given a parent element featuring `overflow: hidden` and a child element inside the parent, this
+ * function determines whether the child will be visible taking only the overflow of the parent into account
+ * Id does NOT check whether it is hidden or overlapped by another element
+ * It basically checks whether the bounding rects of the parent and the child overlap
+ *
+ * @param {HTMLElement} outerElement - The parent element
+ * @param {HTMLElement} innerElement - the child element
+ * @returns {Boolean} whether the two elements overlap
+ */
+export const isElementVisibleFromOverflow = (outerElement, innerElement) => {
+    const outerRect = outerElement.getBoundingClientRect();
+    const innerRect = innerElement.getBoundingClientRect();
+    return (outerRect.top <= innerRect.bottom &&
+        innerRect.top <= outerRect.bottom &&
+        outerRect.left <= innerRect.right &&
+        innerRect.left <= outerRect.right);
+};

package/dist/internal/test/form-control-base-tests.d.ts

@@ -0,0 +1,7 @@
+import type { ShoelaceFormControl } from '../shoelace-element';
+/** Runs a set of generic tests for Shoelace form controls */
+export declare function runFormControlBaseTests<T extends ShoelaceFormControl = ShoelaceFormControl>(tagNameOrConfig: string | {
+    tagName: string;
+    init?: (control: T) => void;
+    variantName: string;
+}): void;

package/dist/internal/test/form-control-base-tests.js

@@ -0,0 +1,262 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { expect, fixture } from '@open-wc/testing';
+/** Runs a set of generic tests for Shoelace form controls */
+export function runFormControlBaseTests(tagNameOrConfig) {
+    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 = () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield createFormControl(tagName);
+        init === null || init === void 0 ? void 0 : 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, //
+displayName, createControl) {
+    // will be used later to retrieve meta information about the control
+    describe(`Form validity base test for ${displayName}`, () => __awaiter(this, void 0, void 0, function* () {
+        it('should have a property `validity` of type `object`', () => __awaiter(this, void 0, void 0, function* () {
+            const control = yield createControl();
+            expect(control).satisfy(() => control.validity !== null && typeof control.validity === 'object');
+        }));
+        it('should have a property `validationMessage` of type `string`', () => __awaiter(this, void 0, void 0, function* () {
+            const control = yield createControl();
+            expect(control).satisfy(() => typeof control.validationMessage === 'string');
+        }));
+        it('should implement method `checkValidity`', () => __awaiter(this, void 0, void 0, function* () {
+            const control = yield createControl();
+            expect(control).satisfies(() => typeof control.checkValidity === 'function');
+        }));
+        it('should implement method `setCustomValidity`', () => __awaiter(this, void 0, void 0, function* () {
+            const control = yield createControl();
+            expect(control).satisfies(() => typeof control.setCustomValidity === 'function');
+        }));
+        it('should implement method `reportValidity`', () => __awaiter(this, void 0, void 0, function* () {
+            const control = yield createControl();
+            expect(control).satisfies(() => typeof control.reportValidity === 'function');
+        }));
+        it('should be valid initially', () => __awaiter(this, void 0, void 0, function* () {
+            const control = yield createControl();
+            expect(control.validity.valid).to.equal(true);
+        }));
+        it('should make sure that calling `.checkValidity()` will return `true` when valid', () => __awaiter(this, void 0, void 0, function* () {
+            const control = yield createControl();
+            expect(control.checkValidity()).to.equal(true);
+        }));
+        it('should make sure that calling `.reportValidity()` will return `true` when valid', () => __awaiter(this, void 0, void 0, function* () {
+            const control = yield createControl();
+            expect(control.reportValidity()).to.equal(true);
+        }));
+        it('should not emit an `dsa-invalid` event when `.checkValidity()` is called while valid', () => __awaiter(this, void 0, void 0, function* () {
+            const control = yield createControl();
+            const emittedEvents = checkEventEmissions(control, 'dsa-invalid', () => control.checkValidity());
+            expect(emittedEvents.length).to.equal(0);
+        }));
+        it('should not emit an `dsa-invalid` event when `.reportValidity()` is called while valid', () => __awaiter(this, void 0, void 0, function* () {
+            const control = yield createControl();
+            const emittedEvents = checkEventEmissions(control, 'dsa-invalid', () => control.reportValidity());
+            expect(emittedEvents.length).to.equal(0);
+        }));
+        // TODO: As soon as `DSARadioGroup` has a property `disabled` this
+        // condition can be removed
+        if (tagName !== 'dsa-radio-group' && tagName !== 'dsa-checkbox-group') {
+            it('should not emit an `dsa-invalid` event when `.checkValidity()` is called in custom error case while disabled', () => __awaiter(this, void 0, void 0, function* () {
+                const control = yield createControl();
+                control.setCustomValidity('error');
+                control.disabled = true;
+                yield control.updateComplete;
+                const emittedEvents = checkEventEmissions(control, 'dsa-invalid', () => control.checkValidity());
+                expect(emittedEvents.length).to.equal(0);
+            }));
+            it('should not emit an `dsa-invalid` event when `.reportValidity()` is called in custom error case while disabled', () => __awaiter(this, void 0, void 0, function* () {
+                const control = yield createControl();
+                control.setCustomValidity('error');
+                control.disabled = true;
+                yield control.updateComplete;
+                const emittedEvents = checkEventEmissions(control, 'dsa-invalid', () => control.reportValidity());
+                expect(emittedEvents.length).to.equal(0);
+            }));
+        }
+        // Run special tests depending on component type
+        const mode = getMode(yield createControl());
+        if (mode === 'slButtonOfTypeButton') {
+            runSpecialTests_slButtonOfTypeButton(createControl);
+        }
+        else if (mode === 'slButtonWithHRef') {
+            runSpecialTests_slButtonWithHref(createControl);
+        }
+        else {
+            runSpecialTests_standard(createControl);
+        }
+    }));
+}
+//
+//  Special tests for <dsa-button type="button">
+//
+function runSpecialTests_slButtonOfTypeButton(createControl) {
+    it('should make sure that `.validity.valid` is `false` in custom error case', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield 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', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield 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', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield createControl();
+        control.setCustomValidity('error');
+        expect(control.reportValidity()).to.equal(true);
+    }));
+    it('should not emit an `dsa-invalid` event when `.checkValidity()` is called in custom error case, and not disabled', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield createControl();
+        control.setCustomValidity('error');
+        control.disabled = false;
+        yield control.updateComplete;
+        const emittedEvents = checkEventEmissions(control, 'dsa-invalid', () => control.checkValidity());
+        expect(emittedEvents.length).to.equal(0);
+    }));
+    it('should not emit an `dsa-invalid` event when `.reportValidity()` is called in custom error case, and not disabled', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield createControl();
+        control.setCustomValidity('error');
+        control.disabled = false;
+        yield control.updateComplete;
+        const emittedEvents = checkEventEmissions(control, 'dsa-invalid', () => control.reportValidity());
+        expect(emittedEvents.length).to.equal(0);
+    }));
+}
+//
+// Special tests for <dsa-button href="...">
+//
+function runSpecialTests_slButtonWithHref(createControl) {
+    it('should make sure that calling `.checkValidity()` will return `true` in custom error case', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield createControl();
+        control.setCustomValidity('error');
+        expect(control.checkValidity()).to.equal(true);
+    }));
+    it('should make sure that calling `.reportValidity()` will return `true` in custom error case', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield createControl();
+        control.setCustomValidity('error');
+        expect(control.reportValidity()).to.equal(true);
+    }));
+    it('should not emit an `dsa-invalid` event when `.checkValidity()` is called in custom error case', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield createControl();
+        control.setCustomValidity('error');
+        yield control.updateComplete;
+        const emittedEvents = checkEventEmissions(control, 'dsa-invalid', () => control.checkValidity());
+        expect(emittedEvents.length).to.equal(0);
+    }));
+    it('should not emit an `dsa-invalid` event when `.reportValidity()` is called in custom error case', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield createControl();
+        control.setCustomValidity('error');
+        yield control.updateComplete;
+        const emittedEvents = checkEventEmissions(control, 'dsa-invalid', () => control.reportValidity());
+        expect(emittedEvents.length).to.equal(0);
+    }));
+}
+//
+// Special tests for all components with standard behavior
+//
+function runSpecialTests_standard(createControl) {
+    it('should make sure that `.validity.valid` is `false` in custom error case', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield 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', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield createControl();
+        control.setCustomValidity('error');
+        expect(control.checkValidity()).to.equal(false);
+    }));
+    it('should make sure that calling `.reportValidity()` will return `false` in custom error case', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield createControl();
+        control.setCustomValidity('error');
+        expect(control.reportValidity()).to.equal(false);
+    }));
+    it('should emit an `dsa-invalid` event when `.checkValidity()` is called in custom error case and not disabled', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield createControl();
+        control.setCustomValidity('error');
+        control.disabled = false;
+        yield control.updateComplete;
+        const emittedEvents = checkEventEmissions(control, 'dsa-invalid', () => control.checkValidity());
+        expect(emittedEvents.length).to.equal(1);
+    }));
+    it('should emit an `dsa-invalid` event when `.reportValidity()` is called in custom error case and not disabled', () => __awaiter(this, void 0, void 0, function* () {
+        const control = yield createControl();
+        control.setCustomValidity('error');
+        control.disabled = false;
+        yield control.updateComplete;
+        const emittedEvents = checkEventEmissions(control, 'dsa-invalid', () => control.reportValidity());
+        expect(emittedEvents.length).to.equal(1);
+    }));
+}
+//
+// Local helper functions
+//
+// Creates a testable Shoelace form control instance
+function createFormControl(tagName) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return yield fixture(`<${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, eventType, action) {
+    const emittedEvents = [];
+    const eventHandler = (event) => {
+        emittedEvents.push(event);
+    };
+    try {
+        control.addEventListener(eventType, eventHandler);
+        action();
+    }
+    finally {
+        control.removeEventListener(eventType, eventHandler);
+    }
+    return emittedEvents;
+}
+// Component `dsa-button` behaves quite different to the other components. To keep things simple we use simple conditions
+// here. `dsa-button` might stay the only component in Shoelace core behaves that way, so we just hard code it here.
+function getMode(control) {
+    if (control.localName === 'dsa-button' && //
+        'href' in control &&
+        'type' in control &&
+        control.type === 'button' &&
+        !control.href) {
+        return 'slButtonOfTypeButton';
+    }
+    // <dsa-button href="...">
+    if (control.localName === 'dsa-button' &&
+        'href' in control &&
+        !!control.href) {
+        return 'slButtonWithHRef';
+    }
+    // all other components
+    return 'standard';
+}

package/dist/internal/test/wait-for-scrolling.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 declare const waitForScrollingToEnd: (element: Element, timeoutInMs?: number) => Promise<void>;

package/dist/internal/test/wait-for-scrolling.js

@@ -0,0 +1,34 @@
+/**
+ * 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, timeoutInMs = 500) => {
+    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/dist/internal/test.d.ts

@@ -0,0 +1,20 @@
+/** A testing utility that measures an element's position and clicks on it. */
+export declare function clickOnElement(
+/** The element to click */
+el: Element, 
+/** The location of the element to click */
+position?: 'top' | 'right' | 'bottom' | 'left' | 'center', 
+/** The horizontal offset to apply to the position when clicking */
+offsetX?: number, 
+/** The vertical offset to apply to the position when clicking */
+offsetY?: number): Promise<void>;
+/** A testing utility that moves the mouse onto an element. */
+export declare function moveMouseOnElement(
+/** The element to click */
+el: Element, 
+/** The location of the element to click */
+position?: 'top' | 'right' | 'bottom' | 'left' | 'center', 
+/** The horizontal offset to apply to the position when clicking */
+offsetX?: number, 
+/** The vertical offset to apply to the position when clicking */
+offsetY?: number): Promise<void>;