@ukic/canary-web-components 2.0.0-canary.14 → 2.0.0-canary.16

package/dist/types/components.d.ts

@@ -5,17 +5,17 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./components/ic-data-table/ic-data-table.types";
-import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
-import { IcDateFormat, IcInformationStatusOrEmpty, IcSearchMatchPositions, IcSizes, IcValueEventDetail, IcWeekDays } from "./utils/types";
-import { IcActivationTypes, IcMenuOption } from "@ukic/web-components/dist/types/utils/types";
+import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
+import { IcActivationTypes, IcMenuOption, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
+import { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSearchMatchPositions, IcSizes, IcValueEventDetail, IcWeekDays } from "./utils/types";
 import { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
+import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
-export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./components/ic-data-table/ic-data-table.types";
-export { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
-export { IcDateFormat, IcInformationStatusOrEmpty, IcSearchMatchPositions, IcSizes, IcValueEventDetail, IcWeekDays } from "./utils/types";
-export { IcActivationTypes, IcMenuOption } from "@ukic/web-components/dist/types/utils/types";
+export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
+export { IcActivationTypes, IcMenuOption, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
+export { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSearchMatchPositions, IcSizes, IcValueEventDetail, IcWeekDays } from "./utils/types";
 export { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
+export { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 export { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
 export namespace Components {
     interface IcDataTable {
@@ -39,21 +39,43 @@ export namespace Components {
           * 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;
         /**
-          * Sets the props for the pagination bar.
+          * When set to `true`, the full table will show a loading state, featuring a radial indicator.
          */
-        "paginationOptions"?: {
-    itemsPerPage?: { label: string; value: string }[];
-    type?: IcPaginationTypes;
-    control?: IcPaginationControlTypes;
-    itemsPerPageControl?: boolean;
-    goToPageControl?: boolean;
-    alignment?: IcPaginationAlignmentOptions;
+        "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.
+         */
+        "paginationBarOptions"?: IcPaginationBarOptions;
+        /**
+          * Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.
+         */
+        "resetRowHeights": () => Promise<void>;
         /**
           * If `true`, adds a pagination bar to the bottom of the table.
          */
@@ -77,6 +99,45 @@ export namespace Components {
           * If `true`, row headers will remain to the left when scrolling horizontally.
          */
         "stickyRowHeaders"?: boolean;
+        /**
+          * 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;
+    }
+    interface IcDataTableTitleBar {
+        /**
+          * 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;
     }
     interface IcDateInput {
         /**
@@ -350,7 +411,11 @@ export namespace Components {
          */
         "appearance"?: IcThemeForeground;
         /**
-          * The label which will be used in place of 'items' if paginationType is data. Should be capitalised.
+          * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
+         */
+        "hideRangeLabel"?: boolean;
+        /**
+          * The text which will be used in place of 'Item' on the pagination bar.
          */
         "itemLabel"?: string;
         /**
@@ -361,25 +426,17 @@ export namespace Components {
     value: string;
   }[];
         /**
-          * The label which will be used in place of 'Page' if paginationType is page. Should be capitalised.
+          * The text which will be used in place of 'Page' on the pagination bar.
          */
         "pageLabel"?: string;
-        /**
-          * Whether the displayed pagination is simple or complex.
-         */
-        "paginationControl"?: IcPaginationControlTypes;
         /**
           * Whether total number of items and current item range or total number of pages and current page is displayed.
          */
-        "paginationType"?: IcPaginationTypes;
+        "rangeLabelType"?: IcPaginationLabelTypes;
         /**
           * If `true`, the 'go to page' control should be displayed.
          */
         "showGoToPageControl"?: boolean;
-        /**
-          * If `true`, the number of total items and current item range or number of total pages and current page should be displayed.
-         */
-        "showItemsPerPage"?: boolean;
         /**
           * If `true`, the select input to control 'items per page' should be displayed.
          */
@@ -388,6 +445,10 @@ export namespace Components {
           * Total number of items to be displayed across all pages.
          */
         "totalItems": number;
+        /**
+          * Whether the displayed pagination is simple or complex.
+         */
+        "type"?: IcPaginationTypes;
     }
     interface IcSelectWithMulti {
         /**
@@ -540,6 +601,14 @@ export namespace Components {
         "value"?: string | string[];
     }
 }
+export interface IcDataTableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcDataTableElement;
+}
+export interface IcDataTableTitleBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcDataTableTitleBarElement;
+}
 export interface IcDateInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcDateInputElement;
@@ -561,12 +630,40 @@ export interface IcSelectWithMultiCustomEvent<T> extends CustomEvent<T> {
     target: HTMLIcSelectWithMultiElement;
 }
 declare global {
+    interface HTMLIcDataTableElementEventMap {
+        "icRowHeightChange": void;
+    }
     interface HTMLIcDataTableElement extends Components.IcDataTable, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcDataTableElementEventMap>(type: K, listener: (this: HTMLIcDataTableElement, ev: IcDataTableCustomEvent<HTMLIcDataTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcDataTableElementEventMap>(type: K, listener: (this: HTMLIcDataTableElement, ev: IcDataTableCustomEvent<HTMLIcDataTableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIcDataTableElement: {
         prototype: HTMLIcDataTableElement;
         new (): HTMLIcDataTableElement;
     };
+    interface HTMLIcDataTableTitleBarElementEventMap {
+        "icTableDensityUpdate": IcDensityUpdateEventDetail;
+    }
+    interface HTMLIcDataTableTitleBarElement extends Components.IcDataTableTitleBar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcDataTableTitleBarElementEventMap>(type: K, listener: (this: HTMLIcDataTableTitleBarElement, ev: IcDataTableTitleBarCustomEvent<HTMLIcDataTableTitleBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcDataTableTitleBarElementEventMap>(type: K, listener: (this: HTMLIcDataTableTitleBarElement, ev: IcDataTableTitleBarCustomEvent<HTMLIcDataTableTitleBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIcDataTableTitleBarElement: {
+        prototype: HTMLIcDataTableTitleBarElement;
+        new (): HTMLIcDataTableTitleBarElement;
+    };
     interface HTMLIcDateInputElementEventMap {
         "calendarButtonClicked": { value: Date };
         "icBlur": { value: Date };
@@ -672,6 +769,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "ic-data-table": HTMLIcDataTableElement;
+        "ic-data-table-title-bar": HTMLIcDataTableTitleBarElement;
         "ic-date-input": HTMLIcDateInputElement;
         "ic-date-picker": HTMLIcDatePickerElement;
         "ic-menu-with-multi": HTMLIcMenuWithMultiElement;
@@ -701,21 +799,43 @@ declare namespace LocalJSX {
           * 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;
         /**
-          * Sets the props for the pagination bar.
+          * When set to `true`, the full table will show a loading state, featuring a radial indicator.
          */
-        "paginationOptions"?: {
-    itemsPerPage?: { label: string; value: string }[];
-    type?: IcPaginationTypes;
-    control?: IcPaginationControlTypes;
-    itemsPerPageControl?: boolean;
-    goToPageControl?: boolean;
-    alignment?: IcPaginationAlignmentOptions;
+        "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;
+        /**
+          * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.
+         */
+        "onIcRowHeightChange"?: (event: IcDataTableCustomEvent<void>) => void;
+        /**
+          * Sets the props for the pagination bar.
+         */
+        "paginationBarOptions"?: IcPaginationBarOptions;
         /**
           * If `true`, adds a pagination bar to the bottom of the table.
          */
@@ -739,6 +859,49 @@ declare namespace LocalJSX {
           * If `true`, row headers will remain to the left when scrolling horizontally.
          */
         "stickyRowHeaders"?: boolean;
+        /**
+          * 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;
+    }
+    interface IcDataTableTitleBar {
+        /**
+          * 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.
+         */
+        "onIcTableDensityUpdate"?: (event: IcDataTableTitleBarCustomEvent<IcDensityUpdateEventDetail>) => void;
     }
     interface IcDateInput {
         /**
@@ -1008,7 +1171,11 @@ declare namespace LocalJSX {
          */
         "appearance"?: IcThemeForeground;
         /**
-          * The label which will be used in place of 'items' if paginationType is data. Should be capitalised.
+          * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
+         */
+        "hideRangeLabel"?: boolean;
+        /**
+          * The text which will be used in place of 'Item' on the pagination bar.
          */
         "itemLabel"?: string;
         /**
@@ -1027,25 +1194,17 @@ declare namespace LocalJSX {
          */
         "onIcPageChange"?: (event: IcPaginationBarCustomEvent<{ value: number }>) => void;
         /**
-          * The label which will be used in place of 'Page' if paginationType is page. Should be capitalised.
+          * The text which will be used in place of 'Page' on the pagination bar.
          */
         "pageLabel"?: string;
-        /**
-          * Whether the displayed pagination is simple or complex.
-         */
-        "paginationControl"?: IcPaginationControlTypes;
         /**
           * Whether total number of items and current item range or total number of pages and current page is displayed.
          */
-        "paginationType"?: IcPaginationTypes;
+        "rangeLabelType"?: IcPaginationLabelTypes;
         /**
           * If `true`, the 'go to page' control should be displayed.
          */
         "showGoToPageControl"?: boolean;
-        /**
-          * If `true`, the number of total items and current item range or number of total pages and current page should be displayed.
-         */
-        "showItemsPerPage"?: boolean;
         /**
           * If `true`, the select input to control 'items per page' should be displayed.
          */
@@ -1054,6 +1213,10 @@ declare namespace LocalJSX {
           * Total number of items to be displayed across all pages.
          */
         "totalItems": number;
+        /**
+          * Whether the displayed pagination is simple or complex.
+         */
+        "type"?: IcPaginationTypes;
     }
     interface IcSelectWithMulti {
         /**
@@ -1235,6 +1398,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "ic-data-table": IcDataTable;
+        "ic-data-table-title-bar": IcDataTableTitleBar;
         "ic-date-input": IcDateInput;
         "ic-date-picker": IcDatePicker;
         "ic-menu-with-multi": IcMenuWithMulti;
@@ -1247,6 +1411,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "ic-data-table": LocalJSX.IcDataTable & JSXBase.HTMLAttributes<HTMLIcDataTableElement>;
+            "ic-data-table-title-bar": LocalJSX.IcDataTableTitleBar & JSXBase.HTMLAttributes<HTMLIcDataTableTitleBarElement>;
             "ic-date-input": LocalJSX.IcDateInput & JSXBase.HTMLAttributes<HTMLIcDateInputElement>;
             "ic-date-picker": LocalJSX.IcDatePicker & JSXBase.HTMLAttributes<HTMLIcDatePickerElement>;
             "ic-menu-with-multi": LocalJSX.IcMenuWithMulti & JSXBase.HTMLAttributes<HTMLIcMenuWithMultiElement>;

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

@@ -141,3 +141,4 @@ export declare const removeFormResetListener: (el: HTMLElement, callbackFn: IcCa
 export declare const removeDisabledFalse: (disabled: boolean, element: HTMLElement) => void;
 export declare const isMacDevice: () => boolean;
 export declare function waitForHydration(): Promise<boolean>;
+export declare const capitalize: (text: string) => string;

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

@@ -1,3 +1,4 @@
+import { IcPaginationLabelTypes, IcPaginationTypes, IcPaginationAlignmentOptions } from "../components";
 export type IcFocusableComponents = HTMLIcBreadcrumbElement | HTMLIcButtonElement | HTMLIcCardElement | HTMLIcCheckboxElement | HTMLIcChipElement | HTMLIcLinkElement | HTMLIcNavigationButtonElement | HTMLIcNavigationGroupElement | HTMLIcNavigationItemElement | HTMLIcRadioOptionElement | HTMLIcSearchBarElement | HTMLIcSelectElement | HTMLIcSwitchElement | HTMLIcTabElement | HTMLIcTextFieldElement;
 export type IcStatusVariants = "neutral" | "info" | "warning" | "error" | "success";
 export declare enum IcInformationStatus {
@@ -5,7 +6,6 @@ export declare enum IcInformationStatus {
     Error = "error",
     Success = "success"
 }
-export type IcSearchMatchPositions = "start" | "anywhere";
 export type IcSizes = "default" | "large" | "small";
 export type IcSizesNoLarge = "default" | "small";
 export type IcInformationStatusOrEmpty = "warning" | "error" | "success" | "";
@@ -17,10 +17,6 @@ export declare enum IcThemeForegroundEnum {
     Dark = "dark",
     Light = "light"
 }
-export interface IcValueEventDetail {
-    value: string | string[];
-    keyPressed?: string;
-}
 export type IcThemeForeground = "default" | "dark" | "light";
 export type IcThemeForegroundNoDefault = "dark" | "light";
 export type IcTheme = {
@@ -62,6 +58,22 @@ export interface IcMenuOption {
     };
     icon?: any;
 }
+export type IcSearchMatchPositions = "start" | "anywhere";
+export interface IcPaginationBarOptions {
+    itemsPerPageOptions?: {
+        label: string;
+        value: string;
+    }[];
+    rangeLabelType?: IcPaginationLabelTypes;
+    type?: IcPaginationTypes;
+    showItemsPerPageControl?: boolean;
+    showGoToPageControl?: boolean;
+    alignment?: IcPaginationAlignmentOptions;
+    appearance?: IcThemeForeground;
+    itemLabel?: string;
+    pageLabel?: string;
+    hideRangeLabel?: boolean;
+}
 export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
 export type IcDateFormat = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";
 export declare enum IcDateInputMonths {
@@ -105,3 +117,7 @@ export declare enum IcWeekDays {
     Friday = 5,
     Saturday = 6
 }
+export interface IcValueEventDetail {
+    value: string | string[];
+    keyPressed?: string;
+}