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

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

@@ -1,45 +1,46 @@
 import { IcThemeForeground } from "../../utils/types";
 /**
- * @slot app-icon - Content will be rendered adjacent to the application title at the very top of the side navigation
- * @slot primary-navigation - Content will be rendered at the top of the side navigation
- * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation
+ * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.
+ * @slot app-title - Handle routing by nesting a route in the app title.
+ * @slot primary-navigation - Content will be rendered at the top of the side navigation.
+ * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.
  */
 export declare class SideNavigation {
   el: HTMLIcSideNavigationElement;
   /**
-   * Title to display.
+   * The app title to be displayed. This is required, unless a slotted app title link is used.
    */
   appTitle: string;
   /**
-   * Status of application
+   * The status of the app to be displayed.
    */
   status: string;
   /**
-   * Version of application
+   * The version of the app to be displayed.
    */
   version: string;
   /**
-   * If true, the ic-side-navigation will load in an expanded state
+   * If `true`, the side navigation will load in an expanded state.
    */
   expanded: boolean;
   /**
-   * Set application title link
+   * The URL that the app title link points to.
    */
   href: string;
   /**
-   * If true, the menu expand button is removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)
+   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
    */
   static: boolean;
   /**
-   * If true, the icon and label will appear when side navigation is collapsed
+   * If `true`, the icon and label will appear when side navigation is collapsed.
    */
   collapsedIconLabels: boolean;
   /**
-   * If true, side navigation will be contained by parent element
+   * @internal If `true`, side navigation will be contained by its parent element.
    */
   inline: boolean;
   /**
-   * If true, disable automatic parent wrapper styling
+   * If `true`, automatic parent wrapper styling will be disabled.
    */
   disableAutoParentStyling: boolean;
   foregroundColor: IcThemeForeground;

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

@@ -2,11 +2,11 @@ import { IcSkeletonVariants } from "./ic-skeleton.types";
 export declare class Skeleton {
   el: HTMLIcSkeletonElement;
   /**
-   * The variant of the skeleton that will be displayed
+   * The variant of the skeleton that will be displayed.
    */
   variant?: IcSkeletonVariants;
   /**
-   * Set the skeleton to the light variant
+   * If `true`, the skeleton will be set to the light variant.
    */
   light?: boolean;
   hasChild: boolean;

package/dist/types/components/ic-status-tag/ic-status-tag.d.ts

@@ -13,9 +13,13 @@ export declare class StatusTag {
    */
   appearance?: IcStatusTagAppearance;
   /**
-   * The size of the status tag.
+   * If `true`, the small styling will be applied to the status tag.
    */
   small?: boolean;
+  /**
+   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.
+   */
+  announced?: boolean;
   componentDidLoad(): void;
   render(): any;
 }

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

@@ -1,25 +1,54 @@
-import { IcStepTypes } from "./ic-step.types";
+import { IcStepVariants, IcStepStatuses, IcStepTypes } from "./ic-step.types";
 export declare class Step {
   el: HTMLIcStepElement;
   /**
-   * State of step
+   * @internal The variant of the step. This is managed by ic-stepper.
    */
-  stepType?: IcStepTypes;
+  variant: IcStepVariants;
   /**
-   * Name of step
+   * The title of the step within the stepper.
    */
   stepTitle?: string;
   /**
-   * Additional information about step
+   * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.
    */
   stepSubtitle?: string;
   /**
-   * @internal The step number, managed by ic-stepper
+   * The status of the step. Use this prop to display a status message on the step if it is required or optional.
+   */
+  stepStatus?: IcStepStatuses;
+  /**
+   * The state of the step within the stepper.
+   */
+  stepType?: IcStepTypes;
+  /**
+   * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.
+   */
+  current?: boolean;
+  /**
+   * @internal If a compact stepper is being used, this sets the styling of the step.
+   */
+  compactStepStyling?: IcStepTypes;
+  /**
+   * @internal The step number, managed by ic-stepper.
    */
   stepNum?: number;
   /**
-   * @internal Final step in series flag, managed by ic-stepper
+   * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.
+   */
+  lastStep: boolean;
+  /**
+   * @internal The step number of the final step. This is managed by ic-stepper.
+   */
+  lastStepNum?: number;
+  /**
+   * @internal The name of the next step. This is managed by ic-stepper.
+   */
+  nextStepTitle?: string;
+  /**
+   * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.
    */
-  lastStep?: boolean;
+  progress?: number;
+  stepTypeChangeHandler(): void;
   render(): any;
 }

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

@@ -1 +1,3 @@
+export declare type IcStepVariants = "default" | "compact";
+export declare type IcStepStatuses = "optional" | "required";
 export declare type IcStepTypes = "active" | "current" | "completed" | "disabled";

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

@@ -0,0 +1,4 @@
+export declare const defaultStepper = "\n    <ic-stepper>\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
+export declare const customConnectorWidthStepper = "\n    <ic-stepper aligned=\"left\" connector-width=\"150\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
+export declare const invalidConnectorWidthStepper = "\n    <ic-stepper aligned=\"left\" connector-width=\"96\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
+export declare const compactStepper = "\n    <ic-stepper variant=\"compact\" id=\"custom-compact-stepper\">\n        <ic-step \n        step-title=\"First\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          icon\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>";

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;
   /**
@@ -64,6 +64,10 @@ export declare class Switch {
   private onFocus;
   private onBlur;
   private handleFormReset;
+  /**
+   * Sets focus on the switch.
+   */
+  setFocus(): Promise<void>;
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;

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;
@@ -33,6 +33,10 @@ export declare class Tab {
   private handleClick;
   private handleFocus;
   private handleMouseDown;
+  /**
+   * Sets focus on the tab.
+   */
+  setFocus(): Promise<void>;
   componentDidUpdate(): void;
   render(): any;
 }

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

@@ -1,50 +1,22 @@
-import { IcTabClickEventDetail } from "../ic-tab/ic-tab.types";
 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. */
-  appearance?: IcThemeForegroundNoDefault;
-  firstTabVisible: boolean;
-  lastTabVisible: boolean;
-  tabOverflow: boolean;
-  private tabs;
-  private tabOffsets;
-  private tabGroupEl;
-  private splitterEl;
-  private resizeObserver;
-  private isScrolling;
-  private scrollDelay;
-  private buttonStateSet;
   /**
-   * @internal if tab side scrolling enabled, scrolls the specified tab into view
+   * @internal The appearance of the tab group, e.g dark, or light.
    */
-  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;
+  appearance?: IcThemeForegroundNoDefault;
   componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

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;