@ukic/web-components 2.0.0-alpha.121

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

@@ -0,0 +1,44 @@
+import { IcThemeForeground } from "../../utils/types";
+export declare class Link {
+  private inheritedAttributes;
+  private routerSlot;
+  el: HTMLIcLinkElement;
+  /**
+   * Prompts the user to save the linked URL instead of navigating to it.
+   */
+  download?: string | boolean;
+  /**
+   * The URL that the link points to.
+   */
+  href?: string;
+  /**
+   * Hints at the human language of the linked URL.
+   */
+  hreflang?: 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;
+  /**
+   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   */
+  target?: string;
+  /**
+   * Determines whether the 'open in new tab/window' icon is to be displayed.
+   */
+  showIcon?: boolean;
+  /**
+   * Determines which colour variant is to be applied, to have appropriate colour contrast.
+   */
+  variant?: IcThemeForeground;
+  themeChangeHandler(ev: CustomEvent): void;
+  private updateTheme;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  private hasRouterSlot;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,66 @@
+import { IcLoadingSizes, IcLoadingTypes, IcLoadingVariants } from "./ic-loading-indicator.types";
+export declare class LoadingIndicator {
+  host: HTMLIcLoadingIndicatorElement;
+  /**
+   * 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.
+   */
+  label?: string;
+  /**
+   * Provide a description to be set as the aria-label of the loading indicator when not using a visible label.
+   */
+  description?: string;
+  /**
+   * The time in milliseconds before the label changes.
+   */
+  labelDuration?: number;
+  /**
+   * The size of the loading indicator.
+   */
+  size?: IcLoadingSizes;
+  /**
+   * The type of indicator, either linear or circular.
+   */
+  type?: IcLoadingTypes;
+  /**
+   * The variant of indicator, either default or full-width.
+   */
+  variant?: IcLoadingVariants;
+  /**
+   * Determines whether the dark variant of the loading indicator should be displayed.
+   */
+  dark?: boolean;
+  indicatorLabel: string;
+  indeterminate: boolean;
+  showSecond: boolean;
+  watchPropHandler(): void;
+  private outerElement?;
+  private innerElement?;
+  private labelList;
+  private getLabel;
+  private getLabelVariant;
+  private setCircleLineWidth;
+  private setDeterminateWidth;
+  private calcOuterClass;
+  private updateLabel;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillUpdate(): void;
+  componentDidUpdate(): void;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,3 @@
+export declare type IcLoadingSizes = "default" | "small" | "large" | "icon";
+export declare type IcLoadingTypes = "circular" | "linear";
+export declare type IcLoadingVariants = "default" | "full-width";

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

@@ -0,0 +1,116 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcActivationTypes, IcMenuOption } from "../../utils/types";
+import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEventDetail } from "./ic-menu.types";
+export declare class Menu {
+  host: HTMLIcMenuElement;
+  /**
+   * Specify whether the menu is open.
+   */
+  open: boolean;
+  /**
+   * Provide the possible selection options.
+   */
+  options: IcMenuOption[];
+  /**
+   * Specify whether dense styling is to be applied to the element.
+   */
+  dense?: boolean;
+  /**
+   * Id of the menu.
+   */
+  menuId: string;
+  /**
+   * The value of the currently selected option.
+   */
+  value: string;
+  /**
+   * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
+   */
+  activationType?: IcActivationTypes;
+  /**
+   * Reference to the input element.
+   */
+  inputEl: HTMLElement;
+  /**
+   * @internal - set if ic-menu is nested inside another component
+   */
+  parentEl?: HTMLElement;
+  /**
+   * Label for the input element.
+   */
+  inputLabel: string;
+  /**
+   * Reference to an anchor element the menu will position itself from when rendered.
+   */
+  anchorEl: HTMLElement;
+  /**
+   *  If true then fill width of container
+   */
+  fullWidth: boolean;
+  /**
+   * @internal If true, autofocus on selected item when menu is open
+   */
+  autoFocusOnSelected: boolean;
+  keyboardNav: boolean;
+  optionHighlighted: string;
+  focusFromSearchKeypress: boolean;
+  initialOptionsListRender: boolean;
+  preventIncorrectTabOrder: boolean;
+  /**
+   * Emitted when an option is selected.
+   */
+  optionSelect: EventEmitter<IcOptionSelectEventDetail>;
+  /**
+   * Emitted when state of menu changes (i.e. open or close).
+   */
+  menuChange: EventEmitter<IcMenuChangeEventDetail>;
+  /**
+   * Emitted when an option has been highlighted
+   */
+  menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;
+  handleClearListener(): void;
+  handleSubmitSearch(): void;
+  private menu;
+  private ungroupedOptions;
+  private popperInstance;
+  private preventClickOpen;
+  private handleMenuChange;
+  private setNextOptionValue;
+  private setPreviousOptionValue;
+  /**
+   * If menu is opened with the mouse, emit menuChange 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 arrowBehaviour;
+  private setHighlightedOption;
+  private autoSetInputValueKeyboardOpen;
+  private manSetInputValueKeyboardOpen;
+  private setInputValue;
+  private handleOptionClick;
+  private handleBlur;
+  private handleMenuKeyDown;
+  private autoSetValueOnMenuKeyDown;
+  private handleMenuKeyUp;
+  private getOptionId;
+  private getOptionAriaLabel;
+  private getSortedOptions;
+  private isManualMode;
+  private scrollToSelected;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  componentDidUpdate(): void;
+  private displayOption;
+  render(): any;
+}

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

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

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 {
+  el: HTMLIcNavigationButtonElement;
+  /**
+   *  label info to display
+   */
+  label: string;
+  /**
+   * The URL that the link points to. This will render the button as an "a" tag.
+   */
+  href?: string;
+  /**
+   * Where 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.
+   */
+  rel?: string;
+  /**
+   * Prompts the user to save the linked URL instead of navigating to it.
+   */
+  download?: string | boolean;
+  /**
+   * Hints at the human language of the linked URL.
+   */
+  hreflang?: string;
+  /**
+   * How much of the referrer to send when following the link.
+   */
+  referrerpolicy?: ReferrerPolicy;
+  /**
+   *  display mode
+   */
+  mode: IcNavButtonModes;
+  initialButtonStyle: IcThemeForeground;
+  private buttonEl;
+  private inheritedAttributes;
+  navBarMenuOpenHandler(): void;
+  navBarMenuCloseHandler(): void;
+  themeChangeHandler(ev: CustomEvent): void;
+  /**
+   * 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

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

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

@@ -0,0 +1,56 @@
+import { IcNavType } from "../../utils/types";
+export declare class NavigationGroup {
+  el: HTMLIcNavigationGroupElement;
+  /**
+   *  label to display on the group
+   */
+  label: string;
+  /**
+   *  whether the group should be expandable/collapsible in the side menu
+   */
+  expandable: boolean;
+  dropdownOpen: boolean;
+  inTopNavSideMenu: boolean;
+  deviceSize: number;
+  focusStyle: import("../../utils/types").IcThemeForeground;
+  navigationType: IcNavType | "";
+  parentEl: HTMLElement;
+  expanded: boolean;
+  private groupEl;
+  private dropdown;
+  private DYNAMIC_GROUPED_LINKS_HEIGHT_MS;
+  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 triggerShowDropdown;
+  private renderDropdownGroupedLinks;
+  private renderGroupedLinks;
+  /**
+   * Gets the total height of navigation links to improve
+   * smoothness of expand/collapse animations
+   */
+  private getNavigationChildItemsHeight;
+  private setInitialGroupedLinksWrapperHeight;
+  private renderNavigationItems;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/ic-navigation-group/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,65 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcNavType } from "../../utils/types";
+/**
+ * @part link - The `<a>` within ic-navigation-item
+ */
+export declare class NavigationItem {
+  el: HTMLIcNavigationItemElement;
+  /**
+   *  Label of the navigation item
+   */
+  label: string;
+  /**
+   *  Destination of the navigation item
+   */
+  href: string;
+  /**
+   *  If true, sets the navigation item in a selected state
+   */
+  selected: boolean;
+  /**
+   *  @internal Whether the navigation item is expandable
+   */
+  expandable: boolean;
+  /**
+   * @internal display navigation item within tooltip
+   */
+  displayNavigationTooltip: boolean;
+  /**
+   * @internal display icon and label when side navigation is collapsed
+   */
+  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;
+  /**
+   * @internal - Emitted when item loses focus.
+   */
+  childBlur: EventEmitter<void>;
+  /**
+   * @internal - Emitted when navigation item clicked.
+   */
+  icNavItemClicked: EventEmitter<void>;
+  themeChangeHandler(ev: CustomEvent): void;
+  private topNavResizedHandler;
+  private sideNavExpandHandler;
+  /**
+   * Sets focus on the nav item
+   */
+  setFocus(): Promise<void>;
+  private handleBlur;
+  private handleClick;
+  componentWillLoad(): void;
+  private isInitialRender;
+  componentDidUpdate(): void;
+  disconnectedCallback(): void;
+  private displayDefaultNavigationItem;
+  render(): any;
+}

package/dist/types/components/ic-navigation-item/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 {
+  el: HTMLIcNavigationMenuElement;
+  /**
+   *  Version info to display
+   */
+  version: string;
+  /**
+   *  Status info to display
+   */
+  status: string;
+  /**
+   * @internal - Emitted when the menu is closed.
+   */
+  icNavigationMenuClose: EventEmitter<void>;
+  navItemClickHandler(): void;
+  handleKeyDown(ev: KeyboardEvent): void;
+  private hasButtons;
+  private hasNavigation;
+  private navItemAboveButtons;
+  private navGroupFirst;
+  private lastTabStop;
+  private closeButton;
+  private navBarEl;
+  private closeMenu;
+  private focusCloseButton;
+  private focusLastTabStop;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  render(): any;
+}

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

@@ -0,0 +1,55 @@
+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 {
+  el: HTMLIcPageHeaderElement;
+  /**
+   * The title to render on the component.
+   */
+  heading?: string;
+  /**
+   * The subtitle to render on the component.
+   */
+  subheading?: string;
+  /**
+   * How the component should be aligned.
+   */
+  aligned?: IcAlignment;
+  /**
+   * Whether the component uses dense styling.
+   */
+  dense?: boolean;
+  /**
+   * Set whether the bottom border is used
+   */
+  border?: boolean;
+  /**
+   * Set whether the header is sticky at all breakpoints
+   */
+  sticky?: boolean;
+  /** Set whether the header is only sticky for viewport widths of 992px and above
+   */
+  stickyDesktopOnly?: boolean;
+  /** Set whether the reading pattern and tab order change in the action area for viewport widths of above 576px and when actions have not wrapped
+   */
+  reverseOrder?: boolean;
+  deviceSize: number;
+  areButtonsReversed: boolean;
+  actionContent: Node[];
+  private resizeObserver;
+  private resizeObserverCallback;
+  private runResizeObserver;
+  private applyReverseOrder;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,57 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcInformationStatusOrEmpty } from "../../utils/types";
+import { IcValueEventDetail } from "../../interface";
+export declare class RadioGroup {
+  private radioOptions;
+  host: HTMLIcRadioGroupElement;
+  /**
+   * Provide a label for the input.
+   */
+  label: string;
+  /**
+   * Provide a name for the input.
+   */
+  name: string;
+  /**
+   * Specify if the input requires a value.
+   */
+  required: boolean;
+  /**
+   * Hides the label and applies the required label value as an aria-label.
+   */
+  hideLabel: boolean;
+  /**
+   * Specify whether the input is disabled.
+   */
+  disabled: boolean;
+  /**
+   * Provide helper text to display additional field guidance.
+   */
+  helperText: string;
+  /**
+   * Specify whether dense styling is to be applied to the element.
+   */
+  dense: boolean;
+  /**
+   * Provide validation status - 'error'
+   */
+  validationStatus: IcInformationStatusOrEmpty;
+  /**
+   * Provide validation text - 'error'
+   */
+  validationText: string;
+  /**
+   * Provide checked state
+   */
+  checkedValue: string;
+  selectedChild: number;
+  /**
+   * Emitted when a user selects a radio.
+   */
+  icChange: EventEmitter<IcValueEventDetail>;
+  selectHandler(event: CustomEvent<IcValueEventDetail>): void;
+  private handleKeyDown;
+  private getNextItemToSelect;
+  componentDidLoad(): void;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,57 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcAdditionalFieldTypes } from "../../utils/types";
+import { IcValueEventDetail } from "../../interface";
+export declare class RadioOption {
+  private radioElement;
+  /**
+   * Determines whether the radio should be in selected state.
+   */
+  selected?: boolean;
+  /**
+   * Determines whether the radio should be in disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * Provide a label for the input.
+   */
+  label?: string;
+  /**
+   * Provide a value for the input.
+   */
+  value: string;
+  /**
+   * Provide a name for the input.
+   */
+  name: string;
+  /**
+   * Provide a group label for the input.
+   */
+  groupLabel: string;
+  /**
+   * Provide a text prop for the dynamic text.
+   */
+  dynamicText: string;
+  /** Determines type of additional text field in relation to radio option */
+  additionalFieldDisplay: IcAdditionalFieldTypes;
+  host: HTMLIcRadioOptionElement;
+  /**
+   * Emitted when radio is checked
+   */
+  icCheck: EventEmitter<void>;
+  /**
+   * Emitted when a radio is selected.
+   */
+  radioOptionSelect: EventEmitter<IcValueEventDetail>;
+  selectedChangeHandler(selected: boolean): void;
+  private defaultRadioValue;
+  private handleClick;
+  private swallowClick;
+  private hasAdditionalField;
+  componentWillLoad(): void;
+  textfieldValueHandler(event: CustomEvent<{
+    value: string;
+  }>): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  render(): any;
+}