@ukic/canary-web-components 3.0.0-canary.6 → 3.0.0-canary.8

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

@@ -14,6 +14,7 @@ export declare class DataTable {
     private SORT_ICONS;
     private hasLoadedForOneSecond;
     private loadingIndicator;
+    private loadingOverlay;
     private timerStarted;
     private resizeObserver;
     private SHOW_HIDE_STRING;
@@ -30,6 +31,7 @@ export declare class DataTable {
     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;
@@ -40,6 +42,10 @@ export declare class DataTable {
     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;
@@ -85,6 +91,10 @@ export declare class DataTable {
      * 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.
      */
@@ -105,6 +115,7 @@ export declare class DataTable {
         progress?: number;
         showBackground?: boolean;
         monochrome?: boolean;
+        overlay?: boolean;
     };
     /**
      * Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`.
@@ -187,6 +198,10 @@ export declare class DataTable {
      * 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.
      */
@@ -261,12 +276,20 @@ export declare class DataTable {
     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.types.d.ts

@@ -28,6 +28,17 @@ export type IcDataTableColumnObject = {
         hideOnHeader?: boolean;
     };
 };
+export type IcLoadingOptions = {
+    monochrome?: boolean;
+    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;

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

@@ -376,13 +376,18 @@ export declare const ACTION_DATA_ELEMENTS: ({
     firstName: {
         data: string;
         actionElement: string;
+        actionOnClick: () => void;
     };
     lastName: string;
     age: number;
     jobTitle: string;
     address: string;
 } | {
-    firstName: string;
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick?: undefined;
+    };
     lastName: string;
     age: number;
     jobTitle: {
@@ -391,7 +396,11 @@ export declare const ACTION_DATA_ELEMENTS: ({
     };
     address: string;
 } | {
-    firstName: string;
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick?: undefined;
+    };
     lastName: string;
     age: {
         data: number;
@@ -400,13 +409,21 @@ export declare const ACTION_DATA_ELEMENTS: ({
     jobTitle: string;
     address: string;
 } | {
-    firstName: string;
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick?: undefined;
+    };
     lastName: string;
     age: number;
     jobTitle: string;
     address: string;
 } | {
-    firstName: string;
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick?: undefined;
+    };
     lastName: string;
     age: number;
     jobTitle: string;
@@ -422,6 +439,88 @@ export declare const DATA_WITH_EMPTY_VALUES: {
     jobTitle: string;
     address: string;
 }[];
+export declare const LONG_DATA_ELEMENTS_WITH_DESCRIPTIONS: ({
+    firstName: {
+        data: string;
+        description: {
+            data: string;
+            icon: string;
+        };
+        actionElement: string;
+        icon: string;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        actionElement: string;
+        description?: undefined;
+        icon?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        description: {
+            data: string;
+            icon: string;
+        };
+        actionElement: string;
+        icon?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        actionElement: string;
+        description: string;
+        data?: undefined;
+        icon?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const DATA_ELEMENTS_WITH_DESCRIPTIONS: ({
+    firstName: {
+        data: string;
+        description: {
+            data: string;
+            icon: string;
+        };
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: string;
+    age: {
+        data: number;
+        description: {
+            data: string;
+            icon: string;
+        };
+    };
+    jobTitle: {
+        data: string;
+        description: {
+            data: string;
+            icon: string;
+        };
+    };
+    address: string;
+})[];
 export declare const createDataTableElement: (caption: string, columns?: IcDataTableColumnObject[], data?: object[]) => HTMLIcDataTableElement;
 export declare const Basic: () => HTMLIcDataTableElement;
 export declare const DataTableSizing: () => HTMLElement;
@@ -454,4 +553,8 @@ export declare const UpdatingData: () => HTMLElement;
 export declare const SlottedPagination: () => HTMLIcDataTableElement;
 export declare const ActionElement: () => HTMLElement;
 export declare const MissingCellData: () => HTMLElement;
+export declare const TurnOffSelectedRowHighlighting: () => HTMLElement;
+export declare const SelectedRowChangeEvent: () => HTMLElement;
 export declare const DevArea: () => HTMLElement;
+export declare const CellDescriptions: () => HTMLIcDataTableElement;
+export declare const LongCellDescriptions: () => HTMLElement;

package/dist/types/components/ic-pagination-bar/ic-pagination-bar.d.ts

@@ -99,6 +99,11 @@ export declare class PaginationBar {
      */
     totalItems: number;
     watchTotalItemsHandler(): void;
+    /**
+     If `true`, the pagination bar is set to the first page when the 'items per page' changes
+     */
+    setToFirstPageOnPaginationChange?: boolean;
+    watchSetToFirstPageOnPaginationChange(): void;
     /**
      * Emitted when a page is navigated to via the 'go to' input.
      * The `detail` property contains `value` (i.e. the page number) and a `fromItemsPerPage` flag to indicate if the event was triggered by the `icItemsPerPageChange` event also occurring.
@@ -128,6 +133,7 @@ export declare class PaginationBar {
     private paginationShouldWrap;
     private runResizeObserver;
     private setInputError;
+    private setToFirstPage;
     private setItemsPerPage;
     private setPaginationBarContent;
     private setUpperBound;

package/dist/types/components/ic-tree-item/ic-tree-item.d.ts

@@ -99,7 +99,6 @@ export declare class TreeItem {
     private setTreeItemPadding;
     private truncateTreeItemLabel;
     private hasRouterSlot;
-    private hostMutationCallback;
     private handleDisplayTooltip;
     render(): any;
 }

package/dist/types/components/ic-tree-view/ic-tree-view.d.ts

@@ -47,7 +47,6 @@ export declare class TreeView {
     private getAllTreeItems;
     private addSlotChangeListener;
     private truncateTreeViewHeading;
-    private hostMutationCallback;
     private isHeadingDefined;
     private hasHeadingAreaContent;
     render(): any;

package/dist/types/components.d.ts

@@ -103,6 +103,10 @@ export namespace Components {
           * If `true`, column headers will not be visible.
          */
         "hideColumnHeaders"?: boolean;
+        /**
+          * If `true`, the selected row is highlighted using a background colour.
+         */
+        "highlightSelectedRow"?: boolean;
         /**
           * When set to `true`, the full table will show a loading state, featuring a radial indicator.
          */
@@ -119,6 +123,7 @@ export namespace Components {
     progress?: number;
     showBackground?: boolean;
     monochrome?: boolean;
+    overlay?: boolean;
   };
         /**
           * Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`.
@@ -480,6 +485,10 @@ export namespace Components {
           * Whether total number of items and current item range or total number of pages and current page is displayed.
          */
         "rangeLabelType"?: IcPaginationLabelTypes;
+        /**
+          * If `true`, the pagination bar is set to the first page when the 'items per page' changes
+         */
+        "setToFirstPageOnPaginationChange"?: boolean;
         /**
           * If `true`, the 'go to page' control should be displayed.
          */
@@ -616,6 +625,7 @@ declare global {
     };
     interface HTMLIcDataTableElementEventMap {
         "icRowHeightChange": void;
+        "icSelectedRowChange": object;
         "icSortChange": IcSortEventDetail;
     }
     interface HTMLIcDataTableElement extends Components.IcDataTable, HTMLStencilElement {
@@ -822,6 +832,10 @@ declare namespace LocalJSX {
           * If `true`, column headers will not be visible.
          */
         "hideColumnHeaders"?: boolean;
+        /**
+          * If `true`, the selected row is highlighted using a background colour.
+         */
+        "highlightSelectedRow"?: boolean;
         /**
           * When set to `true`, the full table will show a loading state, featuring a radial indicator.
          */
@@ -838,6 +852,7 @@ declare namespace LocalJSX {
     progress?: number;
     showBackground?: boolean;
     monochrome?: boolean;
+    overlay?: boolean;
   };
         /**
           * Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`.
@@ -855,6 +870,10 @@ declare namespace LocalJSX {
           * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.
          */
         "onIcRowHeightChange"?: (event: IcDataTableCustomEvent<void>) => void;
+        /**
+          * Emitted when the selected row changes in the data table.
+         */
+        "onIcSelectedRowChange"?: (event: IcDataTableCustomEvent<object>) => void;
         /**
           * Emitted when a column sort button is clicked.
          */
@@ -1222,6 +1241,10 @@ declare namespace LocalJSX {
           * Whether total number of items and current item range or total number of pages and current page is displayed.
          */
         "rangeLabelType"?: IcPaginationLabelTypes;
+        /**
+          * If `true`, the pagination bar is set to the first page when the 'items per page' changes
+         */
+        "setToFirstPageOnPaginationChange"?: boolean;
         /**
           * If `true`, the 'go to page' control should be displayed.
          */

package/dist/types/utils/helpers.d.ts

@@ -144,8 +144,11 @@ export declare const removeDisabledFalse: (disabled: boolean, element: HTMLEleme
 export declare const isMacDevice: () => boolean;
 export declare function waitForHydration(): Promise<boolean>;
 export declare const capitalize: (text: string) => string;
-export declare const checkSlotInChildMutations: (addedNodes: NodeList, removedNodes: NodeList, slotName: string) => boolean;
+export declare const checkSlotInChildMutations: (addedNodes: NodeList, removedNodes: NodeList, slotName: string | string[]) => boolean;
 export declare const addDataToPosition: (dataObject: IcDataTableDataType, newKeys: {
     key: string;
     index: number;
 }[], newValue: unknown) => IcDataTableDataType;
+export declare const isSlottedInGroup: (component: any) => boolean;
+export declare const hasDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[]) => boolean;
+export declare const renderDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[], ref: any) => void;

package/dist/types/utils/types.d.ts

@@ -76,6 +76,7 @@ export interface IcPaginationBarOptions {
     hideAllFromItemsPerPage?: boolean;
     theme?: IcThemeMode;
     monochrome?: boolean;
+    setToFirstPageOnPaginationChange?: boolean;
 }
 export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
 export type IcDateFormat = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";