@ukic/canary-web-components 3.0.0-canary.2 → 3.0.0-canary.4

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

@@ -1,4 +1,4 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcTheme, IcThemeForeground, IcThemeMode } 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.
@@ -54,11 +54,15 @@ export declare class Card {
      * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
      */
     target?: 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.
+     */
+    theme?: IcThemeMode;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     handleHostClick(event: Event): void;
-    themeChangeHandler(ev: CustomEvent): void;
+    themeChangeHandler(ev: CustomEvent<IcTheme>): void;
     /**
      * Sets focus on the card.
      */

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

@@ -37,6 +37,10 @@ export declare class DataTable {
     private previousPaginationPage;
     private truncationPatternUpdated;
     private isNewDebounceDelaySet;
+    private headerResizeObserver;
+    private prevTableContainerWidth;
+    private IC_TOOLTIP_STRING;
+    private SHOW_TRUNC_TOOLTIP_STRING;
     el: HTMLIcDataTableElement;
     fromRow: number;
     previousRowsPerPage: number;
@@ -53,6 +57,11 @@ export declare class DataTable {
      * The title for the table only visible to screen readers.
      */
     caption: string;
+    /**
+     * Determines whether the column header should be truncated and display a tooltip. Default is `false`.
+     */
+    columnHeaderTruncation: boolean;
+    headerTruncationChangeHandler(): void;
     /**
      * The column headers for the table.
      */
@@ -185,6 +194,9 @@ export declare class DataTable {
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
+    componentDidRender(): void;
+    private runHeaderResizeObserver;
+    private headerResizeCallback;
     private truncateUpdatedData;
     private updateSetRowHeight;
     private createShowHideTruncation;
@@ -252,5 +264,6 @@ export declare class DataTable {
     private removeTooltip;
     private addLineClampCSS;
     private createTruncationTooltip;
+    private fixCellTooltips;
     render(): any;
 }

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

@@ -329,6 +329,7 @@ export declare const Embedded: () => HTMLIcDataTableElement;
 export declare const Dense: () => HTMLElement;
 export declare const Spacious: () => HTMLElement;
 export declare const Scrollable: () => HTMLElement;
+export declare const HeaderTruncation: () => HTMLElement;
 export declare const RowHeaders: () => HTMLIcDataTableElement;
 export declare const Sort: () => HTMLIcDataTableElement;
 export declare const SortOptions: () => HTMLIcDataTableElement;

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

@@ -91,6 +91,10 @@ export declare class DateInput {
      * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
      */
     hideHelperText: boolean;
+    /**
+     * If `true`, the label will be visually hidden, but will still be read out by screen readers.
+     */
+    hideLabel?: boolean;
     /**
      * The ID for the input.
      */

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

@@ -83,6 +83,10 @@ export declare class DatePicker {
      * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
      */
     hideHelperText: boolean;
+    /**
+     * If `true`, the label will be visually hidden, but the required label will still be read out by screen readers.
+     */
+    hideLabel?: boolean;
     /**
      * The ID for the input field. The default will be an automatically generated value.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
+import { IcThemeMode } from "@ukic/web-components/dist/types/interface";
 import { IcPageChangeEventDetail } from "./ic-pagination-bar.types";
 import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 export declare class PaginationBar {
@@ -33,22 +33,22 @@ export declare class PaginationBar {
      * Sets the alignment of the items in the pagination bar.
      */
     alignment?: IcPaginationAlignmentOptions;
-    /**
-     * Sets the styling for the items in the pagination bar.
-     */
-    appearance?: IcThemeForeground;
     /**
      * The current page number to be displayed on the pagination bar.
      */
     currentPage?: number;
     watchPageNumberHandler(): void;
+    /**
+     * If `true`, the 'All' option will be hidden from the 'items per page' select input.
+     */
+    hideAllFromItemsPerPage?: boolean;
     /**
      * The text which will be used in place of 'Item' on the pagination bar.
      */
     itemLabel?: string;
     watchItemLabelHandler(): void;
     /**
-     * The options which will be displayed for 'items per page' select input. Set a maximum of 4 options including a required 'All' option with value equal to total number of items.
+     * The options which will be displayed for 'items per page' select input.
      */
     itemsPerPageOptions?: {
         label: string;
@@ -61,6 +61,14 @@ export declare class PaginationBar {
         label: string;
         value: string;
     }[]): void;
+    /**
+     * If `true`, the pagination bar will display as black in the light theme, and white in dark theme.
+     */
+    monochrome?: boolean;
+    /**
+     * 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;
     /**
      * Whether the displayed pagination is simple or complex.
      */
@@ -123,5 +131,6 @@ export declare class PaginationBar {
     private setItemsPerPage;
     private setPaginationBarContent;
     private setUpperBound;
+    private handleButtonAppearance;
     render(): any;
 }

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcSizes, IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcSizes } from "../../utils/types";
+import { IcThemeMode } from "@ukic/web-components";
 /**
  * @slot label - Content is set as the tree item label.
  * @slot icon - Content is placed to the left of the label.
@@ -14,18 +15,18 @@ export declare class TreeItem {
     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.
+     * If `true`, the tree item appears in the expanded state.
      */
     expanded: boolean;
+    /**
+     * @internal If `true`, the tree item will have an inset focus border.
+     */
+    focusInset?: boolean;
     /**
      * @internal Determines if the parent tree item has been expanded.
      */
@@ -67,6 +68,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 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;
     /**
      * Emitted when tree item is selected.
      */

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

@@ -1,4 +1,5 @@
-import { IcSizes, IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcSizes } from "../../utils/types";
+import { IcThemeMode } from "@ukic/web-components";
 /**
  * @slot heading - Content is set as the tree view heading.
  * @slot icon - Content is placed to the left of the heading.
@@ -10,10 +11,10 @@ export declare class TreeView {
     el: HTMLIcTreeViewElement;
     treeItems: HTMLIcTreeItemElement[];
     /**
-     * The appearance of the tree view, e.g. dark, or light.
+     * If `true`, tree items will have inset focus.
      */
-    appearance?: IcThemeForegroundNoDefault;
-    watchAppearanceHandler(): void;
+    focusInset?: boolean;
+    watchFocusInsetHandler(): void;
     /**
      * The heading of the tree view.
      */
@@ -23,6 +24,11 @@ export declare class TreeView {
      */
     size?: IcSizes;
     watchSizeHandler(): void;
+    /**
+     * 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;
+    watchThemeHandler(): void;
     disconnectedCallback(): void;
     componentDidLoad(): void;
     handleTreeItemSelected(event: CustomEvent): void;