@ukic/web-components 2.32.1 → 2.34.0

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

@@ -13,6 +13,7 @@ export declare class MenuItem {
      * If `true`, the menu item will be in disabled state.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The URL that the link points to. This will render the menu item as an "a" tag.
      */

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

@@ -30,6 +30,7 @@ export declare class Pagination {
      * If `true`, the pagination will not allow interaction.
      */
     disabled: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the current page of the simple pagination will not be displayed.
      */

package/dist/types/components/ic-pagination-item/ic-pagination-item.d.ts

@@ -12,6 +12,7 @@ export declare class PaginationItem {
      * If `true`, the pagination item will be disabled.
      */
     disabled: boolean;
+    watchDisabledHandler(): void;
     /**
      * The label for the pagination item (applicable when simple pagination is being used).
      */

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

@@ -17,6 +17,7 @@ export declare class RadioOption {
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The text to be displayed when dynamic.
      */

package/dist/types/components/ic-search-bar/ic-search-bar.d.ts

@@ -53,6 +53,7 @@ export declare class SearchBar {
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.
      * If `true`, all options provided will be displayed.

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

@@ -42,6 +42,7 @@ export declare class Select {
      * 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.
      */

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

@@ -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.
      */

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

@@ -18,6 +18,7 @@ export declare class Tab {
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /** @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. */

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

@@ -58,6 +58,7 @@ export declare class TextField {
      * If `true`, the disabled state will be set.
      */
     disabled: boolean;
+    watchDisabledHandler(): void;
     /**
      * Specify whether the text field fills the full width of the container.
      * If `true`, this overrides the --input-width CSS variable.
@@ -223,6 +224,7 @@ export declare class TextField {
      * Sets focus on the native `input`.
      */
     setFocus(): Promise<void>;
+    private getNumberOfCharacters;
     private getMaxLengthExceeded;
     private getMaxCharactersReached;
     private onInput;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcSizes, IcThemeForeground } from "../../utils/types";
+import { IcButtonTooltipPlacement, IcSizes, IcThemeForeground } from "../../utils/types";
 /**
  * @slot icon - Content will be displayed alongside the toggle button label.
  * @slot badge - Badge component overlaying the top right of the toggle button.
@@ -20,6 +20,7 @@ export declare class ToggleButton {
      * If `true`, the toggle button will be in disabled state.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the toggle button will fill the width of the container.
      */
@@ -44,6 +45,10 @@ export declare class ToggleButton {
      * If `true`, the toggle button will be in a checked state.
      */
     toggleChecked: boolean;
+    /**
+     * The position of the tooltip in relation to the toggle button.
+     */
+    tooltipPlacement: IcButtonTooltipPlacement;
     /**
      * The variant of the toggle button.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcSizes, IcThemeForeground, IcSelectTypes, IcSelectMethodTypes } from "../../utils/types";
+import { IcSizes, IcThemeForeground, IcSelectTypes, IcSelectMethodTypes, IcButtonTooltipPlacement } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-toggle-button-group.types";
 interface lastKey {
     key: string | null;
@@ -20,6 +20,7 @@ export declare class ToggleButtonGroup {
      * If `true`, the toggle button group will be set to the disabled state.
      */
     disabled: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the toggle button group will fill the width of the container.
      */
@@ -44,6 +45,11 @@ export declare class ToggleButtonGroup {
      * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
      */
     size?: IcSizes;
+    /**
+     * The position of the tooltip in relation to the toggle buttons.
+     */
+    tooltipPlacement: IcButtonTooltipPlacement;
+    watchTooltipPlacementHandler(): void;
     /**
      * The variant of the toggle button.
      */

package/dist/types/components.d.ts

@@ -5,10 +5,10 @@
  * 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, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 import { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
-import { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
+import { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 import { IcChipAppearance } from "./components/ic-chip/ic-chip.types";
 import { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
@@ -34,10 +34,10 @@ import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from
 import { IcChangeEventDetail as IcChangeEventDetail3 } from "./components/ic-toggle-button-group/ic-toggle-button-group.types";
 import { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
 import { Options } from "@popperjs/core";
-export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 export { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
-export { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
+export { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 export { IcChipAppearance } from "./components/ic-chip/ic-chip.types";
 export { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
@@ -556,6 +556,10 @@ export namespace Components {
           * If `true`, the chip will appear disabled.
          */
         "disabled"?: boolean;
+        /**
+          * The text in the dismiss button tooltip and aria label.
+         */
+        "dismissLabel"?: string;
         /**
           * If `true`, the chip will have a close button at the end to dismiss it.
          */
@@ -2270,6 +2274,10 @@ export namespace Components {
           * If `true`, the toggle button will be in a checked state.
          */
         "toggleChecked": boolean;
+        /**
+          * The position of the tooltip in relation to the toggle button.
+         */
+        "tooltipPlacement": IcButtonTooltipPlacement;
         /**
           * The variant of the toggle button.
          */
@@ -2312,6 +2320,10 @@ export namespace Components {
           * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
          */
         "size"?: IcSizes;
+        /**
+          * The position of the tooltip in relation to the toggle buttons.
+         */
+        "tooltipPlacement": IcButtonTooltipPlacement;
         /**
           * The variant of the toggle button.
          */
@@ -3891,6 +3903,10 @@ declare namespace LocalJSX {
           * If `true`, the chip will appear disabled.
          */
         "disabled"?: boolean;
+        /**
+          * The text in the dismiss button tooltip and aria label.
+         */
+        "dismissLabel"?: string;
         /**
           * If `true`, the chip will have a close button at the end to dismiss it.
          */
@@ -5667,6 +5683,10 @@ declare namespace LocalJSX {
           * If `true`, the toggle button will be in a checked state.
          */
         "toggleChecked"?: boolean;
+        /**
+          * The position of the tooltip in relation to the toggle button.
+         */
+        "tooltipPlacement"?: IcButtonTooltipPlacement;
         /**
           * The variant of the toggle button.
          */
@@ -5713,6 +5733,10 @@ declare namespace LocalJSX {
           * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
          */
         "size"?: IcSizes;
+        /**
+          * The position of the tooltip in relation to the toggle buttons.
+         */
+        "tooltipPlacement"?: IcButtonTooltipPlacement;
         /**
           * The variant of the toggle button.
          */

package/dist/types/testspec.setup.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="jest" />
 type TestKeyboardEvent = {
     key: string;
     preventDefault: () => void;
@@ -7,6 +8,14 @@ type TestKeyboardEvent = {
         id: string;
     };
 };
+export declare const mockMutationObserverImplementation: jest.SpyInstance<MutationObserver, [callback: MutationCallback]>;
+export type MockMutationRecord = {
+    addedNodes?: Node[];
+    removedNodes?: Node[];
+    target?: Node;
+};
+export declare const mockRenderDynamicChildSlots: jest.SpyInstance<void, [mutationList: MutationRecord[], slotNames: string | string[], ref: any]>;
+export declare const mockHasDynamicChildSlots: jest.SpyInstance<boolean, [mutationList: MutationRecord[], slotNames: string | string[]]>;
 export declare const waitForTimeout: (ms: number) => Promise<void>;
 export declare const mockDeviceSize: (size: number) => void;
 export declare const waitForNavGroupLoad: () => Promise<void>;

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

@@ -137,6 +137,10 @@ export declare const hasClassificationBanner: () => boolean;
 export declare const addFormResetListener: (el: HTMLElement, callbackFn: IcCallbackFunctionNoReturn) => void;
 export declare const removeFormResetListener: (el: HTMLElement, callbackFn: IcCallbackFunctionNoReturn) => void;
 export declare const pxToRem: (px: string, base?: number) => string;
+/**
+ * Removes the disabled attribute from the provided element when its value is set to false.
+ * This effectively makes it null, to not confuse screen readers that cannot interpret the false value
+ */
 export declare const removeDisabledFalse: (disabled: boolean, element: HTMLElement) => void;
 export declare const isMacDevice: () => boolean;
 export declare const isNumeric: (value: string) => boolean;
@@ -145,3 +149,5 @@ export declare const convertToRGBA: (color: IcColor) => IcColorRGBA | null;
 export declare const capitalize: (text: string) => string;
 export declare const checkSlotInChildMutations: (addedNodes: NodeList, removedNodes: NodeList, slotName: string | string[]) => boolean;
 export declare const isElInAGGrid: (el: HTMLElement) => boolean;
+export declare const hasDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[]) => boolean;
+export declare const renderDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[], ref: any) => void;

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

@@ -81,4 +81,5 @@ type RGB = `rgb(${string})`;
 type RGBA = `rgba(${string})`;
 type HEX = `#${string}`;
 export type IcColor = RGB | RGBA | HEX;
+export type IcButtonTooltipPlacement = "top" | "right" | "bottom" | "left";
 export {};