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

package/dist/types/components/ic-card-horizontal/ic-card-horizontal.d.ts

@@ -0,0 +1,71 @@
+import { IcThemeForeground } from "../../utils/types";
+import { IcCardSizes } from "./ic-card-horizontal.types";
+/**
+ * @slot heading - Content will be placed at the top of the horizontal card to the right of the icon.
+ * @slot message - Content will be placed in the main body of the horizontal card.
+ * @slot image - Content will be placed to the left of all other content.
+ * @slot icon - Content will be placed to the left of the horizontal card heading.
+ * @slot badge - Badge component overlaying the top right of the horizontal card.
+ */
+export declare class Card {
+    private hostMutationObserver;
+    el: HTMLIcCardHorizontalElement;
+    appearance?: IcThemeForeground;
+    isFocussed: boolean;
+    parentEl: HTMLElement | null;
+    parentIsAnchorTag: boolean;
+    /**
+     * 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;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleHostClick(event: Event): void;
+    themeChangeHandler(ev: CustomEvent): void;
+    /**
+     * Sets focus on the card.
+     */
+    setFocus(): Promise<void>;
+    private hostMutationCallback;
+    private parentFocussed;
+    private parentBlurred;
+    private updateTheme;
+    render(): any;
+}

package/dist/types/components/ic-card-horizontal/ic-card-horizontal.types.d.ts

@@ -0,0 +1 @@
+export type IcCardSizes = "small" | "medium" | "large" | "extra-large";

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDensityUpdateEventDetail } from "./ic-data-table.types";
+import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail } from "./ic-data-table.types";
 import { IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
 import { IcPaginationBarOptions } from "../../utils/types";
 /**
@@ -10,9 +10,30 @@ import { IcPaginationBarOptions } from "../../utils/types";
  * @slot pagination-bar - A custom ic-pagination-bar can be slotted below the data to provide enhanced control over how the data is interacted with when being fetched externally.
  */
 export declare class DataTable {
+    private DENSITY_HEIGHT_MULTIPLIER;
+    private DENSITY_PADDING_HEIGHT_DIFF;
+    private SORT_ICONS;
     private hasLoadedForOneSecond;
     private loadingIndicator;
     private timerStarted;
+    private resizeObserver;
+    private SHOW_HIDE_STRING;
+    private SHOW_HIDE_CSS_CLASS;
+    private TOOLTIP_STRING;
+    private TOOLTIP;
+    private TEXT_WRAP_STRING;
+    private TEXT_WRAP_CLASS;
+    private dataUpdated;
+    private tableSorted;
+    private rowHeightSet;
+    private initialLoad;
+    private icPageChangeEvent;
+    private itemsPerPageChange;
+    private DATA_ROW_HEIGHT_STRING;
+    private previousItemsPerPage;
+    private DEFAULT_LINE_HEIGHT;
+    private densityUpdate;
+    private previousPaginationPage;
     el: HTMLIcDataTableElement;
     fromRow: number;
     previousRowsPerPage: number;
@@ -23,6 +44,7 @@ export declare class DataTable {
     sortedColumn: string;
     sortedColumnOrder: IcDataTableSortOrderOptions;
     toRow: number;
+    currentRowHeight: number;
     /**
      * The title for the table only visible to screen readers.
      */
@@ -101,6 +123,11 @@ export declare class DataTable {
      * 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.
      */
@@ -127,40 +154,74 @@ export declare class DataTable {
      * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.
      */
     icRowHeightChange: EventEmitter<void>;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
-    handleItemsPerPageChange({ detail, target, }: CustomEvent<{
-        value: number;
+    componentDidUpdate(): void;
+    private truncateUpdatedData;
+    private updateSetRowHeight;
+    private createShowHideTruncation;
+    private debounceDataTruncation;
+    private getLines;
+    private truncate;
+    private addTooltipTruncation;
+    private addShowHideTruncation;
+    private dataTruncation;
+    private getTruncWrapper;
+    handleTypographyTruncationExpandToggle({ detail, }: CustomEvent<{
+        expanded: boolean;
+        typographyEl: HTMLIcTypographyElement;
     }>): void;
     handlePageChange({ detail, target }: CustomEvent<{
         value: number;
     }>): void;
+    handleItemsPerPageChange({ detail, target, }: CustomEvent<{
+        value: number;
+    }>): void;
     handleDensityChange(ev: CustomEvent<IcDensityUpdateEventDetail>): void;
     clickListener(ev: MouseEvent): void;
     loadingHandler(newValue: boolean): void;
+    truncationPatternHandler(newValue: IcDataTableTruncationTypes): void;
     dataHandler(newData: {
         [key: string]: any;
-    }[]): void;
-    rowHeightChangeHandler(): void;
+    }[]): Promise<void>;
+    densityHandler(): Promise<void>;
+    private removeTextWrap;
+    private getCellContainer;
+    private deleteTextWrapDataKey;
+    private resetShowHideTruncation;
+    rowHeightChangeHandler(newValue: number, oldValue: number): void;
     /**
-     * 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>;
     private showLoadingIndicator;
     private startLoadingTimer;
     private isObject;
     private notDefaultDensity;
     private getCellContent;
     private getCellAlignment;
+    private getCellOptions;
     private createUpdatingIndicator;
+    private setRowHeight;
+    private setTruncationClass;
     private createCells;
     private createColumnHeaders;
+    private onRowClick;
     private createRows;
     private getObjectValue;
     private getSortButtonLabel;
     private getComparison;
     private getSortFunction;
     private sortRows;
+    private getTypographyElements;
+    private getTooltip;
+    private updateTruncationTooltip;
     private updateScrollOffset;
+    private getRowOptions;
+    private regenerateTooltip;
+    private removeTooltip;
+    private addLineClampCSS;
+    private createTruncationTooltip;
     render(): any;
 }

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

@@ -9,6 +9,8 @@ export type IcDataTableColumnObject = {
         horizontal?: string;
         vertical?: string;
     };
+    rowOptions?: IcDataTableRowOptions;
+    textWrap?: boolean;
     cellAlignment?: string;
     emphasis?: string;
     colspan?: number;
@@ -18,7 +20,14 @@ export type IcDataTableColumnObject = {
         hideOnHeader?: boolean;
     };
 };
+export type IcDataTableRowOptions = {
+    textWrap: boolean;
+};
 export type IcDataTableRowHeights = number | "auto";
 export interface IcDensityUpdateEventDetail {
     value: IcDataTableDensityOptions;
 }
+export type IcDataTableTruncationTypes = "tooltip" | "show-hide" | undefined;
+export type truncWrapperDetailsTypes = {
+    scrollHeight: number | null;
+};

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

@@ -1,5 +1,15 @@
 import { IcDataTableColumnObject } from "./ic-data-table.types";
 export declare const COLS: IcDataTableColumnObject[];
+export declare const VERY_LONG_DATA: (rows?: number) => {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+    rowOptions: {
+        textWrap: boolean;
+    };
+}[];
 export declare const COLS_ALIGNMENT: IcDataTableColumnObject[];
 export declare const DATA: {
     firstName: string;
@@ -8,6 +18,75 @@ export declare const DATA: {
     jobTitle: string;
     address: string;
 }[];
+export declare const LONG_TEXT: {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+}[];
+export declare const TEXT_WRAP_LONG_DATA: ({
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: {
+        data: string;
+        textWrap: boolean;
+    };
+    rowOptions?: undefined;
+} | {
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+    rowOptions?: undefined;
+} | {
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+    rowOptions: {
+        textWrap: boolean;
+    };
+} | {
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+    rowOptions?: undefined;
+})[];
+export declare const COLUMNS_NO_TEXT_WRAP: IcDataTableColumnObject[];
+export declare const COLUMNS_TEXT_WRAP: IcDataTableColumnObject[];
+export declare const LONG_DATA_VALUES: ({
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+})[];
+export declare const LONG_DATA_VALUES_UPDATE: ({
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+})[];
 export declare const DATA_CELL_ALIGNMENT: ({
     firstName: {
         data: string;
@@ -53,6 +132,31 @@ export declare const ROW_ALIGNMENT: ({
 })[];
 export declare const LONG_COLS: IcDataTableColumnObject[];
 export declare const ICON_COLS: IcDataTableColumnObject[];
+export declare const ICON_DATA_LONG_VALUES: ({
+    firstName: {
+        data: string;
+        icon: string;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: {
+        data: string;
+        icon: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
 export declare const ICON_DATA: ({
     firstName: {
         data: string;
@@ -133,15 +237,18 @@ export declare const DATA_REACT_ELEMENTS: ({
     age: number;
     jobTitle: string;
     address: string;
+    actions: string;
 } | {
     firstName: string;
     lastName: string;
     age: number;
     jobTitle: string;
     address: string;
+    actions?: undefined;
 })[];
 export declare const createDataTableElement: (caption: string, columns?: IcDataTableColumnObject[], data?: object[]) => HTMLIcDataTableElement;
 export declare const Basic: () => HTMLIcDataTableElement;
+export declare const LargeDataSet: () => HTMLIcDataTableElement;
 export declare const Embedded: () => HTMLIcDataTableElement;
 export declare const Dense: () => HTMLElement;
 export declare const Spacious: () => HTMLElement;
@@ -157,9 +264,14 @@ export declare const LinksHTMLElements: () => HTMLIcDataTableElement;
 export declare const Empty: () => HTMLIcDataTableElement;
 export declare const EmptySlotted: () => HTMLIcDataTableElement;
 export declare const Loading: () => HTMLIcDataTableElement;
+export declare const EmptyLoading: () => HTMLIcDataTableElement;
 export declare const Updating: () => HTMLIcDataTableElement;
 export declare const CustomIcons: () => HTMLIcDataTableElement;
 export declare const CustomRowHeights: () => HTMLElement;
+export declare const TruncationShowHide: () => HTMLElement;
+export declare const TruncationTextWrap: () => HTMLElement;
+export declare const TruncationTooltip: () => HTMLElement;
 export declare const CustomTitleBar: () => HTMLIcDataTableElement;
 export declare const UpdatingData: () => HTMLElement;
 export declare const SlottedPagination: () => HTMLIcDataTableElement;
+export declare const DevArea: () => HTMLElement;

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

@@ -87,6 +87,10 @@ export declare class DateInput {
      * 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.
      */

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

@@ -79,6 +79,10 @@ export declare class DatePicker {
      * 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.
      */
@@ -133,6 +137,7 @@ export declare class DatePicker {
      * Default is Monday.
      */
     startOfWeek?: IcWeekDays;
+    watchStartOfWeekHandler(): void;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
      */

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;
+}