@ukic/web-components 2.18.0 → 2.19.0

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

@@ -1,6 +1,4 @@
-import { EventEmitter } from "../../stencil-public-runtime";
 import { IcTypographyVariants } from "../../utils/types";
-import { IcExpandEventDetail } from "./ic-typography.types";
 export declare class Typography {
     private focusBtnFromKeyboard;
     private lastMarkerTop;
@@ -43,26 +41,11 @@ export declare class Typography {
      */
     variant?: IcTypographyVariants;
     expanded: boolean;
-    /**
-     * Emitted when the See More/See Less button is clicked.
-     */
-    icExpand?: EventEmitter<IcExpandEventDetail>;
     watchExpandedHandler(): void;
     disconnectedCallback(): void;
     componentDidLoad(): void;
-    /**
-     * Truncate the text in ic-typography by adding a line-clamp css property.
-     * @param height Used to calculate whether the element has exceeded the maximum number of lines.
-     *
-     */
-    checkMaxLines(height: number): Promise<void>;
-    /**
-     * @internal Truncate the text in ic-typography by adding a line-clamp css property. This method is specific to ic-data-table.
-     * height - used to calculate whether the element has exceeded the maximum number of lines.
-     * typographyHeight - the scroll height of the typography element. Used as another way to calculate whether the element has exceeded the maximum number of lines.
-     */
-    checkCellTextMaxLines(height: number, typographyHeight?: number): Promise<void>;
     private toggleExpanded;
+    private checkMaxLines;
     private checkMarkerPosition;
     private getElementTop;
     private runResizeObserver;

package/dist/types/components.d.ts

@@ -5,8 +5,8 @@
  * 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, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
-import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants, IcColor } from "./components/ic-badge/ic-badge.types";
+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 { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
 import { IcButtonTooltipPlacement, 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";
@@ -32,9 +32,8 @@ import { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-t
 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";
-import { IcExpandEventDetail } from "./components/ic-typography/ic-typography.types";
-export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
-export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants, IcColor } from "./components/ic-badge/ic-badge.types";
+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 { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
 export { IcButtonTooltipPlacement, 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";
@@ -60,7 +59,6 @@ export { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-t
 export { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./components/ic-text-field/ic-text-field.types";
 export { IcChangeEventDetail as IcChangeEventDetail3 } from "./components/ic-toggle-button-group/ic-toggle-button-group.types";
 export { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
-export { IcExpandEventDetail } from "./components/ic-typography/ic-typography.types";
 export namespace Components {
     interface IcAccordion {
         "appearance"?: IcThemeForeground;
@@ -106,6 +104,10 @@ export namespace Components {
           * The header for the accordion group.
          */
         "groupTitle": string;
+        /**
+          * Sets the focus on first focusable element in the accordion group. If the "See/Hide all" button is present, it will be focused. Otherwise, the first accordion will be focused.
+         */
+        "setFocus": () => Promise<void>;
         /**
           * If `true`, only one accordion will open at a time.
          */
@@ -526,6 +528,10 @@ export namespace Components {
           * @deprecated This prop should not be used anymore. Use variant prop instead.
          */
         "appearance"?: IcChipAppearance;
+        /**
+          * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+         */
+        "customColor"?: IcColor;
         /**
           * If `true`, the chip will appear disabled.
          */
@@ -1481,6 +1487,7 @@ export namespace Components {
           * Sets focus on the radio option.
          */
         "setFocus": () => Promise<void>;
+        "setTabIndex": (value: number) => Promise<void>;
         /**
           * The value for the radio option.
          */
@@ -1890,6 +1897,10 @@ export namespace Components {
           * The alignment of the default stepper within its container.
          */
         "aligned"?: IcStepperAlignment;
+        /**
+          * The appearance of the stepper.
+         */
+        "appearance"?: "light" | "default";
         /**
           * The length of the connnector between each step in pixels. Minimum length is 100px.
          */
@@ -2320,6 +2331,10 @@ export namespace Components {
           * The alignment of the top navigation content.
          */
         "contentAligned": IcAlignment;
+        /**
+          * Can set a custom breakpoint for the top navigation to switch to mobile mode. Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.
+         */
+        "customMobileBreakpoint": IcDeviceSizes;
         /**
           * The URL to navigate to when the app title is clicked.
          */
@@ -2350,12 +2365,6 @@ export namespace Components {
           * If `true`, the typography will have a bold font weight. Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).
          */
         "bold"?: boolean;
-        "checkCellTextMaxLines": (height: number, typographyHeight?: number) => Promise<void>;
-        /**
-          * Truncate the text in ic-typography by adding a line-clamp css property.
-          * @param height Used to calculate whether the element has exceeded the maximum number of lines.
-         */
-        "checkMaxLines": (height: number) => Promise<void>;
         /**
           * If `true`, the typography will have an italic font style.
          */
@@ -2498,10 +2507,6 @@ export interface IcTopNavigationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcTopNavigationElement;
 }
-export interface IcTypographyCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLIcTypographyElement;
-}
 declare global {
     interface HTMLIcAccordionElementEventMap {
         "accordionClicked": { id: string };
@@ -3271,18 +3276,7 @@ declare global {
         prototype: HTMLIcTopNavigationElement;
         new (): HTMLIcTopNavigationElement;
     };
-    interface HTMLIcTypographyElementEventMap {
-        "icExpand": IcExpandEventDetail;
-    }
     interface HTMLIcTypographyElement extends Components.IcTypography, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIcTypographyElementEventMap>(type: K, listener: (this: HTMLIcTypographyElement, ev: IcTypographyCustomEvent<HTMLIcTypographyElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLIcTypographyElementEventMap>(type: K, listener: (this: HTMLIcTypographyElement, ev: IcTypographyCustomEvent<HTMLIcTypographyElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIcTypographyElement: {
         prototype: HTMLIcTypographyElement;
@@ -3819,6 +3813,10 @@ declare namespace LocalJSX {
           * @deprecated This prop should not be used anymore. Use variant prop instead.
          */
         "appearance"?: IcChipAppearance;
+        /**
+          * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+         */
+        "customColor"?: IcColor;
         /**
           * If `true`, the chip will appear disabled.
          */
@@ -5231,6 +5229,10 @@ declare namespace LocalJSX {
           * The alignment of the default stepper within its container.
          */
         "aligned"?: IcStepperAlignment;
+        /**
+          * The appearance of the stepper.
+         */
+        "appearance"?: "light" | "default";
         /**
           * The length of the connnector between each step in pixels. Minimum length is 100px.
          */
@@ -5667,6 +5669,10 @@ declare namespace LocalJSX {
           * The alignment of the top navigation content.
          */
         "contentAligned"?: IcAlignment;
+        /**
+          * Can set a custom breakpoint for the top navigation to switch to mobile mode. Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.
+         */
+        "customMobileBreakpoint"?: IcDeviceSizes;
         /**
           * The URL to navigate to when the app title is clicked.
          */
@@ -5709,10 +5715,6 @@ declare namespace LocalJSX {
           * The number of lines to display before truncating the text, only used for the 'body' variant.
          */
         "maxLines"?: number;
-        /**
-          * Emitted when the See More/See Less button is clicked.
-         */
-        "onIcExpand"?: (event: IcTypographyCustomEvent<IcExpandEventDetail>) => void;
         /**
           * If `true`, the typography will have a line through it.
          */

package/dist/types/interface.d.ts

@@ -15,4 +15,3 @@ export * from "./components/ic-status-tag/ic-status-tag.types";
 export * from "./components/ic-step/ic-step.types";
 export * from "./components/ic-text-field/ic-text-field.types";
 export * from "./components/ic-tooltip/ic-tooltip.types";
-export * from "./components/ic-typography/ic-typography.types";

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

@@ -1,6 +1,10 @@
 import { EventEmitter } from "../stencil-public-runtime";
-import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA } from "./types";
+import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor } from "./types";
 import { IcMenuOption, IcThemeForeground } from "../utils/types";
+/**
+ * converts an enum of strings into an array of strings
+ */
+export declare const stringEnumToArray: (theEnum: Record<string, string | number>) => string[];
 /**
  * Used to inherit global attributes set on the host. Called in componentWillLoad and assigned
  * to a variable that is later used in the render function.
@@ -25,7 +29,7 @@ export declare const debounce: (func: (...args: unknown[]) => void, wait?: numbe
  * @param value The value of the input
  * @param disabled If true, the input is disabled
  */
-export declare const renderHiddenInput: (always: boolean, container: HTMLElement, name: string, value: string | undefined | null, disabled: boolean) => void;
+export declare const renderHiddenInput: (always: boolean, container: HTMLElement, name: string, value: string | Date | undefined | null, disabled: boolean) => void;
 /**
  * This method is used to add a hidden file input to a host element that contains
  * a Shadow DOM. It does not add the input inside of the Shadow root which
@@ -59,6 +63,10 @@ export declare const getInputDescribedByText: (inputId: string, helperText: bool
  * @returns IcThemeForeground depending on the context
  */
 export declare const getThemeFromContext: (el: Element, themeFromEvent?: IcThemeForeground) => IcThemeForeground;
+/**
+ * Checks if the current device is a mobile or tablet device.
+ * @returns {boolean} Returns true if the device is a mobile or tablet device, otherwise returns false.
+ */
 export declare const isMobileOrTablet: () => boolean;
 /**
  * Will create a button within the lightDOM which interacts with the parent form.
@@ -108,11 +116,11 @@ export declare const getSlotContent: (element: HTMLElement, name: string) => Ele
 export declare const getSlotElements: (slot: Element) => NodeListOf<ChildNode> | Element[];
 export declare const getNavItemParentDetails: (el: HTMLElement) => IcNavParentDetails;
 export declare const DEVICE_SIZES: {
-    XS: number;
-    S: number;
-    M: number;
-    L: number;
-    XL: number;
+    XS: IcDeviceSizes;
+    S: IcDeviceSizes;
+    M: IcDeviceSizes;
+    L: IcDeviceSizes;
+    XL: IcDeviceSizes;
     UNDEFINED: number;
 };
 export declare const hasValidationStatus: (status: IcInformationStatusOrEmpty, disabled: boolean) => boolean;
@@ -138,3 +146,6 @@ export declare const removeFormResetListener: (el: HTMLElement, callbackFn: IcCa
 export declare const pxToRem: (px: string, base?: number) => string;
 export declare const removeDisabledFalse: (disabled: boolean, element: HTMLElement) => void;
 export declare const isMacDevice: () => boolean;
+export declare const isNumeric: (value: string) => boolean;
+export declare function waitForHydration(): Promise<boolean>;
+export declare const convertToRGBA: (color: IcColor | string) => IcColorRGBA;

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

@@ -76,3 +76,9 @@ export interface IcBlurEventDetail {
 }
 export type IcSelectTypes = "single" | "multi";
 export type IcSelectMethodTypes = "auto" | "manual";
+export type IcDeviceSizes = 0 | 576 | 768 | 992 | 1200;
+type RGB = `rgb(${string})`;
+type RGBA = `rgba(${string})`;
+type HEX = `#${string}`;
+export type IcColor = RGB | RGBA | HEX;
+export {};