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

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

@@ -6,27 +6,27 @@ import { IcNavType } from "../../utils/types";
 export declare class NavigationItem {
   el: HTMLIcNavigationItemElement;
   /**
-   *  Label of the navigation item
+   * The label of the navigation item.
    */
   label: string;
   /**
-   *  Destination of the navigation item
+   * The destination of the navigation item.
    */
   href: string;
   /**
-   *  If true, sets the navigation item in a selected state
+   *  If `true`, the navigation item will be set in a selected state.
    */
   selected: boolean;
   /**
-   *  @internal Whether the navigation item is expandable
+   *  @internal If `true`, the navigation item will be expandable.
    */
   expandable: boolean;
   /**
-   * @internal display navigation item within tooltip
+   * @internal If `true`, the navigation item will be displayed within a tooltip.
    */
   displayNavigationTooltip: boolean;
   /**
-   * @internal display icon and label when side navigation is collapsed
+   * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.
    */
   collapsedIconLabel: boolean;
   isTopNavChild: boolean;
@@ -46,7 +46,7 @@ export declare class NavigationItem {
   /**
    * @internal - Emitted when navigation item clicked.
    */
-  icNavItemClicked: EventEmitter<void>;
+  navItemClicked: EventEmitter<void>;
   themeChangeHandler(ev: CustomEvent): void;
   private topNavResizedHandler;
   private sideNavExpandHandler;

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

@@ -6,11 +6,11 @@ import { EventEmitter } from "../../stencil-public-runtime";
 export declare class NavigationMenu {
   el: HTMLIcNavigationMenuElement;
   /**
-   *  Version info to display
+   * The version info to display.
    */
   version: string;
   /**
-   *  Status info to display
+   * The status info to display.
    */
   status: string;
   /**

package/dist/types/components/ic-page-header/ic-page-header.d.ts

@@ -12,33 +12,35 @@ import { IcAlignment } from "../../utils/types";
 export declare class PageHeader {
   el: HTMLIcPageHeaderElement;
   /**
-   * The title to render on the component.
+   * The title to render on the page header.
    */
   heading?: string;
   /**
-   * The subtitle to render on the component.
+   * The subtitle to render on the page header.
    */
   subheading?: string;
   /**
-   * How the component should be aligned.
+   * The alignment of the page header.
    */
   aligned?: IcAlignment;
   /**
-   * Whether the component uses small styling.
+   * If `true`, the small styling will be applied to the page header.
    */
   small?: boolean;
   /**
-   * Set whether the bottom border is used
+   * If `true`, a border will be displayed along the bottom of the page header.
    */
   border?: boolean;
   /**
-   * Set whether the header is sticky at all breakpoints
+   * If `true`, the page header will be sticky at all breakpoints.
    */
   sticky?: boolean;
-  /** Set whether the header is only sticky for viewport widths of 992px and above
+  /**
+   *  If `true`, the page header will only be sticky for viewport widths of 992px and above.
    */
   stickyDesktopOnly?: boolean;
-  /** Set whether the reading pattern and tab order change in the action area for viewport widths of above 576px and when actions have not wrapped
+  /**
+   * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.
    */
   reverseOrder?: boolean;
   deviceSize: number;

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

@@ -5,43 +5,43 @@ export declare class RadioGroup {
   private radioOptions;
   host: HTMLIcRadioGroupElement;
   /**
-   * Provide a label for the input.
+   * The label for the radio group to be displayed.
    */
   label: string;
   /**
-   * Provide a name for the input.
+   * The name for the radio group to differentiate from other groups.
    */
   name: string;
   /**
-   * Specify if the input requires a value.
+   * If `true`, the radio group will require a value.
    */
   required: 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;
   /**
-   * Specify whether the input is disabled.
+   * If `true`, the disabled state will be set.
    */
   disabled: boolean;
   /**
-   * Provide helper text to display additional field guidance.
+   * The helper text that will be displayed for additional field guidance.
    */
   helperText: string;
   /**
-   * Specify whether small styling is to be applied to the element.
+   * If `true`, the small styling will be applied to the radio group.
    */
   small: boolean;
   /**
-   * Provide validation status - 'error'
+   * The validation status - e.g. 'error' | 'warning' | 'success'.
    */
   validationStatus: IcInformationStatusOrEmpty;
   /**
-   * Provide validation text - 'error'
+   * The validation text - e.g. 'error' | 'warning' | 'success'.
    */
   validationText: string;
   /**
-   * Provide checked state
+   * The checked state.
    */
   checkedValue: string;
   selectedChild: number;

package/dist/types/components/ic-radio-option/ic-radio-option.d.ts

@@ -4,45 +4,47 @@ import { IcValueEventDetail } from "../../interface";
 export declare class RadioOption {
   private radioElement;
   /**
-   * Determines whether the radio should be in selected state.
+   * If `true`, the radio option will be displayed in a selected state.
    */
   selected?: boolean;
   /**
-   * Determines whether the radio should be in disabled state.
+   * If `true`, the disabled state will be set.
    */
   disabled?: boolean;
   /**
-   * Provide a label for the input.
+   * The label for the radio option.
    */
   label?: string;
   /**
-   * Provide a value for the input.
+   * The value for the radio option.
    */
   value: string;
   /**
-   * Provide a name for the input.
+   * The name for the radio option.
    */
   name: string;
   /**
-   * Provide a group label for the input.
+   * The group label for the radio option.
    */
   groupLabel: string;
   /**
-   * Provide a text prop for the dynamic text.
+   * The text to be displayed when dynamic.
    */
   dynamicText: string;
-  /** Determines type of additional text field in relation to radio option */
+  /**
+   * The style of additionalField that will be displayed if used.
+   */
   additionalFieldDisplay: IcAdditionalFieldTypes;
   initiallySelected: boolean;
   host: HTMLIcRadioOptionElement;
   /**
-   * Emitted when radio is checked
+   * @deprecated This event should not be used anymore. Use icCheck instead.
    */
-  icCheck: EventEmitter<void>;
+  radioOptionSelect: EventEmitter<IcValueEventDetail>;
   /**
    * Emitted when a radio is selected.
    */
-  radioOptionSelect: EventEmitter<IcValueEventDetail>;
+  icCheck: EventEmitter<IcValueEventDetail>;
   selectedChangeHandler(selected: boolean): void;
   private defaultRadioValue;
   private skipFocus;

package/dist/types/components/ic-search-bar/ic-search-bar.d.ts

@@ -16,70 +16,70 @@ export declare class SearchBar {
   private assistiveHintEl;
   private preventSubmit;
   /**
-   * Provide a label for the input.
+   * The label for the search bar.
    */
   label: string;
   /**
-   * Specify if the input requires a value.
+   * If `true`, the search bar 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 readonly state will be set.
    */
   readonly?: boolean;
   /**
-   * Provide a placeholder value to display.
+   * The 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.
+   * Specify whether the search bar fills the full width of the container.
+   * If `true`, this overrides the --input-width CSS variable.
    */
   fullWidth?: boolean;
   /**
    * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.
-   * If true, all options provided will be displayed.
+   * If `true`, all options provided will be displayed.
    */
   disableFilter?: 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 whether small styling is to be applied to the element.
+   * If `true`, the small styling will be applied to the search bar.
    */
   small?: boolean;
   /**
-   * Value of Search input.
+   * The value of the search input.
    */
   value: string;
   /**
-   * 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 debounceChanged;
@@ -88,28 +88,28 @@ export declare class SearchBar {
    */
   name: string;
   /**
-   * If `true`, the element will have its spelling and grammar checked.
+   * If `true`, the value of the search will have its spelling and grammar checked.
    */
   spellcheck: boolean;
   /**
-   * Provide the suggested search options
+   * The suggested search options.
    */
   options?: IcMenuOption[];
   watchOptionsHandler(newOptions: IcMenuOption[]): void;
   /**
-   * Specify whether the input should be focussed when component loaded.
+   * If `true`, the search bar will be focused when component loaded.
    */
   focusOnLoad?: boolean;
   /**
-   * Provide hint text for hidden assistive description element.
+   * The hint text for the hidden assistive description element.
    */
   hintText?: string;
   /**
-   * Provide text for empty results list
+   * The text displayed when there are no options in the option list.
    */
   emptyOptionListText: string;
   /**
-   * Number of characters until suggestions appear
+   * The number of characters until suggestions appear.
    */
   charactersUntilSuggestion: number;
   watchValueHandler(newValue: string): void;
@@ -120,6 +120,7 @@ export declare class SearchBar {
   handleKeyDown(ev: CustomEvent): void;
   handleKeyUp(ev: KeyboardEvent): void;
   private handleSubmitSearch;
+  private handleSubmitSearchKeyDown;
   /**
    * Emitted when a keyboard input occurred.
    */
@@ -127,12 +128,12 @@ export declare class SearchBar {
   private onInput;
   private debounceAriaLiveUpdate;
   /**
-   * Emitted when input loses focus.
+   * @deprecated This event should not be used anymore. Use icSearchBarBlur instead.
    */
   icInputBlur: EventEmitter<IcSearchBarBlurEventDetail>;
   private onInputBlur;
   /**
-   * Emitted when input gains focus.
+   * @deprecated This event should not be used anymore. Use icSearchBarFocus instead.
    */
   icInputFocus: EventEmitter<IcValueEventDetail>;
   private onInputFocus;
@@ -183,7 +184,9 @@ export declare class SearchBar {
   clearButtonFocused: boolean;
   searchSubmitFocused: boolean;
   prevNoOption: boolean;
+  highlightedValue: string;
   private handleOptionSelect;
+  private handleMenuOptionHighlight;
   private handleMenuChange;
   private setMenuChange;
   private handleHostFocus;

package/dist/types/components/ic-section-container/ic-section-container.d.ts

@@ -1,11 +1,11 @@
 import { IcAlignment } from "../../utils/types";
 export declare class SectionContainer {
   /**
-   * How the container should be aligned.
+   * The alignment of the container.
    */
   aligned?: IcAlignment;
   /**
-   * Removes the standard vertical padding from the container.
+   * If `true`, the standard vertical padding from the container will be removed.
    */
   fullHeight?: boolean;
   render(): any;

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

@@ -13,51 +13,51 @@ export declare class Select {
   private inheritedAttributes;
   private debounce;
   /**
-   * Provide a label for the input.
+   * The label for the select.
    */
   label: string;
   /**
-   * Provide the possible selection options.
+   * The possible selection options.
    */
   options?: IcMenuOption[];
   /**
-   * Specify if the input requires a value.
+   * If `true`, the select will require a value.
    */
   required?: 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;
   /**
-   * 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 readonly state will be set.
    */
   readonly?: boolean;
   /**
-   * Provide a placeholder value to display.
+   * The placeholder value to be displayed.
    */
   placeholder?: string;
   /**
-   * Provide helper text to display additional field guidance.
+   * The helper text that will be displayed for additional field guidance.
    */
   helperText?: string;
   /**
-   * Specify whether small styling is to be applied to the element.
+   * If `true`, the small styling will be applied to the select.
    */
   small?: boolean;
   /**
-   * If true, then fill width of container.
+   * If `true`, the select element will fill the width of the container.
    */
   fullWidth: boolean;
   /**
-   * Provide a validation status.
+   * The validation status - e.g. 'error' | 'warning' | 'success'.
    */
   validationStatus?: IcInformationStatusOrEmpty;
   /**
-   * Provide the text to display as the validation message.
+   * The text to display as the validation message.
    */
   validationText?: string;
   /**
@@ -69,19 +69,19 @@ export declare class Select {
    */
   name?: string;
   /**
-   * Display a button which clears the input when clicked. The button will always appear on the searchable select.
+   * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
    */
   showClearButton?: boolean;
   /**
-   * If true, the select can be typed in to filter options.
+   * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
    */
   searchable?: boolean;
   /**
-   * If true, descriptions of options are included when filtering options in a searchable select.
+   * If `true`, descriptions of options will be included when filtering options in a searchable select.
    */
   includeDescriptionsInSearch?: boolean;
   /**
-   * If true, group titles of grouped options are included when filtering options in a searchable select.
+   * If `true`, group titles of grouped options will be included when filtering options in a searchable select.
    */
   includeGroupTitlesInSearch?: boolean;
   /**
@@ -89,11 +89,11 @@ export declare class Select {
    */
   searchMatchPosition?: IcSearchMatchPositions;
   /**
-   * Number of characters until suggestions appear for a searchable select.
+   * The number of characters until suggestions appear for a searchable select.
    */
   charactersUntilSuggestions?: number;
   /**
-   * Provide text for empty results list
+   * The text displayed when there are no options in the option list.
    */
   emptyOptionListText: string;
   open: boolean;

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

@@ -1,45 +1,45 @@
 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 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 title of the app to be displayed.
    */
   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,7 +13,7 @@ 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;
   componentDidLoad(): void;

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