placer-toolkit 0.5.1

package/src/components/rating/rating.component.ts

@@ -0,0 +1,319 @@
+import { LitElement, html } from "lit";
+import type { CSSResultGroup } from "lit";
+import {
+    customElement,
+    eventOptions,
+    property,
+    query,
+    state,
+} from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { clamp } from "../../internal/math.js";
+import { watch } from "../../internal/watch.js";
+import { emit } from "../../internal/emit.js";
+import { PcIcon } from "../icon/icon.js";
+import { styles } from "./rating.styles.js";
+
+@customElement("pc-rating")
+export class PcRating extends LitElement {
+    static styles: CSSResultGroup = styles;
+    static dependencies = { "pc-icon": PcIcon };
+
+    @query(".rating") rating!: HTMLElement;
+
+    @state() private hoverValue = 0;
+    @state() private isHovering = false;
+
+    @property({ type: Boolean, reflect: true }) disabled = false;
+
+    @property() label = "";
+
+    @property({ type: Number }) max = 5;
+
+    @property({ type: Number }) precision = 1;
+
+    @property({ type: Boolean, reflect: true }) readonly = false;
+
+    @property({ type: Number }) value = 0;
+
+    @property() getIcon: (value: number) => string = () =>
+        `
+            <pc-icon library="system" icon-style="solid" name="star"></pc-icon>
+        `;
+
+    private getValueFromMousePosition(event: MouseEvent) {
+        return this.getValueFromXCoordinate(event.clientX);
+    }
+
+    private getValueFromTouchPosition(event: TouchEvent) {
+        return this.getValueFromXCoordinate(event.touches[0].clientX);
+    }
+
+    private getValueFromXCoordinate(coordinate: number) {
+        const isRTL =
+            document.documentElement.dir === "rtl" ||
+            (!document.documentElement.dir &&
+                getComputedStyle(document.documentElement).direction === "rtl");
+        const { left, right, width } = this.rating.getBoundingClientRect();
+        const value = isRTL
+            ? this.roundToPrecision(
+                  ((right - coordinate) / width) * this.max,
+                  this.precision,
+              )
+            : this.roundToPrecision(
+                  ((coordinate - left) / width) * this.max,
+                  this.precision,
+              );
+
+        return clamp(value, 0, this.max);
+    }
+
+    private handleClick(event: MouseEvent) {
+        if (this.disabled) {
+            return;
+        }
+
+        this.setValue(this.getValueFromMousePosition(event));
+        emit(this, "pc-change");
+    }
+
+    private setValue(newValue: number) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+
+        this.value = newValue === this.value ? 0 : newValue;
+        this.isHovering = false;
+    }
+
+    private handleKeyDown(event: KeyboardEvent) {
+        const isLTR =
+            document.documentElement.dir === "ltr" ||
+            (!document.documentElement.dir &&
+                getComputedStyle(document.documentElement).direction === "ltr");
+        const isRTL =
+            document.documentElement.dir === "rtl" ||
+            (!document.documentElement.dir &&
+                getComputedStyle(document.documentElement).direction === "rtl");
+        const oldValue = this.value;
+
+        if (this.disabled || this.readonly) {
+            return;
+        }
+
+        if (
+            event.key === "ArrowDown" ||
+            (isLTR && event.key === "ArrowLeft") ||
+            (isRTL && event.key === "ArrowRight")
+        ) {
+            const decrement = event.shiftKey ? 1 : this.precision;
+            this.value = Math.max(0, this.value - decrement);
+            event.preventDefault();
+        }
+
+        if (
+            event.key === "ArrowUp" ||
+            (isLTR && event.key === "ArrowRight") ||
+            (isRTL && event.key === "ArrowLeft")
+        ) {
+            const increment = event.shiftKey ? 1 : this.precision;
+            this.value = Math.min(this.max, this.value + increment);
+            event.preventDefault();
+        }
+
+        if (event.key === "Home") {
+            this.value = 0;
+            event.preventDefault();
+        }
+
+        if (event.key === "End") {
+            this.value = this.max;
+            event.preventDefault();
+        }
+
+        if (this.value !== oldValue) {
+            emit(this, "pc-change");
+        }
+    }
+
+    private handleMouseEnter(event: MouseEvent) {
+        this.isHovering = true;
+        this.hoverValue = this.getValueFromMousePosition(event);
+    }
+
+    private handleMouseMove(event: MouseEvent) {
+        this.hoverValue = this.getValueFromMousePosition(event);
+    }
+
+    private handleMouseLeave() {
+        this.isHovering = false;
+    }
+
+    private handleTouchStart(event: TouchEvent) {
+        this.isHovering = true;
+        this.hoverValue = this.getValueFromTouchPosition(event);
+
+        event.preventDefault();
+    }
+
+    @eventOptions({ passive: true })
+    private handleTouchMove(event: TouchEvent) {
+        this.hoverValue = this.getValueFromTouchPosition(event);
+    }
+
+    private handleTouchEnd(event: TouchEvent) {
+        this.isHovering = false;
+        this.setValue(this.hoverValue);
+        emit(this, "pc-change");
+
+        event.preventDefault();
+    }
+
+    private roundToPrecision(numberToRound: number, precision = 0.5) {
+        const multiplier = 1 / precision;
+        return Math.ceil(numberToRound * multiplier) / multiplier;
+    }
+
+    @watch("hoverValue")
+    handleHoverValueChange() {
+        emit(this, "pc-hover", {
+            detail: {
+                phase: "move",
+                value: this.hoverValue,
+            },
+        });
+    }
+
+    @watch("isHovering")
+    handleIsHoveringChange() {
+        emit(this, "pc-hover", {
+            detail: {
+                phase: this.isHovering ? "start" : "end",
+                value: this.hoverValue,
+            },
+        });
+    }
+
+    focus(options?: FocusOptions) {
+        this.rating.focus(options);
+    }
+
+    blur() {
+        this.rating.blur();
+    }
+
+    render() {
+        const isRTL =
+            document.documentElement.dir === "rtl" ||
+            (!document.documentElement.dir &&
+                getComputedStyle(document.documentElement).direction === "rtl");
+        const counter = Array.from(Array(this.max).keys());
+        let displayValue = 0;
+
+        if (this.disabled || this.readonly) {
+            displayValue = this.value;
+        } else {
+            displayValue = this.isHovering ? this.hoverValue : this.value;
+        }
+
+        return html`
+            <div
+                part="base"
+                class=${classMap({
+                    "rating": true,
+                    "rating-readonly": this.readonly === true,
+                    "rating-disabled": this.disabled === true,
+                    "rating-rtl": isRTL === true,
+                })}
+                role="slider"
+                aria-label=${this.label}
+                aria-disabled=${this.disabled ? "true" : "false"}
+                aria-readonly=${this.readonly ? "true" : "false"}
+                aria-valuenow=${this.value}
+                aria-valuemin=${0}
+                aria-valuemax=${this.max}
+                tabindex=${this.disabled || this.readonly ? "-1" : "0"}
+                @click=${this.handleClick}
+                @keydown=${this.handleKeyDown}
+                @mouseenter=${this.handleMouseEnter}
+                @touchstart=${this.handleTouchStart}
+                @mouseleave=${this.handleMouseLeave}
+                @touchend=${this.handleTouchEnd}
+                @mousemove=${this.handleMouseMove}
+                @touchmove=${this.handleTouchMove}
+            >
+                <span class="rating-icons">
+                    ${counter.map((index) => {
+                        if (displayValue > index && displayValue < index + 1) {
+                            return html`
+                                <span
+                                    class=${classMap({
+                                        "rating-icon": true,
+                                        "rating-partial-icon-container": true,
+                                        "rating-icon-hover":
+                                            this.isHovering &&
+                                            Math.ceil(displayValue) ===
+                                                index + 1,
+                                    })}
+                                    role="presentation"
+                                >
+                                    <div
+                                        style=${styleMap({
+                                            clipPath: isRTL
+                                                ? `inset(0 ${
+                                                      (displayValue - index) *
+                                                      100
+                                                  }% 0 0)`
+                                                : `inset(0 0 0 ${
+                                                      (displayValue - index) *
+                                                      100
+                                                  }%)`,
+                                        })}
+                                    >
+                                        ${unsafeHTML(this.getIcon(index + 1))}
+                                    </div>
+                                    <div
+                                        class="rating-partial-filled"
+                                        style=${styleMap({
+                                            clipPath: isRTL
+                                                ? `inset(0 0 0 ${
+                                                      100 -
+                                                      (displayValue - index) *
+                                                          100
+                                                  }%)`
+                                                : `inset(0 ${
+                                                      100 -
+                                                      (displayValue - index) *
+                                                          100
+                                                  }% 0 0)`,
+                                        })}
+                                    >
+                                        ${unsafeHTML(this.getIcon(index + 1))}
+                                    </div>
+                                </span>
+                            `;
+                        }
+
+                        return html`
+                            <span
+                                class=${classMap({
+                                    "rating-icon": true,
+                                    "rating-icon-hover":
+                                        this.isHovering &&
+                                        Math.ceil(displayValue) === index + 1,
+                                    "rating-icon-active":
+                                        displayValue >= index + 1,
+                                })}
+                                role="presentation"
+                            >
+                                ${unsafeHTML(this.getIcon(index + 1))}
+                            </span>
+                        `;
+                    })}
+                </span>
+            </div>
+        `;
+    }
+}

package/src/components/rating/rating.styles.ts

@@ -0,0 +1,92 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        --icon-color: var(--pc-color-neutral-300);
+        --icon-color-active: var(--pc-color-amber-500);
+        --icon-size: 1.2rem;
+        display: inline-flex;
+    }
+
+    .rating {
+        position: relative;
+        display: inline-flex;
+        border-radius: var(--pc-border-radius-m);
+        vertical-align: middle;
+    }
+
+    .rating:focus {
+        outline: none;
+    }
+
+    .rating:focus-visible {
+        outline: var(--pc-focus-ring);
+        outline-offset: var(--pc-focus-ring-offset);
+    }
+
+    .rating-icons {
+        display: inline-flex;
+        position: relative;
+        font-size: var(--icon-size);
+        line-height: 0;
+        color: var(--icon-color);
+        white-space: nowrap;
+        cursor: pointer;
+    }
+
+    .rating-icons > * {
+        padding: 0.0625rem;
+    }
+
+    .rating-icon-active,
+    .rating-partial-filled {
+        color: var(--icon-color-active);
+    }
+
+    .rating-partial-icon-container {
+        position: relative;
+    }
+
+    .rating-partial-filled {
+        position: absolute;
+        top: 0.0625rem;
+        left: 0.0625rem;
+    }
+
+    .rating-icon {
+        pointer-events: none;
+        transition: all var(--pc-transition-fast) ease-in-out;
+    }
+
+    .rating-icon pc-icon::part(svg) {
+        overflow: visible;
+    }
+
+    .rating-icon-hover {
+        scale: 1.15;
+    }
+
+    .rating-disabled .rating-icons,
+    .rating-readonly .rating-icons {
+        cursor: default;
+    }
+
+    .rating-disabled .rating-icon-hover,
+    .rating-readonly .rating-icon-hover {
+        scale: none;
+    }
+
+    .rating-disabled {
+        opacity: 0.6;
+    }
+
+    .rating-disabled .rating-icons {
+        cursor: not-allowed;
+    }
+
+    @media (forced-colors: active) {
+        .rating-icon-active {
+            color: SelectedItem;
+        }
+    }
+`;

package/src/components/rating/rating.ts

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

package/src/components/resize-observer/resize-observer.component.ts

@@ -0,0 +1,91 @@
+import { LitElement, html } from "lit";
+import type { CSSResultGroup } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { watch } from "../../internal/watch.js";
+import { emit } from "../../internal/emit.js";
+import { styles } from "./resize-observer.styles.js";
+
+/**
+ * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver` API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+ * @status experimental
+ * @since 0.1.0
+ *
+ * @slot — One or more elements to watch for resizing.
+ *
+ * @event {{ entries: ResizeObserverEntry[] }} pc-resize — Emitted when the element is resized.
+ */
+@customElement("pc-resize-observer")
+export class PcResizeObserver extends LitElement {
+    static styles: CSSResultGroup = styles;
+
+    private resizeObserver!: ResizeObserver;
+    private observedElements: HTMLElement[] = [];
+
+    /** Disables the resize observer. */
+    @property({ type: Boolean, reflect: true }) disabled = false;
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        this.resizeObserver = new ResizeObserver(
+            (entries: ResizeObserverEntry[]) => {
+                emit(this, "pc-resize", {
+                    detail: { entries },
+                });
+            },
+        );
+
+        if (!this.disabled) {
+            this.startObserver();
+        }
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stopObserver();
+    }
+
+    private handleSlotChange() {
+        if (!this.disabled) {
+            this.startObserver();
+        }
+    }
+
+    private startObserver() {
+        const slot = this.shadowRoot!.querySelector("slot");
+
+        if (slot !== null) {
+            const elements = slot.assignedElements({
+                flatten: true,
+            }) as HTMLElement[];
+
+            this.observedElements.forEach((element) =>
+                this.resizeObserver.unobserve(element),
+            );
+            this.observedElements = [];
+
+            elements.forEach((element) => {
+                this.resizeObserver.observe(element);
+                this.observedElements.push(element);
+            });
+        }
+    }
+
+    private stopObserver() {
+        this.resizeObserver.disconnect();
+    }
+
+    /** @internal This is an internal property. */
+    @watch("disabled", { waitUntilFirstUpdate: true })
+    handleDisabledChange() {
+        if (this.disabled) {
+            this.stopObserver();
+        } else {
+            this.startObserver();
+        }
+    }
+
+    render() {
+        return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+    }
+}

package/src/components/resize-observer/resize-observer.styles.ts

@@ -0,0 +1,7 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        display: contents;
+    }
+`;

package/src/components/resize-observer/resize-observer.ts

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