@ukic/web-components 2.1.0-beta.7 → 2.1.0-beta.8

package/dist/types/components.d.ts

@@ -7,7 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IcAlertVariants } from "./components/ic-alert/ic-alert.types";
 import { IcButtonSizes, IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
-import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants } from "./utils/types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 import { IcChipAppearance, IcChipSizes } from "./components/ic-chip/ic-chip.types";
 import { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
@@ -72,6 +72,10 @@ export namespace Components {
           * The title of the breadcrumb.
          */
         "pageTitle": string;
+        /**
+          * Sets focus on the breadcrumb.
+         */
+        "setFocus": () => Promise<void>;
         "showBackIcon": boolean;
     }
     interface IcBreadcrumbGroup {
@@ -126,7 +130,7 @@ export namespace Components {
          */
         "rel"?: string;
         /**
-          * Sets focus on the native `button`
+          * Sets focus on the native `button`.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -192,6 +196,10 @@ export namespace Components {
           * The relationship of the linked URL as space-separated link types.
          */
         "rel"?: string;
+        /**
+          * Sets focus on the card.
+         */
+        "setFocus": () => Promise<void>;
         /**
           * The subheading for the card.
          */
@@ -234,6 +242,10 @@ export namespace Components {
           * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.
          */
         "name": string;
+        /**
+          * Sets focus on the checkbox.
+         */
+        "setFocus": () => Promise<void>;
         /**
           * The value for the checkbox.
          */
@@ -294,6 +306,10 @@ export namespace Components {
           * The text rendered within the chip.
          */
         "label": string;
+        /**
+          * Sets focus on the chip.
+         */
+        "setFocus": () => Promise<void>;
         /**
           * The size of the chip.
          */
@@ -548,6 +564,10 @@ export namespace Components {
           * The relationship of the linked URL as space-separated link types.
          */
         "rel"?: string;
+        /**
+          * Sets focus on the link.
+         */
+        "setFocus": () => Promise<void>;
         /**
           * If `true`, the 'open in new tab/window' icon will be displayed.
          */
@@ -614,9 +634,6 @@ export namespace Components {
           * If `true`, the menu will fill the width of the container.
          */
         "fullWidth": boolean;
-        /**
-          * If menu is opened with the mouse, emit icMenuStateChange custom event.
-         */
         "handleClickOpen": () => Promise<void>;
         /**
           * Used alongside activationType If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.
@@ -680,7 +697,7 @@ export namespace Components {
          */
         "rel"?: string;
         /**
-          * Sets focus on the native `button`
+          * Sets focus on the native `button`.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -698,7 +715,7 @@ export namespace Components {
          */
         "label": string;
         /**
-          * Sets focus on the nav item
+          * Sets focus on the nav item.
          */
         "setFocus": () => Promise<void>;
     }
@@ -719,7 +736,7 @@ export namespace Components {
          */
         "selected": boolean;
         /**
-          * Sets focus on the nav item
+          * Sets focus on the nav item.
          */
         "setFocus": () => Promise<void>;
     }
@@ -788,6 +805,10 @@ export namespace Components {
           * The name for the radio group to differentiate from other groups.
          */
         "name": string;
+        /**
+          * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.
+         */
+        "orientation": IcOrientation;
         /**
           * If `true`, the radio group will require a value.
          */
@@ -834,6 +855,10 @@ export namespace Components {
           * If `true`, the radio option will be displayed in a selected state.
          */
         "selected"?: boolean;
+        /**
+          * Sets focus on the radio option.
+         */
+        "setFocus": () => Promise<void>;
         /**
           * The value for the radio option.
          */
@@ -921,7 +946,7 @@ export namespace Components {
          */
         "required"?: boolean;
         /**
-          * Sets focus on the native `input`
+          * Sets focus on the native `input`.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -952,6 +977,14 @@ export namespace Components {
           * The number of characters until suggestions appear for a searchable select.
          */
         "charactersUntilSuggestions"?: number;
+        /**
+          * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+         */
+        "debounce"?: number;
+        /**
+          * Specify whether to disable the built in filtering for a searchable variant. For example, if options will already be filtered from external source.
+         */
+        "disableFilter"?: boolean;
         /**
           * If `true`, the disabled state will be set.
          */
@@ -973,11 +1006,11 @@ export namespace Components {
          */
         "hideLabel"?: boolean;
         /**
-          * If `true`, descriptions of options will be included when filtering options in a searchable select.
+          * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
          */
         "includeDescriptionsInSearch"?: boolean;
         /**
-          * If `true`, group titles of grouped options will be included when filtering options in a searchable select.
+          * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
          */
         "includeGroupTitlesInSearch"?: boolean;
         /**
@@ -1005,7 +1038,7 @@ export namespace Components {
          */
         "required"?: boolean;
         /**
-          * Whether the search string of the searchable select should match the start of or anywhere in the options.
+          * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
          */
         "searchMatchPosition"?: IcSearchMatchPositions;
         /**
@@ -1039,7 +1072,7 @@ export namespace Components {
     }
     interface IcSideNavigation {
         /**
-          * The title of the app to be displayed.
+          * The app title to be displayed. This is required, unless a slotted app title link is used.
          */
         "appTitle": string;
         /**
@@ -1173,6 +1206,10 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name"?: string;
+        /**
+          * Sets focus on the switch.
+         */
+        "setFocus": () => Promise<void>;
         /**
           * If `true`, the switch will render the On/Off state text.
          */
@@ -1194,6 +1231,10 @@ export namespace Components {
          */
         "disabled"?: boolean;
         "selected"?: boolean;
+        /**
+          * Sets focus on the tab.
+         */
+        "setFocus": () => Promise<void>;
         "tabId"?: string;
         "tabPosition"?: number;
     }
@@ -1325,7 +1366,7 @@ export namespace Components {
          */
         "rows": number;
         /**
-          * Sets focus on the native `input`
+          * Sets focus on the native `input`.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -1384,7 +1425,7 @@ export namespace Components {
     }
     interface IcTopNavigation {
         /**
-          * The app title to be displayed.
+          * The app title to be displayed. This is required, unless a slotted app title link is used.
          */
         "appTitle": string;
         /**
@@ -2470,14 +2511,6 @@ declare namespace LocalJSX {
           * The ID of the menu.
          */
         "menuId": string;
-        /**
-          * Emitted when state of menu changes (i.e. open or close).
-         */
-        "onIcMenuStateChange"?: (event: IcMenuCustomEvent<IcMenuChangeEventDetail>) => void;
-        /**
-          * Emitted when an option is selected.
-         */
-        "onIcOptionSelect"?: (event: IcMenuCustomEvent<IcOptionSelectEventDetail>) => void;
         /**
           * If `true`, the menu will be displayed open.
          */
@@ -2618,6 +2651,10 @@ declare namespace LocalJSX {
           * Emitted when a user selects a radio.
          */
         "onIcChange"?: (event: IcRadioGroupCustomEvent<IcValueEventDetail>) => void;
+        /**
+          * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.
+         */
+        "orientation"?: IcOrientation;
         /**
           * If `true`, the radio group will require a value.
          */
@@ -2826,6 +2863,14 @@ declare namespace LocalJSX {
           * The number of characters until suggestions appear for a searchable select.
          */
         "charactersUntilSuggestions"?: number;
+        /**
+          * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+         */
+        "debounce"?: number;
+        /**
+          * Specify whether to disable the built in filtering for a searchable variant. For example, if options will already be filtered from external source.
+         */
+        "disableFilter"?: boolean;
         /**
           * If `true`, the disabled state will be set.
          */
@@ -2847,11 +2892,11 @@ declare namespace LocalJSX {
          */
         "hideLabel"?: boolean;
         /**
-          * If `true`, descriptions of options will be included when filtering options in a searchable select.
+          * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
          */
         "includeDescriptionsInSearch"?: boolean;
         /**
-          * If `true`, group titles of grouped options will be included when filtering options in a searchable select.
+          * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
          */
         "includeGroupTitlesInSearch"?: boolean;
         /**
@@ -2863,17 +2908,29 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emitted when select has blur.
+          * Emitted when select loses focus.
          */
         "onIcBlur"?: (event: IcSelectCustomEvent<void>) => void;
         /**
-          * Emitted when a value is selected.
+          * Emitted when the value changes.
          */
         "onIcChange"?: (event: IcSelectCustomEvent<IcValueEventDetail>) => void;
         /**
-          * Emitted when select has focus.
+          * Emitted when clear button clicked.
+         */
+        "onIcClear"?: (event: IcSelectCustomEvent<void>) => void;
+        /**
+          * Emitted when select gains focus.
          */
         "onIcFocus"?: (event: IcSelectCustomEvent<void>) => void;
+        /**
+          * Emitted when a keyboard input occurred.
+         */
+        "onIcInput"?: (event: IcSelectCustomEvent<IcValueEventDetail>) => void;
+        /**
+          * Emitted when option is highlighted within the menu.
+         */
+        "onIcOptionSelect"?: (event: IcSelectCustomEvent<IcOptionSelectEventDetail>) => void;
         /**
           * The possible selection options.
          */
@@ -2891,7 +2948,7 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * Whether the search string of the searchable select should match the start of or anywhere in the options.
+          * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
          */
         "searchMatchPosition"?: IcSearchMatchPositions;
         /**
@@ -2921,9 +2978,9 @@ declare namespace LocalJSX {
     }
     interface IcSideNavigation {
         /**
-          * The title of the app to be displayed.
+          * The app title to be displayed. This is required, unless a slotted app title link is used.
          */
-        "appTitle": string;
+        "appTitle"?: string;
         /**
           * If `true`, the icon and label will appear when side navigation is collapsed.
          */
@@ -3275,9 +3332,9 @@ declare namespace LocalJSX {
     }
     interface IcTopNavigation {
         /**
-          * The app title to be displayed.
+          * The app title to be displayed. This is required, unless a slotted app title link is used.
          */
-        "appTitle": string;
+        "appTitle"?: string;
         /**
           * The alignment of the top navigation content.
          */

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

@@ -118,3 +118,4 @@ export declare const hasClassificationBanner: () => boolean;
 export declare const getForm: (el: HTMLElement) => HTMLFormElement | null;
 export declare const addFormResetListener: (el: HTMLElement, callbackFn: IcCallbackFunctionNoReturn) => void;
 export declare const removeFormResetListener: (el: HTMLElement, callbackFn: IcCallbackFunctionNoReturn) => void;
+export declare const pxToRem: (px: string, base?: number) => string;

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

@@ -50,6 +50,7 @@ export declare type IcPropObject = {
   propName: string;
 };
 export declare type IcRelatedTarget = EventTarget | undefined;
+export declare type IcOrientation = "horizontal" | "vertical";
 export interface IcValueEventDetail {
   value: string;
 }