@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.3

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, IcBlurEventDetail, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 import { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
 import { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
@@ -33,7 +33,7 @@ import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from
 import { IcChangeEventDetail as IcChangeEventDetail3 } from "./components/ic-toggle-button-group/ic-toggle-button-group.types";
 import { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
 import { Options } from "@popperjs/core";
-export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 export { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
 export { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
@@ -137,7 +137,7 @@ export namespace Components {
          */
         "message"?: string;
         /**
-          * If `true`, the default icon for the neutral variant will be appear on the left of the alert.
+          * If `true`, the default icon for the neutral variant will appear on the left of the alert.
          */
         "showDefaultIcon": boolean;
         /**
@@ -516,7 +516,7 @@ export namespace Components {
     }
     interface IcChip {
         /**
-          * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+          * The custom chip colour. This will override 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)".
          */
         "customColor"?: IcColor;
         /**
@@ -540,7 +540,11 @@ export namespace Components {
          */
         "size"?: IcSizes;
         /**
-          * If `true`, the outlined variant of chip will have a transparent background rather than white.
+          * Sets the chip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component. Setting the "customColor" prop will override this.
+         */
+        "theme"?: "dark" | "light" | "inherit";
+        /**
+          * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.
          */
         "transparentBackground"?: boolean;
         /**
@@ -849,6 +853,10 @@ export namespace Components {
           * The helper text that will be displayed.
          */
         "helperText": string;
+        /**
+          * The label will be visually hidden.
+         */
+        "hideLabel": boolean;
         /**
           * The text content of the label.
          */
@@ -865,6 +873,7 @@ export namespace Components {
           * The status of the label - e.g. 'error'.
          */
         "status": "error" | "";
+        "useLabelTag": boolean;
     }
     interface IcInputValidation {
         /**
@@ -927,10 +936,6 @@ export namespace Components {
         "theme"?: IcThemeMode;
     }
     interface IcLoadingIndicator {
-        /**
-          * The appearance of the loading indicator, e.g. dark or light.
-         */
-        "appearance"?: IcThemeForegroundNoDefault;
         /**
           * The description that will be set as the aria-label of the loading indicator when not using a visible label.
          */
@@ -956,6 +961,10 @@ export namespace Components {
           * The minimum value that the progress value can take. Used to calculate the proportional width of the progress bar.
          */
         "min"?: number;
+        /**
+          * If `true`, the element will display as black and white.
+         */
+        "monochrome"?: boolean;
         /**
           * The current amount of progress made. If not provided, component acts as an indeterminate loading indicator.
          */
@@ -964,6 +973,10 @@ export namespace Components {
           * The size of the loading indicator.
          */
         "size"?: IcLoadingSizes;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme": IcThemeMode;
         /**
           * The type of indicator, either linear or circular.
          */
@@ -979,6 +992,10 @@ export namespace Components {
          */
         "anchorEl": HTMLElement;
         "autoFocusOnSelected": boolean;
+        /**
+          * If `true`, the menu will close when an option is selected.
+         */
+        "closeOnSelect": boolean;
         /**
           * If `true`, the menu will fill the width of the container.
          */
@@ -1022,13 +1039,13 @@ export namespace Components {
         "searchMode"?: IcSearchBarSearchModes;
         "selectOnEnter"?: boolean;
         /**
-          * The size of the menu component.
+          * The size of the menu.
          */
         "size"?: IcSizes;
         /**
-          * The value of the currently selected option.
+          * The value of the currently selected option - or array of values (if multiple options allowed).
          */
-        "value": string;
+        "value": string | string[];
         /**
           * The custom name for the value field for IcMenuOption.
          */
@@ -1301,6 +1318,10 @@ export namespace Components {
           * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.
          */
         "anchor": string;
+        /**
+          * @param setFocusToAnchor when true return focus to anchor element when menu is closed
+         */
+        "closeMenu": (setFocusToAnchor?: boolean) => Promise<void>;
         /**
           * If `true`, the popover menu will be displayed.
          */
@@ -1314,6 +1335,10 @@ export namespace Components {
          */
         "submenuId"?: string;
         "submenuLevel": number;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcRadioGroup {
         /**
@@ -1558,7 +1583,7 @@ export namespace Components {
          */
         "form"?: 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.
+          * If `true`, the select will fill the width of the container.
          */
         "fullWidth": boolean;
         /**
@@ -1593,6 +1618,10 @@ export namespace Components {
           * The message displayed whilst the options are being loaded externally.
          */
         "loadingLabel"?: string;
+        /**
+          * If `true`, multiple options can be selected.
+         */
+        "multiple"?: boolean;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -1622,7 +1651,7 @@ export namespace Components {
          */
         "searchable"?: boolean;
         /**
-          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select.
          */
         "selectOnEnter"?: boolean;
         /**
@@ -1634,7 +1663,7 @@ export namespace Components {
          */
         "showClearButton"?: boolean;
         /**
-          * The size of the select component.
+          * The size of the select.
          */
         "size"?: IcSizes;
         /**
@@ -1650,9 +1679,9 @@ export namespace Components {
          */
         "validationText"?: string;
         /**
-          * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input.
+          * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input. For the multi-select variant, the value must be an array of option values.
          */
-        "value"?: string;
+        "value"?: string | string[];
     }
     interface IcSideNavigation {
         /**
@@ -1699,9 +1728,9 @@ export namespace Components {
     }
     interface IcSkeleton {
         /**
-          * The appearance of the skeleton.
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "appearance"?: "light" | "default";
+        "theme"?: IcThemeMode;
         /**
           * The variant of the skeleton that will be displayed.
          */
@@ -1753,6 +1782,7 @@ export namespace Components {
           * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.
          */
         "subheading"?: string;
+        "theme"?: IcThemeMode;
         /**
           * The state of the step within the stepper.
          */
@@ -1764,10 +1794,6 @@ export namespace Components {
           * The alignment of the default stepper within its container.
          */
         "aligned"?: IcStepperAlignment;
-        /**
-          * The appearance of the stepper.
-         */
-        "appearance"?: "light" | "default";
         /**
           * The length of the connector between each step in pixels. Minimum length is 100px.
          */
@@ -1776,6 +1802,10 @@ export namespace Components {
           * 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;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The variant of the stepper.
          */
@@ -1818,6 +1848,10 @@ export namespace Components {
           * The size of the switch component.
          */
         "size"?: IcSizesNoLarge;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */
@@ -2659,8 +2693,8 @@ declare global {
         "menuKeyPress": { isNavKey: boolean; key: string };
         "menuOptionId": IcMenuOptionIdEventDetail;
         "menuOptionSelect": IcOptionSelectEventDetail;
+        "menuOptionSelectAll": { select: boolean };
         "menuStateChange": IcMenuChangeEventDetail;
-        "menuValueChange": IcValueEventDetail;
         "retryButtonClicked": IcValueEventDetail;
         "timeoutBlur": { ev: FocusEvent };
         "ungroupedOptionsSet": { options: IcMenuOption[] };
@@ -2888,6 +2922,7 @@ declare global {
         "icInput": IcValueEventDetail;
         "icOpen": void;
         "icOptionSelect": IcOptionSelectEventDetail;
+        "icOptionDeselect": IcOptionSelectEventDetail;
         "icRetryLoad": IcValueEventDetail;
     }
     interface HTMLIcSelectElement extends Components.IcSelect, HTMLStencilElement {
@@ -3307,7 +3342,7 @@ declare namespace LocalJSX {
          */
         "onIcDismiss"?: (event: IcAlertCustomEvent<void>) => void;
         /**
-          * If `true`, the default icon for the neutral variant will be appear on the left of the alert.
+          * If `true`, the default icon for the neutral variant will appear on the left of the alert.
          */
         "showDefaultIcon"?: boolean;
         /**
@@ -3685,7 +3720,7 @@ declare namespace LocalJSX {
     }
     interface IcChip {
         /**
-          * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+          * The custom chip colour. This will override 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)".
          */
         "customColor"?: IcColor;
         /**
@@ -3709,7 +3744,11 @@ declare namespace LocalJSX {
          */
         "size"?: IcSizes;
         /**
-          * If `true`, the outlined variant of chip will have a transparent background rather than white.
+          * Sets the chip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component. Setting the "customColor" prop will override this.
+         */
+        "theme"?: "dark" | "light" | "inherit";
+        /**
+          * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.
          */
         "transparentBackground"?: boolean;
         /**
@@ -4024,6 +4063,10 @@ declare namespace LocalJSX {
           * The helper text that will be displayed.
          */
         "helperText"?: string;
+        /**
+          * The label will be visually hidden.
+         */
+        "hideLabel"?: boolean;
         /**
           * The text content of the label.
          */
@@ -4098,10 +4141,6 @@ declare namespace LocalJSX {
         "theme"?: IcThemeMode;
     }
     interface IcLoadingIndicator {
-        /**
-          * The appearance of the loading indicator, e.g. dark or light.
-         */
-        "appearance"?: IcThemeForegroundNoDefault;
         /**
           * The description that will be set as the aria-label of the loading indicator when not using a visible label.
          */
@@ -4126,6 +4165,10 @@ declare namespace LocalJSX {
           * The minimum value that the progress value can take. Used to calculate the proportional width of the progress bar.
          */
         "min"?: number;
+        /**
+          * If `true`, the element will display as black and white.
+         */
+        "monochrome"?: boolean;
         /**
           * The current amount of progress made. If not provided, component acts as an indeterminate loading indicator.
          */
@@ -4134,6 +4177,10 @@ declare namespace LocalJSX {
           * The size of the loading indicator.
          */
         "size"?: IcLoadingSizes;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The type of indicator, either linear or circular.
          */
@@ -4148,6 +4195,10 @@ declare namespace LocalJSX {
           * The reference to an anchor element the menu will position itself from when rendered.
          */
         "anchorEl": HTMLElement;
+        /**
+          * If `true`, the menu will close when an option is selected.
+         */
+        "closeOnSelect"?: boolean;
         /**
           * If `true`, the menu will fill the width of the container.
          */
@@ -4181,13 +4232,13 @@ declare namespace LocalJSX {
          */
         "searchMode"?: IcSearchBarSearchModes;
         /**
-          * The size of the menu component.
+          * The size of the menu.
          */
         "size"?: IcSizes;
         /**
-          * The value of the currently selected option.
+          * The value of the currently selected option - or array of values (if multiple options allowed).
          */
-        "value": string;
+        "value": string | string[];
         /**
           * The custom name for the value field for IcMenuOption.
          */
@@ -4456,6 +4507,10 @@ declare namespace LocalJSX {
           * The unique identifier for a popover submenu.
          */
         "submenuId"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcRadioGroup {
         /**
@@ -4739,7 +4794,7 @@ declare namespace LocalJSX {
          */
         "form"?: 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.
+          * If `true`, the select will fill the width of the container.
          */
         "fullWidth"?: boolean;
         /**
@@ -4774,6 +4829,10 @@ declare namespace LocalJSX {
           * The message displayed whilst the options are being loaded externally.
          */
         "loadingLabel"?: string;
+        /**
+          * If `true`, multiple options can be selected.
+         */
+        "multiple"?: boolean;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -4807,7 +4866,11 @@ declare namespace LocalJSX {
          */
         "onIcOpen"?: (event: IcSelectCustomEvent<void>) => void;
         /**
-          * Emitted when an option is highlighted within the menu. Highlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated.
+          * Emitted when `multiple` is `true` and an option is deselected.
+         */
+        "onIcOptionDeselect"?: (event: IcSelectCustomEvent<IcOptionSelectEventDetail>) => void;
+        /**
+          * Emitted when an option is selected. Selecting an option will also trigger an `icChange/onIcChange` due to the value being updated.
          */
         "onIcOptionSelect"?: (event: IcSelectCustomEvent<IcOptionSelectEventDetail>) => void;
         /**
@@ -4839,7 +4902,7 @@ declare namespace LocalJSX {
          */
         "searchable"?: boolean;
         /**
-          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select.
          */
         "selectOnEnter"?: boolean;
         /**
@@ -4847,7 +4910,7 @@ declare namespace LocalJSX {
          */
         "showClearButton"?: boolean;
         /**
-          * The size of the select component.
+          * The size of the select.
          */
         "size"?: IcSizes;
         /**
@@ -4863,9 +4926,9 @@ declare namespace LocalJSX {
          */
         "validationText"?: string;
         /**
-          * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input.
+          * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input. For the multi-select variant, the value must be an array of option values.
          */
-        "value"?: string;
+        "value"?: string | string[];
     }
     interface IcSideNavigation {
         /**
@@ -4915,9 +4978,9 @@ declare namespace LocalJSX {
     }
     interface IcSkeleton {
         /**
-          * The appearance of the skeleton.
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "appearance"?: "light" | "default";
+        "theme"?: IcThemeMode;
         /**
           * The variant of the skeleton that will be displayed.
          */
@@ -4972,10 +5035,6 @@ declare namespace LocalJSX {
           * The alignment of the default stepper within its container.
          */
         "aligned"?: IcStepperAlignment;
-        /**
-          * The appearance of the stepper.
-         */
-        "appearance"?: "light" | "default";
         /**
           * The length of the connector between each step in pixels. Minimum length is 100px.
          */
@@ -4984,6 +5043,10 @@ declare namespace LocalJSX {
           * 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;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The variant of the stepper.
          */
@@ -5034,6 +5097,10 @@ declare namespace LocalJSX {
           * The size of the switch component.
          */
         "size"?: IcSizesNoLarge;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */

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

@@ -94,6 +94,13 @@ export declare const getLabelFromValue: (value: string, options: IcMenuOption[],
  * @returns filtered array of options
  */
 export declare const getFilteredMenuOptions: (options: IcMenuOption[], includeDescriptions: boolean, searchString: string, position: IcSearchMatchPositions, labelField?: string) => IcMenuOption[];
+/**
+ * Gets count of options where only group title "parent" options have been removed.
+ * Disabled options are included in the count.
+ * @param options - array of options
+ * @returns number of options not including group titles
+ */
+export declare const getOptionsWithoutGroupTitlesCount: (options: IcMenuOption[]) => number;
 export declare const deviceSizeMatches: (size: number) => boolean;
 export declare const getCurrentDeviceSize: () => number;
 export declare const getCssProperty: (cssVar: string) => string;

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

@@ -69,7 +69,7 @@ export type IcRelatedTarget = EventTarget | undefined;
 export type IcOrientation = "horizontal" | "vertical";
 export type IcEmphasisType = "filled" | "outlined";
 export interface IcValueEventDetail {
-    value: string;
+    value: string | string[];
     keyPressed?: string;
 }
 export interface IcBlurEventDetail {