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

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

@@ -1,25 +1,42 @@
 import { IcStepperAlignment } from "./ic-stepper.types";
-export declare class IcStepper {
+import { IcStepTypes, IcStepVariants } from "../ic-step/ic-step.types";
+export declare class Stepper {
   el: HTMLIcStepperElement;
   /**
-   * How the stepper should be aligned in its container.
+   * The alignment of the default stepper within its container.
    */
   aligned?: IcStepperAlignment;
+  /**
+   * The variant of the stepper.
+   */
+  variant?: IcStepVariants;
   /**
    * The length of the connnector between each step in pixels. Minimum length is 100px.
    */
   connectorWidth?: number;
+  /**
+   * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
+   */
+  hideStepInfo?: boolean;
   stepperWidth: number;
   lastStepWidth: number;
+  stepTypes: IcStepTypes[];
+  alignedFullWidth: boolean;
+  autoSetStepTitles: boolean;
+  variantOverride?: boolean;
+  noOfResizes?: number;
   private steps;
+  private stepsWithStepTitles;
   private resizeObserver;
-  /**
-   * Get all steps currently within this stepper
-   */
   private getChildren;
+  private checkStepTitles;
+  private setStepTypes;
+  private setStepperWidth;
   private initialiseStepStates;
+  private overrideVariant;
+  private resizeObserverCallback;
   private runResizeObserver;
-  private setStepperWidth;
+  componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   render(): any;

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

@@ -7,27 +7,27 @@ export declare class Switch {
   private inputId;
   el: HTMLIcSwitchElement;
   /**
-   * Applies an aria-label to the component, for when no visual 'name' is provided.
+   * The aria-label applied to the switch when no visual 'name' is provided.
    */
   label: string;
   /**
-   * 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;
   /**
-   * If true, the component is checked.
+   * If `true`, the switch will display as checked.
    */
   checked?: boolean;
   /**
-   * If true, the component reduces in size to the small state.
+   * If `true`, the small styling will be applied to the switch.
    */
   small?: boolean;
   /**
-   * If true, the component is not interactive.
+   * If `true`, the disabled state will be set.
    */
   disabled?: boolean;
   /**
@@ -35,7 +35,7 @@ export declare class Switch {
    */
   name?: string;
   /**
-   * If true, the component will render the On/Off state text.
+   * If `true`, the switch will render the On/Off state text.
    */
   showState?: boolean;
   /**

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

@@ -6,13 +6,13 @@ import { IcThemeForegroundNoDefault } from "../../utils/types";
  */
 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. */
+  /** @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */
   contextId?: string;
   /**
-   * Disables the tab.
+   * If `true`, the disabled state will be set.
    */
   disabled?: boolean;
-  /** @internal Will display a selected indicator and set tabIndex. */
+  /** @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. */
   selected?: boolean;
   /** @internal The shared ID between panel and tab. */
   tabId?: string;
@@ -21,11 +21,11 @@ export declare class Tab {
   /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
   appearance?: IcThemeForegroundNoDefault;
   /**
-   * Called when a tab is selected.
+   * @internal Emitted when a tab is selected.
    */
   tabClick: EventEmitter<IcTabClickEventDetail>;
   /**
-   * @internal Called when a tab is focussed.
+   * @internal Emitted when a tab is focussed.
    */
   tabFocus: EventEmitter<IcTabClickEventDetail>;
   private isInitialRender;

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

@@ -4,7 +4,7 @@ import { IcTabClickEventDetail, IcTabSelectEventDetail } from "../ic-tab/ic-tab.
 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.
+   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
    */
   contextId?: string;
   /**
@@ -12,19 +12,23 @@ export declare class TabContext {
    */
   activationType?: IcActivationTypes;
   /**
-   * Allows the user to control the selected tab. Must be used alongside the tabSelect event to manage tab selection.
+   * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.
    */
   selectedTabIndex?: number;
   /**
-   * Determines whether the light or dark variant of the tabs should be displayed.
+   * The appearance of the tab context, e.g dark, or light.
    */
   appearance?: IcThemeForegroundNoDefault;
   selectedTab: number | null;
   updateSelectedTab(newValue: number): void;
   /**
-   * Emitted when a user selects a tab.
+   * @deprecated This event should not be used anymore. Use icTabSelect instead.
    */
   tabSelect: EventEmitter<IcTabSelectEventDetail>;
+  /**
+   * Emitted when a user selects a tab.
+   */
+  icTabSelect: EventEmitter<IcTabSelectEventDetail>;
   tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void;
   private controlledMode;
   private tabs;

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

@@ -3,18 +3,18 @@ import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class TabGroup {
   host: HTMLIcTabGroupElement;
   /**
-   * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
+   * The unique context needed 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.
+   * If `true`, the tabs and tab panels will be positioned separately.
    */
   inline?: boolean;
   /**
-   * Provide a label to describe the purpose of the set of tabs to screen reader users.
+   * The label to describe the purpose of the set of tabs to screen reader users.
    */
   label: string;
-  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+  /** @internal The appearance of the tab group, e.g dark, or light. */
   appearance?: IcThemeForegroundNoDefault;
   firstTabVisible: boolean;
   lastTabVisible: boolean;

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;

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-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

@@ -10,27 +10,27 @@ import { IcAlignment, IcThemeForeground } from "../../utils/types";
 export declare class TopNavigation {
   el: HTMLIcTopNavigationElement;
   /**
-   *  Title to display
+   * The app title to be displayed.
    */
   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;