placer-toolkit 0.5.1

package/dist/internal/close-active-element.js

@@ -0,0 +1,8 @@
+const blurActiveElement = (element) => {
+    const { activeElement } = document;
+    if (activeElement && element.contains(activeElement)) {
+        document.activeElement?.blur();
+    }
+};
+
+export { blurActiveElement };

package/dist/internal/debounce.d.ts

@@ -0,0 +1 @@
+export declare const debounce: (delay: number) => <T>(_target: T, _propertyKey: string, descriptor: PropertyDescriptor) => void;

package/dist/internal/debounce.js

@@ -0,0 +1,14 @@
+const TIMER_ID_KEY = Symbol();
+const debounce = (delay) => {
+    return (_target, _propertyKey, descriptor) => {
+        const fn = descriptor.value;
+        descriptor.value = function (...args) {
+            clearTimeout(this[TIMER_ID_KEY]);
+            this[TIMER_ID_KEY] = window.setTimeout(() => {
+                fn.apply(this, args);
+            }, delay);
+        };
+    };
+};
+
+export { debounce };

package/dist/internal/default-value.d.ts

@@ -0,0 +1,2 @@
+import type { ReactiveElement } from "lit";
+export declare const defaultValue: (propertyName?: string) => (proto: ReactiveElement, key: string) => void;

package/dist/internal/default-value.js

@@ -0,0 +1,26 @@
+import { defaultConverter } from 'lit';
+
+const defaultValue = (propertyName = "value") => (proto, key) => {
+    const ctor = proto.constructor;
+    const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
+    ctor.prototype.attributeChangedCallback = function (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 = fromAttribute(value, options.type);
+            if (this[propertyName] !== newValue) {
+                this[key] = newValue;
+            }
+        }
+        attributeChangedCallback.call(this, name, old, value);
+    };
+};
+
+export { defaultValue };

package/dist/internal/drag.d.ts

@@ -0,0 +1,7 @@
+interface DragOptions {
+    onMove: (x: number, y: number) => void;
+    onStop: () => void;
+    initialEvent: PointerEvent;
+}
+export declare function drag(container: HTMLElement, options?: Partial<DragOptions>): void;
+export {};

package/dist/internal/drag.js

@@ -0,0 +1,27 @@
+function drag(container, options) {
+    function move(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);
+    }
+}
+
+export { drag };

package/dist/internal/emit.d.ts

@@ -0,0 +1 @@
+export declare function emit(target: EventTarget, eventName: string, eventDetail?: CustomEventInit): CustomEvent;

package/dist/internal/emit.js

@@ -0,0 +1,14 @@
+function emit(target, eventName, eventDetail) {
+    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;
+}
+
+export { emit };

package/dist/internal/event.d.ts

@@ -0,0 +1 @@
+export declare function waitForEvent(element: HTMLElement, eventName: string): Promise<void>;

package/dist/internal/event.js

@@ -0,0 +1,13 @@
+function waitForEvent(element, eventName) {
+    return new Promise((resolve) => {
+        function done(event) {
+            if (event.target === element) {
+                element.removeEventListener(eventName, done);
+                resolve();
+            }
+        }
+        element.addEventListener(eventName, done);
+    });
+}
+
+export { waitForEvent };

package/dist/internal/form.d.ts

@@ -0,0 +1,41 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+export declare const formCollections: WeakMap<HTMLFormElement, Set<HTMLInputElement>>;
+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 declare class FormControlController implements ReactiveController {
+    host: HTMLInputElement & ReactiveControllerHost;
+    form?: HTMLFormElement | null;
+    options: FormControlControllerOptions;
+    constructor(host: ReactiveControllerHost & HTMLInputElement, options?: Partial<FormControlControllerOptions>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private attachForm;
+    private detachForm;
+    private handleFormData;
+    private handleFormSubmit;
+    private handleFormReset;
+    private handleInteraction;
+    private checkFormValidity;
+    private reportFormValidity;
+    private setUserInteracted;
+    private doAction;
+    getForm(): HTMLFormElement | null;
+    reset(submitter?: HTMLInputElement): void;
+    submit(submitter?: HTMLInputElement): void;
+    setValidity(isValid: boolean): void;
+    updateValidity(): void;
+    emitInvalidEvent(originalInvalidEvent?: Event): void;
+}
+export declare const validValidityState: ValidityState;
+export declare const valueMissingValidityState: ValidityState;
+export declare const customErrorValidityState: ValidityState;

package/dist/internal/form.js

@@ -0,0 +1,282 @@
+const formCollections = new WeakMap();
+const reportValidityOverloads = new WeakMap();
+const checkValidityOverloads = new WeakMap();
+const userInteractedControls = new WeakSet();
+const interactions = new WeakMap();
+class FormControlController {
+    constructor(host, options) {
+        this.handleFormData = (event) => {
+            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.forEach((val) => {
+                        event.formData.append(name, val.toString());
+                    });
+                }
+                else {
+                    event.formData.append(name, value.toString());
+                }
+            }
+        };
+        this.handleFormSubmit = (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();
+            }
+        };
+        this.handleFormReset = () => {
+            this.options.setValue(this.host, this.options.defaultValue(this.host));
+            this.setUserInteracted(this.host, false);
+            interactions.set(this.host, []);
+        };
+        this.handleInteraction = (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);
+            }
+        };
+        this.checkFormValidity = () => {
+            if (this.form && !this.form.noValidate) {
+                const elements = this.form.querySelectorAll("*");
+                for (const element of Array.from(elements)) {
+                    if (typeof element.checkValidity === "function") {
+                        if (!element.checkValidity()) {
+                            return false;
+                        }
+                    }
+                }
+            }
+            return true;
+        };
+        this.reportFormValidity = () => {
+            if (this.form && !this.form.noValidate) {
+                const elements = this.form.querySelectorAll("*");
+                for (const element of Array.from(elements)) {
+                    if (typeof element.reportValidity === "function") {
+                        if (!element.reportValidity()) {
+                            return false;
+                        }
+                    }
+                }
+            }
+            return true;
+        };
+        (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) => (input.value = value),
+            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);
+        }
+    }
+    attachForm(form) {
+        if (form) {
+            this.form = form;
+            if (formCollections.has(this.form)) {
+                formCollections.get(this.form).add(this.host);
+            }
+            else {
+                formCollections.set(this.form, new Set([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;
+        }
+    }
+    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;
+        }
+    }
+    setUserInteracted(el, hasInteracted) {
+        if (hasInteracted) {
+            userInteractedControls.add(el);
+        }
+        else {
+            userInteractedControls.delete(el);
+        }
+        el.dispatchEvent(new Event("update"));
+    }
+    doAction(type, submitter) {
+        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) {
+        this.doAction("reset", submitter);
+    }
+    submit(submitter) {
+        this.doAction("submit", submitter);
+    }
+    setValidity(isValid) {
+        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) {
+        const pcInvalidEvent = new CustomEvent("pc-invalid", {
+            bubbles: false,
+            composed: false,
+            cancelable: true,
+            detail: {},
+        });
+        if (!originalInvalidEvent) {
+            pcInvalidEvent.preventDefault();
+        }
+        if (!this.host.dispatchEvent(pcInvalidEvent)) {
+            originalInvalidEvent?.preventDefault();
+        }
+    }
+}
+const validValidityState = Object.freeze({
+    badInput: false,
+    customError: false,
+    patternMismatch: false,
+    rangeOverflow: false,
+    rangeUnderflow: false,
+    stepMismatch: false,
+    tooLong: false,
+    tooShort: false,
+    typeMismatch: false,
+    valid: true,
+    valueMissing: false,
+});
+const valueMissingValidityState = Object.freeze({
+    ...validValidityState,
+    valid: false,
+    valueMissing: true,
+});
+const customErrorValidityState = Object.freeze({
+    ...validValidityState,
+    valid: false,
+    customError: true,
+});
+
+export { FormControlController, customErrorValidityState, formCollections, validValidityState, valueMissingValidityState };

package/dist/internal/math.d.ts

@@ -0,0 +1 @@
+export declare function clamp(value: number, min: number, max: number): number;

package/dist/internal/math.js

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

package/dist/internal/modal.d.ts

@@ -0,0 +1,19 @@
+export declare class Modal {
+    element: HTMLElement;
+    isExternalActivated?: boolean;
+    tabDirection: "forward" | "backward";
+    currentFocus?: HTMLElement | null;
+    previousFocus?: HTMLElement | null;
+    elementsWithTabbableControls: string[];
+    constructor(element: HTMLElement);
+    activate(): void;
+    deactivate(): void;
+    isActive(): boolean;
+    activateExternal(): void;
+    deactivateExternal(): void;
+    private checkFocus;
+    private handleFocusIn;
+    private possiblyHasTabbableChildren;
+    private handleKeyDown;
+    private handleKeyUp;
+}

package/dist/internal/modal.js

@@ -0,0 +1,116 @@
+import { getDeepestActiveElement, activeElements } from './active-elements.js';
+import { getTabbableElements } from './tabbable.js';
+
+let activeModals = [];
+class Modal {
+    constructor(element) {
+        this.tabDirection = "forward";
+        this.handleFocusIn = () => {
+            if (!this.isActive()) {
+                return;
+            }
+            this.checkFocus();
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key !== "Tab" || this.isExternalActivated) {
+                return;
+            }
+            if (!this.isActive()) {
+                return;
+            }
+            const currentActiveElement = getDeepestActiveElement();
+            this.previousFocus = currentActiveElement;
+            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());
+        };
+        this.handleKeyUp = () => {
+            this.tabDirection = "forward";
+        };
+        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;
+    }
+    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 });
+                }
+            }
+        }
+    }
+    possiblyHasTabbableChildren(element) {
+        return (this.elementsWithTabbableControls.includes(element.tagName.toLowerCase()) || element.hasAttribute("controls"));
+    }
+}
+
+export { Modal };

package/dist/internal/offset.d.ts

@@ -0,0 +1,4 @@
+export declare function getOffset(element: HTMLElement, parent: HTMLElement): {
+    top: number;
+    left: number;
+};

package/dist/internal/offset.js

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

package/dist/internal/scroll.d.ts

@@ -0,0 +1,3 @@
+export declare function lockBodyScrolling(lockingElement: HTMLElement): void;
+export declare function unlockBodyScrolling(lockingElement: HTMLElement): void;
+export declare function scrollIntoView(element: HTMLElement, container: HTMLElement, direction?: "horizontal" | "vertical" | "both", behavior?: "smooth" | "auto"): void;