@ukic/web-components 3.1.0 → 3.3.0

package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts

@@ -2,21 +2,20 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { IcInformationStatusOrEmpty, IcSizes, IcThemeMode } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-checkbox-group.types";
 export declare class CheckboxGroup {
-    private checkboxSelector;
     el: HTMLIcCheckboxGroupElement;
     /**
      * If `true`, the checkbox group will be set to the disabled state.
      */
-    disabled?: boolean;
+    disabled: boolean;
     watchDisabledHandler(): void;
     /**
      * 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;
     /**
      * The label for the checkbox group to be displayed.
      */
@@ -29,24 +28,24 @@ export declare class CheckboxGroup {
     /**
      * If `true`, the checkbox group will require a value.
      */
-    required?: boolean;
+    required: boolean;
     /**
      * The size of the checkboxes to be displayed. This does not affect the font size of the label.
      */
-    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;
     watchThemeHandler(newValue: IcThemeMode): void;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'.
      */
-    validationStatus?: IcInformationStatusOrEmpty;
+    validationStatus: IcInformationStatusOrEmpty;
     /**
      * The text to display as the validation message.
      */
-    validationText?: string;
+    validationText: string;
     /**
      * Emitted when a checkbox is checked.
      */

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

@@ -1,13 +1,13 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcColor, IcEmphasisType, IcSizes } from "../../utils/types";
+import { IcBrandForegroundNoDefault, IcColor, IcEmphasisType, IcSizes, IcThemeMode } from "../../utils/types";
 /**
  * @slot icon - Content will be rendered at the start of the chip.
  * @slot badge - Badge component overlaying the top right of the chip.
  */
 export declare class Chip {
-    private inAGGrid;
+    private buttonEl?;
     el: HTMLIcChipElement;
-    customColorClass: string;
+    foregroundColor: IcBrandForegroundNoDefault | null;
     hovered: boolean;
     visible: boolean;
     /**
@@ -19,12 +19,16 @@ export declare class Chip {
     /**
      * If `true`, the chip will appear disabled.
      */
-    disabled?: boolean;
+    disabled: boolean;
     watchDisabledHandler(): void;
     /**
      * If `true`, the chip will have a close button at the end to dismiss it.
      */
-    dismissible?: boolean;
+    dismissible: boolean;
+    /**
+     * The text in the dismiss button tooltip and aria label. Makes the user aware of the action resulting from clicking the 'Dismiss chip' button.
+     */
+    dismissLabel: string;
     /**
      * The text rendered within the chip.
      */
@@ -32,30 +36,25 @@ export declare class Chip {
     /**
      * The size of the chip.
      */
-    size?: IcSizes;
+    size: IcSizes;
     /**
      * 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";
+    theme: IcThemeMode;
     /**
      * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.
      */
-    transparentBackground?: boolean;
+    transparentBackground: boolean;
     /**
      * The emphasis of the chip.
      */
-    variant?: IcEmphasisType;
-    /**
-     * The text in the dismiss button tooltip and aria label.
-     */
-    dismissLabel?: string;
+    variant: IcEmphasisType;
     /**
      * Is emitted when the user dismisses the chip.
      */
     icDismiss: EventEmitter<void>;
     componentWillLoad(): void;
-    componentWillRender(): void;
     componentDidLoad(): void;
     handleClick(): void;
     /**
@@ -65,6 +64,5 @@ export declare class Chip {
     private dismissAction;
     private mouseEnterHandler;
     private mouseLeaveHandler;
-    private setChipColour;
     render(): any;
 }

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

@@ -11,6 +11,7 @@ export declare class Link {
      * If `true`, the user can save the linked URL instead of navigating to it.
      */
     download?: string | boolean;
+    watchDownloadHandler(): void;
     /**
      * The URL that the link points to.
      */
@@ -48,6 +49,7 @@ export declare class Link {
      */
     setFocus(): Promise<void>;
     private updateTheme;
+    private updateDownload;
     private hasRouterSlot;
     private hostMutationCallback;
     render(): any;

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

@@ -4,11 +4,11 @@ import { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./ic-search-
 import { IcValueEventDetail, IcBlurEventDetail } from "../../utils/types";
 import { IcMenuChangeEventDetail, IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 export declare class SearchBar {
-    private anchorEl;
-    private assistiveHintEl;
-    private debounceAriaLive;
+    private anchorEl?;
+    private assistiveHintEl?;
+    private debounceAriaLive?;
     private hasTimedOut;
-    private inputEl;
+    private inputEl?;
     private inputId;
     private menu?;
     private menuCloseFromMenuChangeEvent;
@@ -18,13 +18,13 @@ export declare class SearchBar {
     private prevNoOption;
     private retryButtonClick;
     private retryViaKeyPress;
-    private timeoutTimer;
+    private timeoutTimer?;
     private truncateValue;
     private searchSubmitButton?;
     el: HTMLIcSearchBarElement;
-    ariaActiveDescendant: string;
+    ariaActiveDescendant?: string;
     clearButtonFocused: boolean;
-    highlightedValue: string | undefined;
+    highlightedValue?: string;
     open: boolean;
     searchSubmitFocused: boolean;
     showClearButton: boolean;
@@ -32,63 +32,63 @@ 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 | undefined;
+    autocapitalize: string;
     /**
      * 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 | undefined;
+    autofocus: boolean;
     /**
      * 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.
      */
-    disabled?: boolean;
+    disabled: boolean;
     watchDisabledHandler(): void;
     /**
      * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.
      * If `true`, all options provided will be displayed.
      */
-    disableAutoFiltering?: boolean;
+    disableAutoFiltering: boolean;
     /**
      * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
      */
-    debounce?: number;
+    debounce: number;
     private debounceChanged;
     /**
      * 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.
      */
-    focusOnLoad?: boolean;
+    focusOnLoad: boolean;
     /**
      * Specify whether the search bar 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 label will be hidden and the required label value will be applied as an aria-label.
      */
-    hideLabel?: boolean;
+    hideLabel: boolean;
     /**
      * The hint text for the hidden assistive description element.
      */
-    assistiveHintText?: string;
+    assistiveHintText: string;
     /**
      * The label for the search bar.
      */
@@ -96,51 +96,52 @@ export declare class SearchBar {
     /**
      * The custom name for the label field to correspond with the IcMenuOption type.
      */
-    labelField?: string;
+    labelField: string;
     /**
      * Trigger loading state when fetching options asynchronously
      */
-    loading?: boolean;
+    loading: boolean;
+    loadingHandler(newValue: boolean): void;
     /**
      * Change the message displayed when external loading times out.
      */
-    loadingErrorLabel?: string;
+    loadingErrorLabel: string;
     /**
      * Change the message displayed whilst the options are being loaded externally.
      */
-    loadingLabel?: string;
+    loadingLabel: string;
     /**
      * The name of the control, which is submitted with the form data.
      */
-    name?: string;
+    name: string;
     /**
      * The placeholder value to display.
      */
-    placeholder?: string;
+    placeholder: string;
     /**
      * If `true`, the readonly state will be set.
      */
-    readonly?: boolean;
+    readonly: boolean;
     /**
      * If `true`, the search bar will require a value.
      */
-    required?: boolean;
+    required: boolean;
     /**
      * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
      */
-    searchMode?: IcSearchBarSearchModes;
+    searchMode: IcSearchBarSearchModes;
     /**
      * The size of the search bar component.
      */
-    size?: IcSizesNoLarge;
+    size: IcSizesNoLarge;
     /**
      * If `true`, the value of the search 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;
     /**
      * If using external filtering, set a timeout for when loading takes too long.
      */
@@ -148,19 +149,18 @@ export declare class SearchBar {
     /**
      * The custom name for the value field to correspond with the IcMenuOption type.
      */
-    valueField?: string;
-    loadingHandler(newValue: boolean): void;
+    valueField: string;
     filteredOptions: IcMenuOption[];
     filteredOptionsHandler(newOptions: IcMenuOption[]): void;
     /**
      * The suggested search options.
      */
-    options?: IcMenuOption[];
+    options: IcMenuOption[];
     watchOptionsHandler(newOptions: IcMenuOption[]): void;
     /**
      * The value of the search input.
      */
-    value?: string;
+    value: string;
     watchValueHandler(newValue: string): void;
     /**
      * Emitted when the value has changed.
@@ -229,6 +229,7 @@ export declare class SearchBar {
      * Sets focus on the native `input`.
      */
     setFocus(): Promise<void>;
+    private setInputValue;
     private handleMouseDown;
     private handleSubmitSearchFocus;
     private handleSubmitSearch;
@@ -242,14 +243,11 @@ export declare class SearchBar {
     private setMenuChange;
     private handleHostFocus;
     private handleHostBlur;
-    private handleShowClearButton;
     private handleFocusClearButton;
-    private handleTruncateValue;
     private renderAssistiveHintEl;
     private updateSearchResultAriaLive;
     private hasOptionsOrFilterDisabled;
     private hadNoOptions;
     private isSubmitDisabled;
-    private highlightFirstOptionAfterNoResults;
     render(): any;
 }

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

@@ -222,6 +222,7 @@ export declare class Select {
     private updateOnChangeDebounce;
     private emitIcChange;
     private emitIcInput;
+    private setOptions;
     /**
      * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
      * @param options array of IcMenuOptions

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

@@ -1,5 +1,6 @@
 import { IcThemeMode } from "../../utils/types";
 export declare class SkipLink {
+    private linkEl?;
     el: HTMLIcSkipLinkElement;
     /**
      * If `true`, the skip link will fill the width of the page.
@@ -29,5 +30,9 @@ export declare class SkipLink {
      * If `true`, the background will be hidden.
      */
     transparentBackground: boolean;
+    /**
+     * Sets focus on the element.
+     */
+    setFocus(): Promise<void>;
     render(): any;
 }

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

@@ -41,7 +41,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 +53,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 +101,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,35 +117,35 @@ 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;
      */
@@ -153,47 +153,47 @@ export declare class TextField {
     /**
      * 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 +227,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 +247,7 @@ export declare class TextField {
     private onInput;
     private onBlur;
     private onFocus;
+    private onTextAreaScroll;
     private onWheel;
     private hasStatus;
     private handleFormReset;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcColor, IcBrand } from "../../utils/types";
+import { IcColor, IcBrand, IcThemeSettings } from "../../utils/types";
 export declare class Theme {
     themeClass: string;
     /**
@@ -10,12 +10,16 @@ export declare class Theme {
     /**
      * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
      */
-    theme?: "dark" | "light" | "system";
+    theme?: IcThemeSettings;
     watchThemePropHandler(): void;
     /**
      * @internal Emitted when the brand color is changed.
      */
     brandChange: EventEmitter<IcBrand>;
+    /**
+     * Emitted when the theme is changed.
+     */
+    icThemeChange: EventEmitter<IcThemeSettings>;
     componentWillLoad(): void;
     private darkModeChangeHandler;
     private checkBrandColorContrast;

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

@@ -18,10 +18,12 @@ export declare class Tooltip {
      * If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.
      */
     disableClick?: boolean;
+    watchDisableClickHandler(): void;
     /**
      * If `true`, the tooltip will not be displayed on hover, it will require a click.
      */
     disableHover?: boolean;
+    watchDisableHoverHandler(): void;
     /**
      * The number of lines to display before truncating the text.
      */
@@ -73,5 +75,6 @@ export declare class Tooltip {
     private mouseLeaveTooltip;
     private handleKeyDown;
     private manageEventListeners;
+    private updateTooltipEvents;
     render(): any;
 }