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

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

@@ -0,0 +1,95 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcSizes, IcThemeForegroundNoDefault } from "../../utils/types";
+/**
+ * @slot label - Content is set as the tree item label.
+ * @slot icon - Content is placed to the left of the label.
+ * @slot router-item - Handle routing by nesting your routes in this slot.
+ */
+export declare class TreeItem {
+    private treeItemId;
+    private treeItemElement;
+    private treeItemTag;
+    private routerSlot;
+    private hostMutationObserver;
+    private TOOLTIP;
+    el: HTMLIcTreeItemElement;
+    childTreeItems: HTMLIcTreeItemElement[];
+    /**
+     * @internal Determines whether the light or dark variant of the tree item should be displayed.
+     */
+    appearance?: IcThemeForegroundNoDefault;
+    /**
+     * If `true`, the tree item appears in the disabled state.
+     */
+    disabled?: boolean;
+    /**
+     * @internal If `true`, the tree item appears in the expanded state.
+     */
+    expanded: boolean;
+    /**
+     * @internal Determines if the parent tree item has been expanded.
+     */
+    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;
+    /**
+     * @internal If `true`, the tree item is a parent of other tree items.
+     */
+    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;
+    watchSelectedHandler(): void;
+    /**
+     * @internal Determines the size of the tree item.
+     */
+    size?: IcSizes;
+    /**
+     * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+     */
+    target?: string;
+    /**
+     * Emitted when tree item is selected.
+     */
+    icTreeItemSelected: EventEmitter<{
+        id: string;
+    }>;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    handleKeyDown(ev: KeyboardEvent): void;
+    /**
+     * Sets focus on the native `input`.
+     */
+    setFocus(): Promise<void>;
+    private handleTreeItemClicked;
+    /**
+     * @internal Updates the aria-label of the tree item.
+     */
+    updateAriaLabel(): Promise<void>;
+    private setTreeItemPadding;
+    private truncateTreeItemLabel;
+    private hasRouterSlot;
+    private hostMutationCallback;
+    private handleDisplayTooltip;
+    render(): any;
+}

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

@@ -0,0 +1,40 @@
+import { IcSizes, IcThemeForegroundNoDefault } from "../../utils/types";
+/**
+ * @slot heading - Content is set as the tree view heading.
+ * @slot icon - Content is placed to the left of the heading.
+ */
+export declare class TreeView {
+    private treeViewId;
+    private treeItemTag;
+    private hostMutationObserver;
+    el: HTMLIcTreeViewElement;
+    treeItems: HTMLIcTreeItemElement[];
+    /**
+     * The appearance of the tree view, e.g. dark, or light.
+     */
+    appearance?: IcThemeForegroundNoDefault;
+    watchAppearanceHandler(): void;
+    /**
+     * The heading of the tree view.
+     */
+    heading?: string;
+    /**
+     * The size of the tree view.
+     */
+    size?: IcSizes;
+    watchSizeHandler(): void;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    handleTreeItemSelected(event: CustomEvent): void;
+    private handleKeyDown;
+    private getNextItemToSelect;
+    private linkTreeItems;
+    private setTreeItems;
+    private getAllTreeItems;
+    private addSlotChangeListener;
+    private truncateTreeViewHeading;
+    private hostMutationCallback;
+    private isHeadingDefined;
+    private hasHeadingAreaContent;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -6,16 +6,16 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
-import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.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 { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
-export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.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";
@@ -121,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.
          */
@@ -147,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.
          */
@@ -229,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.
          */
@@ -315,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.
          */
@@ -648,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;
@@ -677,6 +747,10 @@ 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 {
     }
@@ -821,6 +895,29 @@ 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;
@@ -830,6 +927,8 @@ 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 {
@@ -956,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.
          */
@@ -1037,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.
          */
@@ -1131,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.
          */
@@ -1493,6 +1604,58 @@ 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;
@@ -1502,6 +1665,8 @@ 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 };
@@ -1516,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>;
         }
     }
 }