@ukic/web-components 3.20.0 → 3.22.0

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

@@ -1,40 +1,35 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAriaLive, IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcMultiValueEventDetail, IcSizes, IcThemeMode } from "../../utils/types";
+import { IcAriaLive, IcInformationStatusOrEmpty, IcSearchMatchPositions, IcMultiValueEventDetail, IcSizes, IcThemeMode } from "../../utils/types";
+import { IcSelectOption, IcSelectOptionFlat } from "./ic-select.types";
 import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 /**
  * @slot helper-text - Content is set as the helper text for the select.
  * @slot icon - Content will be placed to the left of the select text input.
  */
 export declare class Select {
-    private anchorEl?;
-    private blurredBecauseButtonPressed;
-    private characterKeyPressTimer?;
-    private clearButton?;
-    private customSelectElement?;
-    private debounceAria?;
-    private hasSetDefaultValue;
-    private hasTimedOut;
-    private inheritedAttributes;
-    private initialOptionsEmpty;
     private inputId;
     private menu?;
     private menuId;
+    private inheritedAttributes;
+    private anchorEl?;
     private nativeSelectElement?;
-    private retryButtonClick;
-    private searchableMenuItemSelected;
-    private searchableSelectElement?;
-    private timeoutTimer?;
-    private ungroupedOptions;
     private hostMutationObserver;
+    private clearButton?;
+    private searchableSelectElement?;
+    private timeoutTimer;
+    private hasTimedOut;
+    private selectElement?;
+    private initialRender;
+    private characterKeyPressTimer?;
+    private pressedCharacters;
     el: HTMLIcSelectElement;
     ariaActiveDescendant?: string;
-    clearButtonFocused: boolean;
     debounceIcInput?: number;
     hiddenInputValue: string | null;
-    noOptions: IcMenuOption[] | null;
-    open: boolean;
-    pressedCharacters: string;
-    searchableSelectInputValue: string | null;
+    hasError: boolean;
+    searchableSelectInputValue: string;
+    selectButtonAriaLiveText: string;
+    selectInputAriaLiveText: string;
     /**
      * If `true`, the disabled state will be set.
      */
@@ -144,18 +139,22 @@ export declare class Select {
      * The text to display as the validation message.
      */
     validationText: string;
+    /**
+     * If `true` and on a mobile or tablet device, the native select element will be used instead of the custom select component for better usability.
+     */
+    useNativeSelectOnMobile: boolean;
     /**
      * If `true`, the loading state will be triggered when fetching options asynchronously.
      */
     loading: boolean;
     loadingHandler(newValue: boolean): void;
+    private clearTimer;
     /**
      * The possible selection options.
      */
-    options: IcMenuOption[];
-    filteredOptions: IcMenuOption[];
-    uniqueOptions: IcMenuOption[];
-    watchOptionsHandler(): void;
+    options: IcSelectOption[];
+    flatOptions: IcSelectOptionFlat[];
+    optionsChangedHandler(): void;
     /**
      * The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke.
      */
@@ -169,9 +168,8 @@ export declare class Select {
      */
     value: string | string[] | null;
     initialValue: string | string[] | null;
-    inputValueToFilter: string | null;
-    currValue: string | string[] | null;
-    valueChangedHandler(): void;
+    valueChangedHandler(newValue: string | string[] | null): void;
+    open: boolean;
     openChangedHandler(): void;
     /**
      * Emitted when the select loses focus.
@@ -214,69 +212,44 @@ export declare class Select {
      * Emitted when the 'retry loading' button is clicked for a searchable variant.
      */
     icRetryLoad: EventEmitter<IcMultiValueEventDetail>;
-    disconnectedCallback(): void;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    componentDidRender(): void;
     /**
-     * Sets focus on the input box.
+     * Sets focus on the select component.
      */
     setFocus(): Promise<void>;
-    private hostMutationCallback;
-    private handleRetry;
-    private emitIcChange;
-    private emitIcInput;
-    private setOptions;
-    /**
-     * 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;
-    private setMenuChange;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    private getValidatedValue;
+    componentWillLoad(): void;
+    private getFilteredOptions;
+    private getOptions;
+    private getFlatOptions;
+    private unflattenOptions;
     private getLabelFromValue;
-    private getMultipleOptionsString;
-    private getFilteredChildMenuOptions;
-    private getValueSortedByOptions;
-    private handleNativeSelectChange;
-    private handleCustomSelectChange;
-    private handleSelectAllChange;
-    private handleMenuChange;
-    private handleMenuKeyPress;
-    private handleFocusIndicatorDisplay;
-    private handleMouseDown;
-    private isExternalFiltering;
+    private getLabelString;
     private handleClick;
     private handleExpandIconMouseDown;
+    private handleBlur;
+    private handleTimeoutBlur;
+    private handleFocus;
     private handleClear;
+    private setTextColor;
+    private handleNativeSelectChange;
+    private handleFocusIndicatorDisplay;
+    private handleKeyDown;
     private handleCharacterKeyDown;
     private handleNativeSelectKeyDown;
-    private handleKeyDown;
-    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 handleSelectChange;
+    private handleSelectAllChange;
+    private handleFormReset;
+    private handleRetry;
     private handleSearchableSelectInput;
+    private hostMutationCallback;
+    private updateSelectButtonAriaLive;
     private updateSearchableSelectResultAriaLive;
-    private updateMultiSelectedCountAriaLive;
-    private getDefaultValue;
-    private setDefaultValue;
-    private onFocus;
-    private onBlur;
-    private onTimeoutBlur;
-    private handleFormReset;
-    private clearInput;
+    private updateAriaActiveDescendant;
+    private handleMenuChange;
+    private getDeduplicatedOptions;
     private renderNativeOption;
     render(): any;
 }

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

@@ -0,0 +1,43 @@
+export type IcSelectOption = IcSelectOptionBase | IcSelectOptionGroup | IcSelectOptionLoading | IcSelectOptionTimedOut;
+type IcSelectOptionElement = {
+    component: any;
+    ariaLabel: string;
+};
+export type IcSelectOptionBase = {
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+    recommended?: boolean;
+    icon?: string;
+    hideLabel?: boolean;
+    htmlProps?: Record<string, string>;
+    element?: IcSelectOptionElement;
+};
+export type IcSelectOptionGroup = {
+    label: string;
+    children: IcSelectOptionBase[];
+};
+type IcSelectOptionLoading = {
+    label: string;
+    value: "";
+    loading: true;
+};
+type IcSelectOptionTimedOut = {
+    label: string;
+    value: "";
+    timedOut: true;
+};
+export type IcSelectOptionFlat = {
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+    recommended?: boolean;
+    icon?: string;
+    hideLabel?: boolean;
+    htmlProps?: Record<string, string>;
+    element?: IcSelectOptionElement;
+    group?: string;
+};
+export {};

package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts

@@ -9,11 +9,12 @@ import { IcExpandedDetail } from "./ic-side-navigation.types";
  */
 export declare class SideNavigation {
     private ANIMATION_DURATION;
-    private IC_NAVIGATION_ITEM;
-    private resizeObserver;
     private COLLAPSED_ICON_LABELS_END;
     private COLLAPSED_ICON_LABELS_START;
+    private IC_NAVIGATION_ITEM;
     private menuButton?;
+    private hostMutationObserver;
+    private resizeObserver;
     el: HTMLIcSideNavigationElement;
     deviceSize: number;
     deviceSizeAppTitle: number;