@ukic/web-components 2.29.1 → 3.0.0-alpha.2

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

@@ -1,5 +1,5 @@
 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 enabledTabs;
@@ -15,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,13 +25,19 @@ export declare class TabContext {
     selectedTabIndex?: number;
     updateSelectedTab(newValue: number): void;
     /**
-     * Emitted when a user selects a tab.
+     * If `true`, the tabs will display as black in the light theme.
      */
-    icTabSelect: EventEmitter<IcTabSelectEventDetail>;
+    monochrome?: boolean;
+    watchMonochromeHandler(): void;
     /**
-     * @deprecated This event should not be used anymore. Use icTabSelect instead.
+     * 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.
      */
-    tabSelect: EventEmitter<IcTabSelectEventDetail>;
+    theme?: IcThemeMode;
+    watchThemeHandler(): void;
+    /**
+     * Emitted when a user selects a tab.
+     */
+    icTabSelect: EventEmitter<IcTabSelectEventDetail>;
     componentDidLoad(): void;
     componentWillUpdate(): void;
     disconnectedCallback(): void;
@@ -47,7 +48,6 @@ 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>;
-    private emitEvents;
     /** Sets attributes to link tab-group, tabs and tab-panels */
     private linkTabs;
     /**

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

@@ -1,14 +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;
-    /**
-     * @deprecated This is no longer required.
-     * The context id is passed down from `ic-tab-context`
-     */
-    contextId?: string;
     /**
      * If `true`, the tabs and tab panels will be positioned separately.
      */
@@ -17,6 +8,14 @@ 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;
+    /**
+     * Temporary function to handle horizontal scroll appearance until other dark mode work is completed.
+     */
+    private handleHorizontalScrollAppearance;
     render(): any;
 }

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

@@ -1,16 +1,23 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcThemeMode } from "../../utils/types";
 export declare class TabPanel {
     el: HTMLIcTabPanelElement;
+    /** @internal Determines whether black variant of the tabs should be displayed. */
+    monochrome?: boolean;
     /**
-     * @internal The appearance of the tabs, e.g dark, or light.
+     * @internal The shared ID that links the panel and tab.
      */
-    appearance?: IcThemeForegroundNoDefault;
+    panelId?: string;
     /**
-     * @deprecated This is no longer required.
-     * The context id is passed down from `ic-tab-context`
+     * @internal The shared ID of the currently selected tab.
      */
-    contextId?: string;
+    selectedTab?: string;
+    /**
+     * @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.
      */
@@ -20,6 +27,5 @@ export declare class TabPanel {
      */
     tabPanelRemoved: EventEmitter<void>;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/ic-text-field/ic-text-field.d.ts

@@ -11,9 +11,8 @@ export declare class TextField {
     el: HTMLIcTextFieldElement;
     numChars: number;
     maxCharactersReached: boolean;
-    maxCharactersError: boolean;
+    maxCharactersWarning: boolean;
     minCharactersUnattained: boolean;
-    maxLengthExceeded: boolean;
     maxValueExceeded: boolean;
     minValueUnattained: boolean;
     /**
@@ -67,6 +66,10 @@ export declare class TextField {
      * The helper text that will be displayed for additional field guidance.
      */
     helperText: string;
+    /**
+     * If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden.
+     */
+    hideCharCount: boolean;
     /**
      * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
      */
@@ -94,17 +97,9 @@ export declare class TextField {
      */
     max: string | number;
     /**
-     * The maximum number of characters that can be entered in the field. Will display an error if too many characters are entered.
+     * The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)
      */
     maxCharacters: number;
-    /**
-     * The count of characters in the field. Will display a warning if the bound is reached.
-     */
-    maxLength: number;
-    /**
-     * The text to display as the validation message when the maximum length is exceeded.
-     */
-    maxLengthMessage: string;
     /**
      * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)
      */
@@ -145,10 +140,6 @@ export declare class TextField {
      * The size of the text field component.
      */
     size?: IcSizesNoLarge;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * If `true`, the value of the text field will have its spelling and grammar checked.
      */
@@ -223,7 +214,7 @@ export declare class TextField {
      * Sets focus on the native `input`.
      */
     setFocus(): Promise<void>;
-    private getMaxLengthExceeded;
+    private getMaxValueExceeded;
     private getMaxCharactersReached;
     private onInput;
     private onBlur;

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

@@ -1,16 +1,23 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcColor, IcTheme } from "../../utils/types";
 export declare class Theme {
+    themeClass: string;
     /**
      * The theme colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
      */
     color?: IcColor;
     watchColorPropHandler(): void;
+    /**
+     * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
+     */
+    theme: "dark" | "light" | "system";
+    watchThemePropHandler(): void;
     /**
      * @internal Emitted when the theme is changed.
      */
     themeChange: EventEmitter<IcTheme>;
     componentWillLoad(): void;
+    private darkModeChangeHandler;
     private checkThemeColorContrast;
     private setThemeColor;
     render(): any;

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

@@ -7,10 +7,12 @@ import { IcActivationTypes, IcStatusVariants } from "../../utils/types";
 export declare class Toast {
     private dismissTimeout;
     private interactiveElements;
-    private isManual;
     private neutralVariantLabel;
     private timerRefreshInterval;
+    private focusInteractiveElement;
+    private shiftKeyPressed;
     el: HTMLIcToastElement;
+    isManual: boolean;
     timerProgress: number;
     visible: boolean;
     /**
@@ -50,6 +52,8 @@ export declare class Toast {
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    componentDidUpdate(): void;
+    watchVisibleHandler(): void;
     handleDismiss(): void;
     handleKeyboard(ev: KeyboardEvent): void;
     handleTimer(ev: MouseEvent): void;
@@ -62,6 +66,9 @@ export declare class Toast {
     private handleProgressChange;
     private handleLongText;
     private findNextInteractiveElement;
+    private resetAutoDismissTimer;
     private isActive;
+    private onFocus;
+    private onBlur;
     render(): any;
 }

package/dist/types/components/ic-toast-region/ic-toast-region.d.ts

@@ -10,10 +10,5 @@ export declare class ToastRegion {
     componentDidLoad(): void;
     handleDismissedToast(): void;
     private showToast;
-    /**
-     * @deprecated Use openToast prop to display toast instead.
-     * @param {HTMLIcToastElement} toast The toast component to display
-     */
-    setVisible(toast: HTMLIcToastElement): Promise<void>;
     render(): any;
 }

package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts

@@ -42,7 +42,7 @@ export declare class ToggleButton {
     /**
      * If `true`, the toggle button will be in a checked state.
      */
-    toggleChecked: boolean;
+    checked: boolean;
     /**
      * The variant of the toggle button.
      */

package/dist/types/components/ic-toggle-button-group/ic-toggle-button-group.types.d.ts

@@ -1,5 +1,5 @@
 export interface IcChangeEventDetail {
-    toggleChecked: boolean[] | boolean;
+    checked: boolean[] | boolean;
     toggledOptions?: {
         toggleButton: HTMLIcToggleButtonElement;
     }[];

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

@@ -1,5 +1,6 @@
 import { Options } from "@popperjs/core";
 import { IcTooltipPlacements } from "./ic-tooltip.types";
+import { IcThemeMode } from "../../utils/types";
 export declare class Tooltip {
     private arrow;
     private delayedHideEvents;
@@ -37,6 +38,10 @@ export declare class Tooltip {
      * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.
      */
     target?: string;
+    /**
+     * Sets the tooltip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme?: IcThemeMode;
     /**
      * The text to display on the tooltip.
      */

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

@@ -72,7 +72,7 @@ export declare class TopNavigation {
     /**
      * Emitted when the top navigation is resized.
      */
-    topNavResized: EventEmitter<{
+    icTopNavResized: EventEmitter<{
         size: number;
     }>;
     disconnectedCallback(): void;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcTypographyVariants } from "../../utils/types";
+import { IcTypographyVariants, IcThemeMode } from "../../utils/types";
 export declare class Typography {
     private focusBtnFromKeyboard;
     private inAGGrid;
@@ -34,6 +34,10 @@ export declare class Typography {
      * If `true`, the typography will have a line through it.
      */
     strikethrough?: boolean;
+    /**
+     * Sets the text 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 typography will have a line under it.
      */