@spfx-fast/sharepoint-ui 0.0.0-stage → 0.4.0

package/dist/elements/rating.js

@@ -0,0 +1,206 @@
+import { base, syncHostAccessibleName } from "./shared.js";
+/** Selectable, form-associated star rating with optional half steps. */
+export function defineRating() {
+    if (customElements.get("spui-rating"))
+        return;
+    class SpuiRating extends HTMLElement {
+        static formAssociated = true;
+        static observedAttributes = ["value", "default-value", "max", "step", "size", "color", "label", "item-label", "name", "disabled", "readonly", "required", "aria-label", "aria-labelledby", "aria-description", "aria-describedby"];
+        internals;
+        instanceName = `spui-rating-${crypto.randomUUID()}`;
+        rating = 0;
+        maxValue = 5;
+        stepValue = 1;
+        initialValue = 0;
+        itemLabelFormatter;
+        formDisabled = false;
+        inputTemplateObserver;
+        get form() { return this.internals?.form ?? null; }
+        constructor() {
+            super();
+            try {
+                this.internals = this.attachInternals();
+            }
+            catch { /* Radio interaction still works without custom form association. */ }
+        }
+        connectedCallback() {
+            this.maxValue = this.readMax();
+            this.stepValue = this.readStep();
+            this.rating = this.hasAttribute("value") ? this.readValue(this.getAttribute("value")) : this.readValue(this.getAttribute("default-value"));
+            this.initialValue = this.rating;
+            this.render();
+            this.syncForm();
+            this.watchInputTemplates();
+        }
+        disconnectedCallback() { this.inputTemplateObserver?.disconnect(); }
+        attributeChangedCallback(name) {
+            if (!this.isConnected)
+                return;
+            if (name === "value")
+                this.rating = this.readValue(this.getAttribute("value"));
+            if (name === "max") {
+                this.maxValue = this.readMax();
+                this.rating = this.readValue(String(this.rating));
+            }
+            if (name === "step") {
+                this.stepValue = this.readStep();
+                this.rating = this.clampValue(this.rating);
+            }
+            if (name === "default-value")
+                this.initialValue = this.readValue(this.getAttribute("default-value"));
+            this.render();
+            this.syncForm();
+        }
+        get value() { return this.rating; }
+        set value(value) {
+            this.rating = this.clampValue(Number(value));
+            this.render();
+            this.syncForm();
+        }
+        get max() { return this.maxValue; }
+        set max(value) { this.setAttribute("max", String(value)); }
+        set itemLabel(value) { this.itemLabelFormatter = value; if (this.isConnected)
+            this.render(); }
+        formDisabledCallback(disabled) { this.formDisabled = disabled; this.queryInputs().forEach(input => { input.disabled = disabled || this.hasAttribute("disabled") || this.hasAttribute("readonly"); }); }
+        formResetCallback() { this.rating = this.initialValue; this.render(); this.syncForm(); }
+        formStateRestoreCallback(state) { if (typeof state === "string")
+            this.value = Number(state); }
+        readMax() { const max = Number(this.getAttribute("max") ?? 5); return Number.isInteger(max) && max > 1 ? Math.min(max, 20) : 5; }
+        readStep() { return this.getAttribute("step") === "0.5" ? 0.5 : 1; }
+        readValue(value) { return this.clampValue(Number(value ?? 0)); }
+        clampValue(value) {
+            const safe = Number.isFinite(value) ? Math.max(0, Math.min(this.maxValue, value)) : 0;
+            return Math.round(safe / this.stepValue) * this.stepValue;
+        }
+        queryInputs() { return [...(this.shadowRoot?.querySelectorAll("input[type=radio]") ?? [])]; }
+        watchInputTemplates() {
+            this.inputTemplateObserver ??= new MutationObserver(() => { this.watchInputTemplates(); this.render(); });
+            this.inputTemplateObserver.observe(this, { childList: true });
+            for (const input of this.querySelectorAll('input[slot="full-value-input"],input[slot="half-value-input"]'))
+                this.inputTemplateObserver.observe(input, { attributes: true });
+        }
+        updateValue(value, event) {
+            const next = this.clampValue(value);
+            if (this.hasAttribute("value")) {
+                this.render();
+                this.syncForm();
+                this.dispatchEvent(new CustomEvent("spui-change", { detail: { event, type: "change", value: next }, bubbles: true, composed: true }));
+                return;
+            }
+            this.rating = next;
+            this.render();
+            this.syncForm();
+            this.dispatchEvent(new CustomEvent("spui-change", { detail: { event, type: "change", value: next }, bubbles: true, composed: true }));
+        }
+        syncForm() {
+            this.internals?.setFormValue(this.rating > 0 ? String(this.rating) : null, String(this.rating));
+            const missing = this.hasAttribute("required") && this.rating === 0;
+            try {
+                this.internals?.setValidity(missing ? { valueMissing: true } : {}, missing ? "Choose a rating." : "", this.queryInputs()[0]);
+            }
+            catch { /* Keep the radio group functional if a browser rejects the validity anchor. */ }
+        }
+        labelFor(value) {
+            if (this.itemLabelFormatter)
+                return this.itemLabelFormatter(value);
+            const template = this.getAttribute("item-label") || "{value} of {max}";
+            return template.replaceAll("{value}", String(value)).replaceAll("{max}", String(this.maxValue));
+        }
+        render() {
+            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+            shadow.replaceChildren();
+            const labelText = this.getAttribute("label") ?? this.getAttribute("aria-label") ?? "Rating";
+            const label = document.createElement("span");
+            label.className = "label";
+            label.part.add("label");
+            label.textContent = this.getAttribute("label") ?? "";
+            label.hidden = !this.getAttribute("label");
+            const group = document.createElement("div");
+            group.className = "items";
+            group.setAttribute("role", "radiogroup");
+            group.setAttribute("aria-label", labelText);
+            group.part.add("items");
+            if (this.hasAttribute("readonly"))
+                group.setAttribute("aria-readonly", "true");
+            if (this.hasAttribute("disabled"))
+                group.setAttribute("aria-disabled", "true");
+            const half = this.stepValue === 0.5;
+            for (let star = 1; star <= this.maxValue; star++) {
+                const starItem = document.createElement("span");
+                starItem.className = "star";
+                const icon = document.createElement("span");
+                icon.className = "icon";
+                icon.part.add("icon");
+                icon.setAttribute("aria-hidden", "true");
+                icon.textContent = "☆";
+                const fill = document.createElement("span");
+                fill.className = "fill";
+                fill.textContent = "★";
+                fill.style.width = `${Math.max(0, Math.min(1, this.rating - (star - 1))) * 100}%`;
+                icon.append(fill);
+                starItem.append(icon);
+                for (const value of (half ? [star - 0.5, star] : [star])) {
+                    const inputSlot = value % 1 ? "half-value-input" : "full-value-input";
+                    const template = this.querySelector(`input[slot="${inputSlot}"]`);
+                    const input = template ? template.cloneNode(false) : document.createElement("input");
+                    for (const attribute of ["slot", "hidden", "aria-hidden", "tabindex", "type", "name", "value", "checked", "disabled", "required"])
+                        input.removeAttribute(attribute);
+                    input.type = "radio";
+                    input.name = this.instanceName;
+                    input.value = String(value);
+                    input.checked = this.rating === value;
+                    input.disabled = this.formDisabled || this.hasAttribute("disabled") || this.hasAttribute("readonly");
+                    input.required = this.hasAttribute("required");
+                    if (!input.hasAttribute("aria-label"))
+                        input.setAttribute("aria-label", this.labelFor(value));
+                    input.part.add("option");
+                    input.addEventListener("change", event => { if (input.checked)
+                        this.updateValue(value, event); });
+                    const hit = document.createElement("label");
+                    hit.className = half ? (value % 1 ? "hit half" : "hit full") : "hit whole";
+                    hit.append(input);
+                    starItem.append(hit);
+                }
+                group.append(starItem);
+            }
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:inline-grid;gap:4px;min-width:0;color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font-family:var(--spui-font-family,inherit)}.label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}.label[hidden]{display:none}.items{display:inline-flex;align-items:center;gap:2px;width:max-content}.star{position:relative;display:inline-block;flex:none;width:var(--spui-rating-size,28px);height:var(--spui-rating-size,28px)}.icon{position:relative;display:inline-block;font-size:var(--spui-rating-size,28px);line-height:1;color:var(--spui-rating-empty,color-mix(in srgb,var(--spui-ui-text,var(--spui-semantic-body-text,#242424)) 65%,var(--spui-ui-surface,var(--spui-semantic-body-background,#ffffff)) 35%));user-select:none}.fill{position:absolute;inset-block:0;inset-inline-start:0;overflow:hidden;width:0;color:var(--spui-rating-color,var(--spui-ui-accent,#0078d4));white-space:nowrap}:host([color=brand]){--spui-rating-color:color-mix(in srgb,var(--spui-ui-accent,#0078d4) 65%,var(--spui-ui-text,var(--spui-semantic-body-text,#242424)) 35%)}:host([color=marigold]){--spui-rating-color:color-mix(in srgb,var(--spui-rating-marigold,#c58b00) 65%,var(--spui-ui-text,var(--spui-semantic-body-text,#242424)) 35%)}:host(:not([color])),:host([color=neutral]){--spui-rating-color:var(--spui-ui-text,var(--spui-semantic-body-text,currentColor))}:host([size=small]){--spui-rating-size:18px}:host([size=medium]){--spui-rating-size:24px}:host([size=large]){--spui-rating-size:30px}:host([size=extra-large]),:host(:not([size])){--spui-rating-size:36px}.hit{position:absolute;z-index:1;inset-block:0;display:block;cursor:pointer}.hit.whole{inset-inline:0}.hit.half{inset-inline-start:0;width:50%}.hit.full{inset-inline-end:0;width:50%}.hit input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit}.hit:focus-within{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px;border-radius:3px}:host([disabled]) .hit,:host([readonly]) .hit{cursor:default}@media(forced-colors:active){.icon{color:CanvasText}.fill{color:Highlight}.hit:focus-within{outline-color:Highlight}}`;
+            const templates = document.createElement("div");
+            templates.hidden = true;
+            for (const slotName of ["icon-filled", "icon-outline", "full-value-input", "half-value-input"]) {
+                const slot = document.createElement("slot");
+                slot.name = slotName;
+                slot.addEventListener("slotchange", () => this.syncIcons());
+                templates.append(slot);
+            }
+            shadow.append(style, templates, label, group);
+            syncHostAccessibleName(this, group);
+            this.syncIcons();
+        }
+        syncIcons() {
+            const source = (name) => {
+                const template = this.shadowRoot?.querySelector(`slot[name=${name}]`)?.assignedElements()[0];
+                if (!template)
+                    return undefined;
+                const content = template.localName === "span" && template.hidden ? template.firstElementChild : template;
+                if (!content)
+                    return undefined;
+                const clone = content.cloneNode(true);
+                clone.removeAttribute("slot");
+                clone.removeAttribute("hidden");
+                clone.setAttribute("aria-hidden", "true");
+                return clone;
+            };
+            const filledIcon = source("icon-filled");
+            const outlineIcon = source("icon-outline");
+            for (const icon of this.shadowRoot?.querySelectorAll(".items .icon") ?? []) {
+                const fill = icon.querySelector(".fill");
+                if (!fill)
+                    continue;
+                icon.replaceChildren(outlineIcon?.cloneNode(true) ?? document.createTextNode("☆"), fill);
+                fill.replaceChildren(filledIcon?.cloneNode(true) ?? document.createTextNode("★"));
+            }
+        }
+    }
+    customElements.define("spui-rating", SpuiRating);
+}

package/dist/elements/rich-text-editor.d.ts

@@ -0,0 +1,18 @@
+export interface SharePointRichTextEditorElement extends HTMLElement {
+    value: string;
+    uploadImage?: (file: File) => Promise<string>;
+    readonly form: HTMLFormElement | null;
+    readonly validity: ValidityState | undefined;
+    readonly validationMessage: string;
+    readonly willValidate: boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "spui-rich-text-editor": SharePointRichTextEditorElement;
+    }
+}
+export declare function defineRichTextEditor(): void;