@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.11

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../stencil-public-runtime";
-import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor } from "./types";
-import { IcMenuOption, IcThemeForeground } from "../utils/types";
+import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor, IcBrandForegroundNoDefault } from "./types";
+import { IcMenuOption, IcBrandForeground } from "../utils/types";
 /**
  * converts an enum of strings into an array of strings
  */
@@ -60,9 +60,9 @@ export declare const getInputDescribedByText: (inputId: string, helperText: bool
  * are part of an IC component.
  *
  * ""
- * @returns IcThemeForeground depending on the context
+ * @returns IcBrandForeground depending on the context
  */
-export declare const getThemeFromContext: (el: Element, themeFromEvent?: IcThemeForeground) => IcThemeForeground;
+export declare const getBrandFromContext: (el: Element, brandFromEvent?: IcBrandForeground) => IcBrandForeground;
 /**
  * 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.
@@ -94,6 +94,13 @@ export declare const getLabelFromValue: (value: string, options: IcMenuOption[],
  * @returns filtered array of options
  */
 export declare const getFilteredMenuOptions: (options: IcMenuOption[], includeDescriptions: boolean, searchString: string, position: IcSearchMatchPositions, labelField?: string) => IcMenuOption[];
+/**
+ * Gets count of options where only group title "parent" options have been removed.
+ * Disabled options are included in the count.
+ * @param options - array of options
+ * @returns number of options not including group titles
+ */
+export declare const getOptionsWithoutGroupTitlesCount: (options: IcMenuOption[]) => number;
 export declare const deviceSizeMatches: (size: number) => boolean;
 export declare const getCurrentDeviceSize: () => number;
 export declare const getCssProperty: (cssVar: string) => string;
@@ -101,16 +108,16 @@ export declare const getCssProperty: (cssVar: string) => string;
  * Returns the brightness of the theme colour, calculated by using the theme RGB CSS values by:
  * - Multiplying each RGB value by a set number: https://www.w3.org/TR/AERT/#color-contrast
  * - Adding them together and dividing by 1000
- * This is a similar calculation to its CSS counterpart: "--ic-theme-text"
+ * This is a similar calculation to its CSS counterpart: "--ic-brand-text-color"
  * @returns number representing the brightness of the theme colour
  */
-export declare const getThemeColorBrightness: () => number;
+export declare const getBrandColorBrightness: () => number;
 /**
  * Returns if dark or light foreground colors should be used for color contrast reasons
  * @returns "dark" or "light"
- * @param brightness - Optional custom brightness value. Defaults to `getThemeColorBrightness`
+ * @param brightness - Optional custom brightness value. Defaults to `getBrandColorBrightness`
  */
-export declare const getThemeForegroundColor: (brightness?: number) => IcThemeForeground;
+export declare const getBrandForegroundAppearance: (brightness?: number) => IcBrandForegroundNoDefault;
 export declare const getSlot: (element: HTMLElement, name: string) => Element | null;
 export declare const slotHasContent: (element: HTMLElement, name: string) => boolean;
 export declare const getSlotContent: (element: HTMLElement, name: string) => Element[] | NodeListOf<ChildNode> | null;
@@ -137,6 +144,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 +156,6 @@ 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 isSlottedInGroup: (component: any) => 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

@@ -11,16 +11,16 @@ export type IcInformationStatusOrEmpty = "warning" | "error" | "success" | "";
 export type IcNavType = "side" | "top" | "page-header";
 export type IcAutocompleteTypes = "on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
 export type IcAlignment = "left" | "center" | "full-width";
-export declare enum IcThemeForegroundEnum {
+export declare enum IcBrandForegroundEnum {
     Default = "default",
     Dark = "dark",
     Light = "light"
 }
 export type IcThemeMode = "dark" | "light" | "inherit";
-export type IcThemeForeground = "default" | "dark" | "light";
-export type IcThemeForegroundNoDefault = "dark" | "light";
-export type IcTheme = {
-    mode: IcThemeForeground;
+export type IcBrandForeground = "default" | "dark" | "light";
+export type IcBrandForegroundNoDefault = "dark" | "light";
+export type IcBrand = {
+    mode: IcBrandForeground;
     color: IcColorRGB;
 };
 export type IcAdditionalFieldTypes = "static" | "dynamic";
@@ -69,7 +69,7 @@ export type IcRelatedTarget = EventTarget | undefined;
 export type IcOrientation = "horizontal" | "vertical";
 export type IcEmphasisType = "filled" | "outlined";
 export interface IcValueEventDetail {
-    value: string;
+    value: string | string[];
     keyPressed?: string;
 }
 export interface IcBlurEventDetail {
@@ -82,4 +82,6 @@ type RGB = `rgb(${string})`;
 type RGBA = `rgba(${string})`;
 type HEX = `#${string}`;
 export type IcColor = RGB | RGBA | HEX;
+export type IcIconPlacementOptions = "left" | "right" | "top";
+export type IcButtonTooltipPlacement = "top" | "right" | "bottom" | "left";
 export {};