placer-toolkit 0.5.1

package/dist/components/tooltip/tooltip.component.js

@@ -0,0 +1,267 @@
+import { __decorate, __metadata } from 'tslib';
+import { LitElement, html } from 'lit';
+import { query, property, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { parseDuration, stopAnimations, animateTo } from '../../internal/animate.js';
+import { setDefaultAnimation, getAnimation } from '../../utilities/animation-registry.js';
+import { waitForEvent } from '../../internal/event.js';
+import { watch } from '../../internal/watch.js';
+import { emit } from '../../internal/emit.js';
+import { PcPopup } from '../popup/popup.component.js';
+import { styles } from './tooltip.styles.js';
+
+setDefaultAnimation("tooltip.show", {
+    keyframes: [
+        { opacity: 0, scale: 0.8 },
+        { opacity: 1, scale: 1 },
+    ],
+    options: { duration: 150, easing: "ease-out" },
+});
+setDefaultAnimation("tooltip.hide", {
+    keyframes: [
+        { opacity: 1, scale: 1 },
+        { opacity: 0, scale: 0.8 },
+    ],
+    options: { duration: 150, easing: "ease-in" },
+});
+let PcTooltip = class PcTooltip extends LitElement {
+    constructor() {
+        super();
+        this.content = "";
+        this.disabled = false;
+        this.distance = 8;
+        this.hoist = false;
+        this.open = false;
+        this.placement = "top";
+        this.skidding = 0;
+        this.trigger = "hover focus";
+        this.handleClick = () => {
+            if (this.hasTrigger("click")) {
+                if (this.open) {
+                    this.hide();
+                }
+                else {
+                    this.show();
+                }
+            }
+        };
+        this.handleFocus = () => {
+            if (this.hasTrigger("focus")) {
+                this.show();
+            }
+        };
+        this.handleBlur = () => {
+            if (this.hasTrigger("focus")) {
+                this.hide();
+            }
+        };
+        this.handleDocumentKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.stopPropagation();
+                this.hide();
+            }
+        };
+        this.handleMouseOver = () => {
+            if (this.hasTrigger("hover")) {
+                const delay = parseDuration(getComputedStyle(this).getPropertyValue("--show-delay"));
+                clearTimeout(this.hoverTimeout);
+                this.hoverTimeout = window.setTimeout(() => this.show(), delay);
+            }
+        };
+        this.handleMouseOut = () => {
+            if (this.hasTrigger("hover")) {
+                const delay = parseDuration(getComputedStyle(this).getPropertyValue("--hide-delay"));
+                clearTimeout(this.hoverTimeout);
+                this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
+            }
+        };
+        this.addEventListener("click", this.handleClick);
+        this.addEventListener("focus", this.handleFocus, true);
+        this.addEventListener("blur", this.handleBlur, true);
+        this.addEventListener("mouseover", this.handleMouseOver);
+        this.addEventListener("mouseout", this.handleMouseOut);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.closeWatcher?.destroy();
+        document.removeEventListener("keydown", this.handleDocumentKeyDown);
+    }
+    firstUpdated() {
+        this.body.hidden = !this.open;
+        if (this.open) {
+            this.popup.active = true;
+            this.popup.reposition();
+        }
+    }
+    hasTrigger(triggerType) {
+        const triggers = this.trigger.split(" ");
+        return triggers.includes(triggerType);
+    }
+    async handleOpenChange() {
+        if (this.open) {
+            if (this.disabled) {
+                return;
+            }
+            emit(this, "pc-show");
+            if ("CloseWatcher" in window) {
+                this.closeWatcher?.destroy();
+                this.closeWatcher = new CloseWatcher();
+                this.closeWatcher.onclose = () => {
+                    this.hide();
+                };
+            }
+            else {
+                document.addEventListener("keydown", this.handleDocumentKeyDown);
+            }
+            await stopAnimations(this.body);
+            this.body.hidden = false;
+            this.popup.active = true;
+            const { keyframes, options } = getAnimation(this, "tooltip.show", {
+                dir: document.documentElement.dir || "ltr",
+            });
+            await animateTo(this.popup.popup, keyframes, options);
+            this.popup.reposition();
+            emit(this, "pc-after-show");
+        }
+        else {
+            emit(this, "pc-hide");
+            this.closeWatcher?.destroy();
+            document.removeEventListener("keydown", this.handleDocumentKeyDown);
+            await stopAnimations(this.body);
+            const { keyframes, options } = getAnimation(this, "tooltip.hide", {
+                dir: document.documentElement.dir || "ltr",
+            });
+            await animateTo(this.popup.popup, keyframes, options);
+            this.popup.active = false;
+            this.body.hidden = true;
+            emit(this, "pc-after-hide");
+        }
+    }
+    async handleOptionsChange() {
+        if (this.hasUpdated) {
+            await this.updateComplete;
+            this.popup.reposition();
+        }
+    }
+    handleDisabledChange() {
+        if (this.disabled && this.open) {
+            this.hide();
+        }
+    }
+    async show() {
+        if (this.open) {
+            return undefined;
+        }
+        this.open = true;
+        return waitForEvent(this, "pc-after-show");
+    }
+    async hide() {
+        if (!this.open) {
+            return undefined;
+        }
+        this.open = false;
+        return waitForEvent(this, "pc-after-hide");
+    }
+    render() {
+        return html `
+            <pc-popup
+                part="base"
+                class=${classMap({
+            "tooltip": true,
+            "tooltip-open": this.open === true,
+        })}
+                placement=${this.placement}
+                distance=${this.distance}
+                skidding=${this.skidding}
+                strategy=${this.hoist ? "fixed" : "absolute"}
+                flip=""
+                shift=""
+                arrow=""
+                hover-bridge=""
+                exportparts="popup:base__popup, arrow:base__arrow"
+            >
+                <slot slot="anchor" aria-describedby="tooltip"></slot>
+
+                <div
+                    part="body"
+                    class="tooltip-body"
+                    id="tooltip"
+                    role="tooltip"
+                    aria-live=${this.open ? "polite" : "off"}
+                >
+                    <slot name="content">${this.content}</slot>
+                </div>
+            </pc-popup>
+        `;
+    }
+};
+PcTooltip.styles = styles;
+PcTooltip.dependencies = { "pc-popup": PcPopup };
+__decorate([
+    query("slot:not([name])"),
+    __metadata("design:type", HTMLSlotElement)
+], PcTooltip.prototype, "defaultSlot", void 0);
+__decorate([
+    query(".tooltip-body"),
+    __metadata("design:type", HTMLElement)
+], PcTooltip.prototype, "body", void 0);
+__decorate([
+    query("pc-popup"),
+    __metadata("design:type", PcPopup)
+], PcTooltip.prototype, "popup", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcTooltip.prototype, "content", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcTooltip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], PcTooltip.prototype, "distance", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], PcTooltip.prototype, "hoist", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcTooltip.prototype, "open", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcTooltip.prototype, "placement", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], PcTooltip.prototype, "skidding", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcTooltip.prototype, "trigger", void 0);
+__decorate([
+    watch("open", { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], PcTooltip.prototype, "handleOpenChange", null);
+__decorate([
+    watch(["content", "distance", "hoist", "placement", "skidding"]),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], PcTooltip.prototype, "handleOptionsChange", null);
+__decorate([
+    watch("disabled"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcTooltip.prototype, "handleDisabledChange", null);
+PcTooltip = __decorate([
+    customElement("pc-tooltip"),
+    __metadata("design:paramtypes", [])
+], PcTooltip);
+
+export { PcTooltip };

package/dist/components/tooltip/tooltip.d.ts

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

package/dist/components/tooltip/tooltip.js

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

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

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

package/dist/components/tooltip/tooltip.styles.js

@@ -0,0 +1,59 @@
+import { css } from 'lit';
+
+const styles = css `
+    :host {
+        --max-width: 20rem;
+        --hide-delay: 0s;
+        --show-delay: 0.15s;
+
+        display: contents;
+    }
+
+    .tooltip {
+        --arrow-size: var(--pc-tooltip-arrow-size);
+        --arrow-color: var(--pc-tooltip-background-color);
+        box-shadow: var(--pc-shadow-xs);
+    }
+
+    .tooltip::part(popup) {
+        z-index: var(--pc-z-index-tooltip);
+    }
+
+    .tooltip[data-current-placement^="top"]::part(popup) {
+        transform-origin: bottom;
+    }
+
+    .tooltip[data-current-placement^="bottom"]::part(popup) {
+        transform-origin: top;
+    }
+
+    .tooltip[data-current-placement^="left"]::part(popup) {
+        transform-origin: right;
+    }
+
+    .tooltip[data-current-placement^="right"]::part(popup) {
+        transform-origin: left;
+    }
+
+    .tooltip-body {
+        display: block;
+        width: max-content;
+        max-width: var(--max-width);
+        border-radius: var(--pc-tooltip-border-radius);
+        background-color: var(--pc-tooltip-background-color);
+        font-family: var(--pc-tooltip-font-family);
+        font-size: var(--pc-tooltip-font-size);
+        font-weight: var(--pc-tooltip-font-weight);
+        line-height: var(--pc-tooltip-line-height);
+        text-align: start;
+        white-space: normal;
+        color: var(--pc-tooltip-color);
+        padding: var(--pc-tooltip-padding);
+        pointer-events: none;
+        user-select: none;
+        -webkit-user-select: none;
+        box-shadow: var(--pc-shadow-xs);
+    }
+`;
+
+export { styles };