@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/search/filter-bar.js

@@ -0,0 +1,379 @@
+import { BaseElement } from "../../core/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-filter-bar";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+          --_obp-surface: var(--boe-token-surface-surface, #ffffff);
+          --_obp-surface-muted: var(--boe-token-surface-surface-secondary, #fbfbfb);
+          --_obp-border: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+          --_obp-border-subtle: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 64%, transparent);
+          --_obp-text-muted: var(--boe-token-text-text-secondary, #6f6f6f);
+          --_obp-brand: var(--boe-token-surface-surface-brand, #0061d5);
+          --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+        }
+
+        [part="bar"] {
+          display: grid;
+          gap: ${boePanel.gap};
+          padding: ${boePanel.padding};
+          border: 1px solid var(--_obp-border);
+          border-radius: ${boePanel.radius};
+          background: var(--_obp-surface-muted);
+        }
+
+        [part="label"] {
+          font-size: 0.9rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+        }
+
+        [part="controls"] {
+          display: grid;
+          grid-template-columns: minmax(14rem, 1.4fr) repeat(2, minmax(10rem, 0.8fr));
+          gap: ${boePanel.gap};
+          align-items: center;
+        }
+
+        [part="field"],
+        [part="select-field"] {
+          display: grid;
+          gap: 0.35rem;
+        }
+
+        [part="field-label"] {
+          font-size: 0.82rem;
+          font-weight: 700;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
+          color: var(--_obp-text-muted);
+        }
+
+        [part="input"],
+        [part="select"] {
+          width: 100%;
+          min-width: 0;
+          padding: 0.45rem 0.7rem;
+          border: 1px solid var(--_obp-border-subtle);
+          border-radius: ${boeRadius.control};
+          background: var(--_obp-surface);
+          color: inherit;
+          font: inherit;
+          box-sizing: border-box;
+        }
+
+        [part="filters"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.65rem;
+        }
+
+        [part="filter-chip"] {
+          border: 1px solid var(--_obp-border-subtle);
+          border-radius: 999px;
+          padding: 0.4rem 0.7rem;
+          background: var(--_obp-surface);
+          color: inherit;
+          font: inherit;
+          cursor: pointer;
+        }
+
+        ${boeNeutralInteractiveStyles('[part="input"]')}
+        ${boeNeutralInteractiveStyles('[part="select"]')}
+        ${boeNeutralInteractiveStyles('[part="filter-chip"]')}
+
+        [part="filter-chip"][data-selected="true"],
+        [part="filter-chip"][data-selected="true"]:hover:not(:disabled),
+        [part="filter-chip"][data-selected="true"]:active:not(:disabled) {
+          border-color: color-mix(in srgb, var(--_obp-brand) 34%, transparent);
+          background: var(--_obp-brand-soft);
+          color: var(--_obp-brand);
+        }
+
+        @media (max-width: 900px) {
+          [part="controls"] {
+            grid-template-columns: 1fr;
+          }
+        }
+      `;
+export class BoxFilterBarElement extends BaseElement {
+    static get observedAttributes() {
+        return ["filter-options", "filters", "label", "query", "sort-options", "sort-value", "view-options", "view-value"];
+    }
+    queryInternal = "";
+    sortValueInternal = "";
+    viewValueInternal = "";
+    filtersInternal = [];
+    labelEl;
+    barEl;
+    inputEl;
+    sortEl;
+    viewEl;
+    filtersEl;
+    optionsSignature = "";
+    get label() {
+        return this.getAttribute("label") ?? "Filter Bar";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get query() {
+        return this.queryInternal;
+    }
+    set query(value) {
+        this.queryInternal = value;
+        this.setAttribute("query", value);
+    }
+    get sortValue() {
+        return this.sortValueInternal;
+    }
+    set sortValue(value) {
+        this.sortValueInternal = value;
+        this.setAttribute("sort-value", value);
+    }
+    get viewValue() {
+        return this.viewValueInternal;
+    }
+    set viewValue(value) {
+        this.viewValueInternal = value;
+        this.setAttribute("view-value", value);
+    }
+    get filters() {
+        return this.filtersInternal;
+    }
+    set filters(value) {
+        this.filtersInternal = value;
+        this.setAttribute("filters", JSON.stringify(value));
+    }
+    get filterOptions() {
+        return this.parseOptionsAttribute("filter-options");
+    }
+    set filterOptions(value) {
+        this.setAttribute("filter-options", JSON.stringify(value));
+    }
+    get sortOptions() {
+        return this.parseOptionsAttribute("sort-options");
+    }
+    set sortOptions(value) {
+        this.setAttribute("sort-options", JSON.stringify(value));
+    }
+    get viewOptions() {
+        return this.parseOptionsAttribute("view-options");
+    }
+    set viewOptions(value) {
+        this.setAttribute("view-options", JSON.stringify(value));
+    }
+    connectedCallback() {
+        this.syncInternalStateFromAttributes();
+        super.connectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        this.syncInternalStateFromAttributes();
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    syncInternalStateFromAttributes() {
+        this.queryInternal = this.getAttribute("query") ?? "";
+        this.sortValueInternal = this.getAttribute("sort-value") ?? "";
+        this.viewValueInternal = this.getAttribute("view-value") ?? "";
+        const rawFilters = this.getAttribute("filters");
+        if (!rawFilters) {
+            this.filtersInternal = [];
+            return;
+        }
+        try {
+            const parsed = JSON.parse(rawFilters);
+            this.filtersInternal = Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            this.filtersInternal = [];
+        }
+    }
+    parseOptionsAttribute(name) {
+        const raw = this.getAttribute(name);
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    getState() {
+        return {
+            query: this.query,
+            sort: this.sortValue,
+            view: this.viewValue,
+            filters: this.filters,
+        };
+    }
+    emitValueChanged() {
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.getState() },
+        }));
+    }
+    renderOptionList(options, selectedValue) {
+        return options
+            .map(option => `
+          <option value="${escapeHtml(option.value)}" ${selectedValue === option.value ? "selected" : ""}>
+            ${escapeHtml(option.label)}
+          </option>
+        `)
+            .join("");
+    }
+    optionsKey() {
+        return JSON.stringify({
+            filterOptions: this.filterOptions,
+            sortOptions: this.sortOptions,
+            viewOptions: this.viewOptions,
+        });
+    }
+    rebuildOptionControls() {
+        this.sortEl.innerHTML = this.renderOptionList(this.sortOptions, this.sortValue);
+        this.viewEl.innerHTML = this.renderOptionList(this.viewOptions, this.viewValue);
+        this.filtersEl.innerHTML = this.filterOptions
+            .map(option => {
+            const selected = this.filters.includes(option.value);
+            return `
+          <button
+            type="button"
+            part="filter-chip"
+            data-value="${escapeHtml(option.value)}"
+            aria-pressed="${String(selected)}"
+            data-selected="${String(selected)}"
+          >
+            ${escapeHtml(option.label)}
+          </button>
+        `;
+        })
+            .join("");
+    }
+    patchChips() {
+        this.filtersEl.querySelectorAll('[part="filter-chip"]').forEach(button => {
+            const chip = button;
+            const selected = this.filters.includes(chip.dataset.value ?? "");
+            chip.setAttribute("aria-pressed", String(selected));
+            chip.dataset.selected = String(selected);
+        });
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <section part="bar" aria-label="">
+        <div part="label"></div>
+        <div part="controls">
+          <label part="field">
+            <span part="field-label">Search</span>
+            <input type="search" part="input" placeholder="Search items" />
+          </label>
+          <label part="select-field">
+            <span part="field-label">Sort</span>
+            <select part="select" data-control="sort"></select>
+          </label>
+          <label part="select-field">
+            <span part="field-label">View</span>
+            <select part="select" data-control="view"></select>
+          </label>
+        </div>
+        <div part="filters"></div>
+      </section>
+    `;
+        this.barEl = this.shadowRoot.querySelector('[part="bar"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.inputEl = this.shadowRoot.querySelector('[part="input"]');
+        this.sortEl = this.shadowRoot.querySelector('[data-control="sort"]');
+        this.viewEl = this.shadowRoot.querySelector('[data-control="view"]');
+        this.filtersEl = this.shadowRoot.querySelector('[part="filters"]');
+    }
+    setupListeners() {
+        this.inputEl.addEventListener("input", event => {
+            this.queryInternal = event.currentTarget.value;
+            this.emitValueChanged();
+        });
+        this.inputEl.addEventListener("change", () => {
+            this.setAttribute("query", this.queryInternal);
+            this.dispatchEvent(new CustomEvent("search", {
+                bubbles: true,
+                composed: true,
+                detail: { value: this.getState() },
+            }));
+        });
+        this.sortEl.addEventListener("change", event => {
+            const element = event.currentTarget;
+            this.sortValueInternal = element.value;
+            this.setAttribute("sort-value", element.value);
+            this.emitValueChanged();
+        });
+        this.viewEl.addEventListener("change", event => {
+            const element = event.currentTarget;
+            this.viewValueInternal = element.value;
+            this.setAttribute("view-value", element.value);
+            this.emitValueChanged();
+        });
+        this.filtersEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="filter-chip"]');
+            if (!button || !this.filtersEl.contains(button)) {
+                return;
+            }
+            const value = button.dataset.value ?? "";
+            if (!value) {
+                return;
+            }
+            const nextFilters = this.filters.includes(value)
+                ? this.filters.filter(entry => entry !== value)
+                : [...this.filters, value];
+            this.filtersInternal = nextFilters;
+            this.setAttribute("filters", JSON.stringify(nextFilters));
+            this.emitValueChanged();
+        });
+    }
+    update() {
+        if (!this.labelEl || !this.inputEl) {
+            return;
+        }
+        this.labelEl.textContent = this.label;
+        this.barEl.setAttribute("aria-label", this.label);
+        const active = this.shadowRoot?.activeElement;
+        if (active !== this.inputEl) {
+            this.inputEl.value = this.query;
+        }
+        if (active !== this.sortEl) {
+            this.sortEl.value = this.sortValue;
+        }
+        if (active !== this.viewEl) {
+            this.viewEl.value = this.viewValue;
+        }
+        const nextOptions = this.optionsKey();
+        if (nextOptions !== this.optionsSignature) {
+            this.optionsSignature = nextOptions;
+            this.rebuildOptionControls();
+            return;
+        }
+        this.patchChips();
+    }
+}
+export const defineBoxFilterBarElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxFilterBarElement);
+    return BoxFilterBarElement;
+};

package/dist/patterns/search/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./filter-bar.js";
+export * from "./search-results-header.js";
+export * from "./saved-view-picker.js";

package/dist/patterns/search/index.js

@@ -0,0 +1,3 @@
+export * from "./filter-bar.js";
+export * from "./search-results-header.js";
+export * from "./saved-view-picker.js";

package/dist/patterns/search/saved-view-picker.d.ts

@@ -0,0 +1,25 @@
+import { BaseElement } from "../../core/index.js";
+type SavedView = {
+    description?: string;
+    id: string;
+    label: string;
+    resultCount?: number;
+};
+export declare class BoxSavedViewPickerElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    get label(): string;
+    set label(value: string);
+    get value(): string;
+    set value(value: string);
+    get views(): SavedView[];
+    set views(value: SavedView[]);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private parseJsonAttribute;
+    private emitValueChanged;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxSavedViewPickerElement: (tagName?: string) => typeof BoxSavedViewPickerElement;
+export {};

package/dist/patterns/search/saved-view-picker.js

@@ -0,0 +1,239 @@
+import { BaseElement } from "../../core/index.js";
+import { applyRovingTabindex, handleRovingKeydown } from "../../foundations/a11y/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-saved-view-picker";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+          --_obp-surface: var(--boe-token-surface-surface, #ffffff);
+          --_obp-surface-muted: var(--boe-token-surface-surface-secondary, #fbfbfb);
+          --_obp-border: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+          --_obp-border-subtle: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 58%, transparent);
+          --_obp-text-muted: var(--boe-token-text-text-secondary, #6f6f6f);
+          --_obp-brand: var(--boe-token-surface-surface-brand, #0061d5);
+          --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+        }
+
+        [part="picker"] {
+          display: grid;
+          gap: ${boePanel.gap};
+          padding: ${boePanel.padding};
+          border: 1px solid var(--_obp-border);
+          border-radius: ${boePanel.radius};
+          background: var(--_obp-surface-muted);
+        }
+
+        [part="label"] {
+          font-size: 0.8rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--_obp-brand);
+        }
+
+        [part="views"] {
+          display: grid;
+          gap: ${boePanel.gap};
+        }
+
+        [part="view"] {
+          display: grid;
+          gap: 0.3rem;
+          width: 100%;
+          text-align: left;
+          border: 1px solid var(--_obp-border-subtle);
+          border-radius: ${boeRadius.med};
+          padding: 0.55rem 0.7rem;
+          background: var(--_obp-surface);
+          color: inherit;
+          font: inherit;
+          cursor: pointer;
+        }
+
+        ${boeNeutralInteractiveStyles('[part="view"]')}
+
+        [part="view"][data-selected="true"],
+        [part="view"][data-selected="true"]:hover:not(:disabled) {
+          border-color: color-mix(in srgb, var(--_obp-brand) 34%, transparent);
+          background: var(--_obp-brand-soft);
+        }
+
+        [part="view-label"] {
+          font-weight: 700;
+        }
+
+        [part="view-description"] {
+          color: var(--_obp-text-muted);
+          line-height: 1.45;
+        }
+
+        [part="view-count"] {
+          color: var(--_obp-text-muted);
+          font-size: 0.88rem;
+        }
+      `;
+export class BoxSavedViewPickerElement extends BaseElement {
+    static get observedAttributes() {
+        return ["label", "value", "views"];
+    }
+    valueInternal = "";
+    get label() {
+        return this.getAttribute("label") ?? "Saved Views";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get value() {
+        return this.valueInternal;
+    }
+    set value(value) {
+        this.valueInternal = value;
+        this.setAttribute("value", value);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    get views() {
+        return this.parseJsonAttribute("views", []);
+    }
+    set views(value) {
+        this.setAttribute("views", JSON.stringify(value));
+    }
+    connectedCallback() {
+        this.valueInternal = this.getAttribute("value") ?? "";
+        super.connectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            this.valueInternal = this.getAttribute("value") ?? "";
+            super.attributeChangedCallback(name, oldValue, newValue);
+        }
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    parseJsonAttribute(name, fallback) {
+        const raw = this.getAttribute(name);
+        if (!raw) {
+            return fallback;
+        }
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return fallback;
+        }
+    }
+    emitValueChanged() {
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.valueInternal },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+    }
+    update() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const host = this.shadowRoot.querySelector('[part="content-host"]');
+        if (!host) {
+            return;
+        }
+        host.innerHTML = `
+      <section part="picker" role="radiogroup" aria-label="${escapeHtml(this.label)}">
+        <div part="label">${escapeHtml(this.label)}</div>
+        <div part="views">
+          ${this.views
+            .map(view => `
+                <button
+                  type="button"
+                  part="view"
+                  role="radio"
+                  aria-checked="${String(this.value === view.id)}"
+                  data-view-id="${escapeHtml(view.id)}"
+                  data-selected="${String(this.value === view.id)}"
+                >
+                  <div part="view-label">${escapeHtml(view.label)}</div>
+                  ${view.description ? `<div part="view-description">${escapeHtml(view.description)}</div>` : ""}
+                  ${typeof view.resultCount === "number" ? `<div part="view-count">${escapeHtml(`${view.resultCount} results`)}</div>` : ""}
+                </button>
+              `)
+            .join("")}
+        </div>
+      </section>
+    `;
+        const views = Array.from(this.shadowRoot.querySelectorAll('[part="view"]'));
+        const selectedIndex = Math.max(0, views.findIndex(button => button.getAttribute("data-view-id") === this.valueInternal));
+        applyRovingTabindex(views, selectedIndex);
+        const focusView = (viewId) => {
+            queueMicrotask(() => {
+                const match = Array.from(this.shadowRoot?.querySelectorAll('[part="view"]') ?? []).find(button => button.getAttribute("data-view-id") === viewId);
+                match?.focus();
+            });
+        };
+        const selectView = (nextValue, restoreFocus = false) => {
+            if (!nextValue || nextValue === this.valueInternal) {
+                if (restoreFocus) {
+                    focusView(nextValue);
+                }
+                return;
+            }
+            this.valueInternal = nextValue;
+            this.setAttribute("value", nextValue);
+            this.emitValueChanged();
+            // `update()` rebuilds the view buttons; restore focus onto the new node.
+            if (restoreFocus) {
+                focusView(nextValue);
+            }
+        };
+        views.forEach(button => {
+            button.addEventListener("click", () => {
+                selectView(button.getAttribute("data-view-id") ?? "");
+            });
+        });
+        this.shadowRoot.querySelector('[part="views"]')?.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            // APG radiogroup: Arrow/Home/End move focus and select the newly focused view.
+            if (handleRovingKeydown(keyboardEvent, views, { orientation: "both" })) {
+                const focused = views.find(button => button.tabIndex === 0);
+                selectView(focused?.getAttribute("data-view-id") ?? "", true);
+                return;
+            }
+            if (keyboardEvent.key !== "Enter" && keyboardEvent.key !== " ") {
+                return;
+            }
+            const button = keyboardEvent.target.closest('[part="view"]');
+            if (!button) {
+                return;
+            }
+            keyboardEvent.preventDefault();
+            selectView(button.getAttribute("data-view-id") ?? "", true);
+        });
+    }
+}
+export const defineBoxSavedViewPickerElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxSavedViewPickerElement);
+    return BoxSavedViewPickerElement;
+};

package/dist/patterns/search/search-results-header.d.ts

@@ -0,0 +1,34 @@
+import { BaseElement } from "../../core/index.js";
+type SearchHeaderAction = {
+    id: string;
+    label: string;
+    tone?: string;
+};
+export declare class BoxSearchResultsHeaderElement extends BaseElement {
+    static get observedAttributes(): string[];
+    get actions(): SearchHeaderAction[];
+    set actions(value: SearchHeaderAction[]);
+    get filters(): string[];
+    set filters(value: string[]);
+    get label(): string;
+    set label(value: string);
+    get query(): string;
+    set query(value: string);
+    get resultCount(): number;
+    set resultCount(value: number);
+    get scope(): string;
+    set scope(value: string);
+    get sortLabel(): string;
+    set sortLabel(value: string);
+    get viewLabel(): string;
+    set viewLabel(value: string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private parseJsonAttribute;
+    private emitAction;
+    private emitFilterRemoved;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxSearchResultsHeaderElement: (tagName?: string) => typeof BoxSearchResultsHeaderElement;
+export {};