placer-toolkit 0.5.1

package/dist/components/menu-item/menu-item.component.js

@@ -0,0 +1,211 @@
+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 { HasSlotController, getTextContent } from '../../internal/slot.js';
+import { watch } from '../../internal/watch.js';
+import { emit } from '../../internal/emit.js';
+import { SubmenuController } from './submenu-controller.js';
+import { PcIcon } from '../icon/icon.component.js';
+import { PcPopup } from '../popup/popup.component.js';
+import { PcSpinner } from '../spinner/spinner.component.js';
+import { styles } from './menu-item.styles.js';
+
+let PcMenuItem = class PcMenuItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hasSlotController = new HasSlotController(this, "submenu");
+        this.submenuController = new SubmenuController(this, this.hasSlotController);
+        this.cachedTextLabel = "";
+        this.checked = false;
+        this.disabled = false;
+        this.loading = false;
+        this.type = "normal";
+        this.value = "";
+        this.handleHostClick = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        };
+        this.handleMouseOver = (event) => {
+            this.focus();
+            event.stopPropagation();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this.handleHostClick);
+        this.addEventListener("mouseover", this.handleMouseOver);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("click", this.handleHostClick);
+        this.removeEventListener("mouseover", this.handleMouseOver);
+    }
+    handleDefaultSlotChange() {
+        const textLabel = this.getTextLabel();
+        if (typeof this.cachedTextLabel === "undefined") {
+            this.cachedTextLabel = textLabel;
+            return;
+        }
+        if (textLabel !== this.cachedTextLabel) {
+            this.cachedTextLabel = textLabel;
+            emit(this, "slotchange", {
+                bubbles: true,
+                composed: false,
+                cancelable: false,
+            });
+        }
+    }
+    handleCheckedChange() {
+        if (this.checked && this.type !== "checkbox") {
+            this.checked = false;
+            console.error(`The checked attribute can only be used on menu items with type “checkbox” ${this}`);
+            return;
+        }
+        if (this.type === "checkbox") {
+            this.setAttribute("aria-checked", this.checked ? "true" : "false");
+        }
+        else {
+            this.removeAttribute("aria-checked");
+        }
+    }
+    handleDisabledChange() {
+        this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    }
+    handleTypeChange() {
+        if (this.type === "checkbox") {
+            this.setAttribute("role", "menuitemcheckbox");
+            this.setAttribute("aria-checked", this.checked ? "true" : "false");
+        }
+        else {
+            this.setAttribute("role", "menuitem");
+            this.removeAttribute("aria-checked");
+        }
+    }
+    getTextLabel() {
+        return getTextContent(this.defaultSlot);
+    }
+    isSubmenu() {
+        return this.hasSlotController.test("submenu");
+    }
+    render() {
+        const isRTL = document.documentElement.dir === "rtl" ||
+            (!document.documentElement.dir &&
+                getComputedStyle(document.documentElement).direction === "rtl");
+        const isSubmenuExpanded = this.submenuController.isExpanded();
+        return html `
+            <div
+                id="anchor"
+                part="base"
+                class=${classMap({
+            "menu-item": true,
+            "menu-item-rtl": isRTL === true,
+            "menu-item-checked": this.checked === true,
+            "menu-item-disabled": this.disabled === true,
+            "menu-item-loading": this.loading === true,
+            "menu-item-has-submenu": this.isSubmenu(),
+            "menu-item-submenu-expanded": isSubmenuExpanded === true,
+        })}
+                ?aria-haspopup=${this.isSubmenu()}
+                ?aria-expanded=${isSubmenuExpanded ? true : false}
+            >
+                <span part="checked-icon" class="menu-item-check">
+                    <pc-icon
+                        library="system"
+                        icon-style="solid"
+                        name="check"
+                        aria-hidden="true"
+                    ></pc-icon>
+                </span>
+
+                <slot name="prefix" part="prefix" class="prefix"></slot>
+
+                <slot
+                    part="label"
+                    class="label"
+                    @slotchange=${this.handleDefaultSlotChange}
+                ></slot>
+
+                <slot name="suffix" part="suffix" class="suffix"></slot>
+
+                <span part="submenu-icon" class="menu-item-chevron">
+                    <pc-icon
+                        library="system"
+                        icon-style="solid"
+                        name=${isRTL ? "chevron-left" : "chevron-right"}
+                        aria-hidden="true"
+                    ></pc-icon>
+                </span>
+
+                ${this.submenuController.renderSubmenu()}
+                ${this.loading
+            ? html `
+                          <pc-spinner
+                              part="spinner"
+                              exportparts="base:spinner__base"
+                          ></pc-spinner>
+                      `
+            : ""}
+            </div>
+        `;
+    }
+};
+PcMenuItem.styles = styles;
+PcMenuItem.dependencies = {
+    "pc-icon": PcIcon,
+    "pc-popup": PcPopup,
+    "pc-spinner": PcSpinner,
+};
+__decorate([
+    query("slot:not([name])"),
+    __metadata("design:type", HTMLSlotElement)
+], PcMenuItem.prototype, "defaultSlot", void 0);
+__decorate([
+    query(".menu-item"),
+    __metadata("design:type", HTMLElement)
+], PcMenuItem.prototype, "menuItem", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcMenuItem.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcMenuItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcMenuItem.prototype, "loading", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcMenuItem.prototype, "type", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcMenuItem.prototype, "value", void 0);
+__decorate([
+    watch("checked"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcMenuItem.prototype, "handleCheckedChange", null);
+__decorate([
+    watch("disabled"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcMenuItem.prototype, "handleDisabledChange", null);
+__decorate([
+    watch("type"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcMenuItem.prototype, "handleTypeChange", null);
+PcMenuItem = __decorate([
+    customElement("pc-menu-item")
+], PcMenuItem);
+
+export { PcMenuItem };

package/dist/components/menu-item/menu-item.d.ts

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

package/dist/components/menu-item/menu-item.js

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

package/dist/components/menu-item/menu-item.styles.d.ts

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

package/dist/components/menu-item/menu-item.styles.js

@@ -0,0 +1,157 @@
+import { css } from 'lit';
+
+const styles = css `
+    :host {
+        --submenu-offset: -2px;
+        display: block;
+    }
+
+    :host([inert]) {
+        display: none;
+    }
+
+    .menu-item {
+        display: flex;
+        position: relative;
+        align-items: stretch;
+        font-family: var(--pc-font-sans);
+        font-size: var(--pc-font-size-m);
+        font-weight: var(--pc-font-weight-normal);
+        line-height: var(--pc-line-height-normal);
+        letter-spacing: var(--pc-letter-spacing-normal);
+        color: var(--pc-color-neutral-700);
+        padding: var(--pc-spacing-xs);
+        border-radius: var(--pc-border-radius-m);
+        user-select: none;
+        -webkit-user-select: none;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: all var(--pc-transition-fast) ease-in-out;
+    }
+
+    .menu-item.menu-item-disabled {
+        outline: none;
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .menu-item.menu-item-loading {
+        outline: none;
+        cursor: wait;
+    }
+
+    .menu-item.menu-item-loading *:not(pc-spinner) {
+        opacity: 0.6;
+    }
+
+    .menu-item-loading pc-spinner {
+        --indicator-color: currentColor;
+        --track-width: 0.0625em;
+        position: absolute;
+        font-size: 0.75em;
+        top: calc(50% - 0.5em);
+        left: 0.65rem;
+        opacity: 1;
+    }
+
+    .menu-item .label {
+        display: inline-block;
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .menu-item .prefix {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+
+    .menu-item .prefix::slotted(*) {
+        margin-inline-end: var(--pc-spacing-s);
+    }
+
+    .menu-item .suffix {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+
+    .menu-item .suffix::slotted(*) {
+        margin-inline-start: var(--pc-spacing-s);
+    }
+
+    .menu-item-submenu-expanded::after {
+        content: "";
+        position: fixed;
+        inset: 0;
+        clip-path: polygon(
+            var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
+            var(--safe-triangle-submenu-start-x, 0)
+                var(--safe-triangle-submenu-start-y, 0),
+            var(--safe-triangle-submenu-end-x, 0)
+                var(--safe-triangle-submenu-end-y, 0)
+        );
+        z-index: calc(var(--pc-z-index-dropdown) - 1);
+    }
+
+    :host(:focus-visible) {
+        outline: none;
+    }
+
+    :host(:hover:not([aria-disabled="true"], :focus-visible)) .menu-item,
+    .menu-item-submenu-expanded {
+        background-color: var(--pc-color-neutral-100);
+        color: var(--pc-color-neutral-950);
+    }
+
+    :host(:active:not([aria-disabled="true"], :focus-visible)) .menu-item,
+    .menu-item-submenu-expanded {
+        filter: brightness(95%);
+    }
+
+    :host(:focus-visible) .menu-item {
+        outline: 2px var(--pc-focus-ring-style) var(--pc-focus-ring-color);
+        outline-offset: -2px;
+    }
+
+    .menu-item .menu-item-check,
+    .menu-item .menu-item-chevron {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        width: 1.75em;
+        visibility: hidden;
+    }
+
+    .menu-item-checked .menu-item-check,
+    .menu-item-has-submenu .menu-item-chevron {
+        visibility: visible;
+    }
+
+    pc-popup::part(popup) {
+        margin-left: var(--submenu-offset);
+        z-index: var(--pc-z-index-dropdown);
+        box-shadow: var(--pc-shadow-l);
+    }
+
+    .menu-item-rtl pc-popup::part(popup) {
+        margin-left: calc(-1 * var(--submenu-offset));
+    }
+
+    ::slotted(pc-menu) {
+        max-width: var(--auto-size-available-width) !important;
+        max-height: var(--auto-size-available-height) !important;
+    }
+
+    @media (forced-colors: active) {
+        :host(:hover:not([aria-disabled="true"])) .menu-item,
+        :host(:focus-visible) .menu-item {
+            outline: 1px dashed SelectedItem;
+            outline-offset: -1px;
+        }
+    }
+`;
+
+export { styles };

package/dist/components/menu-item/submenu-controller.d.ts

@@ -0,0 +1,34 @@
+import type { CSSResultGroup, ReactiveController, ReactiveControllerHost } from "lit";
+import { type HasSlotController } from "../../internal/slot.js";
+import type { PcMenuItem } from "./menu-item.js";
+export declare class SubmenuController implements ReactiveController {
+    static styles: CSSResultGroup;
+    private host;
+    private popupRef;
+    private enableSubmenuTimer;
+    private isConnected;
+    private isPopupConnected;
+    private skidding;
+    private readonly hasSlotController;
+    private readonly submenuOpenDelay;
+    constructor(host: ReactiveControllerHost & PcMenuItem, hasSlotController: HasSlotController);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private addListeners;
+    private removeListeners;
+    private handleMouseMove;
+    private handleMouseOver;
+    private handleSubmenuEntry;
+    private handleKeyDown;
+    private handleClick;
+    private handleFocusOut;
+    private handlePopupMouseover;
+    private handlePopupReposition;
+    private setSubmenuState;
+    private enableSubmenu;
+    private disableSubmenu;
+    private updateSkidding;
+    isExpanded(): boolean;
+    renderSubmenu(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/menu-item/submenu-controller.js

@@ -0,0 +1,246 @@
+import { css, html } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+
+class SubmenuController {
+    constructor(host, hasSlotController) {
+        this.popupRef = createRef();
+        this.enableSubmenuTimer = -1;
+        this.isConnected = false;
+        this.isPopupConnected = false;
+        this.skidding = 0;
+        this.submenuOpenDelay = 100;
+        this.handleMouseMove = (event) => {
+            this.host.style.setProperty("--safe-triangle-cursor-x", `${event.clientX}px`);
+            this.host.style.setProperty("--safe-triangle-cursor-y", `${event.clientY}px`);
+        };
+        this.handleMouseOver = () => {
+            if (this.hasSlotController.test("submenu")) {
+                this.enableSubmenu();
+            }
+        };
+        this.handleKeyDown = (event) => {
+            switch (event.key) {
+                case "Escape":
+                case "Tab":
+                    this.disableSubmenu();
+                    break;
+                case "ArrowLeft":
+                    if (event.target !== this.host) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        this.host.focus();
+                        this.disableSubmenu();
+                    }
+                    break;
+                case "ArrowRight":
+                case "Enter":
+                case " ":
+                    this.handleSubmenuEntry(event);
+                    break;
+            }
+        };
+        this.handleClick = (event) => {
+            if (event.target === this.host) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            else if (event.target instanceof Element &&
+                (event.target.tagName === "pc-menu-item" ||
+                    event.target.role?.startsWith("menuitem"))) {
+                this.disableSubmenu();
+            }
+        };
+        this.handleFocusOut = (event) => {
+            if (event.relatedTarget &&
+                event.relatedTarget instanceof Element &&
+                this.host.contains(event.relatedTarget)) {
+                return;
+            }
+            this.disableSubmenu();
+        };
+        this.handlePopupMouseover = (event) => {
+            event.stopPropagation();
+        };
+        this.handlePopupReposition = () => {
+            const submenuSlot = this.host.renderRoot.querySelector('slot[name="submenu"]');
+            const menu = submenuSlot
+                ?.assignedElements({ flatten: true })
+                .filter((element) => element.localName === "pc-menu")[0];
+            const isRTL = getComputedStyle(this.host).direction === "rtl";
+            if (!menu) {
+                return;
+            }
+            const { left, top, width, height } = menu.getBoundingClientRect();
+            this.host.style.setProperty("--safe-triangle-submenu-start-x", `${isRTL ? left + width : left}px`);
+            this.host.style.setProperty("--safe-triangle-submenu-start-y", `${top}px`);
+            this.host.style.setProperty("--safe-triangle-submenu-end-x", `${isRTL ? left + width : left}px`);
+            this.host.style.setProperty("--safe-triangle-submenu-end-y", `${top + height}px`);
+        };
+        (this.host = host).addController(this);
+        this.hasSlotController = hasSlotController;
+    }
+    hostConnected() {
+        if (this.hasSlotController.test("submenu") && !this.host.disabled) {
+            this.addListeners();
+        }
+    }
+    hostDisconnected() {
+        this.removeListeners();
+    }
+    hostUpdated() {
+        if (this.hasSlotController.test("submenu") && !this.host.disabled) {
+            this.addListeners();
+            this.updateSkidding();
+        }
+        else {
+            this.removeListeners();
+        }
+    }
+    addListeners() {
+        if (!this.isConnected) {
+            this.host.addEventListener("mousemove", this.handleMouseMove);
+            this.host.addEventListener("mouseover", this.handleMouseOver);
+            this.host.addEventListener("keydown", this.handleKeyDown);
+            this.host.addEventListener("click", this.handleClick);
+            this.host.addEventListener("focusout", this.handleFocusOut);
+            this.isConnected = true;
+        }
+        if (!this.isPopupConnected) {
+            if (this.popupRef.value) {
+                this.popupRef.value.addEventListener("mouseover", this.handlePopupMouseover);
+                this.popupRef.value.addEventListener("pc-reposition", this.handlePopupReposition);
+                this.isPopupConnected = true;
+            }
+        }
+    }
+    removeListeners() {
+        if (this.isConnected) {
+            this.host.removeEventListener("mousemove", this.handleMouseMove);
+            this.host.removeEventListener("mouseover", this.handleMouseOver);
+            this.host.removeEventListener("keydown", this.handleKeyDown);
+            this.host.removeEventListener("click", this.handleClick);
+            this.host.removeEventListener("focusout", this.handleFocusOut);
+            this.isConnected = false;
+        }
+        if (this.isPopupConnected) {
+            if (this.popupRef.value) {
+                this.popupRef.value.removeEventListener("mouseover", this.handlePopupMouseover);
+                this.popupRef.value.removeEventListener("pc-reposition", this.handlePopupReposition);
+                this.isPopupConnected = false;
+            }
+        }
+    }
+    handleSubmenuEntry(event) {
+        const submenuSlot = this.host.renderRoot.querySelector('slot[name="submenu"]');
+        if (!submenuSlot) {
+            console.error(`Cannot activate a submenu if no corresponding menu item can be found. ${this}`);
+            return;
+        }
+        let menuItems = null;
+        for (const element of submenuSlot.assignedElements()) {
+            menuItems = element.querySelectorAll('pc-menu-item, [role^="menuitem"]');
+            if (menuItems.length !== 0) {
+                break;
+            }
+        }
+        if (!menuItems || menuItems.length === 0) {
+            return;
+        }
+        menuItems[0].setAttribute("tabindex", "0");
+        for (let i = 1; i !== menuItems.length; ++i) {
+            menuItems[i].setAttribute("tabindex", "-1");
+        }
+        if (this.popupRef.value) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.popupRef.value.active) {
+                if (menuItems[0] instanceof HTMLElement) {
+                    menuItems[0].focus();
+                }
+            }
+            else {
+                this.enableSubmenu(false);
+                this.host.updateComplete.then(() => {
+                    if (menuItems[0] instanceof HTMLElement) {
+                        menuItems[0].focus();
+                    }
+                });
+                this.host.requestUpdate();
+            }
+        }
+    }
+    setSubmenuState(state) {
+        if (this.popupRef.value) {
+            if (this.popupRef.value.active !== state) {
+                this.popupRef.value.active = state;
+                this.host.requestUpdate();
+            }
+        }
+    }
+    enableSubmenu(delay = true) {
+        if (delay) {
+            window.clearTimeout(this.enableSubmenuTimer);
+            this.enableSubmenuTimer = window.setTimeout(() => {
+                this.setSubmenuState(true);
+            }, this.submenuOpenDelay);
+        }
+        else {
+            this.setSubmenuState(true);
+        }
+    }
+    disableSubmenu() {
+        window.clearTimeout(this.enableSubmenuTimer);
+        this.setSubmenuState(false);
+    }
+    updateSkidding() {
+        if (!this.host.parentElement?.computedStyleMap) {
+            return;
+        }
+        const styleMap = this.host.parentElement.computedStyleMap();
+        const attributes = [
+            "padding-top",
+            "border-top-width",
+            "margin-top",
+        ];
+        const skidding = attributes.reduce((accumulator, attribute) => {
+            const styleValue = styleMap.get(attribute) ?? new CSSUnitValue(0, "px");
+            const unitValue = styleValue instanceof CSSUnitValue
+                ? styleValue
+                : new CSSUnitValue(0, "px");
+            const pxValue = unitValue.to("px");
+            return accumulator - pxValue.value;
+        }, 0);
+        this.skidding = skidding;
+    }
+    isExpanded() {
+        return this.popupRef.value ? this.popupRef.value.active : false;
+    }
+    renderSubmenu() {
+        const isRTL = getComputedStyle(this.host).direction === "rtl";
+        if (!this.isConnected) {
+            return html `<slot name="submenu" hidden></slot>`;
+        }
+        return html `
+            <pc-popup
+                ${ref(this.popupRef)}
+                placement=${isRTL ? "left-start" : "right-start"}
+                anchor="anchor"
+                flip-fallback-strategy="best-fit"
+                skidding=${this.skidding}
+                strategy="fixed"
+                auto-size="vertical"
+                auto-size-padding="10"
+                flip
+            >
+                <slot name="submenu"></slot>
+            </pc-popup>
+        `;
+    }
+}
+SubmenuController.styles = css `
+        slot[hidden] {
+            display: none !important;
+        }
+    `;
+
+export { SubmenuController };

package/dist/components/menu-label/menu-label.component.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+/**
+ * @summary Menu labels are used to describe a group of menu items.
+ * @status experimental
+ * @since 0.5.1
+ *
+ * @slot — The menu label’s content.
+ *
+ * @csspart base — The component’s base wrapper.
+ */
+export declare class PcMenuLabel extends LitElement {
+    static styles: CSSResultGroup;
+    render(): import("lit-html").TemplateResult<1>;
+}