@ukic/web-components 3.2.0 → 3.4.0

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

@@ -7,10 +7,10 @@ import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 export declare class Select {
     private anchorEl?;
     private blurredBecauseButtonPressed;
-    private characterKeyPressTimer;
+    private characterKeyPressTimer?;
     private clearButton?;
     private customSelectElement?;
-    private debounceAria;
+    private debounceAria?;
     private hasSetDefaultValue;
     private hasTimedOut;
     private inheritedAttributes;
@@ -22,13 +22,13 @@ export declare class Select {
     private retryButtonClick;
     private searchableMenuItemSelected;
     private searchableSelectElement?;
-    private timeoutTimer;
+    private timeoutTimer?;
     private ungroupedOptions;
     private hostMutationObserver;
     el: HTMLIcSelectElement;
-    ariaActiveDescendant: string;
+    ariaActiveDescendant?: string;
     clearButtonFocused: boolean;
-    debounceIcInput: number;
+    debounceIcInput?: number;
     hiddenInputValue: string | null;
     noOptions: IcMenuOption[] | null;
     open: boolean;
@@ -37,16 +37,16 @@ export declare class Select {
     /**
      * If `true`, the disabled state will be set.
      */
-    disabled?: boolean;
+    disabled: boolean;
     watchDisabledHandler(): void;
     /**
      * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
      */
-    disableAutoFiltering?: boolean;
+    disableAutoFiltering: boolean;
     /**
      * 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,23 +54,23 @@ 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.
      */
-    helperText?: string;
+    helperText: string;
     /**
      * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
      */
-    hideLabel?: boolean;
+    hideLabel: boolean;
     /**
      * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
      */
-    includeDescriptionsInSearch?: boolean;
+    includeDescriptionsInSearch: boolean;
     /**
      * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
      */
-    includeGroupTitlesInSearch?: boolean;
+    includeGroupTitlesInSearch: boolean;
     /**
      * The label for the select.
      */
@@ -78,51 +78,51 @@ export declare class Select {
     /**
      * The message displayed when external loading times out.
      */
-    loadingErrorLabel?: string;
+    loadingErrorLabel: string;
     /**
      * The message displayed whilst the options are being loaded externally.
      */
-    loadingLabel?: string;
+    loadingLabel: string;
     /**
      * If `true`, multiple options can be selected.
      */
-    multiple?: boolean;
+    multiple: boolean;
     /**
      * 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 readonly state will be set.
      */
-    readonly?: boolean;
+    readonly: boolean;
     /**
      * If `true`, the select will require a value.
      */
-    required?: boolean;
+    required: boolean;
     /**
      * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component.
      */
-    searchable?: boolean;
+    searchable: boolean;
     /**
      * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
      */
-    searchMatchPosition?: IcSearchMatchPositions;
+    searchMatchPosition: IcSearchMatchPositions;
     /**
      * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select.
      */
-    selectOnEnter?: boolean;
+    selectOnEnter: boolean;
     /**
      * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
      */
-    showClearButton?: boolean;
+    showClearButton: boolean;
     /**
      * The size of the select.
      */
-    size?: IcSizes;
+    size: IcSizes;
     /**
      * If using external filtering, set a timeout for when loading takes too long.
      */
@@ -130,42 +130,42 @@ export declare class Select {
     /**
      * 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;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'.
      */
-    validationStatus?: IcInformationStatusOrEmpty;
+    validationStatus: IcInformationStatusOrEmpty;
     /**
      * The text to display as the validation message.
      */
-    validationText?: string;
+    validationText: string;
     /**
      * If `true`, the loading state will be triggered when fetching options asynchronously.
      */
-    loading?: boolean;
+    loading: boolean;
     loadingHandler(newValue: boolean): void;
     /**
      * The possible selection options.
      */
-    options?: IcMenuOption[];
+    options: IcMenuOption[];
     filteredOptions: IcMenuOption[];
     uniqueOptions: IcMenuOption[];
     watchOptionsHandler(): void;
     /**
      * The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke.
      */
-    debounce?: number;
-    currDebounce: number | undefined;
+    debounce: number;
+    currDebounce: number;
     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[] | null;
-    initialValue: string | string[] | null | undefined;
+    value: string | string[] | null;
+    initialValue: string | string[] | null;
     inputValueToFilter: string | null;
-    currValue?: string | string[] | null;
+    currValue: string | string[] | null;
     valueChangedHandler(): void;
     openChangedHandler(): void;
     /**
@@ -219,7 +219,6 @@ export declare class Select {
     setFocus(): Promise<void>;
     private hostMutationCallback;
     private handleRetry;
-    private updateOnChangeDebounce;
     private emitIcChange;
     private emitIcInput;
     private setOptions;
@@ -242,7 +241,6 @@ export declare class Select {
     private getValueSortedByOptions;
     private handleNativeSelectChange;
     private handleCustomSelectChange;
-    private handleMultipleSelectChange;
     private handleSelectAllChange;
     private handleMenuChange;
     private handleMenuKeyPress;
@@ -266,7 +264,6 @@ export declare class Select {
     private getValueFromLabel;
     private handleSearchableSelectInput;
     private updateSearchableSelectResultAriaLive;
-    private debounceAriaLiveUpdate;
     private updateMultiSelectedCountAriaLive;
     private getDefaultValue;
     private setDefaultValue;
@@ -275,5 +272,6 @@ export declare class Select {
     private onTimeoutBlur;
     private handleFormReset;
     private clearInput;
+    private renderNativeOption;
     render(): any;
 }

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

@@ -25,6 +25,10 @@ export declare class SideNavigation {
      * The app title to be displayed. This is required, unless a slotted app title link is used.
      */
     appTitle?: string;
+    /**
+     * If `true`, the side navigation will close when a navigation item is clicked. This behaviour is only applicable on larger device sizes.
+     */
+    closeOnNavItemClick?: boolean;
     /**
      * If `true`, the icon and label will appear when side navigation is collapsed.
      */
@@ -96,6 +100,7 @@ export declare class SideNavigation {
     private paddingIconWidth;
     private displayTooltipWithExpandedLongLabel;
     private setMenuExpanded;
+    private handleNavItemClicked;
     /**
      * As the mobile top bar is fixed, a padding top is required
      * to push main content down the height of the mobile top bar

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

@@ -16,6 +16,7 @@ export declare class TextField {
     minCharactersUnattained: boolean;
     maxValueExceeded: boolean;
     minValueUnattained: boolean;
+    isFocussed: boolean;
     /**
      * @slot clear-button - an ic-button clear component will render as an end adornment to the input.
      * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.
@@ -32,7 +33,7 @@ export declare class TextField {
     /**
      * @internal Used to identify if the slotted menu is rendered
      */
-    ariaExpanded: string | undefined;
+    ariaExpanded: string | null;
     /**
      * @internal Used to identify any related child component
      */
@@ -41,7 +42,7 @@ export declare class TextField {
      * 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 | undefined;
+    autocapitalize: string;
     /**
      * The state of autocompletion the browser can apply on the text value.
      */
@@ -53,43 +54,43 @@ export declare class TextField {
     /**
      * If `true`, the form control will have input focus when the page loads.
      */
-    autofocus: boolean | undefined;
+    autofocus: boolean;
     /**
      * 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.
      */
-    inputId?: string;
+    inputId: string;
     /**
      * A hint to the browser for which keyboard to display.
      * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
      * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
      */
-    inputmode?: IcTextFieldInputModes;
+    inputmode: IcTextFieldInputModes;
     /**
      * The label for the input.
      */
@@ -101,15 +102,15 @@ export declare class TextField {
     /**
      * 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;
+    maxCharactersMessage: string;
     /**
      * The text to display as the error message when the maximum value (the `max` prop value) has been exceeded.
      */
-    maxMessage?: string;
+    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`)
      */
@@ -117,83 +118,83 @@ export declare class TextField {
     /**
      * 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;
+    minCharactersMessage: string;
     /**
      * The text to display as the error message when the minimum value (the `min` prop value) has not been met.
      */
-    minMessage?: string;
+    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 | undefined;
+    role: string | null;
     /**
      * 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.
      */
-    size?: IcSizesNoLarge;
+    size: IcSizesNoLarge;
     /**
      * If `true`, the value of the text field will have its spelling and grammar checked.
      */
-    spellcheck: boolean | undefined;
+    spellcheck: 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;
+    theme: IcThemeMode;
     /**
      * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.
      */
-    truncateValue?: boolean;
+    truncateValue: boolean;
     /**
      * 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 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 +228,10 @@ export declare class TextField {
     icKeydown: EventEmitter<{
         event: KeyboardEvent;
     }>;
+    /**
+     * Emitted when the textarea variant is scrolled.
+     */
+    icScroll: EventEmitter;
     connectedCallback(): void;
     disconnectedCallback(): void;
     componentWillLoad(): void;
@@ -243,6 +248,7 @@ export declare class TextField {
     private onInput;
     private onBlur;
     private onFocus;
+    private onTextAreaScroll;
     private onWheel;
     private hasStatus;
     private handleFormReset;

package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts

@@ -13,20 +13,20 @@ export declare class ToggleButton {
     /**
      * If `true`, the toggle button will be in a checked state.
      */
-    checked?: boolean;
+    checked: boolean;
     /**
      * If `true`, the toggle button will be in disabled state.
      */
-    disabled?: boolean;
+    disabled: boolean;
     watchDisabledHandler(): void;
     /**
      * If `true`, the toggle button will fill the width of the container.
      */
-    fullWidth?: boolean;
+    fullWidth: boolean;
     /**
      * The placement of the icon in relation to the toggle button label.
      */
-    iconPlacement?: IcIconPlacementOptions;
+    iconPlacement: IcIconPlacementOptions;
     /**
      * The label to display in the toggle button. This is required for the default variant of toggle buttons.
      */
@@ -34,27 +34,27 @@ export declare class ToggleButton {
     /**
      * If `true`, the toggle button will be in loading state.
      */
-    loading?: boolean;
+    loading: boolean;
     /**
      * If `true`, the toggle button will display as black in the light theme, and white in dark theme.
      */
-    monochrome?: boolean;
+    monochrome: boolean;
     /**
      * The size of the toggle button to be displayed.
      */
-    size?: IcSizes;
+    size: IcSizes;
     /**
      * 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;
     /**
      * The position of the tooltip in relation to the toggle button.
      */
-    tooltipPlacement?: IcButtonTooltipPlacement;
+    tooltipPlacement: IcButtonTooltipPlacement;
     /**
      * The variant of the toggle button.
      */
-    variant?: "default" | "icon";
+    variant: "default" | "icon";
     /**
      * Emitted when the user clicks a toggle button.
      */
@@ -64,7 +64,6 @@ export declare class ToggleButton {
     componentWillLoad(): void;
     componentDidLoad(): void;
     handleHostClick(e: Event): void;
-    private loopAttributes;
     private handleFocus;
     private handleClick;
     render(): any;

package/dist/types/components/ic-toggle-button-group/ic-toggle-button-group.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcSizes, IcSelectTypes, IcSelectMethodTypes, IcThemeMode, IcButtonTooltipPlacement } from "../../utils/types";
+import { IcSizes, IcSelectTypes, IcSelectMethodTypes, IcThemeMode, IcButtonTooltipPlacement, IcIconPlacementOptions } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-toggle-button-group.types";
 interface lastKey {
     key: string | null;
@@ -11,7 +11,7 @@ export declare class ToggleButtonGroup {
     /**
      * The accessible label of the toggle button group component to provide context for screen reader users.
      */
-    accessibleLabel?: string;
+    accessibleLabel: string;
     /**
      * If `true`, the toggle button group will be set to the disabled state.
      */
@@ -20,39 +20,39 @@ export declare class ToggleButtonGroup {
     /**
      * If `true`, the toggle button group will fill the width of the container.
      */
-    fullWidth?: boolean;
+    fullWidth: boolean;
     watchFullWidthHandler(): void;
     /**
      * The placement of the icons in relation to the toggle button labels.
      */
-    iconPlacement?: "left" | "right" | "top";
+    iconPlacement?: IcIconPlacementOptions;
     /**
      * If `true`, the toggle button group will be in loading state.
      */
-    loading?: boolean;
+    loading: boolean;
     watchLoadingHandler(): void;
     /**
      * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.
      */
-    monochrome?: boolean;
+    monochrome: boolean;
     watchMonochromeHandler(): void;
     /**
      * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.
      */
-    selectMethod?: IcSelectMethodTypes;
+    selectMethod: IcSelectMethodTypes;
     /**
      * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.
      */
-    selectType?: IcSelectTypes;
+    selectType: IcSelectTypes;
     /**
      * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
      */
-    size?: IcSizes;
+    size: IcSizes;
     watchSizeHandler(): void;
     /**
      * 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;
     watchThemeHandler(): void;
     /**
      * The position of the tooltip in relation to the toggle buttons.
@@ -73,9 +73,7 @@ export declare class ToggleButtonGroup {
     componentDidLoad(): void;
     disconnectedCallback(): void;
     private keyListener;
-    private setSlottedAria;
     private handleHostFocus;
-    private proxySelectHandler;
     private handleKeyDown;
     private getNextItemToSelect;
     private getAllToggleButtons;

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

@@ -18,6 +18,7 @@ export declare class TopNavigation {
     private mobileSearchButtonEl?;
     private resizeObserver;
     private searchBar;
+    private menuButtonEl?;
     el: HTMLIcTopNavigationElement;
     deviceSize: number;
     foregroundColor: IcBrandForeground;
@@ -30,36 +31,36 @@ export declare class TopNavigation {
     /**
      * The alignment of the top navigation content.
      */
-    contentAligned?: IcAlignment;
+    contentAligned: IcAlignment;
     /**
      * Can set a custom breakpoint for the top navigation to switch to mobile mode.
      * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.
      */
-    customMobileBreakpoint?: IcDeviceSizes;
+    customMobileBreakpoint: IcDeviceSizes;
     /**
      *  The URL to navigate to when the app title is clicked.
      */
-    href?: string;
+    href: string;
     /**
      * If `true`, the flyout navigation menu on small devices will be contained by the 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;
     /**
      * The status info to be displayed.
      */
-    status?: string;
+    status: 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;
+    theme: IcThemeMode;
     /**
      * The version info to be displayed.
      */
-    version?: string;
+    version: string;
     /**
      * The app title to be displayed. This is required, unless a slotted app title link is used.
      */