@ukic/canary-web-components 3.0.0-canary.27 → 3.0.0-canary.29

package/dist/types/components/ic-time-input/ic-time-input.stories.d.ts

@@ -76,46 +76,52 @@ export namespace Validation {
     let name_10: string;
     export { name_10 as name };
 }
-export namespace IcChangeEmitTimePartChanges {
-    export function render_12(): import("lit-html").TemplateResult<1>;
+export namespace AriaLiveBehaviour {
+    export function render_12(args: any): import("lit-html").TemplateResult<1>;
     export { render_12 as render };
     let name_11: string;
     export { name_11 as name };
 }
-export namespace TimePeriod {
+export namespace IcChangeEmitTimePartChanges {
     export function render_13(): import("lit-html").TemplateResult<1>;
     export { render_13 as render };
     let name_12: string;
     export { name_12 as name };
 }
-export namespace HHMM {
+export namespace TimePeriod {
     export function render_14(): import("lit-html").TemplateResult<1>;
     export { render_14 as render };
     let name_13: string;
     export { name_13 as name };
 }
-export namespace MinTime {
+export namespace HHMM {
     export function render_15(): import("lit-html").TemplateResult<1>;
     export { render_15 as render };
     let name_14: string;
     export { name_14 as name };
 }
-export namespace MaxTime {
+export namespace MinTime {
     export function render_16(): import("lit-html").TemplateResult<1>;
     export { render_16 as render };
     let name_15: string;
     export { name_15 as name };
 }
-export namespace DisableTimes {
+export namespace MaxTime {
     export function render_17(): import("lit-html").TemplateResult<1>;
     export { render_17 as render };
     let name_16: string;
     export { name_16 as name };
 }
-export namespace WithClearingValue {
+export namespace DisableTimes {
     export function render_18(): import("lit-html").TemplateResult<1>;
     export { render_18 as render };
     let name_17: string;
     export { name_17 as name };
 }
+export namespace WithClearingValue {
+    export function render_19(): import("lit-html").TemplateResult<1>;
+    export { render_19 as render };
+    let name_18: string;
+    export { name_18 as name };
+}
 import readme from "./readme.md";

package/dist/types/components.d.ts

@@ -5,18 +5,16 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
-import { IcThemeMode } from "@ukic/web-components";
+import { IcAriaLive, IcCardDensity, IcDateFormat, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcPositionTopOrRight, IcSizes, IcThemeMode, IcTimeFormat, IcWeekDays } from "./utils/types";
 import { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
-import { IcDateFormat, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcPositionTopOrRight, IcSizes, IcThemeMode as IcThemeMode1, IcTimeFormat, IcWeekDays } from "./utils/types";
 import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
+import { IcThemeMode as IcThemeMode1 } from "@ukic/web-components";
 import { IcItemsPerPageChangeEventDetail, IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
 import { IcTreeItemOptions } from "./components/ic-tree-view/ic-tree-view.types";
-export { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
-export { IcThemeMode } from "@ukic/web-components";
+export { IcAriaLive, IcCardDensity, IcDateFormat, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcPositionTopOrRight, IcSizes, IcThemeMode, IcTimeFormat, IcWeekDays } from "./utils/types";
 export { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
-export { IcDateFormat, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcPositionTopOrRight, IcSizes, IcThemeMode as IcThemeMode1, IcTimeFormat, IcWeekDays } from "./utils/types";
 export { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
+export { IcThemeMode as IcThemeMode1 } from "@ukic/web-components";
 export { IcItemsPerPageChangeEventDetail, IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
 export { IcTreeItemOptions } from "./components/ic-tree-view/ic-tree-view.types";
 export namespace Components {
@@ -25,6 +23,10 @@ export namespace Components {
           * If `true`, the horizontal card will be a clickable variant, instead of static.
          */
         "clickable": boolean;
+        /**
+          * The padding of the horizontal card.
+         */
+        "density": IcCardDensity;
         /**
           * If `true`, the horizontal card will be disabled if it is clickable.
          */
@@ -60,7 +62,11 @@ export namespace Components {
         /**
           * The size of the horizontal card.
          */
-        "size": IcCardSizes;
+        "size": IcSizes;
+        /**
+          * The subheading for the card.
+         */
+        "subheading"?: string;
         /**
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
@@ -182,7 +188,7 @@ export namespace Components {
         /**
           * 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;
+        "theme"?: IcThemeMode;
         /**
           * Sets the method used to truncate long 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.
          */
@@ -327,8 +333,12 @@ export namespace Components {
         /**
           * 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"?: IcThemeMode1;
+        "theme"?: IcThemeMode;
         "triggerIcChange": (d: Date | null) => Promise<void>;
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive": IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -450,7 +460,11 @@ export namespace Components {
         /**
           * 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"?: IcThemeMode1;
+        "theme"?: IcThemeMode;
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive": IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -527,7 +541,7 @@ export namespace Components {
         /**
           * 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;
+        "theme"?: IcThemeMode1;
         /**
           * Total number of items to be displayed across all pages.
          */
@@ -565,7 +579,7 @@ export namespace Components {
         /**
           * 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;
+        "theme"?: IcThemeMode;
         /**
           * If `true`, the table of contents item label will be truncated.
          */
@@ -641,7 +655,7 @@ export namespace Components {
         /**
           * Sets the time picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "theme"?: IcThemeMode1;
+        "theme"?: IcThemeMode;
         /**
           * The format in which the time will be displayed.
          */
@@ -651,6 +665,10 @@ export namespace Components {
          */
         "timePeriod": "12" | "24";
         "triggerIcChange": (t: Date | null) => Promise<void>;
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive": IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in time validation.
          */
@@ -712,7 +730,7 @@ export namespace Components {
         /**
           * 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;
+        "theme"?: IcThemeMode;
         /**
           * Sets the tree item id. Must be unique.
          */
@@ -735,7 +753,7 @@ export namespace Components {
         /**
           * 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;
+        "theme"?: IcThemeMode;
         /**
           * The content within the tree view tree items. This will take precedence over slotted content.
          */
@@ -791,6 +809,8 @@ declare global {
         "icSelectedRowChange": {
     row: IcDataTableDataType | null;
     selectedRows: IcDataTableDataType[];
+    icRowId: string | null;
+    selectedIcRowIds: string[];
   };
         "icColumnsLoaded": void;
         "icDataLoaded": void;
@@ -969,6 +989,10 @@ declare namespace LocalJSX {
           * If `true`, the horizontal card will be a clickable variant, instead of static.
          */
         "clickable"?: boolean;
+        /**
+          * The padding of the horizontal card.
+         */
+        "density"?: IcCardDensity;
         /**
           * If `true`, the horizontal card will be disabled if it is clickable.
          */
@@ -1000,7 +1024,11 @@ declare namespace LocalJSX {
         /**
           * The size of the horizontal card.
          */
-        "size"?: IcCardSizes;
+        "size"?: IcSizes;
+        /**
+          * The subheading for the card.
+         */
+        "subheading"?: string;
         /**
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
@@ -1102,6 +1130,8 @@ declare namespace LocalJSX {
         "onIcSelectedRowChange"?: (event: IcDataTableCustomEvent<{
     row: IcDataTableDataType | null;
     selectedRows: IcDataTableDataType[];
+    icRowId: string | null;
+    selectedIcRowIds: string[];
   }>) => void;
         /**
           * Emitted when a column sort button is clicked.
@@ -1145,7 +1175,7 @@ declare namespace LocalJSX {
         /**
           * 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;
+        "theme"?: IcThemeMode;
         /**
           * Sets the method used to truncate long 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.
          */
@@ -1306,7 +1336,11 @@ declare namespace LocalJSX {
         /**
           * 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"?: IcThemeMode1;
+        "theme"?: IcThemeMode;
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive"?: IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -1432,7 +1466,11 @@ declare namespace LocalJSX {
         /**
           * 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"?: IcThemeMode1;
+        "theme"?: IcThemeMode;
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive"?: IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -1517,7 +1555,7 @@ declare namespace LocalJSX {
         /**
           * 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;
+        "theme"?: IcThemeMode1;
         /**
           * Total number of items to be displayed across all pages.
          */
@@ -1555,7 +1593,7 @@ declare namespace LocalJSX {
         /**
           * 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;
+        "theme"?: IcThemeMode;
         /**
           * If `true`, the table of contents item label will be truncated.
          */
@@ -1644,7 +1682,7 @@ declare namespace LocalJSX {
         /**
           * Sets the time picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "theme"?: IcThemeMode1;
+        "theme"?: IcThemeMode;
         /**
           * The format in which the time will be displayed.
          */
@@ -1653,6 +1691,10 @@ declare namespace LocalJSX {
           * The time period format: "12" for 12-hour, "24" for 24-hour. Defaults to "24".
          */
         "timePeriod"?: "12" | "24";
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive"?: IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in time validation.
          */
@@ -1717,7 +1759,7 @@ declare namespace LocalJSX {
         /**
           * 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;
+        "theme"?: IcThemeMode;
         /**
           * Sets the tree item id. Must be unique.
          */
@@ -1739,7 +1781,7 @@ declare namespace LocalJSX {
         /**
           * 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;
+        "theme"?: IcThemeMode;
         /**
           * The content within the tree view tree items. This will take precedence over slotted content.
          */

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

@@ -42,8 +42,10 @@ export type IcNavParentDetails = {
 export type IcTypographyVariants = "h1" | "h2" | "h3" | "h4" | "subtitle-large" | "subtitle-small" | "body" | "label" | "label-uppercase" | "caption" | "caption-uppercase" | "code-large" | "code-small" | "code-extra-small" | "badge" | "badge-small";
 /**
  * @interface IcMenuOption
- * @field {string} A label field to options. Defaults to "label", but can have any custom name.
- * @field {string} A value field to options. Defaults to "value", but can have any custom name.
+ * Set "label" and "value" props to use as the option's label and value.
+ * Alternatively, custom names for these props can be used e.g. by setting the "labelField" and "valueField" props on the relevant component.
+ *
+ * Any props supplied to the "htmlProps" object will be spread onto the option's underlying <li> element.
  */
 export interface IcMenuOption {
     description?: string;
@@ -58,6 +60,7 @@ export interface IcMenuOption {
         ariaLabel: string;
     };
     icon?: any;
+    htmlProps?: Record<string, any>;
 }
 export type IcSearchMatchPositions = "start" | "anywhere";
 export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
@@ -158,4 +161,6 @@ export declare enum IcWeekDays {
     Saturday = 6
 }
 export type IcPositionTopOrRight = "top" | "right";
+export type IcAriaLive = "polite" | "assertive" | "off";
+export type IcCardDensity = "default" | "spacious";
 export {};