placer-toolkit 0.5.1 → 1.0.0-alpha.2

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

@@ -1,211 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

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

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

@@ -1,157 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,246 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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>;
-}