@codeenvision/ui-webcomponents 1.0.0

package/dist/components/ListBox/ListBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../components/ListBox/ListBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEtE,qBAAa,OAAQ,SAAQ,aAAa;IACxC,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,KAAK,CAAgB;IAC7B,OAAO,CAAC,cAAc,CAAqB;IAC3C,OAAO,CAAC,MAAM,CAAC,CAAiB;IAChC,OAAO,CAAC,OAAO,CAAwB;IACvC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,WAAW,CAAC,CAAmB;gBAE3B,OAAO,EAAE,cAAc;IAqBnC,IAAI,IAAI,IAAI;IASZ,OAAO,IAAI,IAAI;IAOf,OAAO,CAAC,YAAY;IAoCpB,OAAO,CAAC,UAAU;IA4ElB,OAAO,CAAC,iBAAiB;IAmCzB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,aAAa,CAmBnB;IAEF,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,qBAAqB;IAS7B,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,WAAW;CAOpB"}

package/dist/components/ListBox/ListBox.js

@@ -0,0 +1,290 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+export class ListBox extends BaseComponent {
+    options;
+    items;
+    selectedValues = new Set();
+    listEl;
+    itemEls = [];
+    activeIndex = 0;
+    searchInput;
+    constructor(options) {
+        super(options.selector);
+        if (!options.items || options.items.length === 0) {
+            throw new Error("ListBox requires at least one item");
+        }
+        this.options = {
+            selectionMode: "single",
+            ariaLabel: "Listbox",
+            autoFocus: false,
+            searchable: true,
+            ...options,
+        };
+        this.items = this.options.items.map((item, index) => ({
+            ...item,
+            id: item.id ?? `ce-listbox-item-${index}`,
+        }));
+    }
+    init() {
+        if (this.options.hydrate && this.tryHydrate()) {
+            return;
+        }
+        this.destroy();
+        this.selectedValues = new Set(this.options.selectedValues ?? []);
+        this.buildListBox();
+    }
+    destroy() {
+        this.listEl?.removeEventListener("keydown", this.handleKeydown);
+        this.itemEls = [];
+        this.listEl = undefined;
+        this.el.innerHTML = "";
+    }
+    buildListBox() {
+        this.el.classList.add("ce-listbox");
+        if (this.options.searchable) {
+            const search = document.createElement("input");
+            search.type = "text";
+            search.className = "ce-listbox__search";
+            search.placeholder = "Search...";
+            search.addEventListener("input", () => this.applyFilter(search.value));
+            this.el.appendChild(search);
+            this.searchInput = search;
+        }
+        const list = document.createElement("div");
+        list.className = "ce-listbox__viewport";
+        list.setAttribute("role", "listbox");
+        list.setAttribute("aria-label", this.options.ariaLabel ?? "Listbox");
+        list.tabIndex = 0;
+        if (this.options.selectionMode === "multiple") {
+            list.setAttribute("aria-multiselectable", "true");
+        }
+        this.itemEls = this.items.map((item, index) => this.createItemElement(item, index));
+        this.itemEls.forEach((itemEl) => list.appendChild(itemEl));
+        list.addEventListener("keydown", this.handleKeydown);
+        this.el.appendChild(list);
+        this.listEl = list;
+        this.activeIndex = this.findFirstEnabledIndex(0);
+        this.updateActiveDescendant();
+        this.syncSelectionState();
+        if (this.options.autoFocus) {
+            requestAnimationFrame(() => list.focus());
+        }
+    }
+    tryHydrate() {
+        if (!this.el.classList.contains("ce-listbox")) {
+            return false;
+        }
+        const viewport = this.el.querySelector(".ce-listbox__viewport");
+        if (!viewport) {
+            return false;
+        }
+        this.selectedValues = new Set(this.options.selectedValues ?? []);
+        this.items = this.items.map((item, index) => ({
+            ...item,
+            id: item.id ?? `ce-listbox-item-${index}`,
+        }));
+        const searchInput = this.el.querySelector(".ce-listbox__search");
+        if (this.options.searchable) {
+            if (!searchInput) {
+                const search = document.createElement("input");
+                search.type = "text";
+                search.className = "ce-listbox__search";
+                search.placeholder = "Search...";
+                search.addEventListener("input", () => this.applyFilter(search.value));
+                this.el.prepend(search);
+                this.searchInput = search;
+            }
+            else {
+                searchInput.addEventListener("input", () => this.applyFilter(searchInput.value));
+                this.searchInput = searchInput;
+            }
+        }
+        else if (searchInput) {
+            searchInput.remove();
+        }
+        viewport.setAttribute("role", "listbox");
+        viewport.setAttribute("aria-label", this.options.ariaLabel ?? "Listbox");
+        viewport.tabIndex = 0;
+        if (this.options.selectionMode === "multiple") {
+            viewport.setAttribute("aria-multiselectable", "true");
+        }
+        else {
+            viewport.removeAttribute("aria-multiselectable");
+        }
+        this.itemEls = Array.from(viewport.querySelectorAll(".ce-listbox__item"));
+        if (!this.itemEls.length) {
+            return false;
+        }
+        this.itemEls.forEach((itemEl, index) => {
+            const item = this.items[index];
+            itemEl.dataset.index = String(index);
+            if (item?.value) {
+                itemEl.dataset.value = item.value;
+            }
+            itemEl.setAttribute("role", "option");
+            itemEl.tabIndex = -1;
+            if (item?.disabled) {
+                itemEl.classList.add("is-disabled");
+                itemEl.setAttribute("aria-disabled", "true");
+            }
+            else {
+                itemEl.classList.remove("is-disabled");
+                itemEl.removeAttribute("aria-disabled");
+                itemEl.addEventListener("click", () => this.handleSelection(index));
+            }
+            itemEl.addEventListener("pointerdown", (event) => event.preventDefault());
+        });
+        viewport.addEventListener("keydown", this.handleKeydown);
+        this.listEl = viewport;
+        this.activeIndex = this.findFirstEnabledIndex(0);
+        this.updateActiveDescendant();
+        this.syncSelectionState();
+        if (this.options.autoFocus) {
+            requestAnimationFrame(() => viewport.focus());
+        }
+        return true;
+    }
+    createItemElement(item, index) {
+        const option = document.createElement("div");
+        option.className = "ce-listbox__item";
+        option.id = item.id ?? `ce-listbox-item-${index}`;
+        option.dataset.index = String(index);
+        option.dataset.value = item.value;
+        option.setAttribute("role", "option");
+        option.tabIndex = -1;
+        const label = document.createElement("span");
+        label.className = "ce-listbox__item-label";
+        label.textContent = item.label;
+        option.appendChild(label);
+        if (item.description) {
+            const description = document.createElement("span");
+            description.className = "ce-listbox__item-description";
+            description.textContent = item.description;
+            option.appendChild(description);
+        }
+        if (item.disabled) {
+            option.classList.add("is-disabled");
+            option.setAttribute("aria-disabled", "true");
+        }
+        else {
+            option.addEventListener("click", () => this.handleSelection(index));
+        }
+        option.addEventListener("pointerdown", (event) => {
+            event.preventDefault();
+        });
+        return option;
+    }
+    handleSelection(index) {
+        const item = this.items[index];
+        if (!item || item.disabled)
+            return;
+        if (this.options.selectionMode === "single") {
+            this.selectedValues.clear();
+            this.selectedValues.add(item.value);
+        }
+        else {
+            if (this.selectedValues.has(item.value)) {
+                this.selectedValues.delete(item.value);
+            }
+            else {
+                this.selectedValues.add(item.value);
+            }
+        }
+        this.syncSelectionState();
+        this.options.onChange?.({
+            values: Array.from(this.selectedValues),
+            lastValue: item.value,
+        });
+    }
+    handleKeydown = (event) => {
+        if (!this.listEl)
+            return;
+        const key = event.key;
+        if (key === "ArrowDown") {
+            event.preventDefault();
+            this.moveActive(1);
+        }
+        else if (key === "ArrowUp") {
+            event.preventDefault();
+            this.moveActive(-1);
+        }
+        else if (key === "Home") {
+            event.preventDefault();
+            this.setActiveIndex(this.findFirstEnabledIndex(0));
+        }
+        else if (key === "End") {
+            event.preventDefault();
+            this.setActiveIndex(this.findLastEnabledIndex());
+        }
+        else if (key === " " || key === "Enter") {
+            event.preventDefault();
+            this.handleSelection(this.activeIndex);
+        }
+    };
+    moveActive(delta) {
+        const nextIndex = this.findNextEnabledIndex(this.activeIndex, delta);
+        this.setActiveIndex(nextIndex);
+    }
+    setActiveIndex(index) {
+        if (index === -1)
+            return;
+        this.activeIndex = index;
+        this.updateActiveDescendant();
+        this.itemEls[index]?.scrollIntoView({ block: "nearest" });
+    }
+    updateActiveDescendant() {
+        if (!this.listEl)
+            return;
+        const activeItem = this.itemEls[this.activeIndex];
+        if (activeItem) {
+            this.listEl.setAttribute("aria-activedescendant", activeItem.id);
+        }
+    }
+    syncSelectionState() {
+        this.itemEls.forEach((option, index) => {
+            const item = this.items[index];
+            const isSelected = this.selectedValues.has(item.value);
+            option.classList.toggle("is-selected", isSelected);
+            option.setAttribute("aria-selected", String(isSelected));
+        });
+    }
+    findFirstEnabledIndex(start) {
+        for (let index = start; index < this.items.length; index += 1) {
+            if (!this.items[index].disabled) {
+                return index;
+            }
+        }
+        return -1;
+    }
+    findLastEnabledIndex() {
+        for (let index = this.items.length - 1; index >= 0; index -= 1) {
+            if (!this.items[index].disabled) {
+                return index;
+            }
+        }
+        return -1;
+    }
+    findNextEnabledIndex(current, delta) {
+        let index = current;
+        do {
+            index = index + delta;
+            if (index < 0) {
+                index = this.items.length - 1;
+            }
+            else if (index >= this.items.length) {
+                index = 0;
+            }
+            if (!this.items[index].disabled) {
+                return index;
+            }
+        } while (index !== current);
+        return current;
+    }
+    applyFilter(term) {
+        const lower = term.toLowerCase();
+        this.itemEls.forEach((el, idx) => {
+            const match = this.items[idx].label.toLowerCase().includes(lower);
+            el.style.display = match ? "" : "none";
+        });
+    }
+}
+//# sourceMappingURL=ListBox.js.map

package/dist/components/ListBox/ListBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox.js","sourceRoot":"","sources":["../../../components/ListBox/ListBox.ts"],"names":[],"mappings":"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"}

package/dist/components/ListBox/ListBox.types.d.ts

@@ -0,0 +1,24 @@
+export type ListBoxSelectionMode = "single" | "multiple";
+export interface ListBoxItem {
+    id?: string;
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface ListBoxChangePayload {
+    values: string[];
+    lastValue: string;
+}
+export interface ListBoxOptions {
+    selector: string;
+    items: ListBoxItem[];
+    selectionMode?: ListBoxSelectionMode;
+    selectedValues?: string[];
+    ariaLabel?: string;
+    autoFocus?: boolean;
+    onChange?: (payload: ListBoxChangePayload) => void;
+    searchable?: boolean;
+    hydrate?: boolean;
+}
+//# sourceMappingURL=ListBox.types.d.ts.map

package/dist/components/ListBox/ListBox.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox.types.d.ts","sourceRoot":"","sources":["../../../components/ListBox/ListBox.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/ListBox/ListBox.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ListBox.types.js.map

package/dist/components/ListBox/ListBox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox.types.js","sourceRoot":"","sources":["../../../components/ListBox/ListBox.types.ts"],"names":[],"mappings":""}

package/dist/components/ListView/ListView.d.ts

@@ -0,0 +1,26 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+import type { ListViewOptions } from "./ListView.types.js";
+export declare class ListView extends BaseComponent {
+    private options;
+    private items;
+    private selectedId?;
+    private viewportEl?;
+    private virtualContainer?;
+    private listEl?;
+    private searchInput?;
+    private filtered;
+    private readonly handleScroll;
+    constructor(options: ListViewOptions);
+    init(): void;
+    private tryHydrate;
+    destroy(): void;
+    private buildStaticList;
+    private addSearch;
+    private buildVirtualizedList;
+    private renderVirtualRange;
+    private applyFilter;
+    private createRow;
+    private handleSelection;
+    private updateSelectionUi;
+}
+//# sourceMappingURL=ListView.d.ts.map

package/dist/components/ListView/ListView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../components/ListView/ListView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,KAAK,EAAgB,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEzE,qBAAa,QAAS,SAAQ,aAAa;IACzC,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,KAAK,CAAiB;IAC9B,OAAO,CAAC,UAAU,CAAC,CAAS;IAC5B,OAAO,CAAC,UAAU,CAAC,CAAiB;IACpC,OAAO,CAAC,gBAAgB,CAAC,CAAiB;IAC1C,OAAO,CAAC,MAAM,CAAC,CAAiB;IAChC,OAAO,CAAC,WAAW,CAAC,CAAmB;IACvC,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAmC;gBAEpD,OAAO,EAAE,eAAe;IAyBpC,IAAI,IAAI,IAAI;IAaZ,OAAO,CAAC,UAAU;IAuDlB,OAAO,IAAI,IAAI;IAQf,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,oBAAoB;IAiB5B,OAAO,CAAC,kBAAkB;IA8B1B,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,SAAS;IA2FjB,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,iBAAiB;CAW1B"}

package/dist/components/ListView/ListView.js

@@ -0,0 +1,284 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+export class ListView extends BaseComponent {
+    options;
+    items;
+    selectedId;
+    viewportEl;
+    virtualContainer;
+    listEl;
+    searchInput;
+    filtered = [];
+    handleScroll = () => this.renderVirtualRange();
+    constructor(options) {
+        super(options.selector);
+        if (!options.items || options.items.length === 0) {
+            throw new Error("ListView requires at least one item");
+        }
+        this.options = {
+            selectionMode: "none",
+            virtualized: false,
+            viewportHeight: 320,
+            itemHeight: 72,
+            searchable: true,
+            ...options,
+        };
+        this.items = this.options.items.map((item, index) => ({
+            ...item,
+            id: item.id ?? `ce-listview-item-${index}`,
+        }));
+        this.selectedId = this.options.selectedId;
+        this.filtered = [...this.items];
+    }
+    init() {
+        if (this.options.hydrate && this.tryHydrate()) {
+            return;
+        }
+        this.destroy();
+        this.el.classList.add("ce-listview");
+        this.el.classList.toggle("ce-listview--virtualized", Boolean(this.options.virtualized));
+        if (this.options.searchable) {
+            this.addSearch();
+        }
+        this.options.virtualized ? this.buildVirtualizedList() : this.buildStaticList();
+    }
+    tryHydrate() {
+        if (!this.el.classList.contains("ce-listview")) {
+            return false;
+        }
+        this.el.classList.toggle("ce-listview--virtualized", Boolean(this.options.virtualized));
+        const searchInput = this.el.querySelector(".ce-listview__search");
+        if (this.options.searchable) {
+            if (!searchInput) {
+                this.addSearch();
+            }
+            else {
+                searchInput.addEventListener("input", () => this.applyFilter(searchInput.value));
+                this.searchInput = searchInput;
+            }
+        }
+        else if (searchInput) {
+            searchInput.remove();
+        }
+        const virtualized = Boolean(this.options.virtualized);
+        if (virtualized) {
+            const viewport = this.el.querySelector(".ce-listview__viewport");
+            const virtual = this.el.querySelector(".ce-listview__virtual");
+            if (!viewport || !virtual) {
+                return false;
+            }
+            this.viewportEl = viewport;
+            this.virtualContainer = virtual;
+            this.viewportEl.style.maxHeight = `${this.options.viewportHeight ?? 320}px`;
+            this.viewportEl.addEventListener("scroll", this.handleScroll);
+            this.renderVirtualRange();
+            return true;
+        }
+        const list = this.el.querySelector(".ce-listview__stack");
+        if (!list) {
+            return false;
+        }
+        list.setAttribute("role", "list");
+        this.listEl = list;
+        this.filtered = [...this.items];
+        list.querySelectorAll(".ce-listview__item").forEach((row) => {
+            row.type = "button";
+            row.setAttribute("role", "listitem");
+            row.addEventListener("click", () => {
+                const id = row.dataset.id;
+                const item = this.items.find((entry) => entry.id === id);
+                if (item) {
+                    this.handleSelection(item);
+                }
+            });
+        });
+        this.updateSelectionUi();
+        return true;
+    }
+    destroy() {
+        this.viewportEl?.removeEventListener("scroll", this.handleScroll);
+        this.viewportEl = undefined;
+        this.virtualContainer = undefined;
+        this.listEl = undefined;
+        this.el.innerHTML = "";
+    }
+    buildStaticList() {
+        const stack = document.createElement("div");
+        stack.className = "ce-listview__stack";
+        stack.setAttribute("role", "list");
+        this.filtered.forEach((item, index) => stack.appendChild(this.createRow(item, index)));
+        this.el.appendChild(stack);
+        this.listEl = stack;
+    }
+    addSearch() {
+        const search = document.createElement("input");
+        search.type = "text";
+        search.className = "ce-listview__search";
+        search.placeholder = "Search...";
+        search.addEventListener("input", () => this.applyFilter(search.value));
+        this.el.appendChild(search);
+        this.searchInput = search;
+    }
+    buildVirtualizedList() {
+        const viewport = document.createElement("div");
+        viewport.className = "ce-listview__viewport";
+        viewport.style.maxHeight = `${this.options.viewportHeight}px`;
+        viewport.addEventListener("scroll", this.handleScroll);
+        const virtual = document.createElement("div");
+        virtual.className = "ce-listview__virtual";
+        virtual.setAttribute("role", "list");
+        viewport.appendChild(virtual);
+        this.el.appendChild(viewport);
+        this.viewportEl = viewport;
+        this.virtualContainer = virtual;
+        this.renderVirtualRange();
+    }
+    renderVirtualRange() {
+        if (!this.viewportEl || !this.virtualContainer)
+            return;
+        const itemHeight = this.options.itemHeight ?? 72;
+        const viewportHeight = this.options.viewportHeight ?? 320;
+        const scrollTop = this.viewportEl.scrollTop;
+        const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - 2);
+        const visibleCount = Math.ceil(viewportHeight / itemHeight) + 4;
+        const endIndex = Math.min(this.filtered.length, startIndex + visibleCount);
+        const fragment = document.createDocumentFragment();
+        const topSpacer = document.createElement("div");
+        topSpacer.className = "ce-listview__spacer";
+        topSpacer.style.height = `${startIndex * itemHeight}px`;
+        topSpacer.setAttribute("aria-hidden", "true");
+        fragment.appendChild(topSpacer);
+        for (let index = startIndex; index < endIndex; index += 1) {
+            fragment.appendChild(this.createRow(this.filtered[index], index));
+        }
+        const bottomSpacer = document.createElement("div");
+        bottomSpacer.className = "ce-listview__spacer";
+        bottomSpacer.style.height = `${Math.max(0, this.filtered.length - endIndex) * itemHeight}px`;
+        bottomSpacer.setAttribute("aria-hidden", "true");
+        fragment.appendChild(bottomSpacer);
+        this.virtualContainer.replaceChildren(fragment);
+    }
+    applyFilter(term) {
+        const lower = term.toLowerCase();
+        this.filtered = this.items.filter((item) => {
+            return (item.title.toLowerCase().includes(lower) ||
+                (item.subtitle?.toLowerCase().includes(lower) ?? false) ||
+                (item.description?.toLowerCase().includes(lower) ?? false));
+        });
+        if (this.options.virtualized) {
+            this.renderVirtualRange();
+        }
+        else if (this.listEl) {
+            this.listEl.innerHTML = "";
+            this.filtered.forEach((item, idx) => this.listEl?.appendChild(this.createRow(item, idx)));
+        }
+    }
+    createRow(item, index) {
+        const row = document.createElement("button");
+        row.type = "button";
+        row.className = "ce-listview__item";
+        row.dataset.id = item.id ?? `ce-listview-item-${index}`;
+        row.dataset.index = String(index);
+        row.disabled = Boolean(item.disabled);
+        row.setAttribute("role", "listitem");
+        if (this.options.selectionMode === "single") {
+            row.setAttribute("aria-selected", String(this.selectedId === item.id));
+        }
+        if (item.disabled) {
+            row.classList.add("is-disabled");
+            row.setAttribute("aria-disabled", "true");
+        }
+        else {
+            row.addEventListener("click", () => this.handleSelection(item));
+        }
+        if (this.selectedId === item.id) {
+            row.classList.add("is-selected");
+        }
+        if (item.icon) {
+            const icon = document.createElement("span");
+            icon.className = "ce-listview__icon";
+            icon.textContent = item.icon;
+            row.appendChild(icon);
+        }
+        const content = document.createElement("div");
+        content.className = "ce-listview__content";
+        const title = document.createElement("div");
+        title.className = "ce-listview__title";
+        title.textContent = item.title;
+        content.appendChild(title);
+        if (item.subtitle) {
+            const subtitle = document.createElement("div");
+            subtitle.className = "ce-listview__description";
+            subtitle.textContent = item.subtitle;
+            content.appendChild(subtitle);
+        }
+        if (item.description) {
+            const body = document.createElement("div");
+            body.className = "ce-listview__body";
+            body.textContent = item.description;
+            content.appendChild(body);
+        }
+        row.appendChild(content);
+        if (item.badge || item.meta) {
+            const meta = document.createElement("div");
+            meta.className = "ce-listview__meta";
+            if (item.badge) {
+                const badge = document.createElement("span");
+                badge.className = "ce-listview__badge";
+                badge.textContent = item.badge;
+                meta.appendChild(badge);
+            }
+            if (item.meta) {
+                const metaText = document.createElement("span");
+                metaText.textContent = item.meta;
+                meta.appendChild(metaText);
+            }
+            row.appendChild(meta);
+        }
+        if (item.actions && item.actions.length > 0) {
+            const actions = document.createElement("div");
+            actions.className = "ce-listview__actions";
+            item.actions.forEach((action) => {
+                const actionBtn = document.createElement("button");
+                actionBtn.type = "button";
+                actionBtn.textContent = action.label;
+                actionBtn.className = "ce-listview__action";
+                actionBtn.addEventListener("click", (event) => {
+                    event.stopPropagation();
+                    action.onClick?.();
+                });
+                actions.appendChild(actionBtn);
+            });
+            row.appendChild(actions);
+        }
+        return row;
+    }
+    handleSelection(item) {
+        if (item.disabled) {
+            return;
+        }
+        if (this.options.selectionMode === "none") {
+            this.options.onSelect?.(item);
+            return;
+        }
+        if (this.selectedId === item.id) {
+            this.selectedId = undefined;
+            this.updateSelectionUi();
+            this.options.onSelect?.(null);
+            return;
+        }
+        this.selectedId = item.id;
+        this.updateSelectionUi();
+        this.options.onSelect?.(item);
+    }
+    updateSelectionUi() {
+        const rows = this.el.querySelectorAll(".ce-listview__item");
+        rows.forEach((row) => {
+            const isActive = row.dataset.id === this.selectedId;
+            row.classList.toggle("is-selected", isActive);
+            if (this.options.selectionMode === "single") {
+                row.setAttribute("aria-selected", String(isActive));
+            }
+        });
+    }
+}
+//# sourceMappingURL=ListView.js.map