placer-toolkit 0.5.1

package/src/components/input/input.styles.ts

@@ -0,0 +1,306 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        display: block;
+    }
+
+    .input {
+        display: flex;
+        position: relative;
+        align-items: stretch;
+        justify-content: start;
+        flex: 1 1 auto;
+        width: 100%;
+        font-family: var(--pc-input-font-family);
+        font-weight: var(--pc-input-font-weight);
+        letter-spacing: var(--pc-input-letter-spacing);
+        vertical-align: middle;
+        overflow: hidden;
+        cursor: text;
+        transition: all var(--pc-transition-fast) ease-in-out;
+    }
+
+    .input-standard {
+        background-color: var(--pc-input-background-color);
+        border: var(--pc-input-border-width) solid var(--pc-input-border-color);
+    }
+
+    .input-standard:hover:not(.input-disabled) {
+        background-color: var(--pc-input-background-color-hover);
+        border-color: var(--pc-input-border-color-hover);
+    }
+
+    .input-standard.input-focused:not(.input-disabled) {
+        background-color: var(--pc-input-background-color-focus);
+        border-color: var(--pc-input-border-color);
+        outline: var(--pc-focus-ring);
+        outline-offset: var(--pc-focus-ring-offset);
+    }
+
+    .input-standard.input-focused:not(.input-disabled) .input-control {
+        color: var(--pc-input-color-focus);
+    }
+
+    .input-standard.input-disabled {
+        background-color: var(--pc-input-background-color-disabled);
+        border-color: var(--pc-input-border-color-disabled);
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .input-standard.input-disabled .input-control {
+        color: var(--pc-input-color-disabled);
+    }
+
+    .input-standard.input-disabled .input-control::placeholder {
+        color: var(--pc-input-placeholder-color-disabled);
+    }
+
+    .input-filled {
+        background-color: var(--pc-input-filled-background-color);
+        color: var(--pc-input-color);
+        border: var(--pc-input-border-width) solid transparent;
+    }
+
+    .input-filled:hover:not(.input-disabled) {
+        background-color: var(--pc-input-filled-background-color-hover);
+    }
+
+    .input-filled.input-focused:not(.input-disabled) {
+        background-color: var(--pc-input-filled-background-color-focus);
+        outline: var(--pc-focus-ring);
+        outline-offset: var(--pc-focus-ring-offset);
+    }
+
+    .input-filled.input-disabled {
+        background-color: var(--pc-input-filled-background-color-disabled);
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .input-control {
+        margin: 0;
+        padding: 0;
+        flex: 1 1 auto;
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        min-width: 0;
+        height: 100%;
+        color: var(--pc-input-color);
+        border: none;
+        background: inherit;
+        box-shadow: none;
+        cursor: inherit;
+        -webkit-appearance: none;
+    }
+
+    .input-control::-webkit-search-decoration,
+    .input-control::-webkit-search-cancel-button,
+    .input-control::-webkit-search-results-button,
+    .input-control::-webkit-search-results-decoration {
+        -webkit-appearance: none;
+    }
+
+    .input-control:-webkit-autofill,
+    .input-control:-webkit-autofill:hover,
+    .input-control:-webkit-autofill:active,
+    .input-control:-webkit-autofill:focus {
+        box-shadow: inset 0 0 0 var(--pc-input-height-l)
+            var(--pc-input-background-color-hover) !important;
+        -webkit-text-fill-color: var(--pc-color-primary-500);
+        caret-color: var(--pc-input-color);
+    }
+
+    .input-filled .input-control:-webkit-autofill,
+    .input-filled .input-control:-webkit-autofill:hover,
+    .input-filled .input-control:-webkit-autofill:active,
+    .input-filled .input-control:-webkit-autofill:focus {
+        box-shadow: inset 0 0 0 var(--pc-input-height-l)
+            var(--pc-input-background-color-hover) !important;
+    }
+
+    .input-control::placeholder {
+        color: var(--pc-input-placeholder-color);
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    .input:hover:not(.input-disabled) .input-control {
+        color: var(--pc-input-color-hover);
+    }
+
+    .input-control:focus {
+        outline: none;
+    }
+
+    .prefix,
+    .suffix {
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+        cursor: default;
+    }
+
+    .prefix ::slotted(*),
+    .suffix ::slotted(*) {
+        color: var(--pc-input-icon-color);
+    }
+
+    .input-small {
+        height: var(--pc-input-height-s);
+        font-size: var(--pc-input-font-size-s);
+        border-radius: var(--pc-input-border-radius-s);
+    }
+
+    .input-small .input-control {
+        height: calc(
+            var(--pc-input-height-s) - var(--pc-input-border-width) * 2
+        );
+        padding: 0 var(--pc-input-spacing-s);
+    }
+
+    .input-small .clear-input-button,
+    .input-small .password-toggle-button {
+        width: calc(1em + var(--pc-input-spacing-s) * 2);
+    }
+
+    .input-small .prefix ::slotted(*) {
+        margin-inline-start: var(--pc-input-spacing-s);
+        translate: 0 1px;
+    }
+
+    .input-small .suffix ::slotted(*) {
+        margin-inline-end: var(--pc-input-spacing-s);
+        translate: 0 1px;
+    }
+
+    .input-medium {
+        height: var(--pc-input-height-m);
+        font-size: var(--pc-input-font-size-m);
+        border-radius: var(--pc-input-border-radius-m);
+    }
+
+    .input-medium .input-control {
+        height: calc(
+            var(--pc-input-height-m) - var(--pc-input-border-width) * 2
+        );
+        padding: 0 var(--pc-input-spacing-m);
+    }
+
+    .input-medium .clear-input-button,
+    .input-medium .password-toggle-button {
+        width: calc(1em + var(--pc-input-spacing-m) * 2);
+    }
+
+    .input-medium .prefix ::slotted(*) {
+        margin-inline-start: var(--pc-input-spacing-m);
+        translate: 0 1px;
+    }
+
+    .input-medium .suffix ::slotted(*) {
+        margin-inline-end: var(--pc-input-spacing-m);
+        translate: 0 1px;
+    }
+
+    .input-large {
+        height: var(--pc-input-height-l);
+        font-size: var(--pc-input-font-size-l);
+        border-radius: var(--pc-input-border-radius-l);
+    }
+
+    .input-large .input-control {
+        height: calc(
+            var(--pc-input-height-l) - var(--pc-input-border-width) * 2
+        );
+        padding: 0 var(--pc-input-spacing-l);
+    }
+
+    .input-large .clear-input-button,
+    .input-large .password-toggle-button {
+        width: calc(1em + var(--pc-input-spacing-l) * 2);
+    }
+
+    .input-large .prefix ::slotted(*) {
+        margin-inline-start: var(--pc-input-spacing-l);
+        translate: 0 2px;
+    }
+
+    .input-large .suffix ::slotted(*) {
+        margin-inline-end: var(--pc-input-spacing-l);
+        translate: 0 2px;
+    }
+
+    .input-pill {
+        border-radius: var(--pc-border-radius-pill);
+    }
+
+    .clear-input-button,
+    .password-toggle-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: inherit;
+        color: var(--pc-input-icon-color);
+        border: none;
+        background: none;
+        padding: 0;
+        cursor: pointer;
+        transition: color var(--pc-transition-fast) ease-in-out;
+    }
+
+    .clear-input-button:hover,
+    .password-toggle-button:hover {
+        color: var(--pc-input-icon-color-hover);
+    }
+
+    .clear-input-button:active,
+    .password-toggle-button:active {
+        color: var(--pc-input-icon-color-active);
+    }
+
+    .clear-input-button:focus,
+    .password-toggle-button:focus {
+        outline: none;
+    }
+
+    ::-ms-reveal {
+        display: none;
+    }
+
+    .input-no-spin-buttons input[type="number"] {
+        -moz-appearance: textfield;
+    }
+
+    .input-no-spin-buttons input[type="number"]::-webkit-outer-spin-button,
+    .input-no-spin-buttons input[type="number"]::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        display: none;
+    }
+
+    .form-control .label,
+    .form-control .hint {
+        display: none;
+    }
+
+    .form-control-has-label .label {
+        display: inline-block;
+        color: var(--pc-input-label-color);
+        line-height: var(--pc-line-height-normal);
+        margin-bottom: var(--pc-spacing-xs);
+        transition: color var(--pc-transition-fast) ease-in-out;
+    }
+
+    :host([required]) .label::after {
+        content: var(--pc-input-required-content);
+        color: var(--pc-input-required-content-color);
+        margin-inline-start: var(--pc-input-required-content-offset);
+    }
+
+    .form-control-has-hint .hint {
+        color: var(--pc-input-hint-color);
+        font-family: var(--pc-input-font-family);
+        margin-top: var(--pc-spacing-xs);
+    }
+`;

package/src/components/input/input.ts

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

package/src/components/menu/menu.component.ts

@@ -0,0 +1,161 @@
+import { LitElement, html } from "lit";
+import type { CSSResultGroup } from "lit";
+import { customElement, query } from "lit/decorators.js";
+import { emit } from "../../internal/emit.js";
+import type { PcMenuItem } from "../menu-item/menu-item.js";
+import { styles } from "./menu.styles.js";
+
+export interface MenuSelectEventDetail {
+    item: PcMenuItem;
+}
+
+@customElement("pc-menu")
+export class PcMenu extends LitElement {
+    static styles: CSSResultGroup = styles;
+
+    @query("slot") defaultSlot!: HTMLSlotElement;
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "menu");
+    }
+
+    private handleClick(event: MouseEvent) {
+        const menuItemTypes = ["menuitem", "menuitemcheckbox"];
+
+        const composedPath = event.composedPath();
+        const target = composedPath.find(
+            (element): element is Element =>
+                element instanceof Element &&
+                menuItemTypes.includes(element.getAttribute("role") || ""),
+        );
+
+        if (!target) {
+            return;
+        }
+
+        const closestMenu = composedPath.find(
+            (element): element is Element =>
+                element instanceof Element &&
+                element.getAttribute("role") === "menu",
+        );
+        const clickHasSubmenu = closestMenu !== this;
+
+        if (clickHasSubmenu) {
+            return;
+        }
+
+        const item = target as PcMenuItem;
+
+        if (item.type === "checkbox") {
+            item.checked = !item.checked;
+        }
+
+        emit(this, "pc-select", { detail: { item } });
+    }
+
+    private handleKeyDown(event: KeyboardEvent) {
+        if (event.key === "Enter" || event.key === " ") {
+            const item = this.getCurrentItem();
+            event.preventDefault();
+            event.stopPropagation();
+            item?.click();
+        } else if (
+            ["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)
+        ) {
+            const items = this.getAllItems();
+            const activeItem = this.getCurrentItem();
+            let index = activeItem ? items.indexOf(activeItem) : 0;
+
+            if (items.length > 0) {
+                event.preventDefault();
+                event.stopPropagation();
+
+                if (event.key === "ArrowUp") {
+                    index--;
+                } else if (event.key === "ArrowDown") {
+                    index++;
+                } else if (event.key === "Home") {
+                    index = 0;
+                } else if (event.key === "End") {
+                    index = items.length - 1;
+                }
+
+                if (index < 0) {
+                    index = items.length - 1;
+                }
+
+                if (index > items.length - 1) {
+                    index = 0;
+                }
+
+                this.setCurrentItem(items[index]);
+                items[index].focus();
+            }
+        }
+    }
+
+    private handleMouseDown(event: MouseEvent) {
+        const target = event.target as HTMLElement;
+
+        if (this.isMenuItem(target)) {
+            this.setCurrentItem(target as PcMenuItem);
+        }
+    }
+
+    private handleSlotChange() {
+        const items = this.getAllItems();
+
+        if (items.length > 0) {
+            this.setCurrentItem(items[0]);
+        }
+    }
+
+    private isMenuItem(item: HTMLElement) {
+        return (
+            item.tagName.toLowerCase() === "pc-menu-item" ||
+            ["menuitem", "menuitemcheckbox", "menuitemradio"].includes(
+                item.getAttribute("role") ?? "",
+            )
+        );
+    }
+
+    getAllItems() {
+        return [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+            (element: Element) => {
+                if (
+                    (element as HTMLElement).inert ||
+                    !this.isMenuItem(element as HTMLElement)
+                ) {
+                    return false;
+                }
+                return true;
+            },
+        ) as PcMenuItem[];
+    }
+
+    getCurrentItem() {
+        return this.getAllItems().find(
+            (item) => item.getAttribute("tabindex") === "0",
+        );
+    }
+
+    setCurrentItem(menuItem: PcMenuItem) {
+        const items = this.getAllItems();
+
+        items.forEach((item) => {
+            item.setAttribute("tabindex", item === menuItem ? "0" : "-1");
+        });
+    }
+
+    render() {
+        return html`
+            <slot
+                @click=${this.handleClick}
+                @mousedown=${this.handleMouseDown}
+                @keydown=${this.handleKeyDown}
+                @slotchange=${this.handleSlotChange}
+            ></slot>
+        `;
+    }
+}

package/src/components/menu/menu.styles.ts

@@ -0,0 +1,18 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        display: block;
+        position: relative;
+        background-color: var(--pc-panel-background-color);
+        border: none;
+        border-radius: var(--pc-border-radius-m);
+        padding: var(--pc-spacing-xs);
+        overflow: auto;
+        overscroll-behavior: none;
+    }
+
+    ::slotted(pc-divider) {
+        --spacing: var(--pc-spacing-xxs);
+    }
+`;

package/src/components/menu/menu.ts

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

package/src/components/menu-item/menu-item.component.ts

@@ -0,0 +1,190 @@
+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 { getTextContent, HasSlotController } 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.js";
+import { PcPopup } from "../popup/popup.js";
+import { PcSpinner } from "../spinner/spinner.js";
+import { styles } from "./menu-item.styles.js";
+
+@customElement("pc-menu-item")
+export class PcMenuItem extends LitElement {
+    static styles: CSSResultGroup = styles;
+    static dependencies = {
+        "pc-icon": PcIcon,
+        "pc-popup": PcPopup,
+        "pc-spinner": PcSpinner,
+    };
+
+    private readonly hasSlotController = new HasSlotController(this, "submenu");
+    private submenuController: SubmenuController = new SubmenuController(
+        this,
+        this.hasSlotController,
+    );
+
+    private cachedTextLabel: string = "";
+
+    @query("slot:not([name])") defaultSlot!: HTMLSlotElement;
+    @query(".menu-item") menuItem!: HTMLElement;
+
+    @property({ type: Boolean, reflect: true }) checked = false;
+
+    @property({ type: Boolean, reflect: true }) disabled = false;
+
+    @property({ type: Boolean, reflect: true }) loading = false;
+
+    @property() type: "normal" | "checkbox" = "normal";
+
+    @property() value = "";
+
+    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);
+    }
+
+    private 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,
+            });
+        }
+    }
+
+    private handleHostClick = (event: MouseEvent) => {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    };
+
+    private handleMouseOver = (event: MouseEvent) => {
+        this.focus();
+        event.stopPropagation();
+    };
+
+    @watch("checked")
+    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");
+        }
+    }
+
+    @watch("disabled")
+    handleDisabledChange() {
+        this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    }
+
+    @watch("type")
+    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>
+        `;
+    }
+}