@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/item/item-form.js

@@ -0,0 +1,485 @@
+import { BaseElement } from "../../core/index.js";
+import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
+import { boeBrandInteractiveStyles, boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-item-form";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const escapeSelectorValue = (value) => value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+        }
+
+        [part="form"] {
+          display: grid;
+          gap: ${boePanel.gap};
+          padding: ${boePanel.padding};
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+          border-radius: ${boePanel.radius};
+          background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 92%, var(--boe-token-surface-surface, #ffffff) 8%);
+        }
+
+        [part="label"] {
+          font-size: 0.9rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+        }
+
+        [part="fields"] {
+          display: grid;
+          gap: ${boePanel.gap};
+        }
+
+        [part="section"] {
+          display: grid;
+          gap: ${boePanel.gap};
+          padding: 0.65rem;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 52%, transparent);
+          border-radius: ${boePanel.radius};
+          background: color-mix(in srgb, var(--boe-token-surface-surface, #ffffff) 68%, transparent);
+        }
+
+        [part="section-label"] {
+          font-size: 0.82rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="field"] {
+          display: grid;
+          gap: 0.45rem;
+        }
+
+        [part="checkbox-field"] {
+          display: grid;
+          grid-template-columns: auto 1fr;
+          gap: ${boePanel.gap};
+          align-items: start;
+        }
+
+        [part="checkbox-content"] {
+          display: grid;
+          gap: 0.35rem;
+        }
+
+        [part="field-label"] {
+          font-weight: 700;
+        }
+
+        [part="field-description"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          font-size: 0.95rem;
+        }
+
+        [part="field-value"] {
+          padding: 0.45rem 0.7rem;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 48%, transparent);
+          border-radius: ${boeRadius.control};
+          background: color-mix(in srgb, var(--boe-token-surface-surface, #ffffff) 82%, transparent);
+          color: rgba(35, 32, 28, 0.94);
+          min-block-size: 1.25rem;
+          white-space: pre-wrap;
+        }
+
+        [part="input"],
+        [part="checkbox"] {
+          font: inherit;
+        }
+
+        [part="input"] {
+          width: 100%;
+          min-width: 0;
+          padding: 0.45rem 0.7rem;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 64%, transparent);
+          border-radius: ${boeRadius.control};
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: inherit;
+          box-sizing: border-box;
+        }
+
+        textarea[part="input"] {
+          min-block-size: 6.5rem;
+          resize: vertical;
+        }
+
+        [part="actions"] {
+          display: flex;
+          gap: ${boePanel.gap};
+          justify-content: flex-end;
+        }
+
+        [part="submit"],
+        [part="cancel"] {
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+          border-radius: 999px;
+          padding: 0.4rem 0.7rem;
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: inherit;
+          font: inherit;
+          font-weight: 700;
+          cursor: pointer;
+        }
+
+        [part="submit"] {
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+          border-color: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
+        ${boeNeutralInteractiveStyles('[part="input"]')}
+        ${boeFocusVisibleStyles('[part="checkbox"]')}
+        ${boeNeutralInteractiveStyles('[part="cancel"]')}
+        ${boeBrandInteractiveStyles('[part="submit"]')}
+      `;
+export class BoxItemFormElement extends BaseElement {
+    static get observedAttributes() {
+        return ["disabled", "fields", "label", "mode", "submit-label", "value"];
+    }
+    valueInternal = {};
+    labelEl;
+    fieldsEl;
+    actionsEl;
+    submitEl;
+    cancelEl;
+    structureSignature = "";
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get fields() {
+        const raw = this.getAttribute("fields");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set fields(value) {
+        this.setAttribute("fields", JSON.stringify(value));
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Item Form";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get mode() {
+        return this.getAttribute("mode") === "read" ? "read" : "edit";
+    }
+    set mode(value) {
+        this.setAttribute("mode", value);
+    }
+    get submitLabel() {
+        return this.getAttribute("submit-label") ?? "Save Item";
+    }
+    set submitLabel(value) {
+        this.setAttribute("submit-label", value);
+    }
+    get value() {
+        return { ...this.valueInternal };
+    }
+    set value(value) {
+        this.valueInternal = { ...value };
+        this.setAttribute("value", JSON.stringify(value));
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            const raw = this.getAttribute("value");
+            if (!raw) {
+                this.valueInternal = {};
+            }
+            else {
+                try {
+                    const parsed = JSON.parse(raw);
+                    this.valueInternal = parsed && typeof parsed === "object" ? parsed : {};
+                }
+                catch {
+                    this.valueInternal = {};
+                }
+            }
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    emitValueChanged() {
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: { ...this.valueInternal } },
+        }));
+    }
+    setFieldValue(fieldId, nextValue) {
+        this.valueInternal = {
+            ...this.valueInternal,
+            [fieldId]: nextValue,
+        };
+        this.setAttribute("value", JSON.stringify(this.valueInternal));
+        this.emitValueChanged();
+    }
+    getFieldValue(field) {
+        const type = field.type ?? "text";
+        const currentValue = this.valueInternal[field.id];
+        if (type === "checkbox") {
+            return typeof currentValue === "boolean" ? currentValue : false;
+        }
+        return typeof currentValue === "string" ? currentValue : "";
+    }
+    getFieldSections() {
+        const sections = new Map();
+        this.fields.forEach(field => {
+            const sectionName = field.section?.trim() || "Details";
+            const sectionFields = sections.get(sectionName) ?? [];
+            sectionFields.push(field);
+            sections.set(sectionName, sectionFields);
+        });
+        return Array.from(sections.entries()).map(([name, fields]) => ({ name, fields }));
+    }
+    renderReadValue(field) {
+        const type = field.type ?? "text";
+        const value = this.getFieldValue(field);
+        if (type === "checkbox") {
+            return value ? "Yes" : "No";
+        }
+        if (type === "select") {
+            const selectedOption = (field.options ?? []).find(option => option.value === value);
+            return selectedOption?.label ?? String(value || "Empty");
+        }
+        return String(value || "Empty");
+    }
+    renderField(field) {
+        const type = field.type ?? "text";
+        const value = this.getFieldValue(field);
+        const descriptionMarkup = field.description
+            ? `<div part="field-description">${escapeHtml(field.description)}</div>`
+            : "";
+        const disabled = this.disabled || field.disabled;
+        if (this.mode === "read") {
+            return `
+        <div part="field" data-mode="read" data-field-id="${escapeHtml(field.id)}">
+          <span part="field-label">${escapeHtml(field.label)}</span>
+          ${descriptionMarkup}
+          <div part="field-value">${escapeHtml(this.renderReadValue(field))}</div>
+        </div>
+      `;
+        }
+        if (type === "textarea") {
+            return `
+        <label part="field">
+          <span part="field-label">${escapeHtml(field.label)}</span>
+          ${descriptionMarkup}
+          <textarea
+            part="input"
+            data-field-id="${escapeHtml(field.id)}"
+            placeholder="${escapeHtml(field.placeholder ?? "")}"
+            ${disabled ? "disabled" : ""}
+          >${escapeHtml(String(value))}</textarea>
+        </label>
+      `;
+        }
+        if (type === "select") {
+            const optionsMarkup = (field.options ?? [])
+                .map(option => `
+            <option value="${escapeHtml(option.value)}" ${option.value === value ? "selected" : ""}>
+              ${escapeHtml(option.label)}
+            </option>
+          `)
+                .join("");
+            return `
+        <label part="field">
+          <span part="field-label">${escapeHtml(field.label)}</span>
+          ${descriptionMarkup}
+          <select part="input" data-field-id="${escapeHtml(field.id)}" ${disabled ? "disabled" : ""}>
+            ${optionsMarkup}
+          </select>
+        </label>
+      `;
+        }
+        if (type === "checkbox") {
+            return `
+        <label part="checkbox-field">
+          <input
+            type="checkbox"
+            part="checkbox"
+            data-field-id="${escapeHtml(field.id)}"
+            ${value ? "checked" : ""}
+            ${disabled ? "disabled" : ""}
+          />
+          <span part="checkbox-content">
+            <span part="field-label">${escapeHtml(field.label)}</span>
+            ${descriptionMarkup}
+          </span>
+        </label>
+      `;
+        }
+        return `
+      <label part="field">
+        <span part="field-label">${escapeHtml(field.label)}</span>
+        ${descriptionMarkup}
+        <input
+          type="text"
+          part="input"
+          data-field-id="${escapeHtml(field.id)}"
+          value="${escapeHtml(String(value))}"
+          placeholder="${escapeHtml(field.placeholder ?? "")}"
+          ${disabled ? "disabled" : ""}
+        />
+      </label>
+    `;
+    }
+    structureKey() {
+        return JSON.stringify({
+            fields: this.fields,
+            mode: this.mode,
+        });
+    }
+    rebuildFields() {
+        this.fieldsEl.innerHTML = this.getFieldSections()
+            .map(section => `
+          <section part="section">
+            <div part="section-label">${escapeHtml(section.name)}</div>
+            ${section.fields.map(field => this.renderField(field)).join("")}
+          </section>
+        `)
+            .join("");
+    }
+    patchFieldValues() {
+        if (this.mode === "read") {
+            this.fields.forEach(field => {
+                const valueEl = this.fieldsEl.querySelector(`[data-mode="read"][data-field-id="${escapeSelectorValue(field.id)}"] [part="field-value"]`);
+                if (valueEl) {
+                    valueEl.textContent = this.renderReadValue(field);
+                }
+            });
+            return;
+        }
+        this.fields.forEach(field => {
+            const control = this.fieldsEl.querySelector(`[data-field-id="${escapeSelectorValue(field.id)}"]`);
+            if (!control) {
+                return;
+            }
+            const value = this.getFieldValue(field);
+            const disabled = this.disabled || Boolean(field.disabled);
+            control.disabled = disabled;
+            // Only rewrite value when stale so a focused control keeps its selection.
+            if (control instanceof HTMLInputElement && control.type === "checkbox") {
+                const nextChecked = Boolean(value);
+                if (control.checked !== nextChecked) {
+                    control.checked = nextChecked;
+                }
+                return;
+            }
+            const nextValue = String(value);
+            if (control.value !== nextValue) {
+                control.value = nextValue;
+            }
+        });
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <form part="form" novalidate>
+        <div part="label"></div>
+        <div part="fields"></div>
+        <div part="actions">
+          <button type="button" part="cancel">Cancel</button>
+          <button type="submit" part="submit"></button>
+        </div>
+      </form>
+    `;
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.fieldsEl = this.shadowRoot.querySelector('[part="fields"]');
+        this.actionsEl = this.shadowRoot.querySelector('[part="actions"]');
+        this.cancelEl = this.shadowRoot.querySelector('[part="cancel"]');
+        this.submitEl = this.shadowRoot.querySelector('[part="submit"]');
+    }
+    setupListeners() {
+        const form = this.shadowRoot?.querySelector('[part="form"]');
+        form?.addEventListener("input", event => {
+            const target = event.target;
+            const fieldId = target.dataset.fieldId ?? "";
+            if (!fieldId) {
+                return;
+            }
+            if (target instanceof HTMLInputElement && target.type === "checkbox") {
+                this.setFieldValue(fieldId, target.checked);
+                return;
+            }
+            this.setFieldValue(fieldId, target.value);
+        });
+        form?.addEventListener("submit", event => {
+            event.preventDefault();
+            if (this.disabled) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent("submit", {
+                bubbles: true,
+                composed: true,
+                detail: { value: { ...this.valueInternal } },
+            }));
+        });
+        this.cancelEl.addEventListener("click", () => {
+            if (this.disabled) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent("cancel", {
+                bubbles: true,
+                composed: true,
+                detail: { value: { ...this.valueInternal } },
+            }));
+        });
+    }
+    update() {
+        if (!this.labelEl || !this.fieldsEl) {
+            return;
+        }
+        this.labelEl.textContent = this.label;
+        this.submitEl.textContent = this.submitLabel;
+        this.actionsEl.hidden = this.mode !== "edit";
+        this.submitEl.disabled = this.disabled;
+        this.cancelEl.disabled = this.disabled;
+        const nextSignature = this.structureKey();
+        if (nextSignature !== this.structureSignature || this.fieldsEl.childElementCount === 0) {
+            this.structureSignature = nextSignature;
+            this.rebuildFields();
+            return;
+        }
+        this.patchFieldValues();
+    }
+}
+export const defineBoxItemFormElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxItemFormElement);
+    return BoxItemFormElement;
+};

package/dist/patterns/item/preview-header.d.ts

@@ -0,0 +1,46 @@
+import { BaseElement } from "../../core/index.js";
+type PreviewHeaderAction = {
+    id: string;
+    label: string;
+    tone?: string;
+};
+type PreviewHeaderBreadcrumb = {
+    id: string;
+    label: string;
+};
+export declare class BoxPreviewHeaderElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private breadcrumbsEl;
+    private titleEl;
+    private statusEl;
+    private messageEl;
+    private actionsEl;
+    private breadcrumbsSignature;
+    private actionsSignature;
+    get actions(): PreviewHeaderAction[];
+    set actions(value: PreviewHeaderAction[]);
+    get breadcrumbs(): PreviewHeaderBreadcrumb[];
+    set breadcrumbs(value: PreviewHeaderBreadcrumb[]);
+    get message(): string;
+    set message(value: string);
+    get status(): string;
+    set status(value: string);
+    get heading(): string;
+    set heading(value: string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private parseJsonAttribute;
+    private emitAction;
+    private emitBreadcrumbSelected;
+    private breadcrumbsKey;
+    private actionsKey;
+    private rebuildBreadcrumbs;
+    private patchBreadcrumbLabels;
+    private rebuildActions;
+    private patchActionLabels;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxPreviewHeaderElement: (tagName?: string) => typeof BoxPreviewHeaderElement;
+export {};