@ukic/canary-web-components 2.0.0-canary.11 → 2.0.0-canary.12

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

@@ -1,7 +1,24 @@
-import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./ic-data-table.types";
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail } from "./ic-data-table.types";
 import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "../ic-pagination/ic-pagination.types";
+import { IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/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.
+ */
 export declare class DataTable {
+    private DENSITY_HEIGHT_MULTIPLIER;
+    private DENSITY_PADDING_HEIGHT_DIFF;
     private SORT_ICONS;
+    private currentRowHeight;
+    private dataIsSorted;
+    private hasLoadedForOneSecond;
+    private itemsPerPageChanged;
+    private loadingIndicator;
+    private timerStarted;
+    private updateTruncation;
     el: HTMLIcDataTableElement;
     fromRow: number;
     previousRowsPerPage: number;
@@ -34,10 +51,35 @@ 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;
     /**
      * If `true`, column headers will not be visible.
      */
     hideColumnHeaders?: boolean;
+    /**
+     * 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;
+    };
+    /**
+     * 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 pagination bar.
      */
@@ -75,17 +117,70 @@ export declare class DataTable {
      * If `true`, row headers will remain to the left when scrolling horizontally.
      */
     stickyRowHeaders?: boolean;
+    /**
+     * For long text in cells that aren't set to textWrap, define how they should be truncated.
+     * `tooltip` adds a tooltip for the rest of the text, `showHide` adds 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;
+    /**
+     * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.
+     */
+    icRowHeightChange: EventEmitter<void>;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    componentDidUpdate(): void;
+    private removeDivStyles;
+    private VERTICAL_CLASSES;
+    private removeVerticalAlignment;
+    private setMaxLines;
+    private resetMaxLines;
+    private dataTruncation;
     handleItemsPerPageChange(ev: CustomEvent): void;
     handlePageChange(ev: CustomEvent): void;
+    handleDensityChange(ev: CustomEvent<IcDensityUpdateEventDetail>): void;
     clickListener(ev: MouseEvent): void;
+    loadingHandler(newValue: boolean): void;
+    dataHandler(newData: {
+        [key: string]: any;
+    }[]): void;
+    rowHeightChangeHandler(): void;
+    /**
+     * Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.
+     */
+    resetRowHeights(): Promise<void>;
+    private showLoadingIndicator;
+    private startLoadingTimer;
     private isObject;
     private notDefaultDensity;
     private getCellContent;
     private getCellAlignment;
+    private createUpdatingIndicator;
+    private setRowHeight;
     private createCells;
     private createColumnHeaders;
+    private onRowClick;
     private createRows;
     private getObjectValue;
     private getSortButtonLabel;

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

@@ -9,7 +9,18 @@ export type IcDataTableColumnObject = {
         horizontal?: string;
         vertical?: string;
     };
+    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" | "showHide";

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

@@ -8,6 +8,42 @@ export declare const DATA: {
     jobTitle: string;
     address: string;
 }[];
+export declare const COLUMNS_NO_TEXT_WRAP: IcDataTableColumnObject[];
+export declare const LONG_DATA_VALUES: ({
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+    textWrap?: undefined;
+} | {
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+    textWrap: boolean;
+} | {
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+    textWrap?: undefined;
+})[];
+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 +88,41 @@ export declare const ROW_ALIGNMENT: ({
     address: string;
 })[];
 export declare const LONG_COLS: IcDataTableColumnObject[];
+export declare const ICON_COLS: IcDataTableColumnObject[];
+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;
@@ -89,6 +160,24 @@ export declare const DATA_ELEMENTS: ({
     address: string;
     actions: string;
 })[];
+export declare const DATA_REACT_ELEMENTS: ({
+    firstName: {
+        data: string;
+        href: string;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+    actions: 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 Embedded: () => HTMLIcDataTableElement;
@@ -103,3 +192,13 @@ 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 TruncationTooltip: () => HTMLElement;
+export declare const CustomTitleBar: () => HTMLIcDataTableElement;

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-menu-with-multi/ic-menu.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcActivationTypes, IcMenuOption } from "@ukic/web-components/dist/types/utils/types";
+import { IcActivationTypes, IcMenuOption, IcSizes } from "@ukic/web-components/dist/types/utils/types";
 import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
-import { IcValueEventDetail, IcSizes } from "../../utils/types";
+import { IcValueEventDetail } from "../../utils/types";
 export declare class Menu {
     private activeDescendantAttr;
     private clearButtonId;

package/dist/types/components/ic-select-with-multi/ic-select.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcOptionSelectEventDetail } from "@ukic/web-components/dist/types/components";
-import { IcMenuOption } from "@ukic/web-components/dist/types/utils/types";
-import { IcInformationStatusOrEmpty, IcSearchMatchPositions, IcValueEventDetail, IcSizes } from "../../utils/types";
+import { IcMenuOption, IcSizes } from "@ukic/web-components/dist/types/utils/types";
+import { IcInformationStatusOrEmpty, IcSearchMatchPositions, IcValueEventDetail } from "../../utils/types";
 export declare class Select {
     private anchorEl;
     private blurredBecauseButtonPressed;