placer-toolkit 0.5.1

package/src/internal/default-value.ts

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,36 @@
+interface DragOptions {
+    onMove: (x: number, y: number) => void;
+    onStop: () => void;
+    initialEvent: PointerEvent;
+}
+
+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.scrollX;
+        const offsetY = dims.top + defaultView.scrollY;
+        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 (options?.initialEvent instanceof PointerEvent) {
+        move(options.initialEvent);
+    }
+}

package/src/internal/emit.ts

@@ -0,0 +1,19 @@
+export function emit(
+    target: EventTarget,
+    eventName: string,
+    eventDetail?: CustomEventInit,
+): CustomEvent {
+    const { detail, cancelable, ...rest } = eventDetail || {};
+
+    const event = new CustomEvent(eventName, {
+        bubbles: true,
+        cancelable: cancelable !== undefined ? cancelable : false,
+        composed: true,
+        detail: detail,
+        ...rest,
+    });
+
+    target.dispatchEvent(event);
+
+    return event;
+}

package/src/internal/event.ts

@@ -0,0 +1,12 @@
+export function waitForEvent(element: HTMLElement, eventName: string) {
+    return new Promise<void>((resolve) => {
+        function done(event: Event) {
+            if (event.target === element) {
+                element.removeEventListener(eventName, done);
+                resolve();
+            }
+        }
+
+        element.addEventListener(eventName, done);
+    });
+}

package/src/internal/form.ts

@@ -0,0 +1,389 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+
+export const formCollections: WeakMap<
+    HTMLFormElement,
+    Set<HTMLInputElement>
+> = new WeakMap();
+
+const reportValidityOverloads: WeakMap<HTMLFormElement, () => boolean> =
+    new WeakMap();
+const checkValidityOverloads: WeakMap<HTMLFormElement, () => boolean> =
+    new WeakMap();
+
+const userInteractedControls: WeakSet<HTMLInputElement> = new WeakSet();
+const interactions = new WeakMap<HTMLInputElement, string[]>();
+
+export interface FormControlControllerOptions {
+    form: (input: HTMLInputElement) => HTMLFormElement | null;
+    name: (input: HTMLInputElement) => string;
+    value: (input: HTMLInputElement) => unknown | unknown[];
+    defaultValue: (input: HTMLInputElement) => unknown | unknown[];
+    disabled: (input: HTMLInputElement) => boolean;
+    reportValidity: (input: HTMLInputElement) => boolean;
+    checkValidity: (input: HTMLInputElement) => boolean;
+    setValue: (input: HTMLInputElement, value: unknown) => void;
+    assumeInteractionOn: string[];
+}
+
+export class FormControlController implements ReactiveController {
+    host: HTMLInputElement & ReactiveControllerHost;
+    form?: HTMLFormElement | null;
+    options: FormControlControllerOptions;
+
+    constructor(
+        host: ReactiveControllerHost & HTMLInputElement,
+        options?: Partial<FormControlControllerOptions>,
+    ) {
+        (this.host = host).addController(this);
+        this.options = {
+            form: (input) => input.closest("form"),
+            name: (input) => input.name,
+            value: (input) => input.value,
+            defaultValue: (input) => input.defaultValue,
+            disabled: (input) => input.disabled,
+            reportValidity: (input) =>
+                typeof input.reportValidity === "function"
+                    ? input.reportValidity()
+                    : true,
+            checkValidity: (input) =>
+                typeof input.checkValidity === "function"
+                    ? input.checkValidity()
+                    : true,
+            setValue: (input, value: unknown) =>
+                (input.value = value as string),
+            assumeInteractionOn: ["input"],
+            ...options,
+        };
+    }
+
+    hostConnected() {
+        const form = this.options.form(this.host);
+
+        if (form) {
+            this.attachForm(form);
+        }
+
+        interactions.set(this.host, []);
+        this.options.assumeInteractionOn.forEach((event) => {
+            this.host.addEventListener(event, this.handleInteraction);
+        });
+    }
+
+    hostDisconnected() {
+        this.detachForm();
+
+        interactions.delete(this.host);
+        this.options.assumeInteractionOn.forEach((event) => {
+            this.host.removeEventListener(event, this.handleInteraction);
+        });
+    }
+
+    hostUpdated() {
+        const form = this.options.form(this.host);
+
+        if (!form) {
+            this.detachForm();
+        }
+
+        if (form && this.form !== form) {
+            this.detachForm();
+            this.attachForm(form);
+        }
+
+        if ("hasUpdated" in this.host && this.host.hasUpdated) {
+            this.setValidity(this.host.validity.valid);
+        }
+    }
+
+    private attachForm(form?: HTMLFormElement) {
+        if (form) {
+            this.form = form;
+
+            if (formCollections.has(this.form)) {
+                formCollections.get(this.form)!.add(this.host);
+            } else {
+                formCollections.set(
+                    this.form,
+                    new Set<HTMLInputElement>([this.host]),
+                );
+            }
+
+            this.form.addEventListener("formdata", this.handleFormData);
+            this.form.addEventListener("submit", this.handleFormSubmit);
+            this.form.addEventListener("reset", this.handleFormReset);
+
+            if (!reportValidityOverloads.has(this.form)) {
+                reportValidityOverloads.set(
+                    this.form,
+                    this.form.reportValidity,
+                );
+                this.form.reportValidity = () => this.reportFormValidity();
+            }
+
+            if (!checkValidityOverloads.has(this.form)) {
+                checkValidityOverloads.set(this.form, this.form.checkValidity);
+                this.form.checkValidity = () => this.checkFormValidity();
+            }
+        } else {
+            this.form = undefined;
+        }
+    }
+
+    private detachForm() {
+        if (!this.form) {
+            return;
+        }
+
+        const formCollection = formCollections.get(this.form);
+
+        if (!formCollection) {
+            return;
+        }
+
+        formCollection.delete(this.host);
+
+        if (formCollection.size <= 0) {
+            this.form.removeEventListener("formdata", this.handleFormData);
+            this.form.removeEventListener("submit", this.handleFormSubmit);
+            this.form.removeEventListener("reset", this.handleFormReset);
+
+            if (reportValidityOverloads.has(this.form)) {
+                this.form.reportValidity = reportValidityOverloads.get(
+                    this.form,
+                )!;
+                reportValidityOverloads.delete(this.form);
+            }
+
+            if (checkValidityOverloads.has(this.form)) {
+                this.form.checkValidity = checkValidityOverloads.get(
+                    this.form,
+                )!;
+                checkValidityOverloads.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);
+
+        if (
+            this.host.isConnected &&
+            !disabled &&
+            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;
+
+        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);
+        }
+
+        if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+            this.setUserInteracted(this.host, true);
+        }
+    };
+
+    private checkFormValidity = () => {
+        if (this.form && !this.form.noValidate) {
+            const elements = this.form.querySelectorAll<HTMLInputElement>("*");
+
+            for (const element of Array.from(elements)) {
+                if (typeof element.checkValidity === "function") {
+                    if (!element.checkValidity()) {
+                        return false;
+                    }
+                }
+            }
+        }
+
+        return true;
+    };
+
+    private reportFormValidity = () => {
+        if (this.form && !this.form.noValidate) {
+            const elements = this.form.querySelectorAll<HTMLInputElement>("*");
+
+            for (const element of Array.from(elements)) {
+                if (typeof element.reportValidity === "function") {
+                    if (!element.reportValidity()) {
+                        return false;
+                    }
+                }
+            }
+        }
+
+        return true;
+    };
+
+    private setUserInteracted(el: HTMLInputElement, hasInteracted: boolean) {
+        if (hasInteracted) {
+            userInteractedControls.add(el);
+        } else {
+            userInteractedControls.delete(el);
+        }
+
+        el.dispatchEvent(new Event("update"));
+    }
+
+    private doAction(type: "submit" | "reset", submitter?: HTMLInputElement) {
+        if (this.form) {
+            const button = document.createElement("button");
+            button.type = type;
+            button.style.position = "absolute";
+            button.style.width = "0";
+            button.style.height = "0";
+            button.style.clipPath = "inset(50%)";
+            button.style.overflow = "hidden";
+            button.style.whiteSpace = "nowrap";
+
+            if (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();
+        }
+    }
+
+    getForm() {
+        return this.form ?? null;
+    }
+
+    reset(submitter?: HTMLInputElement) {
+        this.doAction("reset", submitter);
+    }
+
+    submit(submitter?: HTMLInputElement) {
+        this.doAction("submit", submitter);
+    }
+
+    setValidity(isValid: boolean) {
+        const host = this.host;
+        const hasInteracted = Boolean(userInteractedControls.has(host));
+        const required = Boolean(host.required);
+
+        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);
+    }
+
+    updateValidity() {
+        const host = this.host;
+        this.setValidity(host.validity.valid);
+    }
+
+    emitInvalidEvent(originalInvalidEvent?: Event) {
+        const pcInvalidEvent = new CustomEvent<Record<PropertyKey, never>>(
+            "pc-invalid",
+            {
+                bubbles: false,
+                composed: false,
+                cancelable: true,
+                detail: {},
+            },
+        );
+
+        if (!originalInvalidEvent) {
+            pcInvalidEvent.preventDefault();
+        }
+
+        if (!this.host.dispatchEvent(pcInvalidEvent)) {
+            originalInvalidEvent?.preventDefault();
+        }
+    }
+}
+
+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,
+});
+
+export const valueMissingValidityState: ValidityState = Object.freeze({
+    ...validValidityState,
+    valid: false,
+    valueMissing: true,
+});
+
+export const customErrorValidityState: ValidityState = Object.freeze({
+    ...validValidityState,
+    valid: false,
+    customError: true,
+});

package/src/internal/math.ts

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

package/src/internal/modal.ts

@@ -0,0 +1,157 @@
+import { activeElements, getDeepestActiveElement } from "./active-elements.js";
+import { getTabbableElements } from "./tabbable.js";
+
+let activeModals: HTMLElement[] = [];
+
+export class Modal {
+    element: HTMLElement;
+    isExternalActivated?: boolean;
+    tabDirection: "forward" | "backward" = "forward";
+    currentFocus?: HTMLElement | null;
+    previousFocus?: HTMLElement | null;
+    elementsWithTabbableControls: string[];
+
+    constructor(element: HTMLElement) {
+        this.element = element;
+
+        this.elementsWithTabbableControls = ["iframe"];
+    }
+
+    activate() {
+        activeModals.push(this.element);
+        document.addEventListener("focusin", this.handleFocusIn);
+        document.addEventListener("keydown", this.handleKeyDown);
+        document.addEventListener("keyup", this.handleKeyUp);
+    }
+
+    deactivate() {
+        activeModals = activeModals.filter((modal) => modal !== this.element);
+        this.currentFocus = null;
+        document.removeEventListener("focusin", this.handleFocusIn);
+        document.removeEventListener("keydown", this.handleKeyDown);
+        document.removeEventListener("keyup", this.handleKeyUp);
+    }
+
+    isActive() {
+        return activeModals[activeModals.length - 1] === this.element;
+    }
+
+    activateExternal() {
+        this.isExternalActivated = true;
+    }
+
+    deactivateExternal() {
+        this.isExternalActivated = false;
+    }
+
+    private checkFocus() {
+        if (this.isActive() && !this.isExternalActivated) {
+            const tabbableElements = getTabbableElements(this.element);
+            if (!this.element.matches(":focus-within")) {
+                const start = tabbableElements[0];
+                const end = tabbableElements[tabbableElements.length - 1];
+                const target = this.tabDirection === "forward" ? start : end;
+
+                if (typeof target?.focus === "function") {
+                    this.currentFocus = target;
+                    target.focus({ preventScroll: false });
+                }
+            }
+        }
+    }
+
+    private handleFocusIn = () => {
+        if (!this.isActive()) {
+            return;
+        }
+        this.checkFocus();
+    };
+
+    private possiblyHasTabbableChildren(element: HTMLElement) {
+        return (
+            this.elementsWithTabbableControls.includes(
+                element.tagName.toLowerCase(),
+            ) || element.hasAttribute("controls")
+        );
+    }
+
+    private handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key !== "Tab" || this.isExternalActivated) {
+            return;
+        }
+
+        if (!this.isActive()) {
+            return;
+        }
+
+        const currentActiveElement = getDeepestActiveElement();
+        this.previousFocus = currentActiveElement as HTMLElement | null;
+
+        if (
+            this.previousFocus &&
+            this.possiblyHasTabbableChildren(this.previousFocus)
+        ) {
+            return;
+        }
+
+        if (event.shiftKey) {
+            this.tabDirection = "backward";
+        } else {
+            this.tabDirection = "forward";
+        }
+
+        const tabbableElements = getTabbableElements(this.element);
+
+        let currentFocusIndex = tabbableElements.findIndex(
+            (element) => element === currentActiveElement,
+        );
+
+        this.previousFocus = this.currentFocus;
+
+        const addition = this.tabDirection === "forward" ? 1 : -1;
+
+        while (true) {
+            if (currentFocusIndex + addition >= tabbableElements.length) {
+                currentFocusIndex = 0;
+            } else if (currentFocusIndex + addition < 0) {
+                currentFocusIndex = tabbableElements.length - 1;
+            } else {
+                currentFocusIndex += addition;
+            }
+
+            this.previousFocus = this.currentFocus;
+            const nextFocus = tabbableElements[currentFocusIndex];
+
+            if (this.tabDirection === "backward") {
+                if (
+                    this.previousFocus &&
+                    this.possiblyHasTabbableChildren(this.previousFocus)
+                ) {
+                    return;
+                }
+            }
+
+            if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {
+                return;
+            }
+
+            event.preventDefault();
+            this.currentFocus = nextFocus;
+            this.currentFocus?.focus({ preventScroll: false });
+
+            const allActiveElements = [...activeElements()];
+            if (
+                allActiveElements.includes(this.currentFocus) ||
+                !allActiveElements.includes(this.previousFocus!)
+            ) {
+                break;
+            }
+        }
+
+        setTimeout(() => this.checkFocus());
+    };
+
+    private handleKeyUp = () => {
+        this.tabDirection = "forward";
+    };
+}

package/src/internal/offset.ts

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