placer-toolkit 0.5.1

package/dist/components/radio-group/radio-group.component.js

@@ -0,0 +1,379 @@
+import { __decorate, __metadata } from 'tslib';
+import { LitElement, html } from 'lit';
+import { query, state, property, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { FormControlController, customErrorValidityState, valueMissingValidityState, validValidityState } from '../../internal/form.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { watch } from '../../internal/watch.js';
+import { emit } from '../../internal/emit.js';
+import { PcButtonGroup } from '../button-group/button-group.component.js';
+import { styles } from './radio-group.styles.js';
+
+let PcRadioGroup = class PcRadioGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        // @ts-expect-error
+        this.formControlController = new FormControlController(this);
+        this.hasSlotController = new HasSlotController(this, "hint", "label");
+        this.customValidityMessage = "";
+        this.hasButtonGroup = false;
+        this.errorMessage = "";
+        this.defaultValue = "";
+        this.form = "";
+        this.hint = "";
+        this.label = "";
+        this.name = "option";
+        this.required = false;
+        this.size = "medium";
+        this.value = "";
+    }
+    get validity() {
+        const isRequiredAndEmpty = this.required && !this.value;
+        const hasCustomValidityMessage = this.customValidityMessage !== "";
+        if (hasCustomValidityMessage) {
+            return customErrorValidityState;
+        }
+        else if (isRequiredAndEmpty) {
+            return valueMissingValidityState;
+        }
+        return validValidityState;
+    }
+    get validationMessage() {
+        const isRequiredAndEmpty = this.required && !this.value;
+        const hasCustomValidityMessage = this.customValidityMessage !== "";
+        if (hasCustomValidityMessage) {
+            return this.customValidityMessage;
+        }
+        else if (isRequiredAndEmpty) {
+            return this.validationInput.validationMessage;
+        }
+        return "";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.defaultValue = this.value;
+    }
+    firstUpdated() {
+        this.formControlController.updateValidity();
+    }
+    getAllRadios() {
+        return [
+            ...this.querySelectorAll("pc-radio, pc-radio-button"),
+        ];
+    }
+    handleRadioClick(event) {
+        const target = event.target.closest("pc-radio, pc-radio-button");
+        const radios = this.getAllRadios();
+        const oldValue = this.value;
+        if (!target || target.disabled) {
+            return;
+        }
+        this.value = target.value ?? "";
+        radios.forEach((radio) => (radio.checked = radio === target));
+        if (this.value !== oldValue) {
+            emit(this, "pc-change");
+            emit(this, "pc-input");
+        }
+    }
+    handleKeyDown(event) {
+        if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
+            return;
+        }
+        const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+        const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0];
+        const increment = event.key === " "
+            ? 0
+            : ["ArrowUp", "ArrowLeft"].includes(event.key)
+                ? -1
+                : 1;
+        const oldValue = this.value;
+        let index = radios.indexOf(checkedRadio) + increment;
+        if (index < 0) {
+            index = radios.length - 1;
+        }
+        if (index > radios.length - 1) {
+            index = 0;
+        }
+        this.getAllRadios().forEach((radio) => {
+            radio.checked = false;
+            if (!this.hasButtonGroup) {
+                radio.setAttribute("tabindex", "-1");
+            }
+        });
+        this.value = radios[index].value ?? "";
+        radios[index].checked = true;
+        if (!this.hasButtonGroup) {
+            radios[index].setAttribute("tabindex", "0");
+            radios[index].focus();
+        }
+        else {
+            radios[index].shadowRoot.querySelector("button").focus();
+        }
+        if (this.value !== oldValue) {
+            emit(this, "pc-change");
+            emit(this, "pc-input");
+        }
+        event.preventDefault();
+    }
+    handleLabelClick() {
+        this.focus();
+    }
+    handleInvalid(event) {
+        this.formControlController.setValidity(false);
+        this.formControlController.emitInvalidEvent(event);
+    }
+    async syncRadioElements() {
+        const radios = this.getAllRadios();
+        await Promise.all(radios.map(async (radio) => {
+            await radio.updateComplete;
+            radio.checked = radio.value === this.value;
+            radio.size = this.size;
+        }));
+        this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "pc-radio-button");
+        if (radios.length > 0 && !radios.some((radio) => radio.checked)) {
+            if (this.hasButtonGroup) {
+                const buttonRadio = radios[0].shadowRoot?.querySelector("button");
+                if (buttonRadio) {
+                    buttonRadio.setAttribute("tabindex", "0");
+                }
+            }
+            else {
+                radios[0].setAttribute("tabindex", "0");
+            }
+        }
+        if (this.hasButtonGroup) {
+            const buttonGroup = this.shadowRoot?.querySelector("pc-button-group");
+            if (buttonGroup) {
+                buttonGroup.disableRole = true;
+            }
+        }
+    }
+    syncRadios() {
+        if (customElements.get("pc-radio") &&
+            customElements.get("pc-radio-button")) {
+            this.syncRadioElements();
+            return;
+        }
+        if (customElements.get("pc-radio")) {
+            this.syncRadioElements();
+        }
+        else {
+            customElements
+                .whenDefined("pc-radio")
+                .then(() => this.syncRadios());
+        }
+        if (customElements.get("pc-radio-button")) {
+            this.syncRadioElements();
+        }
+        else {
+            customElements
+                .whenDefined("pc-radio-button")
+                .then(() => this.syncRadios());
+        }
+    }
+    updateCheckedRadio() {
+        const radios = this.getAllRadios();
+        radios.forEach((radio) => (radio.checked = radio.value === this.value));
+        this.formControlController.setValidity(this.validity.valid);
+    }
+    handleSizeChange() {
+        this.syncRadios();
+    }
+    handleValueChange() {
+        if (this.hasUpdated) {
+            this.updateCheckedRadio();
+        }
+    }
+    checkValidity() {
+        const isRequiredAndEmpty = this.required && !this.value;
+        const hasCustomValidityMessage = this.customValidityMessage !== "";
+        if (isRequiredAndEmpty || hasCustomValidityMessage) {
+            this.formControlController.emitInvalidEvent();
+            return false;
+        }
+        return true;
+    }
+    getForm() {
+        return this.formControlController.getForm();
+    }
+    reportValidity() {
+        const isValid = this.validity.valid;
+        this.errorMessage =
+            this.customValidityMessage || isValid
+                ? ""
+                : this.validationInput.validationMessage;
+        this.formControlController.setValidity(isValid);
+        this.validationInput.hidden = true;
+        clearTimeout(this.validationTimeout);
+        if (!isValid) {
+            this.validationInput.hidden = false;
+            this.validationInput.reportValidity();
+            this.validationTimeout = setTimeout(() => (this.validationInput.hidden = true), 10000);
+        }
+        return isValid;
+    }
+    setCustomValidity(message = "") {
+        this.customValidityMessage = message;
+        this.errorMessage = message;
+        this.validationInput.setCustomValidity(message);
+        this.formControlController.updateValidity();
+    }
+    focus(options) {
+        const radios = this.getAllRadios();
+        const checked = radios.find((radio) => radio.checked);
+        const firstEnabledRadio = radios.find((radio) => !radio.disabled);
+        const radioToFocus = checked || firstEnabledRadio;
+        if (radioToFocus) {
+            radioToFocus.focus(options);
+        }
+    }
+    render() {
+        const hasLabelSlot = this.hasSlotController.test("label");
+        const hasHintSlot = this.hasSlotController.test("hint");
+        const hasLabel = this.label ? true : !!hasLabelSlot;
+        const hasHint = this.hint ? true : !!hasHintSlot;
+        const defaultSlot = html `
+            <slot
+                @slotchange=${this.syncRadios}
+                @click=${this.handleRadioClick}
+                @keydown=${this.handleKeyDown}
+            ></slot>
+        `;
+        return html `
+            <fieldset
+                part="form-control"
+                class=${classMap({
+            "form-control": true,
+            "form-control-small": this.size === "small",
+            "form-control-medium": this.size === "medium",
+            "form-control-large": this.size === "large",
+            "form-control-radio-group": true,
+            "form-control-has-label": hasLabel,
+            "form-control-has-hint": hasHint,
+        })}
+                role="radiogroup"
+                aria-labelledby="label"
+                aria-describedby="hint-text"
+                aria-errormessage="error-message"
+            >
+                <label
+                    class="label"
+                    part="label"
+                    id="label"
+                    @click=${this.handleLabelClick}
+                    aria-hidden=${hasLabel ? "false" : "true"}
+                >
+                    <slot name="label">${this.label}</slot>
+                </label>
+
+                <div class="form-control-input" part="form-control-input">
+                    <div class="pc-visually-hidden">
+                        <div id="error-message" aria-live="assertive">
+                            ${this.errorMessage}
+                        </div>
+                        <label class="radio-group-validation">
+                            <input
+                                type="text"
+                                class="radio-group-validation-input"
+                                tabindex="-1"
+                                hidden=""
+                                ?required=${this.required}
+                                @invalid=${this.handleInvalid}
+                            />
+                        </label>
+                    </div>
+
+                    ${this.hasButtonGroup
+            ? html `
+                              <pc-button-group
+                                  part="button-group"
+                                  role="presentation"
+                                  exportparts="base:button-group__base"
+                              >
+                                  ${defaultSlot}
+                              </pc-button-group>
+                          `
+            : defaultSlot}
+                </div>
+
+                <div
+                    class="hint"
+                    part="hint"
+                    id="hint-text"
+                    aria-hidden=${hasHint ? "false" : "true"}
+                >
+                    <slot name="hint">${this.hint}</slot>
+                </div>
+            </fieldset>
+        `;
+    }
+};
+PcRadioGroup.styles = styles;
+PcRadioGroup.dependencies = {
+    "pc-button-group": PcButtonGroup,
+};
+__decorate([
+    query("slot:not([name])"),
+    __metadata("design:type", HTMLSlotElement)
+], PcRadioGroup.prototype, "defaultSlot", void 0);
+__decorate([
+    query(".radio-group-validation-input"),
+    __metadata("design:type", HTMLInputElement)
+], PcRadioGroup.prototype, "validationInput", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PcRadioGroup.prototype, "hasButtonGroup", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PcRadioGroup.prototype, "errorMessage", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PcRadioGroup.prototype, "defaultValue", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], PcRadioGroup.prototype, "form", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcRadioGroup.prototype, "hint", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcRadioGroup.prototype, "label", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcRadioGroup.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcRadioGroup.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], PcRadioGroup.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], PcRadioGroup.prototype, "value", void 0);
+__decorate([
+    watch("size", { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcRadioGroup.prototype, "handleSizeChange", null);
+__decorate([
+    watch("value"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcRadioGroup.prototype, "handleValueChange", null);
+PcRadioGroup = __decorate([
+    customElement("pc-radio-group")
+], PcRadioGroup);
+
+export { PcRadioGroup };

package/dist/components/radio-group/radio-group.d.ts

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

package/dist/components/radio-group/radio-group.js

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

package/dist/components/radio-group/radio-group.styles.d.ts

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

package/dist/components/radio-group/radio-group.styles.js

@@ -0,0 +1,42 @@
+import { css } from 'lit';
+
+const styles = css `
+    :host {
+        display: block;
+    }
+
+    .form-control {
+        position: relative;
+        border: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .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);
+        padding: 0;
+        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);
+    }
+`;
+
+export { styles };

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

@@ -0,0 +1,37 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+import { PcIcon } from "../icon/icon.js";
+export declare class PcRating extends LitElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        "pc-icon": typeof PcIcon;
+    };
+    rating: HTMLElement;
+    private hoverValue;
+    private isHovering;
+    disabled: boolean;
+    label: string;
+    max: number;
+    precision: number;
+    readonly: boolean;
+    value: number;
+    getIcon: (value: number) => string;
+    private getValueFromMousePosition;
+    private getValueFromTouchPosition;
+    private getValueFromXCoordinate;
+    private handleClick;
+    private setValue;
+    private handleKeyDown;
+    private handleMouseEnter;
+    private handleMouseMove;
+    private handleMouseLeave;
+    private handleTouchStart;
+    private handleTouchMove;
+    private handleTouchEnd;
+    private roundToPrecision;
+    handleHoverValueChange(): void;
+    handleIsHoveringChange(): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}