(':scope > [slot="trigger"]');
}
return item;
}
private actionLabel(item: HTMLElement, trigger: HTMLElement | null): string {
return trigger?.textContent?.trim()
|| trigger?.getAttribute('content')
|| trigger?.getAttribute('tooltip')
|| item.getAttribute('caption')
|| '';
}
private runAction(item: HTMLElement) {
if (item instanceof ZnConfirm) {
item.show();
return;
}
// ZnButton.click() skips the native click, so listeners and href would never fire
const target = item instanceof ZnButton ? item.button : item;
target?.click();
}
goToPage(page: number) {
this.page = page;
this.selectedRows = [];
this.numberOfRowsSelected = 0;
this._dataTask.run().then(r => r);
this.resizeObserver.observe(this);
}
goToFirstPage() {
this.goToPage(1);
}
goToPreviousPage() {
this.goToPage(Math.max(this.page - 1, 1));
}
goToNextPage() {
this.goToPage(Math.min(this.page + 1, this.totalPages));
}
goToLastPage() {
this.goToPage(this.totalPages);
}
updateRowsPerPage(event: Event) {
const select = event.target as ZnSelect;
this.itemsPerPage = parseInt(select.value as string);
this.page = 1; // reset the page to 1 when changing the number of rows per page
this.requestUpdate();
this._dataTask.run().then(r => r);
}
/** Selects every row on the page, or clears the selection when every row is already selected. */
selectAll() {
if (!this.isSelectable()) return;
if (this.numberOfRowsSelected === this._rows.length) {
this.clearSelectedRows();
return;
}
this.selectedRows = this._rows;
this.numberOfRowsSelected = this.selectedRows.length;
this.updateKeys();
this.requestUpdate();
}
selectRow(e: Event) {
if (!this.isSelectable()) {
return;
}
if (!(e.target && (e.target instanceof Element))) {
return;
}
const target: Element | null = e.target;
// if is a button or a link continue
if (target?.tagName === 'ZN-BUTTON' || target?.tagName === 'A' || target?.tagName === 'BUTTON') {
return;
}
// Find the parent row
let parent: Element | null = target.closest ? target.closest('tr') : target.parentElement;
while (parent && parent.tagName !== 'TR') {
parent = parent.parentElement;
}
if (parent === null) {
return;
}
const rowId = (parent as HTMLElement).dataset.rowId;
const row = this._rows.find((r: Row) => r.id === rowId);
if (!row) return;
this.toggleRowSelection(row);
}
private toggleRowSelection(row: Row) {
const alreadySelected = this.selectedRows.some((r: Row) => r.id === row.id);
if (alreadySelected) {
this.selectedRows = this.selectedRows.filter((r: Row) => r.id !== row.id);
} else {
this.selectedRows = [...(this.selectedRows as Row[]), row];
}
this.numberOfRowsSelected = this.selectedRows.length;
this.updateKeys();
this.requestUpdate();
}
clearSelectedRows() {
this.selectedRows = [];
this.numberOfRowsSelected = 0;
this.updateKeys();
this.requestUpdate();
}
updateSort(key: string) {
// Rerun the render task with the extra params
return () => {
this.sortColumn = key;
this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
if (this.localSort) {
this._rows = this.sortLocalData(this._rows as Row[]);
// Local sort never runs the data task (our URL-sync choke point), so mirror it here.
this._updateSharableUrl();
this.requestUpdate();
} else {
this._dataTask.run().then(r => r);
}
};
}
renderCell(data: Cell, row?: Row, header?: HeaderConfig): TemplateResult | ZincElement {
const fn = (header?.type ? this.getTemplate(header.type) : undefined);
if ((!data.text && !data.iconSrc) && header?.ifEmpty !== undefined) {
const header2 = {...header, type: undefined, render: undefined, renderTemplate: undefined};
return this.renderCell({...data, ...header.ifEmpty}, row, header2)
}
if (fn && row && header) {
const out = fn(data, row, header);
return typeof out === 'string' ? html`${unsafeHTML(out)}` : out;
}
if (!data || typeof data !== 'object') {
return data;
}
if (header?.cellTemplate !== undefined) {
data = {...header.cellTemplate, ...data}
}
let content: TemplateResult | ZincElement = html`${data.text}`;
if (data.style || data.color) {
const styleStr = typeof data.style === 'string' ? data.style : '';
const tokens = new Set(styleStr.split(',').filter(Boolean));
const isMono = tokens.has('mono') || tokens.has('code');
const isBorder = tokens.has('border');
const isCenter = tokens.has('center');
const isMuted = tokens.has('muted');
if (tokens.has('bold') || tokens.has('strong')) {
content = html`${content}`;
}
if (tokens.has('italic')) {
content = html`${content}`;
}
content = html`
${content}
`;
}
if (data.uri) {
content = html`
${content}`;
}
if (data.chipColor) {
content = html`
${content}`;
}
if (data.iconSrc) {
const src = data.iconSrc;
const color = data.iconColor;
const size = data.iconSize;
const tokens = (data.iconStyle ?? '').split(',').map(s => s.trim()).filter(Boolean);
content = html`
{
if (!el) return;
tokens.forEach(t => el.setAttribute(t, ''));
})}
title="${ifDefined(data.title)}"
> ${content}`;
}
if (data.hoverContent) {
const placement = data.hoverPlacement ?? 'top';
if (data.iconSrc) {
content = html`
${content}
${unsafeHTML(data.hoverContent)}
`;
} else {
content = html`
${content}
${unsafeHTML(data.hoverContent)}
`;
}
}
if (data.copyable) {
content = html`
${content}
`;
}
if (data.subText) {
content = html`
${content}
${data.subText}
`
}
return content;
}
private updateActionKeys(slotName: string) {
if (this.hasSlotController.test(slotName)) {
// we need to look into the slot controller for the keys input
const slots = this.hasSlotController.getSlots(slotName);
if (slots) {
slots.forEach((slot) => {
const input = slot.querySelector('input[name="keys"]');
if (input && input instanceof HTMLInputElement) {
input.value = this.getSelectedKeys().join(',');
}
});
}
}
}
private getTableSortIcon(key: any) {
if (this.sortColumn !== key) {
return html`
`;
}
if (this.sortDirection === 'asc') {
return html`
`;
}
return html`
`;
}
private renderCellHeader(header: HeaderConfig) {
const sortable = !Object.values(this.unsortableHeaders).includes(header.key) && !Object.values(this.hiddenHeaders).includes(header.key) && !this.unsortable && header.sortable !== false;
const lastVisibleHeaderKey = this.visibleHeaders().slice(-1)[0]?.key;
return html`
${header.label}
${sortable ? this.getTableSortIcon(header.key) : nothing}
|
`;
}
private sortState(key: string): 'ascending' | 'descending' | 'none' {
if (this.sortColumn !== key) return 'none';
return this.sortDirection === 'asc' ? 'ascending' : 'descending';
}
private handleSortKeyDown(e: KeyboardEvent, key: string) {
if (e.key !== 'Enter' && e.key !== ' ') return;
e.preventDefault();
this.updateSort(key)();
}
private renderCellBody(index: number, value: Cell, row: Row) {
const filteredHeaders = this.visibleHeaders();
const header: HeaderConfig | undefined = filteredHeaders[index];
const headerKey: string | undefined = header?.key;
return html`
${this.renderCell(value, row, header)}
| `;
}
private hasHiddenColumns(): boolean {
return this._secondaryHeaders.length > 0;
}
private renderExpanderCell(row: Row) {
const hasHidden = (this._hiddenCells.get(row.id) || []).length > 0;
if (!hasHidden) return html`
| `;
const expanded = this._expandedRows.has(row.id);
const icon = expanded ? 'chevron_down@lu' : 'chevron_right@lu';
return html`
| `;
}
private renderDetailsRow(row: Row, colSpan: number) {
const hiddenCells = this._hiddenCells.get(row.id) || [];
if (hiddenCells.length === 0) return html``;
return html`
${hiddenCells.map((cell: Cell) => {
const header = Object.values(this.headers).find((h: HeaderConfig) => h.key === cell.column);
const label = header?.label || this.humanize(cell.column);
return html`
${label}
${this.renderCell(cell, row, header)}
`;
})}
|
`;
}
private toggleRowExpansion(e: Event, row: Row) {
e.stopPropagation();
if (this._expandedRows.has(row.id)) {
this._expandedRows.delete(row.id);
} else {
this._expandedRows.add(row.id);
}
this.requestUpdate();
}
private isRowSelected(row: Row): boolean {
return this.selectedRows.some((r: Row) => r.id === row.id);
}
// Drop selections for rows no longer in the result set (filtered out, archived, paged away)
// and swap survivors for the fresh row objects so selected keys reflect current cell data.
private pruneSelectedRows() {
if (this.selectedRows.length === 0) return;
const current = new Map(this._rows.map((row: Row) => [row.id, row]));
const kept = this.selectedRows
.map((row: Row) => current.get(row.id))
.filter((row): row is Row => row !== undefined);
const changed = kept.length !== this.selectedRows.length;
this.selectedRows = kept;
this.numberOfRowsSelected = kept.length;
if (changed) this.updateKeys();
}
private isSelectable(): boolean {
return [ActionSlots.delete, ActionSlots.modify, ActionSlots.actions, ActionSlots.create]
.some(slot => this.hasSlotController.test(slot.valueOf()));
}
private renderSelectAllCheckbox() {
const allSelected = this.numberOfRowsSelected === this._rows.length;
const someSelected = this.numberOfRowsSelected > 0 && !allSelected;
return html`
| `;
}
private renderRowCheckbox(row: Row) {
return html`
| `;
}
// A click on the checkbox itself arrives twice (label, then input), so leave it to zn-change
private handleCheckboxCellClick(e: Event, row: Row) {
if ((e.target as Element).closest('zn-checkbox')) return;
this.toggleRowSelection(row);
}
private getRows(data: Response): Row[] {
// Copy rows to avoid mutating original data
const sourceRows = Array.isArray(data.rows) ? data.rows.slice() : [];
if (this.localSort && this.sortColumn) {
return this.sortLocalData(sourceRows);
}
return sourceRows;
}
private getSelectedKeys(): (string)[] {
const headerKeys = Object.keys(this.headers);
const keyIndex = headerKeys.indexOf(this.key);
return this.selectedRows
.map((row: Row) => {
if (this.key === 'id' || keyIndex === -1) {
return row.id;
}
const cell = row.cells?.[keyIndex] as Cell;
if (cell.sortValue) {
return cell.sortValue;
}
return cell.text as string;
})
.filter((v): v is string => v !== undefined && v !== null);
}
private updateKeys() {
this.updateModifyKeys();
this.updateDeleteKeys();
this.updateActionKeys(ActionSlots.actions.valueOf());
}
private updateModifyKeys() {
this.updateActionKeys('modify-action');
}
private updateDeleteKeys() {
this.updateActionKeys('delete-action');
}
private extractComparable(cell: Cell): string {
const sortValue = cell.sortValue;
if (sortValue) {
return sortValue;
}
return cell.text;
}
private sortData(a: Cell, b: Cell) {
const aCompare = this.extractComparable(a);
const bCompare = this.extractComparable(b);
const aNormal = aCompare.toLowerCase();
const bNormal = bCompare.toLowerCase();
if (this.sortDirection === 'asc') {
return aNormal > bNormal ? 1 : aNormal < bNormal ? -1 : 0;
}
return aNormal < bNormal ? 1 : aNormal > bNormal ? -1 : 0;
}
private sortLocalData(rows: Row[]): Row[] {
if (!this.sortColumn) return rows;
const headerKeys = Object.keys(this.headers);
const sortIndex = headerKeys.indexOf(this.sortColumn);
const getCellForSort = (row: Row): Cell => {
const byHeading = row.cells.find((cell: Cell) => cell.column === this.sortColumn);
if (byHeading !== undefined) return byHeading as unknown as Cell;
return row.cells[sortIndex];
};
return rows.slice().sort((rowA: Row, rowB: Row) => {
const aVal = getCellForSort(rowA);
const bVal = getCellForSort(rowB);
return this.sortData(aVal, bVal);
});
}
private loadingTable() {
return html`
`;
}
private renderActions(row: Row) {
if (!row.actions || row.actions.length === 0) {
if (this.rowHasActions) {
return html`
| `;
}
return nothing;
}
return html`
${row.actions?.map((action: ActionConfig) => {
if (action.confirmContent) {
const triggerId = 'confirm-action-' + Math.random().toString(36).substring(2, 15);
return html`
${(action.icon || action.iconSrc) ? html`
` : html``}
${action.text}
`;
} else {
return html`
${(action.icon || action.iconSrc) ? html`
` : html``}
${action.text}
`;
}
})}
| `;
}
}