@ukic/web-components 2.1.0-beta.1 → 2.1.0-beta.11

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

@@ -2,7 +2,7 @@ import { IcThemeForegroundNoDefault } from "../../utils/types";
 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.
+   * The unique context needed 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. */
@@ -11,7 +11,7 @@ export declare class TabPanel {
   panelId?: string;
   /** @internal The shared ID of the currently selected tab. */
   selectedTab?: string;
-  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+  /** @internal The appearance of the tabs, e.g dark, or light. */
   appearance?: IcThemeForegroundNoDefault;
   render(): any;
 }

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

@@ -9,98 +9,98 @@ export declare class TextField {
   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
+   * @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
+   * The ID for the input.
    */
   inputId?: string;
   /**
-   * Provide a label for the input.
+   * The label for the input.
    */
   label: string;
   /**
-   * Specify if the input requires a value.
+   * If `true`, the input will require a value.
    */
   required: boolean;
   /**
-   * Specify whether the input is disabled.
+   * If `true`, the disabled state will be set.
    */
   disabled: boolean;
   /**
-   * Specify whether the input is read only.
+   * If `true`, the read only state will be set.
    */
   readonly: boolean;
   /**
-   * Provide a placeholder value to display.
+   * The placeholder value to be displayed.
    */
   placeholder: string;
   /**
-   * Specify whether the component fills the full width of the container.
-   * If true, this overrides the --input-width css prop.
+   * Specify whether the text field fills the full width of the container.
+   * If `true`, this overrides the --input-width CSS variable.
    */
   fullWidth: boolean;
   /**
-   * Hides the label and applies the required label value as an aria-label.
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
    */
   hideLabel: boolean;
   /**
-   * Provide helper text to display additional field guidance.
+   * The helper text that will be displayed for additional field guidance.
    */
   helperText: string;
   /**
-   * Specify the number of rows to transform the text field into a text area with a specific height.
+   * 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
+   * If `true`, the multiline text area will be resizeable.
    */
   resize: boolean;
   /**
-   * Specify whether small styling is to be applied to the element.
+   * If `true`, the small styling will be applied to the text field.
    */
   small: boolean;
   /**
-   * Value of TextField.
+   * The value of the text field.
    */
   value: string;
   /**
-   * Maximum number of characters that can be entered in the field.
+   * The maximum number of characters that can be entered in the field.
    */
   maxLength: number;
   /**
-   * Provide validation state - 'error' | 'warning' | 'success'
+   * The validation state - e.g. 'error' | 'warning' | 'success'.
    */
   validationStatus: IcInformationStatusOrEmpty;
   /**
-   * Provide validation state - 'error' | 'warning' | 'success'
+   * The validation state - e.g. 'error' | 'warning' | 'success'.
    */
   validationText: string;
   /**
-   * Show icon in input control - only applies when validationStatus ='success'
+   * If `true`, the icon in input control will be displayed - 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.
+   * The automatic capitalisation of the text value 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.
+   * The state of autocompletion the browser can apply on the text value.
    */
   autocomplete: IcAutocompleteTypes;
   /**
-   * Whether auto correction should be enabled when the user is entering/editing the text value.
+   * The state of autocorrection the browser can apply 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.
+   * If `true`, the form control will 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.
+   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
    */
   debounce: number;
   private showLeftIcon;
@@ -120,15 +120,15 @@ export declare class TextField {
    */
   name: string;
   /**
-   * If `true`, the element will have its spelling and grammar checked.
+   * If `true`, the value of the text field will have its spelling and grammar checked.
    */
   spellcheck: boolean;
   /**
-   * @internal Used to identify the active element when focus is on the ic-menu items
+   * @internal 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
+   * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.
    */
   truncateValue?: boolean;
   /**
@@ -148,7 +148,7 @@ export declare class TextField {
    */
   role: string;
   /**
-   * @internal Used to stop rendering of hidden form input for form submission;
+   * @internal If `true`, the hidden form input will stop rendering for form submission.
    */
   hiddenInput: boolean;
   numChars: number;
@@ -156,7 +156,7 @@ export declare class TextField {
   initialValue: string;
   watchValueHandler(newValue: string): void;
   /**
-   * Sets focus on the native `input`
+   * Sets focus on the native `input`.
    */
   setFocus(): Promise<void>;
   handleKeyDown(ev: KeyboardEvent): void;

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

@@ -2,14 +2,14 @@ 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)"
+   * The theme colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
    */
   color?: string;
   watchColorPropHandler(): void;
   /**
-   * Emitted when the theme is changed.
+   * @internal Emitted when the theme is changed.
    */
-  icThemeChange: EventEmitter<IcTheme>;
+  themeChange: EventEmitter<IcTheme>;
   private checkThemeColorContrast;
   private setThemeColor;
   private setThemeRGBA;

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

@@ -0,0 +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 {
+  el: HTMLIcToastElement;
+  /**
+   * 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
+   */
+  variant?: IcStatusVariants;
+  /**
+   * The main body message of the toast. (NOTE: Should be no more than `140` characters)
+   */
+  message?: 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`)
+   */
+  autoDismissTimeout?: number;
+  /**
+   * 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
+   */
+  dismissButtonAriaLabel?: string;
+  /**
+   * 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;
+  /**
+   * 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;
+  render(): any;
+}

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

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

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

@@ -0,0 +1 @@
+export declare type ActionAreaElementTypes = HTMLIcButtonElement | HTMLIcLinkElement;

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

@@ -0,0 +1,12 @@
+export declare class ToastRegion {
+  el: HTMLIcToastRegionElement;
+  previouslyFocused: HTMLElement;
+  pendingVisibility: HTMLIcToastElement[];
+  /**
+   * 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;
+}

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

@@ -13,6 +13,10 @@ export declare class Tooltip {
    * The text to display on the tooltip.
    */
   label: string;
+  /**
+   * If `true`, the tooltip will not be displayed on hover, it will require a click.
+   */
+  disableHover?: boolean;
   updateLabel(newValue: string): void;
   private toolTip;
   private arrow;

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

@@ -2,6 +2,7 @@ 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 app-title - Handle routing by nesting a route in the 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.
@@ -10,27 +11,27 @@ import { IcAlignment, IcThemeForeground } from "../../utils/types";
 export declare class TopNavigation {
   el: HTMLIcTopNavigationElement;
   /**
-   *  Title to display
+   * The app title to be displayed. This is required, unless a slotted app title link is used.
    */
   appTitle: string;
   /**
-   *  The url to navigate to when title is clicked
+   *  The URL to navigate to when the app title is clicked.
    */
   href: string;
   /**
-   *  Version info to display
+   * The version info to be displayed.
    */
   version: string;
   /**
-   *  Status info to display
+   * The status info to be displayed.
    */
   status: string;
   /**
-   * The alignment of the top nav content
+   * The alignment of the top navigation content.
    */
   contentAligned: IcAlignment;
   /**
-   * If true, the flyout navigation menu on small devices will be contained by the parent element
+   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.
    */
   inline: boolean;
   menuOpen: boolean;

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

@@ -6,7 +6,7 @@ export declare class Typography {
    */
   variant?: IcTypographyVariants;
   /**
-   * Adds appropriate margins to the top and bottom of the typography.
+   * If `true`, appropriate top and bottom margins will be applied to the typography.
    */
   applyVerticalMargins?: boolean;
   render(): any;