@ukic/canary-web-components 3.0.0-canary.19 → 3.0.0-canary.20

package/dist/types/components/ic-date-picker/ic-date-picker.stories.d.ts

@@ -29,31 +29,31 @@ export namespace MaxWidthExample {
     let height_2: string;
     export { height_2 as height };
 }
-export namespace DisabledExample {
-    export function render_3(): HTMLIcDatePickerElement;
+export namespace CustomHelperTextExample {
+    export function render_3(): HTMLElement;
     export { render_3 as render };
     let name_3: string;
     export { name_3 as name };
     let height_3: string;
     export { height_3 as height };
 }
-export namespace DateFormatsExample {
-    export function render_4(): HTMLElement;
+export namespace DisabledExample {
+    export function render_4(): HTMLIcDatePickerElement;
     export { render_4 as render };
     let name_4: string;
     export { name_4 as name };
     let height_4: string;
     export { height_4 as height };
 }
-export namespace ValueExample {
-    export function render_5(): HTMLIcDatePickerElement;
+export namespace DateFormatsExample {
+    export function render_5(): HTMLElement;
     export { render_5 as render };
     let name_5: string;
     export { name_5 as name };
     let height_5: string;
     export { height_5 as height };
 }
-export namespace OpenAtDate {
+export namespace ValueExample {
     export function render_6(): HTMLIcDatePickerElement;
     export { render_6 as render };
     let name_6: string;
@@ -61,7 +61,7 @@ export namespace OpenAtDate {
     let height_6: string;
     export { height_6 as height };
 }
-export namespace StartOfWeek {
+export namespace OpenAtDate {
     export function render_7(): HTMLIcDatePickerElement;
     export { render_7 as render };
     let name_7: string;
@@ -69,7 +69,7 @@ export namespace StartOfWeek {
     let height_7: string;
     export { height_7 as height };
 }
-export namespace DisableDaysOfWeek {
+export namespace StartOfWeek {
     export function render_8(): HTMLIcDatePickerElement;
     export { render_8 as render };
     let name_8: string;
@@ -77,7 +77,7 @@ export namespace DisableDaysOfWeek {
     let height_8: string;
     export { height_8 as height };
 }
-export namespace MinMax {
+export namespace DisableDaysOfWeek {
     export function render_9(): HTMLIcDatePickerElement;
     export { render_9 as render };
     let name_9: string;
@@ -85,7 +85,7 @@ export namespace MinMax {
     let height_9: string;
     export { height_9 as height };
 }
-export namespace DisablePastExample {
+export namespace MinMax {
     export function render_10(): HTMLIcDatePickerElement;
     export { render_10 as render };
     let name_10: string;
@@ -93,7 +93,7 @@ export namespace DisablePastExample {
     let height_10: string;
     export { height_10 as height };
 }
-export namespace DisableFutureExample {
+export namespace DisablePastExample {
     export function render_11(): HTMLIcDatePickerElement;
     export { render_11 as render };
     let name_11: string;
@@ -101,7 +101,7 @@ export namespace DisableFutureExample {
     let height_11: string;
     export { height_11 as height };
 }
-export namespace DaysOutsideMonthHidden {
+export namespace DisableFutureExample {
     export function render_12(): HTMLIcDatePickerElement;
     export { render_12 as render };
     let name_12: string;
@@ -109,7 +109,7 @@ export namespace DaysOutsideMonthHidden {
     let height_12: string;
     export { height_12 as height };
 }
-export namespace ButtonsHidden {
+export namespace DaysOutsideMonthHidden {
     export function render_13(): HTMLIcDatePickerElement;
     export { render_13 as render };
     let name_13: string;
@@ -117,7 +117,7 @@ export namespace ButtonsHidden {
     let height_13: string;
     export { height_13 as height };
 }
-export namespace JavascriptDates {
+export namespace ButtonsHidden {
     export function render_14(): HTMLIcDatePickerElement;
     export { render_14 as render };
     let name_14: string;
@@ -125,15 +125,15 @@ export namespace JavascriptDates {
     let height_14: string;
     export { height_14 as height };
 }
-export namespace IcChangeEvent {
-    export function render_15(): HTMLElement;
+export namespace JavascriptDates {
+    export function render_15(): HTMLIcDatePickerElement;
     export { render_15 as render };
     let name_15: string;
     export { name_15 as name };
     let height_15: string;
     export { height_15 as height };
 }
-export namespace IcChangeEventEmitDatePartChange {
+export namespace IcChangeEvent {
     export function render_16(): HTMLElement;
     export { render_16 as render };
     let name_16: string;
@@ -141,4 +141,12 @@ export namespace IcChangeEventEmitDatePartChange {
     let height_16: string;
     export { height_16 as height };
 }
+export namespace IcChangeEventEmitDatePartChange {
+    export function render_17(): HTMLElement;
+    export { render_17 as render };
+    let name_17: string;
+    export { name_17 as name };
+    let height_17: string;
+    export { height_17 as height };
+}
 import readme from "./readme.md";

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

@@ -5,6 +5,9 @@ export declare const Small: () => HTMLIcDatePickerElement;
 export declare const Large: () => HTMLIcDatePickerElement;
 export declare const Sizes: () => HTMLElement;
 export declare const MaxWidth: () => HTMLElement;
+export declare const WithHelperTextProp: () => HTMLIcDatePickerElement;
+export declare const WithHelperTextSlot: () => HTMLIcDatePickerElement;
+export declare const CustomHelperText: () => HTMLElement;
 export declare const MonthFirst: () => HTMLIcDatePickerElement;
 export declare const YearFirst: () => HTMLIcDatePickerElement;
 export declare const DateFormats: () => HTMLElement;

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

@@ -6,7 +6,6 @@ import { IcSizes, IcThemeMode } from "../../utils/types";
  * @slot router-item - Handle routing by nesting your routes in this slot.
  */
 export declare class TreeItem {
-    private treeItemId;
     private treeItemElement;
     private treeItemTag;
     private routerSlot;
@@ -26,10 +25,6 @@ export declare class TreeItem {
      */
     expanded: boolean;
     watchExpandedHandler(): void;
-    /**
-     * @internal If `true`, the tree item will have an inset focus border.
-     */
-    focusInset: boolean;
     /**
      * @internal Determines if the parent tree item has been expanded.
      */
@@ -75,6 +70,10 @@ export declare class TreeItem {
      * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
      */
     target?: string;
+    /**
+     * Sets the tree item id. Must be unique.
+     */
+    treeItemId?: string;
     /**
      * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
      */
@@ -94,6 +93,7 @@ export declare class TreeItem {
      */
     icTreeItemExpanded: EventEmitter<{
         isExpanded: boolean;
+        id: string;
     }>;
     disconnectedCallback(): void;
     componentWillLoad(): void;

package/dist/types/components/ic-tree-view/ic-tree-view.d.ts

@@ -17,11 +17,6 @@ export declare class TreeView {
     smallDevice: boolean;
     watchSmallDeviceHandler(): void;
     treeItems: HTMLIcTreeItemElement[];
-    /**
-     * If `true`, tree items will have inset focus.
-     */
-    focusInset: boolean;
-    watchFocusInsetHandler(): void;
     /**
      * The heading of the tree view.
      */

package/dist/types/components/ic-tree-view/ic-tree-view.stories.d.ts

@@ -30,133 +30,133 @@ export namespace NestedSlotted {
     let name_3: string;
     export { name_3 as name };
 }
-export namespace WithIcons {
+export namespace CustomIDs {
     export function render_4(): import("lit-html").TemplateResult<1>;
     export { render_4 as render };
     let name_4: string;
     export { name_4 as name };
 }
-export namespace WithIconsSlotted {
+export namespace SlottedCustomIds {
     export function render_5(): import("lit-html").TemplateResult<1>;
     export { render_5 as render };
     let name_5: string;
     export { name_5 as name };
 }
-export namespace Small {
+export namespace WithIcons {
     export function render_6(): import("lit-html").TemplateResult<1>;
     export { render_6 as render };
     let name_6: string;
     export { name_6 as name };
 }
-export namespace SmallSlotted {
+export namespace WithIconsSlotted {
     export function render_7(): import("lit-html").TemplateResult<1>;
     export { render_7 as render };
     let name_7: string;
     export { name_7 as name };
 }
-export namespace Large {
+export namespace Small {
     export function render_8(): import("lit-html").TemplateResult<1>;
     export { render_8 as render };
     let name_8: string;
     export { name_8 as name };
 }
-export namespace LargeSlotted {
+export namespace SmallSlotted {
     export function render_9(): import("lit-html").TemplateResult<1>;
     export { render_9 as render };
     let name_9: string;
     export { name_9 as name };
 }
-export namespace DisabledTreeItems {
+export namespace Large {
     export function render_10(): import("lit-html").TemplateResult<1>;
     export { render_10 as render };
     let name_10: string;
     export { name_10 as name };
 }
-export namespace DisabledTreeItemsSlotted {
+export namespace LargeSlotted {
     export function render_11(): import("lit-html").TemplateResult<1>;
     export { render_11 as render };
     let name_11: string;
     export { name_11 as name };
 }
-export namespace RouterItem {
+export namespace DisabledTreeItems {
     export function render_12(): import("lit-html").TemplateResult<1>;
     export { render_12 as render };
     let name_12: string;
     export { name_12 as name };
 }
-export namespace SlottedContent {
+export namespace DisabledTreeItemsSlotted {
     export function render_13(): import("lit-html").TemplateResult<1>;
     export { render_13 as render };
     let name_13: string;
     export { name_13 as name };
 }
-export namespace MaxContent {
+export namespace RouterItem {
     export function render_14(): import("lit-html").TemplateResult<1>;
     export { render_14 as render };
     let name_14: string;
     export { name_14 as name };
 }
-export namespace MaxContentSlotted {
+export namespace SlottedContent {
     export function render_15(): import("lit-html").TemplateResult<1>;
     export { render_15 as render };
     let name_15: string;
     export { name_15 as name };
 }
-export namespace TruncationBehaviour {
+export namespace MaxContent {
     export function render_16(): import("lit-html").TemplateResult<1>;
     export { render_16 as render };
     let name_16: string;
     export { name_16 as name };
 }
-export namespace TruncationBehaviourSlotted {
+export namespace MaxContentSlotted {
     export function render_17(): import("lit-html").TemplateResult<1>;
     export { render_17 as render };
     let name_17: string;
     export { name_17 as name };
 }
-export namespace SelectedTreeItem {
+export namespace TruncationBehaviour {
     export function render_18(): import("lit-html").TemplateResult<1>;
     export { render_18 as render };
     let name_18: string;
     export { name_18 as name };
 }
-export namespace SelectedTreeItemSlotted {
+export namespace TruncationBehaviourSlotted {
     export function render_19(): import("lit-html").TemplateResult<1>;
     export { render_19 as render };
     let name_19: string;
     export { name_19 as name };
 }
-export namespace Link {
+export namespace SelectedTreeItem {
     export function render_20(): import("lit-html").TemplateResult<1>;
     export { render_20 as render };
     let name_20: string;
     export { name_20 as name };
 }
-export namespace LinkSlotted {
+export namespace SelectedTreeItemSlotted {
     export function render_21(): import("lit-html").TemplateResult<1>;
     export { render_21 as render };
     let name_21: string;
     export { name_21 as name };
 }
-export namespace Expanded {
+export namespace Link {
     export function render_22(): import("lit-html").TemplateResult<1>;
     export { render_22 as render };
     let name_22: string;
     export { name_22 as name };
 }
-export namespace ExpandedSlotted {
+export namespace LinkSlotted {
     export function render_23(): import("lit-html").TemplateResult<1>;
     export { render_23 as render };
     let name_23: string;
     export { name_23 as name };
 }
-export namespace FocusInset {
+export namespace Expanded {
     export function render_24(): import("lit-html").TemplateResult<1>;
     export { render_24 as render };
     let name_24: string;
     export { name_24 as name };
 }
-export namespace FocusInsetSlotted {
+export namespace ExpandedSlotted {
     export function render_25(): import("lit-html").TemplateResult<1>;
     export { render_25 as render };
     let name_25: string;

package/dist/types/components/ic-tree-view/ic-tree-view.types.d.ts

@@ -7,6 +7,7 @@ export type IcTreeItemOptions = {
     expanded?: boolean;
     href?: string;
     selected?: boolean;
+    treeItemId?: string;
     theme?: IcThemeMode;
     truncateTreeItem?: boolean;
 };

package/dist/types/components.d.ts

@@ -542,7 +542,6 @@ export namespace Components {
           * If `true`, the tree item appears in the expanded state.
          */
         "expanded": boolean;
-        "focusInset": boolean;
         "hasParentExpanded": boolean;
         /**
           * The URL that the tree item link points to. If set, the tree item will render as an "a" tag, otherwise it will render as a div.
@@ -583,6 +582,10 @@ export namespace Components {
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         "theme"?: IcThemeMode1;
+        /**
+          * Sets the tree item id. Must be unique.
+         */
+        "treeItemId"?: string;
         /**
           * If `true`, the tree item label will be truncated instead of text wrapping.
          */
@@ -590,10 +593,6 @@ export namespace Components {
         "updateAriaLabel": () => Promise<void>;
     }
     interface IcTreeView {
-        /**
-          * If `true`, tree items will have inset focus.
-         */
-        "focusInset": boolean;
         /**
           * The heading of the tree view.
          */
@@ -658,6 +657,8 @@ declare global {
     row: IcDataTableDataType | null;
     selectedRows: IcDataTableDataType[];
   };
+        "icColumnsLoaded": void;
+        "icDataLoaded": void;
         "icSortChange": IcSortEventDetail;
     }
     interface HTMLIcDataTableElement extends Components.IcDataTable, HTMLStencilElement {
@@ -756,7 +757,10 @@ declare global {
     };
     interface HTMLIcTreeItemElementEventMap {
         "icTreeItemSelected": { id: string };
-        "icTreeItemExpanded": { isExpanded: boolean };
+        "icTreeItemExpanded": {
+    isExpanded: boolean;
+    id: string;
+  };
     }
     interface HTMLIcTreeItemElement extends Components.IcTreeItem, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIcTreeItemElementEventMap>(type: K, listener: (this: HTMLIcTreeItemElement, ev: IcTreeItemCustomEvent<HTMLIcTreeItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -906,6 +910,14 @@ declare namespace LocalJSX {
           * The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component.
          */
         "minimumLoadingDisplayDuration"?: number;
+        /**
+          * Emitted when the columns have finished loading after being updated or initially rendered.
+         */
+        "onIcColumnsLoaded"?: (event: IcDataTableCustomEvent<void>) => void;
+        /**
+          * Emitted when the data has finished loading after being updated or initially rendered.
+         */
+        "onIcDataLoaded"?: (event: IcDataTableCustomEvent<void>) => void;
         /**
           * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.
          */
@@ -1365,7 +1377,10 @@ declare namespace LocalJSX {
         /**
           * Emitted when tree item is expanded.
          */
-        "onIcTreeItemExpanded"?: (event: IcTreeItemCustomEvent<{ isExpanded: boolean }>) => void;
+        "onIcTreeItemExpanded"?: (event: IcTreeItemCustomEvent<{
+    isExpanded: boolean;
+    id: string;
+  }>) => void;
         /**
           * Emitted when tree item is selected.
          */
@@ -1390,16 +1405,16 @@ declare namespace LocalJSX {
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         "theme"?: IcThemeMode1;
+        /**
+          * Sets the tree item id. Must be unique.
+         */
+        "treeItemId"?: string;
         /**
           * If `true`, the tree item label will be truncated instead of text wrapping.
          */
         "truncateTreeItem"?: boolean;
     }
     interface IcTreeView {
-        /**
-          * If `true`, tree items will have inset focus.
-         */
-        "focusInset"?: boolean;
         /**
           * The heading of the tree view.
          */

package/dist/types/utils/helpers.d.ts

@@ -55,7 +55,7 @@ export declare const removeHiddenInput: (container: HTMLElement) => void;
 export declare const hasShadowDom: (el: HTMLElement | null | undefined) => boolean;
 export declare const getInputHelperTextID: (id: string) => string;
 export declare const getInputValidationTextID: (id: string) => string;
-export declare const getInputDescribedByText: (inputId: string, helperText: boolean, validationText: boolean) => string;
+export declare const getInputDescribedByText: (el: HTMLElement, inputId: string, helperText: boolean, validationText: boolean) => string;
 /**
  * This method helps to understand the context in which a component exists,
  * to assist with choosing appropriate foreground colours to use. For example,