@ukic/web-components 2.1.0-beta.16 → 2.1.0-beta.17

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

@@ -5,7 +5,12 @@ import { IcThemeForegroundNoDefault } from "../../utils/types";
  * @slot icon - Content will be rendered next to the tab label.
  */
 export declare class Tab {
+  private focusFromClick;
+  private focusTabId;
+  private isInitialRender;
   host: HTMLIcTabElement;
+  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+  appearance?: IcThemeForegroundNoDefault;
   /** @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */
   contextId?: string;
   /**
@@ -18,37 +23,32 @@ export declare class Tab {
   tabId?: string;
   /** @internal The position of the tab inside the tabs array in context. */
   tabPosition?: number;
-  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
-  appearance?: IcThemeForegroundNoDefault;
   /**
    * @internal Emitted when a tab is selected.
    */
   tabClick: EventEmitter<IcTabClickEventDetail>;
-  /**
-   * @internal Emitted when a tab is focussed.
-   */
-  tabFocus: EventEmitter<IcTabClickEventDetail>;
   /**
    * @internal Emitted when a tab is dynamically created.
    */
   tabCreated: EventEmitter<HTMLIcTabElement>;
+  /**
+   * @internal Emitted when a tab is focussed.
+   */
+  tabFocus: EventEmitter<IcTabClickEventDetail>;
   /**
    * @internal Emitted when a tab is unmounted.
    */
   tabRemoved: EventEmitter<void>;
-  private isInitialRender;
-  private focusFromClick;
-  private focusTabId;
-  private handleClick;
-  private handleFocus;
-  private handleMouseDown;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidUpdate(): void;
   /**
    * Sets focus on the tab.
    */
   setFocus(): Promise<void>;
-  componentWillLoad(): void;
-  componentDidUpdate(): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
+  private handleClick;
+  private handleFocus;
+  private handleMouseDown;
   render(): any;
 }

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

@@ -3,40 +3,43 @@ import { IcActivationTypes, IcThemeForegroundNoDefault } from "../../utils/types
 import { IcTabClickEventDetail, IcTabSelectEventDetail } from "../ic-tab/ic-tab.types";
 export declare class TabContext {
   private controlledMode;
-  private tabs;
   private enabledTabs;
-  private tabPanels;
-  private tabGroup;
   private focusedTabIndex;
-  private newTabs;
   private newTabPanels;
+  private newTabs;
+  private tabs;
+  private tabGroup;
+  private tabPanels;
   host: HTMLIcTabContextElement;
-  /**
-   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
-   */
-  contextId?: string;
+  selectedTab: number | null;
   /**
    * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.
    */
   activationType?: IcActivationTypes;
-  /**
-   * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.
-   */
-  selectedTabIndex?: number;
   /**
    * The appearance of the tab context, e.g dark, or light.
    */
   appearance?: IcThemeForegroundNoDefault;
-  selectedTab: number | null;
-  updateSelectedTab(newValue: number): void;
   /**
-   * @deprecated This event should not be used anymore. Use icTabSelect instead.
+   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
    */
-  tabSelect: EventEmitter<IcTabSelectEventDetail>;
+  contextId?: string;
+  /**
+   * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.
+   */
+  selectedTabIndex?: number;
+  updateSelectedTab(newValue: number): void;
   /**
    * Emitted when a user selects a tab.
    */
   icTabSelect: EventEmitter<IcTabSelectEventDetail>;
+  /**
+   * @deprecated This event should not be used anymore. Use icTabSelect instead.
+   */
+  tabSelect: EventEmitter<IcTabSelectEventDetail>;
+  componentDidLoad(): void;
+  componentWillUpdate(): void;
+  disconnectedCallback(): void;
   tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void;
   tabCreatedHandler(ev: CustomEvent): void;
   /**
@@ -45,6 +48,7 @@ export declare class TabContext {
   tabRemovedHandler(hadFocus?: boolean): Promise<void>;
   private linkTabs;
   private getChildren;
+  private keydownHandler;
   private attatchEventListeners;
   private setControlledMode;
   private setInitialTab;
@@ -55,8 +59,5 @@ export declare class TabContext {
   private keyboardFocusTab;
   private handleKeyBoardNavAutomatic;
   private handleKeyBoardNavManual;
-  componentDidLoad(): void;
-  componentWillUpdate(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

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

@@ -1,6 +1,10 @@
 import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class TabGroup {
   host: HTMLIcTabGroupElement;
+  /**
+   * @internal The appearance of the tab group, e.g dark, or light.
+   */
+  appearance?: IcThemeForegroundNoDefault;
   /**
    * @deprecated This is no longer required.
    * The context id is passed down from `ic-tab-context`
@@ -14,10 +18,6 @@ export declare class TabGroup {
    * The label to describe the purpose of the set of tabs to screen reader users.
    */
   label: string;
-  /**
-   * @internal The appearance of the tab group, e.g dark, or light.
-   */
-  appearance?: IcThemeForegroundNoDefault;
   componentDidLoad(): void;
   render(): any;
 }

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

@@ -2,15 +2,15 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class TabPanel {
   host: HTMLIcTabPanelElement;
+  /**
+   * @internal The appearance of the tabs, e.g dark, or light.
+   */
+  appearance?: IcThemeForegroundNoDefault;
   /**
    * @deprecated This is no longer required.
    * The context id is passed down from `ic-tab-context`
    */
   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.
    */
@@ -20,9 +20,9 @@ export declare class TabPanel {
    */
   selectedTab?: string;
   /**
-   * @internal The appearance of the tabs, e.g dark, or light.
+   * @internal The position of the tab panel inside the tabs array in context.
    */
-  appearance?: IcThemeForegroundNoDefault;
+  tabPosition?: number;
   /**
    * @internal Emitted when a tab panel is dynamically created.
    */

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

@@ -5,71 +5,87 @@ import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from
  * @slot icon - Content will be placed to the left of the text input.
  */
 export declare class TextField {
-  el: HTMLIcTextFieldElement;
-  private inputEl;
   private inheritedAttributes;
+  private inputEl;
+  private showLeftIcon;
+  el: HTMLIcTextFieldElement;
+  numChars: number;
+  maxLengthExceeded: boolean;
+  maxValueExceeded: boolean;
+  minValueUnattained: boolean;
   /**
    * @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.
    */
   /**
-   * The ID for the input.
+   * @internal The active element when focus is on the ic-menu items.
    */
-  inputId?: string;
+  ariaActiveDescendant?: string;
   /**
-   * The label for the input.
+   * @internal Used to identify whether inputting any text triggers more predictions
    */
-  label: string;
+  ariaAutocomplete: IcAriaAutocompleteTypes;
   /**
-   * If `true`, the input will require a value.
+   * @internal Used to identify if the slotted menu is rendered
    */
-  required: boolean;
+  ariaExpanded: string;
   /**
-   * If `true`, the disabled state will be set.
+   * @internal Used to identify any related child component
    */
-  disabled: boolean;
+  ariaOwns: string;
   /**
-   * If `true`, the read only state will be set.
+   * The automatic capitalisation of the text value as it is entered/edited by the user.
+   * Available options: "off", "none", "on", "sentences", "words", "characters".
    */
-  readonly: boolean;
+  autocapitalize: string;
   /**
-   * The placeholder value to be displayed.
+   * The state of autocompletion the browser can apply on the text value.
    */
-  placeholder: string;
+  autocomplete: IcAutocompleteTypes;
+  /**
+   * The state of autocorrection the browser can apply when the user is entering/editing the text value.
+   */
+  autocorrect: IcAutocorrectStates;
+  /**
+   * If `true`, the form control will have input focus when the page loads.
+   */
+  autoFocus: boolean;
+  /**
+   * If `true`, the disabled state will be set.
+   */
+  disabled: boolean;
   /**
    * Specify whether the text field fills the full width of the container.
    * If `true`, this overrides the --input-width CSS variable.
    */
   fullWidth: boolean;
-  /**
-   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
-   */
-  hideLabel: boolean;
   /**
    * The helper text that will be displayed for additional field guidance.
    */
   helperText: string;
   /**
-   * The number of rows to transform the text field into a text area with a specific height.
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
    */
-  rows: number;
+  hideLabel: boolean;
   /**
-   * If `true`, the multiline text area will be resizeable.
+   * @internal If `true`, the hidden form input will stop rendering for form submission.
    */
-  resize: boolean;
+  hiddenInput: boolean;
   /**
-   * If `true`, the small styling will be applied to the text field.
+   * The ID for the input.
    */
-  small: boolean;
+  inputId?: string;
   /**
-   * The value of the text field.
+   * A hint to the browser for which keyboard to display.
+   * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
+   * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
    */
-  value: string;
+  inputmode: IcTextFieldInputModes;
   /**
-   * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)
+   * The label for the input.
    */
-  min: string | number;
+  label: string;
   /**
    * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)
    */
@@ -79,139 +95,123 @@ export declare class TextField {
    */
   maxLength: number;
   /**
-   * The validation state - e.g. 'error' | 'warning' | 'success'.
+   * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)
    */
-  validationStatus: IcInformationStatusOrEmpty;
+  min: string | number;
   /**
-   * The validation state - e.g. 'error' | 'warning' | 'success'.
+   * The name of the control, which is submitted with the form data.
    */
-  validationText: string;
+  name: string;
   /**
-   * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.
+   * The placeholder value to be displayed.
    */
-  validationInline: boolean;
+  placeholder: string;
   /**
-   *  @internal If `true`, the validation will display inline.
+   * If `true`, the read only state will be set.
    */
-  validationInlineInternal: boolean;
+  readonly: boolean;
   /**
-   * The automatic capitalisation of the text value as it is entered/edited by the user.
-   * Available options: "off", "none", "on", "sentences", "words", "characters".
+   * If `true`, the input will require a value.
    */
-  autocapitalize: string;
+  required: boolean;
   /**
-   * The state of autocompletion the browser can apply on the text value.
+   * If `true`, the multiline text area will be resizeable.
    */
-  autocomplete: IcAutocompleteTypes;
+  resize: boolean;
   /**
-   * The state of autocorrection the browser can apply when the user is entering/editing the text value.
+   * @internal Used to set the role if not default textbox;
    */
-  autocorrect: IcAutocorrectStates;
+  role: string;
   /**
-   * If `true`, the form control will have input focus when the page loads.
+   * The number of rows to transform the text field into a text area with a specific height.
    */
-  autoFocus: boolean;
+  rows: number;
   /**
-   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+   * If `true`, the small styling will be applied to the text field.
    */
-  debounce: number;
-  private showLeftIcon;
-  private debounceChanged;
+  small: boolean;
+  /**
+   * If `true`, the value of the text field will have its spelling and grammar checked.
+   */
+  spellcheck: boolean;
+  /**
+   * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.
+   */
+  truncateValue?: boolean;
   /**
    * 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"`.
+   * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.
    */
-  inputmode: IcTextFieldInputModes;
+  validationInline: boolean;
   /**
-   * The name of the control, which is submitted with the form data.
+   *  @internal If `true`, the validation will display inline.
    */
-  name: string;
+  validationInlineInternal: boolean;
   /**
-   * If `true`, the value of the text field will have its spelling and grammar checked.
+   * The validation state - e.g. 'error' | 'warning' | 'success'.
    */
-  spellcheck: boolean;
+  validationStatus: IcInformationStatusOrEmpty;
   /**
-   * @internal The active element when focus is on the ic-menu items.
+   * The validation state - e.g. 'error' | 'warning' | 'success'.
    */
-  ariaActiveDescendant?: string;
+  validationText: string;
   /**
-   * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.
+   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
    */
-  truncateValue?: boolean;
+  debounce: number;
+  private debounceChanged;
   /**
-   * @internal Used to identify if the slotted menu is rendered
+   * The value of the text field.
    */
-  ariaExpanded: string;
+  value: string;
+  initialValue: string;
+  private watchValueHandler;
   /**
-   * @internal Used to identify any related child component
+   * @internal Emitted when the validationInlineInternal is `true`
    */
-  ariaOwns: string;
+  getValidationText: EventEmitter<IcValueEventDetail>;
   /**
-   * @internal Used to identify whether inputting any text triggers more predictions
+   * Emitted when input loses focus.
    */
-  ariaAutocomplete: IcAriaAutocompleteTypes;
+  icBlur: EventEmitter<IcValueEventDetail>;
   /**
-   * @internal Used to set the role if not default textbox;
+   * Emitted when the value has changed.
    */
-  role: string;
+  icChange: EventEmitter<IcValueEventDetail>;
   /**
-   * @internal If `true`, the hidden form input will stop rendering for form submission.
+   * Emitted when input gains focus.
    */
-  hiddenInput: boolean;
-  numChars: number;
-  maxLengthExceeded: boolean;
-  minValueUnattained: boolean;
-  maxValueExceeded: boolean;
-  initialValue: string;
-  watchValueHandler(newValue: string): void;
+  icFocus: EventEmitter<IcValueEventDetail>;
   /**
-   * Sets focus on the native `input`.
+   * Emitted when a keyboard input occurred.
    */
-  setFocus(): Promise<void>;
-  handleKeyDown(ev: KeyboardEvent): void;
+  icInput: EventEmitter<IcValueEventDetail>;
   /**
    * Emitted when a keydown event occurred.
    */
   icKeydown: EventEmitter<{
     event: KeyboardEvent;
   }>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  handleKeyDown(ev: KeyboardEvent): void;
   /**
-   * Emitted when a keyboard input occurred.
+   * Sets focus on the native `input`.
    */
-  icInput: EventEmitter<IcValueEventDetail>;
+  setFocus(): Promise<void>;
   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;
-  /**
-   * @internal Emitted when the validationInlineInternal is `true`
-   */
-  getValidationText: EventEmitter<IcValueEventDetail>;
   private getInlineValidationText;
   private hasLeftIconSlot;
   private hasStatus;
   private showStatusText;
   private handleFormReset;
-  connectedCallback(): void;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

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

@@ -10,9 +10,9 @@ export declare class Theme {
    * @internal Emitted when the theme is changed.
    */
   themeChange: EventEmitter<IcTheme>;
+  componentWillLoad(): void;
   private checkThemeColorContrast;
   private setThemeColor;
   private setThemeRGBA;
-  componentWillLoad(): void;
   render(): any;
 }

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

@@ -1,67 +1,66 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcActivationTypes, IcStatusVariants } from "../../utils/types";
-import { ActionAreaElementTypes } from "./ic-toast.types";
 /**
  * @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.
  * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.
  */
 export declare class Toast {
+  private dismissTimeout;
+  private interactiveElements;
+  private isManual;
+  private neutralVariantLabel;
+  private timerRefreshInterval;
   el: HTMLIcToastElement;
+  timerProgress: number;
+  visible: boolean;
   /**
-   * The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)
-   */
-  heading: string;
-  /**
-   * The variant of the toast being rendered
+   * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)
+   * (NOTE: Has a minimum value of `5000ms`)
    */
-  variant?: IcStatusVariants;
+  autoDismissTimeout?: number;
   /**
-   * The main body message of the toast. (NOTE: Should be no more than `140` characters)
+   * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component
    */
-  message?: string;
+  dismissButtonAriaLabel?: string;
   /**
    * How the toast will be dismissed. If manual will display a dismiss button.
    */
   dismissMode?: IcActivationTypes;
   /**
-   * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)
-   * (NOTE: Has a minimum value of `5000ms`)
+   * The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)
    */
-  autoDismissTimeout?: number;
+  heading: string;
+  /**
+   * The main body message of the toast. (NOTE: Should be no more than `140` characters)
+   */
+  message?: string;
   /**
    * Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon
    */
   neutralIconAriaLabel?: string;
   /**
-   * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component
+   * The variant of the toast being rendered
    */
-  dismissButtonAriaLabel?: string;
+  variant?: IcStatusVariants;
   /**
    * Is emitted when the user dismisses the toast
    */
   icDismiss: EventEmitter<void>;
-  visible: boolean;
-  timerProgress: number;
-  dismissTimeout: number;
-  timerRefreshInterval: number;
-  isManual: boolean;
-  interactiveElements: ActionAreaElementTypes[];
-  neutralVariantLabel: string;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  handleDismiss(): void;
+  handleKeyboard(ev: KeyboardEvent): void;
+  handleTimer(ev: MouseEvent): void;
   /**
    * Used to display the individual toast
    * @returns The element that previously had focus before the toast appeared
    */
   setVisible(): Promise<HTMLElement>;
-  handleDismiss(): void;
-  handleKeyboard(ev: KeyboardEvent): void;
-  handleTimer(ev: MouseEvent): void;
   private dismissAction;
   private handleProgressChange;
   private handleLongText;
   private findNextInteractiveElement;
   private isActive;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

package/dist/types/components/ic-toast-region/ic-toast-region.d.ts

@@ -1,12 +1,12 @@
 export declare class ToastRegion {
+  private pendingVisibility;
+  private previouslyFocused;
   el: HTMLIcToastRegionElement;
-  previouslyFocused: HTMLElement;
-  pendingVisibility: HTMLIcToastElement[];
+  handleDismissedToast(): void;
   /**
    * Handles setting the visibility of various toasts based on what is already visible
    * @param toast The toast element being requested to display
    */
   setVisible(toast: HTMLIcToastElement): Promise<void>;
-  handleDismissedToast(): void;
   render(): any;
 }