@ukic/web-components 3.0.0 → 3.1.0

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcValueEventDetail, IcSizesNoLarge } from "../../utils/types";
+import { IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcValueEventDetail, IcSizesNoLarge, IcThemeMode } from "../../utils/types";
 import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./ic-text-field.types";
 /**
  * @slot icon - Content will be placed to the left of the text input.
@@ -8,6 +8,7 @@ export declare class TextField {
     private inheritedAttributes;
     private inputEl;
     private hostMutationObserver;
+    private interval;
     el: HTMLIcTextFieldElement;
     numChars: number;
     maxCharactersReached: boolean;
@@ -27,57 +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.
      */
@@ -87,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.
      */
@@ -95,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.
      */
@@ -143,7 +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;
     /**
      * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.
      */
@@ -151,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.
@@ -209,16 +231,19 @@ export declare class TextField {
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    private checkChildHydration;
     handleKeyDown(ev: KeyboardEvent): void;
     /**
      * Sets focus on the native `input`.
      */
     setFocus(): Promise<void>;
+    private getNumberOfCharacters;
     private getMaxValueExceeded;
     private getMaxCharactersReached;
     private onInput;
     private onBlur;
     private onFocus;
+    private onWheel;
     private hasStatus;
     private handleFormReset;
     private hostMutationCallback;

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

@@ -1,17 +1,24 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcColor, IcTheme } from "../../utils/types";
+import { IcColor, IcBrand } from "../../utils/types";
 export declare class Theme {
+    themeClass: string;
     /**
-     * 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)".
+     * 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)".
      */
-    color?: IcColor;
-    watchColorPropHandler(): void;
+    brandColor?: IcColor | null;
+    watchBrandColorPropHandler(): void;
     /**
-     * @internal Emitted when the theme is changed.
+     * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
      */
-    themeChange: EventEmitter<IcTheme>;
+    theme?: "dark" | "light" | "system";
+    watchThemePropHandler(): void;
+    /**
+     * @internal Emitted when the brand color is changed.
+     */
+    brandChange: EventEmitter<IcBrand>;
     componentWillLoad(): void;
-    private checkThemeColorContrast;
-    private setThemeColor;
+    private darkModeChangeHandler;
+    private checkBrandColorContrast;
+    private setBrandColor;
     render(): any;
 }

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;

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

@@ -5,8 +5,9 @@ export declare class ToastRegion {
     /**
      * The toast element to be displayed.
      */
-    openToast: HTMLIcToastElement;
+    openToast?: HTMLIcToastElement;
     watchOpenToastHandler(newValue: HTMLIcToastElement): void;
+    componentDidLoad(): void;
     handleDismissedToast(): void;
     private showToast;
     render(): any;

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

@@ -1,24 +1,24 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcSizes, IcThemeForeground } from "../../utils/types";
+import { IcSizes, IcThemeMode, IcIconPlacementOptions, IcButtonTooltipPlacement } from "../../utils/types";
 /**
  * @slot icon - Content will be displayed alongside the toggle button label.
  * @slot badge - Badge component overlaying the top right of the toggle button.
  */
 export declare class ToggleButton {
-    private iconPosition;
     el: HTMLIcToggleButtonElement;
     /**
      * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.
      */
     accessibleLabel?: string;
     /**
-     * The appearance of the toggle button.
+     * If `true`, the toggle button will be in a checked state.
      */
-    appearance?: IcThemeForeground;
+    checked?: boolean;
     /**
      * If `true`, the toggle button will be in disabled state.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the toggle button will fill the width of the container.
      */
@@ -26,7 +26,7 @@ export declare class ToggleButton {
     /**
      * The placement of the icon in relation to the toggle button label.
      */
-    iconPlacement?: "left" | "right" | "top";
+    iconPlacement?: IcIconPlacementOptions;
     /**
      * The label to display in the toggle button. This is required for the default variant of toggle buttons.
      */
@@ -35,18 +35,26 @@ export declare class ToggleButton {
      * If `true`, the toggle button will be in loading state.
      */
     loading?: boolean;
+    /**
+     * If `true`, the toggle button will display as black in the light theme, and white in dark theme.
+     */
+    monochrome?: boolean;
     /**
      * The size of the toggle button to be displayed.
      */
     size?: IcSizes;
     /**
-     * If `true`, the toggle button will be in a checked state.
+     * 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 position of the tooltip in relation to the toggle button.
      */
-    checked: boolean;
+    tooltipPlacement?: IcButtonTooltipPlacement;
     /**
      * The variant of the toggle button.
      */
-    variant: "default" | "icon";
+    variant?: "default" | "icon";
     /**
      * Emitted when the user clicks a toggle button.
      */
@@ -56,6 +64,7 @@ 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, IcThemeForeground, IcSelectTypes, IcSelectMethodTypes } from "../../utils/types";
+import { IcSizes, IcSelectTypes, IcSelectMethodTypes, IcThemeMode, IcButtonTooltipPlacement } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-toggle-button-group.types";
 interface lastKey {
     key: string | null;
@@ -12,18 +12,16 @@ export declare class ToggleButtonGroup {
      * The accessible label of the toggle button group component to provide context for screen reader users.
      */
     accessibleLabel?: string;
-    /**
-     * The appearance of the toggle button group, e.g dark, or light.
-     */
-    appearance: IcThemeForeground;
     /**
      * If `true`, the toggle button group will be set to the disabled state.
      */
     disabled: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the toggle button group will fill the width of the container.
      */
     fullWidth?: boolean;
+    watchFullWidthHandler(): void;
     /**
      * The placement of the icons in relation to the toggle button labels.
      */
@@ -32,6 +30,12 @@ export declare class ToggleButtonGroup {
      * If `true`, the toggle button group will be in loading state.
      */
     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;
+    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`.
      */
@@ -44,10 +48,22 @@ export declare class ToggleButtonGroup {
      * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
      */
     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;
+    watchThemeHandler(): void;
+    /**
+     * The position of the tooltip in relation to the toggle buttons.
+     */
+    tooltipPlacement: IcButtonTooltipPlacement;
+    watchTooltipPlacementHandler(): void;
     /**
      * The variant of the toggle button.
      */
     variant: "default" | "icon";
+    watchVariantHandler(): void;
     /**
      * Emitted when a toggle button is selected.
      */

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

@@ -1,5 +1,6 @@
 import { Options } from "@popperjs/core";
 import { IcTooltipPlacements } from "./ic-tooltip.types";
+import { IcThemeMode } from "../../utils/types";
 export declare class Tooltip {
     private arrow;
     private delayedHideEvents;
@@ -14,7 +15,7 @@ export declare class Tooltip {
     private toolTip;
     el: HTMLIcTooltipElement;
     /**
-     * @internal If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.
+     * If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.
      */
     disableClick?: boolean;
     /**
@@ -37,6 +38,10 @@ export declare class Tooltip {
      * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.
      */
     target?: string;
+    /**
+     * Sets the tooltip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme?: IcThemeMode;
     /**
      * The text to display on the tooltip.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAlignment, IcThemeForeground, IcTheme, IcDeviceSizes, IcValueEventDetail } from "../../utils/types";
+import { IcAlignment, IcBrandForeground, IcBrand, IcDeviceSizes, IcValueEventDetail, IcThemeMode } from "../../utils/types";
 import { IcSearchBarBlurEventDetail } from "../ic-search-bar/ic-search-bar.types";
 /**
  * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.
@@ -15,12 +15,12 @@ export declare class TopNavigation {
     private hasIconButtons;
     private hasNavigation;
     private hasSearchSlotContent;
-    private mobileSearchButtonEl;
+    private mobileSearchButtonEl?;
     private resizeObserver;
     private searchBar;
     el: HTMLIcTopNavigationElement;
     deviceSize: number;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     hasFullWidthSearchBar: boolean;
     mobileSearchBarVisible: boolean;
     mobileSearchHiddenOnBlur: boolean;
@@ -30,36 +30,40 @@ 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;
     /**
      * 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.
      */
-    appTitle: string;
+    appTitle?: string;
     watchPropHandler(newValue: string, oldValue: string): void;
     /**
      * @internal - Emitted when the menu is closed.
@@ -82,7 +86,7 @@ export declare class TopNavigation {
     navBarMenuCloseHandler(): void;
     searchInputBlurHandler({ detail, }: CustomEvent<IcSearchBarBlurEventDetail>): void;
     searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void;
-    themeChangeHandler({ detail }: CustomEvent<IcTheme>): void;
+    brandChangeHandler({ detail }: CustomEvent<IcBrand>): void;
     private checkSlots;
     private initialiseSearchBar;
     private toggleSearchBar;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcTypographyVariants } from "../../utils/types";
+import { IcTypographyVariants, IcThemeMode } from "../../utils/types";
 export declare class Typography {
     private focusBtnFromKeyboard;
     private inAGGrid;
@@ -9,7 +9,7 @@ export declare class Typography {
     private resizeInterval;
     private resizeObserver;
     private truncatedHeight;
-    private truncWrapperEl;
+    private truncWrapperEl?;
     el: HTMLIcTypographyElement;
     truncated: boolean;
     truncButtonFocussed: boolean;
@@ -34,6 +34,10 @@ export declare class Typography {
      * If `true`, the typography will have a line through it.
      */
     strikethrough?: boolean;
+    /**
+     * Sets the text 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 typography will have a line under it.
      */