@ukic/web-components 2.1.0-beta.16 → 2.1.0-beta.18

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

@@ -3,38 +3,38 @@ import { IcInformationStatusOrEmpty } from "../../utils/types";
  * @slot left-icon - Content will be placed to the left of the input.
  */
 export declare class InputComponentContainer {
+  host: HTMLIcInputComponentContainerElement;
+  /**
+   *  If `true`, the dark variant of the input component container will be displayed.
+   */
+  dark?: boolean;
   /**
    *  If `true`, the disabled state will be set.
    */
   disabled: boolean;
   /**
-   *  If `true`, the readonly state will be set.
+   *  If `true`, the input component container will fill the width of the container it is in.
    */
-  readonly: boolean;
+  fullWidth: boolean;
   /**
-   * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.
+   *  If `true`, the input component container will allow for multiple lines.
    */
-  validationStatus: IcInformationStatusOrEmpty;
+  multiLine: boolean;
   /**
-   *  If `true`, the small styling will be applied to the input component container.
+   *  If `true`, the readonly state will be set.
    */
-  small: boolean;
+  readonly: boolean;
   /**
-   *  If `true`, the input component container will allow for multiple lines.
+   *  If `true`, the small styling will be applied to the input component container.
    */
-  multiLine: boolean;
+  small: boolean;
   /**
    *  If `true`, the validation will display inline.
    */
   validationInline: boolean;
   /**
-   *  If `true`, the dark variant of the input component container will be displayed.
-   */
-  dark?: boolean;
-  /**
-   *  If `true`, the input component container will fill the width of the container it is in.
+   * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.
    */
-  fullWidth: boolean;
-  host: HTMLIcInputComponentContainerElement;
+  validationStatus: IcInformationStatusOrEmpty;
   render(): any;
 }

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

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

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

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

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

@@ -6,6 +6,10 @@ export declare class Link {
   private inheritedAttributes;
   private routerSlot;
   el: HTMLIcLinkElement;
+  /**
+   * The appearance of the link, e.g. dark, light, or default.
+   */
+  appearance?: IcThemeForeground;
   /**
    * If `true`, the user can save the linked URL instead of navigating to it.
    */
@@ -26,25 +30,21 @@ export declare class Link {
    * 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;
   /**
    * @deprecated This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target="_blank".
    */
   showIcon?: boolean;
   /**
-   * The appearance of the link, e.g. dark, light, or default.
+   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
    */
-  appearance?: IcThemeForeground;
+  target?: string;
+  componentWillLoad(): void;
   themeChangeHandler(ev: CustomEvent): void;
-  private updateTheme;
   /**
    * Sets focus on the link.
    */
   setFocus(): Promise<void>;
-  componentWillLoad(): void;
+  private updateTheme;
   private hasRouterSlot;
   render(): any;
 }

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

@@ -1,31 +1,29 @@
 import { IcLoadingSizes, IcLoadingTypes } from "./ic-loading-indicator.types";
 import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class LoadingIndicator {
+  private circularMeter;
+  private innerElement?;
+  private interval;
+  private labelList;
+  private outerElement?;
   host: HTMLIcLoadingIndicatorElement;
+  circularDiameter: number;
+  circularLineWidth: number;
+  indeterminate: boolean;
+  indicatorLabel: string;
+  showSecond: boolean;
   /**
-   * The current amount of progress made.
-   * If not provided, component acts as an indeterminate loading indicator.
-   */
-  progress?: number;
-  /**
-   * The minimum value that the progress value can take.
-   * Used to calculate the proportional width of the progress bar.
-   */
-  min?: number;
-  /**
-   * The maximum value that the progress value can take.
-   * Used to calculate the proportional width of the progress bar.
-   */
-  max?: number;
-  /**
-   * The label to be displayed beneath the loading indicator.
-   * Display a changing label by separating multiple messages with forward slashes.
+   * The appearance of the loading indicator, e.g. dark or light.
    */
-  label?: string;
+  appearance?: IcThemeForegroundNoDefault;
   /**
    * The description that will be set as the aria-label of the loading indicator when not using a visible label.
    */
   description?: string;
+  /**
+   * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.
+   */
+  fullWidth?: boolean;
   /**
    * @internal The step number of a compact step, managed by ic-step.
    */
@@ -34,6 +32,16 @@ export declare class LoadingIndicator {
    * The time in milliseconds before the label changes.
    */
   labelDuration?: number;
+  /**
+   * The maximum value that the progress value can take.
+   * Used to calculate the proportional width of the progress bar.
+   */
+  max?: number;
+  /**
+   * The minimum value that the progress value can take.
+   * Used to calculate the proportional width of the progress bar.
+   */
+  min?: number;
   /**
    * The size of the loading indicator.
    */
@@ -43,25 +51,22 @@ export declare class LoadingIndicator {
    */
   type?: IcLoadingTypes;
   /**
-   * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.
+   * The label to be displayed beneath the loading indicator.
+   * Display a changing label by separating multiple messages with forward slashes.
    */
-  fullWidth?: boolean;
+  label?: string;
+  watchPropHandler(): void;
   /**
-   * The appearance of the loading indicator, e.g. dark or light.
+   * The current amount of progress made.
+   * If not provided, component acts as an indeterminate loading indicator.
    */
-  appearance?: IcThemeForegroundNoDefault;
-  indicatorLabel: string;
-  indeterminate: boolean;
-  showSecond: boolean;
-  circularLineWidth: number;
-  circularDiameter: number;
-  watchPropHandler(): void;
+  progress?: number;
   watchProgressHandler(): void;
-  private outerElement?;
-  private innerElement?;
-  private labelList;
-  private circularMeter;
-  private interval;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillUpdate(): void;
+  componentDidUpdate(): void;
   private updateCircularProgressMeter;
   private getLabel;
   private getLabelVariant;
@@ -71,10 +76,5 @@ export declare class LoadingIndicator {
   private updateLabel;
   private setCircleXY;
   private setDashSteps;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  componentWillUpdate(): void;
-  componentDidUpdate(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

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

@@ -2,84 +2,72 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { IcActivationTypes, IcMenuOption, IcValueEventDetail } from "../../utils/types";
 import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEventDetail } from "./ic-menu.types";
 export declare class Menu {
-  private menu;
-  private ungroupedOptions;
-  private popperInstance;
+  private firstRender;
+  private hasPreviouslyBlurred;
+  private hasTimedOut;
+  private isLoading;
   private isSearchBar;
   private isSearchableSelect;
+  private menu;
+  private popperInstance;
   private preventClickOpen;
-  private hasTimedOut;
-  private isLoading;
-  private hasPreviouslyBlurred;
-  private firstRender;
+  private ungroupedOptions;
   host: HTMLIcMenuElement;
+  focusFromSearchKeypress: boolean;
+  initialOptionsListRender: boolean;
+  keyboardNav: boolean;
+  optionHighlighted: string;
+  preventIncorrectTabOrder: boolean;
   /**
-   * If `true`, the menu will be displayed open.
-   */
-  open: boolean;
-  /**
-   * The possible menu selection options.
-   */
-  options: IcMenuOption[];
-  /**
-   * If `true`, the small styling will be applied to the menu.
+   * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
    */
-  small?: boolean;
+  activationType?: IcActivationTypes;
   /**
-   * The ID of the menu.
+   * The reference to an anchor element the menu will position itself from when rendered.
    */
-  menuId: string;
+  anchorEl: HTMLElement;
   /**
-   * The value of the currently selected option.
+   * @internal If `true`, autofocus will be applied on selected item when menu is open.
    */
-  value: string;
+  autoFocusOnSelected: boolean;
   /**
-   * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
+   *  If `true`, the menu will fill the width of the container.
    */
-  activationType?: IcActivationTypes;
+  fullWidth: boolean;
   /**
    * The reference to the input element.
    */
   inputEl: HTMLElement;
-  /**
-   * @internal - The parent element if ic-menu is nested inside another component.
-   */
-  parentEl?: HTMLElement;
   /**
    * The label for the input element.
    */
   inputLabel: string;
   /**
-   * The reference to an anchor element the menu will position itself from when rendered.
+   * The ID of the menu.
    */
-  anchorEl: HTMLElement;
+  menuId: string;
   /**
-   *  If `true`, the menu will fill the width of the container.
+   * If `true`, the menu will be displayed open.
    */
-  fullWidth: boolean;
+  open: boolean;
   /**
-   * @internal If `true`, autofocus will be applied on selected item when menu is open.
+   * @internal - The parent element if ic-menu is nested inside another component.
    */
-  autoFocusOnSelected: boolean;
-  keyboardNav: boolean;
-  optionHighlighted: string;
-  focusFromSearchKeypress: boolean;
-  initialOptionsListRender: boolean;
-  preventIncorrectTabOrder: boolean;
-  watchOptionsHandler(newOptions: IcMenuOption[]): void;
-  watchValueHandler(): void;
+  parentEl?: HTMLElement;
   /**
-   * @internal Emitted when an option is selected.
+   * If `true`, the small styling will be applied to the menu.
    */
-  menuOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
+  small?: boolean;
   /**
-   * @internal Emitted when state of menu changes (i.e. open or close).
+   * The possible menu selection options.
    */
-  menuStateChange: EventEmitter<IcMenuChangeEventDetail>;
+  options: IcMenuOption[];
+  watchOptionsHandler(newOptions: IcMenuOption[]): void;
   /**
-   * @internal Emitted when an option has been highlighted
+   * The value of the currently selected option.
    */
-  menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;
+  value: string;
+  watchValueHandler(): void;
   /**
    * @internal Emitted when key is pressed while menu is open
    */
@@ -88,15 +76,21 @@ export declare class Menu {
     key: string;
   }>;
   /**
-   * @internal Emitted when menu value changes.
+   * @internal Emitted when an option has been highlighted
    */
-  menuValueChange: EventEmitter<IcValueEventDetail>;
+  menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;
   /**
-   * @internal Emitted when the ungrouped options have been set.
+   * @internal Emitted when an option is selected.
    */
-  ungroupedOptionsSet: EventEmitter<{
-    options: IcMenuOption[];
-  }>;
+  menuOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
+  /**
+   * @internal Emitted when state of menu changes (i.e. open or close).
+   */
+  menuStateChange: EventEmitter<IcMenuChangeEventDetail>;
+  /**
+   * @internal Emitted when menu value changes.
+   */
+  menuValueChange: EventEmitter<IcValueEventDetail>;
   /**
    * @internal Emitted when the retry button is clicked
    */
@@ -107,11 +101,18 @@ export declare class Menu {
   timeoutBlur: EventEmitter<{
     ev: FocusEvent;
   }>;
-  private handleClearListener;
-  private handleSubmitSearch;
-  private handleMenuChange;
-  private setNextOptionValue;
-  private setPreviousOptionValue;
+  /**
+   * @internal Emitted when the ungrouped options have been set.
+   */
+  ungroupedOptionsSet: EventEmitter<{
+    options: IcMenuOption[];
+  }>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidUpdate(): void;
+  componentDidRender(): void;
   /**
    * @internal If menu is opened with the mouse, emit menuStateChange custom event.
    */
@@ -126,6 +127,11 @@ export declare class Menu {
    * @internal Used to highlight the first option in the menu.
    */
   handleSetFirstOption(): Promise<void>;
+  private handleClearListener;
+  private handleSubmitSearch;
+  private handleMenuChange;
+  private setNextOptionValue;
+  private setPreviousOptionValue;
   private getParentEl;
   private arrowBehaviour;
   private setMenuOptions;
@@ -150,12 +156,6 @@ export declare class Menu {
   private loadUngroupedOptions;
   private setMenuScrollbar;
   private handleTimeoutBlur;
-  connectedCallback(): void;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  componentDidRender(): void;
-  componentDidUpdate(): void;
-  disconnectedCallback(): void;
   private optionContent;
   private displayOption;
   render(): any;

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

@@ -5,14 +5,7 @@ import { IcMenuItemVariants } from "./ic-menu-item.types";
  */
 export declare class MenuItem {
   el: HTMLIcMenuItemElement;
-  /**
-   * The variant of the menu item.
-   */
-  variant: IcMenuItemVariants;
-  /**
-   * The label to display in the menu item.
-   */
-  label: string;
+  toggleChecked: boolean;
   /**
    * The description displayed in the menu item, below the label.
    */
@@ -26,37 +19,41 @@ export declare class MenuItem {
    */
   href?: string;
   /**
-   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   * The human language of the linked URL.
    */
-  target?: string;
+  hreflang?: string;
   /**
-   * The relationship of the linked URL as space-separated link types.
+   * The label describing the keyboard shortcut for a menu item's action.
    */
-  rel?: string;
+  keyboardShortcut?: string;
   /**
-   * The human language of the linked URL.
+   * The label to display in the menu item.
    */
-  hreflang?: string;
+  label: string;
   /**
    * How much of the referrer to send when following the link.
    */
   referrerpolicy?: ReferrerPolicy;
   /**
-   * The label describing the keyboard shortcut for a menu item's action.
+   * The relationship of the linked URL as space-separated link types.
    */
-  keyboardShortcut?: string;
+  rel?: string;
   /**
    * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.
    */
   submenuTriggerFor?: string;
   /**
-   * @internal Emitted when item loses focus.
+   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
    */
-  childBlur: EventEmitter<void>;
+  target?: string;
   /**
-   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.
+   * The variant of the menu item.
    */
-  triggerPopoverMenuInstance: EventEmitter<void>;
+  variant: IcMenuItemVariants;
+  /**
+   * @internal Emitted when item loses focus.
+   */
+  childBlur: EventEmitter<void>;
   /**
    * @internal Emitted when the user clicks a menu item.
    */
@@ -64,11 +61,14 @@ export declare class MenuItem {
     label: string;
     hasSubMenu: boolean;
   }>;
-  toggleChecked: boolean;
-  handleHostClick(e: Event): void;
-  private handleClick;
+  /**
+   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.
+   */
+  triggerPopoverMenuInstance: EventEmitter<void>;
   componentWillLoad(): void;
   componentDidLoad(): void;
+  handleHostClick(e: Event): void;
+  private handleClick;
   private getMenuItemAriaLabel;
   render(): any;
 }

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

@@ -4,42 +4,44 @@ import { IcNavButtonModes } from "./ic-navigation-button.types";
  * @slot icon - Content will be placed to the left of the button label.
  */
 export declare class NavigationButton {
+  private buttonEl;
+  private inheritedAttributes;
   el: HTMLIcNavigationButtonElement;
+  initialAppearance: IcThemeForeground;
   /**
-   * The label info to display.
-   */
-  label: string;
-  /**
-   * The URL that the link points to. This will render the button as an "a" tag.
-   */
-  href?: string;
-  /**
-   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
-   */
-  target?: string;
-  /**
-   * The relationship of the linked URL as space-separated link types.
+   * The display mode.
    */
-  rel?: string;
+  mode: IcNavButtonModes;
   /**
    * If `true`, the user can save the linked URL instead of navigating to it.
    */
   download?: string | boolean;
+  /**
+   * The URL that the link points to. This will render the button as an "a" tag.
+   */
+  href?: string;
   /**
    * The human language of the linked URL.
    */
   hreflang?: string;
+  /**
+   * The label info to display.
+   */
+  label: string;
   /**
    * How much of the referrer to send when following the link.
    */
   referrerpolicy?: ReferrerPolicy;
   /**
-   * The display mode.
+   * The relationship of the linked URL as space-separated link types.
    */
-  mode: IcNavButtonModes;
-  initialAppearance: IcThemeForeground;
-  private buttonEl;
-  private inheritedAttributes;
+  rel?: string;
+  /**
+   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   */
+  target?: string;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   navBarMenuOpenHandler(): void;
   navBarMenuCloseHandler(): void;
   themeChangeHandler(ev: CustomEvent): void;
@@ -47,7 +49,5 @@ export declare class NavigationButton {
    * Sets focus on the native `button`.
    */
   setFocus(): Promise<void>;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
   render(): any;
 }