placer-toolkit 0.5.1

package/src/components/comparer/comparer.styles.ts

@@ -0,0 +1,73 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        --divider-width: 2px;
+        --handle-size: 2.5rem;
+        display: inline-block;
+        position: relative;
+    }
+
+    .comparer {
+        max-width: 100%;
+        max-height: 100%;
+        overflow: hidden;
+    }
+
+    .comparer-before-content,
+    .comparer-after-content {
+        display: block;
+        pointer-events: none;
+    }
+
+    .comparer-before-content ::slotted(*),
+    .comparer-after-content ::slotted(*) {
+        display: block;
+        max-width: 100% !important;
+        height: auto;
+        border-radius: var(--pc-border-radius-m);
+    }
+
+    .comparer-after-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .comparer-divider {
+        display: flex;
+        position: absolute;
+        align-items: center;
+        justify-content: center;
+        top: 0;
+        width: var(--divider-width);
+        height: 100%;
+        background-color: var(--pc-color-neutral-0);
+        translate: calc(var(--divider-width) / -2);
+        cursor: ew-resize;
+    }
+
+    .comparer-handle {
+        display: flex;
+        position: absolute;
+        align-items: center;
+        justify-content: center;
+        top: calc(50% - (var(--handle-size) / 2));
+        width: var(--handle-size);
+        height: var(--handle-size);
+        background-color: var(--pc-color-neutral-0);
+        border-radius: var(--pc-border-radius-circle);
+        font-size: calc(var(--handle-size) * 0.5);
+        color: var(--pc-color-neutral-700);
+        cursor: inherit;
+        z-index: 10;
+        transition: outline var(--pc-transition-fast) ease-in-out;
+    }
+
+    .comparer-handle:focus-visible {
+        outline: var(--pc-focus-ring);
+        outline-offset: var(--pc-focus-ring);
+    }
+`;

package/src/components/comparer/comparer.ts

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

package/src/components/copy-button/copy-button.component.ts

@@ -0,0 +1,272 @@
+import { LitElement, html } from "lit";
+import type { CSSResultGroup } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import {
+    getAnimation,
+    setDefaultAnimation,
+} from "../../utilities/animation-registry.js";
+import { emit } from "../../internal/emit.js";
+import { PcIcon } from "../icon/icon.js";
+import { PcTooltip } from "../tooltip/tooltip.js";
+import { styles } from "./copy-button.styles.js";
+
+setDefaultAnimation("copy.in", {
+    keyframes: [
+        { scale: "0.6", opacity: "0" },
+        { scale: "1.1", opacity: "1" },
+        { scale: "0.95", opacity: "1" },
+        { scale: "1", opacity: "1" },
+    ],
+    options: {
+        duration: 350,
+        easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    },
+});
+
+setDefaultAnimation("copy.out", {
+    keyframes: [
+        { scale: "1", opacity: "1" },
+        { scale: "0.85", opacity: "0" },
+    ],
+    options: {
+        duration: 200,
+        easing: "cubic-bezier(0.75, 0, 0.9, 0.05)",
+    },
+});
+
+/**
+ * @summary Copies text data to the clipboard when the user clicks the trigger.
+ * @status experimental
+ * @since 0.5.1
+ *
+ * @dependency pc-icon
+ * @dependency pc-tooltip
+ *
+ * @slot copy-icon — The icon to show in the default copy state. Works best with `<pc-icon>`.
+ * @slot success-icon — The icon to show when the content is copied. Works best with `<pc-icon>`.
+ * @slot error-icon — The icon to show when a copy error occurs. Works best with `<pc-icon>`.
+ *
+ * @event pc-copy — Emitted when the data has been copied.
+ * @event pc-error — Emitted when the data could not be copied.
+ *
+ * @csspart button — The internal `<button>` element.
+ * @csspart copy-icon — The container that holds the copy icon.
+ * @csspart success-icon — The container that holds the success icon.
+ * @csspart error-icon — The container that holds the error icon.
+ * @csspart tooltip__base — The tooltip’s `base` part.
+ * @csspart tooltip__base__popup — The tooltip’s `popup` part.
+ * @csspart tooltip__base__arrow — The tooltip’s `arrow` part.
+ * @csspart tooltip__body — The tooltip’s `body` part.
+ *
+ * @cssproperty --success-color — The colour to use for success feedback.
+ * @cssproperty --error-color — The colour to use for error feedback.
+ *
+ * @animation copy.in — The animation to use when the icons animate in.
+ * @animation copy.out — The animation to use when the icons animate out.
+ */
+@customElement("pc-copy-button")
+export class PcCopyButton extends LitElement {
+    static styles: CSSResultGroup = styles;
+    /** @internal This is an internal property. */
+    static dependencies = { "pc-icon": PcIcon, "pc-tooltip": PcTooltip };
+
+    /** @internal This is an internal property. */
+    @query('slot[name="copy-icon"]') copyIcon!: HTMLSlotElement;
+    /** @internal This is an internal property. */
+    @query('slot[name="success-icon"]') successIcon!: HTMLSlotElement;
+    /** @internal This is an internal property. */
+    @query('slot[name="error-icon"]') errorIcon!: HTMLSlotElement;
+    /** @internal This is an internal property. */
+    @query("pc-tooltip") tooltip!: PcTooltip;
+
+    /** @internal This is an internal property. */
+    @state() isCopying = false;
+    /** @internal This is an internal property. */
+    @state() status: "rest" | "success" | "error" = "rest";
+
+    /** The text value to copy. */
+    @property() value = "";
+
+    /**An id that references an element in the same document from which data will be copied. If both this and `value` are present, this value will take precedence. By default, the target element’s `textContent` will be copied. To copy an attribute, append the attribute name wrapped in square brackets (e.g., `from="element[value]"`). To copy a property, append a dot and the property name (e.g., `from="element.value"`). */
+    @property() from = "";
+
+    /** Disables the copy button. */
+    @property({ type: Boolean, reflect: true }) disabled = false;
+
+    /** A custom label to show in the tooltip. */
+    @property({ attribute: "copy-label" }) copyLabel = "";
+
+    /** A custom label to show in the tooltip after copying. */
+    @property({ attribute: "success-label" }) successLabel = "";
+
+    /** A custom label to show in the tooltip when a copy error occurs. */
+    @property({ attribute: "error-label" }) errorLabel = "";
+
+    /** The length of time to show feedback before restoring the default trigger. */
+    @property({ attribute: "feedback-duration", type: Number })
+    feedbackDuration = 1000;
+
+    /** The preferred placement of the tooltip. */
+    @property({ attribute: "tooltip-placement" }) tooltipPlacement:
+        | "top"
+        | "right"
+        | "bottom"
+        | "left" = "top";
+
+    /** Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all situations. */
+    @property({ type: Boolean }) hoist = false;
+
+    private async handleCopy() {
+        if (this.disabled || this.isCopying) {
+            return;
+        }
+        this.isCopying = true;
+
+        let valueToCopy = this.value;
+
+        if (this.from) {
+            const root = this.getRootNode() as ShadowRoot | Document;
+
+            const isProperty = this.from.includes(".");
+            const isAttribute =
+                this.from.includes("[") && this.from.includes("]");
+            let id = this.from;
+            let field = "";
+
+            if (isProperty) {
+                [id, field] = this.from.trim().split(".");
+            } else if (isAttribute) {
+                [id, field] = this.from.trim().replace(/\]$/, "").split("[");
+            }
+
+            const target =
+                "getElementById" in root ? root.getElementById(id) : null;
+
+            if (target) {
+                if (isAttribute) {
+                    valueToCopy = target.getAttribute(field) || "";
+                } else if (isProperty) {
+                    // @ts-expect-error — Accessing a property with dynamic types
+                    valueToCopy = target[field] || "";
+                } else {
+                    valueToCopy = target.textContent || "";
+                }
+            } else {
+                this.showStatus("error");
+                emit(this, "pc-error");
+            }
+        }
+
+        if (!valueToCopy) {
+            this.showStatus("error");
+            emit(this, "pc-error");
+        } else {
+            try {
+                await navigator.clipboard.writeText(valueToCopy);
+                this.showStatus("success");
+                emit(this, "pc-copy", {
+                    detail: {
+                        value: valueToCopy,
+                    },
+                });
+            } catch {
+                this.showStatus("error");
+                emit(this, "pc-error");
+            }
+        }
+    }
+
+    private async showStatus(status: "success" | "error") {
+        const copyLabel = this.copyLabel || "Copy";
+        const successLabel = this.successLabel || "Copied!";
+        const errorLabel = this.errorLabel || "Error";
+        const iconToShow =
+            status === "success" ? this.successIcon : this.errorIcon;
+        const showAnimation = getAnimation(this, "copy.in", { dir: "ltr" });
+        const hideAnimation = getAnimation(this, "copy.out", { dir: "ltr" });
+
+        this.tooltip.content = status === "success" ? successLabel : errorLabel;
+
+        await this.copyIcon.animate(
+            hideAnimation.keyframes,
+            hideAnimation.options,
+        ).finished;
+        this.copyIcon.hidden = true;
+        this.status = status;
+        iconToShow.hidden = false;
+        await iconToShow.animate(showAnimation.keyframes, showAnimation.options)
+            .finished;
+
+        setTimeout(async () => {
+            await iconToShow.animate(
+                hideAnimation.keyframes,
+                hideAnimation.options,
+            ).finished;
+            iconToShow.hidden = true;
+            this.status = "rest";
+            this.copyIcon.hidden = false;
+            await this.copyIcon.animate(
+                showAnimation.keyframes,
+                showAnimation.options,
+            ).finished;
+
+            this.tooltip.content = copyLabel;
+            this.isCopying = false;
+        }, this.feedbackDuration);
+    }
+
+    render() {
+        const copyLabel = this.copyLabel || "Copy";
+
+        return html`
+            <pc-tooltip
+                class=${classMap({
+                    "copy-button-container": true,
+                    "copy-button-success": this.status === "success",
+                    "copy-button-error": this.status === "error",
+                })}
+                content=${copyLabel}
+                placement=${this.tooltipPlacement}
+                ?disabled=${this.disabled}
+                ?hoist=${this.hoist}
+                exportparts="
+                    base:tooltip__base,
+                    base-popup:tooltip__base__popup,
+                    base-arrow:tooltip__base__arrow,
+                    body:tooltip__body
+                "
+            >
+                <button
+                    class="copy-button"
+                    type="button"
+                    part="button"
+                    ?disabled=${this.disabled}
+                    @click=${this.handleCopy}
+                >
+                    <slot part="copy-icon" name="copy-icon">
+                        <pc-icon
+                            library="system"
+                            icon-style="regular"
+                            name="copy"
+                        ></pc-icon>
+                    </slot>
+                    <slot part="success-icon" name="success-icon" hidden>
+                        <pc-icon
+                            library="system"
+                            icon-style="solid"
+                            name="check"
+                        ></pc-icon>
+                    </slot>
+                    <slot part="error-icon" name="error-icon" hidden>
+                        <pc-icon
+                            library="system"
+                            icon-style="solid"
+                            name="xmark"
+                        ></pc-icon>
+                    </slot>
+                </button>
+            </pc-tooltip>
+        `;
+    }
+}

package/src/components/copy-button/copy-button.styles.ts

@@ -0,0 +1,59 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        --error-color: var(--pc-color-danger-600);
+        --success-color: var(--pc-color-success-600);
+        display: inline-block;
+    }
+
+    .copy-button {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+        background: transparent;
+        border: none;
+        border-radius: var(--pc-border-radius-m);
+        font-size: inherit;
+        color: inherit;
+        padding: var(--pc-spacing-s);
+        cursor: pointer;
+        transition: all var(--pc-transition-fast) ease-in-out;
+    }
+
+    .copy-button:hover:not([disabled]),
+    .copy-button:focus-visible:not([disabled]) {
+        background-color: var(--pc-color-neutral-200);
+    }
+
+    .copy-button:active:not([disabled]) {
+        background-color: var(--pc-color-neutral-100);
+    }
+
+    .copy-button-success .copy-button {
+        color: var(--success-color);
+    }
+
+    .copy-button-error .copy-button {
+        color: var(--error-color);
+    }
+
+    .copy-button:focus-visible {
+        outline: var(--pc-focus-ring);
+        outline-offset: var(--pc-focus-ring-offset);
+    }
+
+    .copy-button[disabled] {
+        opacity: 0.6;
+        cursor: not-allowed !important;
+    }
+
+    slot {
+        display: inline-flex;
+    }
+
+    /* This is included since browsers don’t handle the hidden attribute well on slot elements */
+    slot[hidden] {
+        display: none !important;
+    }
+`;

package/src/components/copy-button/copy-button.ts

@@ -0,0 +1,10 @@
+import { PcCopyButton } from "./copy-button.component.js";
+
+export * from "./copy-button.component.js";
+export default PcCopyButton;
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pc-copy-button": PcCopyButton;
+    }
+}

package/src/components/details/details.component.ts

@@ -0,0 +1,259 @@
+import { LitElement, html } from "lit";
+import type { CSSResultGroup } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import {
+    animateTo,
+    shimKeyframesHeightAuto,
+    stopAnimations,
+} from "../../internal/animate.js";
+import {
+    getAnimation,
+    setDefaultAnimation,
+} from "../../utilities/animation-registry.js";
+import { waitForEvent } from "../../internal/event.js";
+import { watch } from "../../internal/watch.js";
+import { emit } from "../../internal/emit.js";
+import { PcIcon } from "../icon/icon.js";
+import { styles } from "../details/details.styles.js";
+
+setDefaultAnimation("details.show", {
+    keyframes: [
+        { height: "0", opacity: "0" },
+        { height: "auto", opacity: "1" },
+    ],
+    options: { duration: 300, easing: "cubic-bezier(0.33, 1, 0.68, 1)" },
+});
+
+setDefaultAnimation("details.hide", {
+    keyframes: [
+        { height: "auto", opacity: "1" },
+        { height: "0", opacity: "0" },
+    ],
+    options: { duration: 200, easing: "cubic-bezier(0.55, 0, 0.55, 0.2)" },
+});
+
+@customElement("pc-details")
+export class PcDetails extends LitElement {
+    static styles: CSSResultGroup = styles;
+    static dependencies = { "pc-icon": PcIcon };
+
+    @query(".details") details!: HTMLDetailsElement;
+    @query(".details-header") header!: HTMLElement;
+    @query(".details-body") body!: HTMLElement;
+    @query(".details-expand-icon-slot") expandIconSlot!: HTMLSlotElement;
+
+    detailsObserver!: MutationObserver;
+
+    @property({ type: Boolean, reflect: true }) disabled = false;
+
+    @property({ type: Boolean, reflect: true }) open = false;
+
+    @property() summary?: string;
+
+    firstUpdated() {
+        this.body.style.height = this.open ? "auto" : "0";
+
+        if (this.open) {
+            this.details.open = true;
+        }
+
+        this.detailsObserver = new MutationObserver((changes) => {
+            for (const change of changes) {
+                if (
+                    change.type === "attributes" &&
+                    change.attributeName === "open"
+                ) {
+                    if (this.details.open) {
+                        this.show();
+                    } else {
+                        this.hide();
+                    }
+                }
+            }
+        });
+        this.detailsObserver.observe(this.details, { attributes: true });
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.detailsObserver?.disconnect();
+    }
+
+    private handleSummaryClick(event: MouseEvent) {
+        event.preventDefault();
+
+        if (!this.disabled) {
+            if (this.open) {
+                this.hide();
+            } else {
+                this.show();
+            }
+            this.header.focus();
+        }
+    }
+
+    private handleSummaryKeyDown(event: KeyboardEvent) {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+
+            if (this.open) {
+                this.hide();
+            } else {
+                this.show();
+            }
+        }
+
+        if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+            event.preventDefault();
+            this.hide();
+        }
+
+        if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+            event.preventDefault();
+            this.show();
+        }
+    }
+
+    @watch("open", { waitUntilFirstUpdate: true })
+    async handleOpenChange() {
+        if (this.open) {
+            this.details.open = true;
+
+            const pcShowEvent = emit(this, "pc-show", {
+                cancelable: true,
+            }) as unknown as Event;
+
+            if (pcShowEvent.defaultPrevented) {
+                this.open = false;
+                this.details.open = false;
+                return;
+            }
+
+            await stopAnimations(this.body);
+
+            const { keyframes, options } = getAnimation(this, "details.show", {
+                dir: document.documentElement.dir || "ltr",
+            });
+
+            await animateTo(
+                this.body,
+                shimKeyframesHeightAuto(keyframes, this.body.scrollHeight),
+                options,
+            );
+
+            this.body.style.height = "auto";
+            emit(this, "pc-after-show");
+        } else {
+            const pcHide = emit(this, "pc-hide", {
+                cancelable: true,
+            }) as unknown as Event;
+
+            if (pcHide.defaultPrevented) {
+                this.details.open = true;
+                this.open = true;
+                return;
+            }
+
+            await stopAnimations(this.body);
+
+            const { keyframes, options } = getAnimation(this, "details.hide", {
+                dir: document.documentElement.dir || "ltr",
+            });
+
+            await animateTo(
+                this.body,
+                shimKeyframesHeightAuto(keyframes, this.body.scrollHeight),
+                options,
+            );
+
+            this.body.style.height = "auto";
+
+            this.details.open = false;
+            emit(this, "pc-after-hide");
+        }
+    }
+
+    async show() {
+        if (this.open || this.disabled) {
+            return undefined;
+        }
+
+        this.open = true;
+        return waitForEvent(this, "pc-after-show");
+    }
+
+    async hide() {
+        if (!this.open || this.disabled) {
+            return undefined;
+        }
+
+        this.open = false;
+        return waitForEvent(this, "pc-after-hide");
+    }
+
+    render() {
+        const isRTL =
+            document.documentElement.dir === "rtl" ||
+            (!document.documentElement.dir &&
+                getComputedStyle(document.documentElement).direction === "rtl");
+
+        return html`
+            <details
+                part="base"
+                class=${classMap({
+                    "details": true,
+                    "details-open": this.open === true,
+                    "details-disabled": this.disabled === true,
+                    "details-rtl": isRTL === true,
+                })}
+            >
+                <summary
+                    part="header"
+                    class="details-header"
+                    id="header"
+                    role="button"
+                    aria-expanded=${this.open ? "true" : "false"}
+                    aria-controls="content"
+                    aria-disabled=${this.disabled ? "true" : "false"}
+                    tabindex=${this.disabled ? "-1" : "0"}
+                    @click=${this.handleSummaryClick}
+                    @keydown=${this.handleSummaryKeyDown}
+                >
+                    <slot class="details-summary" part="summary" name="summary">
+                        ${this.summary}
+                    </slot>
+
+                    <span part="summary-icon" class="summary-icon">
+                        <slot name="expand-icon">
+                            <pc-icon
+                                library="system"
+                                icon-style="solid"
+                                name=${isRTL ? "chevron-left" : "chevron-right"}
+                            ></pc-icon>
+                        </slot>
+                        <slot name="collapse-icon">
+                            <pc-icon
+                                library="system"
+                                icon-style="solid"
+                                name=${isRTL ? "chevron-left" : "chevron-right"}
+                            ></pc-icon>
+                        </slot>
+                    </span>
+                </summary>
+
+                <div
+                    class="details-body"
+                    role="region"
+                    aria-labelledby="header"
+                >
+                    <slot
+                        class="details-content"
+                        part="content"
+                        id="content"
+                    ></slot>
+                </div>
+            </details>
+        `;
+    }
+}