@ukic/web-components 3.2.0 → 3.4.0

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

@@ -8,7 +8,7 @@ export declare class Link {
     private hostMutationObserver;
     el: HTMLIcLinkElement;
     /**
-     * If `true`, the user can save the linked URL instead of navigating to it.
+     * If `true`, the user can save the linked URL instead of navigating to it. If the value is a string, it will be used as the filename for the download.
      */
     download?: string | boolean;
     /**
@@ -50,5 +50,6 @@ export declare class Link {
     private updateTheme;
     private hasRouterSlot;
     private hostMutationCallback;
+    private setDownloadAttribute;
     render(): any;
 }

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

@@ -27,33 +27,33 @@ export declare class Menu {
     focusFromSearchKeypress: boolean;
     initialOptionsListRender: boolean;
     keyboardNav: boolean;
-    optionHighlighted: string | undefined;
+    optionHighlighted?: string;
     preventIncorrectTabOrder: boolean;
     menuOptions: IcMenuOption[];
     /**
      * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
      */
-    activationType?: IcActivationTypes;
+    activationType: IcActivationTypes;
     /**
      * The reference to an anchor element the menu will position itself from when rendered.
      */
-    anchorEl: HTMLElement;
+    anchorEl?: HTMLElement;
     /**
      * @internal If `true`, autofocus will be applied on selected item when menu is open.
      */
-    autofocusOnSelected?: boolean;
+    autofocusOnSelected: boolean;
     /**
      *  If `true`, the menu will close when an option is selected.
      */
-    closeOnSelect?: boolean;
+    closeOnSelect: boolean;
     /**
      *  If `true`, the menu will fill the width of the container.
      */
-    fullWidth?: boolean;
+    fullWidth: boolean;
     /**
      * The reference to the input element.
      */
-    inputEl: HTMLElement;
+    inputEl?: HTMLElement;
     /**
      * The label for the input element.
      */
@@ -61,7 +61,7 @@ export declare class Menu {
     /**
      * The custom name for the label field for IcMenuOption.
      */
-    labelField?: string;
+    labelField: string;
     /**
      * The ID of the menu.
      */
@@ -78,15 +78,15 @@ export declare class Menu {
     /**
      * 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;
     /**
      * @internal If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
      */
-    selectOnEnter?: boolean;
+    selectOnEnter: boolean;
     /**
      * The size of the menu.
      */
-    size?: IcSizes;
+    size: IcSizes;
     /**
      * The possible menu selection options.
      */
@@ -99,7 +99,7 @@ export declare class Menu {
     /**
      * The custom name for the value field for IcMenuOption.
      */
-    valueField?: string;
+    valueField: string;
     /**
      * Emitted when the clear all button is clicked.
      */

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

@@ -2,16 +2,13 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { IcNavType, IcBrand, IcBrandForeground, IcBrandForegroundNoDefault, IcThemeMode } from "../../utils/types";
 import { IcNavigationExpandEventDetail, IcNavigationOpenEventDetail } from "./ic-navigation-group.types";
 export declare class NavigationGroup {
-    private allGroupedNavigationItems;
+    private allGroupedNavigationItemHeights;
     private collapsedNavItemsHeight;
     private dropdown?;
-    private DYNAMIC_GROUPED_LINKS_HEIGHT_MS;
     private expandedNavItemsHeight;
     private groupEl?;
-    private IC_NAVIGATION_ITEM;
     private mouseGate;
-    private nodeName;
-    private GROUPED_LINKS_WRAPPER_CLASS;
+    private linkWrapper?;
     el: HTMLIcNavigationGroupElement;
     deviceSize: number;
     dropdownOpen: boolean;
@@ -24,7 +21,7 @@ export declare class NavigationGroup {
     /**
      *  If `true`, the group will be expandable when in an ic-side-navigation component, or, when in an ic-top-navigation component, in the side menu displayed at small screen sizes.
      */
-    expandable?: boolean;
+    expandable: boolean;
     /**
      * The label to display on the group.
      */
@@ -32,7 +29,7 @@ export declare class NavigationGroup {
     /**
      * 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 Emitted when a navigation group is opened - when within an ic-top-navigation at large screen sizes.
      */
@@ -55,25 +52,14 @@ export declare class NavigationGroup {
     private sideNavExpandHandler;
     private topNavResizedHandler;
     private toggleDropdown;
-    private setGroupedNavItemTabIndex;
-    private toggleGroupedLinkWrapperHeight;
     private toggleExpanded;
     private showDropdown;
     private hideDropdown;
     private handleClick;
     private handleBlur;
-    private handleTopNavKeydown;
     private handleKeydown;
     private handleMouseLeave;
     private handleMouseEnter;
-    private renderDropdownGroupedLinks;
-    private renderGroupedLinks;
-    /**
-     * Gets the total height of navigation links to improve
-     * smoothness of expand/collapse animations
-     */
-    private getNavigationChildItemsHeight;
-    private setInitialGroupedLinksWrapperHeight;
     private renderGroupTitleText;
     private renderNavigationItems;
     private setGroupedLinksElementHeight;

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

@@ -12,6 +12,7 @@ export declare class NavigationItem {
     private hostMutationObserver;
     private ANIMATION_DURATION;
     private ARIA_LABEL_STRING;
+    private isInSideNav;
     el: HTMLIcNavigationItemElement;
     deviceSize: number;
     focusStyle: IcBrandForegroundNoDefault | IcBrandForeground;
@@ -19,29 +20,30 @@ export declare class NavigationItem {
     isSideNavMobile: boolean;
     isTopNavChild: boolean;
     navigationType: IcNavType | "";
+    navigationTypeChangeHandler(): void;
     parentEl: HTMLElement | null;
     sideNavExpanded: boolean;
     ariaLabel: string;
     /**
      * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.
      */
-    collapsedIconLabel?: boolean;
+    collapsedIconLabel: boolean;
     /**
      * @internal If `true`, the navigation item will be displayed within a tooltip.
      */
-    displayNavigationTooltip?: boolean;
+    displayNavigationTooltip: boolean;
     /**
      * If `true`, the user can save the linked URL instead of navigating to it.
      */
-    download?: string | boolean;
+    download: string | boolean;
     /**
      *  @internal If `true`, the navigation item will be expandable.
      */
-    expandable?: boolean;
+    expandable: boolean;
     /**
      * The destination of the navigation item.
      */
-    href?: string;
+    href: string;
     /**
      * The human language of the linked URL.
      */
@@ -61,7 +63,7 @@ export declare class NavigationItem {
     /**
      *  If `true`, the navigation item will be set in a selected state.
      */
-    selected?: boolean;
+    selected: boolean;
     /**
      *  The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
      */
@@ -69,7 +71,7 @@ export declare class NavigationItem {
     /**
      * 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 - Emitted when item loses focus.
      */

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,64 @@ 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;
+    watchCharactersUntilSuggestionHandler(): void;
     /**
      * 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 +97,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 +150,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 +230,7 @@ export declare class SearchBar {
      * Sets focus on the native `input`.
      */
     setFocus(): Promise<void>;
+    private setInputValue;
     private handleMouseDown;
     private handleSubmitSearchFocus;
     private handleSubmitSearch;
@@ -242,14 +244,12 @@ 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;
+    private showMenuWithNoInput;
     render(): any;
 }