@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/dist/types/components/ic-radio-option/ic-radio-option.d.ts

@@ -6,13 +6,13 @@ import { IcAdditionalFieldTypes, IcThemeMode, IcValueEventDetail } from "../../u
 export declare class RadioOption {
     private defaultRadioValue;
     private hasAdditionalField;
-    private radioElement;
+    private radioElement?;
     private skipFocus;
     el: HTMLIcRadioOptionElement;
     /**
      * The style of additionalField that will be displayed if used.
      */
-    additionalFieldDisplay: IcAdditionalFieldTypes;
+    additionalFieldDisplay?: IcAdditionalFieldTypes;
     /**
      * If `true`, the disabled state will be set.
      */
@@ -21,7 +21,7 @@ export declare class RadioOption {
     /**
      * The text to be displayed when dynamic.
      */
-    dynamicText: string;
+    dynamicText?: string;
     /**
      * The <form> element to associate the radio with.
      */
@@ -29,7 +29,7 @@ export declare class RadioOption {
     /**
      * The group label for the radio option.
      */
-    groupLabel: string;
+    groupLabel?: string;
     /**
      * The label for the radio option.
      */
@@ -37,7 +37,7 @@ export declare class RadioOption {
     /**
      * The name for the radio option.
      */
-    name: string;
+    name?: 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.
      */
@@ -50,7 +50,7 @@ export declare class RadioOption {
      * If `true`, the radio option will be displayed in a selected state.
      */
     selected?: boolean;
-    initiallySelected: boolean;
+    initiallySelected: boolean | undefined;
     watchSelectedHandler(): void;
     /**
      * Emitted when the radio option is selected.

package/dist/types/components/ic-search-bar/ic-search-bar.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAutocompleteTypes, IcAutocorrectStates, IcMenuOption, IcSizesNoLarge, IcThemeMode } from "../../utils/types";
+import { IcAutocompleteTypes, IcAutocorrectStates, IcMenuOption, IcMultiValueEventDetail, IcSizesNoLarge, IcThemeMode } from "../../utils/types";
 import { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./ic-search-bar.types";
 import { IcValueEventDetail, IcBlurEventDetail } from "../../utils/types";
 import { IcMenuChangeEventDetail, IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
@@ -10,7 +10,7 @@ export declare class SearchBar {
     private hasTimedOut;
     private inputEl;
     private inputId;
-    private menu;
+    private menu?;
     private menuCloseFromMenuChangeEvent;
     private menuId;
     private preLoad;
@@ -20,11 +20,11 @@ export declare class SearchBar {
     private retryViaKeyPress;
     private timeoutTimer;
     private truncateValue;
-    private searchSubmitButton;
+    private searchSubmitButton?;
     el: HTMLIcSearchBarElement;
     ariaActiveDescendant: string;
     clearButtonFocused: boolean;
-    highlightedValue: string;
+    highlightedValue: string | undefined;
     open: boolean;
     searchSubmitFocused: boolean;
     showClearButton: boolean;
@@ -32,7 +32,7 @@ export declare class SearchBar {
      * The automatic capitalisation of the text value as it is entered/edited by the user.
      * Available options: "off", "none", "on", "sentences", "words", "characters".
      */
-    autocapitalize: string;
+    autocapitalize: string | undefined;
     /**
      * The state of autocompletion the browser can apply on the text value.
      */
@@ -44,11 +44,11 @@ export declare class SearchBar {
     /**
      * If `true`, the form control will have input focus when the page loads.
      */
-    autofocus: boolean;
+    autofocus: boolean | undefined;
     /**
      * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.
      */
-    charactersUntilSuggestion: number;
+    charactersUntilSuggestion?: number;
     /**
      * If `true`, the disabled state will be set.
      */
@@ -67,7 +67,7 @@ export declare class SearchBar {
     /**
      * The text displayed when there are no options in the option list.
      */
-    emptyOptionListText: string;
+    emptyOptionListText?: string;
     /**
      * If `true`, the search bar will be focused when component loaded.
      */
@@ -112,7 +112,7 @@ export declare class SearchBar {
     /**
      * The name of the control, which is submitted with the form data.
      */
-    name: string;
+    name?: string;
     /**
      * The placeholder value to display.
      */
@@ -136,7 +136,7 @@ export declare class SearchBar {
     /**
      * If `true`, the value of the search will have its spelling and grammar checked.
      */
-    spellcheck: boolean;
+    spellcheck: boolean | undefined;
     /**
      * 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.
      */
@@ -160,7 +160,7 @@ export declare class SearchBar {
     /**
      * The value of the search input.
      */
-    value: string;
+    value?: string;
     watchValueHandler(newValue: string): void;
     /**
      * Emitted when the value has changed.
@@ -194,7 +194,7 @@ export declare class SearchBar {
     /**
      * Emitted when the 'retry loading' button is clicked
      */
-    icRetryLoad: EventEmitter<IcValueEventDetail>;
+    icRetryLoad: EventEmitter<IcMultiValueEventDetail>;
     /**
      * Emitted when the search value has been submitted
      */

package/dist/types/components/ic-search-bar/ic-search-bar.types.d.ts

@@ -1,5 +1,5 @@
 import { IcValueEventDetail, IcRelatedTarget } from "../../utils/types";
 export interface IcSearchBarBlurEventDetail extends IcValueEventDetail {
-    relatedTarget: IcRelatedTarget;
+    relatedTarget: IcRelatedTarget | null;
 }
 export type IcSearchBarSearchModes = "navigation" | "query";

package/dist/types/components/ic-select/ic-select.d.ts

@@ -1,27 +1,27 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcValueEventDetail, IcSizes, IcThemeMode } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcMultiValueEventDetail, IcSizes, IcThemeMode } from "../../utils/types";
 import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 /**
  * @slot icon - Content will be placed to the left of the select text input.
  */
 export declare class Select {
-    private anchorEl;
+    private anchorEl?;
     private blurredBecauseButtonPressed;
     private characterKeyPressTimer;
-    private clearButton;
-    private customSelectElement;
+    private clearButton?;
+    private customSelectElement?;
     private debounceAria;
     private hasSetDefaultValue;
     private hasTimedOut;
     private inheritedAttributes;
     private initialOptionsEmpty;
     private inputId;
-    private menu;
+    private menu?;
     private menuId;
-    private nativeSelectElement;
+    private nativeSelectElement?;
     private retryButtonClick;
     private searchableMenuItemSelected;
-    private searchableSelectElement;
+    private searchableSelectElement?;
     private timeoutTimer;
     private ungroupedOptions;
     private hostMutationObserver;
@@ -29,11 +29,11 @@ export declare class Select {
     ariaActiveDescendant: string;
     clearButtonFocused: boolean;
     debounceIcInput: number;
-    hiddenInputValue: string;
-    noOptions: IcMenuOption[];
+    hiddenInputValue: string | null;
+    noOptions: IcMenuOption[] | null;
     open: boolean;
     pressedCharacters: string;
-    searchableSelectInputValue: string;
+    searchableSelectInputValue: string | null;
     /**
      * If `true`, the disabled state will be set.
      */
@@ -46,7 +46,7 @@ export declare class Select {
     /**
      * The text displayed when there are no options in the option list.
      */
-    emptyOptionListText: string;
+    emptyOptionListText?: string;
     /**
      * The <form> element to associate the select with.
      */
@@ -54,7 +54,7 @@ export declare class Select {
     /**
      * If `true`, the select will fill the width of the container.
      */
-    fullWidth: boolean;
+    fullWidth?: boolean;
     /**
      * The helper text that will be displayed for additional field guidance.
      */
@@ -155,17 +155,17 @@ export declare class Select {
      * The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke.
      */
     debounce?: number;
-    currDebounce: number;
+    currDebounce: number | undefined;
     debounceChangedHandler(newValue: number): void;
     /**
      * 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 | string[];
-    initialValue: string | string[];
-    inputValueToFilter: string;
-    currValue: string | string[];
+    value?: string | string[] | null;
+    initialValue: string | string[] | null | undefined;
+    inputValueToFilter: string | null;
+    currValue?: string | string[] | null;
     valueChangedHandler(): void;
     openChangedHandler(): void;
     /**
@@ -175,7 +175,7 @@ export declare class Select {
     /**
      * Emitted when the value changes.
      */
-    icChange: EventEmitter<IcValueEventDetail>;
+    icChange: EventEmitter<IcMultiValueEventDetail>;
     /**
      * Emitted when the clear or clear all button is clicked.
      */
@@ -191,7 +191,7 @@ export declare class Select {
     /**
      * Emitted when a keyboard input occurred.
      */
-    icInput: EventEmitter<IcValueEventDetail>;
+    icInput: EventEmitter<IcMultiValueEventDetail>;
     /**
      * Emitted when the select options menu is opened.
      */
@@ -208,7 +208,7 @@ export declare class Select {
     /**
      * Emitted when the 'retry loading' button is clicked for a searchable variant.
      */
-    icRetryLoad: EventEmitter<IcValueEventDetail>;
+    icRetryLoad: EventEmitter<IcMultiValueEventDetail>;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts

@@ -13,7 +13,7 @@ export declare class SideNavigation {
     private resizeObserver;
     private COLLAPSED_ICON_LABELS_END;
     private COLLAPSED_ICON_LABELS_START;
-    private menuButton;
+    private menuButton?;
     el: HTMLIcSideNavigationElement;
     deviceSize: number;
     deviceSizeAppTitle: number;
@@ -24,48 +24,48 @@ export declare class SideNavigation {
     /**
      * The app title to be displayed. This is required, unless a slotted app title link is used.
      */
-    appTitle: string;
+    appTitle?: string;
     /**
      * If `true`, the icon and label will appear when side navigation is collapsed.
      */
-    collapsedIconLabels: boolean;
+    collapsedIconLabels?: boolean;
     /**
      * If `true`, automatic parent wrapper styling will be disabled.
      */
-    disableAutoParentStyling: boolean;
+    disableAutoParentStyling?: boolean;
     /**
      * If `true`, the side navigation will not display as a top bar on small devices.
      */
-    disableTopBarBehaviour: boolean;
+    disableTopBarBehaviour?: boolean;
     /**
      * If `true`, the side navigation will display in an expanded state.
      */
-    expanded: boolean;
+    expanded?: boolean;
     watchExpandedHandler(): void;
     /**
      * The URL that the app title link points to.
      */
-    href: string;
+    href?: string;
     /**
      * @internal If `true`, side navigation will be contained by its parent element.
      */
-    inline: boolean;
+    inline?: boolean;
     /**
      * The short title of the app to be displayed at small screen sizes in place of the app title.
      */
-    shortAppTitle: string;
+    shortAppTitle?: string;
     /**
      * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
      */
-    static: boolean;
+    static?: boolean;
     /**
      * The status of the app to be displayed.
      */
-    status: string;
+    status?: string;
     /**
      * The version of the app to be displayed.
      */
-    version: string;
+    version?: string;
     /**
      * Emitted when the side navigation is collapsed and expanded.
      */

package/dist/types/components/ic-skip-link/ic-skip-link.d.ts

@@ -0,0 +1,33 @@
+import { IcThemeMode } from "../../utils/types";
+export declare class SkipLink {
+    el: HTMLIcSkipLinkElement;
+    /**
+     * If `true`, the skip link will fill the width of the page.
+     */
+    fullWidth: boolean;
+    /**
+     * If `true`, the skip link will appear inline with surrounding page content when focused.
+     */
+    inline: boolean;
+    /**
+     * The label displayed when the skip link is focused.
+     */
+    label: string;
+    /**
+     * If `true`, the skip link will display as black in the light theme, and white in the dark theme.
+     */
+    monochrome: boolean;
+    /**
+     * The target ID for the element which should receive focus when triggering the skip link.
+     */
+    target: 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;
+    /**
+     * If `true`, the background will be hidden.
+     */
+    transparentBackground: boolean;
+    render(): any;
+}

package/dist/types/components/ic-stepper/ic-stepper.d.ts

@@ -11,7 +11,7 @@ export declare class Stepper {
     autoSetStepTitles: boolean;
     lastStepWidth: number;
     noOfResizes?: number;
-    stepperWidth: number;
+    stepperWidth: number | undefined;
     stepTypes: IcStepTypes[];
     variantOverride?: boolean;
     /**

package/dist/types/components/ic-switch/ic-switch.d.ts

@@ -8,7 +8,7 @@ export declare class Switch {
     private inputId;
     el: HTMLIcSwitchElement;
     checkedState: boolean;
-    initiallyChecked: boolean;
+    initiallyChecked: boolean | undefined;
     /**
      * If `true`, the switch will display as checked.
      */

package/dist/types/components/ic-tab/ic-tab.d.ts

@@ -22,9 +22,9 @@ export declare class Tab {
     /** @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. */
     selected?: boolean;
     /** @internal The shared ID between panel and tab. */
-    tabId?: string;
+    tabId: string;
     /** @internal The position of the tab inside the tabs array in context. */
-    tabPosition?: number;
+    tabPosition: number;
     /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
     theme?: IcThemeMode;
     disabledWatchHandler(): void;

package/dist/types/components/ic-tab-panel/ic-tab-panel.d.ts

@@ -2,7 +2,13 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { IcThemeMode } from "../../utils/types";
 export declare class TabPanel {
     el: HTMLIcTabPanelElement;
-    /** @internal Determines whether black variant of the tabs should be displayed. */
+    /**
+     * @internal If `true`, the tab panel will be displayed.
+     */
+    active: boolean;
+    /**
+     * @internal Determines whether black variant of the tabs should be displayed.
+     */
     monochrome?: boolean;
     /**
      * @internal The shared ID that links the panel and tab.

package/dist/types/components/ic-text-field/ic-text-field.d.ts

@@ -28,58 +28,58 @@ export declare class TextField {
     /**
      * @internal Used to identify whether inputting any text triggers more predictions
      */
-    ariaAutocomplete: IcAriaAutocompleteTypes;
+    ariaAutocomplete?: IcAriaAutocompleteTypes;
     /**
      * @internal Used to identify if the slotted menu is rendered
      */
-    ariaExpanded: string;
+    ariaExpanded: string | undefined;
     /**
      * @internal Used to identify any related child component
      */
-    ariaOwns: string;
+    ariaOwns?: string;
     /**
      * The automatic capitalisation of the text value as it is entered/edited by the user.
      * Available options: "off", "none", "on", "sentences", "words", "characters".
      */
-    autocapitalize: string;
+    autocapitalize: string | undefined;
     /**
      * The state of autocompletion the browser can apply on the text value.
      */
-    autocomplete: IcAutocompleteTypes;
+    autocomplete?: IcAutocompleteTypes;
     /**
      * The state of autocorrection the browser can apply when the user is entering/editing the text value.
      */
-    autocorrect: IcAutocorrectStates;
+    autocorrect?: IcAutocorrectStates;
     /**
      * If `true`, the form control will have input focus when the page loads.
      */
-    autofocus: boolean;
+    autofocus: boolean | undefined;
     /**
      * If `true`, the disabled state will be set.
      */
-    disabled: boolean;
+    disabled?: boolean;
     watchDisabledHandler(): void;
     /**
      * Specify whether the text field fills the full width of the container.
      * If `true`, this overrides the --input-width CSS variable.
      */
-    fullWidth: boolean;
+    fullWidth?: boolean;
     /**
      * The helper text that will be displayed for additional field guidance.
      */
-    helperText: string;
+    helperText?: string;
     /**
      * If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden.
      */
-    hideCharCount: boolean;
+    hideCharCount?: boolean;
     /**
      * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
      */
-    hideLabel: boolean;
+    hideLabel?: boolean;
     /**
      * @internal If `true`, the hidden form input will stop rendering for form submission.
      */
-    hiddenInput: boolean;
+    hiddenInput?: boolean;
     /**
      * The ID for the input.
      */
@@ -89,7 +89,7 @@ export declare class TextField {
      * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
      * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
      */
-    inputmode: IcTextFieldInputModes;
+    inputmode?: IcTextFieldInputModes;
     /**
      * The label for the input.
      */
@@ -97,47 +97,63 @@ export declare class TextField {
     /**
      * 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: string | number;
+    max?: string | number;
     /**
      * The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)
      */
-    maxCharacters: number;
+    maxCharacters?: number;
+    /**
+     * The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached.
+     */
+    maxCharactersMessage?: string;
+    /**
+     * The text to display as the error message when the maximum value (the `max` prop value) has been exceeded.
+     */
+    maxMessage?: string;
     /**
      * 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: string | number;
+    min?: string | number;
     /**
      * The minimum number of characters that can be entered in the field.
      */
-    minCharacters: number;
+    minCharacters?: number;
+    /**
+     * The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met.
+     */
+    minCharactersMessage?: string;
+    /**
+     * The text to display as the error message when the minimum value (the `min` prop value) has not been met.
+     */
+    minMessage?: string;
     /**
      * The name of the control, which is submitted with the form data.
      */
-    name: string;
+    name?: string;
     /**
      * The placeholder value to be displayed.
      */
-    placeholder: string;
+    placeholder?: string;
     /**
      * If `true`, the read only state will be set.
      */
-    readonly: boolean;
+    readonly?: boolean;
     /**
      * If `true`, the input will require a value.
      */
-    required: boolean;
+    required?: boolean;
     /**
      * If `true`, the multiline text area will be resizeable.
      */
-    resize: boolean;
+    resize?: boolean;
     /**
      * @internal Used to set the role if not default textbox;
      */
-    role: string;
+    role: string | undefined;
     /**
      * The number of rows to transform the text field into a text area with a specific height.
      */
-    rows: number;
+    rows?: number;
     /**
      * The size of the text field component.
      */
@@ -145,11 +161,11 @@ export declare class TextField {
     /**
      * If `true`, the value of the text field will have its spelling and grammar checked.
      */
-    spellcheck: boolean;
+    spellcheck: boolean | undefined;
     /**
      * 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;
+    theme?: IcThemeMode;
     /**
      * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.
      */
@@ -157,27 +173,27 @@ export declare class TextField {
     /**
      * The type of control to display. The default type is text.
      */
-    type: IcTextFieldTypes;
+    type?: IcTextFieldTypes;
     /**
      * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.
      */
-    validationInline: boolean;
+    validationInline?: boolean;
     /**
      *  @internal If `true`, the validation will display inline.
      */
-    validationInlineInternal: boolean;
+    validationInlineInternal?: boolean;
     /**
      * The validation state - e.g. 'error' | 'warning' | 'success'.
      */
-    validationStatus: IcInformationStatusOrEmpty;
+    validationStatus?: IcInformationStatusOrEmpty;
     /**
-     * The validation state - e.g. 'error' | 'warning' | 'success'.
+     * The text to display as the validation message.
      */
-    validationText: string;
+    validationText?: string;
     /**
      * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
      */
-    debounce: number;
+    debounce?: number;
     private debounceChanged;
     /**
      * The value of the text field.
@@ -227,6 +243,7 @@ export declare class TextField {
     private onInput;
     private onBlur;
     private onFocus;
+    private onWheel;
     private hasStatus;
     private handleFormReset;
     private hostMutationCallback;

package/dist/types/components/ic-theme/ic-theme.d.ts

@@ -5,12 +5,12 @@ export declare class Theme {
     /**
      * The brand 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)".
      */
-    brandColor?: IcColor;
+    brandColor?: IcColor | null;
     watchBrandColorPropHandler(): void;
     /**
      * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
      */
-    theme: "dark" | "light" | "system";
+    theme?: "dark" | "light" | "system";
     watchThemePropHandler(): void;
     /**
      * @internal Emitted when the brand color is changed.

package/dist/types/components/ic-toast/ic-toast.d.ts

@@ -19,11 +19,11 @@ export declare class Toast {
      * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)
      * (NOTE: Has a minimum value of `5000ms`)
      */
-    autoDismissTimeout?: number;
+    autoDismissTimeout?: number | undefined;
     /**
      * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component
      */
-    dismissButtonAriaLabel?: string;
+    dismissButtonAriaLabel?: string | undefined;
     /**
      * How the toast will be dismissed. If manual will display a dismiss button.
      */
@@ -61,7 +61,7 @@ export declare class Toast {
      * @internal Used to display the individual toast.
      * @returns The element that previously had focus before the toast appeared
      */
-    setVisible(): Promise<HTMLElement>;
+    setVisible(): Promise<HTMLElement | null>;
     private dismissAction;
     private handleProgressChange;
     private handleLongText;