@ukic/web-components 3.0.0 → 3.1.0

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

@@ -1,43 +1,44 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcValueEventDetail, IcSizes } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcMultiValueEventDetail, IcSizes, IcThemeMode } from "../../utils/types";
 import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 /**
  * @slot icon - Content will be placed to the left of the select text input.
  */
 export declare class Select {
-    private anchorEl;
+    private anchorEl?;
     private blurredBecauseButtonPressed;
     private characterKeyPressTimer;
-    private clearButton;
-    private customSelectElement;
+    private clearButton?;
+    private customSelectElement?;
     private debounceAria;
     private hasSetDefaultValue;
     private hasTimedOut;
     private inheritedAttributes;
     private initialOptionsEmpty;
     private inputId;
-    private menu;
+    private menu?;
     private menuId;
-    private nativeSelectElement;
+    private nativeSelectElement?;
     private retryButtonClick;
     private searchableMenuItemSelected;
-    private searchableSelectElement;
+    private searchableSelectElement?;
     private timeoutTimer;
     private ungroupedOptions;
     private hostMutationObserver;
     el: HTMLIcSelectElement;
     ariaActiveDescendant: string;
     clearButtonFocused: boolean;
-    debounceIcChange: number;
-    hiddenInputValue: string;
-    noOptions: IcMenuOption[];
+    debounceIcInput: number;
+    hiddenInputValue: string | null;
+    noOptions: IcMenuOption[] | null;
     open: boolean;
     pressedCharacters: string;
-    searchableSelectInputValue: string;
+    searchableSelectInputValue: string | null;
     /**
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
      */
@@ -45,15 +46,15 @@ export declare class Select {
     /**
      * The text displayed when there are no options in the option list.
      */
-    emptyOptionListText: string;
+    emptyOptionListText?: string;
     /**
      * The <form> element to associate the select with.
      */
     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;
+    fullWidth?: boolean;
     /**
      * The helper text that will be displayed for additional field guidance.
      */
@@ -82,6 +83,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.
      */
@@ -99,7 +104,7 @@ export declare class Select {
      */
     required?: boolean;
     /**
-     * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
+     * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component.
      */
     searchable?: boolean;
     /**
@@ -107,7 +112,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,13 +120,17 @@ export declare class Select {
      */
     showClearButton?: boolean;
     /**
-     * The size of the select component.
+     * The size of the select.
      */
     size?: IcSizes;
     /**
      * If using external filtering, set a timeout for when loading takes too long.
      */
     timeout?: 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;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'.
      */
@@ -143,18 +152,20 @@ export declare class Select {
     uniqueOptions: IcMenuOption[];
     watchOptionsHandler(): void;
     /**
-     * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+     * The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke.
      */
     debounce?: number;
-    currDebounce: number;
+    currDebounce: number | undefined;
     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;
-    inputValueToFilter: string;
-    currValue: string;
+    value?: string | string[] | null;
+    initialValue: string | string[] | null | undefined;
+    inputValueToFilter: string | null;
+    currValue?: string | string[] | null;
     valueChangedHandler(): void;
     openChangedHandler(): void;
     /**
@@ -164,9 +175,9 @@ export declare class Select {
     /**
      * Emitted when the value changes.
      */
-    icChange: EventEmitter<IcValueEventDetail>;
+    icChange: EventEmitter<IcMultiValueEventDetail>;
     /**
-     * Emitted when the clear button is clicked.
+     * Emitted when the clear or clear all button is clicked.
      */
     icClear: EventEmitter<void>;
     /**
@@ -180,20 +191,24 @@ export declare class Select {
     /**
      * Emitted when a keyboard input occurred.
      */
-    icInput: EventEmitter<IcValueEventDetail>;
+    icInput: EventEmitter<IcMultiValueEventDetail>;
     /**
      * Emitted when the select options menu is opened.
      */
     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.
      */
-    icRetryLoad: EventEmitter<IcValueEventDetail>;
+    icRetryLoad: EventEmitter<IcMultiValueEventDetail>;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
@@ -206,7 +221,7 @@ export declare class Select {
     private handleRetry;
     private updateOnChangeDebounce;
     private emitIcChange;
-    private emitImmediateIcChange;
+    private emitIcInput;
     /**
      * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
      * @param options array of IcMenuOptions
@@ -221,12 +236,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,11 +266,13 @@ export declare class Select {
     private handleSearchableSelectInput;
     private updateSearchableSelectResultAriaLive;
     private debounceAriaLiveUpdate;
+    private updateMultiSelectedCountAriaLive;
     private getDefaultValue;
     private setDefaultValue;
     private onFocus;
     private onBlur;
     private onTimeoutBlur;
     private handleFormReset;
+    private clearInput;
     render(): any;
 }

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeForeground } from "../../utils/types";
+import { IcBrand, IcBrandForeground } from "../../utils/types";
 import { IcExpandedDetail } from "./ic-side-navigation.types";
 /**
  * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.
@@ -13,59 +13,59 @@ export declare class SideNavigation {
     private resizeObserver;
     private COLLAPSED_ICON_LABELS_END;
     private COLLAPSED_ICON_LABELS_START;
-    private menuButton;
+    private menuButton?;
     el: HTMLIcSideNavigationElement;
     deviceSize: number;
     deviceSizeAppTitle: number;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     hasSecondaryNavigation: boolean;
     menuExpanded: boolean;
     menuOpen: boolean;
     /**
      * 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.
      */
-    collapsedIconLabels: boolean;
+    collapsedIconLabels?: boolean;
     /**
      * If `true`, automatic parent wrapper styling will be disabled.
      */
-    disableAutoParentStyling: boolean;
+    disableAutoParentStyling?: boolean;
     /**
      * If `true`, the side navigation will not display as a top bar on small devices.
      */
-    disableTopBarBehaviour: boolean;
+    disableTopBarBehaviour?: boolean;
     /**
      * If `true`, the side navigation will display in an expanded state.
      */
-    expanded: boolean;
+    expanded?: boolean;
     watchExpandedHandler(): void;
     /**
      * The URL that the app title link points to.
      */
-    href: string;
+    href?: string;
     /**
      * @internal If `true`, side navigation will be contained by its parent element.
      */
-    inline: boolean;
+    inline?: boolean;
     /**
      * The short title of the app to be displayed at small screen sizes in place of the app title.
      */
-    shortAppTitle: string;
+    shortAppTitle?: string;
     /**
      * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
      */
-    static: boolean;
+    static?: boolean;
     /**
      * The status of the app to be displayed.
      */
-    status: string;
+    status?: string;
     /**
      * The version of the app to be displayed.
      */
-    version: string;
+    version?: string;
     /**
      * Emitted when the side navigation is collapsed and expanded.
      */
@@ -73,7 +73,7 @@ export declare class SideNavigation {
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
-    themeChangeHandler({ detail }: CustomEvent): void;
+    brandChangeHandler({ detail }: CustomEvent<IcBrand>): void;
     private emitSideNavigationExpanded;
     private toggleMenu;
     private setToggleMenuFlyoutMenuVisibility;

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

@@ -1,7 +1,7 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcBrandForeground } from "../../utils/types";
 export interface IcTopBar {
     isSDevice: boolean;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     menuOpen: boolean;
     href: string;
     isAppNameSubtitleVariant: boolean;

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-skip-link/ic-skip-link.d.ts

@@ -0,0 +1,33 @@
+import { IcThemeMode } from "../../utils/types";
+export declare class SkipLink {
+    el: HTMLIcSkipLinkElement;
+    /**
+     * If `true`, the skip link will fill the width of the page.
+     */
+    fullWidth: boolean;
+    /**
+     * If `true`, the skip link will appear inline with surrounding page content when focused.
+     */
+    inline: boolean;
+    /**
+     * The label displayed when the skip link is focused.
+     */
+    label: string;
+    /**
+     * If `true`, the skip link will display as black in the light theme, and white in the dark theme.
+     */
+    monochrome: boolean;
+    /**
+     * The target ID for the element which should receive focus when triggering the skip link.
+     */
+    target: string;
+    /**
+     * 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 background will be hidden.
+     */
+    transparentBackground: boolean;
+    render(): any;
+}

package/dist/types/components/ic-status-tag/ic-status-tag.d.ts

@@ -18,6 +18,14 @@ export declare class StatusTag {
      * The colour of the status tag.
      */
     status?: IcStatusTagStatuses;
+    /**
+     * 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?: "dark" | "light" | "inherit";
+    /**
+     * The letter case of the status tag's label.
+     */
+    uppercase?: boolean;
     /**
      * The emphasis of the status tag.
      */

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;
@@ -10,17 +11,13 @@ export declare class Stepper {
     autoSetStepTitles: boolean;
     lastStepWidth: number;
     noOfResizes?: number;
-    stepperWidth: number;
+    stepperWidth: number | undefined;
     stepTypes: IcStepTypes[];
     variantOverride?: boolean;
     /**
      * 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,14 +1,14 @@
 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.
+ * @slot right-adornment - Content is placed to the right of switch.
  */
 export declare class Switch {
     private inputId;
     el: HTMLIcSwitchElement;
     checkedState: boolean;
-    initiallyChecked: boolean;
+    initiallyChecked: boolean | undefined;
     /**
      * If `true`, the switch will display as checked.
      */
@@ -18,6 +18,7 @@ export declare class Switch {
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The helper text that will be displayed for additional field guidance.
      */
@@ -34,14 +35,14 @@ export declare class Switch {
      * The name of the control, which is submitted with the form data.
      */
     name?: string;
-    /**
-     * If `true`, the switch will render the On/Off state text.
-     */
-    showState?: boolean;
     /**
      * 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/ic-tab.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcTabClickEventDetail } from "./ic-tab.types";
-import { IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcThemeMode } from "../../utils/types";
 /**
  * @slot icon - Content will be rendered next to the tab label.
  * @slot badge - Badge component displayed inline with the tab.
@@ -10,20 +10,23 @@ export declare class Tab {
     private focusTabId;
     private isInitialRender;
     el: HTMLIcTabElement;
-    /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
-    appearance?: IcThemeForegroundNoDefault;
     /** @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */
     contextId?: string;
     /**
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
+    /** @internal Determines whether black variant of the tabs should be displayed. */
+    monochrome?: boolean;
     /** @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. */
     selected?: boolean;
     /** @internal The shared ID between panel and tab. */
-    tabId?: string;
+    tabId: string;
     /** @internal The position of the tab inside the tabs array in context. */
-    tabPosition?: number;
+    tabPosition: number;
+    /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+    theme?: IcThemeMode;
     disabledWatchHandler(): void;
     /**
      * @internal Emitted when a tab is selected.

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

@@ -1,8 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcActivationTypes, IcThemeForegroundNoDefault } from "../../utils/types";
+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;
@@ -16,11 +15,6 @@ export declare class TabContext {
      * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.
      */
     activationType?: IcActivationTypes;
-    /**
-     * The appearance of the tab context, e.g dark, or light.
-     */
-    appearance?: IcThemeForegroundNoDefault;
-    watchAppearanceHandler(): void;
     /**
      * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
      */
@@ -30,6 +24,16 @@ export declare class TabContext {
      */
     selectedTabIndex?: number;
     updateSelectedTab(newValue: number): void;
+    /**
+     * If `true`, the tabs will display as black in the light theme.
+     */
+    monochrome?: boolean;
+    watchMonochromeHandler(): void;
+    /**
+     * 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;
+    watchThemeHandler(): void;
     /**
      * Emitted when a user selects a tab.
      */
@@ -44,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;
 }

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

@@ -1,9 +1,5 @@
-import { IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcThemeMode } from "../../utils/types";
 export declare class TabGroup {
-    /**
-     * @internal The appearance of the tab group, e.g dark, or light.
-     */
-    appearance?: IcThemeForegroundNoDefault;
     /**
      * If `true`, the tabs and tab panels will be positioned separately.
      */
@@ -12,6 +8,10 @@ export declare class TabGroup {
      * The label to describe the purpose of the set of tabs to screen reader users.
      */
     label: string;
+    /** @internal Determines whether black variant of the tabs should be displayed. */
+    monochrome?: boolean;
+    /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+    theme?: IcThemeMode;
     componentDidLoad(): void;
     render(): any;
 }

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

@@ -1,11 +1,15 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcThemeMode } from "../../utils/types";
 export declare class TabPanel {
     el: HTMLIcTabPanelElement;
     /**
-     * @internal The appearance of the tabs, e.g dark, or light.
+     * @internal If `true`, the tab panel will be displayed.
      */
-    appearance?: IcThemeForegroundNoDefault;
+    active: boolean;
+    /**
+     * @internal Determines whether black variant of the tabs should be displayed.
+     */
+    monochrome?: boolean;
     /**
      * @internal The shared ID that links the panel and tab.
      */
@@ -18,6 +22,8 @@ export declare class TabPanel {
      * @internal The position of the tab panel inside the tabs array in context.
      */
     tabPosition?: number;
+    /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+    theme?: IcThemeMode;
     /**
      * @internal Emitted when a tab panel is dynamically created.
      */