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

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

@@ -2,7 +2,7 @@ import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrde
 import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "../ic-pagination/ic-pagination.types";
 export declare class DataTable {
   private SORT_ICONS;
-  el: HTMLIcUnstableDataTableElement;
+  el: HTMLIcDataTableElement;
   fromRow: number;
   previousRowsPerPage: number;
   rowsPerPage: number;

package/dist/types/components/ic-data-table/story-data.d.ts

@@ -0,0 +1,105 @@
+import { IcDataTableColumnObject } from "./ic-data-table.types";
+export declare const COLS: IcDataTableColumnObject[];
+export declare const COLS_ALIGNMENT: IcDataTableColumnObject[];
+export declare const DATA: {
+  firstName: string;
+  lastName: string;
+  age: number;
+  jobTitle: string;
+  address: string;
+}[];
+export declare const DATA_CELL_ALIGNMENT: ({
+  firstName: {
+    data: string;
+    cellAlignment: {
+      horizontal: string;
+      vertical: string;
+    };
+    emphasis: string;
+  };
+  lastName: string;
+  age: number;
+  jobTitle: string;
+  address: string;
+} | {
+  firstName: string;
+  lastName: string;
+  age: number;
+  jobTitle: string;
+  address: string;
+})[];
+export declare const ROW_ALIGNMENT: ({
+  header: {
+    title: string;
+    rowAlignment: string;
+    emphasis: string;
+  };
+  firstName: string;
+  lastName: string;
+  age: number;
+  jobTitle: string;
+  address: string;
+} | {
+  header: {
+    title: string;
+    rowAlignment?: undefined;
+    emphasis?: undefined;
+  };
+  firstName: string;
+  lastName: string;
+  age: number;
+  jobTitle: string;
+  address: string;
+})[];
+export declare const LONG_COLS: IcDataTableColumnObject[];
+export declare const LONG_DATA: {
+  employeeNumber: number;
+  name: string;
+  age: number;
+  jobTitle: string;
+  address: string;
+}[];
+export declare const ROW_HEADER_COLS: IcDataTableColumnObject[];
+export declare const ROW_HEADER_DATA: {
+  firstName: string;
+  lastName: string;
+  age: number;
+  jobTitle: string;
+  address: string;
+  header: {
+    title: string;
+  };
+}[];
+export declare const COLS_ELEMENTS: IcDataTableColumnObject[];
+export declare const DATA_ELEMENTS: ({
+  firstName: {
+    data: string;
+    href: string;
+  };
+  lastName: string;
+  age: number;
+  jobTitle: string;
+  address: string;
+  actions: string;
+} | {
+  firstName: string;
+  lastName: string;
+  age: number;
+  jobTitle: string;
+  address: string;
+  actions: string;
+})[];
+export declare const createDataTableElement: (caption: string, columns?: IcDataTableColumnObject[], data?: object[]) => HTMLIcDataTableElement;
+export declare const Basic: () => HTMLIcDataTableElement;
+export declare const Embedded: () => HTMLIcDataTableElement;
+export declare const Dense: () => HTMLElement;
+export declare const Spacious: () => HTMLElement;
+export declare const Scrollable: () => HTMLElement;
+export declare const RowHeaders: () => HTMLIcDataTableElement;
+export declare const Sort: () => HTMLIcDataTableElement;
+export declare const SortOptions: () => HTMLIcDataTableElement;
+export declare const Pagination: () => HTMLIcDataTableElement;
+export declare const ColumnOverrides: () => HTMLIcDataTableElement;
+export declare const RowOverrides: () => HTMLIcDataTableElement;
+export declare const CellOverrides: () => HTMLIcDataTableElement;
+export declare const LinksHTMLElements: () => HTMLIcDataTableElement;

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

@@ -1,4 +1,9 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+/**
+ * @slot dialog-controls - Content will be place at the bottom of the dialog.
+ * @slot heading - Content will be placed at the top of the dialog.
+ * @slot label - Content will be placed above the dialog heading.
+ */
 export declare class Dialog {
   private DATA_OVERFLOW;
   private DATA_GETS_FOCUS;
@@ -18,11 +23,6 @@ export declare class Dialog {
   el: HTMLIcDialogElement;
   dialogRendered: boolean;
   fadeIn: boolean;
-  /**
-   * @slot dialog-controls - Content will be place at the bottom of the dialog.
-   * @slot heading - Content will be placed at the top of the dialog.
-   * @slot label - Content will be placed above the dialog heading.
-   */
   /**
    * If a status is set, sets the heading for the displayed alert.
    */

package/dist/types/components/ic-empty-state/ic-empty-state.d.ts

@@ -0,0 +1,35 @@
+import { IcEmptyStateAlignment } from "./ic-empty-state.types";
+import { IcSizes } from "../../utils/types";
+/**
+ * @slot image - Content is placed at the top above all other content.
+ * @slot actions - Content is placed at the bottom below all other content.
+ */
+export declare class EmptyState {
+  el: HTMLIcEmptyStateElement;
+  /**
+   * The alignment of the empty state container.
+   */
+  aligned?: IcEmptyStateAlignment;
+  /**
+   * The body text rendered in the empty state container.
+   */
+  body?: string;
+  /**
+   * The number of lines of body text to display before truncating.
+   */
+  bodyMaxLines?: number;
+  /**
+   * The title rendered in the empty state container.
+   */
+  heading: string;
+  /**
+   * The size of the image or icon used in the image slot.
+   */
+  imageSize?: IcSizes;
+  /**
+   * The subtitle rendered in the empty state container.
+   */
+  subheading?: string;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/ic-empty-state/ic-empty-state.types.d.ts

@@ -0,0 +1 @@
+export type IcEmptyStateAlignment = "left" | "center" | "right";

package/dist/types/components/ic-empty-state/test/a11y/ic-empty-state.test.a11y.d.ts

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

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

@@ -43,6 +43,10 @@ export declare class Menu {
    * The label for the input element.
    */
   inputLabel: string;
+  /**
+   * The custom name for the label field for IcMenuOption.
+   */
+  labelField: string;
   /**
    * The ID of the menu.
    */
@@ -73,6 +77,10 @@ export declare class Menu {
    */
   value: string;
   watchValueHandler(): void;
+  /**
+   * The custom name for the value field for IcMenuOption.
+   */
+  valueField: string;
   /**
    * @internal Emitted when key is pressed while menu is open
    */

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

@@ -42,6 +42,7 @@ export declare class NavigationButton {
   target?: string;
   componentWillLoad(): void;
   componentDidLoad(): void;
+  componentWillRender(): void;
   navBarMenuOpenHandler(): void;
   navBarMenuCloseHandler(): void;
   themeChangeHandler(ev: CustomEvent): void;

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

@@ -3,7 +3,9 @@ export declare class PopoverMenu {
   private ARIA_LABEL;
   private backButton;
   private currentFocus;
+  private firstRender;
   private popoverMenuEls;
+  private popperInstance;
   host: HTMLIcPopoverMenuElement;
   openingFromChild: boolean;
   openingFromParent: boolean;
@@ -32,6 +34,7 @@ export declare class PopoverMenu {
    */
   open: boolean;
   watchOpenHandler(): void;
+  disconnectedCallback(): void;
   componentDidLoad(): void;
   componentWillRender(): void;
   componentDidRender(): void;

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

@@ -91,6 +91,10 @@ export declare class SearchBar {
    * The label for the search bar.
    */
   label: string;
+  /**
+   * The custom name for the label field to correspond with the IcMenuOption type.
+   */
+  labelField?: string;
   /**
    * Trigger loading state when fetching options asyncronously
    */
@@ -135,6 +139,10 @@ export declare class SearchBar {
    * If using external filtering, set a timeout for when loading takes too long.
    */
   timeout?: number;
+  /**
+   * The custom name for the value field to correspond with the IcMenuOption type.
+   */
+  valueField?: string;
   loadingHandler(newValue: boolean): void;
   filteredOptions: IcMenuOption[];
   filteredOptionsHandler(newOptions: IcMenuOption[]): void;

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

@@ -132,6 +132,7 @@ export declare class Select {
    */
   options?: IcMenuOption[];
   filteredOptions: IcMenuOption[];
+  uniqueOptions: IcMenuOption[];
   watchOptionsHandler(): void;
   /**
    * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
@@ -188,6 +189,15 @@ export declare class Select {
   private updateOnChangeDebounce;
   private emitIcChange;
   private emitImmediateIcChange;
+  /**
+   * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
+   * @param options array of IcMenuOptions
+   * @returns a new options object, with all entries possessing a duplicate 'value' field removed
+   */
+  private deduplicateOptions;
+  /**
+   * Loop through options array and for all options with no value, infer it from the label
+   */
   private setOptionsValuesFromLabels;
   private setUngroupedOptions;
   private setTextColor;
@@ -211,6 +221,10 @@ export declare class Select {
   private handleClearButtonFocus;
   private handleClearButtonBlur;
   private handleFilter;
+  /**
+   * Put the select component into loading state.
+   * Replace options with the loading message. If timeout is enabled, set the timeout and once passed, replace options with the loading error message
+   */
   private triggerLoading;
   private getValueFromLabel;
   private handleSearchableSelectInput;

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

@@ -1,11 +1,15 @@
 import { IcTooltipPlacements } from "./ic-tooltip.types";
 export declare class Tooltip {
   private arrow;
+  private ariaDescribedBy;
   private delayedHideEvents;
+  private dialogOverflow;
+  private icDialogEl;
   private instantHideEvents;
   private mouseOverTool;
   private persistTooltip;
   private popperInstance;
+  private onDialog;
   private screenReaderOnlyStyles;
   private showEvents;
   private toolTip;
@@ -40,6 +44,12 @@ export declare class Tooltip {
   private handleKeyDown;
   private manageEventListeners;
   componentDidLoad(): void;
+  /**
+   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
+   * @param show Whether to show or hide the tooltip
+   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover
+   */
+  private getTooltipTranslate;
   /**
    * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
    * @param show Whether to show or hide the tooltip

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

@@ -16,7 +16,8 @@ export declare class Typography {
    */
   applyVerticalMargins?: boolean;
   /**
-   * If `true`, the typography will have a bold font weight. Note: This will only take affect on h3, body and code-large variants.
+   * If `true`, the typography will have a bold font weight.
+   * Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).
    */
   bold?: boolean;
   /**