@ukic/web-components 3.0.0 → 3.2.0

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcNavType, IcTheme } from "../../utils/types";
+import { IcNavType, IcBrand, IcBrandForeground, IcBrandForegroundNoDefault, IcThemeMode } from "../../utils/types";
 /**
  * @part link - The `<a>` within ic-navigation-item
  * @slot badge - Badge component overlaying the top right of the icon.
@@ -8,24 +8,28 @@ import { IcNavType, IcTheme } from "../../utils/types";
 export declare class NavigationItem {
     private navigationSlot;
     private isInitialRender;
-    private itemEl;
+    private itemEl?;
+    private hostMutationObserver;
+    private ANIMATION_DURATION;
+    private ARIA_LABEL_STRING;
     el: HTMLIcNavigationItemElement;
     deviceSize: number;
-    focusStyle: import("../../utils/types").IcThemeForeground;
+    focusStyle: IcBrandForegroundNoDefault | IcBrandForeground;
     inTopNavSideMenu: boolean;
     isSideNavMobile: boolean;
     isTopNavChild: boolean;
     navigationType: IcNavType | "";
-    parentEl: HTMLElement;
+    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.
      */
@@ -33,11 +37,11 @@ export declare class NavigationItem {
     /**
      *  @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.
      */
@@ -45,7 +49,7 @@ export declare class NavigationItem {
     /**
      * The label of the navigation item.
      */
-    label: string;
+    label?: string;
     /**
      * The relationship of the linked URL as space-separated link types.
      */
@@ -57,11 +61,15 @@ 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).
      */
     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;
     /**
      * @internal - Emitted when item loses focus.
      */
@@ -72,8 +80,9 @@ export declare class NavigationItem {
     navItemClicked: EventEmitter<void>;
     disconnectedCallback(): void;
     componentWillLoad(): void;
+    componentDidLoad(): void;
     componentDidUpdate(): void;
-    themeChangeHandler({ detail }: CustomEvent<IcTheme>): void;
+    brandChangeHandler({ detail }: CustomEvent<IcBrand>): void;
     /**
      * Sets focus on the nav item.
      */
@@ -83,7 +92,9 @@ export declare class NavigationItem {
     private sideNavExpandHandler;
     private handleBlur;
     private handleClick;
+    private hostMutationCallback;
     private generateTooltipLabel;
     private renderNavigationItemContent;
+    private sideNavToggleTooltip;
     render(): any;
 }

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

@@ -1,25 +1,31 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { IcThemeMode } from "../../utils/types";
 /**
  * @slot navigation - Content will be rendered at top of panel.
  * @slot buttons - Content will be rendered above version info and below navigation.
  */
 export declare class NavigationMenu {
-    private closeButton;
+    private closeButton?;
     private hasButtons;
     private hasNavigation;
     private lastTabStop;
     private navBarEl;
     private navGroupFirst;
+    private navigationEls;
     private navItemAboveButtons;
     el: HTMLIcNavigationMenuElement;
     /**
      * The status info to display.
      */
-    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 display.
      */
-    version: string;
+    version?: string;
     /**
      * @internal - Emitted when the menu is closed.
      */
@@ -29,6 +35,7 @@ export declare class NavigationMenu {
     componentWillRender(): void;
     navItemClickHandler(): void;
     handleKeyDown(ev: KeyboardEvent): void;
+    private setLastTabStop;
     private closeMenu;
     private focusCloseButton;
     private focusLastTabStop;

package/dist/types/components/ic-page-header/ic-page-header.d.ts

@@ -1,4 +1,4 @@
-import { IcAlignment, IcSizesNoLarge } from "../../utils/types";
+import { IcAlignment, IcSizesNoLarge, IcThemeMode } from "../../utils/types";
 /**
  * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.
  * @slot heading - Content will be rendered in the title area, in place of the heading.
@@ -47,6 +47,10 @@ export declare class PageHeader {
      * The subtitle to render on the page header.
      */
     subheading?: 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;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeForeground } from "../../utils/types";
+import { IcThemeMode } from "../../utils/types";
 import { IcPaginationTypes, IcChangeEventDetail } from "./ic-pagination.types";
 export declare class Pagination {
     el: HTMLIcPaginationElement;
@@ -11,51 +11,56 @@ export declare class Pagination {
     /**
      * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
      */
-    adjacentPageCount: number;
+    adjacentPageCount?: number;
     watchAdjacentPageCountHandler(): void;
-    /**
-     * The appearance of the pagination, e.g. dark, light or the default.
-     */
-    appearance: IcThemeForeground;
     /**
      * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
      */
-    boundaryPageCount: number;
+    boundaryPageCount?: number;
     watchBoundaryPageCountHandler(): void;
     /**
      * The default page to display.
      */
-    defaultPage: number;
+    defaultPage?: number;
     /**
      * If `true`, the pagination will not allow interaction.
      */
-    disabled: boolean;
+    disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the current page of the simple pagination will not be displayed.
      */
-    hideCurrentPage: boolean;
+    hideCurrentPage?: boolean;
     /**
      * If `true`, the first and last page buttons will not be displayed.
      */
-    hideFirstAndLastPageButton: boolean;
+    hideFirstAndLastPageButton?: boolean;
     /**
      * The label for the pagination item (applicable when simple pagination is being used).
      */
-    label: string;
+    label?: string;
+    /**
+     * If `true`, the pagination will display as black in the light theme, and white in dark theme.
+     */
+    monochrome?: boolean;
     /**
      * The total number of pages.
      */
     pages: number;
     watchNumberPagesHandler(): 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;
     /**
      * The type of pagination to be used.
      */
-    type: IcPaginationTypes;
+    type?: IcPaginationTypes;
     watchTypeHandler(): void;
     /**
      * The current page displayed by the pagination.
      */
-    currentPage: number;
+    currentPage?: number;
     watchPageChangeHandler(): void;
     /**
      * Emitted when a page is selected.

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

@@ -1,30 +1,35 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcPaginationItemType } from "./ic-pagination-item.types";
-import { IcThemeForeground } from "../../utils/types";
+import { IcThemeMode } from "../../utils/types";
 export declare class PaginationItem {
     el: HTMLIcPaginationItemElement;
     capitalizedLabel: string;
-    /**
-     * The appearance of the pagination, e.g. dark, light or the default.
-     */
-    appearance: IcThemeForeground;
     /**
      * If `true`, the pagination item will be disabled.
      */
-    disabled: boolean;
+    disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The label for the pagination item (applicable when simple pagination is being used).
      */
-    label: string;
+    label?: string;
     watchLabelHandler(): void;
+    /**
+     * If `true`, the pagination item will display as black in the light theme, and white in dark theme.
+     */
+    monochrome?: boolean;
     /**
      * The current page number.
      */
-    page: number | null;
+    page?: number;
     /**
      * If `true`, the pagination item will be selected.
      */
     selected: 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;
     /**
      * The type of pagination item - 'page' or 'ellipsis'.
      */
@@ -33,7 +38,7 @@ export declare class PaginationItem {
      * @internal - Emitted when a pagination item is clicked.
      */
     paginationItemClick: EventEmitter<{
-        page: number;
+        page: number | null;
     }>;
     componentWillLoad(): void;
     private handleClick;

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

@@ -1,8 +1,9 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { IcThemeMode } from "../../utils/types";
 export declare class PopoverMenu {
     private anchorEl;
     private ARIA_LABEL;
-    private backButton;
+    private backButton?;
     private currentFocus;
     private popoverMenuEls;
     private popperInstance;
@@ -12,7 +13,7 @@ export declare class PopoverMenu {
     /**
      * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.
      */
-    anchor: string;
+    anchor?: string;
     /**
      * @internal The parent popover menu of a child popover menu.
      */
@@ -28,24 +29,25 @@ export declare class PopoverMenu {
     /**
      * @internal The level of menu being displayed.
      */
-    submenuLevel: number;
+    submenuLevel?: number;
+    /**
+     * 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 popover menu will be displayed.
      */
-    open: boolean;
+    open?: boolean | undefined;
     watchOpenHandler(): void;
     /**
      * Emitted when the popover menu is closed.
      */
-    icPopoverClosed: EventEmitter<void>;
+    icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;
     disconnectedCallback(): void;
     componentDidLoad(): void;
     componentWillRender(): void;
     componentDidRender(): void;
-    handleMenuItemClick(ev: CustomEvent<{
-        label: string;
-        hasSubMenu: boolean;
-    }>): void;
+    handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void;
     handleSubmenuChange(ev: Event): void;
     handleClick(ev: Event): void;
     handleKeyDown(ev: KeyboardEvent): void;
@@ -61,10 +63,10 @@ export declare class PopoverMenu {
     private findAnchorEl;
     private isNotPopoverMenuEl;
     /**
-     * Close the popover menu, emit isPopoverClosed event
+     * @internal Close the menu, emit icPopoverClosed of the root popover
      * @param setFocusToAnchor when true return focus to anchor element when menu is closed
      */
-    private closeMenu;
+    closeMenu(setFocusToAnchor?: boolean, menuElement?: HTMLIcMenuItemElement): Promise<void>;
     private getNextItemToSelect;
     private addMenuItems;
     private getMenuAriaLabel;

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

@@ -1,8 +1,8 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcOrientation, IcSizesNoLarge, IcValueEventDetail } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcOrientation, IcSizesNoLarge, IcThemeMode, IcValueEventDetail } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-radio-group.types";
 export declare class RadioGroup {
-    private radioContainer;
+    private radioContainer?;
     private radioOptions;
     private resizeObserver;
     private ADDITIONAL_FIELD;
@@ -16,16 +16,16 @@ export declare class RadioGroup {
     /**
      * If `true`, the disabled state will be set.
      */
-    disabled: boolean;
+    disabled?: boolean;
     watchDisabledHandler(newValue: boolean): 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 radio group to be displayed.
      */
@@ -37,11 +37,11 @@ export declare class RadioGroup {
     /**
      * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.
      */
-    orientation: IcOrientation;
+    orientation?: IcOrientation;
     /**
      * If `true`, the radio group will require a value.
      */
-    required: boolean;
+    required?: boolean;
     /**
      * The size of the radio group component.
      */
@@ -49,12 +49,17 @@ export declare class RadioGroup {
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'.
      */
-    validationStatus: IcInformationStatusOrEmpty;
+    validationStatus?: IcInformationStatusOrEmpty;
     /**
-     * The validation text - e.g. 'error' | 'warning' | 'success'.
+     * The text to display as the validation message.
      */
-    validationText: string;
+    validationText?: string;
     orientationChangeHandler(): 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(newValue: IcThemeMode): void;
     /**
      * Emitted when a user selects a radio.
      */

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

@@ -1,26 +1,27 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAdditionalFieldTypes, IcValueEventDetail } from "../../utils/types";
+import { IcAdditionalFieldTypes, IcThemeMode, IcValueEventDetail } from "../../utils/types";
 /**
  * @slot additional-field - Content to displayed alongside a radio option.
  */
 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.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The text to be displayed when dynamic.
      */
-    dynamicText: string;
+    dynamicText?: string;
     /**
      * The <form> element to associate the radio with.
      */
@@ -28,7 +29,7 @@ export declare class RadioOption {
     /**
      * The group label for the radio option.
      */
-    groupLabel: string;
+    groupLabel?: string;
     /**
      * The label for the radio option.
      */
@@ -36,7 +37,11 @@ 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.
+     */
+    theme?: IcThemeMode;
     /**
      * The value for the radio option.
      */
@@ -45,12 +50,13 @@ 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.
      */
     icCheck: EventEmitter<IcValueEventDetail>;
+    handleCheck(ev: CustomEvent<IcValueEventDetail>): void;
     /**
      * Emitted when the radio option is selected or deselected.
      */
@@ -60,7 +66,7 @@ export declare class RadioOption {
     componentDidLoad(): void;
     componentWillRender(): void;
     componentDidRender(): void;
-    textfieldValueHandler(event: CustomEvent<{
+    additionalFieldValueHandler(event: CustomEvent<{
         value: string;
     }>): void;
     /**
@@ -71,8 +77,9 @@ export declare class RadioOption {
      * @internal Sets the tabIndex of the radio option.
      */
     setTabIndex(value: number): Promise<void>;
+    private getAdditionalField;
     private handleClick;
-    private swallowClick;
+    private handleKeyDown;
     private handleFormReset;
     render(): any;
 }

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 } 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,15 +44,16 @@ 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.
      */
     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.
@@ -62,10 +63,11 @@ export declare class SearchBar {
      * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
      */
     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.
      */
@@ -110,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.
      */
@@ -134,7 +136,11 @@ 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.
+     */
+    theme?: IcThemeMode;
     /**
      * If using external filtering, set a timeout for when loading takes too long.
      */
@@ -154,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.
@@ -188,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
      */
@@ -206,11 +212,18 @@ export declare class SearchBar {
      * Emitted when focus is invoked from ic-search-bar
      */
     icSearchBarFocus: EventEmitter<IcValueEventDetail>;
+    /**
+     * Emitted when a keydown event occurred.
+     */
+    icKeydown: EventEmitter<{
+        event: KeyboardEvent;
+    }>;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentWillRender(): void;
-    handleKeyDown(ev: CustomEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
     handleKeyUp(ev: KeyboardEvent): void;
     /**
      * Sets focus on the native `input`.
@@ -231,7 +244,6 @@ export declare class SearchBar {
     private handleHostBlur;
     private handleShowClearButton;
     private handleFocusClearButton;
-    private handleMenuCloseFromMenuChange;
     private handleTruncateValue;
     private renderAssistiveHintEl;
     private updateSearchResultAriaLive;

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";