@ukic/canary-web-components 2.0.0-canary.20 → 2.0.0-canary.22

package/dist/types/components.d.ts

@@ -5,19 +5,67 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
+import { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
+import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
 import { IcActivationTypes, IcMenuOption, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
-import { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSearchMatchPositions, IcSizes, IcValueEventDetail, IcWeekDays } from "./utils/types";
+import { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSearchMatchPositions, IcSizes, IcThemeForegroundNoDefault as IcThemeForegroundNoDefault1, IcValueEventDetail, IcWeekDays } from "./utils/types";
 import { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
 import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
-export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
+export { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
+export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
 export { IcActivationTypes, IcMenuOption, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
-export { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSearchMatchPositions, IcSizes, IcValueEventDetail, IcWeekDays } from "./utils/types";
+export { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSearchMatchPositions, IcSizes, IcThemeForegroundNoDefault as IcThemeForegroundNoDefault1, IcValueEventDetail, IcWeekDays } from "./utils/types";
 export { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
 export { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 export { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
 export namespace Components {
+    interface IcCardHorizontal {
+        /**
+          * If `true`, the horizontal card will be a clickable variant, instead of static.
+         */
+        "clickable"?: boolean;
+        /**
+          * If `true`, the horizontal card will be disabled if it is clickable.
+         */
+        "disabled"?: boolean;
+        /**
+          * The heading for the horizontal card. This is required, unless a slotted heading is used.
+         */
+        "heading"?: string;
+        /**
+          * The URL that the clickable horizontal card link points to. If set, the clickable horizontal card will render as an "a" tag, otherwise it will render as a button.
+         */
+        "href"?: string | undefined;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        /**
+          * The main body message of the horizontal card.
+         */
+        "message"?: string;
+        /**
+          * How much of the referrer to send when following the link.
+         */
+        "referrerpolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated link types.
+         */
+        "rel"?: string;
+        /**
+          * Sets focus on the card.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * The size of the horizontal card.
+         */
+        "size": IcCardSizes;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+    }
     interface IcDataTable {
         /**
           * The title for the table only visible to screen readers.
@@ -73,9 +121,9 @@ export namespace Components {
          */
         "paginationBarOptions"?: IcPaginationBarOptions;
         /**
-          * Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.
+          * Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.
          */
-        "resetRowHeights": () => Promise<void>;
+        "resetRowHeights": (rowHeight?: number | "auto") => Promise<void>;
         /**
           * If `true`, adds a pagination bar to the bottom of the table.
          */
@@ -99,6 +147,10 @@ export namespace Components {
           * If `true`, row headers will remain to the left when scrolling horizontally.
          */
         "stickyRowHeaders"?: boolean;
+        /**
+          * Sets the method used to truncate longer text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons.
+         */
+        "truncationPattern"?: IcDataTableTruncationTypes;
         /**
           * If `true`, the table displays a linear loading indicator below the header row to indicate an updating state.
          */
@@ -181,6 +233,10 @@ export namespace Components {
           * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
          */
         "helperText"?: string;
+        /**
+          * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+         */
+        "hideHelperText": boolean;
         /**
           * The ID for the input.
          */
@@ -267,6 +323,10 @@ export namespace Components {
           * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
          */
         "helperText"?: string;
+        /**
+          * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+         */
+        "hideHelperText": boolean;
         /**
           * The ID for the input field. The default will be an automatically generated value.
          */
@@ -600,6 +660,64 @@ export namespace Components {
          */
         "value"?: string | string[];
     }
+    interface IcTreeItem {
+        "appearance"?: IcThemeForegroundNoDefault1;
+        /**
+          * If `true`, the tree item appears in the disabled state.
+         */
+        "disabled"?: boolean;
+        "expanded": 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.
+         */
+        "href"?: string | undefined;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        "isParent": boolean;
+        /**
+          * The label of the tree item.
+         */
+        "label": string;
+        /**
+          * How much of the referrer to send when following the link.
+         */
+        "referrerpolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated link types.
+         */
+        "rel"?: string;
+        /**
+          * If `true`, the tree item appears in the selected state.
+         */
+        "selected": boolean;
+        /**
+          * Sets focus on the native `input`.
+         */
+        "setFocus": () => Promise<void>;
+        "size"?: IcSizes;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+        "updateAriaLabel": () => Promise<void>;
+    }
+    interface IcTreeView {
+        /**
+          * The appearance of the tree view, e.g. dark, or light.
+         */
+        "appearance"?: IcThemeForegroundNoDefault1;
+        /**
+          * The heading of the tree view.
+         */
+        "heading"?: string;
+        /**
+          * The size of the tree view.
+         */
+        "size"?: IcSizes;
+    }
 }
 export interface IcDataTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -629,7 +747,17 @@ export interface IcSelectWithMultiCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcSelectWithMultiElement;
 }
+export interface IcTreeItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcTreeItemElement;
+}
 declare global {
+    interface HTMLIcCardHorizontalElement extends Components.IcCardHorizontal, HTMLStencilElement {
+    }
+    var HTMLIcCardHorizontalElement: {
+        prototype: HTMLIcCardHorizontalElement;
+        new (): HTMLIcCardHorizontalElement;
+    };
     interface HTMLIcDataTableElementEventMap {
         "icRowHeightChange": void;
     }
@@ -767,7 +895,31 @@ declare global {
         prototype: HTMLIcSelectWithMultiElement;
         new (): HTMLIcSelectWithMultiElement;
     };
+    interface HTMLIcTreeItemElementEventMap {
+        "icTreeItemSelected": { 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;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcTreeItemElementEventMap>(type: K, listener: (this: HTMLIcTreeItemElement, ev: IcTreeItemCustomEvent<HTMLIcTreeItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIcTreeItemElement: {
+        prototype: HTMLIcTreeItemElement;
+        new (): HTMLIcTreeItemElement;
+    };
+    interface HTMLIcTreeViewElement extends Components.IcTreeView, HTMLStencilElement {
+    }
+    var HTMLIcTreeViewElement: {
+        prototype: HTMLIcTreeViewElement;
+        new (): HTMLIcTreeViewElement;
+    };
     interface HTMLElementTagNameMap {
+        "ic-card-horizontal": HTMLIcCardHorizontalElement;
         "ic-data-table": HTMLIcDataTableElement;
         "ic-data-table-title-bar": HTMLIcDataTableTitleBarElement;
         "ic-date-input": HTMLIcDateInputElement;
@@ -775,9 +927,53 @@ declare global {
         "ic-menu-with-multi": HTMLIcMenuWithMultiElement;
         "ic-pagination-bar": HTMLIcPaginationBarElement;
         "ic-select-with-multi": HTMLIcSelectWithMultiElement;
+        "ic-tree-item": HTMLIcTreeItemElement;
+        "ic-tree-view": HTMLIcTreeViewElement;
     }
 }
 declare namespace LocalJSX {
+    interface IcCardHorizontal {
+        /**
+          * If `true`, the horizontal card will be a clickable variant, instead of static.
+         */
+        "clickable"?: boolean;
+        /**
+          * If `true`, the horizontal card will be disabled if it is clickable.
+         */
+        "disabled"?: boolean;
+        /**
+          * The heading for the horizontal card. This is required, unless a slotted heading is used.
+         */
+        "heading"?: string;
+        /**
+          * The URL that the clickable horizontal card link points to. If set, the clickable horizontal card will render as an "a" tag, otherwise it will render as a button.
+         */
+        "href"?: string | undefined;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        /**
+          * The main body message of the horizontal card.
+         */
+        "message"?: string;
+        /**
+          * How much of the referrer to send when following the link.
+         */
+        "referrerpolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated link types.
+         */
+        "rel"?: string;
+        /**
+          * The size of the horizontal card.
+         */
+        "size"?: IcCardSizes;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+    }
     interface IcDataTable {
         /**
           * The title for the table only visible to screen readers.
@@ -859,6 +1055,10 @@ declare namespace LocalJSX {
           * If `true`, row headers will remain to the left when scrolling horizontally.
          */
         "stickyRowHeaders"?: boolean;
+        /**
+          * Sets the method used to truncate longer text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons.
+         */
+        "truncationPattern"?: IcDataTableTruncationTypes;
         /**
           * If `true`, the table displays a linear loading indicator below the header row to indicate an updating state.
          */
@@ -940,6 +1140,10 @@ declare namespace LocalJSX {
           * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
          */
         "helperText"?: string;
+        /**
+          * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+         */
+        "hideHelperText"?: boolean;
         /**
           * The ID for the input.
          */
@@ -1034,6 +1238,10 @@ declare namespace LocalJSX {
           * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
          */
         "helperText"?: string;
+        /**
+          * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+         */
+        "hideHelperText"?: boolean;
         /**
           * The ID for the input field. The default will be an automatically generated value.
          */
@@ -1396,7 +1604,60 @@ declare namespace LocalJSX {
          */
         "value"?: string | string[];
     }
+    interface IcTreeItem {
+        /**
+          * If `true`, the tree item appears in the disabled state.
+         */
+        "disabled"?: 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.
+         */
+        "href"?: string | undefined;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        /**
+          * The label of the tree item.
+         */
+        "label"?: string;
+        /**
+          * Emitted when tree item is selected.
+         */
+        "onIcTreeItemSelected"?: (event: IcTreeItemCustomEvent<{ id: string }>) => void;
+        /**
+          * How much of the referrer to send when following the link.
+         */
+        "referrerpolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated link types.
+         */
+        "rel"?: string;
+        /**
+          * If `true`, the tree item appears in the selected state.
+         */
+        "selected"?: boolean;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+    }
+    interface IcTreeView {
+        /**
+          * The appearance of the tree view, e.g. dark, or light.
+         */
+        "appearance"?: IcThemeForegroundNoDefault1;
+        /**
+          * The heading of the tree view.
+         */
+        "heading"?: string;
+        /**
+          * The size of the tree view.
+         */
+        "size"?: IcSizes;
+    }
     interface IntrinsicElements {
+        "ic-card-horizontal": IcCardHorizontal;
         "ic-data-table": IcDataTable;
         "ic-data-table-title-bar": IcDataTableTitleBar;
         "ic-date-input": IcDateInput;
@@ -1404,12 +1665,15 @@ declare namespace LocalJSX {
         "ic-menu-with-multi": IcMenuWithMulti;
         "ic-pagination-bar": IcPaginationBar;
         "ic-select-with-multi": IcSelectWithMulti;
+        "ic-tree-item": IcTreeItem;
+        "ic-tree-view": IcTreeView;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "ic-card-horizontal": LocalJSX.IcCardHorizontal & JSXBase.HTMLAttributes<HTMLIcCardHorizontalElement>;
             "ic-data-table": LocalJSX.IcDataTable & JSXBase.HTMLAttributes<HTMLIcDataTableElement>;
             "ic-data-table-title-bar": LocalJSX.IcDataTableTitleBar & JSXBase.HTMLAttributes<HTMLIcDataTableTitleBarElement>;
             "ic-date-input": LocalJSX.IcDateInput & JSXBase.HTMLAttributes<HTMLIcDateInputElement>;
@@ -1417,6 +1681,8 @@ declare module "@stencil/core" {
             "ic-menu-with-multi": LocalJSX.IcMenuWithMulti & JSXBase.HTMLAttributes<HTMLIcMenuWithMultiElement>;
             "ic-pagination-bar": LocalJSX.IcPaginationBar & JSXBase.HTMLAttributes<HTMLIcPaginationBarElement>;
             "ic-select-with-multi": LocalJSX.IcSelectWithMulti & JSXBase.HTMLAttributes<HTMLIcSelectWithMultiElement>;
+            "ic-tree-item": LocalJSX.IcTreeItem & JSXBase.HTMLAttributes<HTMLIcTreeItemElement>;
+            "ic-tree-view": LocalJSX.IcTreeView & JSXBase.HTMLAttributes<HTMLIcTreeViewElement>;
         }
     }
 }

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

@@ -142,3 +142,4 @@ 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;