@bspk/ui-ngx 0.0.1

package/src/lib/tab-list/tab-list.ts

@@ -0,0 +1,271 @@
+import {
+    Component,
+    EventEmitter,
+    Output,
+    ViewEncapsulation,
+    input,
+    computed,
+    effect,
+    signal,
+    inject,
+    ElementRef,
+} from '@angular/core';
+import { BspkIcon } from '../../types/bspk-icon';
+import { keydownHandler } from '../../utils/keydown-handler';
+import { randomString } from '../../utils/random';
+import { UIBadge } from '../badge';
+import { UIIcon } from '../icon';
+import { UITooltipDirective } from '../tooltip/tooltip.directive';
+
+export type TabSize = 'large' | 'medium' | 'small';
+
+export interface TabOption {
+    /**
+     * The label of the tab. This is the text that will be displayed on the tab.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The value of the tab sent to onChange when selected.
+     *
+     * If not provided, the label will be used as the value.
+     */
+    value: string;
+    /**
+     * The icon to display on the left side of the tab.
+     *
+     * @type BspkIcon
+     */
+    icon?: BspkIcon;
+    /**
+     * The icon to display on the left side of the tab when the tab is currently selected.
+     *
+     * @type BspkIcon
+     */
+    iconSelected?: BspkIcon;
+    /** The badge count to display on the tab */
+    badge?: number;
+    /** Optional id. If not provided, one is generated. */
+    id?: string;
+}
+
+// Map Tab size to Badge size
+const TAB_BADGE_SIZES: Record<TabSize, 'small' | 'x-small'> = {
+    large: 'small',
+    medium: 'x-small',
+    small: 'x-small',
+};
+
+@Component({
+    template: '',
+})
+export class UITabListUtility {
+    /** The function to call when the tab is clicked. */
+    @Output() valueChange = new EventEmitter<string>();
+
+    /** The tabs to display. If less than 2 items are provided, the component will not render. */
+    readonly options = input<TabOption[]>([]);
+
+    /** The value of the selected tab. */
+    readonly value = input<string | undefined>(undefined);
+
+    /** The size of the tabs. @default medium */
+    readonly size = input<TabSize>('medium');
+
+    /** Determines how the tab options use horizontal space. @default hug */
+    readonly width = input<'fill' | 'hug'>('hug');
+
+    /** The label for the tab utility, used for accessibility. */
+    readonly label = input.required<string>();
+
+    /** The id of the tab utility, used for accessibility. */
+    readonly id = input<string | undefined>(undefined);
+
+    /**
+     * Determines if the labels of the options should be displayed. If icons are not provided for every option this is
+     * ignored and labels are shown.
+     *
+     * @default false
+     */
+    readonly iconsOnly = input<boolean>(false);
+
+    // Internals
+    readonly componentId = computed(() => this.id() || `tab-list-${randomString(8)}`);
+
+    readonly optionsWithIds = computed(() => {
+        const prefix = this.componentId();
+        return (this.options() || []).map((item, index) => ({
+            ...item,
+            id: item.id ? String(item.id) : `${prefix}-item-${index}`,
+        }));
+    });
+
+    readonly selectedValue = computed(() => {
+        const opts = this.optionsWithIds();
+        const v = this.value();
+        const found = opts.find((o) => o.value === v);
+        return found ? found.value : opts[0]?.value;
+    });
+
+    readonly activeId = signal<string | undefined>(undefined);
+
+    readonly focusableId = computed(() => {
+        const opts = this.optionsWithIds();
+        const active = this.activeId();
+        if (active) return active;
+        const selected = opts.find((o) => o.value === this.selectedValue());
+        return selected ? selected.id : opts[0]?.id;
+    });
+
+    readonly shouldHideLabels = computed(() => {
+        const iconsOnly = this.iconsOnly() === true;
+        const opts = this.optionsWithIds();
+        return iconsOnly && opts.every((item) => !!item.icon && !!item.label);
+    });
+
+    host = inject<ElementRef<HTMLElement>>(ElementRef);
+
+    constructor() {
+        effect(() => {
+            // Ensure activeId tracks selected when value changes
+            const opts = this.optionsWithIds();
+            const selected = opts.find((o) => o.value === this.selectedValue());
+            this.activeId.set(selected?.id);
+        });
+    }
+
+    badgeSizeFor(size: TabSize): 'small' | 'x-small' {
+        return TAB_BADGE_SIZES[size];
+    }
+
+    currentIcon(item: TabOption & { id: string }): BspkIcon | undefined {
+        const isSelected = item.value === this.selectedValue();
+        return isSelected ? item.iconSelected || item.icon : item.icon;
+    }
+
+    focusActive() {
+        const id = this.activeId();
+        if (!id || !this.host) return;
+        const el = this.host.nativeElement.querySelector<HTMLElement>(`[id="${id}"]`);
+        el?.focus();
+    }
+
+    onItemClick(item: TabOption & { id: string }) {
+        if (item.disabled) return;
+        this.activeId.set(item.id);
+        if (!item.disabled) this.valueChange.emit(item.value);
+    }
+
+    handleKeyDownEvent(event: KeyboardEvent) {
+        const opts = this.optionsWithIds().filter((o) => !o.disabled);
+        const currentId = this.activeId() || this.focusableId();
+        const idx = opts.findIndex((o) => o.id === currentId);
+
+        keydownHandler(
+            {
+                ArrowRight: () => {
+                    const next = idx >= 0 ? opts[(idx + 1) % opts.length] : opts[0];
+                    this.activeId.set(next?.id);
+                },
+                ArrowLeft: () => {
+                    const prev = idx > 0 ? opts[(idx - 1 + opts.length) % opts.length] : opts[opts.length - 1];
+                    this.activeId.set(prev?.id);
+                },
+                Enter: () => {
+                    const active = this.optionsWithIds().find((o) => o.id === this.activeId());
+                    if (active && !active.disabled) this.valueChange.emit(active.value);
+                },
+                Space: () => {
+                    const active = this.optionsWithIds().find((o) => o.id === this.activeId());
+                    if (active && !active.disabled) this.valueChange.emit(active.value);
+                },
+            },
+            {
+                preventDefault: true,
+            },
+        )(event);
+    }
+}
+
+/**
+ * Navigation tool that organizes content across different screens and views.
+ *
+ * See TabGroup or SegmentedControl for examples.
+ *
+ * @example
+ *     <!-- Angular example -->
+ *     <ui-tab-list
+ *     [label]="'Example Tabs'"
+ *     [options]="[
+ *     { value: '1', label: 'Option 1' },
+ *     { value: '2', label: 'Option 2' },
+ *     { value: '3', label: 'Option 3' },
+ *     ]"
+ *     [value]="selected"
+ *     (valueChange)="selected = $event">
+ *     </ui-tab-list>
+ *
+ * @name TabList
+ * @phase Utility
+ */
+@Component({
+    // eslint-disable-next-line @angular-eslint/component-selector
+    selector: 'ul[ui-tab-list]',
+    standalone: true,
+    imports: [UIBadge, UIIcon, UITooltipDirective],
+    template: `@if (optionsWithIds().length > 1) {
+        @for (item of optionsWithIds(); track item.id) {
+            <li
+                [ui-tooltip]="shouldHideLabels() ? { label: item.label, placement: 'top' } : undefined"
+                [attr.aria-controls]="componentId()"
+                [attr.aria-disabled]="item.disabled ? true : null"
+                [attr.aria-selected]="item.value === selectedValue() ? true : null"
+                [attr.data-active]="activeId() === item.id ? true : null"
+                [attr.data-value]="item.value"
+                [attr.id]="item.id"
+                (click)="onItemClick(item)"
+                role="tab"
+                (keydown)="(null)"
+                [tabindex]="focusableId() === item.id ? 0 : -1">
+                @if (currentIcon(item)) {
+                    <span aria-hidden="true" data-icon>
+                        <ui-icon [icon]="currentIcon(item)!"></ui-icon>
+                    </span>
+                }
+                @if (!shouldHideLabels()) {
+                    <span data-label>{{ item.label }}</span>
+                }
+                @if (item.badge && !item.disabled) {
+                    <ui-badge [count]="item.badge" [size]="badgeSizeFor(size())"></ui-badge>
+                }
+            </li>
+        }
+    }`,
+    styleUrl: './tab-list.scss',
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        '[attr.data-bspk]': 'component()',
+        'data-bspk-utility': 'tab-list',
+        '[attr.aria-label]': 'label()',
+        '[attr.data-size]': 'size()',
+        '[attr.data-width]': 'width()',
+        '[attr.id]': 'componentId()',
+        tabindex: '-1',
+        role: 'tablist',
+        '(focusin.capture)': 'focusActive()',
+        '(keydown)': 'handleKeyDownEvent($event)',
+    },
+})
+export class UITabList extends UITabListUtility {
+    readonly component = input<string>('', {
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        alias: 'data-bspk',
+    });
+}

package/src/lib/table/example.ts

@@ -0,0 +1,387 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { TableColumn, TableRow, UITable } from './table';
+
+@Component({
+    selector: 'ui-table-example',
+    standalone: true,
+    imports: [CommonModule, UITable],
+    template: `
+        <h2>Table</h2>
+
+        <p>Sortable columns with pagination.</p>
+
+        <ui-table
+            [title]="'U.S. States — Capitals & Quick Facts'"
+            [size]="'medium'"
+            [pageSize]="5"
+            [columns]="capitals.columns"
+            [data]="capitals.data"></ui-table>
+
+        <h2>Table: different pagination</h2>
+        <p>Table with 3 pages of content.</p>
+
+        <ui-table
+            [title]="'States Table (3 pages)'"
+            [size]="'medium'"
+            [pageSize]="5"
+            [columns]="population.columns"
+            [data]="population.data">
+        </ui-table>
+    `,
+})
+export class UITableExample {
+    capitals: TableExampleData<TableRow & { population: number }> = {
+        columns: [
+            { key: 'state', label: 'State', width: '160px', sort: 'string' },
+            { key: 'capital', label: 'Capital', width: '140px' },
+            {
+                key: 'population',
+                label: 'Population',
+                width: '140px',
+                sort: 'number',
+                formatter: this.popCountFormatter,
+            },
+            { key: 'nickname', label: 'Nickname', width: '1fr' },
+        ],
+        data: [
+            {
+                id: 'ca',
+                state: 'California',
+                capital: 'Sacramento',
+                population: 39512223,
+                nickname: 'The Golden State',
+            },
+            { id: 'ny', state: 'New York', capital: 'Albany', population: 19299981, nickname: 'The Empire State' },
+            {
+                id: 'nj',
+                state: 'New Jersey',
+                capital: 'Trenton',
+                population: 8882190,
+                nickname: 'The Garden State',
+            },
+            { id: 'tx', state: 'Texas', capital: 'Austin', population: 29183290, nickname: 'The Lone Star State' },
+            { id: 'hi', state: 'Hawaii', capital: 'Honolulu', population: 1415872, nickname: 'The Aloha State' },
+            { id: 'ak', state: 'Alaska', capital: 'Juneau', population: 731545, nickname: 'The Last Frontier' },
+            {
+                id: 'al',
+                state: 'Alabama',
+                capital: 'Montgomery',
+                population: 4903185,
+                nickname: 'The Heart of Dixie',
+            },
+            {
+                id: 'az',
+                state: 'Arizona',
+                capital: 'Phoenix',
+                population: 7151502,
+                nickname: 'The Grand Canyon State',
+            },
+            {
+                id: 'ar',
+                state: 'Arkansas',
+                capital: 'Little Rock',
+                population: 3011524,
+                nickname: 'The Natural State',
+            },
+            {
+                id: 'co',
+                state: 'Colorado',
+                capital: 'Denver',
+                population: 5773714,
+                nickname: 'The Centennial State',
+            },
+            {
+                id: 'ct',
+                state: 'Connecticut',
+                capital: 'Hartford',
+                population: 3605944,
+                nickname: 'The Constitution State',
+            },
+            { id: 'de', state: 'Delaware', capital: 'Dover', population: 989948, nickname: 'The First State' },
+            {
+                id: 'fl',
+                state: 'Florida',
+                capital: 'Tallahassee',
+                population: 21477737,
+                nickname: 'The Sunshine State',
+            },
+            { id: 'ga', state: 'Georgia', capital: 'Atlanta', population: 10617423, nickname: 'The Peach State' },
+            { id: 'ia', state: 'Iowa', capital: 'Des Moines', population: 3155070, nickname: 'The Hawkeye State' },
+            { id: 'id', state: 'Idaho', capital: 'Boise', population: 1787065, nickname: 'The Gem State' },
+            {
+                id: 'il',
+                state: 'Illinois',
+                capital: 'Springfield',
+                population: 12671821,
+                nickname: 'The Prairie State',
+            },
+            {
+                id: 'in',
+                state: 'Indiana',
+                capital: 'Indianapolis',
+                population: 6732219,
+                nickname: 'The Hoosier State',
+            },
+            { id: 'ks', state: 'Kansas', capital: 'Topeka', population: 2913314, nickname: 'The Sunflower State' },
+            {
+                id: 'ky',
+                state: 'Kentucky',
+                capital: 'Frankfort',
+                population: 4467673,
+                nickname: 'The Bluegrass State',
+            },
+            {
+                id: 'la',
+                state: 'Louisiana',
+                capital: 'Baton Rouge',
+                population: 4648794,
+                nickname: 'The Pelican State',
+            },
+            { id: 'ma', state: 'Massachusetts', capital: 'Boston', population: 6892503, nickname: 'The Bay State' },
+            { id: 'md', state: 'Maryland', capital: 'Annapolis', population: 6045680, nickname: 'The Free State' },
+            { id: 'me', state: 'Maine', capital: 'Augusta', population: 1344212, nickname: 'The Pine Tree State' },
+            {
+                id: 'mi',
+                state: 'Michigan',
+                capital: 'Lansing',
+                population: 9986857,
+                nickname: 'The Great Lakes State',
+            },
+            {
+                id: 'mn',
+                state: 'Minnesota',
+                capital: 'St. Paul',
+                population: 5639632,
+                nickname: 'The North Star State',
+            },
+            {
+                id: 'mo',
+                state: 'Missouri',
+                capital: 'Jefferson City',
+                population: 6137428,
+                nickname: 'The Show-Me State',
+            },
+            {
+                id: 'ms',
+                state: 'Mississippi',
+                capital: 'Jackson',
+                population: 2976149,
+                nickname: 'The Magnolia State',
+            },
+            { id: 'mt', state: 'Montana', capital: 'Helena', population: 1068778, nickname: 'The Treasure State' },
+            {
+                id: 'nc',
+                state: 'North Carolina',
+                capital: 'Raleigh',
+                population: 10488084,
+                nickname: 'The Tar Heel State',
+            },
+            {
+                id: 'nd',
+                state: 'North Dakota',
+                capital: 'Bismarck',
+                population: 762062,
+                nickname: 'The Peace Garden State',
+            },
+            {
+                id: 'ne',
+                state: 'Nebraska',
+                capital: 'Lincoln',
+                population: 1934408,
+                nickname: 'The Cornhusker State',
+            },
+            {
+                id: 'nh',
+                state: 'New Hampshire',
+                capital: 'Concord',
+                population: 1359711,
+                nickname: 'The Granite State',
+            },
+            {
+                id: 'nm',
+                state: 'New Mexico',
+                capital: 'Santa Fe',
+                population: 2096829,
+                nickname: 'The Land of Enchantment',
+            },
+            {
+                id: 'nv',
+                state: 'Nevada',
+                capital: 'Carson City',
+                population: 3080156,
+                nickname: 'The Silver State',
+            },
+            { id: 'oh', state: 'Ohio', capital: 'Columbus', population: 11689100, nickname: 'The Buckeye State' },
+            {
+                id: 'ok',
+                state: 'Oklahoma',
+                capital: 'Oklahoma City',
+                population: 3956971,
+                nickname: 'The Sooner State',
+            },
+            { id: 'or', state: 'Oregon', capital: 'Salem', population: 4217737, nickname: 'The Beaver State' },
+            {
+                id: 'pa',
+                state: 'Pennsylvania',
+                capital: 'Harrisburg',
+                population: 12801989,
+                nickname: 'The Keystone State',
+            },
+            {
+                id: 'ri',
+                state: 'Rhode Island',
+                capital: 'Providence',
+                population: 1059361,
+                nickname: 'The Ocean State',
+            },
+            {
+                id: 'sc',
+                state: 'South Carolina',
+                capital: 'Columbia',
+                population: 5148714,
+                nickname: 'The Palmetto State',
+            },
+            {
+                id: 'sd',
+                state: 'South Dakota',
+                capital: 'Pierre',
+                population: 884659,
+                nickname: 'Mount Rushmore State',
+            },
+            {
+                id: 'tn',
+                state: 'Tennessee',
+                capital: 'Nashville',
+                population: 6833174,
+                nickname: 'The Volunteer State',
+            },
+            {
+                id: 'ut',
+                state: 'Utah',
+                capital: 'Salt Lake City',
+                population: 3205958,
+                nickname: 'The Beehive State',
+            },
+            { id: 'va', state: 'Virginia', capital: 'Richmond', population: 8535519, nickname: 'The Old Dominion' },
+            {
+                id: 'vt',
+                state: 'Vermont',
+                capital: 'Montpelier',
+                population: 623989,
+                nickname: 'The Green Mountain State',
+            },
+            {
+                id: 'wa',
+                state: 'Washington',
+                capital: 'Olympia',
+                population: 7614893,
+                nickname: 'The Evergreen State',
+            },
+            { id: 'wi', state: 'Wisconsin', capital: 'Madison', population: 5822434, nickname: 'The Badger State' },
+            {
+                id: 'wv',
+                state: 'West Virginia',
+                capital: 'Charleston',
+                population: 1792147,
+                nickname: 'The Mountain State',
+            },
+            { id: 'wy', state: 'Wyoming', capital: 'Cheyenne', population: 578759, nickname: 'The Equality State' },
+        ],
+    };
+
+    population: TableExampleData<TableRow & { population: number }> = {
+        columns: [
+            { key: 'state', label: 'State', width: '160px', sort: 'string' },
+            { key: 'capital', label: 'Capital', width: '140px' },
+            {
+                key: 'population',
+                label: 'Population',
+                width: '140px',
+                sort: 'number',
+                formatter: this.popCountFormatter,
+            },
+            { key: 'nickname', label: 'Nickname', width: '1fr' },
+        ],
+        data: [
+            {
+                id: 'ca',
+                state: 'California',
+                capital: 'Sacramento',
+                population: 39512223,
+                nickname: 'The Golden State',
+            },
+            { id: 'ny', state: 'New York', capital: 'Albany', population: 19299981, nickname: 'The Empire State' },
+            { id: 'tx', state: 'Texas', capital: 'Austin', population: 29183290, nickname: 'The Lone Star State' },
+            {
+                id: 'fl',
+                state: 'Florida',
+                capital: 'Tallahassee',
+                population: 21477737,
+                nickname: 'The Sunshine State',
+            },
+            {
+                id: 'il',
+                state: 'Illinois',
+                capital: 'Springfield',
+                population: 12671821,
+                nickname: 'The Prairie State',
+            },
+            {
+                id: 'pa',
+                state: 'Pennsylvania',
+                capital: 'Harrisburg',
+                population: 12801989,
+                nickname: 'The Keystone State',
+            },
+            { id: 'oh', state: 'Ohio', capital: 'Columbus', population: 11689100, nickname: 'The Buckeye State' },
+            { id: 'ga', state: 'Georgia', capital: 'Atlanta', population: 10617423, nickname: 'The Peach State' },
+            {
+                id: 'nc',
+                state: 'North Carolina',
+                capital: 'Raleigh',
+                population: 10488084,
+                nickname: 'The Tar Heel State',
+            },
+            {
+                id: 'mi',
+                state: 'Michigan',
+                capital: 'Lansing',
+                population: 9986857,
+                nickname: 'The Great Lakes State',
+            },
+            {
+                id: 'nj',
+                state: 'New Jersey',
+                capital: 'Trenton',
+                population: 8882190,
+                nickname: 'The Garden State',
+            },
+            { id: 'va', state: 'Virginia', capital: 'Richmond', population: 8535519, nickname: 'The Old Dominion' },
+            {
+                id: 'wa',
+                state: 'Washington',
+                capital: 'Olympia',
+                population: 7614893,
+                nickname: 'The Evergreen State',
+            },
+            {
+                id: 'az',
+                state: 'Arizona',
+                capital: 'Phoenix',
+                population: 7151502,
+                nickname: 'The Grand Canyon State',
+            },
+            { id: 'ma', state: 'Massachusetts', capital: 'Boston', population: 6892503, nickname: 'The Bay State' },
+        ],
+    };
+
+    popCountFormatter(row: TableRow & { population: number }): string {
+        return row.population.toLocaleString();
+    }
+}
+
+interface TableExampleData<R extends TableRow = TableRow> {
+    columns: TableColumn<R>[];
+    data: R[];
+}

package/src/lib/table/index.ts

@@ -0,0 +1 @@
+export * from './table';