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

package/dist/types/components/ic-classification-banner/ic-classification-banner.d.ts

@@ -1,23 +1,23 @@
 import { IcProtectiveMarkings } from "./ic-classification-banner.types";
 export declare class ClassificationBanner {
   /**
-   * Additional information to display after the classification
+   * The additional information that will be displayed after the classification.
    */
   additionalSelectors?: string;
   /**
-   * The classification level to be displayed also determines the banner and text colour
+   * The classification level to be displayed - also determines the banner and text colour.
    */
   classification?: IcProtectiveMarkings;
   /**
-   * Optional text displayed before classification to specify relevant country/countries
+   * The optional text that will be displayed before classification to specify relevant country/countries.
    */
   country?: string;
   /**
-   * Determines whether the banner appears inline with the page or sticks to the bottom of the page
+   * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.
    */
   inline?: boolean;
   /**
-   * Optionally display "Up to" before classification and country if set
+   * If `true`, "Up to" will be displayed before the classification and country.
    */
   upTo?: boolean;
   render(): any;

package/dist/types/components/ic-data-entity/ic-data-entity.d.ts

@@ -1,11 +1,11 @@
 export declare class DataEntity {
   el: HTMLIcDataEntityElement;
   /**
-   * Title for the data entity
+   * The title for the data entity.
    */
   heading: string;
   /**
-   * Set the data heading and all child data rows to small styling
+   * If `true`, the small styling will be applied to the data heading and all child data rows.
    */
   small: boolean;
   render(): any;

package/dist/types/components/ic-data-row/ic-data-row.d.ts

@@ -6,15 +6,15 @@
 export declare class DataRow {
   el: HTMLIcDataRowElement;
   /**
-   * Set the label in the leftmost cell of the row
+   * The label in the leftmost cell of the row.
    */
   label: string;
   /**
-   * Set the value of the middle (right if no addition supplied) cell of the row
+   * The value of the middle (right if no end-component supplied) cell of the row.
    */
   value: string;
   /**
-   * Set the row to small styling, this is automatically applied if small is set on the parent data heading
+   * If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.
    */
   small: boolean;
   deviceSize: number;

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

@@ -2,39 +2,39 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { IcAlignment, IcThemeForeground } from "../../utils/types";
 import { IcFooterBreakpoints } from "./ic-footer.types";
 /**
- * @slot description - Content will be rendered at the top of the footer
- * @slot link - Content will be rendered between description and logos
- * @slot logo - Content will be rendered underneath footer links
- * @slot caption - Content will be rendered above Crown Copyright
+ * @slot description - Content will be rendered at the top of the footer.
+ * @slot link - Content will be rendered between description and logos.
+ * @slot logo - Content will be rendered underneath footer links.
+ * @slot caption - Content will be rendered above Crown Copyright.
  */
 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
+   * The description displayed at the top of the footer.
    */
   description: string;
   /**
-   * Sets the aligned parameter for the section containers used within the footer
+   * The alignment of the section containers used within the footer.
    */
   aligned?: IcAlignment;
   /**
-   * Sets the screen size breakpoint at which to switch to the small layout
+   * The screen size breakpoint at which to switch to the small layout.
    */
   breakpoint?: IcFooterBreakpoints;
   /**
-   * Sets the footer up to handle link groups instead of standalone links
+   * If `true`, the footer will be set up to handle link groups instead of standalone links.
    */
   groupLinks?: boolean;
   /**
-   * The caption displayed at the bottom of the footer
+   * The caption displayed at the bottom of the footer.
    */
   caption: string;
   /**
-   * Whether the footer displays the crown copyright at the bottom
+   * If `true`, the footer will display the crown copyright at the bottom.
    */
   copyright: boolean;
   deviceSize: number;

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

@@ -9,6 +9,26 @@ export declare class FooterLink {
    * The URL that the link points to.
    */
   href?: string;
+  /**
+   * The human language of the linked URL.
+   */
+  hreflang?: string;
+  /**
+   * How much of the referrer to send when following the link.
+   */
+  referrerpolicy?: ReferrerPolicy;
+  /**
+   * The relationship of the linked URL as space-separated link types.
+   */
+  rel?: string;
+  /**
+   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   */
+  target?: string;
+  /**
+   * If `true`, the user can save the linked URL instead of navigating to it.
+   */
+  download?: string | boolean;
   footerConfig: FooterConfig;
   deviceSize: number;
   foregroundColor: IcThemeForeground;

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

@@ -1,7 +1,7 @@
 export declare class FooterLinkGroup {
   el: HTMLIcFooterLinkGroupElement;
   /**
-   * Sets the title of the link group for display
+   * The title of the link group to be displayed.
    */
   groupTitle: string;
   small: boolean;

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

@@ -9,39 +9,39 @@ import { IcHeroContentAlignments } from "./ic-hero.types";
 export declare class Hero {
   el: HTMLIcHeroElement;
   /**
-   * The heading of the hero
+   * The heading of the hero.
    */
   heading: string;
   /**
-   * Description for the hero
+   * The description for the hero.
    */
   subheading?: string;
   /**
-   * Optional secondary heading, replaced by slotted right content
+   * The optional secondary heading, replaced by slotted right content.
    */
   secondaryHeading?: string;
   /**
-   * Optional secondary subheading, replaced by slotted right content
+   * The optional secondary subheading, replaced by slotted right content.
    */
   secondarySubheading?: string;
   /**
-   * Optional background image
+   * The optional background image.
    */
   backgroundImage?: string;
   /**
-   * Whether the background image (if set) scrolls using a parallax effect.
+   * If `true`, the background image (if set) will not scroll using a parallax effect.
    */
   disableBackgroundParallax?: boolean;
   /**
-   * The alignment of the hero content
+   * The alignment of the hero.
    */
   aligned: IcAlignment;
   /**
-   * The alignment of the hero content
+   * The alignment of the hero content.
    */
   contentAligned: IcHeroContentAlignments;
   /**
-   * Alter styling for use with small content/pages
+   * If `true`, the small styling will be applied to the hero.
    */
   small: boolean;
   rightContent: boolean;

package/dist/types/components/ic-horizontal-scroll/ic-horizontal-scroll.d.ts

@@ -0,0 +1,39 @@
+import { IcThemeForeground } from "../../utils/types";
+export declare class HorizontalScroll {
+  el: HTMLIcHorizontalScrollElement;
+  /**
+   * The appearance of the horizontal scroll, e.g. dark, light or the default.
+   */
+  appearance?: IcThemeForeground;
+  firstItemVisible: boolean;
+  lastItemVisible: boolean;
+  itemOverflow: boolean;
+  private itemOffsets;
+  private itemsContainerEl;
+  private items;
+  private resizeObserver;
+  private isScrolling;
+  private scrollDelay;
+  private buttonStateSet;
+  /**
+   * @internal if side scrolling enabled, scrolls the specified item into view.
+   */
+  scrollItemIntoView(itemPosition: number): Promise<void>;
+  itemFocusHandler(itemPosition: number): void;
+  private resizeObserverCallback;
+  private runResizeObserver;
+  private scrollLeft;
+  private scrollRight;
+  private longScrollRight;
+  private longScrollLeft;
+  private leftArrowMouseDownHandler;
+  private rightArrowMouseDownHandler;
+  private arrowMouseUpHandler;
+  private getCurrentLeftItem;
+  private scrollHandler;
+  private scrollStopped;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

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

package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts

@@ -4,35 +4,35 @@ import { IcInformationStatusOrEmpty } from "../../utils/types";
  */
 export declare class InputComponentContainer {
   /**
-   * disabled
+   *  If `true`, the disabled state will be set.
    */
   disabled: boolean;
   /**
-   * readonly
+   *  If `true`, the readonly state will be set.
    */
   readonly: boolean;
   /**
-   * validationStatus
+   * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.
    */
   validationStatus: IcInformationStatusOrEmpty;
   /**
-   * small
+   *  If `true`, the small styling will be applied to the input component container.
    */
   small: boolean;
   /**
-   * multiLine
+   *  If `true`, the input component container will allow for multiple lines.
    */
   multiLine: boolean;
   /**
-   * validationInline
+   *  If `true`, the validation will display inline.
    */
   validationInline: boolean;
   /**
-   * Determines whether the dark variant of the input-component-container focus indicator should be displayed.
+   *  If `true`, the dark variant of the input component container will be displayed.
    */
   dark?: boolean;
   /**
-   *  If true then fill width of container
+   *  If `true`, the input component container will fill the width of the container it is in.
    */
   fullWidth: boolean;
   host: HTMLIcInputComponentContainerElement;

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

@@ -1,10 +1,10 @@
 export declare class InputContainer {
   /**
-   * disabled
+   * If `true`, the disabled state will be set.
    */
   disabled?: boolean;
   /**
-   * readonly
+   * If `true`, the readonly state will be set.
    */
   readonly?: boolean;
   render(): any;

package/dist/types/components/ic-input-label/ic-input-label.d.ts

@@ -1,34 +1,34 @@
 export declare class InputLabel {
   /**
-   * for
+   * The ID of the form element the label is bound to.
    */
   for: string;
   /**
-   * required
+   * If `true`, the input label will require a value.
    */
   required: boolean;
   /**
-   * helperText
+   * The helper text that will be displayed.
    */
   helperText: string;
   /**
-   * label
+   * The text content of the label.
    */
   label: string;
   /**
-   * disabled
+   * If `true`, the disabled state will be set.
    */
   disabled: boolean;
   /**
-   * readonly
+   * If `true`, the readonly state will be set.
    */
   readonly: boolean;
   /**
-   * error
+   * If `true`, the input label will display with error styling.
    */
   error?: boolean;
   /**
-   * dark
+   * If `true`, the dark variant of the input label will be displayed.
    */
   dark?: boolean;
   componentDidLoad(): void;

package/dist/types/components/ic-input-validation/ic-input-validation.d.ts

@@ -6,23 +6,23 @@ import { IcAriaLiveModeVariants } from "./ic-input-validation.types";
 export declare class InputValidation {
   el: HTMLIcInputValidationElement;
   /**
-   * The validation message to display
+   * The validation message to display.
    */
   message: string;
   /**
-   * The id of the input field the message relates to
+   * The ID of the form element the validation is bound to.
    */
   for: string;
   /**
-   * The status
+   * The status of the validation - e.g. 'error' | 'warning' | 'success'.
    */
   status: IcInformationStatusOrEmpty;
   /**
-   *  If true then fill width of container
+   *  If `true`, the input validation will fill the width of the container.
    */
   fullWidth: boolean;
   /**
-   *  aria live mode to apply to message
+   *  The ARIA live mode to apply to the message.
    */
   ariaLiveMode: IcAriaLiveModeVariants;
   componentDidLoad(): void;

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

@@ -1,13 +1,13 @@
 import { IcThemeForeground } from "../../utils/types";
 /**
- * @slot router-item - Handle routing by nesting your routes in this slot
+ * @slot router-item - Handle routing by nesting your routes in this slot.
  */
 export declare class Link {
   private inheritedAttributes;
   private routerSlot;
   el: HTMLIcLinkElement;
   /**
-   * Prompts the user to save the linked URL instead of navigating to it.
+   * If `true`, the user can save the linked URL instead of navigating to it.
    */
   download?: string | boolean;
   /**
@@ -15,7 +15,7 @@ export declare class Link {
    */
   href?: string;
   /**
-   * Hints at the human language of the linked URL.
+   * The human language of the linked URL.
    */
   hreflang?: string;
   /**
@@ -27,21 +27,24 @@ export declare class Link {
    */
   rel?: string;
   /**
-   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
    */
   target?: string;
   /**
-   * Determines whether the 'open in new tab/window' icon is to be displayed.
+   * If `true`, the 'open in new tab/window' icon will be displayed.
    */
   showIcon?: boolean;
   /**
-   * Determines the whether the appearance is dark, light, or the default.
+   * The appearance of the link, e.g. dark, light, or default.
    */
   appearance?: IcThemeForeground;
   themeChangeHandler(ev: CustomEvent): void;
   private updateTheme;
+  /**
+   * Sets focus on the link.
+   */
+  setFocus(): Promise<void>;
   componentWillLoad(): void;
-  componentDidLoad(): void;
   private hasRouterSlot;
   render(): any;
 }

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

@@ -23,9 +23,13 @@ export declare class LoadingIndicator {
    */
   label?: string;
   /**
-   * Provide a description to be set as the aria-label of the loading indicator when not using a visible label.
+   * 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.
    */
@@ -39,11 +43,11 @@ export declare class LoadingIndicator {
    */
   type?: IcLoadingTypes;
   /**
-   * When linear, determines whether the full-width version (i.e. without a border radius) should be displayed.
+   * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.
    */
   fullWidth?: boolean;
   /**
-   * Determines whether the dark or light loading indicator should be displayed.
+   * The appearance of the loading indicator, e.g. dark or light.
    */
   appearance?: IcThemeForegroundNoDefault;
   indicatorLabel: string;

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

@@ -4,19 +4,19 @@ import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEvent
 export declare class Menu {
   host: HTMLIcMenuElement;
   /**
-   * Specify whether the menu is open.
+   * If `true`, the menu will be displayed open.
    */
   open: boolean;
   /**
-   * Provide the possible selection options.
+   * The possible menu selection options.
    */
   options: IcMenuOption[];
   /**
-   * Specify whether small styling is to be applied to the element.
+   * If `true`, the small styling will be applied to the menu.
    */
   small?: boolean;
   /**
-   * Id of the menu.
+   * The ID of the menu.
    */
   menuId: string;
   /**
@@ -28,27 +28,27 @@ export declare class Menu {
    */
   activationType?: IcActivationTypes;
   /**
-   * Reference to the input element.
+   * The reference to the input element.
    */
   inputEl: HTMLElement;
   /**
-   * @internal - set if ic-menu is nested inside another component
+   * @internal - The parent element if ic-menu is nested inside another component.
    */
   parentEl?: HTMLElement;
   /**
-   * Label for the input element.
+   * The label for the input element.
    */
   inputLabel: string;
   /**
-   * Reference to an anchor element the menu will position itself from when rendered.
+   * The reference to an anchor element the menu will position itself from when rendered.
    */
   anchorEl: HTMLElement;
   /**
-   *  If true then fill width of container
+   *  If `true`, the menu will fill the width of the container.
    */
   fullWidth: boolean;
   /**
-   * @internal If true, autofocus on selected item when menu is open
+   * @internal If `true`, autofocus will be applied on selected item when menu is open.
    */
   autoFocusOnSelected: boolean;
   keyboardNav: boolean;
@@ -58,28 +58,42 @@ export declare class Menu {
   preventIncorrectTabOrder: boolean;
   watchOptionsHandler(): void;
   /**
-   * Emitted when an option is selected.
+   * @internal Emitted when an option is selected.
    */
-  optionSelect: EventEmitter<IcOptionSelectEventDetail>;
+  menuOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
   /**
-   * Emitted when state of menu changes (i.e. open or close).
+   * @internal Emitted when state of menu changes (i.e. open or close).
    */
-  menuChange: EventEmitter<IcMenuChangeEventDetail>;
+  menuStateChange: EventEmitter<IcMenuChangeEventDetail>;
   /**
-   * Emitted when an option has been highlighted
+   * @internal Emitted when an option has been highlighted
    */
   menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;
-  handleClearListener(): void;
-  handleSubmitSearch(): void;
+  /**
+   * @internal Emitted when key is pressed while menu is open
+   */
+  menuKeyPress: EventEmitter<{
+    isNavKey: boolean;
+    key: string;
+  }>;
+  /**
+   * @internal Emitted when the ungrouped options have been set.
+   */
+  ungroupedOptionsSet: EventEmitter<{
+    options: IcMenuOption[];
+  }>;
+  private handleClearListener;
+  private handleSubmitSearch;
   private 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.
+   * @internal If menu is opened with the mouse, emit menuStateChange custom event.
    */
   handleClickOpen(): Promise<void>;
   /**
@@ -99,7 +113,9 @@ export declare class Menu {
   private setInputValue;
   private handleOptionClick;
   private handleBlur;
+  private handleMouseDown;
   private handleMenuKeyDown;
+  private emitMenuKeyPress;
   private autoSetValueOnMenuKeyDown;
   private handleMenuKeyUp;
   private getOptionId;
@@ -108,11 +124,13 @@ export declare class Menu {
   private isManualMode;
   private scrollToSelected;
   private loadUngroupedOptions;
+  private setMenuScrollbar;
   connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
   componentDidUpdate(): void;
+  disconnectedCallback(): void;
   private displayOption;
   render(): any;
 }

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

@@ -6,7 +6,7 @@ import { IcNavButtonModes } from "./ic-navigation-button.types";
 export declare class NavigationButton {
   el: HTMLIcNavigationButtonElement;
   /**
-   *  label info to display
+   * The label info to display.
    */
   label: string;
   /**
@@ -14,7 +14,7 @@ export declare class NavigationButton {
    */
   href?: string;
   /**
-   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
    */
   target?: string;
   /**
@@ -22,11 +22,11 @@ export declare class NavigationButton {
    */
   rel?: string;
   /**
-   * Prompts the user to save the linked URL instead of navigating to it.
+   * If `true`, the user can save the linked URL instead of navigating to it.
    */
   download?: string | boolean;
   /**
-   * Hints at the human language of the linked URL.
+   * The human language of the linked URL.
    */
   hreflang?: string;
   /**
@@ -34,7 +34,7 @@ export declare class NavigationButton {
    */
   referrerpolicy?: ReferrerPolicy;
   /**
-   *  display mode
+   * The display mode.
    */
   mode: IcNavButtonModes;
   initialAppearance: IcThemeForeground;
@@ -44,7 +44,7 @@ export declare class NavigationButton {
   navBarMenuCloseHandler(): void;
   themeChangeHandler(ev: CustomEvent): void;
   /**
-   * Sets focus on the native `button`
+   * Sets focus on the native `button`.
    */
   setFocus(): Promise<void>;
   componentWillLoad(): void;

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

@@ -2,11 +2,11 @@ import { IcNavType } from "../../utils/types";
 export declare class NavigationGroup {
   el: HTMLIcNavigationGroupElement;
   /**
-   *  label to display on the group
+   * The label to display on the group.
    */
   label: string;
   /**
-   *  whether the group should be expandable/collapsible in the side menu
+   *  If `true`, the group will be expandable in the side menu.
    */
   expandable: boolean;
   dropdownOpen: boolean;
@@ -23,7 +23,7 @@ export declare class NavigationGroup {
   navItemClickHandler(): void;
   themeChangeHandler(ev: CustomEvent): void;
   /**
-   * Sets focus on the nav item
+   * Sets focus on the nav item.
    */
   setFocus(): Promise<void>;
   private sideNavExpandHandler;