@ukic/web-components 2.1.0-beta.12 → 2.1.0-beta.14

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 import { IcButtonSizes, IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 import { IcChipAppearance, IcChipSizes } from "./components/ic-chip/ic-chip.types";
@@ -16,7 +16,9 @@ import { IcAriaLiveModeVariants } from "./components/ic-input-validation/ic-inpu
 import { IcLoadingSizes, IcLoadingTypes } from "./components/ic-loading-indicator/ic-loading-indicator.types";
 import { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail } from "./components/ic-menu/ic-menu.types";
 import { IcMenuItemVariants } from "./components/ic-menu-item/ic-menu-item.types";
-import { IcAutocompleteTypes as IcAutocompleteTypes1, IcAutocorrectStates as IcAutocorrectStates1, IcBlurEventDetail, IcInformationStatusOrEmpty as IcInformationStatusOrEmpty1, IcValueEventDetail } from "./interface";
+import { IcChangeEventDetail as IcChangeEventDetail1, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
+import { IcAutocompleteTypes as IcAutocompleteTypes1, IcAutocorrectStates as IcAutocorrectStates1, IcBlurEventDetail, IcInformationStatusOrEmpty as IcInformationStatusOrEmpty1, IcThemeForeground as IcThemeForeground1, IcValueEventDetail as IcValueEventDetail1 } from "./interface";
+import { IcPaginationItemType } from "./components/ic-pagination-item/ic-pagination-item.types";
 import { IcSearchBarBlurEventDetail } from "./components/ic-search-bar/ic-search-bar.types";
 import { IcSkeletonVariants } from "./components/ic-skeleton/ic-skeleton.types";
 import { IcStatusTagAppearance, IcStatusTagStatuses } from "./components/ic-status-tag/ic-status-tag.types";
@@ -911,6 +913,82 @@ export namespace Components {
          */
         "subheading"?: string;
     }
+    interface IcPagination {
+        /**
+          * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
+         */
+        "adjacentCount": number;
+        /**
+          * The appearance of the pagination, e.g. dark, light or the default.
+         */
+        "appearance": IcThemeForeground1;
+        /**
+          * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
+         */
+        "boundaryCount": number;
+        /**
+          * The default page to display.
+         */
+        "defaultPage": number;
+        /**
+          * If `true`, the pagination will not allow interaction.
+         */
+        "disabled": boolean;
+        /**
+          * If `true`, the current page of the simple pagination will not be displayed.
+         */
+        "hideCurrentPage": boolean;
+        /**
+          * If `true`, the first and last page buttons will not be displayed.
+         */
+        "hideFirstAndLastPageButton": boolean;
+        /**
+          * The label for the pagination item (applicable when simple pagination is being used).
+         */
+        "label": string;
+        /**
+          * The total number of pages.
+         */
+        "pages": number;
+        /**
+          * The type of pagination to be used.
+         */
+        "type": IcPaginationTypes;
+    }
+    interface IcPaginationItem {
+        /**
+          * The appearance of the pagination, e.g. dark, light or the default.
+         */
+        "appearance": IcThemeForeground1;
+        /**
+          * If true the aria-label will be set to `Page X of Y`, where X is the current page and Y is the page count.
+         */
+        "ariaOverride": boolean;
+        /**
+          * If `true`, the pagination item will be disabled.
+         */
+        "disabled": boolean;
+        /**
+          * The label for the pagination item (applicable when simple pagination is being used).
+         */
+        "label": string;
+        /**
+          * The current page number.
+         */
+        "page": number | null;
+        /**
+          * The total number of pages.
+         */
+        "pages": number;
+        /**
+          * If `true`, the pagination item will be selected.
+         */
+        "selected": boolean;
+        /**
+          * The type of pagination item - 'page' or 'ellipsis'.
+         */
+        "type": IcPaginationItemType;
+    }
     interface IcPopoverMenu {
         /**
           * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.
@@ -1071,6 +1149,18 @@ export namespace Components {
           * The label for the search bar.
          */
         "label": string;
+        /**
+          * Trigger loading state when fetching options asyncronously
+         */
+        "loading"?: boolean;
+        /**
+          * Change the message displayed when external loading times out.
+         */
+        "loadingErrorLabel"?: string;
+        /**
+          * Change the message displayed whilst the options are being loaded externally.
+         */
+        "loadingLabel"?: string;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -1103,6 +1193,10 @@ export namespace Components {
           * If `true`, the value of the search will have its spelling and grammar checked.
          */
         "spellcheck": boolean;
+        /**
+          * If using external filtering, set a timeout for when loading takes too long.
+         */
+        "timeout"?: number;
         /**
           * The value of the search input.
          */
@@ -1163,6 +1257,18 @@ export namespace Components {
           * The label for the select.
          */
         "label": string;
+        /**
+          * Trigger loading state when fetching options asyncronously
+         */
+        "loading"?: boolean;
+        /**
+          * Change the message displayed when external loading times out.
+         */
+        "loadingErrorLabel"?: string;
+        /**
+          * Change the message displayed whilst the options are being loaded externally.
+         */
+        "loadingLabel"?: string;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -1203,6 +1309,10 @@ export namespace Components {
           * If `true`, the small styling will be applied to the select.
          */
         "small"?: boolean;
+        /**
+          * If using external filtering, set a timeout for when loading takes too long.
+         */
+        "timeout"?: number;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -1485,7 +1595,7 @@ export namespace Components {
         /**
           * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)
          */
-        "max": number;
+        "max": string | number;
         /**
           * The maximum number of characters that can be entered in the field.
          */
@@ -1493,7 +1603,7 @@ export namespace Components {
         /**
           * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)
          */
-        "min": number;
+        "min": string | number;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -1540,6 +1650,7 @@ export namespace Components {
           * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.
          */
         "validationInline": boolean;
+        "validationInlineInternal": boolean;
         /**
           * The validation state - e.g. 'error' | 'warning' | 'success'.
          */
@@ -1606,6 +1717,12 @@ export namespace Components {
           * If `true`, the tooltip will not be displayed on hover, it will require a click.
          */
         "disableHover"?: boolean;
+        /**
+          * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
+          * @param show Whether to show or hide the tooltip
+          * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover
+         */
+        "displayTooltip": (show: boolean, persistTooltip?: boolean) => Promise<void>;
         /**
           * The text to display on the tooltip.
          */
@@ -1696,6 +1813,14 @@ export interface IcNavigationMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcNavigationMenuElement;
 }
+export interface IcPaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcPaginationElement;
+}
+export interface IcPaginationItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcPaginationItemElement;
+}
 export interface IcRadioGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcRadioGroupElement;
@@ -1937,6 +2062,18 @@ declare global {
         prototype: HTMLIcPageHeaderElement;
         new (): HTMLIcPageHeaderElement;
     };
+    interface HTMLIcPaginationElement extends Components.IcPagination, HTMLStencilElement {
+    }
+    var HTMLIcPaginationElement: {
+        prototype: HTMLIcPaginationElement;
+        new (): HTMLIcPaginationElement;
+    };
+    interface HTMLIcPaginationItemElement extends Components.IcPaginationItem, HTMLStencilElement {
+    }
+    var HTMLIcPaginationItemElement: {
+        prototype: HTMLIcPaginationItemElement;
+        new (): HTMLIcPaginationItemElement;
+    };
     interface HTMLIcPopoverMenuElement extends Components.IcPopoverMenu, HTMLStencilElement {
     }
     var HTMLIcPopoverMenuElement: {
@@ -2108,6 +2245,8 @@ declare global {
         "ic-navigation-item": HTMLIcNavigationItemElement;
         "ic-navigation-menu": HTMLIcNavigationMenuElement;
         "ic-page-header": HTMLIcPageHeaderElement;
+        "ic-pagination": HTMLIcPaginationElement;
+        "ic-pagination-item": HTMLIcPaginationItemElement;
         "ic-popover-menu": HTMLIcPopoverMenuElement;
         "ic-radio-group": HTMLIcRadioGroupElement;
         "ic-radio-option": HTMLIcRadioOptionElement;
@@ -3002,6 +3141,86 @@ declare namespace LocalJSX {
          */
         "subheading"?: string;
     }
+    interface IcPagination {
+        /**
+          * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
+         */
+        "adjacentCount"?: number;
+        /**
+          * The appearance of the pagination, e.g. dark, light or the default.
+         */
+        "appearance"?: IcThemeForeground1;
+        /**
+          * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
+         */
+        "boundaryCount"?: number;
+        /**
+          * The default page to display.
+         */
+        "defaultPage"?: number;
+        /**
+          * If `true`, the pagination will not allow interaction.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the current page of the simple pagination will not be displayed.
+         */
+        "hideCurrentPage"?: boolean;
+        /**
+          * If `true`, the first and last page buttons will not be displayed.
+         */
+        "hideFirstAndLastPageButton"?: boolean;
+        /**
+          * The label for the pagination item (applicable when simple pagination is being used).
+         */
+        "label"?: string;
+        /**
+          * Emitted when a page is selected.
+         */
+        "onIcPageChange"?: (event: IcPaginationCustomEvent<IcChangeEventDetail1>) => void;
+        /**
+          * The total number of pages.
+         */
+        "pages": number;
+        /**
+          * The type of pagination to be used.
+         */
+        "type"?: IcPaginationTypes;
+    }
+    interface IcPaginationItem {
+        /**
+          * The appearance of the pagination, e.g. dark, light or the default.
+         */
+        "appearance"?: IcThemeForeground1;
+        /**
+          * If true the aria-label will be set to `Page X of Y`, where X is the current page and Y is the page count.
+         */
+        "ariaOverride"?: boolean;
+        /**
+          * If `true`, the pagination item will be disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * The label for the pagination item (applicable when simple pagination is being used).
+         */
+        "label"?: string;
+        /**
+          * The current page number.
+         */
+        "page"?: number | null;
+        /**
+          * The total number of pages.
+         */
+        "pages"?: number;
+        /**
+          * If `true`, the pagination item will be selected.
+         */
+        "selected"?: boolean;
+        /**
+          * The type of pagination item - 'page' or 'ellipsis'.
+         */
+        "type"?: IcPaginationItemType;
+    }
     interface IcPopoverMenu {
         /**
           * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.
@@ -3040,7 +3259,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when a user selects a radio.
          */
-        "onIcChange"?: (event: IcRadioGroupCustomEvent<IcValueEventDetail>) => void;
+        "onIcChange"?: (event: IcRadioGroupCustomEvent<IcValueEventDetail1>) => void;
         /**
           * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.
          */
@@ -3090,11 +3309,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when a radio is selected.
          */
-        "onIcCheck"?: (event: IcRadioOptionCustomEvent<IcValueEventDetail>) => void;
+        "onIcCheck"?: (event: IcRadioOptionCustomEvent<IcValueEventDetail1>) => void;
         /**
           * @deprecated This event should not be used anymore. Use icCheck instead.
          */
-        "onRadioOptionSelect"?: (event: IcRadioOptionCustomEvent<IcValueEventDetail>) => void;
+        "onRadioOptionSelect"?: (event: IcRadioOptionCustomEvent<IcValueEventDetail1>) => void;
         /**
           * If `true`, the radio option will be displayed in a selected state.
          */
@@ -3165,6 +3384,18 @@ declare namespace LocalJSX {
           * The label for the search bar.
          */
         "label": string;
+        /**
+          * Trigger loading state when fetching options asyncronously
+         */
+        "loading"?: boolean;
+        /**
+          * Change the message displayed when external loading times out.
+         */
+        "loadingErrorLabel"?: string;
+        /**
+          * Change the message displayed whilst the options are being loaded externally.
+         */
+        "loadingLabel"?: string;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -3172,7 +3403,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value has changed.
          */
-        "onIcChange"?: (event: IcSearchBarCustomEvent<IcValueEventDetail>) => void;
+        "onIcChange"?: (event: IcSearchBarCustomEvent<IcValueEventDetail1>) => void;
         /**
           * Emitted when value is cleared with clear button
          */
@@ -3180,7 +3411,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when a keyboard input occurred.
          */
-        "onIcInput"?: (event: IcSearchBarCustomEvent<IcValueEventDetail>) => void;
+        "onIcInput"?: (event: IcSearchBarCustomEvent<IcValueEventDetail1>) => void;
         /**
           * @deprecated This event should not be used anymore. Use icSearchBarBlur instead.
          */
@@ -3188,7 +3419,7 @@ declare namespace LocalJSX {
         /**
           * @deprecated This event should not be used anymore. Use icSearchBarFocus instead.
          */
-        "onIcInputFocus"?: (event: IcSearchBarCustomEvent<IcValueEventDetail>) => void;
+        "onIcInputFocus"?: (event: IcSearchBarCustomEvent<IcValueEventDetail1>) => void;
         /**
           * Emitted when the state of the menu changes (i.e. open or close)
          */
@@ -3197,6 +3428,10 @@ declare namespace LocalJSX {
           * Emitted when option is highlighted within the menu
          */
         "onIcOptionSelect"?: (event: IcSearchBarCustomEvent<IcOptionSelectEventDetail>) => void;
+        /**
+          * Emitted when the 'retry loading' button is clicked
+         */
+        "onIcRetryLoad"?: (event: IcSearchBarCustomEvent<IcValueEventDetail1>) => void;
         /**
           * Emitted when blur is invoked from ic-search-bar
          */
@@ -3208,7 +3443,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the search value has been submitted
          */
-        "onIcSubmitSearch"?: (event: IcSearchBarCustomEvent<IcValueEventDetail>) => void;
+        "onIcSubmitSearch"?: (event: IcSearchBarCustomEvent<IcValueEventDetail1>) => void;
         /**
           * The suggested search options.
          */
@@ -3233,6 +3468,10 @@ declare namespace LocalJSX {
           * If `true`, the value of the search will have its spelling and grammar checked.
          */
         "spellcheck"?: boolean;
+        /**
+          * If using external filtering, set a timeout for when loading takes too long.
+         */
+        "timeout"?: number;
         /**
           * The value of the search input.
          */
@@ -3293,6 +3532,18 @@ declare namespace LocalJSX {
           * The label for the select.
          */
         "label": string;
+        /**
+          * Trigger loading state when fetching options asyncronously
+         */
+        "loading"?: boolean;
+        /**
+          * Change the message displayed when external loading times out.
+         */
+        "loadingErrorLabel"?: string;
+        /**
+          * Change the message displayed whilst the options are being loaded externally.
+         */
+        "loadingLabel"?: string;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -3304,7 +3555,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value changes.
          */
-        "onIcChange"?: (event: IcSelectCustomEvent<IcValueEventDetail>) => void;
+        "onIcChange"?: (event: IcSelectCustomEvent<IcValueEventDetail1>) => void;
         /**
           * Emitted when clear button clicked.
          */
@@ -3316,11 +3567,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when a keyboard input occurred.
          */
-        "onIcInput"?: (event: IcSelectCustomEvent<IcValueEventDetail>) => void;
+        "onIcInput"?: (event: IcSelectCustomEvent<IcValueEventDetail1>) => void;
         /**
           * Emitted when option is highlighted within the menu. Highlighting a menu item will trigger an `icChange/onIcChange` due to the value being updated.
          */
         "onIcOptionSelect"?: (event: IcSelectCustomEvent<IcOptionSelectEventDetail>) => void;
+        /**
+          * Emitted when the 'retry loading' button is clicked
+         */
+        "onIcRetryLoad"?: (event: IcSelectCustomEvent<IcValueEventDetail1>) => void;
         /**
           * The possible selection options.
          */
@@ -3353,6 +3608,10 @@ declare namespace LocalJSX {
           * If `true`, the small styling will be applied to the select.
          */
         "small"?: boolean;
+        /**
+          * If using external filtering, set a timeout for when loading takes too long.
+         */
+        "timeout"?: number;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -3622,7 +3881,7 @@ declare namespace LocalJSX {
         /**
           * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)
          */
-        "max"?: number;
+        "max"?: string | number;
         /**
           * The maximum number of characters that can be entered in the field.
          */
@@ -3630,7 +3889,7 @@ declare namespace LocalJSX {
         /**
           * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)
          */
-        "min"?: number;
+        "min"?: string | number;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -3638,19 +3897,19 @@ declare namespace LocalJSX {
         /**
           * Emitted when input loses focus.
          */
-        "onIcBlur"?: (event: IcTextFieldCustomEvent<IcValueEventDetail>) => void;
+        "onIcBlur"?: (event: IcTextFieldCustomEvent<IcValueEventDetail1>) => void;
         /**
           * Emitted when the value has changed.
          */
-        "onIcChange"?: (event: IcTextFieldCustomEvent<IcValueEventDetail>) => void;
+        "onIcChange"?: (event: IcTextFieldCustomEvent<IcValueEventDetail1>) => void;
         /**
           * Emitted when input gains focus.
          */
-        "onIcFocus"?: (event: IcTextFieldCustomEvent<IcValueEventDetail>) => void;
+        "onIcFocus"?: (event: IcTextFieldCustomEvent<IcValueEventDetail1>) => void;
         /**
           * Emitted when a keyboard input occurred.
          */
-        "onIcInput"?: (event: IcTextFieldCustomEvent<IcValueEventDetail>) => void;
+        "onIcInput"?: (event: IcTextFieldCustomEvent<IcValueEventDetail1>) => void;
         /**
           * Emitted when a keydown event occurred.
          */
@@ -3833,6 +4092,8 @@ declare namespace LocalJSX {
         "ic-navigation-item": IcNavigationItem;
         "ic-navigation-menu": IcNavigationMenu;
         "ic-page-header": IcPageHeader;
+        "ic-pagination": IcPagination;
+        "ic-pagination-item": IcPaginationItem;
         "ic-popover-menu": IcPopoverMenu;
         "ic-radio-group": IcRadioGroup;
         "ic-radio-option": IcRadioOption;
@@ -3894,6 +4155,8 @@ declare module "@stencil/core" {
             "ic-navigation-item": LocalJSX.IcNavigationItem & JSXBase.HTMLAttributes<HTMLIcNavigationItemElement>;
             "ic-navigation-menu": LocalJSX.IcNavigationMenu & JSXBase.HTMLAttributes<HTMLIcNavigationMenuElement>;
             "ic-page-header": LocalJSX.IcPageHeader & JSXBase.HTMLAttributes<HTMLIcPageHeaderElement>;
+            "ic-pagination": LocalJSX.IcPagination & JSXBase.HTMLAttributes<HTMLIcPaginationElement>;
+            "ic-pagination-item": LocalJSX.IcPaginationItem & JSXBase.HTMLAttributes<HTMLIcPaginationItemElement>;
             "ic-popover-menu": LocalJSX.IcPopoverMenu & JSXBase.HTMLAttributes<HTMLIcPopoverMenuElement>;
             "ic-radio-group": LocalJSX.IcRadioGroup & JSXBase.HTMLAttributes<HTMLIcRadioGroupElement>;
             "ic-radio-option": LocalJSX.IcRadioOption & JSXBase.HTMLAttributes<HTMLIcRadioOptionElement>;

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

@@ -43,6 +43,8 @@ export interface IcMenuOption {
   disabled?: boolean;
   recommended?: boolean;
   children?: IcMenuOption[];
+  loading?: boolean;
+  timedOut?: boolean;
 }
 export declare type IcSearchMatchPositions = "start" | "anywhere";
 export declare type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
@@ -55,6 +57,7 @@ export declare type IcRelatedTarget = EventTarget | undefined;
 export declare type IcOrientation = "horizontal" | "vertical";
 export interface IcValueEventDetail {
   value: string;
+  keyPressed?: string;
 }
 export interface IcBlurEventDetail {
   relatedTarget: IcRelatedTarget;