@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.3

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

@@ -3,15 +3,24 @@ import { IcActivationTypes, IcMenuOption, IcSizes, IcValueEventDetail } from "..
 import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEventDetail } from "./ic-menu.types";
 import { IcSearchBarSearchModes } from "../ic-search-bar/ic-search-bar.types";
 export declare class Menu {
+    private ACTIVE_DESCENDANT;
+    private CLEAR_BUTTON_ID;
     private disabledOptionSelected;
     private hasPreviouslyBlurred;
     private hasTimedOut;
     private isLoading;
+    private isMultiSelect;
     private isSearchBar;
     private isSearchableSelect;
+    private lastOptionSelected;
+    private lastOptionFocused;
     private menu;
+    private multiOptionClicked;
     private popperInstance;
     private preventClickOpen;
+    private preventMenuFocus;
+    private selectAllButton;
+    private shiftPressed;
     private ungroupedOptions;
     host: HTMLIcMenuElement;
     focusFromSearchKeypress: boolean;
@@ -19,6 +28,7 @@ export declare class Menu {
     keyboardNav: boolean;
     optionHighlighted: string;
     preventIncorrectTabOrder: boolean;
+    menuOptions: IcMenuOption[];
     /**
      * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
      */
@@ -31,6 +41,10 @@ export declare class Menu {
      * @internal If `true`, autofocus will be applied on selected item when menu is open.
      */
     autoFocusOnSelected: boolean;
+    /**
+     *  If `true`, the menu will close when an option is selected.
+     */
+    closeOnSelect: boolean;
     /**
      *  If `true`, the menu will fill the width of the container.
      */
@@ -69,7 +83,7 @@ export declare class Menu {
      */
     selectOnEnter?: boolean;
     /**
-     * The size of the menu component.
+     * The size of the menu.
      */
     size?: IcSizes;
     /**
@@ -78,23 +92,22 @@ export declare class Menu {
     options: IcMenuOption[];
     watchOptionsHandler(newOptions: IcMenuOption[]): void;
     /**
-     * The value of the currently selected option.
+     * The value of the currently selected option - or array of values (if multiple options allowed).
      */
-    value: string;
-    watchValueHandler(): void;
+    value: string | string[];
     /**
      * The custom name for the value field for IcMenuOption.
      */
     valueField: string;
     /**
-     * @internal Emitted when key is pressed while menu is open
+     * @internal Emitted when key is pressed while menu is open.
      */
     menuKeyPress: EventEmitter<{
         isNavKey: boolean;
         key: string;
     }>;
     /**
-     * @internal Emitted when an option has been highlighted
+     * @internal Emitted when an option has been highlighted.
      */
     menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;
     /**
@@ -102,19 +115,21 @@ export declare class Menu {
      */
     menuOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
     /**
-     * @internal Emitted when state of menu changes (i.e. open or close).
+     * @internal Emitted when all options are selected or deselected.
      */
-    menuStateChange: EventEmitter<IcMenuChangeEventDetail>;
+    menuOptionSelectAll: EventEmitter<{
+        select: boolean;
+    }>;
     /**
-     * @internal Emitted when menu value changes.
+     * @internal Emitted when state of menu changes (i.e. open or closed).
      */
-    menuValueChange: EventEmitter<IcValueEventDetail>;
+    menuStateChange: EventEmitter<IcMenuChangeEventDetail>;
     /**
-     * @internal Emitted when the retry button is clicked
+     * @internal Emitted when the retry button is clicked.
      */
     retryButtonClicked: EventEmitter<IcValueEventDetail>;
     /**
-     * @internal Emitted when the timeout menu loses focus
+     * @internal Emitted when the timeout menu loses focus.
      */
     timeoutBlur: EventEmitter<{
         ev: FocusEvent;
@@ -158,10 +173,13 @@ export declare class Menu {
     private setPreviousOptionValue;
     private getParentEl;
     private arrowBehaviour;
-    private setMenuOptions;
+    private getMenuOptions;
     private setHighlightedOption;
     private autoSetInputValueKeyboardOpen;
-    private manSetInputValueKeyboardOpen;
+    private selectHighlightedOption;
+    private isOptionSelected;
+    private deselectSelectedOptions;
+    private manualSetInputValueKeyboardOpen;
     private setInputValue;
     private handleOptionClick;
     private handleRetry;
@@ -169,12 +187,22 @@ export declare class Menu {
     private handleBlur;
     private handleMouseDown;
     private handleMenuKeyDown;
+    private handleMenuKeyUp;
+    private handleSelectAllClick;
+    private handleSelectAllBlur;
+    private handleSelectAllFocus;
+    private handleSelectAllMouseDown;
+    private handleSingleShiftSelect;
+    private handleMultipleShiftSelect;
+    private handleOptionSelect;
+    private getFirstOptionInSelection;
+    private emitSelectAll;
     private emitMenuKeyPress;
     private autoSetValueOnMenuKeyDown;
-    private handleMenuKeyUp;
     private getOptionId;
     private getOptionAriaLabel;
     private getSortedOptions;
+    private getOptionHighlightedIndex;
     private isManualMode;
     private scrollToSelected;
     private loadUngroupedOptions;

package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { IcThemeMode } from "../../utils/types";
 export declare class PopoverMenu {
     private anchorEl;
     private ARIA_LABEL;
@@ -29,6 +30,10 @@ export declare class PopoverMenu {
      * @internal The level of menu being displayed.
      */
     submenuLevel: number;
+    /**
+     * 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;
     /**
      * If `true`, the popover menu will be displayed.
      */
@@ -61,10 +66,10 @@ export declare class PopoverMenu {
     private findAnchorEl;
     private isNotPopoverMenuEl;
     /**
-     * Close the popover menu, emit isPopoverClosed event
+     * @internal Close the menu, emit icPopoverClosed of the root popover
      * @param setFocusToAnchor when true return focus to anchor element when menu is closed
      */
-    private closeMenu;
+    closeMenu(setFocusToAnchor?: boolean): Promise<void>;
     private getNextItemToSelect;
     private addMenuItems;
     private getMenuAriaLabel;

package/dist/types/components/ic-radio-option/ic-radio-option.d.ts

@@ -60,7 +60,7 @@ export declare class RadioOption {
     componentDidLoad(): void;
     componentWillRender(): void;
     componentDidRender(): void;
-    textfieldValueHandler(event: CustomEvent<{
+    additionalFieldValueHandler(event: CustomEvent<{
         value: string;
     }>): void;
     /**
@@ -71,8 +71,9 @@ export declare class RadioOption {
      * @internal Sets the tabIndex of the radio option.
      */
     setTabIndex(value: number): Promise<void>;
+    private getAdditionalField;
     private handleClick;
-    private swallowClick;
+    private handleKeyDown;
     private handleFormReset;
     render(): any;
 }

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

@@ -51,7 +51,7 @@ export declare class Select {
      */
     form?: string;
     /**
-     * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
+     * If `true`, the select will fill the width of the container.
      */
     fullWidth: boolean;
     /**
@@ -82,6 +82,10 @@ export declare class Select {
      * The message displayed whilst the options are being loaded externally.
      */
     loadingLabel?: string;
+    /**
+     * If `true`, multiple options can be selected.
+     */
+    multiple?: boolean;
     /**
      * The name of the control, which is submitted with the form data.
      */
@@ -107,7 +111,7 @@ export declare class Select {
      */
     searchMatchPosition?: IcSearchMatchPositions;
     /**
-     * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+     * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select.
      */
     selectOnEnter?: boolean;
     /**
@@ -115,7 +119,7 @@ export declare class Select {
      */
     showClearButton?: boolean;
     /**
-     * The size of the select component.
+     * The size of the select.
      */
     size?: IcSizes;
     /**
@@ -149,12 +153,14 @@ export declare class Select {
     currDebounce: number;
     debounceChangedHandler(newValue: number): void;
     /**
-     * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input.
+     * The value of the select, reflected by the value of the currently selected option.
+     * For the searchable variant, the value is also reflected by the user input.
+     * For the multi-select variant, the value must be an array of option values.
      */
-    value?: string;
-    initialValue: string;
+    value?: string | string[];
+    initialValue: string | string[];
     inputValueToFilter: string;
-    currValue: string;
+    currValue: string | string[];
     valueChangedHandler(): void;
     openChangedHandler(): void;
     /**
@@ -186,10 +192,14 @@ export declare class Select {
      */
     icOpen: EventEmitter<void>;
     /**
-     * Emitted when an option is highlighted within the menu.
-     * Highlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated.
+     * Emitted when an option is selected.
+     * Selecting an option will also trigger an `icChange/onIcChange` due to the value being updated.
      */
     icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
+    /**
+     * Emitted when `multiple` is `true` and an option is deselected.
+     */
+    icOptionDeselect: EventEmitter<IcOptionSelectEventDetail>;
     /**
      * Emitted when the 'retry loading' button is clicked for a searchable variant.
      */
@@ -221,12 +231,15 @@ export declare class Select {
     private setTextColor;
     private setMenuChange;
     private getLabelFromValue;
+    private getMultipleOptionsString;
     private getFilteredChildMenuOptions;
+    private getValueSortedByOptions;
     private handleNativeSelectChange;
     private handleCustomSelectChange;
+    private handleMultipleSelectChange;
+    private handleSelectAllChange;
     private handleMenuChange;
     private handleMenuKeyPress;
-    private handleMenuValueChange;
     private handleFocusIndicatorDisplay;
     private handleMouseDown;
     private isExternalFiltering;
@@ -248,6 +261,7 @@ export declare class Select {
     private handleSearchableSelectInput;
     private updateSearchableSelectResultAriaLive;
     private debounceAriaLiveUpdate;
+    private updateMultiSelectedCountAriaLive;
     private getDefaultValue;
     private setDefaultValue;
     private onFocus;

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

@@ -1,10 +1,11 @@
 import { IcSkeletonVariants } from "./ic-skeleton.types";
+import { IcThemeMode } from "../../utils/types";
 export declare class Skeleton {
     el: HTMLIcSkeletonElement;
     /**
-     * The appearance of the skeleton.
+     * 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.
      */
-    appearance?: "light" | "default";
+    theme?: IcThemeMode;
     /**
      * The variant of the skeleton that will be displayed.
      */

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

@@ -1,4 +1,5 @@
 import { IcStepVariants, IcStepStatuses, IcStepTypes } from "./ic-step.types";
+import { IcThemeMode } from "../../utils/types";
 export declare class Step {
     el: HTMLIcStepElement;
     /**
@@ -41,6 +42,10 @@ export declare class Step {
      * The title of the step within the stepper.
      */
     heading?: string;
+    /**
+     * @internal 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;
     /**
      * @internal The variant of the step. This is managed by ic-stepper.
      */

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

@@ -1,5 +1,6 @@
 import { IcStepperAlignment } from "./ic-stepper.types";
 import { IcStepTypes, IcStepVariants } from "../ic-step/ic-step.types";
+import { IcThemeMode } from "../../utils/types";
 export declare class Stepper {
     private resizeObserver;
     private steps;
@@ -17,10 +18,6 @@ export declare class Stepper {
      * The alignment of the default stepper within its container.
      */
     aligned?: IcStepperAlignment;
-    /**
-     * The appearance of the stepper.
-     */
-    appearance?: "light" | "default";
     /**
      * The length of the connector between each step in pixels. Minimum length is 100px.
      */
@@ -29,6 +26,11 @@ export declare class Stepper {
      * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
      */
     hideStepInfo?: boolean;
+    /**
+     * 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;
+    handleThemeChange(): void;
     /**
      * The variant of the stepper.
      */

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcSwitchChangeEventDetail } from "./ic-switch.types";
-import { IcSizesNoLarge } from "../../utils/types";
+import { IcSizesNoLarge, IcThemeMode } from "../../utils/types";
 /**
  * @slot right-adornment - Content is placed to the right of switch before state label.
  */
@@ -42,6 +42,10 @@ export declare class Switch {
      * The size of the switch component.
      */
     size?: IcSizesNoLarge;
+    /**
+     * 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;
     /**
      * The value of the toggle does not mean if it's checked or not, use the `checked`
      * property for that.

package/dist/types/components/ic-tab-context/ic-tab-context.d.ts

@@ -2,7 +2,6 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { IcActivationTypes, IcThemeMode } from "../../utils/types";
 import { IcTabClickEventDetail, IcTabSelectEventDetail } from "../ic-tab/ic-tab.types";
 export declare class TabContext {
-    private controlledMode;
     private enabledTabs;
     private focusedTabIndex;
     private newTabPanels;
@@ -49,18 +48,21 @@ export declare class TabContext {
      * @internal Used to set tab/tab panel IDs when a tab/tab panel has been removed
      */
     tabRemovedHandler(hadFocus?: boolean): Promise<void>;
+    /** Sets attributes to link tab-group, tabs and tab-panels */
     private linkTabs;
+    /**
+     * Gets tabs and tabpanels with the same context ID using querySelector to selector the children in relation to the host
+     */
     private getChildren;
     private keydownHandler;
-    private attachEventListeners;
-    private setControlledMode;
+    /** Sets the tab that is selected on initial render */
     private setInitialTab;
+    /** Passes the selected tab to the tab and tab panel components */
     private configureTabs;
     private getEnabledTabs;
-    private getIndexOfEnabledTab;
+    /** Sets focus on tab and selects it */
     private keyboardSelectTab;
+    /** Sets focus on tab without selecting it (for manual activation) */
     private keyboardFocusTab;
-    private handleKeyBoardNavAutomatic;
-    private handleKeyBoardNavManual;
     render(): any;
 }