@sellmate/design-system 1.0.62 → 1.0.63

package/dist/types/components/sd-table/constants.d.ts

@@ -0,0 +1,44 @@
+export declare const TABLE_ID_ATTR = "table-id";
+export interface SdTableColumn {
+    name: string;
+    label: string;
+    field: string | ((row: any) => any);
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+    format?: (value: any, row: any) => string;
+    visible?: boolean;
+    usePageMoveIcon?: boolean;
+    tooltip?: string[];
+    tooltipOptions?: Record<string, any>;
+    tdClass?: string;
+    minWidth?: number;
+    maxWidth?: number;
+    thStyle?: Record<string, any>;
+    thClass?: string;
+}
+export interface Row {
+    [key: string]: any;
+}
+export interface SdTablePagination {
+    page: number;
+    rowsPerPage: number;
+    lastPage?: number;
+}
+export interface SdTableStickyColumn {
+    left?: number;
+    right?: number;
+}
+export interface SelectOption {
+    label: string;
+    value: string | number;
+}
+export interface SdTableConfig {
+    columns: SdTableColumn[];
+    selectable: boolean;
+    resizable: boolean;
+    stickyColumn: SdTableStickyColumn;
+    stickyHeader: boolean;
+    scrolledLeft: boolean;
+    scrolledRight: boolean;
+    columnWidths: number[];
+}

package/dist/types/components/sd-table/sd-table.d.ts

@@ -1,31 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { SelectOption } from '../sd-select/sd-select';
-import { SdTooltipProps } from '../../components';
-export type SdTableSortDir = 'asc' | 'desc' | 'none';
-export type SdTableColumnWidth = number | `${number}` | `${number}px`;
-export interface SdTableColumn {
-    name: string;
-    label: string;
-    field: string | ((row: any) => any);
-    align?: 'left' | 'center' | 'right';
-    width?: SdTableColumnWidth;
-    format?: (value: any, row: any) => string;
-    usePageMoveIcon?: boolean;
-    tooltip?: string[];
-    tooltipOptions?: SdTooltipProps;
-    tdClass?: string;
-    minWidth?: number;
-    maxWidth?: number;
-    thStyle?: Record<string, any>;
-    thClass?: string;
-}
-export interface Row {
-    [key: string]: any;
-}
+import { SdTableColumn, SdTableConfig, Row, SdTablePagination, SdTableStickyColumn, SelectOption } from './constants';
 export declare class SdTable {
+    private static readonly DEFAULT_NO_DATA_LABEL;
     el: HTMLElement;
+    tableId: string;
+    private fallbackTableId;
     columns: SdTableColumn[];
-    rows: Row[];
+    rows?: Row[];
     selected: Row[];
     rowKey: string;
     selectable: boolean;
@@ -33,118 +14,125 @@ export declare class SdTable {
     width?: string;
     height?: string;
     stickyHeader: boolean;
-    stickyColumn: {
-        left?: number;
-        right?: number;
-    };
+    stickyColumn: SdTableStickyColumn;
     noDataLabel: string;
+    resolvedNoDataLabel: string;
     isLoading: boolean;
-    pagination?: {
-        page: number;
-        rowsPerPage: number;
-        lastPage?: number;
-    };
+    pagination?: SdTablePagination;
     useInternalPagination: boolean;
     useRowsPerPageSelect: boolean;
+    useVirtualScroll: boolean;
+    rowHeight: number;
+    virtualBuffer: number;
+    virtualEndThreshold: number;
     rowsPerPageOption: SelectOption[];
-    useVirtualScroll: {
-        vertical?: boolean;
-        horizontal?: boolean;
-    };
-    virtualRowHeight: number;
-    virtualColumnWidth: number;
-    virtualBufferSize: {
-        vertical?: number;
-        horizontal?: number;
-    };
     sdSelectChange: EventEmitter<Row[]>;
     sdPageChange: EventEmitter<number>;
     sdRowsPerPageChange: EventEmitter<number>;
+    sdVirtualUpdate: EventEmitter<{
+        from: number;
+        to: number;
+    }>;
+    sdVirtualReachEnd: EventEmitter<{
+        from: number;
+        to: number;
+        rowCount: number;
+        threshold: number;
+    }>;
     currentPage: number;
-    innerRows: Row[];
+    innerRowsPerPage: number;
     innerSelected: Set<Row>;
     columnWidths: number[];
     scrolledLeft: boolean;
     scrolledRight: boolean;
-    virtualStartIndex: number;
-    virtualEndIndex: number;
-    scrollTopPosition: number;
-    virtualStartColIdx: number;
-    virtualEndColIdx: number;
-    scrollLeftPosition: number;
-    private scrollRequestAnimationFrame;
+    rowCount: number;
+    loadingScrollTop: number;
+    private vsStart;
+    private vsEnd;
+    private lastReachEndNotifiedRowCount;
     private scrollContainer;
-    private resizeObserver;
-    private rafScheduled;
-    private pendingUpdates;
-    private cachedVirtualRows;
-    private cachedVirtualIndexKey;
-    private cachedColumnOrder;
-    private lastColumnOrderKey;
-    private cachedContainerHeight;
-    private cachedContainerWidth;
-    private stickyStyleCache;
-    private cachedIsAllChecked;
-    private lastSelectionKey;
     private onScroll?;
+    private toFiniteNumber;
+    private isRowsPerPageValue;
+    private isValidTableId;
+    private getResolvedTableId;
+    private syncTableIdAttribute;
+    handleIsLoadingChange(newVal: boolean): void;
+    handleUseVirtualScrollChange(newVal: boolean): void;
     handleColumnsChange(newCols: SdTableColumn[]): void;
-    handleUseVirtualScrollChange(): void;
-    handleVirtualColumnWidthChange(): void;
-    handleSelectableChange(): void;
-    handleStickyColumnChange(): void;
-    handleColumnWidthsChange(): void;
-    handleRowsChange(newRows: Row[]): void;
+    handleRowsChange(newRows?: Row[]): void;
+    handleTableIdChange(): void;
+    handleNoDataLabelChange(newLabel?: string): void;
+    handleConfigChange(): void;
     handleSelectedChange(newSelected: Row[]): void;
-    private cleanUpVirtualCache;
-    private refreshColumnLayout;
-    private clearSelectionCache;
-    private clearRowDerivedCache;
-    handlePaginationChange(newVal?: {
-        page: number;
-        rowsPerPage: number;
-        lastPage?: number;
-    } | undefined): void;
+    handlePaginationChange(newVal?: SdTablePagination): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private pushRowsToChildren;
+    private handleStructureSlotChange;
+    private refreshChildrenSelection;
+    private refreshChildrenConfig;
+    private maybeEmitVirtualReachEnd;
+    private propagateVirtualUpdate;
+    getVirtualScrollConfigSync(): {
+        useVirtualScroll: boolean;
+        rowHeight: number;
+        virtualBuffer: number;
+        vsStart: number;
+        vsEnd: number;
+        rowCount: number;
+    };
+    getConfigSync(): SdTableConfig;
+    isRowSelectedSync(row: Row): boolean;
+    isRowSelected(row: Row): Promise<boolean>;
+    updateRowSelectSync(row: Row): void;
+    updateRowSelect(row: Row): Promise<void>;
+    toggleSelectAllSync(checked: boolean, rows: Row[]): void;
+    toggleSelectAll(checked: boolean, rows: Row[]): Promise<void>;
+    getIsAllCheckedSync(rows: Row[]): boolean | null;
+    getIsAllChecked(rows: Row[]): Promise<boolean | null>;
     private changePage;
+    private updateRowsVisibility;
     private changeRowsPerPage;
-    disconnectedCallback(): void;
-    private get tableColumns();
-    private get paginatedRows();
-    private get virtualRows();
-    private get topSpacerHeight();
-    private get bottomSpacerHeight();
-    private getHorizontalSpacerWidth;
-    private get leftSpacerWidth();
-    private get rightSpacerWidth();
-    private get totalVirtualHeight();
     private get lastPageNumber();
-    private get sdTableClasses();
-    private get hasStickyColumn();
-    private get hasStickyLeftDataColumn();
-    private isRowSelected;
-    private updateRowSelect;
-    private toggleSelectAll;
-    private get isAllChecked();
-    private scheduleUpdate;
-    private calculateVisibleRange;
-    private calculateVisibleColumnRange;
-    private getStickyStyle;
-    private startResizeObserver;
-    private parseColumnWidth;
-    private getColumnWidths;
-    private getNormalizedStickyCounts;
-    private getRowKeyValue;
-    private dedupeRowsByKey;
-    private handleResize;
-    private getCellValue;
-    private getColumnRenderedInOrder;
-    private renderHead;
-    private renderBody;
-    private renderRow;
-    private renderSpacerRow;
-    private getSpacerCellStyle;
-    private renderSpacerTh;
-    private renderSpacerTd;
+    handleResize(index: number, event: MouseEvent, reversed?: boolean): void;
+    getStickyStyleSync(colIdx: number): {
+        '--sticky-left-offset': string;
+        '--sticky-right-offset': string;
+        width: string;
+        minWidth: string;
+        maxWidth: string;
+    };
+    getStickyStyle(colIdx: number): Promise<{
+        '--sticky-left-offset': string;
+        '--sticky-right-offset': string;
+        width: string;
+        minWidth: string;
+        maxWidth: string;
+    }>;
+    setRowCountSync(count: number): void;
+    setRowCount(count: number): Promise<void>;
+    calculateVisibleRange(scrollTop: number, containerHeight: number): {
+        start: number;
+        end: number;
+    };
+    getPaginationInfoSync(): {
+        startIndex: number;
+        endIndex: number;
+        currentPage: number;
+        rowsPerPage: number;
+    } | null;
+    getPaginationInfo(): Promise<{
+        startIndex: number;
+        endIndex: number;
+        currentPage: number;
+        rowsPerPage: number;
+    } | null>;
+    getVirtualScrollRangeSync(): {
+        from: number;
+        to: number;
+    } | null;
+    private get tableClasses();
     render(): any;
 }

package/dist/types/components/sd-table/sd-tbody/sd-tbody.d.ts

@@ -0,0 +1,14 @@
+import { Row } from '../constants';
+export declare class SdTbody {
+    el: HTMLElement;
+    rows: Row[];
+    tableId: string;
+    topSpacerHeight: number;
+    bottomSpacerHeight: number;
+    private tableEl;
+    handleRowsChange(newRows: Row[]): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private syncTableContext;
+    render(): any;
+}

package/dist/types/components/sd-table/sd-td/sd-td.d.ts

@@ -0,0 +1,12 @@
+export declare class SdTd {
+    el: HTMLElement;
+    field: string;
+    rowKey: string;
+    align?: 'left' | 'center' | 'right';
+    handleFieldChange(): void;
+    handleRowKeyChange(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private syncSlotName;
+    render(): any;
+}

package/dist/types/components/sd-table/sd-thead/sd-thead.d.ts

@@ -0,0 +1,36 @@
+import { SdTableColumn, Row, SdTableStickyColumn } from '../constants';
+export declare class SdThead {
+    el: HTMLElement;
+    columns?: SdTableColumn[];
+    selectable?: boolean;
+    resizable?: boolean;
+    stickyColumn?: SdTableStickyColumn;
+    stickyHeader?: boolean;
+    scrolledLeft?: boolean;
+    scrolledRight?: boolean;
+    rows: Row[];
+    columnWidths: number[];
+    tableId: string;
+    private _columns;
+    private _selectable;
+    private _resizable;
+    private _stickyColumn;
+    private _stickyHeader;
+    private _scrolledLeft;
+    private _scrolledRight;
+    private tableEl;
+    handleColumnsChange(newCols?: SdTableColumn[]): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private syncTableContext;
+    private resolveConfig;
+    refreshConfig(): Promise<void>;
+    setColumnWidths(widths: number[]): Promise<void>;
+    refreshSelection(): Promise<void>;
+    private get visibleColumns();
+    private getStickyStyle;
+    private handleResize;
+    private handleSelectAll;
+    private getIsAllChecked;
+    render(): any;
+}

package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts

@@ -0,0 +1,34 @@
+import { SdTableColumn, Row, SdTableStickyColumn } from '../constants';
+export declare class SdTr {
+    el: HTMLElement;
+    columns?: SdTableColumn[];
+    selectable?: boolean;
+    stickyColumn?: SdTableStickyColumn;
+    rowKey: string;
+    row: Row;
+    tableId: string;
+    columnWidths: number[];
+    isVisible: boolean;
+    private _columns;
+    private _selectable;
+    private _stickyColumn;
+    private _scrolledLeft;
+    private _scrolledRight;
+    private tableEl;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private syncTableContext;
+    private resolveConfig;
+    refreshConfig(): Promise<void>;
+    updateVisibility(): Promise<void>;
+    private updateVisibilitySync;
+    setColumnWidths(widths: number[]): Promise<void>;
+    refreshSelection(): Promise<void>;
+    private get visibleColumns();
+    private formatValue;
+    private getCellValue;
+    private getStickyStyle;
+    private isSelected;
+    private handleSelect;
+    render(): any;
+}

package/dist/types/components/sd-toggle/sd-toggle.config.d.ts

@@ -0,0 +1,32 @@
+export declare const TOGGLE_LAYOUT: {
+    height: number;
+    paddingX: number;
+    radius: number;
+    borderWidth: number;
+};
+export declare const TOGGLE_TYPOGRAPHY: {
+    fontFamily: string;
+    fontWeight: string;
+    fontSize: number;
+    lineHeight: number;
+    textDecoration: string;
+};
+export declare const TOGGLE_COLORS: {
+    border: {
+        default: string;
+        select: string;
+        disabled: string;
+    };
+    bg: {
+        default: string;
+        hover: string;
+        select: string;
+        disabled: string;
+    };
+    content: {
+        default: string;
+        hover: string;
+        select: string;
+        disabled: string;
+    };
+};

package/dist/types/components/sd-toggle/sd-toggle.d.ts

@@ -4,9 +4,6 @@ export declare class SdToggle {
     label: string;
     disabled: boolean;
     change: EventEmitter<boolean>;
-    componentWillLoad(): void;
-    componentWillRender(): void;
-    private updateCheckedState;
     private get toggleClasses();
     private handleChange;
     render(): any;

package/dist/types/components/table-test/table-test.d.ts

@@ -0,0 +1,46 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface TableColumn {
+    field: string;
+    header?: string;
+    width?: string;
+}
+export interface TableRow {
+    [key: string]: any;
+}
+export interface CellRenderContext {
+    field: string;
+    value: any;
+    row: TableRow;
+    rowIndex: number;
+}
+export interface HeaderRenderContext {
+    field: string;
+    column: TableColumn;
+}
+export type CellRenderer = (context: CellRenderContext) => string;
+export type HeaderRenderer = (context: HeaderRenderContext) => string;
+export declare class DataTable {
+    el: HTMLElement;
+    /** Column definitions array */
+    columns: TableColumn[];
+    /** Row data array */
+    rows: TableRow[];
+    /** Show cell borders */
+    bordered: boolean;
+    /** Alternate row colors */
+    striped: boolean;
+    private cellRenderers;
+    private headerRenderers;
+    tableReady: EventEmitter<void>;
+    dataChanged(): void;
+    componentDidLoad(): void;
+    setCellRenderer(field: string, renderer: CellRenderer): Promise<void>;
+    setHeaderRenderer(field: string, renderer: HeaderRenderer): Promise<void>;
+    removeCellRenderer(field: string): Promise<void>;
+    clearAllRenderers(): Promise<void>;
+    private renderCellContent;
+    private renderHeaderContent;
+    private processTemplate;
+    private escapeHtml;
+    render(): any;
+}