@ukic/canary-web-components 2.0.0-canary.23 → 2.0.0-canary.25

package/dist/types/components.d.ts

@@ -6,14 +6,14 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
-import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
+import { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } 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, IcThemeForegroundNoDefault as IcThemeForegroundNoDefault1, 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 { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
-export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
+export { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } 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, IcThemeForegroundNoDefault as IcThemeForegroundNoDefault1, IcValueEventDetail, IcWeekDays } from "./utils/types";
 export { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
@@ -78,7 +78,7 @@ export namespace Components {
         /**
           * The row content for the table.
          */
-        "data": { [key: string]: any }[];
+        "data": IcDataTableDataType[];
         /**
           * Set the density of the table including font and padding.
          */
@@ -91,6 +91,10 @@ export namespace Components {
           * 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.
          */
@@ -112,6 +116,14 @@ export namespace Components {
     progress?: number;
     showBackground?: 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.
          */
@@ -148,7 +160,11 @@ export namespace Components {
          */
         "stickyRowHeaders"?: boolean;
         /**
-          * Sets the method used to truncate longer 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.
+          * 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;
         /**
@@ -172,6 +188,10 @@ export namespace Components {
     [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;
     }
     interface IcDataTableTitleBar {
         /**
@@ -241,6 +261,10 @@ export namespace Components {
           * 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.
          */
@@ -331,6 +355,10 @@ export namespace Components {
           * The ID for the input field. The default will be an automatically generated value.
          */
         "inputId"?: string;
+        /**
+          * The text to display as the validation message when an invalid date is entered.
+         */
+        "invalidDateMessage"?: string;
         /**
           * The label for the date input.
          */
@@ -448,6 +476,10 @@ export namespace Components {
           * The size of the menu.
          */
         "size"?: IcSizes;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
         /**
           * The value of the currently selected option - or array of values (if multiple options allowed).
          */
@@ -507,6 +539,10 @@ export namespace Components {
         "type"?: IcPaginationTypes;
     }
     interface IcSelectWithMulti {
+        /**
+          * **[DEPRECATED]** This prop should not be used anymore.
+         */
+        "charactersUntilSuggestions"?: number;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
@@ -514,7 +550,7 @@ export namespace Components {
         /**
           * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
          */
-        "disableAutoFiltering"?: boolean;
+        "disableFilter"?: boolean;
         /**
           * If `true`, the disabled state will be set.
          */
@@ -527,6 +563,26 @@ export namespace Components {
           * The <form> element to associate the select with.
          */
         "form"?: string;
+        /**
+          * The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the select's form owner. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formtarget"?: string;
         /**
           * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
          */
@@ -611,6 +667,10 @@ export namespace Components {
           * The size of the select.
          */
         "size"?: IcSizes;
+        /**
+          * **[DEPRECATED]** This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
         /**
           * If using external filtering, set a timeout for when loading takes too long.
          */
@@ -728,6 +788,7 @@ declare global {
     };
     interface HTMLIcDataTableElementEventMap {
         "icRowHeightChange": void;
+        "icSortChange": IcSortEventDetail;
     }
     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;
@@ -954,7 +1015,7 @@ declare namespace LocalJSX {
         /**
           * The row content for the table.
          */
-        "data"?: { [key: string]: any }[];
+        "data"?: IcDataTableDataType[];
         /**
           * Set the density of the table including font and padding.
          */
@@ -967,6 +1028,10 @@ declare namespace LocalJSX {
           * 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.
          */
@@ -988,6 +1053,14 @@ declare namespace LocalJSX {
     progress?: number;
     showBackground?: 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.
          */
@@ -996,6 +1069,10 @@ declare namespace LocalJSX {
           * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.
          */
         "onIcRowHeightChange"?: (event: IcDataTableCustomEvent<void>) => void;
+        /**
+          * Emitted when a column sort button is clicked.
+         */
+        "onIcSortChange"?: (event: IcDataTableCustomEvent<IcSortEventDetail>) => void;
         /**
           * Sets the props for the built-in pagination bar. If the `pagination-bar` slot is used then this prop is ignored.
          */
@@ -1024,7 +1101,11 @@ declare namespace LocalJSX {
          */
         "stickyRowHeaders"?: boolean;
         /**
-          * Sets the method used to truncate longer 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.
+          * 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;
         /**
@@ -1048,6 +1129,10 @@ declare namespace LocalJSX {
     [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;
     }
     interface IcDataTableTitleBar {
         /**
@@ -1116,6 +1201,10 @@ declare namespace LocalJSX {
           * 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.
          */
@@ -1214,6 +1303,10 @@ declare namespace LocalJSX {
           * The ID for the input field. The default will be an automatically generated value.
          */
         "inputId"?: string;
+        /**
+          * The text to display as the validation message when an invalid date is entered.
+         */
+        "invalidDateMessage"?: string;
         /**
           * The label for the date input.
          */
@@ -1324,6 +1417,10 @@ declare namespace LocalJSX {
           * The size of the menu.
          */
         "size"?: IcSizes;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
         /**
           * The value of the currently selected option - or array of values (if multiple options allowed).
          */
@@ -1391,6 +1488,10 @@ declare namespace LocalJSX {
         "type"?: IcPaginationTypes;
     }
     interface IcSelectWithMulti {
+        /**
+          * **[DEPRECATED]** This prop should not be used anymore.
+         */
+        "charactersUntilSuggestions"?: number;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
@@ -1398,7 +1499,7 @@ declare namespace LocalJSX {
         /**
           * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
          */
-        "disableAutoFiltering"?: boolean;
+        "disableFilter"?: boolean;
         /**
           * If `true`, the disabled state will be set.
          */
@@ -1411,6 +1512,26 @@ declare namespace LocalJSX {
           * The <form> element to associate the select with.
          */
         "form"?: string;
+        /**
+          * The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the select's form owner. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formtarget"?: string;
         /**
           * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
          */
@@ -1523,6 +1644,10 @@ declare namespace LocalJSX {
           * The size of the select.
          */
         "size"?: IcSizes;
+        /**
+          * **[DEPRECATED]** This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
         /**
           * If using external filtering, set a timeout for when loading takes too long.
          */

package/dist/types/interface.d.ts

@@ -1 +1,2 @@
 export * from "./components";
+export * from "./components/ic-data-table/ic-data-table.types";

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

@@ -6,6 +6,7 @@
 import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA } from "@ukic/web-components";
 import { IcMenuOption, IcThemeForeground } from "./types";
 import { EventEmitter } from "../stencil-public-runtime";
+import { IcDataTableDataType } from "../interface";
 /**
  * converts an enum of strings into an array of strings
  */
@@ -22,6 +23,7 @@ export declare const inheritAttributes: (element: HTMLElement, attributes?: stri
 };
 export declare const debounceEvent: (event: EventEmitter, wait: number) => EventEmitter;
 export declare const debounce: (func: (...args: unknown[]) => void, wait?: number) => unknown;
+export declare const dynamicDebounce: (func: (...args: unknown[]) => void, getDelay: () => number) => unknown;
 /**
  * This method is used to add a hidden input to a host element that contains
  * a Shadow DOM. It does not add the input inside of the Shadow root which
@@ -143,3 +145,7 @@ 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 addDataToPosition: (dataObject: IcDataTableDataType, newKeys: {
+    key: string;
+    index: number;
+}[], newValue: unknown) => IcDataTableDataType;

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

@@ -1,5 +1,5 @@
 import { IcPaginationLabelTypes, IcPaginationTypes, IcPaginationAlignmentOptions } from "../components";
-export type IcFocusableComponents = HTMLIcBreadcrumbElement | HTMLIcButtonElement | HTMLIcCardVerticalElement | HTMLIcCheckboxElement | HTMLIcChipElement | HTMLIcLinkElement | HTMLIcNavigationButtonElement | HTMLIcNavigationGroupElement | HTMLIcNavigationItemElement | HTMLIcRadioOptionElement | HTMLIcSearchBarElement | HTMLIcSelectElement | HTMLIcSwitchElement | HTMLIcTabElement | HTMLIcTextFieldElement;
+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 {
     Warning = "warning",