@ukic/canary-web-components 3.0.0-canary.1 → 3.0.0-canary.10

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

@@ -171,6 +171,31 @@ export declare const DATA_CELL_ALIGNMENT: ({
     jobTitle: string;
     address: string;
 })[];
+export declare const DATA_EMPHASIS: ({
+    firstName: {
+        data: string;
+        emphasis: string;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: {
+        data: string;
+        emphasis: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
 export declare const ROW_ALIGNMENT: ({
     header: {
         title: string;
@@ -279,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;
@@ -296,15 +335,191 @@ 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;
+    address: string;
+} | {
+    firstName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const DATA_REACT_ELEMENTS_WITH_ICONS: ({
+    firstName: {
+        data: string;
+        href: string;
+        icon: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const ACTION_DATA_ELEMENTS: ({
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick: (event: Event) => 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;
@@ -314,9 +529,11 @@ 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;
+export declare const DisableSort: () => HTMLIcDataTableElement;
 export declare const Pagination: () => HTMLIcDataTableElement;
 export declare const ColumnOverrides: () => HTMLIcDataTableElement;
 export declare const RowOverrides: () => HTMLIcDataTableElement;
@@ -335,4 +552,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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcSizes, IcDateFormat, IcWeekDays } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcSizes, IcDateFormat, IcWeekDays, IcThemeMode } from "../../utils/types";
 export declare class DateInput {
     private ARIA_INVALID;
     private ARIA_LABEL;
@@ -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.
      */
@@ -91,6 +92,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.
      */
@@ -136,6 +141,10 @@ export declare class DateInput {
      * The size of the date input to be displayed.
      */
     size?: IcSizes;
+    /**
+     * Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme?: IcThemeMode;
     /**
      * The value of the date input. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcWeekDays, IcDateFormat, IcSizes, IcInformationStatusOrEmpty } from "../../utils/types";
+import { IcWeekDays, IcDateFormat, IcSizes, IcInformationStatusOrEmpty, IcThemeMode } from "../../utils/types";
 export declare class DatePicker {
     private inputEl;
     private clearButtonEl;
@@ -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.
      */
@@ -83,6 +84,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.
      */
@@ -142,6 +147,10 @@ export declare class DatePicker {
      */
     startOfWeek?: IcWeekDays;
     watchStartOfWeekHandler(): void;
+    /**
+     * Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme?: IcThemeMode;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
      */

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
+import { IcThemeMode } from "../../utils/types";
+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 {
     private PAGE_INPUT_FIELD_ID;
@@ -13,7 +14,7 @@ export declare class PaginationBar {
     el: HTMLIcPaginationBarElement;
     capitalizedItemLabel: string;
     capitalizedPageLabel: string;
-    currentPage: number;
+    activePage: number;
     displayedItemsPerPageOptions?: {
         label: string;
         value: string;
@@ -33,16 +34,26 @@ export declare class PaginationBar {
      */
     alignment?: IcPaginationAlignmentOptions;
     /**
-     * Sets the styling for the items in the pagination bar.
+     * The current page number to be displayed on the pagination bar.
      */
-    appearance?: IcThemeForeground;
+    currentPage?: number;
+    watchPageNumberHandler(): void;
+    /**
+     * The items per page option to be selected.
+     */
+    selectedItemsPerPage?: number;
+    watchSelectedItemsPerPageHandler(): 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;
@@ -55,6 +66,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.
      */
@@ -85,12 +104,16 @@ 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.
      */
-    icPageChange: EventEmitter<{
-        value: number;
-    }>;
+    icPageChange: EventEmitter<IcPageChangeEventDetail>;
     /**
      * Emitted when the items per page option is changed.
      */
@@ -115,8 +138,10 @@ export declare class PaginationBar {
     private paginationShouldWrap;
     private runResizeObserver;
     private setInputError;
+    private setToFirstPage;
     private setItemsPerPage;
     private setPaginationBarContent;
     private setUpperBound;
+    private handleButtonAppearance;
     render(): any;
 }

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

@@ -0,0 +1,4 @@
+export interface IcPageChangeEventDetail {
+    value: number;
+    fromItemsPerPage?: boolean;
+}

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcSizes, IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcSizes, IcThemeMode } from "../../utils/types";
 /**
  * @slot label - Content is set as the tree item label.
  * @slot icon - Content is placed to the left of the label.
@@ -14,18 +14,19 @@ 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;
+    watchDisabledHandler(): void;
     /**
-     * @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,14 @@ 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;
+    /**
+     * If `true`, the tree item label will be truncated instead of text wrapping.
+     */
+    truncateTreeItem?: boolean;
     /**
      * Emitted when tree item is selected.
      */
@@ -74,6 +83,7 @@ export declare class TreeItem {
         id: string;
     }>;
     disconnectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
     handleKeyDown(ev: KeyboardEvent): void;
@@ -89,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

@@ -1,4 +1,4 @@
-import { IcSizes, IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcSizes, IcThemeMode } from "../../utils/types";
 /**
  * @slot heading - Content is set as the tree view heading.
  * @slot icon - Content is placed to the left of the heading.
@@ -7,13 +7,14 @@ export declare class TreeView {
     private treeViewId;
     private treeItemTag;
     private hostMutationObserver;
+    private isLoaded;
     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,20 @@ 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;
+    /**
+     * 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;
@@ -33,7 +48,6 @@ export declare class TreeView {
     private getAllTreeItems;
     private addSlotChangeListener;
     private truncateTreeViewHeading;
-    private hostMutationCallback;
     private isHeadingDefined;
     private hasHeadingAreaContent;
     render(): any;