@ukic/web-components 3.10.0 → 3.12.0

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcOrientation, IcSizesNoLarge, IcThemeMode, IcValueEventDetail } from "../../utils/types";
+import { IcAriaLive, IcInformationStatusOrEmpty, IcOrientation, IcSizesNoLarge, IcThemeMode, IcValueEventDetail } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-radio-group.types";
 /**
  * @slot helper-text - Content is set as the helper text for the radio group.
@@ -49,6 +49,10 @@ export declare class RadioGroup {
      * The size of the radio group component.
      */
     size?: IcSizesNoLarge;
+    /**
+     * The value of the `aria-live` attribute on the validation message.
+     */
+    validationAriaLive: IcAriaLive;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'.
      */
@@ -56,7 +60,7 @@ export declare class RadioGroup {
     /**
      * The text to display as the validation message.
      */
-    validationText?: string;
+    validationText: string;
     orientationChangeHandler(): 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.

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcMultiValueEventDetail, IcSizes, IcThemeMode } from "../../utils/types";
+import { IcAriaLive, IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcMultiValueEventDetail, IcSizes, IcThemeMode } from "../../utils/types";
 import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 /**
  * @slot helper-text - Content is set as the helper text for the select.
@@ -132,6 +132,10 @@ export declare class Select {
      * 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 `aria-live` attribute on the validation message.
+     */
+    validationAriaLive: IcAriaLive;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'.
      */

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,4 @@
-import { IcStepVariants, IcStepStatuses, IcStepTypes } from "./ic-step.types";
+import { IcStepVariants, IcStepStatuses, IcStepTypes, IcStepI18n } from "./ic-step.types";
 import { IcThemeMode } from "../../utils/types";
 export declare class Step {
     el: HTMLIcStepElement;
@@ -10,6 +10,10 @@ export declare class Step {
      * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.
      */
     current?: boolean;
+    /**
+     * Words within the component that can be replaced to translate the component into a different language
+     */
+    icI18n: IcStepI18n;
     /**
      * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.
      */

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

@@ -1,3 +1,13 @@
 export type IcStepVariants = "default" | "compact";
 export type IcStepStatuses = "optional" | "required";
 export type IcStepTypes = "active" | "current" | "completed" | "disabled";
+export type IcStepI18n = {
+    next: string;
+    step: string;
+    of: string;
+    lastStep: string;
+    completed: string;
+    notRequired: string;
+    required: string;
+    optional: string;
+};

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

@@ -1,5 +1,5 @@
 import { IcStepperAlignment } from "./ic-stepper.types";
-import { IcStepTypes, IcStepVariants } from "../ic-step/ic-step.types";
+import { IcStepTypes, IcStepVariants, IcStepI18n } from "../ic-step/ic-step.types";
 import { IcThemeMode } from "../../utils/types";
 export declare class Stepper {
     private resizeObserver;
@@ -26,6 +26,10 @@ 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;
+    /**
+     * Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.
+     */
+    icI18n?: IcStepI18n;
     /**
      * 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.
      */

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

@@ -44,6 +44,10 @@ export declare class TabContext {
     tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void;
     tabCreatedHandler(ev: CustomEvent): void;
     tabEnabledHandler(): void;
+    /**
+     * Sets focus on the tab context.
+     */
+    setFocus(): Promise<void>;
     /**
      * @internal Used to set tab/tab panel IDs when a tab/tab panel has been removed
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcValueEventDetail, IcSizesNoLarge, IcThemeMode } from "../../utils/types";
+import { IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcValueEventDetail, IcSizesNoLarge, IcThemeMode, IcValidationAriaLive } from "../../utils/types";
 import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./ic-text-field.types";
 /**
  * @slot helper-text - Content is set as the helper text for the text field.
@@ -176,6 +176,10 @@ export declare class TextField {
      * The type of control to display. The default type is text.
      */
     type: IcTextFieldTypes;
+    /**
+     * The value of the `aria-live` attribute on the validation message. When set to "default", the `aria-live` value will be handled automatically, e.g. "assertive" for `validation-status="error"`.
+     */
+    validationAriaLive: IcValidationAriaLive;
     /**
      * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.
      */
@@ -253,6 +257,7 @@ export declare class TextField {
     private onWheel;
     private hasStatus;
     private handleFormReset;
+    private showValidationMargin;
     private hostMutationCallback;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcMultiValueEventDetail, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcThemeSettings, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAriaLive, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcMultiValueEventDetail, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcThemeSettings, IcTypographyVariants, IcValidationAriaLive, IcValueEventDetail } from "./utils/types";
 import { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcBackToTopPositions, IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
@@ -15,7 +15,6 @@ import { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./co
 import { IcEmptyStateAlignment } from "./components/ic-empty-state/ic-empty-state.types";
 import { IcFooterBreakpoints } from "./components/ic-footer/ic-footer.types";
 import { IcHeroContentAlignments } from "./components/ic-hero/ic-hero.types";
-import { IcAriaLiveModeVariants } from "./components/ic-input-validation/ic-input-validation.types";
 import { IcGridBreakpoints, IcGridType } from "./components/ic-layout-grid/ic-layout-grid.types";
 import { IcLoadingSizes, IcLoadingTypes } from "./components/ic-loading-indicator/ic-loading-indicator.types";
 import { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./components/ic-search-bar/ic-search-bar.types";
@@ -29,14 +28,14 @@ import { IcChangeEventDetail as IcChangeEventDetail2 } from "./components/ic-rad
 import { IcExpandedDetail } from "./components/ic-side-navigation/ic-side-navigation.types";
 import { IcSkeletonVariants } from "./components/ic-skeleton/ic-skeleton.types";
 import { IcStatusTagStatuses } from "./components/ic-status-tag/ic-status-tag.types";
-import { IcStepStatuses, IcStepTypes, IcStepVariants } from "./components/ic-step/ic-step.types";
+import { IcStepI18n, IcStepStatuses, IcStepTypes, IcStepVariants } from "./components/ic-step/ic-step.types";
 import { IcStepperAlignment } from "./components/ic-stepper/ic-stepper.types";
 import { IcSwitchChangeEventDetail } from "./components/ic-switch/ic-switch.types";
 import { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-tab/ic-tab.types";
 import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./components/ic-text-field/ic-text-field.types";
 import { IcChangeEventDetail as IcChangeEventDetail3 } from "./components/ic-toggle-button-group/ic-toggle-button-group.types";
 import { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
-export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcMultiValueEventDetail, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcThemeSettings, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAriaLive, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcMultiValueEventDetail, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcThemeSettings, IcTypographyVariants, IcValidationAriaLive, IcValueEventDetail } from "./utils/types";
 export { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcBackToTopPositions, IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
@@ -46,7 +45,6 @@ export { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./co
 export { IcEmptyStateAlignment } from "./components/ic-empty-state/ic-empty-state.types";
 export { IcFooterBreakpoints } from "./components/ic-footer/ic-footer.types";
 export { IcHeroContentAlignments } from "./components/ic-hero/ic-hero.types";
-export { IcAriaLiveModeVariants } from "./components/ic-input-validation/ic-input-validation.types";
 export { IcGridBreakpoints, IcGridType } from "./components/ic-layout-grid/ic-layout-grid.types";
 export { IcLoadingSizes, IcLoadingTypes } from "./components/ic-loading-indicator/ic-loading-indicator.types";
 export { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./components/ic-search-bar/ic-search-bar.types";
@@ -60,7 +58,7 @@ export { IcChangeEventDetail as IcChangeEventDetail2 } from "./components/ic-rad
 export { IcExpandedDetail } from "./components/ic-side-navigation/ic-side-navigation.types";
 export { IcSkeletonVariants } from "./components/ic-skeleton/ic-skeleton.types";
 export { IcStatusTagStatuses } from "./components/ic-status-tag/ic-status-tag.types";
-export { IcStepStatuses, IcStepTypes, IcStepVariants } from "./components/ic-step/ic-step.types";
+export { IcStepI18n, IcStepStatuses, IcStepTypes, IcStepVariants } from "./components/ic-step/ic-step.types";
 export { IcStepperAlignment } from "./components/ic-stepper/ic-stepper.types";
 export { IcSwitchChangeEventDetail } from "./components/ic-switch/ic-switch.types";
 export { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-tab/ic-tab.types";
@@ -1040,7 +1038,7 @@ export namespace Components {
         /**
           * The ARIA live mode to apply to the message.
          */
-        "ariaLiveMode"?: IcAriaLiveModeVariants;
+        "ariaLiveMode"?: IcAriaLive;
         /**
           * The ID of the form element the validation is bound to.
          */
@@ -1649,6 +1647,10 @@ export namespace Components {
           * 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 `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive": IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -1656,7 +1658,7 @@ export namespace Components {
         /**
           * The text to display as the validation message.
          */
-        "validationText"?: string;
+        "validationText": string;
     }
     interface IcRadioOption {
         /**
@@ -1962,6 +1964,10 @@ export namespace Components {
           * If using external filtering, set a timeout for when loading takes too long.
          */
         "timeout"?: number;
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive": IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -2103,6 +2109,10 @@ export namespace Components {
           * The title of the step within the stepper.
          */
         "heading"?: string;
+        /**
+          * Words within the component that can be replaced to translate the component into a different language
+         */
+        "icI18n": IcStepI18n;
         "lastStep": boolean;
         "lastStepNum"?: number;
         "nextStepHeading"?: string;
@@ -2136,6 +2146,10 @@ export namespace Components {
           * 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;
+        /**
+          * Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.
+         */
+        "icI18n"?: IcStepI18n;
         /**
           * 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.
          */
@@ -2220,6 +2234,10 @@ export namespace Components {
           * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.
          */
         "selectedTabIndex"?: number;
+        /**
+          * Sets focus on the tab context.
+         */
+        "setFocus": () => Promise<void>;
         "tabRemovedHandler": (hadFocus?: boolean) => Promise<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.
@@ -2382,6 +2400,10 @@ export namespace Components {
           * The type of control to display. The default type is text.
          */
         "type": IcTextFieldTypes;
+        /**
+          * The value of the `aria-live` attribute on the validation message. When set to "default", the `aria-live` value will be handled automatically, e.g. "assertive" for `validation-status="error"`.
+         */
+        "validationAriaLive": IcValidationAriaLive;
         /**
           * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.
          */
@@ -4672,7 +4694,7 @@ declare namespace LocalJSX {
         /**
           * The ARIA live mode to apply to the message.
          */
-        "ariaLiveMode"?: IcAriaLiveModeVariants;
+        "ariaLiveMode"?: IcAriaLive;
         /**
           * The ID of the form element the validation is bound to.
          */
@@ -5247,6 +5269,10 @@ declare namespace LocalJSX {
           * 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 `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive"?: IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -5635,6 +5661,10 @@ declare namespace LocalJSX {
           * If using external filtering, set a timeout for when loading takes too long.
          */
         "timeout"?: number;
+        /**
+          * The value of the `aria-live` attribute on the validation message.
+         */
+        "validationAriaLive"?: IcAriaLive;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -5773,6 +5803,10 @@ declare namespace LocalJSX {
           * The title of the step within the stepper.
          */
         "heading"?: string;
+        /**
+          * Words within the component that can be replaced to translate the component into a different language
+         */
+        "icI18n"?: IcStepI18n;
         /**
           * The status of the step. Use this prop to display a status message on the step if it is required or optional.
          */
@@ -5799,6 +5833,10 @@ declare namespace LocalJSX {
           * 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;
+        /**
+          * Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.
+         */
+        "icI18n"?: IcStepI18n;
         /**
           * 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.
          */
@@ -6051,6 +6089,10 @@ declare namespace LocalJSX {
           * The type of control to display. The default type is text.
          */
         "type"?: IcTextFieldTypes;
+        /**
+          * The value of the `aria-live` attribute on the validation message. When set to "default", the `aria-live` value will be handled automatically, e.g. "assertive" for `validation-status="error"`.
+         */
+        "validationAriaLive"?: IcValidationAriaLive;
         /**
           * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.
          */

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export { Components, JSX } from "./components";
+export * from "./utils/constants";

package/dist/types/interface.d.ts

@@ -7,7 +7,6 @@ export * from "./components/ic-button/ic-button.types";
 export * from "./components/ic-classification-banner/ic-classification-banner.types";
 export * from "./components/ic-footer/ic-footer.types";
 export * from "./components/ic-hero/ic-hero.types";
-export * from "./components/ic-input-validation/ic-input-validation.types";
 export * from "./components/ic-loading-indicator/ic-loading-indicator.types";
 export * from "./components/ic-navigation-button/ic-navigation-button.types";
 export * from "./components/ic-skeleton/ic-skeleton.types";

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

@@ -0,0 +1,2 @@
+export declare const sanitizeHTMLString: (html: string) => string;
+export declare const sanitizeHTMLIconString: (html: string) => string;

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

@@ -41,3 +41,4 @@ export declare const IC_BLOCK_COLOR_EXCEPTIONS: IcColorExceptions;
 export declare const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;
 export declare const WHITE_MAX_COLOR_BRIGHTNESS = 130;
 export declare const IGNORED_KEYBOARD_CHARACTERS: string[];
+export declare const IC_CUSTOM_ALLOWED_COMPONENTS: string[];

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

@@ -89,4 +89,6 @@ export type IcColor = RGB | RGBA | HEX;
 export type IcIconPlacementOptions = "left" | "right" | "top";
 export type IcButtonTooltipPlacement = "top" | "right" | "bottom" | "left";
 export type IcThemeSettings = "dark" | "light" | "system";
+export type IcAriaLive = "polite" | "assertive" | "off";
+export type IcValidationAriaLive = "default" | "polite" | "assertive" | "off";
 export {};