@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

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

@@ -1,151 +1,156 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions } from "../../utils/types";
-import { IcValueEventDetail } from "../../interface";
+import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcValueEventDetail } from "../../utils/types";
 import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 export declare class Select {
-  private nativeSelectElement;
-  private customSelectElement;
-  private searchableSelectElement;
-  private menu;
   private anchorEl;
+  private blurredBecauseButtonPressed;
+  private characterKeyPressTimer;
   private clearButton;
-  private inputId;
-  private menuId;
-  private ungroupedOptions;
-  private inheritedAttributes;
+  private customSelectElement;
   private debounceAria;
   private hasSetDefaultValue;
-  private initialOptionsEmpty;
-  private characterKeyPressTimer;
-  private timeoutTimer;
   private hasTimedOut;
-  private blurredBecauseButtonPressed;
+  private inheritedAttributes;
+  private initialOptionsEmpty;
+  private inputId;
+  private menu;
+  private menuId;
+  private nativeSelectElement;
   private retryButtonClick;
+  private searchableMenuItemSelected;
+  private searchableSelectElement;
+  private timeoutTimer;
+  private ungroupedOptions;
+  host: HTMLIcSelectElement;
+  ariaActiveDescendant: string;
+  clearButtonFocused: boolean;
+  debounceIcChange: number;
+  hiddenInputValue: string;
+  noOptions: IcMenuOption[];
+  open: boolean;
+  pressedCharacters: string;
+  searchableSelectInputValue: string;
   /**
-   * The label for the select.
-   */
-  label: string;
-  /**
-   * The possible selection options.
-   */
-  options?: IcMenuOption[];
-  /**
-   * If `true`, the select will require a value.
-   */
-  required?: boolean;
-  /**
-   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+   * @deprecated This prop should not be used anymore.
    */
-  hideLabel?: boolean;
+  charactersUntilSuggestions?: number;
   /**
    * If `true`, the disabled state will be set.
    */
   disabled?: boolean;
   /**
-   * If `true`, the readonly state will be set.
+   * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
    */
-  readonly?: boolean;
+  disableFilter?: boolean;
   /**
-   * The placeholder value to be displayed.
+   * The text displayed when there are no options in the option list.
    */
-  placeholder?: string;
+  emptyOptionListText: string;
+  /**
+   * If `true`, the select element will fill the width of the container.
+   */
+  fullWidth: boolean;
   /**
    * The helper text that will be displayed for additional field guidance.
    */
   helperText?: string;
   /**
-   * If `true`, the small styling will be applied to the select.
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
    */
-  small?: boolean;
+  hideLabel?: boolean;
   /**
-   * If `true`, the select element will fill the width of the container.
+   * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
    */
-  fullWidth: boolean;
+  includeDescriptionsInSearch?: boolean;
   /**
-   * The validation status - e.g. 'error' | 'warning' | 'success'.
+   * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
    */
-  validationStatus?: IcInformationStatusOrEmpty;
+  includeGroupTitlesInSearch?: boolean;
   /**
-   * The text to display as the validation message.
+   * The label for the select.
    */
-  validationText?: string;
+  label: string;
   /**
-   * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input.
+   * The message displayed when external loading times out.
    */
-  value?: string;
+  loadingErrorLabel?: string;
   /**
-   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+   * The message displayed whilst the options are being loaded externally.
    */
-  debounce?: number;
+  loadingLabel?: string;
   /**
    * The name of the control, which is submitted with the form data.
    */
   name?: string;
   /**
-   * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
+   * The placeholder value to be displayed.
    */
-  showClearButton?: boolean;
+  placeholder?: string;
   /**
-   * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
+   * If `true`, the readonly state will be set.
    */
-  searchable?: boolean;
+  readonly?: boolean;
   /**
-   * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
+   * If `true`, the select will require a value.
    */
-  includeDescriptionsInSearch?: boolean;
+  required?: boolean;
   /**
-   * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
+   * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
    */
-  includeGroupTitlesInSearch?: boolean;
+  searchable?: boolean;
   /**
    * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
    */
   searchMatchPosition?: IcSearchMatchPositions;
   /**
-   * @deprecated This prop should not be used anymore.
-   */
-  charactersUntilSuggestions?: number;
-  /**
-   * The text displayed when there are no options in the option list.
+   * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
    */
-  emptyOptionListText: string;
+  showClearButton?: boolean;
   /**
-   * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
+   * If `true`, the small styling will be applied to the select.
    */
-  disableFilter?: boolean;
+  small?: boolean;
   /**
    * If using external filtering, set a timeout for when loading takes too long.
    */
   timeout?: number;
   /**
-   * The message displayed whilst the options are being loaded externally.
+   * The validation status - e.g. 'error' | 'warning' | 'success'.
    */
-  loadingLabel?: string;
+  validationStatus?: IcInformationStatusOrEmpty;
   /**
-   * The message displayed when external loading times out.
+   * The text to display as the validation message.
    */
-  loadingErrorLabel?: string;
+  validationText?: string;
   /**
    * If `true`, the loading state will be triggered when fetching options asyncronously.
    */
   loading?: boolean;
-  open: boolean;
-  clearButtonFocused: boolean;
-  searchableSelectInputValue: string;
-  filteredOptions: IcMenuOption[];
-  ariaActiveDescendant: string;
-  noOptions: IcMenuOption[];
-  initialValue: string;
-  currDebounce: number;
-  currValue: string;
-  debounceIcChange: number;
-  pressedCharacters: string;
-  hiddenInputValue: string;
-  inputValueToFilter: string;
   loadingHandler(newValue: boolean): void;
+  /**
+   * The possible selection options.
+   */
+  options?: IcMenuOption[];
+  filteredOptions: IcMenuOption[];
   watchOptionsHandler(): void;
+  /**
+   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+   */
+  debounce?: number;
+  currDebounce: number;
   debounceChangedHandler(newValue: number): void;
+  /**
+   * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input.
+   */
+  value?: string;
+  initialValue: string;
+  inputValueToFilter: string;
+  currValue: string;
   valueChangedHandler(): void;
+  /**
+   * Emitted when the select loses focus.
+   */
+  icBlur: EventEmitter<void>;
   /**
    * Emitted when the value changes.
    */
@@ -159,23 +164,22 @@ export declare class Select {
    */
   icFocus: EventEmitter<void>;
   /**
-   * Emitted when the select loses focus.
+   * Emitted when a keyboard input occurred.
    */
-  icBlur: EventEmitter<void>;
+  icInput: EventEmitter<IcValueEventDetail>;
   /**
    * Emitted when an option is highlighted within the menu.
    * Highlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated.
    */
   icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
-  /**
-   * Emitted when a keyboard input occurred.
-   */
-  icInput: EventEmitter<IcValueEventDetail>;
   /**
    * Emitted when the 'retry loading' button is clicked for a searchable variant.
    */
   icRetryLoad: EventEmitter<IcValueEventDetail>;
-  host: HTMLIcSelectElement;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
   /**
    * Sets focus on the input box.
    */
@@ -184,7 +188,6 @@ export declare class Select {
   private updateOnChangeDebounce;
   private emitIcChange;
   private emitImmediateIcChange;
-  private isMenuEnabled;
   private setOptionsValuesFromLabels;
   private setUngroupedOptions;
   private setTextColor;
@@ -195,6 +198,7 @@ export declare class Select {
   private handleCustomSelectChange;
   private handleMenuChange;
   private handleMenuKeyPress;
+  private handleMenuValueChange;
   private handleFocusIndicatorDisplay;
   private handleMouseDown;
   private isExternalFiltering;
@@ -218,9 +222,5 @@ export declare class Select {
   private onBlur;
   private onTimeoutBlur;
   private handleFormReset;
-  componentWillLoad(): void;
-  componentDidRender(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

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

@@ -6,19 +6,30 @@ import { IcThemeForeground } from "../../utils/types";
  * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.
  */
 export declare class SideNavigation {
+  private ANIMATION_DURATION;
+  private IC_NAVIGATION_ITEM;
+  private resizeObserver;
+  private COLLAPSED_ICON_LABELS_END;
+  private COLLAPSED_ICON_LABELS_START;
   el: HTMLIcSideNavigationElement;
+  deviceSize: number;
+  deviceSizeAppTitle: number;
+  foregroundColor: IcThemeForeground;
+  hasSecondaryNavigation: boolean;
+  menuExpanded: boolean;
+  menuOpen: boolean;
   /**
    * The app title to be displayed. This is required, unless a slotted app title link is used.
    */
   appTitle: string;
   /**
-   * The status of the app to be displayed.
+   * If `true`, the icon and label will appear when side navigation is collapsed.
    */
-  status: string;
+  collapsedIconLabels: boolean;
   /**
-   * The version of the app to be displayed.
+   * If `true`, automatic parent wrapper styling will be disabled.
    */
-  version: string;
+  disableAutoParentStyling: boolean;
   /**
    * If `true`, the side navigation will load in an expanded state.
    */
@@ -28,29 +39,24 @@ export declare class SideNavigation {
    */
   href: string;
   /**
-   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
+   * @internal If `true`, side navigation will be contained by its parent element.
    */
-  static: boolean;
+  inline: boolean;
   /**
-   * If `true`, the icon and label will appear when side navigation is collapsed.
+   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
    */
-  collapsedIconLabels: boolean;
+  static: boolean;
   /**
-   * @internal If `true`, side navigation will be contained by its parent element.
+   * The status of the app to be displayed.
    */
-  inline: boolean;
+  status: string;
   /**
-   * If `true`, automatic parent wrapper styling will be disabled.
+   * The version of the app to be displayed.
    */
-  disableAutoParentStyling: boolean;
-  foregroundColor: IcThemeForeground;
-  menuOpen: boolean;
-  menuExpanded: boolean;
-  deviceSize: number;
-  deviceSizeAppTitle: number;
-  hasSecondaryNavigation: boolean;
-  private IC_NAVIGATION_ITEM;
-  private ANIMATION_DURATION;
+  version: string;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
   themeChangeHandler(ev: CustomEvent): void;
   private emitSideNavigationExpanded;
   private toggleMenu;
@@ -68,6 +74,7 @@ export declare class SideNavigation {
   private styleSlottedCollapsedIconLabels;
   private setExpandedButtonHeight;
   private styleSlottedIconLabels;
+  private transitionEndHandler;
   private animateCollapsedIconLabels;
   private paddingIconWidth;
   private displayTooltipWithExpandedLongLabel;
@@ -79,14 +86,10 @@ export declare class SideNavigation {
    */
   private setParentPaddingTop;
   private setParentPaddingLeft;
-  private resizeObserver;
   private resizeObserverCallback;
   private runResizeObserver;
   private setCollapsedIconLabels;
   private styleSlottedCollapsedIconLabel;
   private renderTopBar;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

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

@@ -1,18 +1,18 @@
 import { IcSkeletonVariants } from "./ic-skeleton.types";
 export declare class Skeleton {
   el: HTMLIcSkeletonElement;
-  /**
-   * The variant of the skeleton that will be displayed.
-   */
-  variant?: IcSkeletonVariants;
+  default: boolean;
+  hasChild: boolean;
+  heightOnly: boolean;
+  widthOnly: boolean;
   /**
    * If `true`, the skeleton will be set to the light variant.
    */
   light?: boolean;
-  hasChild: boolean;
-  default: boolean;
-  heightOnly: boolean;
-  widthOnly: boolean;
+  /**
+   * The variant of the skeleton that will be displayed.
+   */
+  variant?: IcSkeletonVariants;
   componentWillLoad(): void;
   render(): any;
 }

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

@@ -1 +1 @@
-export declare type IcSkeletonVariants = "rectangle" | "text" | "circle";
+export type IcSkeletonVariants = "rectangle" | "text" | "circle";

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

@@ -1,25 +1,25 @@
 import { IcStatusTagStatuses, IcStatusTagAppearance } from "./ic-status-tag.types";
 export declare class StatusTag {
   /**
-   * The content rendered within the status tag.
-   */
-  label: string;
-  /**
-   * The colour of the status tag.
+   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.
    */
-  status?: IcStatusTagStatuses;
+  announced?: boolean;
   /**
    * The emphasis of the status tag.
    */
   appearance?: IcStatusTagAppearance;
+  /**
+   * The content rendered within the status tag.
+   */
+  label: string;
   /**
    * 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.
+   * The colour of the status tag.
    */
-  announced?: boolean;
+  status?: IcStatusTagStatuses;
   componentDidLoad(): void;
   render(): any;
 }

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

@@ -1,2 +1,2 @@
-export declare type IcStatusTagStatuses = "neutral" | "success" | "warning" | "danger";
-export declare type IcStatusTagAppearance = "filled" | "outlined";
+export type IcStatusTagStatuses = "neutral" | "success" | "warning" | "danger";
+export type IcStatusTagAppearance = "filled" | "outlined";

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

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

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

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

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

@@ -1,15 +1,21 @@
 import { IcStepperAlignment } from "./ic-stepper.types";
 import { IcStepTypes, IcStepVariants } from "../ic-step/ic-step.types";
 export declare class Stepper {
+  private resizeObserver;
+  private steps;
+  private stepsWithStepTitles;
   el: HTMLIcStepperElement;
+  alignedFullWidth: boolean;
+  autoSetStepTitles: boolean;
+  lastStepWidth: number;
+  noOfResizes?: number;
+  stepperWidth: number;
+  stepTypes: IcStepTypes[];
+  variantOverride?: boolean;
   /**
    * 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.
    */
@@ -18,16 +24,13 @@ export declare class Stepper {
    * 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;
+  /**
+   * The variant of the stepper.
+   */
+  variant?: IcStepVariants;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   private getChildren;
   private checkStepTitles;
   private setStepTypes;
@@ -36,8 +39,5 @@ export declare class Stepper {
   private overrideVariant;
   private resizeObserverCallback;
   private runResizeObserver;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

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

@@ -1 +1 @@
-export declare type IcStepperAlignment = "left" | "full-width";
+export type IcStepperAlignment = "left" | "full-width";