@unofficialbox/box-open-elements 0.1.0

package/dist/components/forms/rating.js

@@ -0,0 +1,302 @@
+import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-rating";
+const ratingStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="field"] {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  [part="label"] {
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  [part="control"] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.1rem;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  [part="star"] {
+    inline-size: 1.65rem;
+    block-size: 1.65rem;
+    display: grid;
+    place-items: center;
+    border: none;
+    border-radius: ${boeRadius.med};
+    background: transparent;
+    color: rgba(82, 96, 109, 0.45);
+    cursor: pointer;
+    transition:
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      transform ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="star"][data-filled="true"] {
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    border-color: transparent;
+    background: transparent;
+  }
+
+  [part="star"]:hover:not(:disabled) {
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    background: transparent;
+  }
+
+  [part="star"]:focus-visible {
+    outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5);
+    outline-offset: 2px;
+  }
+
+  [part="star"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  [part="icon"] {
+    font-size: 1.15rem;
+    line-height: 1;
+  }
+
+  [part="value"] {
+    font-size: 0.88rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+export class BoxRatingElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "disabled",
+            "label",
+            "max",
+            "value",
+        ];
+    }
+    valueInternal = 0;
+    lastMax = 0;
+    labelEl;
+    controlEl;
+    valueEl;
+    errorEl;
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Rating";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get max() {
+        const raw = Number(this.getAttribute("max") ?? "5");
+        return Number.isFinite(raw) && raw > 0 ? Math.max(1, Math.round(raw)) : 5;
+    }
+    set max(value) {
+        this.setAttribute("max", String(value));
+    }
+    get value() {
+        return this.valueInternal;
+    }
+    set value(value) {
+        const nextValue = this.normalizeValue(value);
+        this.valueInternal = nextValue;
+        this.setAttribute("value", String(nextValue));
+        this.syncFormAssociation();
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            this.valueInternal = this.normalizeValue(Number(this.getAttribute("value") ?? "0"));
+        }
+        if (name === "max" && this.valueInternal > this.max) {
+            this.valueInternal = this.max;
+            this.setAttribute("value", String(this.valueInternal));
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    getFormValue() {
+        return String(this.valueInternal);
+    }
+    restoreFormValue(value) {
+        const parsed = typeof value === "string" ? Number(value) : 0;
+        this.valueInternal = this.normalizeValue(parsed);
+        this.setAttribute("value", String(this.valueInternal));
+        this.syncFormAssociation();
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    normalizeValue(value) {
+        if (!Number.isFinite(value)) {
+            return 0;
+        }
+        return Math.min(this.max, Math.max(0, Math.round(value)));
+    }
+    emitValueChanged(nextValue) {
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: nextValue },
+        }));
+    }
+    updateValue(nextValue) {
+        if (this.disabled) {
+            return;
+        }
+        const normalized = this.normalizeValue(nextValue);
+        this.valueInternal = normalized;
+        this.setAttribute("value", String(normalized));
+        this.syncFormAssociation();
+        this.emitValueChanged(normalized);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    handleKeydown = (rawEvent) => {
+        const event = rawEvent;
+        if (this.disabled) {
+            return;
+        }
+        if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+            event.preventDefault();
+            this.updateValue(this.valueInternal >= this.max ? this.max : this.valueInternal + 1);
+            this.focusActiveStar();
+            return;
+        }
+        if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+            event.preventDefault();
+            this.updateValue(this.valueInternal <= 1 ? 0 : this.valueInternal - 1);
+            this.focusActiveStar();
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            this.updateValue(0);
+            this.focusActiveStar();
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            this.updateValue(this.max);
+            this.focusActiveStar();
+        }
+    };
+    focusActiveStar() {
+        queueMicrotask(() => {
+            const active = this.controlEl?.querySelector('[part="star"][tabindex="0"]');
+            active?.focus();
+        });
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${ratingStyles}</style>
+      <div part="field">
+        <div part="label"></div>
+        <div part="control" role="radiogroup">
+          <span part="value"></span>
+        </div>
+        ${formErrorMessageMarkup()}
+      </div>
+    `;
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.controlEl = this.shadowRoot.querySelector('[part="control"]');
+        this.valueEl = this.shadowRoot.querySelector('[part="value"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        this.controlEl.addEventListener("keydown", this.handleKeydown);
+        this.controlEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="star"]');
+            if (!button || !this.controlEl.contains(button)) {
+                return;
+            }
+            const value = Number(button.dataset.value ?? "0");
+            this.updateValue(value);
+        });
+    }
+    update() {
+        if (!this.labelEl || !this.controlEl || !this.valueEl || !this.errorEl) {
+            return;
+        }
+        this.labelEl.textContent = this.label;
+        this.controlEl.setAttribute("aria-label", this.label);
+        this.controlEl.setAttribute("aria-disabled", String(this.disabled));
+        this.valueEl.textContent = `${this.valueInternal}/${this.max}`;
+        if (this.lastMax !== this.max) {
+            const stars = Array.from({ length: this.max }, (_, index) => {
+                const ratingValue = index + 1;
+                return `
+          <button
+            type="button"
+            part="star"
+            role="radio"
+            data-value="${ratingValue}"
+          >
+            <span part="icon" aria-hidden="true">★</span>
+          </button>
+        `;
+            }).join("");
+            this.controlEl.innerHTML = `${stars}<span part="value"></span>`;
+            this.valueEl = this.shadowRoot.querySelector('[part="value"]');
+            this.valueEl.textContent = `${this.valueInternal}/${this.max}`;
+            this.lastMax = this.max;
+        }
+        this.controlEl.querySelectorAll('[part="star"]').forEach(node => {
+            const button = node;
+            const ratingValue = Number(button.dataset.value ?? "0");
+            const selected = this.valueInternal === ratingValue;
+            const filled = this.valueInternal >= ratingValue;
+            button.setAttribute("aria-checked", String(selected));
+            button.setAttribute("aria-label", `${ratingValue} ${ratingValue === 1 ? "star" : "stars"}`);
+            button.dataset.filled = String(filled);
+            button.tabIndex = selected || (this.valueInternal === 0 && ratingValue === 1) ? 0 : -1;
+            if (this.disabled) {
+                button.setAttribute("disabled", "");
+            }
+            else {
+                button.removeAttribute("disabled");
+            }
+        });
+        this.applyInvalidState(this.controlEl, this.errorEl);
+    }
+}
+export const defineBoxRatingElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxRatingElement);
+    return BoxRatingElement;
+};

package/dist/components/forms/rich-text-input.d.ts

@@ -0,0 +1,32 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+export declare class BoxRichTextInputElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private editor;
+    private labelElement;
+    private toolbarEl;
+    private errorEl;
+    private toolbarButtons;
+    private valueInternal;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get placeholder(): string;
+    set placeholder(value: string);
+    get value(): string;
+    set value(value: string);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected getFormValue(): FormValue;
+    protected restoreFormValue(value: FormValue): void;
+    private emitValueChanged;
+    private handleEditorInput;
+    private insertSanitizedHtml;
+    private handlePaste;
+    private handleDrop;
+    private applyCommand;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxRichTextInputElement: (tagName?: string) => typeof BoxRichTextInputElement;