@ukic/web-components 2.3.0 → 2.4.0

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

@@ -91,6 +91,10 @@ export declare class SearchBar {
    * The label for the search bar.
    */
   label: string;
+  /**
+   * The custom name for the label field to correspond with the IcMenuOption type.
+   */
+  labelField?: string;
   /**
    * Trigger loading state when fetching options asyncronously
    */
@@ -135,6 +139,10 @@ export declare class SearchBar {
    * If using external filtering, set a timeout for when loading takes too long.
    */
   timeout?: number;
+  /**
+   * The custom name for the value field to correspond with the IcMenuOption type.
+   */
+  valueField?: string;
   loadingHandler(newValue: boolean): void;
   filteredOptions: IcMenuOption[];
   filteredOptionsHandler(newOptions: IcMenuOption[]): void;

package/dist/types/components/ic-select/ic-select.d.ts

@@ -132,6 +132,7 @@ export declare class Select {
    */
   options?: IcMenuOption[];
   filteredOptions: IcMenuOption[];
+  uniqueOptions: IcMenuOption[];
   watchOptionsHandler(): void;
   /**
    * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
@@ -188,6 +189,15 @@ export declare class Select {
   private updateOnChangeDebounce;
   private emitIcChange;
   private emitImmediateIcChange;
+  /**
+   * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
+   * @param options array of IcMenuOptions
+   * @returns a new options object, with all entries possessing a duplicate 'value' field removed
+   */
+  private deduplicateOptions;
+  /**
+   * Loop through options array and for all options with no value, infer it from the label
+   */
   private setOptionsValuesFromLabels;
   private setUngroupedOptions;
   private setTextColor;
@@ -211,6 +221,10 @@ export declare class Select {
   private handleClearButtonFocus;
   private handleClearButtonBlur;
   private handleFilter;
+  /**
+   * Put the select component into loading state.
+   * Replace options with the loading message. If timeout is enabled, set the timeout and once passed, replace options with the loading error message
+   */
   private triggerLoading;
   private getValueFromLabel;
   private handleSearchableSelectInput;

package/dist/types/components.d.ts

@@ -827,6 +827,10 @@ export namespace Components {
           * The label for the input element.
          */
         "inputLabel": string;
+        /**
+          * The custom name for the label field for IcMenuOption.
+         */
+        "labelField": string;
         /**
           * The ID of the menu.
          */
@@ -852,6 +856,10 @@ export namespace Components {
           * The value of the currently selected option.
          */
         "value": string;
+        /**
+          * The custom name for the value field for IcMenuOption.
+         */
+        "valueField": string;
     }
     interface IcMenuGroup {
         /**
@@ -1282,6 +1290,10 @@ export namespace Components {
           * The label for the search bar.
          */
         "label": string;
+        /**
+          * The custom name for the label field to correspond with the IcMenuOption type.
+         */
+        "labelField"?: string;
         /**
           * Trigger loading state when fetching options asyncronously
          */
@@ -1338,6 +1350,10 @@ export namespace Components {
           * The value of the search input.
          */
         "value": string;
+        /**
+          * The custom name for the value field to correspond with the IcMenuOption type.
+         */
+        "valueField"?: string;
     }
     interface IcSectionContainer {
         /**
@@ -3229,6 +3245,10 @@ declare namespace LocalJSX {
           * The label for the input element.
          */
         "inputLabel": string;
+        /**
+          * The custom name for the label field for IcMenuOption.
+         */
+        "labelField"?: string;
         /**
           * The ID of the menu.
          */
@@ -3253,6 +3273,10 @@ declare namespace LocalJSX {
           * The value of the currently selected option.
          */
         "value": string;
+        /**
+          * The custom name for the value field for IcMenuOption.
+         */
+        "valueField"?: string;
     }
     interface IcMenuGroup {
         /**
@@ -3675,6 +3699,10 @@ declare namespace LocalJSX {
           * The label for the search bar.
          */
         "label": string;
+        /**
+          * The custom name for the label field to correspond with the IcMenuOption type.
+         */
+        "labelField"?: string;
         /**
           * Trigger loading state when fetching options asyncronously
          */
@@ -3771,6 +3799,10 @@ declare namespace LocalJSX {
           * The value of the search input.
          */
         "value"?: string;
+        /**
+          * The custom name for the value field to correspond with the IcMenuOption type.
+         */
+        "valueField"?: string;
     }
     interface IcSectionContainer {
         /**

package/dist/types/stencil-public-runtime.d.ts

@@ -62,7 +62,7 @@ export interface PropOptions {
     /**
      * The name of the associated DOM attribute.
      * Stencil uses different heuristics to determine the default name of the attribute,
-     * but using this property, you can override the default behaviour.
+     * but using this property, you can override the default behavior.
      */
     attribute?: string | null;
     /**
@@ -128,7 +128,7 @@ export interface ListenOptions {
      * By default, Stencil uses several heuristics to determine if
      * it must attach a `passive` event listener or not.
      *
-     * Using the `passive` option can be used to change the default behaviour.
+     * Using the `passive` option can be used to change the default behavior.
      * Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information.
      */
     passive?: boolean;
@@ -432,7 +432,7 @@ export interface QueueApi {
 /**
  * Host
  */
-interface HostAttributes {
+export interface HostAttributes {
     class?: string | {
         [className: string]: boolean;
     };
@@ -471,7 +471,7 @@ export interface FunctionalUtilities {
     /**
      * Utility for reading the children of a functional component at runtime.
      * Since the Stencil runtime uses a different interface for children it is
-     * not recommendeded to read the children directly, and is preferable to use
+     * not recommended to read the children directly, and is preferable to use
      * this utility to, for instance, perform a side effect for each child.
      */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
@@ -872,6 +872,8 @@ export declare namespace JSXBase {
     }
     interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
         alt?: string;
+        crossOrigin?: string;
+        crossorigin?: string;
         decoding?: 'async' | 'auto' | 'sync';
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
@@ -930,6 +932,8 @@ export declare namespace JSXBase {
         minlength?: number | string;
         multiple?: boolean;
         name?: string;
+        onSelect?: (event: Event) => void;
+        onselect?: (event: Event) => void;
         pattern?: string;
         placeholder?: string;
         readOnly?: boolean;
@@ -1143,6 +1147,8 @@ export declare namespace JSXBase {
         minLength?: number;
         minlength?: number | string;
         name?: string;
+        onSelect?: (event: Event) => void;
+        onselect?: (event: Event) => void;
         placeholder?: string;
         readOnly?: boolean;
         readonly?: boolean | string;
@@ -1289,7 +1295,7 @@ export declare namespace JSXBase {
         clipPathUnits?: number | string;
         'clip-rule'?: number | string;
         'color-interpolation'?: number | string;
-        'color-interpolation-filters'?: 'auto' | 's-rGB' | 'linear-rGB' | 'inherit';
+        'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB';
         'color-profile'?: number | string;
         'color-rendering'?: number | string;
         contentScriptType?: number | string;
@@ -1619,8 +1625,14 @@ export declare namespace JSXBase {
         onAnimationEndCapture?: (event: AnimationEvent) => void;
         onAnimationIteration?: (event: AnimationEvent) => void;
         onAnimationIterationCapture?: (event: AnimationEvent) => void;
+        onTransitionCancel?: (event: TransitionEvent) => void;
+        onTransitionCancelCapture?: (event: TransitionEvent) => void;
         onTransitionEnd?: (event: TransitionEvent) => void;
         onTransitionEndCapture?: (event: TransitionEvent) => void;
+        onTransitionRun?: (event: TransitionEvent) => void;
+        onTransitionRunCapture?: (event: TransitionEvent) => void;
+        onTransitionStart?: (event: TransitionEvent) => void;
+        onTransitionStartCapture?: (event: TransitionEvent) => void;
     }
 }
 export interface JSXAttributes<T = Element> {

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

@@ -60,7 +60,7 @@ export declare const isEmptyString: (value: string) => boolean;
  * @param options - list of menu items
  * @returns - label corresponding to value
  */
-export declare const getLabelFromValue: (value: string, options: IcMenuOption[]) => string | undefined;
+export declare const getLabelFromValue: (value: string, options: IcMenuOption[], valueField?: string, labelField?: string) => string | undefined;
 /**
  * Filters the options based on the search string.
  * @param options - array of options
@@ -69,7 +69,7 @@ export declare const getLabelFromValue: (value: string, options: IcMenuOption[])
  * @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 getFilteredMenuOptions: (options: IcMenuOption[], includeDescriptions: boolean, searchString: string, position: IcSearchMatchPositions, labelField?: string) => 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

@@ -36,15 +36,24 @@ export type IcNavParentDetails = {
   parent: HTMLElement;
 };
 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";
+/**
+ * @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.
+ */
 export interface IcMenuOption {
-  value?: string;
-  label: string;
   description?: string;
   disabled?: boolean;
   recommended?: boolean;
   children?: IcMenuOption[];
   loading?: boolean;
   timedOut?: boolean;
+  [key: string]: any;
+  element?: {
+    component: any;
+    ariaLabel: string;
+  };
+  icon?: any;
 }
 export type IcSearchMatchPositions = "start" | "anywhere";
 export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;

package/hydrate/index.d.ts

@@ -1,4 +1,4 @@
-// Generated by dts-bundle-generator v7.2.0
+// Generated by dts-bundle-generator v8.0.1
 
 export declare function createWindowFromHtml(templateHtml: string, uniqueId: string): any;
 export interface HydrateDocumentOptions {
@@ -14,7 +14,7 @@ export interface HydrateDocumentOptions {
 	 */
 	canonicalUrl?: string;
 	/**
-	 * Include the HTML comments and attributes used by the clientside
+	 * Include the HTML comments and attributes used by the client-side
 	 * JavaScript to read the structure of the HTML and rebuild each
 	 * component. Defaults to `true`.
 	 */
@@ -35,7 +35,7 @@ export interface HydrateDocumentOptions {
 	direction?: string;
 	/**
 	 * Component tag names listed here will not be prerendered, nor will
-	 * hydrated on the clientside. Components listed here will be ignored
+	 * hydrated on the client-side. Components listed here will be ignored
 	 * as custom elements and treated no differently than a `<div>`.
 	 */
 	excludeComponents?: string[];
@@ -68,11 +68,11 @@ export interface HydrateDocumentOptions {
 	 */
 	runtimeLogging?: boolean;
 	/**
-	 * Component tags listed here will only be prerendered or serverside-rendered
-	 * and will not be clientside hydrated. This is useful for components that
+	 * Component tags listed here will only be prerendered or server-side-rendered
+	 * and will not be client-side hydrated. This is useful for components that
 	 * are not dynamic and do not need to be defined as a custom element within the
 	 * browser. For example, a header or footer component would be a good example that
-	 * may not require any clientside JavaScript.
+	 * may not require any client-side JavaScript.
 	 */
 	staticComponents?: string[];
 	/**