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

package/dist/types/components.d.ts

@@ -6,19 +6,21 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
+import { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSizes, IcThemeMode, IcWeekDays } from "./utils/types";
 import { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
 import { IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
-import { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSizes, IcThemeForegroundNoDefault as IcThemeForegroundNoDefault1, IcWeekDays } from "./utils/types";
 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";
+import { IcThemeMode as IcThemeMode1 } from "@ukic/web-components/dist/types/interface";
 import { IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
+import { IcThemeMode as IcThemeMode2 } from "@ukic/web-components";
 export { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
+export { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSizes, IcThemeMode, IcWeekDays } from "./utils/types";
 export { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
 export { IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
-export { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSizes, IcThemeForegroundNoDefault as IcThemeForegroundNoDefault1, IcWeekDays } from "./utils/types";
 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 { IcThemeMode as IcThemeMode1 } from "@ukic/web-components/dist/types/interface";
 export { IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
+export { IcThemeMode as IcThemeMode2 } from "@ukic/web-components";
 export namespace Components {
     interface IcCardHorizontal {
         /**
@@ -65,12 +67,20 @@ export namespace Components {
           * 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;
     }
     interface IcDataTable {
         /**
           * 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;
         /**
           * The column headers for the table.
          */
@@ -431,10 +441,6 @@ export namespace Components {
           * 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.
          */
@@ -458,6 +464,10 @@ export namespace Components {
     label: string;
     value: string;
   }[];
+        /**
+          * If `true`, the pagination bar will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * The text which will be used in place of 'Page' on the pagination bar.
          */
@@ -474,6 +484,10 @@ export namespace Components {
           * If `true`, the select input to control 'items per page' should be displayed.
          */
         "showItemsPerPageControl"?: 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"?: IcThemeMode1;
         /**
           * Total number of items to be displayed across all pages.
          */
@@ -484,7 +498,6 @@ export namespace Components {
         "type"?: IcPaginationTypes;
     }
     interface IcTreeItem {
-        "appearance"?: IcThemeForegroundNoDefault1;
         /**
           * If `true`, the tree item appears in the disabled state.
          */
@@ -529,13 +542,13 @@ export namespace Components {
           * 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"?: IcThemeMode2;
         "updateAriaLabel": () => Promise<void>;
     }
     interface IcTreeView {
-        /**
-          * The appearance of the tree view, e.g. dark, or light.
-         */
-        "appearance"?: IcThemeForegroundNoDefault1;
         /**
           * If `true`, tree items will have inset focus.
          */
@@ -548,6 +561,10 @@ export namespace Components {
           * The size of the tree view.
          */
         "size"?: IcSizes;
+        /**
+          * 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"?: IcThemeMode2;
     }
 }
 export interface IcDataTableCustomEvent<T> extends CustomEvent<T> {
@@ -747,12 +764,20 @@ declare namespace LocalJSX {
           * 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;
     }
     interface IcDataTable {
         /**
           * 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;
         /**
           * The column headers for the table.
          */
@@ -1128,10 +1153,6 @@ declare namespace LocalJSX {
           * 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.
          */
@@ -1155,6 +1176,10 @@ declare namespace LocalJSX {
     label: string;
     value: string;
   }[];
+        /**
+          * If `true`, the pagination bar will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * Emitted when the items per page option is changed.
          */
@@ -1179,6 +1204,10 @@ declare namespace LocalJSX {
           * If `true`, the select input to control 'items per page' should be displayed.
          */
         "showItemsPerPageControl"?: 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"?: IcThemeMode1;
         /**
           * Total number of items to be displayed across all pages.
          */
@@ -1229,12 +1258,12 @@ declare namespace LocalJSX {
           * 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.
+          * 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.
          */
-        "appearance"?: IcThemeForegroundNoDefault1;
+        "theme"?: IcThemeMode2;
+    }
+    interface IcTreeView {
         /**
           * If `true`, tree items will have inset focus.
          */
@@ -1247,6 +1276,10 @@ declare namespace LocalJSX {
           * The size of the tree view.
          */
         "size"?: IcSizes;
+        /**
+          * 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"?: IcThemeMode2;
     }
     interface IntrinsicElements {
         "ic-card-horizontal": IcCardHorizontal;

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

@@ -23,6 +23,7 @@ export type IcTheme = {
     mode: IcThemeForeground;
     color: IcColorRGB;
 };
+export type IcThemeMode = "dark" | "light" | "inherit";
 export type IcAdditionalFieldTypes = "static" | "dynamic";
 export type IcColorRGB = {
     r: number;
@@ -69,11 +70,12 @@ export interface IcPaginationBarOptions {
     showItemsPerPageControl?: boolean;
     showGoToPageControl?: boolean;
     alignment?: IcPaginationAlignmentOptions;
-    appearance?: IcThemeForeground;
     itemLabel?: string;
     pageLabel?: string;
     hideRangeLabel?: boolean;
     hideAllFromItemsPerPage?: boolean;
+    theme?: IcThemeMode;
+    monochrome?: boolean;
 }
 export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
 export type IcDateFormat = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";