@ukic/canary-web-components 2.0.0-canary.0

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

@@ -0,0 +1,167 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+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;
+  /**
+   * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
+   */
+  activationType?: IcActivationTypes;
+  /**
+   * The reference to an anchor element the menu will position itself from when rendered.
+   */
+  anchorEl: HTMLElement;
+  /**
+   * @internal If `true`, autofocus will be applied on selected item when menu is open.
+   */
+  autoFocusOnSelected: boolean;
+  /**
+   *  If `true`, the menu will fill the width of the container.
+   */
+  fullWidth: boolean;
+  /**
+   * The reference to the input element.
+   */
+  inputEl: HTMLElement;
+  /**
+   * The label for the input element.
+   */
+  inputLabel: string;
+  /**
+   * The ID of the menu.
+   */
+  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;
+  /**
+   * 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;
+  /**
+   * If `true`, the small styling will be applied to the menu.
+   */
+  small?: boolean;
+  /**
+   * The possible menu selection options.
+   */
+  options: IcMenuOption[];
+  watchOptionsHandler(newOptions: IcMenuOption[]): void;
+  /**
+   * The value of the currently selected option.
+   */
+  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.
+   */
+  menuOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
+  /**
+   * @internal Emitted when state of menu changes (i.e. open or close).
+   */
+  menuStateChange: EventEmitter<IcMenuChangeEventDetail>;
+  /**
+   * @internal Emitted when menu value changes.
+   */
+  menuValueChange: EventEmitter<IcValueEventDetail>;
+  /**
+   * @internal Emitted when the retry button is clicked
+   */
+  retryButtonClicked: EventEmitter<IcValueEventDetail>;
+  /**
+   * @internal Emitted when the timeout menu loses focus
+   */
+  timeoutBlur: EventEmitter<{
+    ev: FocusEvent;
+  }>;
+  /**
+   * @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.
+   */
+  handleClickOpen(): Promise<void>;
+  /**
+   * Used alongside activationType
+   * If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.
+   * @param {KeyboardEvent} event - keyboard event
+   */
+  handleKeyboardOpen(event: KeyboardEvent): Promise<void>;
+  /**
+   * @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;
+  private emitMenuKeyPress;
+  private autoSetValueOnMenuKeyDown;
+  private handleMenuKeyUp;
+  private getOptionId;
+  private getOptionAriaLabel;
+  private getSortedOptions;
+  private isManualMode;
+  private scrollToSelected;
+  private loadUngroupedOptions;
+  private setMenuScrollbar;
+  private handleTimeoutBlur;
+  private optionContent;
+  private displayOption;
+  render(): any;
+}

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

@@ -0,0 +1,12 @@
+export interface IcOptionSelectEventDetail {
+  value: string;
+  label?: string;
+  optionId?: string;
+}
+export interface IcMenuChangeEventDetail {
+  open: boolean;
+  focusInput?: boolean;
+}
+export interface IcMenuOptionIdEventDetail {
+  optionId: string | undefined;
+}

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

@@ -0,0 +1,53 @@
+import { IcThemeForeground } from "../../utils/types";
+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 display mode.
+   */
+  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 relationship of the linked URL as space-separated link types.
+   */
+  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;
+  /**
+   * Sets focus on the native `button`.
+   */
+  setFocus(): Promise<void>;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,63 @@
+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;
+  deviceSize: number;
+  dropdownOpen: boolean;
+  expanded: boolean;
+  focusStyle: import("../../utils/types").IcThemeForeground;
+  inTopNavSideMenu: boolean;
+  navigationType: IcNavType | "";
+  parentEl: HTMLElement;
+  /**
+   *  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;
+  /**
+   * Sets focus on the nav item.
+   */
+  setFocus(): Promise<void>;
+  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 renderNavigationItems;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,85 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+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;
+  /**
+   * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.
+   */
+  collapsedIconLabel: boolean;
+  /**
+   * @internal If `true`, the navigation item will be displayed within a tooltip.
+   */
+  displayNavigationTooltip: boolean;
+  /**
+   * If `true`, the user can save the linked URL instead of navigating to it.
+   */
+  download?: string | boolean;
+  /**
+   *  @internal If `true`, the navigation item will be expandable.
+   */
+  expandable: boolean;
+  /**
+   * The destination of the navigation item.
+   */
+  href: string;
+  /**
+   * The human language of the linked URL.
+   */
+  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.
+   */
+  childBlur: EventEmitter<void>;
+  /**
+   * @internal - Emitted when navigation item clicked.
+   */
+  navItemClicked: EventEmitter<void>;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidUpdate(): void;
+  themeChangeHandler(ev: CustomEvent): void;
+  /**
+   * Sets focus on the nav item.
+   */
+  setFocus(): Promise<void>;
+  private displayDefaultNavigationItem;
+  private topNavResizedHandler;
+  private sideNavExpandHandler;
+  private handleBlur;
+  private handleClick;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,36 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+/**
+ * @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 hasButtons;
+  private hasNavigation;
+  private lastTabStop;
+  private navBarEl;
+  private navGroupFirst;
+  private navItemAboveButtons;
+  el: HTMLIcNavigationMenuElement;
+  /**
+   * The status info to display.
+   */
+  status: string;
+  /**
+   * The version info to display.
+   */
+  version: string;
+  /**
+   * @internal - Emitted when the menu is closed.
+   */
+  icNavigationMenuClose: EventEmitter<void>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  navItemClickHandler(): void;
+  handleKeyDown(ev: KeyboardEvent): void;
+  private closeMenu;
+  private focusCloseButton;
+  private focusLastTabStop;
+  render(): any;
+}

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

@@ -0,0 +1,57 @@
+import { IcAlignment } 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.
+ * @slot subheading - Content will be rendered in the title area, in place of the subheading.
+ * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.
+ * @slot actions - Content will be rendered in the action area, adjacent to the title area.
+ * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.
+ * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.
+ * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.
+ */
+export declare class PageHeader {
+  private resizeObserver;
+  el: HTMLIcPageHeaderElement;
+  actionContent: Node[];
+  areButtonsReversed: boolean;
+  deviceSize: number;
+  /**
+   * The alignment of the page header.
+   */
+  aligned?: IcAlignment;
+  /**
+   * If `true`, a border will be displayed along the bottom of the page header.
+   */
+  border?: boolean;
+  /**
+   * The title to render on the page header.
+   */
+  heading?: string;
+  /**
+   * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.
+   */
+  reverseOrder?: boolean;
+  /**
+   * If `true`, the small styling will be applied to the page header.
+   */
+  small?: boolean;
+  /**
+   * If `true`, the page header will be sticky at all breakpoints.
+   */
+  sticky?: boolean;
+  /**
+   *  If `true`, the page header will only be sticky for viewport widths of 992px and above.
+   */
+  stickyDesktopOnly?: boolean;
+  /**
+   * The subtitle to render on the page header.
+   */
+  subheading?: string;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  private resizeObserverCallback;
+  private runResizeObserver;
+  private applyReverseOrder;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,82 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcThemeForeground } from "../../utils/types";
+import { IcChangeEventDetail, IcPaginationControlTypes } from "./ic-pagination.types";
+export declare class Pagination {
+  el: HTMLIcPaginationElement;
+  endEllipsis: boolean;
+  endItems: number[];
+  midItems: number[];
+  startEllipsis: boolean;
+  startItems: number[];
+  /**
+   * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
+   */
+  adjacentCount: number;
+  /**
+   * 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.
+   */
+  boundaryCount: number;
+  /**
+   * The default page to display.
+   */
+  defaultPage: number;
+  /**
+   * If `true`, the pagination will not allow interaction.
+   */
+  disabled: boolean;
+  /**
+   * If `true`, the current page of the simple pagination will not be displayed.
+   */
+  hideCurrentPage: boolean;
+  /**
+   * If `true`, the first and last page buttons will not be displayed.
+   */
+  hideFirstAndLastPageButton: boolean;
+  /**
+   * The label for the pagination item (applicable when simple pagination is being used).
+   */
+  label: string;
+  /**
+   * The total number of pages.
+   */
+  pages: number;
+  watchNumberPagesHandler(): void;
+  /**
+   * The type of pagination to be used.
+   */
+  type: IcPaginationControlTypes;
+  /**
+   * The current page displayed by the pagination.
+   */
+  currentPage: number;
+  watchPageChangeHandler(): void;
+  /**
+   * Emitted when a page is selected.
+   */
+  icPageChange: EventEmitter<IcChangeEventDetail>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  paginationItemClickHandler(ev: CustomEvent): void;
+  /**
+   * Sets the currently displayed page.
+   */
+  setCurrentPage(page: number): Promise<void>;
+  private handleClickFirst;
+  private handleClickPrevious;
+  private handleClickNext;
+  private handleClickLast;
+  private firstButton;
+  private previousButton;
+  private nextButton;
+  private lastButton;
+  private renderStartEllipsis;
+  private renderEndEllipsis;
+  private renderStartItems;
+  private renderEndItems;
+  private renderMiddleItems;
+  render(): any;
+}

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

@@ -0,0 +1,6 @@
+export type IcPaginationControlTypes = "simple" | "complex";
+export type IcPaginationAlignmentOptions = "left" | "right" | "space-between";
+export type IcPaginationTypes = "data" | "page";
+export interface IcChangeEventDetail {
+  value: number;
+}

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

@@ -0,0 +1 @@
+export {};