@bspk/ui-ngx 0.0.1

package/src/lib/table/table.scss

@@ -0,0 +1,250 @@
+[data-bspk='table'] {
+    /*! --template-columns: is set via inline style */
+
+    --white-background: var(--surface-neutral-t1-base);
+    --grey-background: var(--surface-neutral-t2-lowest);
+    --icon-size: var(--spacing-sizing-05);
+
+    display: block;
+    min-width: 100%;
+    overflow: auto hidden;
+    border-collapse: separate;
+    text-align: left;
+    border-spacing: 2rem 0.125rem;
+    color: var(--foreground-neutral-on-surface);
+    font: var(--labels-base);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--stroke-neutral-low);
+    background: var(--white-background);
+
+    /* [data-size='medium'] */
+    --min-height: var(--spacing-sizing-10);
+    --padding-y: var(--spacing-sizing-02);
+
+    &[data-size='x-large'] {
+        --min-height: var(--spacing-sizing-14);
+        --padding-y: var(--spacing-sizing-04);
+    }
+
+    &[data-size='large'] {
+        --min-height: var(--spacing-sizing-12);
+        --padding-y: var(--spacing-sizing-03);
+    }
+
+    &[data-size='small'] {
+        --min-height: var(--spacing-sizing-08);
+        --padding-y: var(--spacing-sizing-01);
+    }
+
+    [data-scroll-container] {
+        width: fit-content;
+        min-width: 100%;
+        border-radius: var(--radius-md);
+    }
+
+    table {
+        display: grid;
+        grid-template-columns: var(--template-columns);
+        border-collapse: collapse;
+        min-width: 100%;
+
+        tr,
+        tbody,
+        thead {
+            display: contents;
+        }
+
+        caption {
+            grid-column: 1 / -1;
+            background: var(--grey-background);
+            border-bottom: 1px solid var(--stroke-neutral-low);
+            display: flex;
+            flex-direction: row;
+            justify-content: start;
+            align-items: center;
+            font: var(--labels-small);
+            min-height: var(--min-height);
+            padding: calc(var(--padding-y) + 2px) var(--spacing-sizing-04);
+            overflow: hidden;
+        }
+
+        th {
+            display: flex;
+            min-height: var(--min-height);
+            overflow: hidden;
+            flex-direction: row;
+            background: var(--grey-background);
+            font: var(--labels-small);
+            border-bottom: 1px solid var(--stroke-neutral-base);
+            white-space: nowrap;
+            z-index: 1;
+            position: relative;
+
+            &:not([data-sortable]) {
+                padding: calc(var(--padding-y) + 2px) var(--spacing-sizing-04);
+                pointer-events: none;
+            }
+
+            &[data-sortable] {
+                button {
+                    display: flex;
+                    min-height: var(--min-height);
+                    border: none;
+                    overflow: hidden;
+                    flex-direction: row;
+                    padding: calc(var(--padding-y) + 2px) var(--spacing-sizing-04);
+                    background: var(--grey-background);
+                    align-items: center;
+                    justify-content: space-between;
+                    gap: var(--spacing-sizing-02);
+                    width: 100%;
+                    cursor: pointer;
+                    font: inherit;
+                    outline: none;
+                    position: relative;
+
+                    &:hover {
+                        background:
+                            linear-gradient(
+                                var(--interactions-neutral-hover-opacity),
+                                var(--interactions-neutral-hover-opacity)
+                            ),
+                            linear-gradient(var(--grey-background), var(--grey-background));
+                    }
+
+                    &:active {
+                        background:
+                            linear-gradient(
+                                var(--interactions-neutral-press-opacity),
+                                var(--interactions-neutral-press-opacity)
+                            ),
+                            linear-gradient(var(--grey-background), var(--grey-background));
+                    }
+
+                    [data-sort-icon] {
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+
+                        svg {
+                            width: var(--icon-size);
+                        }
+                    }
+
+                    &:focus-visible {
+                        position: absolute;
+                        z-index: var(--z-index-focus);
+                        inset: 0;
+                        outline: solid 2px var(--stroke-neutral-focus);
+                        isolation: isolate;
+                    }
+                }
+            }
+
+            &[data-align='right'] {
+                align-items: flex-end;
+
+                button {
+                    justify-content: flex-end;
+                }
+            }
+
+            &[data-align='center'] {
+                align-items: center;
+
+                button {
+                    justify-content: center;
+                }
+            }
+
+            &[data-align='left'] {
+                align-items: flex-start;
+
+                button {
+                    justify-content: space-between;
+                }
+            }
+        }
+
+        td {
+            display: flex;
+            min-height: var(--min-height);
+            overflow: hidden;
+            padding: calc(var(--padding-y) + 2px) var(--spacing-sizing-04);
+            flex-direction: column;
+            font: var(--body-small);
+
+            &[data-align='right'] {
+                align-items: flex-end;
+            }
+
+            &[data-align='center'] {
+                align-items: center;
+            }
+
+            &[data-align='left'] {
+                align-items: flex-start;
+            }
+
+            &[data-valign='top'] {
+                justify-content: flex-start;
+            }
+
+            &[data-valign='bottom'] {
+                justify-content: flex-end;
+            }
+
+            &[data-valign='center'] {
+                justify-content: center;
+            }
+
+            p {
+                margin: 0;
+                padding: 0;
+                font: var(--body-small);
+            }
+
+            &[data-action]:hover {
+                background:
+                    linear-gradient(
+                        var(--interactions-neutral-hover-opacity),
+                        var(--interactions-neutral-hover-opacity)
+                    ),
+                    linear-gradient(var(--white-background), var(--white-background));
+            }
+        }
+
+        tr:nth-child(even) td {
+            background: var(--grey-background);
+
+            &[data-action]:hover {
+                background:
+                    linear-gradient(
+                        var(--interactions-neutral-hover-opacity),
+                        var(--interactions-neutral-hover-opacity)
+                    ),
+                    linear-gradient(var(--grey-background), var(--grey-background));
+            }
+        }
+    }
+
+    [data-pagination] {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--spacing-sizing-03) var(--spacing-sizing-04);
+        width: 100%;
+
+        [data-pagination-label] {
+            font: var(--body-small);
+            min-width: fit-content;
+        }
+
+        [data-bspk='pagination'] {
+            flex-grow: 0;
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/table/table.spec.ts

@@ -0,0 +1,19 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { UITable } from './table';
+
+describe('UITable', () => {
+    let fixture: ComponentFixture<UITable<any>>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [UITable],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(UITable);
+        fixture.detectChanges();
+    });
+
+    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
+});

package/src/lib/table/table.ts

@@ -0,0 +1,296 @@
+import { CommonModule } from '@angular/common';
+import { Component, ViewEncapsulation, computed, input, model } from '@angular/core';
+import { sendAriaLiveMessage } from '../../utils/send-aria-live-message';
+import { IconArrowDownward, IconArrowUpward } from '../icons';
+import { UIPagination } from '../pagination';
+
+/**
+ * A component that displays data in a tabular format with support for sorting and pagination.
+ *
+ * @example
+ *     <ui-table
+ *     [data]="[{ id: 'ca', name: 'California', capital: 'Sacramento' }, { id: 'tx', name: 'Texas', capital: 'Austin' }, { id: 'fl', name: 'Florida', capital:'Tallahassee' }]"
+ *     [columns]="[{ key: 'state', label: 'State', width: '160px', sort: 'string' },{ key: 'capital', label: 'Capital', width: '140px' }]"
+ *     [pageSize]="5"
+ *     size="medium"
+ *     title="Sample State Capital Table">
+ *     </ui-table>
+ *
+ * @name Table
+ * @phase Dev
+ */
+
+export type TableSize = 'large' | 'medium' | 'small' | 'x-large';
+
+export type TableCellValue = unknown;
+
+export interface TableRow {
+    [key: string]: TableCellValue | TableCellValue[];
+    id: string;
+}
+
+export type BuiltInColumnSorters = 'boolean' | 'date' | 'number' | 'string';
+export type TableColumnSortingFn = (a: TableCellValue, b: TableCellValue) => number;
+
+export interface TableColumn<R extends TableRow> {
+    key: string;
+    label: string;
+    width?: string;
+    align?: 'center' | 'left' | 'right';
+    valign?: 'bottom' | 'center' | 'top';
+    sort?: BuiltInColumnSorters | TableColumnSortingFn;
+    formatter?: (row: R, size: TableSize) => unknown;
+}
+
+type SortOrder = 'asc' | 'desc';
+type SortState = { key: string; order: SortOrder }[];
+
+function parseDateTime(val: TableCellValue): number {
+    let dateValue: any = val;
+    if (typeof val === 'string' || typeof val === 'number') dateValue = new Date(val);
+    return dateValue instanceof Date && !isNaN(dateValue.getTime()) ? dateValue.getTime() : 0;
+}
+
+const BUILT_IN_COLUMN_SORTERS: Record<BuiltInColumnSorters, TableColumnSortingFn> = {
+    string: (a, b) => `${a}`.localeCompare(`${b}`),
+    number: (a, b) => {
+        const aNum = typeof a === 'number' ? a : Number(a) || 0;
+        const bNum = typeof b === 'number' ? b : Number(b) || 0;
+        return aNum - bNum;
+    },
+    boolean: (a, b) => (a === b ? 0 : a ? 1 : -1),
+    date: (a, b) => parseDateTime(a) - parseDateTime(b),
+};
+
+@Component({
+    selector: 'ui-table',
+    standalone: true,
+    imports: [CommonModule, UIPagination, IconArrowUpward, IconArrowDownward],
+    template: `<div [attr.data-has-pagination]="hasPagination ? true : null" [attr.data-size]="size() || 'medium'">
+        <div data-scroll-container>
+            <table
+                [attr.aria-colcount]="totalColumns"
+                [attr.aria-rowcount]="data().length"
+                [style.gridTemplateColumns]="gridTemplateColumns()">
+                @if (title()) {
+                    <caption>
+                        {{
+                            title()
+                        }}
+                    </caption>
+                }
+                <thead>
+                    <tr>
+                        @for (column of normalizedColumns; track $index) {
+                            <th
+                                [attr.data-align]="column.align || null"
+                                [attr.data-sortable]="column.sort ? true : null"
+                                scope="col"
+                                [attr.aria-sort]="ariaSortForColumn(column.key)">
+                                @if (column.sort) {
+                                    <button type="button" (click)="toggleSorting(column.key)">
+                                        {{ column.label }}
+                                        <span aria-hidden="true" data-sort-icon>
+                                            @if (sortDir()[column.key] === 'asc') {
+                                                <icon-arrow-upward />
+                                            } @else if (sortDir()[column.key] === 'desc') {
+                                                <icon-arrow-downward />
+                                            } @else {
+                                                <!-- No sort icon when not sorted -->
+                                            }
+                                        </span>
+                                    </button>
+                                } @else {
+                                    {{ column.label }}
+                                }
+                            </th>
+                        }
+                    </tr>
+                </thead>
+                <tbody>
+                    @for (row of rows(); track row.id) {
+                        <tr>
+                            @for (column of normalizedColumns; track column.key) {
+                                <td
+                                    [attr.data-align]="column.align || 'left'"
+                                    [attr.data-cell]="column.key"
+                                    [attr.data-valign]="column.valign || 'center'">
+                                    {{
+                                        formatCell(
+                                            column.formatter ? column.formatter(row, size()) : $any(row)[column.key]
+                                        )
+                                    }}
+                                </td>
+                            }
+                        </tr>
+                    }
+                </tbody>
+            </table>
+
+            @if (hasPagination) {
+                <div data-pagination role="group">
+                    <div data-pagination-label>
+                        Showing {{ startRow() }}-{{ endRow() }} of {{ data().length }} results
+                    </div>
+                    <ui-pagination
+                        [value]="pageIndex + 1"
+                        [numPages]="totalPages"
+                        (onChange)="setPageIndex($event - 1)"></ui-pagination>
+                </div>
+            }
+        </div>
+    </div>`,
+    styleUrls: ['./table.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        'data-bspk': 'table',
+    },
+})
+export class UITable<R extends TableRow> {
+    readonly rows = computed<R[]>(() => {
+        const cols = this.normalizedColumns;
+        const result = [...(this.data() || [])];
+
+        if (this.sorting().length) {
+            result.sort((a, b) => {
+                for (const { key, order } of this.sorting()) {
+                    const aValue = (a as any)[key];
+                    const bValue = (b as any)[key];
+                    const colSort = cols.find((c) => c.key === key)?.sort;
+                    if (!colSort) continue;
+                    const sortFn = typeof colSort === 'function' ? colSort : BUILT_IN_COLUMN_SORTERS[colSort];
+                    const next = sortFn(aValue, bValue);
+                    if (next !== 0) return next * (order === 'asc' ? 1 : -1);
+                }
+                return 0;
+            });
+        }
+
+        const start = this.pageIndex * this.pageSize();
+        const end = start + this.pageSize();
+        return result.slice(start, end);
+    });
+
+    readonly sortDir = computed<Record<string, 'asc' | 'desc' | null>>(() =>
+        this.sorting().reduce(
+            (acc, curr) => ({ ...acc, [curr.key]: curr.order }),
+            {} as Record<string, 'asc' | 'desc' | null>,
+        ),
+    );
+
+    readonly sorting = model<SortState>([]);
+
+    /**
+     * The data of the table.
+     *
+     * Array<TableRow>
+     */
+    readonly data = input<R[]>([]);
+    /**
+     * The column definitions of the table.
+     *
+     * @exampleType Array<TableColumn>
+     */
+    readonly columns = input<(TableColumn<R> | boolean)[]>([]);
+    /** The title of the table. */
+    readonly title = input<string | undefined>(undefined);
+    /**
+     * The size of the table.
+     *
+     * @default medium
+     */
+    readonly size = input<TableSize>('medium');
+    /**
+     * The number of rows per page.
+     *
+     * If the number of rows exceeds the page size, pagination controls will be displayed.
+     *
+     * @default 10
+     */
+    readonly pageSize = input(10);
+
+    pageIndex = 0;
+
+    get hasPagination(): boolean {
+        return (this.data()?.length || 0) > this.pageSize();
+    }
+
+    get normalizedColumns(): TableColumn<R>[] {
+        return (this.columns() || []).filter((c): c is TableColumn<R> => typeof c === 'object' && c !== null);
+    }
+
+    get totalColumns(): number {
+        return this.normalizedColumns.length;
+    }
+
+    get totalPages(): number {
+        const len = this.data()?.length || 0;
+        return Math.ceil(len / this.pageSize()) || 1;
+    }
+    toggleSorting(key: string) {
+        const exists = this.sorting().find((sort) => sort.key === key);
+        const order: SortOrder | undefined = getNextOrder(exists?.order);
+
+        // update to nextOrder
+        if (order && exists)
+            this.sorting.set(this.sorting().map((sort) => (sort.key === key ? { ...sort, order } : sort)));
+
+        // add nextOrder
+        if (order && !exists) this.sorting.set([...this.sorting(), { key, order }]);
+
+        // remove sorting
+        if (!order && exists) this.sorting.set(this.sorting().filter((sort) => sort.key !== key));
+
+        const columnLabel = this.normalizedColumns.find((col) => col.key === key)?.label || key;
+        sendAriaLiveMessage(`${order ? `Sorted ${order}ending` : 'Removed sorting'} by ${columnLabel}`);
+    }
+
+    trackRow(index: number, row: R) {
+        return row.id;
+    }
+
+    setPageIndex(idx: number) {
+        this.pageIndex = idx;
+    }
+
+    startRow(): number {
+        const total = this.data().length;
+        return total === 0 ? 0 : this.pageIndex * this.pageSize() + 1;
+    }
+
+    endRow(): number {
+        const end = this.pageIndex * this.pageSize() + this.pageSize();
+        return Math.min(end, this.data().length);
+    }
+
+    formatCell(value: unknown): string | null {
+        if (value == null) return null;
+        if (Array.isArray(value)) return value.map((v) => this.formatCell(v) ?? '').join(', ');
+        if (typeof value === 'object') {
+            // eslint-disable-next-line no-console
+            console.warn('Unexpected object value:', value);
+            return null;
+        }
+        return String(value);
+    }
+
+    gridTemplateColumns(): string {
+        return this.normalizedColumns.map((c) => `minmax(min-content,${c.width || '1fr'})`).join(' ');
+    }
+
+    ariaSortForColumn(columnKey: string) {
+        return this.sorting().find((s) => s.key === columnKey)?.order === 'asc'
+            ? 'ascending'
+            : this.sorting().find((s) => s.key === columnKey)?.order === 'desc'
+              ? 'descending'
+              : 'none';
+    }
+}
+
+function getNextOrder(currentOrder: SortOrder | undefined): SortOrder | undefined {
+    if (!currentOrder) return 'asc';
+    if (currentOrder === 'asc') return 'desc';
+    return undefined;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */