placer-toolkit 0.5.1

package/dist/components/popup/popup.component.js

@@ -0,0 +1,483 @@
+import { __decorate, __metadata } from 'tslib';
+import { autoUpdate, offset, size, flip, shift, arrow, platform, computePosition } from '@floating-ui/dom';
+import { LitElement, html } from 'lit';
+import { query, property, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { offsetParent } from 'composed-offset-position';
+import { emit } from '../../internal/emit.js';
+import { styles } from './popup.styles.js';
+
+//! Popup is a low‐level utility built specifically for positioning elements. Do not mistake it for a tooltip or similar because it does not facilitate an accessible experience! Almost every correct usage of it will involve building other components. It should rarely, if ever, occur directly in your HTML.
+function isVirtualElement(e) {
+    return (e !== null &&
+        typeof e === "object" &&
+        "getBoundingClientRect" in e &&
+        ("contextElement" in e ? e.contextElement instanceof Element : true));
+}
+let PcPopup = class PcPopup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+        this.arrow = false;
+        this.arrowPadding = 10;
+        this.arrowPlacement = "anchor";
+        this.autoSizePadding = 0;
+        this.distance = 0;
+        this.flip = false;
+        this.flipFallbackPlacements = "";
+        this.flipFallbackStrategy = "best-fit";
+        this.flipPadding = 0;
+        this.hoverBridge = false;
+        this.placement = "top";
+        this.shift = false;
+        this.shiftPadding = 0;
+        this.skidding = 0;
+        this.strategy = "absolute";
+        this.updateHoverBridge = () => {
+            if (this.hoverBridge && this.anchorElement) {
+                const anchorRect = this.anchorElement.getBoundingClientRect();
+                const popupRect = this.popup.getBoundingClientRect();
+                const isVertical = this.placement.includes("top") ||
+                    this.placement.includes("bottom");
+                let topLeftX = 0;
+                let topLeftY = 0;
+                let topRightX = 0;
+                let topRightY = 0;
+                let bottomLeftX = 0;
+                let bottomLeftY = 0;
+                let bottomRightX = 0;
+                let bottomRightY = 0;
+                if (isVertical) {
+                    if (anchorRect.top < popupRect.top) {
+                        topLeftX = anchorRect.left;
+                        topLeftY = anchorRect.bottom;
+                        topRightX = anchorRect.right;
+                        topRightY = anchorRect.bottom;
+                        bottomLeftX = popupRect.left;
+                        bottomLeftY = popupRect.top;
+                        bottomRightX = popupRect.right;
+                        bottomRightY = popupRect.top;
+                    }
+                    else {
+                        topLeftX = popupRect.left;
+                        topLeftY = popupRect.bottom;
+                        topRightX = popupRect.right;
+                        topRightY = popupRect.bottom;
+                        bottomLeftX = anchorRect.left;
+                        bottomLeftY = anchorRect.top;
+                        bottomRightX = anchorRect.right;
+                        bottomRightY = anchorRect.top;
+                    }
+                }
+                else {
+                    if (anchorRect.left < popupRect.left) {
+                        topLeftX = anchorRect.right;
+                        topLeftY = anchorRect.top;
+                        topRightX = popupRect.left;
+                        topRightY = popupRect.top;
+                        bottomLeftX = anchorRect.right;
+                        bottomLeftY = anchorRect.bottom;
+                        bottomRightX = popupRect.left;
+                        bottomRightY = popupRect.bottom;
+                    }
+                    else {
+                        topLeftX = popupRect.right;
+                        topLeftY = popupRect.top;
+                        topRightX = anchorRect.left;
+                        topRightY = anchorRect.top;
+                        bottomLeftX = popupRect.right;
+                        bottomLeftY = popupRect.bottom;
+                        bottomRightX = anchorRect.left;
+                        bottomRightY = anchorRect.bottom;
+                    }
+                }
+                this.style.setProperty("--hover-bridge-top-left-x", `${topLeftX}px`);
+                this.style.setProperty("--hover-bridge-top-left-y", `${topLeftY}px`);
+                this.style.setProperty("--hover-bridge-top-right-x", `${topRightX}px`);
+                this.style.setProperty("--hover-bridge-top-right-y", `${topRightY}px`);
+                this.style.setProperty("--hover-bridge-bottom-left-x", `${bottomLeftX}px`);
+                this.style.setProperty("--hover-bridge-bottom-left-y", `${bottomLeftY}px`);
+                this.style.setProperty("--hover-bridge-bottom-right-x", `${bottomRightX}px`);
+                this.style.setProperty("--hover-bridge-bottom-right-y", `${bottomRightY}px`);
+            }
+        };
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.updateComplete;
+        this.start();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stop();
+    }
+    async updated(changedProps) {
+        super.updated(changedProps);
+        if (changedProps.has("active")) {
+            if (this.active) {
+                this.start();
+            }
+            else {
+                this.stop();
+            }
+        }
+        if (changedProps.has("anchor")) {
+            this.handleAnchorChange();
+        }
+        if (this.active) {
+            await this.updateComplete;
+            this.reposition();
+        }
+    }
+    async handleAnchorChange() {
+        await this.stop();
+        if (this.anchor && typeof this.anchor === "string") {
+            const root = this.getRootNode();
+            this.anchorElement = root.getElementById(this.anchor);
+        }
+        else if (this.anchor instanceof Element ||
+            isVirtualElement(this.anchor)) {
+            this.anchorElement = this.anchor;
+        }
+        else {
+            this.anchorElement =
+                this.querySelector('[slot="anchor"]');
+        }
+        if (this.anchorElement instanceof HTMLSlotElement) {
+            this.anchorElement = this.anchorElement.assignedElements({
+                flatten: true,
+            })[0];
+        }
+        if (this.anchorElement && this.active) {
+            this.start();
+        }
+    }
+    start() {
+        if (!this.anchorElement || !this.active) {
+            return;
+        }
+        this.cleanup = autoUpdate(this.anchorElement, this.popup, () => {
+            this.reposition();
+        });
+    }
+    async stop() {
+        return new Promise((resolve) => {
+            if (this.cleanup) {
+                this.cleanup();
+                this.cleanup = undefined;
+                this.removeAttribute("data-current-placement");
+                this.style.removeProperty("--auto-size-available-width");
+                this.style.removeProperty("--auto-size-available-height");
+                requestAnimationFrame(() => resolve());
+            }
+            else {
+                resolve();
+            }
+        });
+    }
+    reposition() {
+        if (!this.anchorElement || !this.active) {
+            return;
+        }
+        const middleware = [
+            offset({ mainAxis: this.distance, crossAxis: this.skidding }),
+        ];
+        if (this.sync) {
+            middleware.push(size({
+                apply: ({ rects }) => {
+                    const syncWidth = this.sync === "width" || this.sync === "both";
+                    const syncHeight = this.sync === "height" || this.sync === "both";
+                    this.popup.style.width = syncWidth
+                        ? `${rects.reference.width}px`
+                        : "";
+                    this.popup.style.height = syncHeight
+                        ? `${rects.reference.height}px`
+                        : "";
+                },
+            }));
+        }
+        else {
+            this.popup.style.width = "";
+            this.popup.style.height = "";
+        }
+        if (this.flip) {
+            middleware.push(flip({
+                boundary: this.flipBoundary,
+                // @ts-expect-error — We’re converting the property type of “fallbackPlacements” from a string to an array
+                fallbackPlacements: this.flipFallbackPlacements,
+                fallbackStrategy: this.flipFallbackStrategy === "best-fit"
+                    ? "bestFit"
+                    : "initialPlacement",
+                padding: this.flipPadding,
+            }));
+        }
+        if (this.shift) {
+            middleware.push(shift({
+                boundary: this.shiftBoundary,
+                padding: this.shiftPadding,
+            }));
+        }
+        if (this.autoSize) {
+            middleware.push(size({
+                boundary: this.autoSizeBoundary,
+                padding: this.autoSizePadding,
+                apply: ({ availableWidth, availableHeight }) => {
+                    if (this.autoSize === "vertical" ||
+                        this.autoSize === "both") {
+                        this.style.setProperty("--auto-size-available-height", `${availableHeight}px`);
+                    }
+                    else {
+                        this.style.removeProperty("--auto-size-available-height");
+                    }
+                    if (this.autoSize === "horizontal" ||
+                        this.autoSize === "both") {
+                        this.style.setProperty("--auto-size-available-width", `${availableWidth}px`);
+                    }
+                    else {
+                        this.style.removeProperty("--auto-size-available-width");
+                    }
+                },
+            }));
+        }
+        else {
+            this.style.removeProperty("--auto-size-available-width");
+            this.style.removeProperty("--auto-size-available-height");
+        }
+        if (this.arrow) {
+            middleware.push(arrow({
+                element: this.arrowElement,
+                padding: this.arrowPadding,
+            }));
+        }
+        const getOffsetParent = this.strategy === "absolute"
+            ? (element) => platform.getOffsetParent(element, offsetParent)
+            : platform.getOffsetParent;
+        computePosition(this.anchorElement, this.popup, {
+            placement: this.placement,
+            middleware,
+            strategy: this.strategy,
+            platform: {
+                ...platform,
+                getOffsetParent,
+            },
+        }).then(({ x, y, middlewareData, placement }) => {
+            const isRTL = document.documentElement.dir === "rtl" ||
+                (!document.documentElement.dir &&
+                    getComputedStyle(document.documentElement).direction ===
+                        "rtl");
+            const staticSide = {
+                top: "bottom",
+                right: "left",
+                bottom: "top",
+                left: "right",
+            }[placement.split("-")[0]];
+            this.setAttribute("data-current-placement", placement);
+            Object.assign(this.popup.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            if (this.arrow) {
+                const arrowX = middlewareData.arrow.x;
+                const arrowY = middlewareData.arrow.y;
+                let top = "";
+                let right = "";
+                let bottom = "";
+                let left = "";
+                if (this.arrowPlacement === "start") {
+                    const value = typeof arrowX === "number"
+                        ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))`
+                        : "";
+                    top =
+                        typeof arrowY === "number"
+                            ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))`
+                            : "";
+                    right = isRTL ? value : "";
+                    left = isRTL ? "" : value;
+                }
+                else if (this.arrowPlacement === "end") {
+                    const value = typeof arrowX === "number"
+                        ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))`
+                        : "";
+                    right = isRTL ? "" : value;
+                    left = isRTL ? value : "";
+                    bottom =
+                        typeof arrowY === "number"
+                            ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))`
+                            : "";
+                }
+                else if (this.arrowPlacement === "center") {
+                    left =
+                        typeof arrowX === "number"
+                            ? `calc(50% - var(--arrow-size-diagonal))`
+                            : "";
+                    top =
+                        typeof arrowY === "number"
+                            ? `calc(50% - var(--arrow-size-diagonal))`
+                            : "";
+                }
+                else {
+                    left = typeof arrowX === "number" ? `${arrowX}px` : "";
+                    top = typeof arrowY === "number" ? `${arrowY}px` : "";
+                }
+                Object.assign(this.arrowElement.style, {
+                    top,
+                    right,
+                    bottom,
+                    left,
+                    [staticSide]: "calc(var(--arrow-size-diagonal) * -1)",
+                });
+            }
+        });
+        requestAnimationFrame(() => this.updateHoverBridge());
+        emit(this, "pc-reposition");
+    }
+    render() {
+        return html `
+            <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
+
+            <span
+                part="hover-bridge"
+                class=${classMap({
+            "popup-hover-bridge": true,
+            "popup-hover-bridge-visible": this.hoverBridge && this.active,
+        })}
+            ></span>
+
+            <div
+                part="popup"
+                class=${classMap({
+            "popup": true,
+            "popup-active": this.active === true,
+            "popup-fixed": this.strategy === "fixed",
+            "popup-has-arrow": this.arrow === true,
+        })}
+            >
+                <slot></slot>
+                ${this.arrow
+            ? html `
+                          <div
+                              part="arrow"
+                              class="popup-arrow"
+                              role="presentation"
+                          ></div>
+                      `
+            : ""}
+            </div>
+        `;
+    }
+};
+PcPopup.styles = styles;
+__decorate([
+    query(".popup"),
+    __metadata("design:type", HTMLElement)
+], PcPopup.prototype, "popup", void 0);
+__decorate([
+    query(".popup-arrow"),
+    __metadata("design:type", HTMLElement)
+], PcPopup.prototype, "arrowElement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "active", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "anchor", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "arrow", void 0);
+__decorate([
+    property({ attribute: "arrow-padding", type: Number }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "arrowPadding", void 0);
+__decorate([
+    property({ attribute: "arrow-placement" }),
+    __metadata("design:type", String)
+], PcPopup.prototype, "arrowPlacement", void 0);
+__decorate([
+    property({ attribute: "auto-size" }),
+    __metadata("design:type", String)
+], PcPopup.prototype, "autoSize", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "autoSizeBoundary", void 0);
+__decorate([
+    property({ attribute: "auto-size-padding", type: Number }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "autoSizePadding", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "distance", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "flip", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "flipBoundary", void 0);
+__decorate([
+    property({
+        attribute: "flip-fallback-placements",
+        converter: {
+            fromAttribute: (value) => {
+                return value
+                    .split(" ")
+                    .map((p) => p.trim())
+                    .filter((p) => p !== "");
+            },
+            toAttribute: (value) => {
+                return value.join(" ");
+            },
+        },
+    }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "flipFallbackPlacements", void 0);
+__decorate([
+    property({ attribute: "flip-fallback-strategy" }),
+    __metadata("design:type", String)
+], PcPopup.prototype, "flipFallbackStrategy", void 0);
+__decorate([
+    property({ attribute: "flip-padding", type: Number }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "flipPadding", void 0);
+__decorate([
+    property({ attribute: "hover-bridge", type: Boolean }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "hoverBridge", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], PcPopup.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "shift", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "shiftBoundary", void 0);
+__decorate([
+    property({ attribute: "shift-padding", type: Number }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "shiftPadding", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], PcPopup.prototype, "skidding", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], PcPopup.prototype, "strategy", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcPopup.prototype, "sync", void 0);
+PcPopup = __decorate([
+    customElement("pc-popup")
+], PcPopup);
+
+export { PcPopup };

package/dist/components/popup/popup.d.ts

@@ -0,0 +1,8 @@
+import { PcPopup } from "./popup.component.js";
+export * from "./popup.component.js";
+export default PcPopup;
+declare global {
+    interface HTMLElementTagNameMap {
+        "pc-popup": PcPopup;
+    }
+}

package/dist/components/popup/popup.js

@@ -0,0 +1,6 @@
+import { PcPopup as PcPopup$1 } from './popup.component.js';
+
+//! Popup is a low‐level utility built specifically for positioning elements. Do not mistake it for a tooltip or similar because it does not facilitate an accessible experience! Almost every correct usage of it will involve building other components. It should rarely, if ever, occur directly in your HTML.
+var PcPopup = PcPopup$1;
+
+export { PcPopup$1 as PcPopup, PcPopup as default };

package/dist/components/popup/popup.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/popup/popup.styles.js

@@ -0,0 +1,64 @@
+import { css } from 'lit';
+
+//! Popup is a low‐level utility built specifically for positioning elements. Do not mistake it for a tooltip or similar because it does not facilitate an accessible experience! Almost every correct usage of it will involve building other components. It should rarely, if ever, occur directly in your HTML.
+const styles = css `
+    :host {
+        --arrow-color: var(--pc-color-neutral-200);
+        --arrow-size: 6px;
+
+        /* These properties are computed to account for the arrow’s dimensions
+           after being rotated 45°. The constant 0.7071 is derived from sin(45°),
+           which is the diagonal size of the arrow’s container after rotating. */
+        --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
+        --arrow-padding-offset: calc(
+            var(--arrow-size-diagonal) - var(--arrow-size)
+        );
+
+        display: contents;
+    }
+
+    .popup {
+        position: absolute;
+        isolation: isolate;
+        max-width: var(--auto-size-available-width, none);
+        max-height: var(--auto-size-available-height, none);
+    }
+
+    .popup-fixed {
+        position: fixed;
+    }
+
+    .popup:not(.popup-active) {
+        display: none;
+    }
+
+    .popup-arrow {
+        position: absolute;
+        width: calc(var(--arrow-size-diagonal) * 2);
+        height: calc(var(--arrow-size-diagonal) * 2);
+        background-color: var(--arrow-color);
+        rotate: 45deg;
+        z-index: 1;
+    }
+
+    .popup-hover-bridge:not(.popup-hover-bridge-visible) {
+        display: none;
+    }
+
+    .popup-hover-bridge {
+        position: fixed;
+        inset: 0;
+        z-index: calc(var(--pc-z-index-dropdown) - 1);
+        clip-path: polygon(
+            var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
+            var(--hover-bridge-top-right-x, 0)
+                var(--hover-bridge-top-right-y, 0),
+            var(--hover-bridge-bottom-right-x, 0)
+                var(--hover-bridge-bottom-right-y, 0),
+            var(--hover-bridge-bottom-left-x, 0)
+                var(--hover-bridge-bottom-left-y, 0)
+        );
+    }
+`;
+
+export { styles };

package/dist/components/qr-code/qr-code.component.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+export declare class PcQrCode extends LitElement {
+    static styles: CSSResultGroup;
+    canvas: HTMLElement;
+    background: string;
+    errorCorrection: "L" | "M" | "Q" | "H";
+    fill: string;
+    label: string;
+    radius: number;
+    size: number;
+    value: string;
+    firstUpdated(): void;
+    generate(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/qr-code/qr-code.component.js

@@ -0,0 +1,94 @@
+import { __decorate, __metadata } from 'tslib';
+import { LitElement, html } from 'lit';
+import { query, property, customElement } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { watch } from '../../internal/watch.js';
+import QrCreator from 'qr-creator';
+import { styles } from './qr-code.styles.js';
+
+let PcQrCode = class PcQrCode extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.background = "white";
+        this.errorCorrection = "M";
+        this.fill = "black";
+        this.label = "";
+        this.radius = 0;
+        this.size = 128;
+        this.value = "";
+    }
+    firstUpdated() {
+        this.generate();
+    }
+    generate() {
+        if (!this.hasUpdated) {
+            return;
+        }
+        QrCreator.render({
+            background: this.background,
+            ecLevel: this.errorCorrection,
+            fill: this.fill,
+            radius: this.radius,
+            size: this.size * 2,
+            text: this.value,
+        }, this.canvas);
+    }
+    render() {
+        return html `
+            <canvas
+                class="qr-code"
+                part="base"
+                role="img"
+                style=${styleMap({
+            width: `${this.size}px`,
+            height: `${this.size}px`,
+        })}
+                aria-label=${this.label?.length > 0 ? this.label : this.value}
+            ></canvas>
+        `;
+    }
+};
+PcQrCode.styles = styles;
+__decorate([
+    query("canvas"),
+    __metadata("design:type", HTMLElement)
+], PcQrCode.prototype, "canvas", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcQrCode.prototype, "background", void 0);
+__decorate([
+    property({ attribute: "error-correction" }),
+    __metadata("design:type", String)
+], PcQrCode.prototype, "errorCorrection", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcQrCode.prototype, "fill", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcQrCode.prototype, "label", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], PcQrCode.prototype, "radius", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], PcQrCode.prototype, "size", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcQrCode.prototype, "value", void 0);
+__decorate([
+    watch(["background", "errorCorrection", "fill", "radius", "size", "value"]),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcQrCode.prototype, "generate", null);
+PcQrCode = __decorate([
+    customElement("pc-qr-code")
+], PcQrCode);
+
+export { PcQrCode };

package/dist/components/qr-code/qr-code.d.ts

@@ -0,0 +1,8 @@
+import { PcQrCode } from "./qr-code.component.js";
+export * from "./qr-code.component.js";
+export default PcQrCode;
+declare global {
+    interface HTMLElementTagNameMap {
+        "pc-qr-code": PcQrCode;
+    }
+}

package/dist/components/qr-code/qr-code.js

@@ -0,0 +1,5 @@
+import { PcQrCode as PcQrCode$1 } from './qr-code.component.js';
+
+var PcQrCode = PcQrCode$1;
+
+export { PcQrCode$1 as PcQrCode, PcQrCode as default };