placer-toolkit 0.5.1

package/dist/components/drawer/drawer.styles.js

@@ -0,0 +1,157 @@
+import { css } from 'lit';
+
+const styles = css `
+    :host {
+        --size: 25rem;
+        --header-spacing: var(--pc-spacing-xl);
+        --body-spacing: var(--pc-spacing-s) var(--pc-spacing-xl);
+        --footer-spacing: var(--pc-spacing-s) var(--pc-spacing-xl)
+            var(--pc-spacing-xl);
+
+        display: contents;
+    }
+
+    .drawer {
+        top: 0;
+        inset-inline-start: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        overflow: hidden;
+    }
+
+    .drawer-contained {
+        position: absolute;
+        z-index: initial;
+    }
+
+    .drawer-fixed {
+        position: fixed;
+        z-index: var(--pc-z-index-drawer);
+    }
+
+    .drawer-panel {
+        display: flex;
+        position: absolute;
+        flex-direction: column;
+        z-index: 2;
+        max-width: 100%;
+        max-height: 100%;
+        background-color: var(--pc-panel-background-color);
+        box-shadow: var(--pc-shadow-xl);
+        overflow: auto;
+        pointer-events: all;
+    }
+
+    .drawer-panel:focus {
+        outline: none;
+    }
+
+    .drawer-top .drawer-panel {
+        inset-inline-start: 0;
+        inset-inline-end: auto;
+        top: 0;
+        bottom: auto;
+        width: 100%;
+        height: var(--size);
+    }
+
+    .drawer-end .drawer-panel {
+        inset-inline-start: auto;
+        inset-inline-end: 0;
+        top: 0;
+        bottom: auto;
+        width: var(--size);
+        height: 100%;
+    }
+
+    .drawer-bottom .drawer-panel {
+        inset-inline-start: 0;
+        inset-inline-end: auto;
+        top: auto;
+        bottom: 0;
+        width: 100%;
+        height: var(--size);
+    }
+
+    .drawer-start .drawer-panel {
+        inset-inline-start: 0;
+        inset-inline-end: auto;
+        top: 0;
+        bottom: auto;
+        width: var(--size);
+        height: 100%;
+    }
+
+    .drawer-header {
+        display: flex;
+    }
+
+    .drawer-title {
+        margin: 0;
+        padding: var(--header-spacing);
+        flex: 1 1 auto;
+        font: inherit;
+        font-size: var(--pc-font-size-l);
+        font-weight: var(--pc-font-weight-bold);
+        line-height: var(--pc-line-height-dense);
+    }
+
+    .drawer-header-actions {
+        display: flex;
+        justify-content: end;
+        gap: var(--pc-spacing-xs);
+        flex-wrap: wrap;
+        flex-shrink: 0;
+        padding: 0 var(--header-spacing);
+    }
+
+    .drawer-header-actions pc-icon-button,
+    .drawer-header-actions ::slotted(pc-icon-button) {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+        font-size: var(--pc-font-size-m);
+    }
+
+    .drawer-body {
+        display: block;
+        flex: 1 1 auto;
+        padding: var(--body-spacing);
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .drawer-footer {
+        text-align: right;
+        padding: var(--footer-spacing);
+    }
+
+    .drawer-footer ::slotted(pc-button:not(:last-of-type)) {
+        margin-inline-end: var(--pc-spacing-xs);
+    }
+
+    .drawer:not(.drawer-has-footer) .drawer-footer {
+        display: none;
+    }
+
+    .drawer-overlay {
+        display: block;
+        position: fixed;
+        inset: 0;
+        background-color: var(--pc-overlay-background-color);
+        pointer-events: all;
+    }
+
+    .drawer-contained .drawer-overlay {
+        display: none;
+    }
+
+    @media (forced-colors: active) {
+        .drawer-panel {
+            border: 1px solid var(--pc-color-neutral-0);
+        }
+    }
+`;
+
+export { styles };

package/dist/components/dropdown/dropdown.component.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+import { PcPopup } from "../popup/popup.component.js";
+import type { PcMenu } from "../menu/menu.js";
+export declare class PcDropdown extends LitElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        "pc-popup": typeof PcPopup;
+    };
+    popup: PcPopup;
+    trigger: HTMLSlotElement;
+    panel: HTMLSlotElement;
+    private closeWatcher;
+    containingElement?: HTMLElement;
+    disabled: boolean;
+    distance: number;
+    hoist: boolean;
+    open: boolean;
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
+    skidding: number;
+    stayOpenOnSelect: boolean;
+    sync: "width" | "height" | "both" | undefined;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    focusOnTrigger(): void;
+    getMenu(): PcMenu | undefined;
+    private handleKeyDown;
+    private handleDocumentKeyDown;
+    private handleDocumentMouseDown;
+    private handlePanelSelect;
+    handleTriggerClick(): void;
+    handleTriggerKeyDown(event: KeyboardEvent): Promise<void>;
+    handleTriggerKeyUp(event: KeyboardEvent): void;
+    handleTriggerSlotChange(): void;
+    updateAccessibleTrigger(): void;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    reposition(): void;
+    addOpenListeners(): void;
+    removeOpenListeners(): void;
+    handleOpenChange(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/dropdown/dropdown.component.js

@@ -0,0 +1,385 @@
+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 { ifDefined } from 'lit/directives/if-defined.js';
+import { stopAnimations, animateTo } from '../../internal/animate.js';
+import { setDefaultAnimation, getAnimation } from '../../utilities/animation-registry.js';
+import { getDeepestActiveElement } from '../../internal/active-elements.js';
+import { waitForEvent } from '../../internal/event.js';
+import { getTabbableBoundary } from '../../internal/tabbable.js';
+import { watch } from '../../internal/watch.js';
+import { emit } from '../../internal/emit.js';
+import { PcPopup } from '../popup/popup.component.js';
+import { styles } from './dropdown.styles.js';
+
+setDefaultAnimation("dropdown.show", {
+    keyframes: [
+        { opacity: 0, transform: "scale(0.92)" },
+        { opacity: 1, transform: "scale(1)" },
+    ],
+    options: {
+        duration: 200,
+        easing: "cubic-bezier(0.25, 0.8, 0.4, 1)",
+    },
+});
+setDefaultAnimation("dropdown.hide", {
+    keyframes: [
+        { opacity: 1, transform: "scale(1)" },
+        { opacity: 0, transform: "scale(0.9)" },
+    ],
+    options: {
+        duration: 150,
+        easing: "cubic-bezier(0.4, 0, 1, 1)",
+    },
+});
+let PcDropdown = class PcDropdown extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.distance = 0;
+        this.hoist = false;
+        this.open = false;
+        this.placement = "bottom-start";
+        this.skidding = 0;
+        this.stayOpenOnSelect = false;
+        this.sync = undefined;
+        this.handleKeyDown = (event) => {
+            if (this.open && event.key === "Escape") {
+                event.stopPropagation();
+                this.hide();
+                this.focusOnTrigger();
+            }
+        };
+        this.handleDocumentKeyDown = (event) => {
+            if (event.key === "Escape" && this.open && !this.closeWatcher) {
+                event.stopPropagation();
+                this.focusOnTrigger();
+                this.hide();
+                return;
+            }
+            if (event.key === "Tab") {
+                if (this.open &&
+                    document.activeElement?.tagName.toLowerCase() === "pc-menu-item") {
+                    event.preventDefault();
+                    this.hide();
+                    this.focusOnTrigger();
+                    return;
+                }
+                const computeClosestContaining = (element, tagName) => {
+                    if (!element) {
+                        return null;
+                    }
+                    const closest = element.closest(tagName);
+                    if (closest) {
+                        return closest;
+                    }
+                    const rootNode = element.getRootNode();
+                    if (rootNode instanceof ShadowRoot) {
+                        return computeClosestContaining(rootNode.host, tagName);
+                    }
+                    return null;
+                };
+                setTimeout(() => {
+                    const activeElement = this.containingElement?.getRootNode() instanceof ShadowRoot
+                        ? getDeepestActiveElement()
+                        : document.activeElement;
+                    if (!this.containingElement ||
+                        computeClosestContaining(activeElement, this.containingElement.tagName.toLowerCase()) !== this.containingElement) {
+                        this.hide();
+                    }
+                });
+            }
+        };
+        this.handleDocumentMouseDown = (event) => {
+            const path = event.composedPath();
+            if (this.containingElement && !path.includes(this.containingElement)) {
+                this.hide();
+            }
+        };
+        this.handlePanelSelect = (event) => {
+            const target = event.target;
+            if (!this.stayOpenOnSelect &&
+                target.tagName.toLowerCase() === "pc-menu") {
+                this.hide();
+                this.focusOnTrigger();
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.containingElement) {
+            this.containingElement = this;
+        }
+    }
+    firstUpdated() {
+        this.panel.hidden = !this.open;
+        if (this.open) {
+            this.addOpenListeners();
+            this.popup.active = true;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeOpenListeners();
+        this.hide();
+    }
+    focusOnTrigger() {
+        const trigger = this.trigger.assignedElements({ flatten: true })[0];
+        if (typeof trigger?.focus === "function") {
+            trigger.focus();
+        }
+    }
+    getMenu() {
+        return this.panel
+            .assignedElements({ flatten: true })
+            .find((element) => element.tagName.toLowerCase() === "pc-menu");
+    }
+    handleTriggerClick() {
+        if (this.open) {
+            this.hide();
+        }
+        else {
+            this.show();
+            this.focusOnTrigger();
+        }
+    }
+    async handleTriggerKeyDown(event) {
+        if ([" ", "Enter"].includes(event.key)) {
+            event.preventDefault();
+            this.handleTriggerClick();
+            return;
+        }
+        const menu = this.getMenu();
+        if (menu) {
+            const menuItems = menu.getAllItems();
+            const firstMenuItem = menuItems[0];
+            const lastMenuItem = menuItems[menuItems.length - 1];
+            if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+                event.preventDefault();
+                if (!this.open) {
+                    this.show();
+                    await this.updateComplete;
+                }
+                if (menuItems.length > 0) {
+                    this.updateComplete.then(() => {
+                        if (event.key === "ArrowDown" || event.key === "Home") {
+                            menu.setCurrentItem(firstMenuItem);
+                            firstMenuItem.focus();
+                        }
+                        if (event.key === "ArrowUp" || event.key === "End") {
+                            menu.setCurrentItem(lastMenuItem);
+                            lastMenuItem.focus();
+                        }
+                    });
+                }
+            }
+        }
+    }
+    handleTriggerKeyUp(event) {
+        if (event.key === " ") {
+            event.preventDefault();
+        }
+    }
+    handleTriggerSlotChange() {
+        this.updateAccessibleTrigger();
+    }
+    updateAccessibleTrigger() {
+        const assignedElements = this.trigger.assignedElements({
+            flatten: true,
+        });
+        const accessibleTrigger = assignedElements.find((element) => getTabbableBoundary(element).start);
+        let target;
+        if (accessibleTrigger) {
+            switch (accessibleTrigger.tagName.toLowerCase()) {
+                case "pc-button":
+                case "pc-icon-button":
+                    target = accessibleTrigger
+                        .button;
+                    break;
+                default:
+                    target = accessibleTrigger;
+            }
+            target.setAttribute("aria-haspopup", "true");
+            target.setAttribute("aria-expanded", this.open ? "true" : "false");
+        }
+    }
+    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");
+    }
+    reposition() {
+        this.popup.reposition();
+    }
+    addOpenListeners() {
+        this.panel.addEventListener("pc-select", this.handlePanelSelect);
+        if ("CloseWatcher" in window) {
+            this.closeWatcher?.destroy();
+            this.closeWatcher = new CloseWatcher();
+            this.closeWatcher.onclose = () => {
+                this.hide();
+                this.focusOnTrigger();
+            };
+        }
+        else {
+            this.panel.addEventListener("keydown", this.handleKeyDown);
+        }
+        document.addEventListener("keydown", this.handleDocumentKeyDown);
+        document.addEventListener("mousedown", this.handleDocumentMouseDown);
+    }
+    removeOpenListeners() {
+        if (this.panel) {
+            this.panel.removeEventListener("pc-select", this.handlePanelSelect);
+            this.panel.removeEventListener("keydown", this.handleKeyDown);
+        }
+        document.removeEventListener("keydown", this.handleDocumentKeyDown);
+        document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+        this.closeWatcher?.destroy();
+    }
+    async handleOpenChange() {
+        if (this.disabled) {
+            this.open = false;
+            return;
+        }
+        this.updateAccessibleTrigger();
+        if (this.open) {
+            emit(this, "pc-show");
+            this.addOpenListeners();
+            await stopAnimations(this);
+            this.panel.hidden = false;
+            this.popup.active = true;
+            const { keyframes, options } = getAnimation(this, "dropdown.show", {
+                dir: document.documentElement.dir || "ltr",
+            });
+            await animateTo(this.popup.popup, keyframes, options);
+            emit(this, "pc-after-show");
+        }
+        else {
+            emit(this, "pc-hide");
+            this.removeOpenListeners();
+            await stopAnimations(this);
+            const { keyframes, options } = getAnimation(this, "dropdown.hide", {
+                dir: document.documentElement.dir || "ltr",
+            });
+            await animateTo(this.popup.popup, keyframes, options);
+            this.panel.hidden = true;
+            this.popup.active = false;
+            emit(this, "pc-after-hide");
+        }
+    }
+    render() {
+        return html `
+            <pc-popup
+                part="base"
+                class=${classMap({
+            "dropdown": true,
+            "dropdown-open": this.open === true,
+        })}
+                id="dropdown"
+                placement=${this.placement}
+                distance=${this.distance}
+                skidding=${this.skidding}
+                strategy=${this.hoist ? "fixed" : "absolute"}
+                auto-size="vertical"
+                auto-size-padding="10
+                sync=${ifDefined(this.sync ? this.sync : undefined)}
+                exportparts="popup:base__popup"
+                flip
+                shift
+            >
+                <slot
+                    class="dropdown-trigger"
+                    name="trigger"
+                    slot="anchor"
+                    part="trigger"
+                    @click=${this.handleTriggerClick}
+                    @keydown=${this.handleTriggerKeyDown}
+                    @keyup=${this.handleTriggerKeyUp}
+                    @slotchange=${this.handleTriggerSlotChange}
+                ></slot>
+
+                <div
+                    aria-labelledby="dropdown"
+                    aria-hidden=${this.open ? "false" : "true"}
+                >
+                    <slot class="dropdown-panel" part="panel"></slot>
+                </div>
+            </pc-popup>
+        `;
+    }
+};
+PcDropdown.styles = styles;
+PcDropdown.dependencies = { "pc-popup": PcPopup };
+__decorate([
+    query(".dropdown"),
+    __metadata("design:type", PcPopup)
+], PcDropdown.prototype, "popup", void 0);
+__decorate([
+    query(".dropdown-trigger"),
+    __metadata("design:type", HTMLSlotElement)
+], PcDropdown.prototype, "trigger", void 0);
+__decorate([
+    query(".dropdown-panel"),
+    __metadata("design:type", HTMLSlotElement)
+], PcDropdown.prototype, "panel", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", HTMLElement)
+], PcDropdown.prototype, "containingElement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcDropdown.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], PcDropdown.prototype, "distance", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], PcDropdown.prototype, "hoist", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcDropdown.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], PcDropdown.prototype, "placement", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], PcDropdown.prototype, "skidding", void 0);
+__decorate([
+    property({
+        attribute: "stay-open-on-select",
+        type: Boolean,
+        reflect: true,
+    }),
+    __metadata("design:type", Object)
+], PcDropdown.prototype, "stayOpenOnSelect", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], PcDropdown.prototype, "sync", void 0);
+__decorate([
+    watch("open", { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], PcDropdown.prototype, "handleOpenChange", null);
+PcDropdown = __decorate([
+    customElement("pc-dropdown")
+], PcDropdown);
+
+export { PcDropdown };

package/dist/components/dropdown/dropdown.d.ts

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

package/dist/components/dropdown/dropdown.js

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

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

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

package/dist/components/dropdown/dropdown.styles.js

@@ -0,0 +1,52 @@
+import { css } from 'lit';
+
+const styles = css `
+    :host {
+        display: inline-block;
+    }
+
+    .dropdown::part(popup) {
+        z-index: var(--pc-z-index-dropdown);
+    }
+
+    .dropdown[data-current-placement^="top"]::part(popup) {
+        transform-origin: bottom;
+    }
+
+    .dropdown[data-current-placement^="bottom"]::part(popup) {
+        transform-origin: top;
+    }
+
+    .dropdown[data-current-placement^="left"]::part(popup) {
+        transform-origin: right;
+    }
+
+    .dropdown[data-current-placement^="right"]::part(popup) {
+        transform-origin: left;
+    }
+
+    .dropdown-trigger {
+        display: block;
+    }
+
+    .dropdown-panel {
+        font-family: var(--pc-font-sans);
+        font-size: var(--pc-font-size-m);
+        font-weight: var(--pc-font-weight-normal);
+        box-shadow: var(--pc-shadow-l);
+        border-radius: var(--pc-border-radius-m);
+        pointer-events: none;
+    }
+
+    .dropdown-open .dropdown-panel {
+        display: block;
+        pointer-events: all;
+    }
+
+    ::slotted(pc-menu) {
+        max-width: var(--auto-size-available-width) !important;
+        max-height: var(--auto-size-available-height) !important;
+    }
+`;
+
+export { styles };