@ukic/canary-web-components 2.0.0-canary.32 → 2.0.0-canary.33

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

@@ -15,6 +15,7 @@ export declare class DataTable {
     private SORT_ICONS;
     private hasLoadedForOneSecond;
     private loadingIndicator;
+    private loadingOverlay;
     private timerStarted;
     private resizeObserver;
     private SHOW_HIDE_STRING;
@@ -31,6 +32,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;
@@ -41,6 +43,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;
@@ -86,6 +92,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.
      */
@@ -106,6 +116,7 @@ export declare class DataTable {
         min?: number;
         progress?: number;
         showBackground?: boolean;
+        overlay?: boolean;
     };
     /**
      * Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`.
@@ -184,6 +195,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.
      */
@@ -258,12 +273,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

@@ -1,3 +1,4 @@
+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";
@@ -28,6 +29,17 @@ export type IcDataTableColumnObject = {
         hideOnHeader?: 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;

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

@@ -351,13 +351,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: {
@@ -366,7 +371,11 @@ export declare const ACTION_DATA_ELEMENTS: ({
     };
     address: string;
 } | {
-    firstName: string;
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick?: undefined;
+    };
     lastName: string;
     age: {
         data: number;
@@ -375,13 +384,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;
@@ -397,6 +414,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;
@@ -429,4 +528,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

@@ -46,6 +46,7 @@ export declare class PaginationBar {
      * If `true`, the 'All' option will be hidden from the 'items per page' select input.
      */
     hideAllFromItemsPerPage?: boolean;
+    watchHideAllFromItemsPerPageHandler(): void;
     /**
      * The text which will be used in place of 'Item' on the pagination bar.
      */
@@ -95,6 +96,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.
@@ -124,7 +130,9 @@ export declare class PaginationBar {
     private paginationShouldWrap;
     private runResizeObserver;
     private setInputError;
+    private setToFirstPage;
     private setItemsPerPage;
+    private setItemsPerPageOptions;
     private setPaginationBarContent;
     private setUpperBound;
     render(): any;

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

@@ -95,7 +95,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

@@ -42,7 +42,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

@@ -105,6 +105,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.
          */
@@ -121,6 +125,7 @@ export namespace Components {
     min?: number;
     progress?: number;
     showBackground?: boolean;
+    overlay?: boolean;
   };
         /**
           * Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`.
@@ -543,6 +548,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.
          */
@@ -825,6 +834,7 @@ declare global {
     };
     interface HTMLIcDataTableElementEventMap {
         "icRowHeightChange": void;
+        "icSelectedRowChange": object;
         "icSortChange": IcSortEventDetail;
     }
     interface HTMLIcDataTableElement extends Components.IcDataTable, HTMLStencilElement {
@@ -1077,6 +1087,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.
          */
@@ -1093,6 +1107,7 @@ declare namespace LocalJSX {
     min?: number;
     progress?: number;
     showBackground?: boolean;
+    overlay?: boolean;
   };
         /**
           * Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`.
@@ -1110,6 +1125,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.
          */
@@ -1527,6 +1546,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,10 @@ 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 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

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