@ukic/web-components 2.0.0-alpha.121

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

@@ -0,0 +1,38 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcTabClickEventDetail } from "./ic-tab.types";
+/**
+ * @slot icon - Content will be rendered next to the tab label.
+ */
+export declare class Tab {
+  host: HTMLIcTabElement;
+  /** @internal Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */
+  contextId?: string;
+  /**
+   * Disables the tab.
+   */
+  disabled?: boolean;
+  /** @internal Will display a selected indicator and set tabIndex. */
+  selected?: boolean;
+  /** @internal The shared ID between panel and tab. */
+  tabId?: string;
+  /** @internal The position of the tab inside the tabs array in context. */
+  tabPosition: number;
+  /** @internal Determines whether the dark variant of the tabs should be displayed. */
+  dark?: boolean;
+  /**
+   * Called when a tab is selected.
+   */
+  tabClick: EventEmitter<IcTabClickEventDetail>;
+  /**
+   * @internal Called when a tab is focussed.
+   */
+  tabFocus: EventEmitter<IcTabClickEventDetail>;
+  private isInitialRender;
+  private focusFromClick;
+  private handleClick;
+  private handleFocus;
+  private handleMouseDown;
+  componentDidUpdate(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,8 @@
+export interface IcTabClickEventDetail {
+  tabId: string;
+  contextId: string;
+  position: number;
+}
+export interface IcTabSelectEventDetail {
+  tabIndex: number;
+}

package/dist/types/components/ic-tab-context/ic-tab-context.d.ts

@@ -0,0 +1,51 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcActivationTypes } from "../../utils/types";
+import { IcTabClickEventDetail, IcTabSelectEventDetail } from "../ic-tab/ic-tab.types";
+export declare class TabContext {
+  host: HTMLIcTabContextElement;
+  /**
+   * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
+   */
+  contextId?: string;
+  /**
+   * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.
+   */
+  activationType?: IcActivationTypes;
+  /**
+   * Allows the user to control the selected tab. Must be used alongside the tabSelect event to manage tab selection.
+   */
+  selectedTabIndex?: number;
+  /**
+   * Determines whether the dark variant of the tabs should be displayed.
+   */
+  dark?: boolean;
+  selectedTab: number | null;
+  updateSelectedTab(newValue: number): void;
+  /**
+   * Emitted when a user selects a tab.
+   */
+  tabSelect: EventEmitter<IcTabSelectEventDetail>;
+  tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void;
+  private controlledMode;
+  private tabs;
+  private enabledTabs;
+  private tabPanels;
+  private tabList;
+  private focusedTabIndex;
+  private linkTabs;
+  private getChildren;
+  private attatchEventListeners;
+  private setControlledMode;
+  private setInitialTab;
+  private configureTabs;
+  private getEnabledTabs;
+  private getIndexOfEnabledTab;
+  private keyboardSelectTab;
+  private keyboardFocusTab;
+  private handleKeyBoardNavAutomatic;
+  private handleKeyBoardNavManual;
+  componentDidLoad(): void;
+  componentWillUpdate(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

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

package/dist/types/components/ic-tab-list/ic-tab-list.d.ts

@@ -0,0 +1,49 @@
+import { IcTabClickEventDetail } from "../ic-tab/ic-tab.types";
+export declare class TabList {
+  host: HTMLIcTabListElement;
+  /**
+   * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
+   */
+  contextId?: string;
+  /**
+   * Use when tabs and tab panels are to be positioned separately.
+   */
+  inline?: boolean;
+  /**
+   * Provide a label to describe the purpose of the set of tabs to screen reader users.
+   */
+  label: string;
+  /** @internal Determines whether the dark variant of the tabs should be displayed. */
+  dark?: boolean;
+  firstTabVisible: boolean;
+  lastTabVisible: boolean;
+  tabOverflow: boolean;
+  private tabs;
+  private tabOffsets;
+  private tabListEl;
+  private splitterEl;
+  private resizeObserver;
+  private isScrolling;
+  private scrollDelay;
+  private buttonStateSet;
+  /**
+   * @internal if tab side scrolling enabled, scrolls the specified tab into view
+   */
+  scrollTabIntoView(tabNumber: number): Promise<void>;
+  tabFocusHandler(event: CustomEvent<IcTabClickEventDetail>): void;
+  private resizeObserverCallback;
+  private runResizeObserver;
+  private scrollLeft;
+  private scrollRight;
+  private longScrollRight;
+  private longScrollLeft;
+  private leftArrowMouseDownHandler;
+  private rightArrowMouseDownHandler;
+  private arrowMouseUpHandler;
+  private getCurrentLeftTab;
+  private scrollHandler;
+  private scrollStopped;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/ic-tab-panel/ic-tab-panel.d.ts

@@ -0,0 +1,15 @@
+export declare class TabPanel {
+  host: HTMLIcTabPanelElement;
+  /**
+   * Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.
+   */
+  contextId?: string;
+  /** @internal The position of the tab panel inside the tabs array in context. */
+  tabPosition: number;
+  /** @internal The shared ID that links the panel and tab. */
+  panelId?: string;
+  /** @internal The shared ID of the currently selected tab. */
+  selectedTab?: string;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/ic-text-field/ic-text-field.d.ts

@@ -0,0 +1,199 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcValueEventDetail } from "../../interface";
+import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./ic-text-field.types";
+/**
+ * @slot icon - Content will be placed to the left of the text input.
+ */
+export declare class TextField {
+  el: HTMLIcTextFieldElement;
+  private inputEl;
+  private inheritedAttributes;
+  /**
+   * @slot clear-button - an ic-button clear component will render as an end adornment to the input
+   * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input
+   * @slot menu - an ic-menu component will appear below the input
+   */
+  /**
+   * Provide an id for the input
+   */
+  inputId?: string;
+  /**
+   * Provide a label for the input.
+   */
+  label: string;
+  /**
+   * Specify if the input requires a value.
+   */
+  required: boolean;
+  /**
+   * Specify whether the input is disabled.
+   */
+  disabled: boolean;
+  /**
+   * Specify whether the input is read only.
+   */
+  readonly: boolean;
+  /**
+   * Provide a placeholder value to display.
+   */
+  placeholder: string;
+  /**
+   * Specify whether the component fills the full width of the container.
+   * If true, this overrides the --input-width css prop.
+   */
+  fullWidth: boolean;
+  /**
+   * Hides the label and applies the required label value as an aria-label.
+   */
+  hideLabel: boolean;
+  /**
+   * Provide helper text to display additional field guidance.
+   */
+  helperText: string;
+  /**
+   * Specify the number of rows to transform the text field into a text area with a specific height.
+   */
+  rows: number;
+  /**
+   * Allow resizing of a multiline text area
+   */
+  resize: boolean;
+  /**
+   * Specify whether dense styling is to be applied to the element.
+   */
+  dense: boolean;
+  /**
+   * Value of TextField.
+   */
+  value: string;
+  /**
+   * Maximum number of characters that can be entered in the field.
+   */
+  maxLength: number;
+  /**
+   * Provide validation state - 'error' | 'warning' | 'success'
+   */
+  validationStatus: IcInformationStatusOrEmpty;
+  /**
+   * Provide validation state - 'error' | 'warning' | 'success'
+   */
+  validationText: string;
+  /**
+   * Show icon in input control - only applies when validationStatus ='success'
+   */
+  validationInline: boolean;
+  /**
+   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+   * Available options: "off", "none", "on", "sentences", "words", "characters".
+   */
+  autocapitalize: string;
+  /**
+   * Indicates whether the value of the control can be automatically completed by the browser.
+   */
+  autocomplete: IcAutocompleteTypes;
+  /**
+   * Whether auto correction should be enabled when the user is entering/editing the text value.
+   */
+  autocorrect: IcAutocorrectStates;
+  /**
+   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+   */
+  autoFocus: boolean;
+  /**
+   * Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+   */
+  debounce: number;
+  /**
+   * Determines whether the dark variant of the text field should be displayed.
+   */
+  dark?: boolean;
+  private showLeftIcon;
+  private debounceChanged;
+  /**
+   * The type of control to display. The default type is text.
+   */
+  type: IcTextFieldTypes;
+  /**
+   * A hint to the browser for which keyboard to display.
+   * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
+   * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+   */
+  inputmode: IcTextFieldInputModes;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: string;
+  /**
+   * If `true`, the element will have its spelling and grammar checked.
+   */
+  spellcheck: boolean;
+  /**
+   * @internal Used to identify the active element when focus is on the ic-menu items
+   */
+  ariaActiveDescendant?: string;
+  /**
+   * @internal This boolean sets an ellipsis at the end of the value if the value is longer than the container
+   */
+  truncateValue?: boolean;
+  /**
+   * @internal Used to identify if the slotted menu is rendered
+   */
+  ariaExpanded: string;
+  /**
+   * @internal Used to identify any related child component
+   */
+  ariaOwns: string;
+  /**
+   * @internal Used to identify whether inputting any text triggers more predictions
+   */
+  ariaAutocomplete: IcAriaAutocompleteTypes;
+  /**
+   * @internal Used to set the role if not default textbox;
+   */
+  role: string;
+  /**
+   * @internal Used to stop rendering of hidden form input for form submission;
+   */
+  hiddenInput: boolean;
+  numChars: number;
+  maxLengthExceeded: boolean;
+  watchValueHandler(newValue: string): void;
+  /**
+   * Sets focus on the native `input`
+   */
+  setFocus(): Promise<void>;
+  handleKeyDown(ev: KeyboardEvent): void;
+  /**
+   * Emitted when a keydown event occurred.
+   */
+  icKeydown: EventEmitter<{
+    event: KeyboardEvent;
+  }>;
+  /**
+   * Emitted when a keyboard input occurred.
+   */
+  icInput: EventEmitter<IcValueEventDetail>;
+  private onInput;
+  /**
+   * Emitted when input loses focus.
+   */
+  icBlur: EventEmitter<IcValueEventDetail>;
+  private onBlur;
+  /**
+   * Emitted when input gains focus.
+   */
+  icFocus: EventEmitter<IcValueEventDetail>;
+  private onFocus;
+  /**
+   * Emitted when the value has changed.
+   */
+  icChange: EventEmitter<IcValueEventDetail>;
+  private isTextArea;
+  private hasLeftIconSlot;
+  private hasStatus;
+  private showStatusText;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

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

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

package/dist/types/components/ic-text-field/ic-text-field.types.d.ts

@@ -0,0 +1,3 @@
+export declare type IcTextFieldTypes = "email" | "password" | "tel" | "text" | "url" | "number" | "search";
+export declare type IcTextFieldInputModes = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+export declare type IcAriaAutocompleteTypes = "inline" | "list" | undefined;

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

@@ -0,0 +1,17 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcTheme } from "../../utils/types";
+export declare class Theme {
+  /**
+   * The theme colour. Can be a hex value eg "#ff0000" or RGB eg "rgb(255, 0, 0)"
+   */
+  color?: string;
+  watchColorPropHandler(): void;
+  /**
+   * Emitted when the theme is changed.
+   */
+  icThemeChange: EventEmitter<IcTheme>;
+  private setThemeColor;
+  private setThemeRGB;
+  componentWillLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,35 @@
+import { IcTooltipPlacements } from "./ic-tooltip.types";
+export declare class Tooltip {
+  el: HTMLIcTooltipElement;
+  /**
+   * The id of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.
+   */
+  elementId?: string;
+  /**
+   * The position of the tool-tip in relation to the parent element.
+   */
+  placement?: IcTooltipPlacements;
+  /**
+   * The text to display on the tooltip.
+   */
+  label: string;
+  updateLabel(newValue: string): void;
+  private toolTip;
+  private arrow;
+  private mouseOverTool;
+  private showEvents;
+  private instantHideEvents;
+  private delayedHideEvents;
+  private popperInstance;
+  private show;
+  private hide;
+  private checkCloseTooltip;
+  private mouseEnterTooltip;
+  private mouseLeaveTooltip;
+  private handleKeyDown;
+  private manageEventListeners;
+  private screenReaderOnlyStyles;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

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

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

@@ -0,0 +1 @@
+export declare type IcTooltipPlacements = "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start";

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

@@ -0,0 +1,79 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcAlignment, IcThemeForeground } from "../../utils/types";
+/**
+ * @slot app-icon - Content will be rendered to left of app title.
+ * @slot search - Content will be rendered in search area to left of buttons.
+ * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices
+ * @slot navigation - Content will be rendered in navigation panel.
+ * @slot buttons - Content will be rendered to right of search bar.
+ */
+export declare class TopNavigation {
+  el: HTMLIcTopNavigationElement;
+  /**
+   *  Title to display
+   */
+  appTitle: string;
+  /**
+   *  The url to navigate to when title is clicked
+   */
+  href: string;
+  /**
+   *  Version info to display
+   */
+  version: string;
+  /**
+   *  Status info to display
+   */
+  status: string;
+  /**
+   * The alignment of the top nav content
+   */
+  contentAligned: IcAlignment;
+  /**
+   * If true, the flyout navigation menu on small devices will be contained by the parent element
+   */
+  inline: boolean;
+  menuOpen: boolean;
+  deviceSize: number;
+  mobileSearchBarVisible: boolean;
+  navMenuVisible: boolean;
+  searchValue: string;
+  mobileSearchHiddenOnBlur: boolean;
+  searchButtonClick: boolean;
+  foregroundColor: IcThemeForeground;
+  hasFullWidthSearchBar: boolean;
+  watchPropHandler(newValue: string, oldValue: string): void;
+  /**
+   * @internal - Emitted when the menu is opened.
+   */
+  icNavigationMenuOpened: EventEmitter<void>;
+  /**
+   * @internal - Emitted when the menu is closed.
+   */
+  icNavigationMenuClosed: EventEmitter<void>;
+  private hasAppIcon;
+  private hasNavigation;
+  private hasIconButtons;
+  private hasSearchSlotContent;
+  private searchBar;
+  private mobileSearchButtonEl;
+  navBarMenuCloseHandler(): void;
+  searchInputBlurHandler(ev: CustomEvent): void;
+  searchValueChangeHandler(ev: CustomEvent): void;
+  themeChangeHandler(ev: CustomEvent): void;
+  private initialiseSearchBar;
+  private toggleSearchBar;
+  private emitTopNavResized;
+  private menuButtonClick;
+  private showNavMenu;
+  private searchButtonMouseDownHandler;
+  private searchButtonClickHandler;
+  private resizeObserver;
+  private resizeObserverCallback;
+  private runResizeObserver;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,13 @@
+import { IcTypographyVariants } from "../../utils/types";
+export declare class Typography {
+  el: HTMLIcTypographyElement;
+  /**
+   * The ICDS typography style to use.
+   */
+  variant?: IcTypographyVariants;
+  /**
+   * Adds margin to the bottom of the typography relative to the font-size.
+   */
+  spacing?: boolean;
+  render(): any;
+}

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

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