@ukic/canary-web-components 2.0.0-canary.0

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

@@ -0,0 +1,103 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcThemeForeground } from "../../interface";
+import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "../ic-pagination/ic-pagination.types";
+export declare class PaginationBar {
+  private PAGINATION;
+  private TEXT_FIELD;
+  private TOOLTIP;
+  private PAGE_INPUT_FIELD_ID;
+  private INVALID_PAGE_ERROR;
+  private NAN_ERROR;
+  private resizeObserver;
+  private paginationBarEl;
+  el: HTMLIcPaginationBarElement;
+  currentPage: number;
+  inputError: string;
+  itemsPerPage: string;
+  lowerBound: number;
+  paginationWidth: number;
+  paginationWrapped: boolean;
+  totalPages: number;
+  upperBound: number;
+  /**
+   * Sets the alignment of the items in the pagination bar.
+   */
+  alignment?: IcPaginationAlignmentOptions;
+  /**
+   * Sets the styling for the items in the pagination bar.
+   */
+  appearance?: IcThemeForeground;
+  /**
+   * The label which will be used in place of 'items' if paginationType is data. Should be capitalised.
+   */
+  itemLabel?: string;
+  /**
+   * The options which will be displayed for 'items per page' select input. Set a maximum of 4 options including a required 'All' option with value equal to total number of items.
+   */
+  itemsPerPageOptions?: {
+    label: string;
+    value: string;
+  }[];
+  /**
+   * Whether the displayed pagination is simple or complex.
+   */
+  paginationControl?: IcPaginationControlTypes;
+  /**
+   * Whether total number of items and current item range or total number of pages and current page is displayed.
+   */
+  paginationType?: IcPaginationTypes;
+  /**
+   * The label which will be used in place of 'Page' if paginationType is page. Should be capitalised.
+   */
+  pageLabel?: string;
+  /**
+   * If `true`, the 'go to page' control should be displayed.
+   */
+  showGoToPageControl?: boolean;
+  /**
+   * If `true`, the number of total items and current item range or number of total pages and current page should be displayed.
+   */
+  showItemsPerPage?: boolean;
+  /**
+   * If `true`, the select input to control 'items per page' should be displayed.
+   */
+  showItemsPerPageControl?: boolean;
+  /**
+   * Total number of items to be displayed across all pages.
+   */
+  totalItems: number;
+  /**
+   * Emitted when a page is navigated to via the 'go to' input.
+   */
+  icPageChange: EventEmitter<{
+    value: number;
+  }>;
+  /**
+   * Emitted when the items per page option is changed.
+   */
+  icItemsPerPageChange: EventEmitter<{
+    value: number;
+  }>;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  pageChangeHandler(ev: CustomEvent): void;
+  private changeItemsPerPage;
+  private changePage;
+  private goToPage;
+  private handleBlur;
+  private handleFocus;
+  private handleInputChange;
+  private handleKeydown;
+  private handleKeyUp;
+  private paginationShouldWrap;
+  private resizeObserverCallback;
+  private runResizeObserver;
+  private setDefaultItemsPerPage;
+  private setDefaultItemsPerPageOptions;
+  private setGoToPageInputStyles;
+  private setNumberPages;
+  private setUpperBound;
+  private trimItemsPerPageOptions;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,47 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcPaginationItemType } from "./ic-pagination-item.types";
+import { IcThemeForeground } from "../../utils/types";
+export declare class PaginationItem {
+  el: HTMLIcPaginationItemElement;
+  /**
+   * The appearance of the pagination, e.g. dark, light or the default.
+   */
+  appearance: IcThemeForeground;
+  /**
+   * If true the aria-label will be set to `Page X of Y`, where X is the current page and Y is the page count.
+   */
+  ariaOverride: boolean;
+  /**
+   * If `true`, the pagination item will be disabled.
+   */
+  disabled: boolean;
+  /**
+   * The label for the pagination item (applicable when simple pagination is being used).
+   */
+  label: string;
+  /**
+   * The current page number.
+   */
+  page: number | null;
+  /**
+   * The total number of pages.
+   */
+  pages: number;
+  /**
+   * If `true`, the pagination item will be selected.
+   */
+  selected: boolean;
+  /**
+   * The type of pagination item - 'page' or 'ellipsis'.
+   */
+  type: IcPaginationItemType;
+  /**
+   * @internal - Emitted when a pagination item is clicked.
+   */
+  paginationItemClick: EventEmitter<{
+    page: number;
+  }>;
+  componentWillLoad(): void;
+  private handleClick;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export type IcPaginationItemType = "page" | "ellipsis" | "simple-current";

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

@@ -0,0 +1,59 @@
+export declare class PopoverMenu {
+  private anchorEl;
+  private ARIA_LABEL;
+  private backButton;
+  private currentFocus;
+  private popoverMenuEls;
+  host: HTMLIcPopoverMenuElement;
+  openingFromChild: boolean;
+  openingFromParent: boolean;
+  /**
+   * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.
+   */
+  anchor: string;
+  /**
+   * @internal The parent popover menu of a child popover menu.
+   */
+  parentLabel?: string;
+  /**
+   * @internal The parent popover menu of a child popover menu.
+   */
+  parentPopover?: HTMLIcPopoverMenuElement;
+  /**
+   * The unique identifier for a popover submenu.
+   */
+  submenuId?: string;
+  /**
+   * @internal The level of menu being displayed.
+   */
+  submenuLevel: number;
+  /**
+   * If `true`, the popover menu will be displayed.
+   */
+  open: boolean;
+  watchOpenHandler(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  componentDidRender(): void;
+  handleMenuItemClick(ev: CustomEvent): void;
+  handleSubmenuChange(ev: Event): void;
+  handleClick(ev: Event): void;
+  handleKeyDown(ev: KeyboardEvent): void;
+  /**
+   * @internal Opens the menu from the child menu.
+   */
+  openFromChild(): Promise<void>;
+  /**
+   * @internal Opens the menu from the parent menu.
+   */
+  openFromParent(): Promise<void>;
+  private setButtonFocus;
+  private findAnchorEl;
+  private isNotPopoverMenuEl;
+  private closeMenu;
+  private getNextItemToSelect;
+  private addMenuItems;
+  private getMenuAriaLabel;
+  private handleBackButtonClick;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,60 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcInformationStatusOrEmpty, IcOrientation, IcValueEventDetail } from "../../utils/types";
+import { IcChangeEventDetail } from "./ic-radio-group.types";
+export declare class RadioGroup {
+  private radioOptions;
+  host: HTMLIcRadioGroupElement;
+  checkedValue: string;
+  selectedChild: number;
+  /**
+   * If `true`, the disabled state will be set.
+   */
+  disabled: boolean;
+  /**
+   * The helper text that will be displayed for additional field guidance.
+   */
+  helperText: string;
+  /**
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+   */
+  hideLabel: boolean;
+  /**
+   * The label for the radio group to be displayed.
+   */
+  label: string;
+  /**
+   * The name for the radio group to differentiate from other groups.
+   */
+  name: string;
+  /**
+   * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.
+   */
+  orientation: IcOrientation;
+  /**
+   * If `true`, the radio group will require a value.
+   */
+  required: boolean;
+  /**
+   * If `true`, the small styling will be applied to the radio group.
+   */
+  small: boolean;
+  /**
+   * The validation status - e.g. 'error' | 'warning' | 'success'.
+   */
+  validationStatus: IcInformationStatusOrEmpty;
+  /**
+   * The validation text - e.g. 'error' | 'warning' | 'success'.
+   */
+  validationText: string;
+  /**
+   * Emitted when a user selects a radio.
+   */
+  icChange: EventEmitter<IcChangeEventDetail>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  selectHandler(event: CustomEvent<IcValueEventDetail>): void;
+  changeHandler(): void;
+  private handleKeyDown;
+  private getNextItemToSelect;
+  render(): any;
+}

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

@@ -0,0 +1,7 @@
+export interface IcChangeEventDetail {
+  value: string;
+  selectedOption: {
+    radio: HTMLIcRadioOptionElement;
+    textFieldValue?: string;
+  };
+}

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

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

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

@@ -0,0 +1,70 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcAdditionalFieldTypes, IcValueEventDetail } from "../../utils/types";
+export declare class RadioOption {
+  private defaultRadioValue;
+  private hasAdditionalField;
+  private radioElement;
+  private skipFocus;
+  host: HTMLIcRadioOptionElement;
+  /**
+   * The style of additionalField that will be displayed if used.
+   */
+  additionalFieldDisplay: IcAdditionalFieldTypes;
+  /**
+   * If `true`, the disabled state will be set.
+   */
+  disabled?: boolean;
+  /**
+   * The text to be displayed when dynamic.
+   */
+  dynamicText: string;
+  /**
+   * The group label for the radio option.
+   */
+  groupLabel: string;
+  /**
+   * The label for the radio option.
+   */
+  label?: string;
+  /**
+   * The name for the radio option.
+   */
+  name: string;
+  /**
+   * The value for the radio option.
+   */
+  value: string;
+  /**
+   * If `true`, the radio option will be displayed in a selected state.
+   */
+  selected?: boolean;
+  initiallySelected: boolean;
+  watchSelectedHandler(): void;
+  /**
+   * Emitted when the radio option is selected.
+   */
+  icCheck: EventEmitter<IcValueEventDetail>;
+  /**
+   * @deprecated This event should not be used anymore. Use icCheck instead.
+   */
+  radioOptionSelect: EventEmitter<IcValueEventDetail>;
+  /**
+   * Emitted when the radio option is selected or deselected.
+   */
+  icSelectedChange: EventEmitter<void>;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  textfieldValueHandler(event: CustomEvent<{
+    value: string;
+  }>): void;
+  /**
+   * Sets focus on the radio option.
+   */
+  setFocus(): Promise<void>;
+  private handleClick;
+  private swallowClick;
+  private handleFormReset;
+  render(): any;
+}

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

@@ -0,0 +1,243 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcAutocompleteTypes, IcAutocorrectStates, IcMenuOption } from "../../utils/types";
+import { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./ic-search-bar.types";
+import { IcValueEventDetail, IcBlurEventDetail } from "../../utils/types";
+import { IcMenuChangeEventDetail, IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
+export declare class SearchBar {
+  private anchorEl;
+  private assistiveHintEl;
+  private debounceAriaLive;
+  private hasTimedOut;
+  private inputEl;
+  private inputId;
+  private menu;
+  private menuCloseFromMenuChangeEvent;
+  private menuId;
+  private preLoad;
+  private preventSubmit;
+  private prevNoOption;
+  private retryButtonClick;
+  private retryViaKeyPress;
+  private timeoutTimer;
+  private truncateValue;
+  private searchSubmitButton;
+  el: HTMLIcSearchBarElement;
+  ariaActiveDescendant: string;
+  clearButtonFocused: boolean;
+  highlightedValue: string;
+  open: boolean;
+  searchSubmitFocused: boolean;
+  showClearButton: boolean;
+  /**
+   * 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;
+  /**
+   * The state of autocompletion the browser can apply on the text value.
+   */
+  autocomplete?: IcAutocompleteTypes;
+  /**
+   * The state of autocorrection the browser can apply when the user is entering/editing the text value.
+   */
+  autocorrect?: IcAutocorrectStates;
+  /**
+   * If `true`, the form control will have input focus when the page loads.
+   */
+  autofocus: boolean;
+  /**
+   * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.
+   */
+  charactersUntilSuggestion: number;
+  /**
+   * If `true`, the disabled state will be set.
+   */
+  disabled?: 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.
+   */
+  disableFilter?: boolean;
+  /**
+   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+   */
+  debounce?: number;
+  /**
+   * The text displayed when there are no options in the option list.
+   */
+  emptyOptionListText: string;
+  /**
+   * If `true`, the search bar will be focused when component loaded.
+   */
+  focusOnLoad?: boolean;
+  /**
+   * Specify whether the search bar fills the full width of the container.
+   * If `true`, this overrides the --input-width CSS variable.
+   */
+  fullWidth?: boolean;
+  /**
+   * The helper text that will be displayed for additional field guidance.
+   */
+  helperText?: string;
+  /**
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+   */
+  hideLabel?: boolean;
+  /**
+   * The hint text for the hidden assistive description element.
+   */
+  hintText?: string;
+  /**
+   * The label for the search bar.
+   */
+  label: string;
+  /**
+   * Trigger loading state when fetching options asyncronously
+   */
+  loading?: boolean;
+  /**
+   * Change the message displayed when external loading times out.
+   */
+  loadingErrorLabel?: string;
+  /**
+   * Change the message displayed whilst the options are being loaded externally.
+   */
+  loadingLabel?: string;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: string;
+  /**
+   * The placeholder value to display.
+   */
+  placeholder?: string;
+  /**
+   * If `true`, the readonly state will be set.
+   */
+  readonly?: boolean;
+  /**
+   * If `true`, the search bar will require a value.
+   */
+  required?: boolean;
+  /**
+   * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
+   */
+  searchMode?: IcSearchBarSearchModes;
+  /**
+   * If `true`, the small styling will be applied to the search bar.
+   */
+  small?: boolean;
+  /**
+   * If `true`, the value of the search will have its spelling and grammar checked.
+   */
+  spellcheck: boolean;
+  /**
+   * If using external filtering, set a timeout for when loading takes too long.
+   */
+  timeout?: number;
+  loadingHandler(newValue: boolean): void;
+  filteredOptions: IcMenuOption[];
+  filteredOptionsHandler(newOptions: IcMenuOption[]): void;
+  /**
+   * The suggested search options.
+   */
+  options?: IcMenuOption[];
+  watchOptionsHandler(newOptions: IcMenuOption[]): void;
+  /**
+   * The value of the search input.
+   */
+  value: string;
+  watchValueHandler(newValue: string): void;
+  /**
+   * Emitted when the value has changed.
+   */
+  icChange: EventEmitter<IcValueEventDetail>;
+  /**
+   * Emitted when value is cleared with clear button
+   */
+  icClear: EventEmitter<void>;
+  private handleClear;
+  /**
+   * Emitted when a keyboard input occurred.
+   */
+  icInput: EventEmitter<IcValueEventDetail>;
+  private onInput;
+  /**
+   * @deprecated This event should not be used anymore. Use icSearchBarBlur instead.
+   */
+  icInputBlur: EventEmitter<IcSearchBarBlurEventDetail>;
+  private onInputBlur;
+  /**
+   * @deprecated This event should not be used anymore. Use icSearchBarFocus instead.
+   */
+  icInputFocus: EventEmitter<IcValueEventDetail>;
+  private onInputFocus;
+  /**
+   * Emitted when option is highlighted within the menu
+   */
+  icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
+  /**
+   * Emitted when the state of the menu changes (i.e. open or close)
+   */
+  icMenuChange: EventEmitter<IcMenuChangeEventDetail>;
+  /**
+   * @internal - Emitted when blur is invoked from clear button
+   */
+  icClearBlur: EventEmitter<IcBlurEventDetail>;
+  private handleClearBlur;
+  /**
+   * Emitted when the 'retry loading' button is clicked
+   */
+  icRetryLoad: EventEmitter<IcValueEventDetail>;
+  /**
+   * Emitted when the search value has been submitted
+   */
+  icSubmitSearch: EventEmitter<IcValueEventDetail>;
+  /**
+   * @internal - Emitted when blur is invoked from search submit button
+   */
+  icSubmitSearchBlur: EventEmitter<IcBlurEventDetail>;
+  private handleSubmitSearchBlur;
+  /**
+   * Emitted when blur is invoked from ic-search-bar
+   */
+  icSearchBarBlur: EventEmitter<IcSearchBarBlurEventDetail>;
+  /**
+   * Emitted when focus is invoked from ic-search-bar
+   */
+  icSearchBarFocus: EventEmitter<void>;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  handleKeyDown(ev: CustomEvent): void;
+  handleKeyUp(ev: KeyboardEvent): void;
+  /**
+   * Sets focus on the native `input`.
+   */
+  setFocus(): Promise<void>;
+  private handleMouseDown;
+  private handleSubmitSearchFocus;
+  private handleSubmitSearch;
+  private debounceAriaLiveUpdate;
+  private handleSubmitSearchKeyDown;
+  private handleRetry;
+  private triggerLoading;
+  private handleOptionSelect;
+  private handleMenuOptionHighlight;
+  private handleMenuChange;
+  private setMenuChange;
+  private handleHostFocus;
+  private handleHostBlur;
+  private handleShowClearButton;
+  private handleFocusClearButton;
+  private handleMenuCloseFromMenuChange;
+  private handleTruncateValue;
+  private renderAssistiveHintEl;
+  private updateSearchResultAriaLive;
+  private hasOptionsOrFilterDisabled;
+  private hadNoOptions;
+  private isSubmitDisabled;
+  private highlightFirstOptionAfterNoResults;
+  render(): any;
+}

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

@@ -0,0 +1,5 @@
+import { IcValueEventDetail, IcRelatedTarget } from "../../utils/types";
+export interface IcSearchBarBlurEventDetail extends IcValueEventDetail {
+  relatedTarget: IcRelatedTarget;
+}
+export type IcSearchBarSearchModes = "navigation" | "query";

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

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

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

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