@ukic/web-components 2.0.0-alpha.124 → 2.0.0-alpha.125

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, IcTheme, IcThemeForeground, IcTypographyVariants } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcTheme, IcThemeForeground, IcTypographyVariants } from "./utils/types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 import { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
 import { IcFooterBreakpoints } from "./components/ic-footer/ic-footer.types";
@@ -924,6 +924,10 @@ export namespace Components {
         "fullHeight"?: boolean;
     }
     interface IcSelect {
+        /**
+          * Number of characters until suggestions appear for a searchable select.
+         */
+        "charactersUntilSuggestions"?: number;
         /**
           * Specify whether dense styling is to be applied to the element.
          */
@@ -932,6 +936,10 @@ export namespace Components {
           * Specify whether the input is disabled.
          */
         "disabled"?: boolean;
+        /**
+          * Provide text for empty results list
+         */
+        "emptyOptionListText": string;
         /**
           * If true, then fill width of container.
          */
@@ -944,6 +952,14 @@ export namespace Components {
           * Hides the label and applies the required label value as an aria-label.
          */
         "hideLabel"?: boolean;
+        /**
+          * If true, descriptions of options are included when filtering options in a searchable select.
+         */
+        "includeDescriptionsInSearch"?: boolean;
+        /**
+          * If true, group titles of grouped options are included when filtering options in a searchable select.
+         */
+        "includeGroupTitlesInSearch"?: boolean;
         /**
           * Provide a label for the input.
          */
@@ -968,12 +984,20 @@ export namespace Components {
           * Specify if the input requires a value.
          */
         "required"?: boolean;
+        /**
+          * Whether the search string of the searchable select should match the start of or anywhere in the options.
+         */
+        "searchMatchPosition"?: IcSearchMatchPositions;
+        /**
+          * If true, the select can be typed in to filter options.
+         */
+        "searchable"?: boolean;
         /**
           * Sets focus on the input box.
          */
         "setFocus": () => Promise<void>;
         /**
-          * Display a button which clears the input when clicked.
+          * Display a button which clears the input when clicked. The button will always appear on the searchable select.
          */
         "showClearButton"?: boolean;
         /**
@@ -1342,7 +1366,7 @@ export namespace Components {
     }
     interface IcTypography {
         /**
-          * Adds margin to the bottom of the typography relative to the font-size.
+          * Adds appropriate margins to the top and bottom of the typography.
          */
         "spacing"?: boolean;
         /**
@@ -2713,6 +2737,10 @@ declare namespace LocalJSX {
         "fullHeight"?: boolean;
     }
     interface IcSelect {
+        /**
+          * Number of characters until suggestions appear for a searchable select.
+         */
+        "charactersUntilSuggestions"?: number;
         /**
           * Specify whether dense styling is to be applied to the element.
          */
@@ -2721,6 +2749,10 @@ declare namespace LocalJSX {
           * Specify whether the input is disabled.
          */
         "disabled"?: boolean;
+        /**
+          * Provide text for empty results list
+         */
+        "emptyOptionListText"?: string;
         /**
           * If true, then fill width of container.
          */
@@ -2733,6 +2765,14 @@ declare namespace LocalJSX {
           * Hides the label and applies the required label value as an aria-label.
          */
         "hideLabel"?: boolean;
+        /**
+          * If true, descriptions of options are included when filtering options in a searchable select.
+         */
+        "includeDescriptionsInSearch"?: boolean;
+        /**
+          * If true, group titles of grouped options are included when filtering options in a searchable select.
+         */
+        "includeGroupTitlesInSearch"?: boolean;
         /**
           * Provide a label for the input.
          */
@@ -2770,7 +2810,15 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * Display a button which clears the input when clicked.
+          * Whether the search string of the searchable select should match the start of or anywhere in the options.
+         */
+        "searchMatchPosition"?: IcSearchMatchPositions;
+        /**
+          * If true, the select can be typed in to filter options.
+         */
+        "searchable"?: boolean;
+        /**
+          * Display a button which clears the input when clicked. The button will always appear on the searchable select.
          */
         "showClearButton"?: boolean;
         /**
@@ -3160,7 +3208,7 @@ declare namespace LocalJSX {
     }
     interface IcTypography {
         /**
-          * Adds margin to the bottom of the typography relative to the font-size.
+          * Adds appropriate margins to the top and bottom of the typography.
          */
         "spacing"?: boolean;
         /**

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../stencil-public-runtime";
-import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcColorRGB } from "./types";
+import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcColorRGB, IcSearchMatchPositions } from "./types";
 import { IcMenuOption, IcThemeForeground } from "../utils/types";
 /**
  * Used to inherit global attributes set on the host. Called in componentWillLoad and assigned
@@ -58,9 +58,18 @@ export declare const isEmptyString: (value: string) => boolean;
  * Extracts the label using the value from an object. Requires the object to have a label and value property.
  * @param value - value from object
  * @param options - list of menu items
- * @returns - label correspoonding to value
+ * @returns - label corresponding to value
  */
 export declare const getLabelFromValue: (value: string, options: IcMenuOption[]) => string | undefined;
+/**
+ * Filters the options based on the search string.
+ * @param options - array of options
+ * @param includeDescriptions - determines whether option descriptions are included when filtering options
+ * @param searchString - string used to filter the options
+ * @param position - whether the search string matches the start of or anywhere in the options
+ * @returns filtered array of options
+ */
+export declare const getFilteredMenuOptions: (options: IcMenuOption[], includeDescriptions: boolean, searchString: string, position: IcSearchMatchPositions) => IcMenuOption[];
 export declare const deviceSizeMatches: (size: number) => boolean;
 export declare const getCurrentDeviceSize: () => number;
 export declare const getCssProperty: (cssVar: string) => string;

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

@@ -38,6 +38,7 @@ export interface IcMenuOption {
   recommended?: boolean;
   children?: IcMenuOption[];
 }
+export declare type IcSearchMatchPositions = "start" | "anywhere";
 export declare type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
 export declare type IcRequiredPropsTypes = string | boolean | number | HTMLElement | IcMenuOption[];
 export declare type IcPropObject = {