@ukic/web-components 2.1.0-beta.2 → 2.1.0-beta.4

package/dist/types/components.d.ts

@@ -9,6 +9,7 @@ import { IcAlertVariants } from "./components/ic-alert/ic-alert.types";
 import { IcButtonSizes, IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants } from "./utils/types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
+import { IcChipAppearance, IcChipSizes } from "./components/ic-chip/ic-chip.types";
 import { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
 import { IcFooterBreakpoints } from "./components/ic-footer/ic-footer.types";
 import { IcHeroContentAlignments } from "./components/ic-hero/ic-hero.types";
@@ -19,7 +20,7 @@ import { IcAutocompleteTypes as IcAutocompleteTypes1, IcAutocorrectStates as IcA
 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";
-import { IcStepTypes } from "./components/ic-step/ic-step.types";
+import { IcStepStatuses, IcStepTypes, IcStepVariants } from "./components/ic-step/ic-step.types";
 import { IcStepperAlignment } from "./components/ic-stepper/ic-stepper.types";
 import { IcSwitchChangeEventDetail } from "./components/ic-switch/ic-switch.types";
 import { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-tab/ic-tab.types";
@@ -159,12 +160,16 @@ export namespace Components {
           * If `true`, the card will be disabled if it is clickable.
          */
         "disabled"?: boolean;
+        /**
+          * If `true`, the card will have an expandable area and expansion toggle button.
+         */
+        "expandable"?: boolean;
         /**
           * If `true`, the card will fill the width of the container.
          */
-        "fullWidth": boolean;
+        "fullWidth"?: boolean;
         /**
-          * The title for the card.
+          * The heading for the card.
          */
         "heading": string;
         /**
@@ -187,6 +192,10 @@ export namespace Components {
           * The relationship of the linked URL as space-separated link types.
          */
         "rel"?: string;
+        /**
+          * The subheading for the card.
+         */
+        "subheading"?: string;
         /**
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
@@ -268,6 +277,28 @@ export namespace Components {
          */
         "validationText": string;
     }
+    interface IcChip {
+        /**
+          * The emphasis of the chip.
+         */
+        "appearance"?: IcChipAppearance;
+        /**
+          * If `true`, the chip will appear disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the chip will have a close button at the end to dismiss it.
+         */
+        "dismissible"?: boolean;
+        /**
+          * The text rendered within the chip.
+         */
+        "label": string;
+        /**
+          * The size of the chip.
+         */
+        "size"?: IcChipSizes;
+    }
     interface IcClassificationBanner {
         /**
           * The additional information that will be displayed after the classification.
@@ -539,6 +570,7 @@ export namespace Components {
           * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.
          */
         "fullWidth"?: boolean;
+        "innerLabel"?: number;
         /**
           * The label to be displayed beneath the loading indicator. Display a changing label by separating multiple messages with forward slashes.
          */
@@ -583,7 +615,7 @@ export namespace Components {
          */
         "fullWidth": boolean;
         /**
-          * If menu is opened with the mouse, emit menuChange custom event.
+          * If menu is opened with the mouse, emit icMenuStateChange custom event.
          */
         "handleClickOpen": () => Promise<void>;
         /**
@@ -1026,9 +1058,6 @@ export namespace Components {
           * The URL that the app title link points to.
          */
         "href": string;
-        /**
-          * If `true`, side navigation will be contained by its parent element.
-         */
         "inline": boolean;
         /**
           * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
@@ -1054,6 +1083,10 @@ export namespace Components {
         "variant"?: IcSkeletonVariants;
     }
     interface IcStatusTag {
+        /**
+          * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.
+         */
+        "announced"?: boolean;
         /**
           * The emphasis of the status tag.
          */
@@ -1072,30 +1105,48 @@ export namespace Components {
         "status"?: IcStatusTagStatuses;
     }
     interface IcStep {
-        "lastStep"?: boolean;
+        "compactStepStyling"?: IcStepTypes;
+        "current"?: boolean;
+        "lastStep": boolean;
+        "lastStepNum"?: number;
+        "nextStepTitle"?: string;
+        "progress"?: number;
         "stepNum"?: number;
         /**
-          * The additional information about the step.
+          * The status of the step. Use this prop to display a status message on the step if it is required or optional.
+         */
+        "stepStatus"?: IcStepStatuses;
+        /**
+          * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.
          */
         "stepSubtitle"?: string;
         /**
-          * The name of the step within the stepper.
+          * The title of the step within the stepper.
          */
         "stepTitle"?: string;
         /**
           * The state of the step within the stepper.
          */
         "stepType"?: IcStepTypes;
+        "variant": IcStepVariants;
     }
     interface IcStepper {
         /**
-          * The alignment of the stepper within its container.
+          * The alignment of the default stepper within its container.
          */
         "aligned"?: IcStepperAlignment;
         /**
           * The length of the connnector between each step in pixels. Minimum length is 100px.
          */
         "connectorWidth"?: number;
+        /**
+          * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
+         */
+        "hideStepInfo"?: boolean;
+        /**
+          * The variant of the stepper.
+         */
+        "variant"?: IcStepVariants;
     }
     interface IcSwitch {
         /**
@@ -1160,7 +1211,7 @@ export namespace Components {
          */
         "contextId"?: string;
         /**
-          * The selected tab to be controlled by the user. Must be used alongside the tabSelect event to manage tab selection.
+          * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.
          */
         "selectedTabIndex"?: number;
     }
@@ -1314,6 +1365,10 @@ export namespace Components {
         "color"?: string;
     }
     interface IcTooltip {
+        /**
+          * If `true`, the tooltip will not be displayed on hover, it will require a click.
+         */
+        "disableHover"?: boolean;
         /**
           * The text to display on the tooltip.
          */
@@ -1380,6 +1435,10 @@ export interface IcCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcCheckboxGroupElement;
 }
+export interface IcChipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcChipElement;
+}
 export interface IcFooterCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcFooterElement;
@@ -1485,6 +1544,12 @@ declare global {
         prototype: HTMLIcCheckboxGroupElement;
         new (): HTMLIcCheckboxGroupElement;
     };
+    interface HTMLIcChipElement extends Components.IcChip, HTMLStencilElement {
+    }
+    var HTMLIcChipElement: {
+        prototype: HTMLIcChipElement;
+        new (): HTMLIcChipElement;
+    };
     interface HTMLIcClassificationBannerElement extends Components.IcClassificationBanner, HTMLStencilElement {
     }
     var HTMLIcClassificationBannerElement: {
@@ -1734,6 +1799,7 @@ declare global {
         "ic-card": HTMLIcCardElement;
         "ic-checkbox": HTMLIcCheckboxElement;
         "ic-checkbox-group": HTMLIcCheckboxGroupElement;
+        "ic-chip": HTMLIcChipElement;
         "ic-classification-banner": HTMLIcClassificationBannerElement;
         "ic-data-entity": HTMLIcDataEntityElement;
         "ic-data-row": HTMLIcDataRowElement;
@@ -1795,9 +1861,13 @@ declare namespace LocalJSX {
          */
         "message"?: string;
         /**
-          * Is emitted when the user dismisses the alert.
+          * @deprecated This event should not be used anymore. Use icDismiss instead.
          */
         "onDismiss"?: (event: IcAlertCustomEvent<void>) => void;
+        /**
+          * Is emitted when the user dismisses the alert.
+         */
+        "onIcDismiss"?: (event: IcAlertCustomEvent<void>) => void;
         /**
           * If `true`, the title and message will appear inline instead of above and below.
          */
@@ -1916,12 +1986,16 @@ declare namespace LocalJSX {
           * If `true`, the card will be disabled if it is clickable.
          */
         "disabled"?: boolean;
+        /**
+          * If `true`, the card will have an expandable area and expansion toggle button.
+         */
+        "expandable"?: boolean;
         /**
           * If `true`, the card will fill the width of the container.
          */
         "fullWidth"?: boolean;
         /**
-          * The title for the card.
+          * The heading for the card.
          */
         "heading": string;
         /**
@@ -1944,6 +2018,10 @@ declare namespace LocalJSX {
           * The relationship of the linked URL as space-separated link types.
          */
         "rel"?: string;
+        /**
+          * The subheading for the card.
+         */
+        "subheading"?: string;
         /**
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
@@ -1983,9 +2061,13 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emitted when a checkbox has been checked
+          * @deprecated This event should not be used anymore. Use icCheck instead.
          */
         "onCheckboxChecked"?: (event: IcCheckboxCustomEvent<void>) => void;
+        /**
+          * Emitted when a checkbox has been checked.
+         */
+        "onIcCheck"?: (event: IcCheckboxCustomEvent<void>) => void;
         /**
           * The value for the checkbox.
          */
@@ -2033,6 +2115,32 @@ declare namespace LocalJSX {
          */
         "validationText"?: string;
     }
+    interface IcChip {
+        /**
+          * The emphasis of the chip.
+         */
+        "appearance"?: IcChipAppearance;
+        /**
+          * If `true`, the chip will appear disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the chip will have a close button at the end to dismiss it.
+         */
+        "dismissible"?: boolean;
+        /**
+          * The text rendered within the chip.
+         */
+        "label": string;
+        /**
+          * Is emitted when the user dismisses the chip.
+         */
+        "onDismiss"?: (event: IcChipCustomEvent<void>) => void;
+        /**
+          * The size of the chip.
+         */
+        "size"?: IcChipSizes;
+    }
     interface IcClassificationBanner {
         /**
           * The additional information that will be displayed after the classification.
@@ -2106,10 +2214,6 @@ declare namespace LocalJSX {
           * If `true`, the footer will be set up to handle link groups instead of standalone links.
          */
         "groupLinks"?: boolean;
-        /**
-          * Triggers on page resize and triggers style changes in footer links and link groups
-         */
-        "onIcFooterResized"?: (event: IcFooterCustomEvent<void>) => void;
     }
     interface IcFooterLink {
         /**
@@ -2365,15 +2469,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when state of menu changes (i.e. open or close).
          */
-        "onMenuChange"?: (event: IcMenuCustomEvent<IcMenuChangeEventDetail>) => void;
-        /**
-          * Emitted when an option has been highlighted
-         */
-        "onMenuOptionId"?: (event: IcMenuCustomEvent<IcMenuOptionIdEventDetail>) => void;
+        "onIcMenuStateChange"?: (event: IcMenuCustomEvent<IcMenuChangeEventDetail>) => void;
         /**
           * Emitted when an option is selected.
          */
-        "onOptionSelect"?: (event: IcMenuCustomEvent<IcOptionSelectEventDetail>) => void;
+        "onIcOptionSelect"?: (event: IcMenuCustomEvent<IcOptionSelectEventDetail>) => void;
         /**
           * If `true`, the menu will be displayed open.
          */
@@ -2559,6 +2659,10 @@ declare namespace LocalJSX {
         /**
           * Emitted when a radio is selected.
          */
+        "onIcCheck"?: (event: IcRadioOptionCustomEvent<IcValueEventDetail>) => void;
+        /**
+          * @deprecated This event should not be used anymore. Use icCheck instead.
+         */
         "onRadioOptionSelect"?: (event: IcRadioOptionCustomEvent<IcValueEventDetail>) => void;
         /**
           * If `true`, the radio option will be displayed in a selected state.
@@ -2647,11 +2751,11 @@ declare namespace LocalJSX {
          */
         "onIcInput"?: (event: IcSearchBarCustomEvent<IcValueEventDetail>) => void;
         /**
-          * Emitted when input loses focus.
+          * @deprecated This event should not be used anymore. Use icSearchBarBlur instead.
          */
         "onIcInputBlur"?: (event: IcSearchBarCustomEvent<IcSearchBarBlurEventDetail>) => void;
         /**
-          * Emitted when input gains focus.
+          * @deprecated This event should not be used anymore. Use icSearchBarFocus instead.
          */
         "onIcInputFocus"?: (event: IcSearchBarCustomEvent<IcValueEventDetail>) => void;
         /**
@@ -2832,10 +2936,6 @@ declare namespace LocalJSX {
           * The URL that the app title link points to.
          */
         "href"?: string;
-        /**
-          * If `true`, side navigation will be contained by its parent element.
-         */
-        "inline"?: boolean;
         /**
           * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
          */
@@ -2860,6 +2960,10 @@ declare namespace LocalJSX {
         "variant"?: IcSkeletonVariants;
     }
     interface IcStatusTag {
+        /**
+          * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.
+         */
+        "announced"?: boolean;
         /**
           * The emphasis of the status tag.
          */
@@ -2879,11 +2983,15 @@ declare namespace LocalJSX {
     }
     interface IcStep {
         /**
-          * The additional information about the step.
+          * The status of the step. Use this prop to display a status message on the step if it is required or optional.
+         */
+        "stepStatus"?: IcStepStatuses;
+        /**
+          * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.
          */
         "stepSubtitle"?: string;
         /**
-          * The name of the step within the stepper.
+          * The title of the step within the stepper.
          */
         "stepTitle"?: string;
         /**
@@ -2893,13 +3001,21 @@ declare namespace LocalJSX {
     }
     interface IcStepper {
         /**
-          * The alignment of the stepper within its container.
+          * The alignment of the default stepper within its container.
          */
         "aligned"?: IcStepperAlignment;
         /**
           * The length of the connnector between each step in pixels. Minimum length is 100px.
          */
         "connectorWidth"?: number;
+        /**
+          * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
+         */
+        "hideStepInfo"?: boolean;
+        /**
+          * The variant of the stepper.
+         */
+        "variant"?: IcStepVariants;
     }
     interface IcSwitch {
         /**
@@ -2956,10 +3072,6 @@ declare namespace LocalJSX {
           * If `true`, the disabled state will be set.
          */
         "disabled"?: boolean;
-        /**
-          * Emitted when a tab is selected.
-         */
-        "onTabClick"?: (event: IcTabCustomEvent<IcTabClickEventDetail>) => void;
     }
     interface IcTabContext {
         /**
@@ -2977,9 +3089,13 @@ declare namespace LocalJSX {
         /**
           * Emitted when a user selects a tab.
          */
+        "onIcTabSelect"?: (event: IcTabContextCustomEvent<IcTabSelectEventDetail>) => void;
+        /**
+          * @deprecated This event should not be used anymore. Use icTabSelect instead.
+         */
         "onTabSelect"?: (event: IcTabContextCustomEvent<IcTabSelectEventDetail>) => void;
         /**
-          * The selected tab to be controlled by the user. Must be used alongside the tabSelect event to manage tab selection.
+          * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.
          */
         "selectedTabIndex"?: number;
     }
@@ -3134,12 +3250,12 @@ declare namespace LocalJSX {
           * The theme colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
          */
         "color"?: string;
-        /**
-          * Emitted when the theme is changed.
-         */
-        "onIcThemeChange"?: (event: IcThemeCustomEvent<IcTheme>) => void;
     }
     interface IcTooltip {
+        /**
+          * If `true`, the tooltip will not be displayed on hover, it will require a click.
+         */
+        "disableHover"?: boolean;
         /**
           * The text to display on the tooltip.
          */
@@ -3198,6 +3314,7 @@ declare namespace LocalJSX {
         "ic-card": IcCard;
         "ic-checkbox": IcCheckbox;
         "ic-checkbox-group": IcCheckboxGroup;
+        "ic-chip": IcChip;
         "ic-classification-banner": IcClassificationBanner;
         "ic-data-entity": IcDataEntity;
         "ic-data-row": IcDataRow;
@@ -3252,6 +3369,7 @@ declare module "@stencil/core" {
             "ic-card": LocalJSX.IcCard & JSXBase.HTMLAttributes<HTMLIcCardElement>;
             "ic-checkbox": LocalJSX.IcCheckbox & JSXBase.HTMLAttributes<HTMLIcCheckboxElement>;
             "ic-checkbox-group": LocalJSX.IcCheckboxGroup & JSXBase.HTMLAttributes<HTMLIcCheckboxGroupElement>;
+            "ic-chip": LocalJSX.IcChip & JSXBase.HTMLAttributes<HTMLIcChipElement>;
             "ic-classification-banner": LocalJSX.IcClassificationBanner & JSXBase.HTMLAttributes<HTMLIcClassificationBannerElement>;
             "ic-data-entity": LocalJSX.IcDataEntity & JSXBase.HTMLAttributes<HTMLIcDataEntityElement>;
             "ic-data-row": LocalJSX.IcDataRow & JSXBase.HTMLAttributes<HTMLIcDataRowElement>;

package/dist/types/testspec.setup.d.ts

@@ -1,3 +1,4 @@
 export declare const waitForTimeout: (ms: number) => Promise<void>;
 export declare const mockDeviceSize: (size: number) => void;
 export declare const waitForNavGroupLoad: () => Promise<void>;
+export declare const resizeTo: (windowObj: typeof window, width: number, height: number) => void;