@ukic/web-components 2.1.0-beta.9 → 2.3.0

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

@@ -1,31 +1,29 @@
 import { IcLoadingSizes, IcLoadingTypes } from "./ic-loading-indicator.types";
 import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class LoadingIndicator {
+  private circularMeter;
+  private innerElement?;
+  private interval;
+  private labelList;
+  private outerElement?;
   host: HTMLIcLoadingIndicatorElement;
+  circularDiameter: number;
+  circularLineWidth: number;
+  indeterminate: boolean;
+  indicatorLabel: string;
+  showSecond: boolean;
   /**
-   * The current amount of progress made.
-   * If not provided, component acts as an indeterminate loading indicator.
-   */
-  progress?: number;
-  /**
-   * The minimum value that the progress value can take.
-   * Used to calculate the proportional width of the progress bar.
-   */
-  min?: number;
-  /**
-   * The maximum value that the progress value can take.
-   * Used to calculate the proportional width of the progress bar.
-   */
-  max?: number;
-  /**
-   * The label to be displayed beneath the loading indicator.
-   * Display a changing label by separating multiple messages with forward slashes.
+   * The appearance of the loading indicator, e.g. dark or light.
    */
-  label?: string;
+  appearance?: IcThemeForegroundNoDefault;
   /**
    * The description that will be set as the aria-label of the loading indicator when not using a visible label.
    */
   description?: string;
+  /**
+   * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.
+   */
+  fullWidth?: boolean;
   /**
    * @internal The step number of a compact step, managed by ic-step.
    */
@@ -34,6 +32,16 @@ export declare class LoadingIndicator {
    * The time in milliseconds before the label changes.
    */
   labelDuration?: number;
+  /**
+   * The maximum value that the progress value can take.
+   * Used to calculate the proportional width of the progress bar.
+   */
+  max?: number;
+  /**
+   * The minimum value that the progress value can take.
+   * Used to calculate the proportional width of the progress bar.
+   */
+  min?: number;
   /**
    * The size of the loading indicator.
    */
@@ -43,24 +51,22 @@ export declare class LoadingIndicator {
    */
   type?: IcLoadingTypes;
   /**
-   * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.
+   * The label to be displayed beneath the loading indicator.
+   * Display a changing label by separating multiple messages with forward slashes.
    */
-  fullWidth?: boolean;
+  label?: string;
+  watchPropHandler(): void;
   /**
-   * The appearance of the loading indicator, e.g. dark or light.
+   * The current amount of progress made.
+   * If not provided, component acts as an indeterminate loading indicator.
    */
-  appearance?: IcThemeForegroundNoDefault;
-  indicatorLabel: string;
-  indeterminate: boolean;
-  showSecond: boolean;
-  circularLineWidth: number;
-  circularDiameter: number;
-  watchPropHandler(): void;
+  progress?: number;
   watchProgressHandler(): void;
-  private outerElement?;
-  private innerElement?;
-  private labelList;
-  private circularMeter;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillUpdate(): void;
+  componentDidUpdate(): void;
   private updateCircularProgressMeter;
   private getLabel;
   private getLabelVariant;
@@ -70,9 +76,5 @@ export declare class LoadingIndicator {
   private updateLabel;
   private setCircleXY;
   private setDashSteps;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  componentWillUpdate(): void;
-  componentDidUpdate(): void;
   render(): any;
 }

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

@@ -1,5 +1,5 @@
-export declare type IcLoadingSizes = "default" | "small" | "large" | "icon";
-export declare type IcLoadingTypes = "circular" | "linear";
+export type IcLoadingSizes = "default" | "small" | "large" | "icon";
+export type IcLoadingTypes = "circular" | "linear";
 export interface IcLoadingCircleXYR {
   x: number;
   y: number;

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

@@ -1,62 +1,89 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcActivationTypes, IcMenuOption } from "../../utils/types";
+import { IcActivationTypes, IcMenuOption, IcValueEventDetail } 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 {
+  private firstRender;
+  private hasPreviouslyBlurred;
+  private hasTimedOut;
+  private isLoading;
+  private isSearchBar;
+  private isSearchableSelect;
+  private menu;
+  private popperInstance;
+  private preventClickOpen;
+  private ungroupedOptions;
   host: HTMLIcMenuElement;
+  focusFromSearchKeypress: boolean;
+  initialOptionsListRender: boolean;
+  keyboardNav: boolean;
+  optionHighlighted: string;
+  preventIncorrectTabOrder: boolean;
   /**
-   * If `true`, the menu will be displayed open.
+   * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
    */
-  open: boolean;
+  activationType?: IcActivationTypes;
   /**
-   * The possible menu selection options.
+   * The reference to an anchor element the menu will position itself from when rendered.
    */
-  options: IcMenuOption[];
+  anchorEl: HTMLElement;
   /**
-   * If `true`, the small styling will be applied to the menu.
+   * @internal If `true`, autofocus will be applied on selected item when menu is open.
    */
-  small?: boolean;
+  autoFocusOnSelected: boolean;
   /**
-   * The ID of the menu.
+   *  If `true`, the menu will fill the width of the container.
    */
-  menuId: string;
+  fullWidth: boolean;
   /**
-   * The value of the currently selected option.
+   * The reference to the input element.
    */
-  value: string;
+  inputEl: HTMLElement;
   /**
-   * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
+   * The label for the input element.
    */
-  activationType?: IcActivationTypes;
+  inputLabel: string;
   /**
-   * The reference to the input element.
+   * The ID of the menu.
    */
-  inputEl: HTMLElement;
+  menuId: string;
+  /**
+   * If `true`, the menu will be displayed open.
+   */
+  open: boolean;
   /**
    * @internal - The parent element if ic-menu is nested inside another component.
    */
   parentEl?: HTMLElement;
   /**
-   * The label for the input element.
+   * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
    */
-  inputLabel: string;
+  searchMode?: IcSearchBarSearchModes;
   /**
-   * The reference to an anchor element the menu will position itself from when rendered.
+   * If `true`, the small styling will be applied to the menu.
    */
-  anchorEl: HTMLElement;
+  small?: boolean;
   /**
-   *  If `true`, the menu will fill the width of the container.
+   * The possible menu selection options.
    */
-  fullWidth: boolean;
+  options: IcMenuOption[];
+  watchOptionsHandler(newOptions: IcMenuOption[]): void;
   /**
-   * @internal If `true`, autofocus will be applied on selected item when menu is open.
+   * The value of the currently selected option.
    */
-  autoFocusOnSelected: boolean;
-  keyboardNav: boolean;
-  optionHighlighted: string;
-  focusFromSearchKeypress: boolean;
-  initialOptionsListRender: boolean;
-  preventIncorrectTabOrder: boolean;
-  watchOptionsHandler(): void;
+  value: string;
+  watchValueHandler(): void;
+  /**
+   * @internal Emitted when key is pressed while menu is open
+   */
+  menuKeyPress: EventEmitter<{
+    isNavKey: boolean;
+    key: string;
+  }>;
+  /**
+   * @internal Emitted when an option has been highlighted
+   */
+  menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;
   /**
    * @internal Emitted when an option is selected.
    */
@@ -66,25 +93,31 @@ export declare class Menu {
    */
   menuStateChange: EventEmitter<IcMenuChangeEventDetail>;
   /**
-   * @internal Emitted when an option has been highlighted
+   * @internal Emitted when menu value changes.
    */
-  menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;
+  menuValueChange: EventEmitter<IcValueEventDetail>;
   /**
-   * @internal Emitted when key is pressed while menu is open
+   * @internal Emitted when the retry button is clicked
    */
-  menuKeyPress: EventEmitter<{
-    isNavKey: boolean;
+  retryButtonClicked: EventEmitter<IcValueEventDetail>;
+  /**
+   * @internal Emitted when the timeout menu loses focus
+   */
+  timeoutBlur: EventEmitter<{
+    ev: FocusEvent;
   }>;
-  private handleClearListener;
-  private handleSubmitSearch;
-  private menu;
-  private ungroupedOptions;
-  private popperInstance;
-  private preventClickOpen;
-  private isSearchBar;
-  private handleMenuChange;
-  private setNextOptionValue;
-  private setPreviousOptionValue;
+  /**
+   * @internal Emitted when the ungrouped options have been set.
+   */
+  ungroupedOptionsSet: EventEmitter<{
+    options: IcMenuOption[];
+  }>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidUpdate(): void;
+  componentDidRender(): void;
   /**
    * @internal If menu is opened with the mouse, emit menuStateChange custom event.
    */
@@ -99,12 +132,21 @@ export declare class Menu {
    * @internal Used to highlight the first option in the menu.
    */
   handleSetFirstOption(): Promise<void>;
+  private handleClearListener;
+  private handleSubmitSearch;
+  private handleMenuChange;
+  private setNextOptionValue;
+  private setPreviousOptionValue;
+  private getParentEl;
   private arrowBehaviour;
+  private setMenuOptions;
   private setHighlightedOption;
   private autoSetInputValueKeyboardOpen;
   private manSetInputValueKeyboardOpen;
   private setInputValue;
   private handleOptionClick;
+  private handleRetry;
+  private handleRetryKeyDown;
   private handleBlur;
   private handleMouseDown;
   private handleMenuKeyDown;
@@ -117,12 +159,9 @@ export declare class Menu {
   private isManualMode;
   private scrollToSelected;
   private loadUngroupedOptions;
-  connectedCallback(): void;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  componentDidRender(): void;
-  componentDidUpdate(): void;
-  disconnectedCallback(): void;
+  private setMenuScrollbar;
+  private handleTimeoutBlur;
+  private optionContent;
   private displayOption;
   render(): any;
 }

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

@@ -0,0 +1,8 @@
+export declare class MenuGroup {
+  el: HTMLIcMenuGroupElement;
+  /**
+   * The label to display as the title of the menu group.
+   */
+  label?: string;
+  render(): any;
+}

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

@@ -0,0 +1,74 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcMenuItemVariants } from "./ic-menu-item.types";
+/**
+ * @slot icon - Content will be placed to the left of the menu item label.
+ */
+export declare class MenuItem {
+  el: HTMLIcMenuItemElement;
+  toggleChecked: boolean;
+  /**
+   * The description displayed in the menu item, below the label.
+   */
+  description?: string;
+  /**
+   * If `true`, the menu item will be in disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * The URL that the link points to. This will render the menu item as an "a" tag.
+   */
+  href?: string;
+  /**
+   * The human language of the linked URL.
+   */
+  hreflang?: string;
+  /**
+   * The label describing the keyboard shortcut for a menu item's action.
+   */
+  keyboardShortcut?: string;
+  /**
+   * The label to display in the menu item.
+   */
+  label: string;
+  /**
+   * How much of the referrer to send when following the link.
+   */
+  referrerpolicy?: ReferrerPolicy;
+  /**
+   * The relationship of the linked URL as space-separated link types.
+   */
+  rel?: string;
+  /**
+   * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.
+   */
+  submenuTriggerFor?: string;
+  /**
+   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   */
+  target?: string;
+  /**
+   * The variant of the menu item.
+   */
+  variant: IcMenuItemVariants;
+  /**
+   * @internal Emitted when item loses focus.
+   */
+  childBlur: EventEmitter<void>;
+  /**
+   * @internal Emitted when the user clicks a menu item.
+   */
+  handleMenuItemClick: EventEmitter<{
+    label: string;
+    hasSubMenu: boolean;
+  }>;
+  /**
+   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.
+   */
+  triggerPopoverMenuInstance: EventEmitter<void>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  handleHostClick(e: Event): void;
+  private handleClick;
+  private getMenuItemAriaLabel;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export type IcMenuItemVariants = "toggle" | "destructive" | "default";

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

@@ -4,42 +4,44 @@ import { IcNavButtonModes } from "./ic-navigation-button.types";
  * @slot icon - Content will be placed to the left of the button label.
  */
 export declare class NavigationButton {
+  private buttonEl;
+  private inheritedAttributes;
   el: HTMLIcNavigationButtonElement;
+  initialAppearance: IcThemeForeground;
   /**
-   * The label info to display.
-   */
-  label: string;
-  /**
-   * The URL that the link points to. This will render the button as an "a" tag.
-   */
-  href?: string;
-  /**
-   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
-   */
-  target?: string;
-  /**
-   * The relationship of the linked URL as space-separated link types.
+   * The display mode.
    */
-  rel?: string;
+  mode: IcNavButtonModes;
   /**
    * If `true`, the user can save the linked URL instead of navigating to it.
    */
   download?: string | boolean;
+  /**
+   * The URL that the link points to. This will render the button as an "a" tag.
+   */
+  href?: string;
   /**
    * The human language of the linked URL.
    */
   hreflang?: string;
+  /**
+   * The label info to display.
+   */
+  label: string;
   /**
    * How much of the referrer to send when following the link.
    */
   referrerpolicy?: ReferrerPolicy;
   /**
-   * The display mode.
+   * The relationship of the linked URL as space-separated link types.
    */
-  mode: IcNavButtonModes;
-  initialAppearance: IcThemeForeground;
-  private buttonEl;
-  private inheritedAttributes;
+  rel?: string;
+  /**
+   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   */
+  target?: string;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   navBarMenuOpenHandler(): void;
   navBarMenuCloseHandler(): void;
   themeChangeHandler(ev: CustomEvent): void;
@@ -47,7 +49,5 @@ export declare class NavigationButton {
    * Sets focus on the native `button`.
    */
   setFocus(): Promise<void>;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
   render(): any;
 }

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

@@ -1 +1 @@
-export declare type IcNavButtonModes = "navbar" | "menu";
+export type IcNavButtonModes = "navbar" | "menu";

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

@@ -1,24 +1,34 @@
 import { IcNavType } from "../../utils/types";
 export declare class NavigationGroup {
+  private allGroupedNavigationItems;
+  private collapsedIconLabelsNavigationItemsHeight;
+  private dropdown;
+  private DYNAMIC_GROUPED_LINKS_HEIGHT_MS;
+  private groupEl;
+  private IC_NAVIGATION_ITEM;
+  private isCollapsedLabelVariant;
+  private isSideNavExpanded;
+  private mouseGate;
+  private nodeName;
   el: HTMLIcNavigationGroupElement;
-  /**
-   * The label to display on the group.
-   */
-  label: string;
-  /**
-   *  If `true`, the group will be expandable in the side menu.
-   */
-  expandable: boolean;
-  dropdownOpen: boolean;
-  inTopNavSideMenu: boolean;
   deviceSize: number;
+  dropdownOpen: boolean;
+  expanded: boolean;
   focusStyle: import("../../utils/types").IcThemeForeground;
+  inTopNavSideMenu: boolean;
   navigationType: IcNavType | "";
   parentEl: HTMLElement;
-  expanded: boolean;
-  private groupEl;
-  private dropdown;
-  private DYNAMIC_GROUPED_LINKS_HEIGHT_MS;
+  /**
+   *  If `true`, the group will be expandable in the side menu.
+   */
+  expandable: boolean;
+  /**
+   * The label to display on the group.
+   */
+  label: string;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   childBlurHandler(): void;
   navItemClickHandler(): void;
   themeChangeHandler(ev: CustomEvent): void;
@@ -39,7 +49,7 @@ export declare class NavigationGroup {
   private handleTopNavKeydown;
   private handleKeydown;
   private handleMouseLeave;
-  private triggerShowDropdown;
+  private handleMouseEnter;
   private renderDropdownGroupedLinks;
   private renderGroupedLinks;
   /**
@@ -49,8 +59,5 @@ export declare class NavigationGroup {
   private getNavigationChildItemsHeight;
   private setInitialGroupedLinksWrapperHeight;
   private renderNavigationItems;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

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

@@ -4,41 +4,62 @@ import { IcNavType } from "../../utils/types";
  * @part link - The `<a>` within ic-navigation-item
  */
 export declare class NavigationItem {
+  private navigationSlot;
+  private isInitialRender;
+  private itemEl;
   el: HTMLIcNavigationItemElement;
+  deviceSize: number;
+  focusStyle: import("../../utils/types").IcThemeForeground;
+  inTopNavSideMenu: boolean;
+  isSideNavMobile: boolean;
+  isTopNavChild: boolean;
+  navigationType: IcNavType | "";
+  parentEl: HTMLElement;
+  sideNavExpanded: boolean;
   /**
-   * The label of the navigation item.
+   * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.
    */
-  label: string;
+  collapsedIconLabel: boolean;
   /**
-   * The destination of the navigation item.
+   * @internal If `true`, the navigation item will be displayed within a tooltip.
    */
-  href: string;
+  displayNavigationTooltip: boolean;
   /**
-   *  If `true`, the navigation item will be set in a selected state.
+   * If `true`, the user can save the linked URL instead of navigating to it.
    */
-  selected: boolean;
+  download?: string | boolean;
   /**
    *  @internal If `true`, the navigation item will be expandable.
    */
   expandable: boolean;
   /**
-   * @internal If `true`, the navigation item will be displayed within a tooltip.
+   * The destination of the navigation item.
    */
-  displayNavigationTooltip: boolean;
+  href: string;
   /**
-   * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.
+   * The human language of the linked URL.
    */
-  collapsedIconLabel: boolean;
-  isTopNavChild: boolean;
-  inTopNavSideMenu: boolean;
-  deviceSize: number;
-  focusStyle: import("../../utils/types").IcThemeForeground;
-  navigationType: IcNavType | "";
-  parentEl: HTMLElement;
-  sideNavExpanded: boolean;
-  isSideNavMobile: boolean;
-  private itemEl;
-  private navigationSlot;
+  hreflang?: string;
+  /**
+   * The label of the navigation item.
+   */
+  label: string;
+  /**
+   * The relationship of the linked URL as space-separated link types.
+   */
+  rel?: string;
+  /**
+   * How much of the referrer to send when following the link.
+   */
+  referrerpolicy?: ReferrerPolicy;
+  /**
+   *  If `true`, the navigation item will be set in a selected state.
+   */
+  selected: boolean;
+  /**
+   *  The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   */
+  target?: string;
   /**
    * @internal - Emitted when item loses focus.
    */
@@ -47,19 +68,18 @@ export declare class NavigationItem {
    * @internal - Emitted when navigation item clicked.
    */
   navItemClicked: EventEmitter<void>;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidUpdate(): void;
   themeChangeHandler(ev: CustomEvent): void;
-  private topNavResizedHandler;
-  private sideNavExpandHandler;
   /**
    * Sets focus on the nav item.
    */
   setFocus(): Promise<void>;
+  private displayDefaultNavigationItem;
+  private topNavResizedHandler;
+  private sideNavExpandHandler;
   private handleBlur;
   private handleClick;
-  componentWillLoad(): void;
-  private isInitialRender;
-  componentDidUpdate(): void;
-  disconnectedCallback(): void;
-  private displayDefaultNavigationItem;
   render(): any;
 }