@ukic/web-components 2.16.0 → 2.18.0

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcNavType, IcTheme } from "../../utils/types";
+import { IcNavType } from "../../utils/types";
 /**
  * @part link - The `<a>` within ic-navigation-item
  * @slot badge - Badge component overlaying the top right of the icon.
@@ -72,7 +72,7 @@ export declare class NavigationItem {
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidUpdate(): void;
-    themeChangeHandler({ detail }: CustomEvent<IcTheme>): void;
+    themeChangeHandler(ev: CustomEvent): void;
     /**
      * Sets focus on the nav item.
      */

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

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

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

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

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

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

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

@@ -162,7 +162,7 @@ export declare class TextField {
      */
     validationInline: boolean;
     /**
-     *  @internal If `true`, the validation will display inline.
+     * @internal If `true`, the validation will display inline.
      */
     validationInlineInternal: boolean;
     /**

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

@@ -1,6 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAlignment, IcThemeForeground, IcTheme, IcDeviceSizes, IcValueEventDetail } from "../../utils/types";
-import { IcSearchBarBlurEventDetail } from "../ic-search-bar/ic-search-bar.types";
+import { IcAlignment, IcThemeForeground } from "../../utils/types";
 /**
  * @slot app-icon - Content will be rendered to left of app title.
  * @slot app-title - Handle routing by nesting a route in the app title.
@@ -22,6 +21,7 @@ export declare class TopNavigation {
     deviceSize: number;
     foregroundColor: IcThemeForeground;
     hasFullWidthSearchBar: boolean;
+    menuOpen: boolean;
     mobileSearchBarVisible: boolean;
     mobileSearchHiddenOnBlur: boolean;
     navMenuVisible: boolean;
@@ -31,11 +31,6 @@ export declare class TopNavigation {
      * 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.
      */
@@ -80,9 +75,9 @@ export declare class TopNavigation {
     componentDidLoad(): void;
     componentWillRender(): void;
     navBarMenuCloseHandler(): void;
-    searchInputBlurHandler({ detail, }: CustomEvent<IcSearchBarBlurEventDetail>): void;
-    searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void;
-    themeChangeHandler({ detail }: CustomEvent<IcTheme>): void;
+    searchInputBlurHandler(ev: CustomEvent): void;
+    searchValueChangeHandler(ev: CustomEvent): void;
+    themeChangeHandler(ev: CustomEvent): void;
     private initialiseSearchBar;
     private toggleSearchBar;
     private menuButtonClick;

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

@@ -1,4 +1,6 @@
+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;
@@ -41,11 +43,26 @@ 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/ic-typography/ic-typography.types.d.ts

@@ -0,0 +1,4 @@
+export type IcExpandEventDetail = {
+    el: HTMLIcTypographyElement;
+    expanded: boolean;
+};

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, 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, 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 { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
@@ -32,7 +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";
-export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/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 { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
@@ -59,6 +60,7 @@ 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;
@@ -2318,10 +2320,6 @@ 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.
          */
@@ -2352,6 +2350,12 @@ 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.
          */
@@ -2494,6 +2498,10 @@ 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 };
@@ -3263,7 +3271,18 @@ 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;
@@ -5648,10 +5667,6 @@ 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.
          */
@@ -5694,6 +5709,10 @@ 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,3 +15,4 @@ 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,10 +1,6 @@
 import { EventEmitter } from "../stencil-public-runtime";
-import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes } from "./types";
+import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA } 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.
@@ -29,7 +25,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 | Date | undefined | null, disabled: boolean) => void;
+export declare const renderHiddenInput: (always: boolean, container: HTMLElement, name: string, value: string | 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
@@ -112,11 +108,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: IcDeviceSizes;
-    S: IcDeviceSizes;
-    M: IcDeviceSizes;
-    L: IcDeviceSizes;
-    XL: IcDeviceSizes;
+    XS: number;
+    S: number;
+    M: number;
+    L: number;
+    XL: number;
     UNDEFINED: number;
 };
 export declare const hasValidationStatus: (status: IcInformationStatusOrEmpty, disabled: boolean) => boolean;
@@ -142,4 +138,3 @@ 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;

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

@@ -76,4 +76,3 @@ export interface IcBlurEventDetail {
 }
 export type IcSelectTypes = "single" | "multi";
 export type IcSelectMethodTypes = "auto" | "manual";
-export type IcDeviceSizes = 0 | 576 | 768 | 992 | 1200;