@ukic/canary-web-components 2.0.0-canary.9 → 3.0.0-canary.2

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

@@ -1,7 +1,42 @@
-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 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 previousItemsPerPage;
+    private DEFAULT_LINE_HEIGHT;
+    private densityUpdate;
+    private previousPaginationPage;
+    private truncationPatternUpdated;
+    private isNewDebounceDelaySet;
     el: HTMLIcDataTableElement;
     fromRow: number;
     previousRowsPerPage: number;
@@ -12,6 +47,8 @@ export declare class DataTable {
     sortedColumn: string;
     sortedColumnOrder: IcDataTableSortOrderOptions;
     toRow: number;
+    currentRowHeight: number;
+    debounceDelay: number;
     /**
      * The title for the table only visible to screen readers.
      */
@@ -23,9 +60,7 @@ export declare class DataTable {
     /**
      * The row content for the table.
      */
-    data: {
-        [key: string]: any;
-    }[];
+    data: IcDataTableDataType[];
     /**
      * Set the density of the table including font and padding.
      */
@@ -34,24 +69,52 @@ 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`, 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;
+        monochrome?: 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 +138,119 @@ 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;
+        monochrome?: boolean;
+    };
+    /**
+     * 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 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;
+    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 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 getRowOptions;
+    private regenerateTooltip;
+    private setTableDimensions;
+    private removeTooltip;
+    private addLineClampCSS;
+    private createTruncationTooltip;
     render(): any;
 }

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

@@ -1,6 +1,11 @@
 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 +14,32 @@ 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;
+    };
+};
+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;
 };

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

@@ -1,5 +1,79 @@
 import { IcDataTableColumnObject } from "./ic-data-table.types";
 export declare const COLS: IcDataTableColumnObject[];
+export declare const COLS_WIDTH: IcDataTableColumnObject[];
+export declare const VERY_LONG_DATA: (rows?: number) => {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+    rowOptions: {
+        textWrap: boolean;
+    };
+}[];
+export declare const textWrapColumns: () => IcDataTableColumnObject[];
+export declare const textWrapRow: () => ({
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    rowOptions: {
+        textWrap: boolean;
+    };
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    rowOptions: {
+        textWrap: boolean;
+    };
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+})[];
+export declare const textWrapCell: () => ({
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    jobTitle: {
+        data: string;
+        textWrap: boolean;
+    };
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+} | {
+    jobTitle: {
+        data: string;
+        textWrap: boolean;
+    };
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+})[];
 export declare const COLS_ALIGNMENT: IcDataTableColumnObject[];
 export declare const DATA: {
     firstName: string;
@@ -8,6 +82,75 @@ export declare const DATA: {
     jobTitle: string;
     address: string;
 }[];
+export declare const LONG_TEXT: {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+}[];
+export declare const TEXT_WRAP_LONG_DATA: ({
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: {
+        data: string;
+        textWrap: boolean;
+    };
+    rowOptions?: undefined;
+} | {
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+    rowOptions?: undefined;
+} | {
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+    rowOptions: {
+        textWrap: boolean;
+    };
+} | {
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+    rowOptions?: undefined;
+})[];
+export declare const COLUMNS_NO_TEXT_WRAP: IcDataTableColumnObject[];
+export declare const COLUMNS_TEXT_WRAP: IcDataTableColumnObject[];
+export declare const LONG_DATA_VALUES: ({
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+})[];
+export declare const LONG_DATA_VALUES_UPDATE: ({
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+})[];
 export declare const DATA_CELL_ALIGNMENT: ({
     firstName: {
         data: string;
@@ -52,6 +195,66 @@ export declare const ROW_ALIGNMENT: ({
     address: string;
 })[];
 export declare const LONG_COLS: IcDataTableColumnObject[];
+export declare const ICON_COLS: IcDataTableColumnObject[];
+export declare const ICON_DATA_LONG_VALUES: ({
+    firstName: {
+        data: string;
+        icon: string;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: {
+        data: string;
+        icon: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const ICON_DATA: ({
+    firstName: {
+        data: string;
+        icon: string;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: {
+        data: string;
+        icon: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: {
+        data: string;
+        icon: string;
+    };
+    address: string;
+})[];
 export declare const LONG_DATA: {
     employeeNumber: number;
     name: string;
@@ -72,25 +275,56 @@ export declare const ROW_HEADER_DATA: {
 }[];
 export declare const COLS_ELEMENTS: IcDataTableColumnObject[];
 export declare const DATA_ELEMENTS: ({
+    actions: string;
     firstName: {
         data: string;
         href: string;
     };
-    lastName: string;
+    actions2: string;
     age: number;
     jobTitle: string;
     address: string;
+} | {
     actions: string;
+    firstName: string;
+    actions2: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const DATA_REACT_ELEMENTS: ({
+    firstName: {
+        data: string;
+        href: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const DATA_REACT_ELEMENTS_WITH_ICONS: ({
+    firstName: {
+        data: string;
+        href: string;
+        icon: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
 } | {
     firstName: string;
-    lastName: string;
     age: number;
     jobTitle: string;
     address: string;
-    actions: string;
 })[];
 export declare const createDataTableElement: (caption: string, columns?: IcDataTableColumnObject[], data?: object[]) => HTMLIcDataTableElement;
 export declare const Basic: () => HTMLIcDataTableElement;
+export declare const DataTableSizing: () => HTMLElement;
+export declare const LargeDataSet: () => HTMLIcDataTableElement;
 export declare const Embedded: () => HTMLIcDataTableElement;
 export declare const Dense: () => HTMLElement;
 export declare const Spacious: () => HTMLElement;
@@ -103,3 +337,17 @@ export declare const ColumnOverrides: () => HTMLIcDataTableElement;
 export declare const RowOverrides: () => HTMLIcDataTableElement;
 export declare const CellOverrides: () => HTMLIcDataTableElement;
 export declare const LinksHTMLElements: () => HTMLIcDataTableElement;
+export declare const Empty: () => HTMLIcDataTableElement;
+export declare const EmptySlotted: () => HTMLIcDataTableElement;
+export declare const Loading: () => HTMLIcDataTableElement;
+export declare const EmptyLoading: () => HTMLIcDataTableElement;
+export declare const Updating: () => HTMLIcDataTableElement;
+export declare const CustomIcons: () => HTMLIcDataTableElement;
+export declare const CustomRowHeights: () => HTMLElement;
+export declare const TruncationShowHide: () => HTMLElement;
+export declare const TruncationTextWrap: () => HTMLElement;
+export declare const TruncationTooltip: () => HTMLElement;
+export declare const CustomTitleBar: () => HTMLIcDataTableElement;
+export declare const UpdatingData: () => HTMLElement;
+export declare const SlottedPagination: () => HTMLIcDataTableElement;
+export declare const DevArea: () => HTMLElement;

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

@@ -0,0 +1,36 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcDensityUpdateEventDetail } from "../ic-data-table/ic-data-table.types";
+/**
+ * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.
+ * @slot custom-actions - Render additional custom actions to the left of the density select.
+ * @slot heading - The heading to render on the data table title bar.
+ * @slot description - Render an alternative description in the description section.
+ */
+export declare class DataTableTitleBar {
+    private initialDensitySelectOption;
+    private isEmbedded;
+    el: HTMLIcDataTableTitleBarElement;
+    /**
+     * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.
+     */
+    description?: string;
+    /**
+     * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.
+     */
+    heading?: string;
+    /**
+     * When `true`, the density select will not be rendered.
+     */
+    hideDensitySelect?: boolean;
+    /**
+     * The metadata displayed next to the `heading`.
+     */
+    metadata?: string;
+    /**
+     * Emitted when the table density select value is changed.
+     */
+    icTableDensityUpdate: EventEmitter<IcDensityUpdateEventDetail>;
+    componentWillLoad(): void;
+    private changeDensity;
+    render(): any;
+}

package/dist/types/components/ic-date-input/ic-date-input.d.ts

@@ -32,6 +32,7 @@ export declare class DateInput {
     private preventMonthInput;
     private preventYearInput;
     private previousInvalidDateTest;
+    private previousEmittedDate;
     private previousSelectedDate;
     private selectedDate;
     private selectedDateInfoEl;
@@ -68,6 +69,7 @@ export declare class DateInput {
      * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
      */
     disableFuture?: boolean;
+    watchDisableFutureHandler(): void;
     /**
      * The text to display as the validation message when `disableFuture` is true and a date in the future is entered.
      */
@@ -76,6 +78,7 @@ export declare class DateInput {
      * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
      */
     disablePast?: boolean;
+    watchDisablePastHandler(): void;
     /**
      * The text to display as the validation message when `disablePast` is true and a date in the past is entered.
      */
@@ -84,10 +87,18 @@ export declare class DateInput {
      * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
      */
     helperText?: string;
+    /**
+     * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+     */
+    hideHelperText: boolean;
     /**
      * The ID for the input.
      */
     inputId?: string;
+    /**
+     * The text to display as the validation message when an invalid date is entered.
+     */
+    invalidDateMessage?: string;
     /**
      * The label for the date input.
      */
@@ -112,6 +123,7 @@ export declare class DateInput {
      * If `true`, the input will require a value.
      */
     required?: boolean;
+    watchRequiredHandler(): void;
     /**
      * @internal If `true`, a button which displays the calendar view when clicked will be displayed.
      */
@@ -178,6 +190,10 @@ export declare class DateInput {
      * @internal Used to pass disabledDays from parent component.
      */
     setDisableDays(days: IcWeekDays[]): Promise<void>;
+    /**
+     * @internal Used to enable other components to invoke an IcChange event from the input.
+     */
+    triggerIcChange(d: Date): Promise<void>;
     private setInputPasteValue;
     private checkSingleCopiedValueIsValid;
     /**
@@ -238,5 +254,6 @@ export declare class DateInput {
     private handleCalendarBlur;
     private handleClearFocus;
     private handleClearBlur;
+    private emitIcChange;
     render(): any;
 }