@ukic/web-components 3.0.0-alpha.9 → 3.1.0

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

@@ -6,7 +6,7 @@ export declare class Divider {
     /**
      * The line style of the divider.
      */
-    borderStyle: IcDividerStyles;
+    borderStyle?: IcDividerStyles;
     /**
      * The label for the divider. The label placement will need to be set for the label to be displayed correctly.
      */
@@ -20,7 +20,7 @@ export declare class Divider {
     /**
      * The orientation of the divider.
      */
-    orientation: IcOrientation;
+    orientation?: IcOrientation;
     /**
      * 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.
      */
@@ -28,7 +28,7 @@ export declare class Divider {
     /**
      * The thickness of the divider.
      */
-    weight: IcDividerWeights;
+    weight?: IcDividerWeights;
     brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     private updateMonochromeState;
     componentWillRender(): void;

package/dist/types/components/ic-empty-state/ic-empty-state.d.ts

@@ -1,5 +1,5 @@
 import { IcEmptyStateAlignment } from "./ic-empty-state.types";
-import { IcSizes } from "../../utils/types";
+import { IcSizes, IcThemeMode } from "../../utils/types";
 /**
  * @slot image - Content is placed at the top above all other content.
  * @slot actions - Content is placed at the bottom below all other content.
@@ -34,6 +34,10 @@ export declare class EmptyState {
      * The subtitle rendered in the empty state container.
      */
     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;
     componentDidLoad(): void;
     render(): any;

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

@@ -8,7 +8,7 @@ import { IcFooterBreakpoints } from "./ic-footer.types";
  * @slot caption - Content will be rendered above Crown Copyright.
  */
 export declare class Footer {
-    private footerEl;
+    private footerEl?;
     private resizeObserver;
     private hostMutationObserver;
     el: HTMLIcFooterElement;
@@ -25,15 +25,15 @@ export declare class Footer {
     /**
      * The caption displayed at the bottom of the footer.
      */
-    caption: string;
+    caption?: string;
     /**
      * If `true`, the footer will display the crown copyright at the bottom.
      */
-    copyright: boolean;
+    copyright?: boolean;
     /**
      * The description displayed at the top of the footer.
      */
-    description: string;
+    description?: string;
     /**
      * If `true`, the footer will be set up to handle link groups instead of standalone links.
      */

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

@@ -16,7 +16,7 @@ export declare class Hero {
     /**
      * The alignment of the hero.
      */
-    aligned: IcAlignment;
+    aligned?: IcAlignment;
     /**
      * The optional background image.
      */
@@ -24,7 +24,7 @@ export declare class Hero {
     /**
      * The alignment of the hero content.
      */
-    contentAligned: IcHeroContentAlignments;
+    contentAligned?: IcHeroContentAlignments;
     /**
      * If `true`, the background image (if set) will not scroll using a parallax effect.
      */
@@ -32,7 +32,7 @@ export declare class Hero {
     /**
      * The heading of the hero. An <h2> level heading.
      */
-    heading: string;
+    heading?: string;
     /**
      * The optional secondary heading, an <h3> level heading. Replaced by slotted right content.
      */

package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts

@@ -8,20 +8,20 @@ export declare class InputComponentContainer {
     /**
      *  If `true`, the disabled state will be set.
      */
-    disabled: boolean;
+    disabled?: boolean;
     watchDisabledHandler(): void;
     /**
      *  If `true`, the input component container will fill the width of the container it is in.
      */
-    fullWidth: boolean;
+    fullWidth?: boolean;
     /**
      *  If `true`, the input component container will allow for multiple lines.
      */
-    multiLine: boolean;
+    multiLine?: boolean;
     /**
      *  If `true`, the readonly state will be set.
      */
-    readonly: boolean;
+    readonly?: boolean;
     /**
      * The size of the input component container component.
      */
@@ -29,11 +29,11 @@ export declare class InputComponentContainer {
     /**
      *  If `true`, the validation will display inline.
      */
-    validationInline: boolean;
+    validationInline?: boolean;
     /**
      * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.
      */
-    validationStatus: IcInformationStatusOrEmpty;
+    validationStatus?: IcInformationStatusOrEmpty;
     componentWillLoad(): void;
     componentDidLoad(): void;
     render(): any;

package/dist/types/components/ic-input-label/ic-input-label.d.ts

@@ -2,11 +2,11 @@ export declare class InputLabel {
     /**
      * If `true`, the disabled state will be set.
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * The ID of the form element the label is bound to.
      */
-    for: string;
+    for?: string;
     /**
      * The helper text that will be displayed.
      */

package/dist/types/components/ic-input-validation/ic-input-validation.d.ts

@@ -8,15 +8,15 @@ export declare class InputValidation {
     /**
      *  The ARIA live mode to apply to the message.
      */
-    ariaLiveMode: IcAriaLiveModeVariants;
+    ariaLiveMode?: IcAriaLiveModeVariants;
     /**
      * The ID of the form element the validation is bound to.
      */
-    for: string;
+    for?: string;
     /**
      *  If `true`, the input validation will fill the width of the container.
      */
-    fullWidth: boolean;
+    fullWidth?: boolean;
     /**
      * The validation message to display.
      */
@@ -24,7 +24,7 @@ export declare class InputValidation {
     /**
      * The status of the validation - e.g. 'error' | 'warning' | 'success'.
      */
-    status: IcInformationStatusOrEmpty;
+    status?: IcInformationStatusOrEmpty;
     componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/ic-loading-indicator/ic-loading-indicator.d.ts

@@ -1,7 +1,7 @@
 import { IcLoadingSizes, IcLoadingTypes } from "./ic-loading-indicator.types";
 import { IcThemeMode } from "../../utils/types";
 export declare class LoadingIndicator {
-    private circularMeter;
+    private circularMeter?;
     private innerElement?;
     private interval;
     private labelList;
@@ -65,7 +65,7 @@ export declare class LoadingIndicator {
     /**
      * 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;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcActivationTypes, IcMenuOption, IcSizes, IcValueEventDetail } from "../../utils/types";
+import { IcActivationTypes, IcMenuOption, IcSizes, IcMultiValueEventDetail } from "../../utils/types";
 import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEventDetail } from "./ic-menu.types";
 import { IcSearchBarSearchModes } from "../ic-search-bar/ic-search-bar.types";
 export declare class Menu {
@@ -15,19 +15,19 @@ export declare class Menu {
     private isSearchableSelect;
     private lastOptionSelected;
     private lastOptionFocused;
-    private menu;
+    private menu?;
     private multiOptionClicked;
     private popperInstance;
     private preventClickOpen;
     private preventMenuFocus;
-    private selectAllButton;
+    private selectAllButton?;
     private shiftPressed;
     private ungroupedOptions;
     host: HTMLIcMenuElement;
     focusFromSearchKeypress: boolean;
     initialOptionsListRender: boolean;
     keyboardNav: boolean;
-    optionHighlighted: string;
+    optionHighlighted: string | undefined;
     preventIncorrectTabOrder: boolean;
     menuOptions: IcMenuOption[];
     /**
@@ -41,15 +41,15 @@ export declare class Menu {
     /**
      * @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.
      */
@@ -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.
      */
@@ -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.
      */
@@ -132,7 +132,7 @@ export declare class Menu {
     /**
      * @internal Emitted when the retry button is clicked.
      */
-    retryButtonClicked: EventEmitter<IcValueEventDetail>;
+    retryButtonClicked: EventEmitter<IcMultiValueEventDetail>;
     /**
      * @internal Emitted when the timeout menu loses focus.
      */

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

@@ -1,5 +1,5 @@
 export interface IcOptionSelectEventDetail {
-    value: string;
+    value: string | undefined;
     label?: string;
     optionId?: string;
 }

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

@@ -8,7 +8,7 @@ export declare class MenuItem {
     /**
      * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.
      */
-    checked: boolean;
+    checked?: boolean;
     /**
      * The description displayed in the menu item, below the label.
      */
@@ -53,7 +53,7 @@ export declare class MenuItem {
     /**
      * The variant of the menu item.
      */
-    variant: IcMenuItemVariants;
+    variant?: IcMenuItemVariants;
     /**
      * @internal Emitted when item loses focus.
      */

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

@@ -5,7 +5,7 @@ import { IcNavButtonModes } from "./ic-navigation-button.types";
  * @slot badge - Badge component overlaying the top right of the button.
  */
 export declare class NavigationButton {
-    private buttonEl;
+    private buttonEl?;
     private inheritedAttributes;
     private hostMutationObserver;
     el: HTMLIcNavigationButtonElement;

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

@@ -1,13 +1,14 @@
+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 collapsedNavItemsHeight;
-    private dropdown;
+    private dropdown?;
     private DYNAMIC_GROUPED_LINKS_HEIGHT_MS;
     private expandedNavItemsHeight;
-    private groupEl;
+    private groupEl?;
     private IC_NAVIGATION_ITEM;
-    private isSideNavExpanded;
     private mouseGate;
     private nodeName;
     private GROUPED_LINKS_WRAPPER_CLASS;
@@ -18,11 +19,12 @@ export declare class NavigationGroup {
     focusStyle: IcBrandForegroundNoDefault | IcBrandForeground;
     inTopNavSideMenu: boolean;
     navigationType: IcNavType | "";
-    parentEl: HTMLElement;
+    parentEl: HTMLElement | null;
+    isSideNavExpanded: boolean;
     /**
-     *  If `true`, the group will be expandable in the side menu.
+     *  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.
      */
@@ -31,10 +33,19 @@ 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;
+    /**
+     * @internal Emitted when a navigation group is opened - when within an ic-top-navigation at large screen sizes.
+     */
+    navigationGroupOpened: EventEmitter<IcNavigationOpenEventDetail>;
+    /**
+     * @internal Emitted when a navigation group is expanded - when within an ic-top-navigation at small screen sizes.
+     */
+    navigationGroupExpanded: EventEmitter<IcNavigationExpandEventDetail>;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     childBlurHandler(): void;
+    handleNavigationGroupOpened(event: CustomEvent): void;
     navItemClickHandler(): void;
     brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     /**
@@ -63,6 +74,7 @@ export declare class NavigationGroup {
      */
     private getNavigationChildItemsHeight;
     private setInitialGroupedLinksWrapperHeight;
+    private renderGroupTitleText;
     private renderNavigationItems;
     private setGroupedLinksElementHeight;
     render(): any;

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

@@ -0,0 +1,6 @@
+export interface IcNavigationOpenEventDetail {
+    source: HTMLElement;
+}
+export interface IcNavigationExpandEventDetail {
+    expanded: boolean;
+}

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

@@ -8,7 +8,7 @@ import { IcNavType, IcBrand, IcBrandForeground, IcBrandForegroundNoDefault, IcTh
 export declare class NavigationItem {
     private navigationSlot;
     private isInitialRender;
-    private itemEl;
+    private itemEl?;
     private hostMutationObserver;
     private ANIMATION_DURATION;
     private ARIA_LABEL_STRING;
@@ -19,17 +19,17 @@ export declare class NavigationItem {
     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.
      */
@@ -37,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.
      */
@@ -49,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.
      */
@@ -61,7 +61,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).
      */

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

@@ -5,18 +5,19 @@ import { IcThemeMode } from "../../utils/types";
  * @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.
      */
@@ -24,7 +25,7 @@ export declare class NavigationMenu {
     /**
      * The version info to display.
      */
-    version: string;
+    version?: string;
     /**
      * @internal - Emitted when the menu is closed.
      */
@@ -34,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-pagination/ic-pagination.d.ts

@@ -11,34 +11,34 @@ 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 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.
      */
@@ -55,12 +55,12 @@ export declare class Pagination {
     /**
      * 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

@@ -7,12 +7,12 @@ export declare class PaginationItem {
     /**
      * 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.
@@ -21,7 +21,7 @@ export declare class PaginationItem {
     /**
      * The current page number.
      */
-    page: number | null;
+    page?: number;
     /**
      * If `true`, the pagination item will be selected.
      */
@@ -38,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

@@ -3,7 +3,7 @@ import { IcThemeMode } from "../../utils/types";
 export declare class PopoverMenu {
     private anchorEl;
     private ARIA_LABEL;
-    private backButton;
+    private backButton?;
     private currentFocus;
     private popoverMenuEls;
     private popperInstance;
@@ -13,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.
      */
@@ -29,7 +29,7 @@ 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.
      */
@@ -37,7 +37,7 @@ export declare class PopoverMenu {
     /**
      * If `true`, the popover menu will be displayed.
      */
-    open: boolean;
+    open?: boolean | undefined;
     watchOpenHandler(): void;
     /**
      * Emitted when the popover menu is closed.

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

@@ -2,7 +2,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
 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,11 +49,11 @@ 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.