@ukic/canary-web-components 2.0.0-canary.4 → 2.0.0-canary.41

package/dist/types/components/ic-data-table/ic-data-table.d.ts

@@ -1,7 +1,52 @@
-import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./ic-data-table.types";
-import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "../ic-pagination/ic-pagination.types";
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcDataTableDataType, IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./ic-data-table.types";
+import { IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
+import { IcPaginationBarOptions } from "../../utils/types";
+/**
+ * @slot empty-state - Content is slotted below the table header when there is no data and the table is not loading.
+ * @slot {COLUMN_KEY}-{ROW_INDEX}[-icon] - Each cell should have its own slot, named using the column tag and the row index, allowing for custom elements to be displayed. Include `-icon` at the end for that cell's icon slot.
+ * @slot {COLUMN_KEY}-column-icon - The icon slot for a column header.
+ * @slot title-bar - A custom ic-data-table-title-bar can be slotted above the column headers to display additional information about the table.
+ * @slot pagination-bar - A custom ic-pagination-bar can be slotted below the data to provide enhanced control over how the data is interacted with when being fetched externally.
+ */
 export declare class DataTable {
+    private DENSITY_HEIGHT_MULTIPLIER;
+    private DENSITY_PADDING_HEIGHT_DIFF;
     private SORT_ICONS;
+    private hasLoadedForOneSecond;
+    private loadingIndicator;
+    private loadingOverlay;
+    private timerStarted;
+    private resizeObserver;
+    private SHOW_HIDE_STRING;
+    private SHOW_HIDE_CSS_CLASS;
+    private TOOLTIP_STRING;
+    private TOOLTIP;
+    private TEXT_WRAP_STRING;
+    private TEXT_WRAP_CLASS;
+    private dataUpdated;
+    private tableSorted;
+    private rowHeightSet;
+    private initialLoad;
+    private icPageChangeEvent;
+    private itemsPerPageChange;
+    private DATA_ROW_HEIGHT_STRING;
+    private ROW_HEIGHT_CSS_VARIABLE;
+    private LINE_CLAMP_CSS_VARIABLE;
+    private previousItemsPerPage;
+    private DEFAULT_LINE_HEIGHT;
+    private densityUpdate;
+    private previousPaginationPage;
+    private truncationPatternUpdated;
+    private isNewDebounceDelaySet;
+    private headerResizeObserver;
+    private prevTableContainerWidth;
+    private IC_TOOLTIP_STRING;
+    private SHOW_TRUNC_TOOLTIP_STRING;
+    private CELL_DESCRIPTION_STRING;
+    private CELL_CONTAINER_WITH_DESCRIPTION_STRING;
+    private CELL_TEXT_WRAPPER_STRING;
+    private IC_TYPOGRAPHY_STRING;
     el: HTMLIcDataTableElement;
     fromRow: number;
     previousRowsPerPage: number;
@@ -12,10 +57,17 @@ export declare class DataTable {
     sortedColumn: string;
     sortedColumnOrder: IcDataTableSortOrderOptions;
     toRow: number;
+    currentRowHeight: number;
+    debounceDelay: number;
     /**
      * The title for the table only visible to screen readers.
      */
     caption: string;
+    /**
+     * Determines whether the column header should be truncated and display a tooltip. Default is `false`.
+     */
+    columnHeaderTruncation: boolean;
+    headerTruncationChangeHandler(): void;
     /**
      * The column headers for the table.
      */
@@ -23,9 +75,11 @@ export declare class DataTable {
     /**
      * The row content for the table.
      */
-    data: {
-        [key: string]: any;
-    }[];
+    data?: IcDataTableDataType[];
+    /**
+     * If `true`, the built in sort functionality will be disabled. For example, if rows will already be sorted from an external source.
+     */
+    disableAutoSort?: boolean;
     /**
      * Set the density of the table including font and padding.
      */
@@ -34,24 +88,56 @@ export declare class DataTable {
      * Applies a border to the table container.
      */
     embedded?: boolean;
+    /**
+     * Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method.
+     */
+    globalRowHeight?: IcDataTableRowHeights;
+    /**
+     * Sets the table height. Can be set to `auto` or a specific value in `px`, `rem`, or `%`.
+     */
+    height?: string;
+    /**
+     * If `true`, the selected row is highlighted using a background colour.
+     */
+    highlightSelectedRow?: boolean;
     /**
      * If `true`, column headers will not be visible.
      */
     hideColumnHeaders?: boolean;
     /**
-     * Sets the props for the pagination bar.
-     */
-    paginationOptions?: {
-        itemsPerPage?: {
-            label: string;
-            value: string;
-        }[];
-        type?: IcPaginationTypes;
-        control?: IcPaginationControlTypes;
-        itemsPerPageControl?: boolean;
-        goToPageControl?: boolean;
-        alignment?: IcPaginationAlignmentOptions;
+     * When set to `true`, the full table will show a loading state, featuring a radial indicator.
+     */
+    loading?: boolean;
+    /**
+     * Sets the props for the circular loading indicator used in the loading state.
+     */
+    loadingOptions?: {
+        appearance?: IcThemeForegroundNoDefault;
+        description?: string;
+        label?: string;
+        labelDuration?: number;
+        max?: number;
+        min?: number;
+        progress?: number;
+        showBackground?: boolean;
+        overlay?: boolean;
     };
+    /**
+     * Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`.
+     */
+    maxWidth?: string;
+    /**
+     * Sets the minimum width of the data table. Can be set in `px`, `rem`, or `%`.
+     */
+    minWidth?: string;
+    /**
+     * The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component.
+     */
+    minimumLoadingDisplayDuration?: number;
+    /**
+     * Sets the props for the built-in pagination bar. If the `pagination-bar` slot is used then this prop is ignored.
+     */
+    paginationBarOptions?: IcPaginationBarOptions;
     /**
      * If `true`, adds a pagination bar to the bottom of the table.
      */
@@ -75,23 +161,136 @@ export declare class DataTable {
      * If `true`, row headers will remain to the left when scrolling horizontally.
      */
     stickyRowHeaders?: boolean;
+    /**
+     * Sets the layout of the table
+     */
+    tableLayout?: "fixed" | "auto";
+    /**
+     * Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons.
+     */
+    truncationPattern?: IcDataTableTruncationTypes;
+    /**
+     * If `true`, the table displays a linear loading indicator below the header row to indicate an updating state.
+     */
+    updating?: boolean;
+    /**
+     * Sets the props for the linear loading indicator used in the updating state.
+     */
+    updatingOptions?: {
+        appearance?: IcThemeForegroundNoDefault;
+        description?: string;
+        max?: number;
+        min?: number;
+        progress?: number;
+    };
+    /**
+     * Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index.
+     * If the function returns `null`, that row's height will be set to the `globalRowHeight` property.
+     */
+    variableRowHeight?: (params: {
+        [key: string]: any;
+        index: number;
+    }) => IcDataTableRowHeights | null;
+    /**
+     * Sets the table width. Can be set to `auto` or a specific value in `px`, `rem`, or `%`.
+     */
+    width?: string;
+    /**
+     * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.
+     */
+    icRowHeightChange: EventEmitter<void>;
+    /**
+     * Emitted when the selected row changes in the data table.
+     */
+    icSelectedRowChange: EventEmitter<object>;
+    /**
+     * Emitted when a column sort button is clicked.
+     */
+    icSortChange: EventEmitter<IcSortEventDetail>;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
-    handleItemsPerPageChange(ev: CustomEvent): void;
-    handlePageChange(ev: CustomEvent): void;
+    componentDidUpdate(): void;
+    componentDidRender(): void;
+    private runHeaderResizeObserver;
+    private headerResizeCallback;
+    private truncateUpdatedData;
+    private updateSetRowHeight;
+    private createShowHideTruncation;
+    private debounceDataTruncation;
+    private setNewDebounceDelay;
+    private getLines;
+    private truncate;
+    private addTooltipTruncation;
+    private addShowHideTruncation;
+    private dataTruncation;
+    private getTruncWrapper;
+    handleTypographyTruncationExpandToggle({ detail, }: CustomEvent<{
+        expanded: boolean;
+        typographyEl: HTMLIcTypographyElement;
+    }>): void;
+    handlePageChange({ detail, target }: CustomEvent<{
+        value: number;
+    }>): void;
+    handleItemsPerPageChange({ detail, target, }: CustomEvent<{
+        value: number;
+    }>): void;
+    handleDensityChange(ev: CustomEvent<IcDensityUpdateEventDetail>): void;
     clickListener(ev: MouseEvent): void;
+    loadingHandler(newValue: boolean): void;
+    truncationPatternHandler(newValue: IcDataTableTruncationTypes): void;
+    dataHandler(newData: IcDataTableDataType[]): Promise<void>;
+    densityHandler(): Promise<void>;
+    private removeTextWrap;
+    private getCellContainer;
+    private deleteTextWrapDataKey;
+    private resetShowHideTruncation;
+    rowHeightChangeHandler(newValue: number, oldValue: number): void;
+    /**
+     * Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.
+     */
+    resetRowHeights(rowHeight?: number | "auto"): Promise<void>;
+    private showLoadingIndicator;
+    private startLoadingTimer;
     private isObject;
     private notDefaultDensity;
     private getCellContent;
     private getCellAlignment;
+    private getCellOptions;
+    private createUpdatingIndicator;
+    private setRowHeight;
+    private setTruncationClass;
+    private getColumnWidth;
+    private getRowHeight;
+    private adjustWidthForActionElement;
+    private createCellContent;
     private createCells;
     private createColumnHeaders;
+    private onRowClick;
     private createRows;
     private getObjectValue;
     private getSortButtonLabel;
     private getComparison;
     private getSortFunction;
     private sortRows;
+    private getTypographyElements;
+    private getTooltip;
+    private updateTruncationTooltip;
     private updateScrollOffset;
+    private updateRowHeightForDescriptions;
+    private updateCellHeightsWithDescriptions;
+    private getRowOptions;
+    private regenerateTooltip;
+    private setTableDimensions;
+    private removeTooltip;
+    private addLineClampCSS;
+    private createTruncationTooltip;
+    private fixCellTooltip;
+    private fixCellTooltips;
+    private handleClick;
+    private renderTableBody;
+    private renderLoadingIndicator;
+    private renderAriaLiveLoading;
+    private renderEmptyState;
     render(): any;
 }

package/dist/types/components/ic-data-table/ic-data-table.stories.d.ts

@@ -0,0 +1,239 @@
+/// <reference types="mdx" />
+declare namespace _default {
+    let title: string;
+    let component: string;
+    namespace parameters {
+        namespace componentAPI {
+            export { readme as data };
+        }
+    }
+}
+export default _default;
+export namespace BasicExample {
+    function render(): HTMLIcDataTableElement;
+    let name: string;
+}
+export namespace LargeDataSetExample {
+    export function render_1(): HTMLIcDataTableElement;
+    export { render_1 as render };
+    let name_1: string;
+    export { name_1 as name };
+}
+export namespace EmbeddedExample {
+    export function render_2(): HTMLIcDataTableElement;
+    export { render_2 as render };
+    let name_2: string;
+    export { name_2 as name };
+}
+export namespace DenseExample {
+    export function render_3(): HTMLElement;
+    export { render_3 as render };
+    let name_3: string;
+    export { name_3 as name };
+}
+export namespace SpaciousExample {
+    export function render_4(): HTMLElement;
+    export { render_4 as render };
+    let name_4: string;
+    export { name_4 as name };
+}
+export namespace StickyColumnHeadersExample {
+    export function render_5(): HTMLElement;
+    export { render_5 as render };
+    let name_5: string;
+    export { name_5 as name };
+}
+export namespace ColumnHeaderTruncationExample {
+    export function render_6(): HTMLElement;
+    export { render_6 as render };
+    let name_6: string;
+    export { name_6 as name };
+}
+export namespace RowHeadersExample {
+    export function render_7(): HTMLIcDataTableElement;
+    export { render_7 as render };
+    let name_7: string;
+    export { name_7 as name };
+}
+export namespace SortExample {
+    export function render_8(): HTMLIcDataTableElement;
+    export { render_8 as render };
+    let name_8: string;
+    export { name_8 as name };
+}
+export namespace SortOptionsExample {
+    export function render_9(): HTMLIcDataTableElement;
+    export { render_9 as render };
+    let name_9: string;
+    export { name_9 as name };
+}
+export namespace DisableSortExample {
+    export function render_10(): HTMLIcDataTableElement;
+    export { render_10 as render };
+    let name_10: string;
+    export { name_10 as name };
+}
+export namespace ExcludeColumnsFromSortExample {
+    export function render_11(): HTMLIcDataTableElement;
+    export { render_11 as render };
+    let name_11: string;
+    export { name_11 as name };
+}
+export namespace PaginationExample {
+    export function render_12(): HTMLIcDataTableElement;
+    export { render_12 as render };
+    let name_12: string;
+    export { name_12 as name };
+}
+export namespace ColumnOverridesExample {
+    export function render_13(): HTMLIcDataTableElement;
+    export { render_13 as render };
+    let name_13: string;
+    export { name_13 as name };
+}
+export namespace RowOverridesExample {
+    export function render_14(): HTMLIcDataTableElement;
+    export { render_14 as render };
+    let name_14: string;
+    export { name_14 as name };
+}
+export namespace CellOverridesExample {
+    export function render_15(): HTMLIcDataTableElement;
+    export { render_15 as render };
+    let name_15: string;
+    export { name_15 as name };
+}
+export namespace DefaultEmptyStateExample {
+    export function render_16(): HTMLIcDataTableElement;
+    export { render_16 as render };
+    let name_16: string;
+    export { name_16 as name };
+}
+export namespace SlottedEmptyStateExample {
+    export function render_17(): HTMLIcDataTableElement;
+    export { render_17 as render };
+    let name_17: string;
+    export { name_17 as name };
+}
+export namespace LoadingStateExample {
+    export function render_18(): HTMLIcDataTableElement;
+    export { render_18 as render };
+    let name_18: string;
+    export { name_18 as name };
+    export let height: string;
+}
+export namespace UpdatingStateExample {
+    export function render_19(): HTMLIcDataTableElement;
+    export { render_19 as render };
+    let name_19: string;
+    export { name_19 as name };
+}
+export namespace LinksAndElementsInDataExample {
+    export function render_20(): HTMLIcDataTableElement;
+    export { render_20 as render };
+    let name_20: string;
+    export { name_20 as name };
+}
+export namespace SlottedElementsWithPaginationExample {
+    export function render_21(): HTMLIcDataTableElement;
+    export { render_21 as render };
+    let name_21: string;
+    export { name_21 as name };
+}
+export namespace CustomIconsExample {
+    export function render_22(): HTMLIcDataTableElement;
+    export { render_22 as render };
+    let name_22: string;
+    export { name_22 as name };
+}
+export namespace CustomRowHeightsExample {
+    export function render_23(): HTMLElement;
+    export { render_23 as render };
+    let name_23: string;
+    export { name_23 as name };
+}
+export namespace CustomTitleBarExample {
+    export function render_24(): HTMLIcDataTableElement;
+    export { render_24 as render };
+    let name_24: string;
+    export { name_24 as name };
+}
+export namespace UpdatingDataExample {
+    export function render_25(): HTMLElement;
+    export { render_25 as render };
+    let name_25: string;
+    export { name_25 as name };
+}
+export namespace SlottedPaginationBarExample {
+    export function render_26(): HTMLIcDataTableElement;
+    export { render_26 as render };
+    let name_26: string;
+    export { name_26 as name };
+}
+export namespace DataTruncationTooltipExample {
+    export function render_27(): HTMLElement;
+    export { render_27 as render };
+    let name_27: string;
+    export { name_27 as name };
+}
+export namespace DataTruncationSeeMoreSeeLessExample {
+    export function render_28(): HTMLElement;
+    export { render_28 as render };
+    let name_28: string;
+    export { name_28 as name };
+}
+export namespace TextWrapExample {
+    export function render_29(): HTMLElement;
+    export { render_29 as render };
+    let name_29: string;
+    export { name_29 as name };
+}
+export namespace TableSizingAndColumnWidthExample {
+    export function render_30(): HTMLElement;
+    export { render_30 as render };
+    let name_30: string;
+    export { name_30 as name };
+}
+export namespace ActionElementExample {
+    export function render_31(): HTMLElement;
+    export { render_31 as render };
+    let name_31: string;
+    export { name_31 as name };
+}
+export namespace DescriptionAndIconsWithinCellsExample {
+    export function render_32(): HTMLIcDataTableElement;
+    export { render_32 as render };
+    let name_32: string;
+    export { name_32 as name };
+}
+export namespace DescriptionAndIconsWithinCellsWithLongTextExample {
+    export function render_33(): HTMLElement;
+    export { render_33 as render };
+    let name_33: string;
+    export { name_33 as name };
+}
+export namespace MissingCellDataExample {
+    export function render_34(): HTMLElement;
+    export { render_34 as render };
+    let name_34: string;
+    export { name_34 as name };
+}
+export namespace TurnOffSelectedRowHighlightingExample {
+    export function render_35(): HTMLElement;
+    export { render_35 as render };
+    let name_35: string;
+    export { name_35 as name };
+}
+export namespace SelectedRowChangeEventExample {
+    export function render_36(): HTMLElement;
+    export { render_36 as render };
+    let name_36: string;
+    export { name_36 as name };
+}
+export namespace DevAreaExample {
+    export function render_37(): HTMLElement;
+    export { render_37 as render };
+    let name_37: string;
+    export { name_37 as name };
+}
+import readme from "./readme.md";

package/dist/types/components/ic-data-table/ic-data-table.types.d.ts

@@ -1,6 +1,12 @@
+import { IcThemeForegroundNoDefault } from "@ukic/web-components";
 export type IcDataTableSortOrderOptions = "unsorted" | "ascending" | "descending";
 export type IcDataTableDensityOptions = "default" | "dense" | "spacious";
 export type IcDataTableColumnDataTypes = "string" | "number" | "address" | "element" | "date";
+export type IcDataTableColumnWidthTypes = {
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+};
 export type IcDataTableColumnObject = {
     key: string;
     title: string;
@@ -9,7 +15,44 @@ export type IcDataTableColumnObject = {
         horizontal?: string;
         vertical?: string;
     };
+    rowOptions?: {
+        textWrap: boolean;
+    };
+    columnWidth?: string | IcDataTableColumnWidthTypes;
+    textWrap?: boolean;
     cellAlignment?: string;
     emphasis?: string;
     colspan?: number;
+    icon?: {
+        icon: string;
+        onAllCells?: boolean;
+        hideOnHeader?: boolean;
+    };
+    excludeColumnFromSort?: boolean;
+};
+export type IcLoadingOptions = {
+    appearance?: IcThemeForegroundNoDefault;
+    description?: string;
+    label?: string;
+    labelDuration?: number;
+    max?: number;
+    min?: number;
+    progress?: number;
+    showBackground?: boolean;
+    overlay?: boolean;
+};
+export type IcDataTableRowHeights = number | "auto";
+export interface IcDensityUpdateEventDetail {
+    value: IcDataTableDensityOptions;
+}
+export type IcDataTableTruncationTypes = "tooltip" | "show-hide" | undefined;
+export interface IcSortEventDetail {
+    columnName: string;
+    sorted: IcDataTableSortOrderOptions;
+}
+export type truncWrapperDetailsTypes = {
+    scrollHeight: number | null;
+};
+export type IcDataTableDataType = {
+    [key: string]: any;
 };