@ukic/canary-web-components 3.0.0-canary.5 → 3.0.0-canary.8

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

@@ -304,6 +304,20 @@ export declare const DATA_ELEMENTS: ({
     firstName: {
         data: string;
         href: string;
+        target: string;
+        rel: string;
+    };
+    actions2: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    actions: string;
+    firstName: {
+        data: string;
+        href: string;
+        target?: undefined;
+        rel?: undefined;
     };
     actions2: string;
     age: number;
@@ -321,6 +335,18 @@ export declare const DATA_REACT_ELEMENTS: ({
     firstName: {
         data: string;
         href: string;
+        target: string;
+        rel: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        href: string;
+        target?: undefined;
+        rel?: undefined;
     };
     age: number;
     jobTitle: string;
@@ -346,6 +372,155 @@ export declare const DATA_REACT_ELEMENTS_WITH_ICONS: ({
     jobTitle: string;
     address: string;
 })[];
+export declare const ACTION_DATA_ELEMENTS: ({
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick: () => void;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: {
+        data: string;
+        actionElement: string;
+    };
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick?: undefined;
+    };
+    lastName: string;
+    age: {
+        data: number;
+        actionElement: string;
+    };
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: {
+        data: string;
+        actionElement: string;
+    };
+})[];
+export declare const DATA_WITH_EMPTY_VALUES: {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+}[];
+export declare const LONG_DATA_ELEMENTS_WITH_DESCRIPTIONS: ({
+    firstName: {
+        data: string;
+        description: {
+            data: string;
+            icon: string;
+        };
+        actionElement: string;
+        icon: string;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        actionElement: string;
+        description?: undefined;
+        icon?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        description: {
+            data: string;
+            icon: string;
+        };
+        actionElement: string;
+        icon?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        actionElement: string;
+        description: string;
+        data?: undefined;
+        icon?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const DATA_ELEMENTS_WITH_DESCRIPTIONS: ({
+    firstName: {
+        data: string;
+        description: {
+            data: string;
+            icon: string;
+        };
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: string;
+    age: {
+        data: number;
+        description: {
+            data: string;
+            icon: string;
+        };
+    };
+    jobTitle: {
+        data: string;
+        description: {
+            data: string;
+            icon: string;
+        };
+    };
+    address: string;
+})[];
 export declare const createDataTableElement: (caption: string, columns?: IcDataTableColumnObject[], data?: object[]) => HTMLIcDataTableElement;
 export declare const Basic: () => HTMLIcDataTableElement;
 export declare const DataTableSizing: () => HTMLElement;
@@ -376,4 +551,10 @@ export declare const TruncationTooltip: () => HTMLElement;
 export declare const CustomTitleBar: () => HTMLIcDataTableElement;
 export declare const UpdatingData: () => HTMLElement;
 export declare const SlottedPagination: () => HTMLIcDataTableElement;
+export declare const ActionElement: () => HTMLElement;
+export declare const MissingCellData: () => HTMLElement;
+export declare const TurnOffSelectedRowHighlighting: () => HTMLElement;
+export declare const SelectedRowChangeEvent: () => HTMLElement;
 export declare const DevArea: () => HTMLElement;
+export declare const CellDescriptions: () => HTMLIcDataTableElement;
+export declare const LongCellDescriptions: () => HTMLElement;

package/dist/types/components/ic-date-input/ic-date-input.d.ts

@@ -57,6 +57,7 @@ export declare class DateInput {
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The days of the week to disable.
      */

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

@@ -49,6 +49,7 @@ export declare class DatePicker {
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The days of the week to disable.
      */

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

@@ -99,6 +99,11 @@ export declare class PaginationBar {
      */
     totalItems: number;
     watchTotalItemsHandler(): void;
+    /**
+     If `true`, the pagination bar is set to the first page when the 'items per page' changes
+     */
+    setToFirstPageOnPaginationChange?: boolean;
+    watchSetToFirstPageOnPaginationChange(): void;
     /**
      * Emitted when a page is navigated to via the 'go to' input.
      * The `detail` property contains `value` (i.e. the page number) and a `fromItemsPerPage` flag to indicate if the event was triggered by the `icItemsPerPageChange` event also occurring.
@@ -128,6 +133,7 @@ export declare class PaginationBar {
     private paginationShouldWrap;
     private runResizeObserver;
     private setInputError;
+    private setToFirstPage;
     private setItemsPerPage;
     private setPaginationBarContent;
     private setUpperBound;

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

@@ -18,6 +18,7 @@ export declare class TreeItem {
      * If `true`, the tree item appears in the disabled state.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the tree item appears in the expanded state.
      */
@@ -71,6 +72,10 @@ export declare class TreeItem {
      * 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?: IcThemeMode;
+    /**
+     * If `true`, the tree item label will be truncated instead of text wrapping.
+     */
+    truncateTreeItem?: boolean;
     /**
      * Emitted when tree item is selected.
      */
@@ -78,6 +83,7 @@ export declare class TreeItem {
         id: string;
     }>;
     disconnectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
     handleKeyDown(ev: KeyboardEvent): void;
@@ -93,7 +99,6 @@ export declare class TreeItem {
     private setTreeItemPadding;
     private truncateTreeItemLabel;
     private hasRouterSlot;
-    private hostMutationCallback;
     private handleDisplayTooltip;
     render(): any;
 }

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

@@ -28,6 +28,15 @@ export declare class TreeView {
      */
     theme?: IcThemeMode;
     watchThemeHandler(): void;
+    /**
+     * If `true`, the tree view heading will be truncated instead of text wrapping.
+     */
+    truncateHeading?: boolean;
+    /**
+     * If `true`, tree items will be truncated, unless they are individually overridden.
+     */
+    truncateTreeItems?: boolean;
+    watchTruncateTreeItemsHandler(): void;
     disconnectedCallback(): void;
     componentDidLoad(): void;
     handleTreeItemSelected(event: CustomEvent): void;
@@ -38,7 +47,6 @@ export declare class TreeView {
     private getAllTreeItems;
     private addSlotChangeListener;
     private truncateTreeViewHeading;
-    private hostMutationCallback;
     private isHeadingDefined;
     private hasHeadingAreaContent;
     render(): any;

package/dist/types/components.d.ts

@@ -103,6 +103,10 @@ export namespace Components {
           * If `true`, column headers will not be visible.
          */
         "hideColumnHeaders"?: boolean;
+        /**
+          * If `true`, the selected row is highlighted using a background colour.
+         */
+        "highlightSelectedRow"?: boolean;
         /**
           * When set to `true`, the full table will show a loading state, featuring a radial indicator.
          */
@@ -119,6 +123,7 @@ export namespace Components {
     progress?: number;
     showBackground?: boolean;
     monochrome?: boolean;
+    overlay?: boolean;
   };
         /**
           * Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`.
@@ -480,6 +485,10 @@ export namespace Components {
           * Whether total number of items and current item range or total number of pages and current page is displayed.
          */
         "rangeLabelType"?: IcPaginationLabelTypes;
+        /**
+          * If `true`, the pagination bar is set to the first page when the 'items per page' changes
+         */
+        "setToFirstPageOnPaginationChange"?: boolean;
         /**
           * If `true`, the 'go to page' control should be displayed.
          */
@@ -550,6 +559,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"?: IcThemeMode;
+        /**
+          * If `true`, the tree item label will be truncated instead of text wrapping.
+         */
+        "truncateTreeItem"?: boolean;
         "updateAriaLabel": () => Promise<void>;
     }
     interface IcTreeView {
@@ -569,6 +582,14 @@ 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"?: IcThemeMode;
+        /**
+          * If `true`, the tree view heading will be truncated instead of text wrapping.
+         */
+        "truncateHeading"?: boolean;
+        /**
+          * If `true`, tree items will be truncated, unless they are individually overridden.
+         */
+        "truncateTreeItems"?: boolean;
     }
 }
 export interface IcDataTableCustomEvent<T> extends CustomEvent<T> {
@@ -604,6 +625,7 @@ declare global {
     };
     interface HTMLIcDataTableElementEventMap {
         "icRowHeightChange": void;
+        "icSelectedRowChange": object;
         "icSortChange": IcSortEventDetail;
     }
     interface HTMLIcDataTableElement extends Components.IcDataTable, HTMLStencilElement {
@@ -810,6 +832,10 @@ declare namespace LocalJSX {
           * If `true`, column headers will not be visible.
          */
         "hideColumnHeaders"?: boolean;
+        /**
+          * If `true`, the selected row is highlighted using a background colour.
+         */
+        "highlightSelectedRow"?: boolean;
         /**
           * When set to `true`, the full table will show a loading state, featuring a radial indicator.
          */
@@ -826,6 +852,7 @@ declare namespace LocalJSX {
     progress?: number;
     showBackground?: boolean;
     monochrome?: boolean;
+    overlay?: boolean;
   };
         /**
           * Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`.
@@ -843,6 +870,10 @@ declare namespace LocalJSX {
           * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.
          */
         "onIcRowHeightChange"?: (event: IcDataTableCustomEvent<void>) => void;
+        /**
+          * Emitted when the selected row changes in the data table.
+         */
+        "onIcSelectedRowChange"?: (event: IcDataTableCustomEvent<object>) => void;
         /**
           * Emitted when a column sort button is clicked.
          */
@@ -1210,6 +1241,10 @@ declare namespace LocalJSX {
           * Whether total number of items and current item range or total number of pages and current page is displayed.
          */
         "rangeLabelType"?: IcPaginationLabelTypes;
+        /**
+          * If `true`, the pagination bar is set to the first page when the 'items per page' changes
+         */
+        "setToFirstPageOnPaginationChange"?: boolean;
         /**
           * If `true`, the 'go to page' control should be displayed.
          */
@@ -1276,6 +1311,10 @@ 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"?: IcThemeMode;
+        /**
+          * If `true`, the tree item label will be truncated instead of text wrapping.
+         */
+        "truncateTreeItem"?: boolean;
     }
     interface IcTreeView {
         /**
@@ -1294,6 +1333,14 @@ 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"?: IcThemeMode;
+        /**
+          * If `true`, the tree view heading will be truncated instead of text wrapping.
+         */
+        "truncateHeading"?: boolean;
+        /**
+          * If `true`, tree items will be truncated, unless they are individually overridden.
+         */
+        "truncateTreeItems"?: boolean;
     }
     interface IntrinsicElements {
         "ic-card-horizontal": IcCardHorizontal;

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

@@ -1,10 +1,10 @@
 /**
  * To investigate:
- * IcColorRGBA works via @ukic/web-components but IcThemeForeground does not even though they are exported
+ * IcColorRGBA works via @ukic/web-components but IcBrandForeground does not even though they are exported
  * from @ukic/web-components in the same file. Why?
  */
 import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA } from "@ukic/web-components";
-import { IcMenuOption, IcThemeForeground } from "./types";
+import { IcMenuOption, IcBrandForeground } from "./types";
 import { EventEmitter } from "../stencil-public-runtime";
 import { IcDataTableDataType } from "../interface";
 /**
@@ -48,9 +48,9 @@ export declare const removeHiddenInput: (container: HTMLElement) => void;
  * are part of an IC component.
  *
  * ""
- * @returns IcThemeForeground depending on the context
+ * @returns IcBrandForeground depending on the context
  */
-export declare const getThemeFromContext: (el: Element, themeFromEvent?: IcThemeForeground) => IcThemeForeground;
+export declare const getBrandFromContext: (el: Element, brandFromEvent?: IcBrandForeground) => IcBrandForeground;
 /**
  * Will create a button within the lightDOM which interacts with the parent form.
  * This is required as buttons within the shadowDOM will not invoke a submit or reset
@@ -65,18 +65,18 @@ export declare const deviceSizeMatches: (size: number) => boolean;
 export declare const getCurrentDeviceSize: () => number;
 export declare const getCssProperty: (cssVar: string) => string;
 /**
- * Returns the brightness of the theme colour, calculated by using the theme RGB CSS values by:
+ * Returns the brightness of the brand colour, calculated by using the brand RGB CSS values by:
  * - Multiplying each RGB value by a set number: https://www.w3.org/TR/AERT/#color-contrast
  * - Adding them together and dividing by 1000
- * This is a similar calculation to its CSS counterpart: "--ic-theme-text"
- * @returns number representing the brightness of the theme colour
+ * This is a similar calculation to its CSS counterpart: "--ic-brand-text-color"
+ * @returns number representing the brightness of the brand colour
  */
-export declare const getThemeColorBrightness: () => number;
+export declare const getBrandColorBrightness: () => number;
 /**
  * Returns if dark or light foreground colors should be used for color contrast reasons
  * @returns "dark" or "light"
  */
-export declare const getThemeForegroundColor: () => IcThemeForeground;
+export declare const getBrandForegroundAppearance: () => IcBrandForeground;
 export declare const getSlot: (element: HTMLElement, name: string) => Element | null;
 export declare const slotHasContent: (element: HTMLElement, name: string) => boolean;
 export declare const getSlotContent: (element: HTMLElement, name: string) => Element[] | NodeListOf<ChildNode> | null;
@@ -144,8 +144,11 @@ export declare const removeDisabledFalse: (disabled: boolean, element: HTMLEleme
 export declare const isMacDevice: () => boolean;
 export declare function waitForHydration(): Promise<boolean>;
 export declare const capitalize: (text: string) => string;
-export declare const checkSlotInChildMutations: (addedNodes: NodeList, removedNodes: NodeList, slotName: string) => boolean;
+export declare const checkSlotInChildMutations: (addedNodes: NodeList, removedNodes: NodeList, slotName: string | string[]) => boolean;
 export declare const addDataToPosition: (dataObject: IcDataTableDataType, newKeys: {
     key: string;
     index: number;
 }[], newValue: unknown) => IcDataTableDataType;
+export declare const isSlottedInGroup: (component: any) => boolean;
+export declare const hasDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[]) => boolean;
+export declare const renderDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[], ref: any) => void;

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

@@ -12,15 +12,15 @@ export type IcInformationStatusOrEmpty = "warning" | "error" | "success" | "";
 export type IcNavType = "side" | "top" | "page-header";
 export type IcAutocompleteTypes = "on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
 export type IcAlignment = "left" | "center" | "full-width";
-export declare enum IcThemeForegroundEnum {
+export declare enum IcBrandForegroundEnum {
     Default = "default",
     Dark = "dark",
     Light = "light"
 }
-export type IcThemeForeground = "default" | "dark" | "light";
-export type IcThemeForegroundNoDefault = "dark" | "light";
-export type IcTheme = {
-    mode: IcThemeForeground;
+export type IcBrandForeground = "default" | "dark" | "light";
+export type IcBrandForegroundNoDefault = "dark" | "light";
+export type IcBrand = {
+    mode: IcBrandForeground;
     color: IcColorRGB;
 };
 export type IcThemeMode = "dark" | "light" | "inherit";
@@ -76,6 +76,7 @@ export interface IcPaginationBarOptions {
     hideAllFromItemsPerPage?: boolean;
     theme?: IcThemeMode;
     monochrome?: boolean;
+    setToFirstPageOnPaginationChange?: boolean;
 }
 export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
 export type IcDateFormat = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";