@ukic/web-components 2.1.0-beta.9 → 2.3.0

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

@@ -4,33 +4,33 @@ import { EventEmitter } from "../../stencil-public-runtime";
  * @slot buttons - Content will be rendered above version info and below navigation.
  */
 export declare class NavigationMenu {
+  private closeButton;
+  private hasButtons;
+  private hasNavigation;
+  private lastTabStop;
+  private navBarEl;
+  private navGroupFirst;
+  private navItemAboveButtons;
   el: HTMLIcNavigationMenuElement;
-  /**
-   * The version info to display.
-   */
-  version: string;
   /**
    * The status info to display.
    */
   status: string;
+  /**
+   * The version info to display.
+   */
+  version: string;
   /**
    * @internal - Emitted when the menu is closed.
    */
   icNavigationMenuClose: EventEmitter<void>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
   navItemClickHandler(): void;
   handleKeyDown(ev: KeyboardEvent): void;
-  private hasButtons;
-  private hasNavigation;
-  private navItemAboveButtons;
-  private navGroupFirst;
-  private lastTabStop;
-  private closeButton;
-  private navBarEl;
   private closeMenu;
   private focusCloseButton;
   private focusLastTabStop;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  componentWillRender(): void;
   render(): any;
 }

package/dist/types/components/ic-page-header/ic-page-header.d.ts

@@ -10,27 +10,31 @@ import { IcAlignment } from "../../utils/types";
  * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.
  */
 export declare class PageHeader {
+  private resizeObserver;
   el: HTMLIcPageHeaderElement;
+  actionContent: Node[];
+  areButtonsReversed: boolean;
+  deviceSize: number;
   /**
-   * The title to render on the page header.
+   * The alignment of the page header.
    */
-  heading?: string;
+  aligned?: IcAlignment;
   /**
-   * The subtitle to render on the page header.
+   * If `true`, a border will be displayed along the bottom of the page header.
    */
-  subheading?: string;
+  border?: boolean;
   /**
-   * The alignment of the page header.
+   * The title to render on the page header.
    */
-  aligned?: IcAlignment;
+  heading?: string;
   /**
-   * If `true`, the small styling will be applied to the page header.
+   * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.
    */
-  small?: boolean;
+  reverseOrder?: boolean;
   /**
-   * If `true`, a border will be displayed along the bottom of the page header.
+   * If `true`, the small styling will be applied to the page header.
    */
-  border?: boolean;
+  small?: boolean;
   /**
    * If `true`, the page header will be sticky at all breakpoints.
    */
@@ -40,18 +44,14 @@ export declare class PageHeader {
    */
   stickyDesktopOnly?: boolean;
   /**
-   * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.
+   * The subtitle to render on the page header.
    */
-  reverseOrder?: boolean;
-  deviceSize: number;
-  areButtonsReversed: boolean;
-  actionContent: Node[];
-  private resizeObserver;
+  subheading?: string;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   private resizeObserverCallback;
   private runResizeObserver;
   private applyReverseOrder;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

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

@@ -0,0 +1,82 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcThemeForeground } from "../../utils/types";
+import { IcPaginationTypes, IcChangeEventDetail } from "./ic-pagination.types";
+export declare class Pagination {
+  el: HTMLIcPaginationElement;
+  endEllipsis: boolean;
+  endItems: number[];
+  midItems: number[];
+  startEllipsis: boolean;
+  startItems: number[];
+  /**
+   * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
+   */
+  adjacentCount: number;
+  /**
+   * The appearance of the pagination, e.g. dark, light or the default.
+   */
+  appearance: IcThemeForeground;
+  /**
+   * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
+   */
+  boundaryCount: number;
+  /**
+   * The default page to display.
+   */
+  defaultPage: number;
+  /**
+   * If `true`, the pagination will not allow interaction.
+   */
+  disabled: boolean;
+  /**
+   * If `true`, the current page of the simple pagination will not be displayed.
+   */
+  hideCurrentPage: boolean;
+  /**
+   * If `true`, the first and last page buttons will not be displayed.
+   */
+  hideFirstAndLastPageButton: boolean;
+  /**
+   * The label for the pagination item (applicable when simple pagination is being used).
+   */
+  label: string;
+  /**
+   * The total number of pages.
+   */
+  pages: number;
+  watchNumberPagesHandler(): void;
+  /**
+   * The type of pagination to be used.
+   */
+  type: IcPaginationTypes;
+  /**
+   * The current page displayed by the pagination.
+   */
+  currentPage: number;
+  watchPageChangeHandler(): void;
+  /**
+   * Emitted when a page is selected.
+   */
+  icPageChange: EventEmitter<IcChangeEventDetail>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  paginationItemClickHandler(ev: CustomEvent): void;
+  /**
+   * Sets the currently displayed page.
+   */
+  setCurrentPage(page: number): Promise<void>;
+  private handleClickFirst;
+  private handleClickPrevious;
+  private handleClickNext;
+  private handleClickLast;
+  private firstButton;
+  private previousButton;
+  private nextButton;
+  private lastButton;
+  private renderStartEllipsis;
+  private renderEndEllipsis;
+  private renderStartItems;
+  private renderEndItems;
+  private renderMiddleItems;
+  render(): any;
+}

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

@@ -0,0 +1,4 @@
+export type IcPaginationTypes = "simple" | "complex";
+export interface IcChangeEventDetail {
+  value: number;
+}

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,62 @@
+export declare class PopoverMenu {
+  private anchorEl;
+  private ARIA_LABEL;
+  private backButton;
+  private currentFocus;
+  private firstRender;
+  private popoverMenuEls;
+  private popperInstance;
+  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;
+  disconnectedCallback(): 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-radio-group/ic-radio-group.d.ts

@@ -1,37 +1,39 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcOrientation } from "../../utils/types";
-import { IcValueEventDetail } from "../../interface";
+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;
   /**
-   * The label for the radio group to be displayed.
+   * If `true`, the disabled state will be set.
    */
-  label: string;
+  disabled: boolean;
   /**
-   * The name for the radio group to differentiate from other groups.
+   * The helper text that will be displayed for additional field guidance.
    */
-  name: string;
+  helperText: string;
   /**
-   * If `true`, the radio group will require a value.
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
    */
-  required: boolean;
+  hideLabel: boolean;
   /**
-   * 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.
+   * The label for the radio group to be displayed.
    */
-  orientation: IcOrientation;
+  label: string;
   /**
-   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+   * The name for the radio group to differentiate from other groups.
    */
-  hideLabel: boolean;
+  name: string;
   /**
-   * If `true`, the disabled state will be set.
+   * 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.
    */
-  disabled: boolean;
+  orientation: IcOrientation;
   /**
-   * The helper text that will be displayed for additional field guidance.
+   * If `true`, the radio group will require a value.
    */
-  helperText: string;
+  required: boolean;
   /**
    * If `true`, the small styling will be applied to the radio group.
    */
@@ -44,18 +46,15 @@ export declare class RadioGroup {
    * The validation text - e.g. 'error' | 'warning' | 'success'.
    */
   validationText: string;
-  /**
-   * The checked state.
-   */
-  checkedValue: string;
-  selectedChild: number;
   /**
    * Emitted when a user selects a radio.
    */
-  icChange: EventEmitter<IcValueEventDetail>;
+  icChange: EventEmitter<IcChangeEventDetail>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   selectHandler(event: CustomEvent<IcValueEventDetail>): void;
+  changeHandler(): void;
   private handleKeyDown;
   private getNextItemToSelect;
-  componentDidLoad(): void;
   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-option/ic-radio-option.d.ts

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