@ukic/web-components 2.1.0-beta.2 → 2.1.0-beta.4

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

@@ -1,8 +1,15 @@
 import { IcThemeForeground } from "../../utils/types";
 /**
- * @slot icon - Content will be placed to the left of the card title.
  * @slot heading - Content will be placed at the top of the card to the right of the icon.
  * @slot message - Content will be placed in the main body of the card.
+ * @slot subheading - Content will be placed below the card heading.
+ * @slot adornment - Content will be placed below the card subheading.
+ * @slot image-top - Content will be placed at the top of the card above all other content.
+ * @slot image-mid - Content will be placed below the card heading section.
+ * @slot icon - Content will be placed to the left of the card heading.
+ * @slot interaction-button - Content will be placed in the top right corner of the heading section.
+ * @slot interaction-controls - Content will be placed below the card message.
+ * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.
  */
 export declare class Card {
   el: HTMLIcCardElement;
@@ -31,9 +38,13 @@ export declare class Card {
    */
   target?: string;
   /**
-   * The title for the card.
+   * The heading for the card.
    */
   heading: string;
+  /**
+   * The subheading for the card.
+   */
+  subheading?: string;
   /**
    * The main body message of the card.
    */
@@ -45,16 +56,22 @@ export declare class Card {
   /**
    *  If `true`, the card will fill the width of the container.
    */
-  fullWidth: boolean;
+  fullWidth?: boolean;
+  /**
+   *  If `true`, the card will have an expandable area and expansion toggle button.
+   */
+  expandable?: boolean;
   parentIsAnchorTag: boolean;
   isFocussed: boolean;
   parentEl: HTMLElement | null;
   appearance?: IcThemeForeground;
+  areaExpanded: boolean;
   handleHostClick(event: Event): void;
   themeChangeHandler(ev: CustomEvent): void;
   private parentFocussed;
   private parentBlurred;
   private updateTheme;
+  private toggleExpanded;
   componentWillLoad(): void;
   disconnectedCallback(): void;
   componentDidLoad(): void;

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

@@ -40,9 +40,13 @@ export declare class Checkbox {
   initiallyChecked: boolean;
   host: HTMLIcCheckboxElement;
   /**
-   * Emitted when a checkbox has been checked
+   * @deprecated This event should not be used anymore. Use icCheck instead.
    */
   checkboxChecked: EventEmitter<void>;
+  /**
+   * Emitted when a checkbox has been checked.
+   */
+  icCheck: EventEmitter<void>;
   private additionalFieldContainer;
   private handleClick;
   private handleFormReset;

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

@@ -0,0 +1,40 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcChipAppearance, IcChipSizes } from "./ic-chip.types";
+/**
+ * @slot icon - Content will be rendered at the start of the chip.
+ */
+export declare class Chip {
+  el: HTMLIcChipElement;
+  /**
+   * The text rendered within the chip.
+   */
+  label: string;
+  /**
+   * The emphasis of the chip.
+   */
+  appearance?: IcChipAppearance;
+  /**
+   * The size of the chip.
+   */
+  size?: IcChipSizes;
+  /**
+   * If `true`, the chip will have a close button at the end to dismiss it.
+   */
+  dismissible?: boolean;
+  /**
+   * If `true`, the chip will appear disabled.
+   */
+  disabled?: boolean;
+  visible: boolean;
+  isHovered: boolean;
+  handleClick(): void;
+  /**
+   * Is emitted when the user dismisses the chip.
+   */
+  dismiss: EventEmitter<void>;
+  private dismissAction;
+  private mouseEnterHandler;
+  private mouseLeaveHandler;
+  componentDidLoad(): void;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,2 @@
+export declare type IcChipSizes = "default" | "large" | "small";
+export declare type IcChipAppearance = "filled" | "outline";

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

@@ -10,9 +10,9 @@ import { IcFooterBreakpoints } from "./ic-footer.types";
 export declare class Footer {
   el: HTMLIcFooterElement;
   /**
-   * Triggers on page resize and triggers style changes in footer links and link groups
+   *  @internal Triggers on page resize and triggers style changes in footer links and link groups
    */
-  icFooterResized: EventEmitter<void>;
+  footerResized: EventEmitter<void>;
   /**
    * The description displayed at the top of the footer.
    */

package/dist/types/components/ic-loading-indicator/ic-loading-indicator.d.ts

@@ -26,6 +26,10 @@ export declare class LoadingIndicator {
    * The description that will be set as the aria-label of the loading indicator when not using a visible label.
    */
   description?: string;
+  /**
+   * @internal The step number of a compact step, managed by ic-step.
+   */
+  innerLabel?: number;
   /**
    * The time in milliseconds before the label changes.
    */
@@ -50,6 +54,7 @@ export declare class LoadingIndicator {
   indeterminate: boolean;
   showSecond: boolean;
   circularLineWidth: number;
+  compactStepCircularLineWidth: number;
   circularDiameter: number;
   watchPropHandler(): void;
   watchProgressHandler(): void;

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

@@ -60,13 +60,13 @@ export declare class Menu {
   /**
    * Emitted when an option is selected.
    */
-  optionSelect: EventEmitter<IcOptionSelectEventDetail>;
+  icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
   /**
    * Emitted when state of menu changes (i.e. open or close).
    */
-  menuChange: EventEmitter<IcMenuChangeEventDetail>;
+  icMenuStateChange: EventEmitter<IcMenuChangeEventDetail>;
   /**
-   * Emitted when an option has been highlighted
+   * @internal Emitted when an option has been highlighted
    */
   menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;
   handleClearListener(): void;
@@ -75,11 +75,12 @@ export declare class Menu {
   private ungroupedOptions;
   private popperInstance;
   private preventClickOpen;
+  private isSearchBar;
   private handleMenuChange;
   private setNextOptionValue;
   private setPreviousOptionValue;
   /**
-   * If menu is opened with the mouse, emit menuChange custom event.
+   * If menu is opened with the mouse, emit icMenuStateChange custom event.
    */
   handleClickOpen(): Promise<void>;
   /**

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

@@ -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-radio-option/ic-radio-option.d.ts

@@ -38,9 +38,13 @@ export declare class RadioOption {
   initiallySelected: boolean;
   host: HTMLIcRadioOptionElement;
   /**
-   * Emitted when a radio is selected.
+   * @deprecated This event should not be used anymore. Use icCheck instead.
    */
   radioOptionSelect: EventEmitter<IcValueEventDetail>;
+  /**
+   * Emitted when a radio is selected.
+   */
+  icCheck: EventEmitter<IcValueEventDetail>;
   selectedChangeHandler(selected: boolean): void;
   private defaultRadioValue;
   private skipFocus;

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

@@ -15,6 +15,7 @@ export declare class SearchBar {
   private truncateValue;
   private assistiveHintEl;
   private preventSubmit;
+  private debounceAriaLive;
   /**
    * The label for the search bar.
    */
@@ -82,7 +83,6 @@ export declare class SearchBar {
    * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
    */
   debounce?: number;
-  private debounceChanged;
   /**
    * The name of the control, which is submitted with the form data.
    */
@@ -128,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;
@@ -203,7 +203,6 @@ export declare class SearchBar {
   private hadNoOptions;
   private isSubmitDisabled;
   private highlightFirstOptionAfterNoResults;
-  connectedCallback(): void;
   componentWillRender(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;

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

@@ -35,7 +35,7 @@ export declare class SideNavigation {
    */
   collapsedIconLabels: boolean;
   /**
-   * If `true`, side navigation will be contained by its parent element.
+   * @internal If `true`, side navigation will be contained by its parent element.
    */
   inline: boolean;
   /**

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

@@ -16,6 +16,10 @@ export declare class StatusTag {
    * 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,18 +1,34 @@
-import { IcStepTypes } from "./ic-step.types";
+import { IcStepVariants, IcStepStatuses, IcStepTypes } from "./ic-step.types";
 export declare class Step {
   el: HTMLIcStepElement;
   /**
-   * The state of the step within the stepper.
+   * @internal The variant of the step. This is managed by ic-stepper.
    */
-  stepType?: IcStepTypes;
+  variant: IcStepVariants;
   /**
-   * The name of the step within the stepper.
+   * The title of the step within the stepper.
    */
   stepTitle?: string;
   /**
-   * The additional information about the 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;
+  /**
+   * 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.
    */
@@ -20,6 +36,19 @@ export declare class Step {
   /**
    * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.
    */
-  lastStep?: boolean;
+  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.
+   */
+  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;
   /**
-   * The alignment of the stepper within 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-tab/ic-tab.d.ts

@@ -21,7 +21,7 @@ export declare class Tab {
   /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
   appearance?: IcThemeForegroundNoDefault;
   /**
-   * Emitted when a tab is selected.
+   * @internal Emitted when a tab is selected.
    */
   tabClick: EventEmitter<IcTabClickEventDetail>;
   /**

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

@@ -12,7 +12,7 @@ export declare class TabContext {
    */
   activationType?: IcActivationTypes;
   /**
-   * The selected tab to be controlled by the user. 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;
   /**
@@ -22,9 +22,13 @@ export declare class TabContext {
   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-theme/ic-theme.d.ts

@@ -7,9 +7,9 @@ export declare class Theme {
   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;