@ukic/canary-web-components 3.0.0-canary.16 → 3.0.0-canary.18

package/dist/collection/utils/constants.js

@@ -69,7 +69,7 @@ export const IC_BLOCK_COLOR_COMPONENTS = [
 ];
 export const IC_FIXED_COLOR_COMPONENTS = ["ic-alert"];
 export const IC_BLOCK_COLOR_EXCEPTIONS = {
-    "ic-alert": ["ic-link"],
+    "ic-alert": ["ic-link", "ic-button"],
 };
 /* Range within which the chosen theme colour would not have a sufficient brightness difference with either of the black or white foreground colours
  * The brightness difference must be greater than 125 to provide good colour visibility
@@ -80,4 +80,43 @@ export const IC_BLOCK_COLOR_EXCEPTIONS = {
  */
 export const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;
 export const WHITE_MAX_COLOR_BRIGHTNESS = 130;
+// Keyboard characters that do not affect the content of an input control when pressed
+export const IGNORED_KEYBOARD_CHARACTERS = [
+    "Alt",
+    "AltGraph",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "AudioVolumeDown",
+    "AudioVolumeMute",
+    "AudioVolumeUp",
+    "CapsLock",
+    "ContextMenu",
+    "Control",
+    "Delete",
+    "End",
+    "Enter",
+    "Escape",
+    "F1",
+    "F10",
+    "F11",
+    "F12",
+    "F2",
+    "F3",
+    "F4",
+    "F5",
+    "F6",
+    "F7",
+    "F8",
+    "F9",
+    "Home",
+    "Insert",
+    "Meta",
+    "NumLock",
+    "PageDown",
+    "PageUp",
+    "Shift",
+    "Tab",
+];
 //# sourceMappingURL=constants.js.map

package/dist/collection/utils/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/utils/constants.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAErD,sBAAsB;AACtB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,sBAAsB;KAClC;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,OAAO;KACnB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;CACF,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,aAAa;IACb,mBAAmB;IACnB,WAAW;IACX,eAAe;IACf,cAAc;IACd,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,eAAe;IACf,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;IACf,aAAa;IACb,cAAc;IACd,eAAe;IACf,aAAa;IACb,cAAc;IACd,mBAAmB;IACnB,YAAY;IACZ,iBAAiB;IACjB,WAAW;IACX,WAAW;IACX,eAAe;IACf,sBAAsB;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,KAAK;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,SAAS;IACT,mBAAmB;IACnB,WAAW;IACX,oBAAoB;IACpB,UAAU;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,UAAU,CAAC,CAAC;AAMtD,MAAM,CAAC,MAAM,yBAAyB,GAAsB;IAC1D,UAAU,EAAE,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,OAAO,CAAC;AAClD,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAC","sourcesContent":["import errorIcon from \"../assets/error-icon.svg\";\nimport infoIcon from \"../assets/info-icon.svg\";\nimport neutralIcon from \"../assets/neutral-icon.svg\";\nimport successIcon from \"../assets/success-icon.svg\";\nimport warningIcon from \"../assets/warning-icon.svg\";\n\n// Global status icons\nexport const VARIANT_ICONS = {\n  neutral: {\n    icon: neutralIcon,\n    ariaLabel: \"Neutral\",\n  },\n  info: {\n    icon: infoIcon,\n    ariaLabel: \"For your information\",\n  },\n  warning: {\n    icon: warningIcon,\n    ariaLabel: \"Warning\",\n  },\n  error: {\n    icon: errorIcon,\n    ariaLabel: \"Error\",\n  },\n  success: {\n    icon: successIcon,\n    ariaLabel: \"Success\",\n  },\n};\n\n// Global ARIA attributes\nexport const IC_INHERITED_ARIA = [\n  \"aria-atomic\",\n  \"aria-autocomplete\",\n  \"aria-busy\",\n  \"aria-controls\",\n  \"aria-current\",\n  \"aria-describedby\",\n  \"aria-description\",\n  \"aria-details\",\n  \"aria-disabled\",\n  \"aria-dropeffect\",\n  \"aria-errormessage\",\n  \"aria-expanded\",\n  \"aria-flowto\",\n  \"aria-grabbed\",\n  \"aria-haspopup\",\n  \"aria-hidden\",\n  \"aria-invalid\",\n  \"aria-keyshortcuts\",\n  \"aria-label\",\n  \"aria-labelledby\",\n  \"aria-live\",\n  \"aria-owns\",\n  \"aria-relevant\",\n  \"aria-roledescription\",\n];\n\nexport const IC_DEVICE_SIZES = {\n  XS: 576,\n  S: 768,\n  M: 992,\n  L: 1200,\n  XL: 99999,\n};\n\nexport const IC_BLOCK_COLOR_COMPONENTS = [\n  \"ic-hero\",\n  \"ic-top-navigation\",\n  \"ic-footer\",\n  \"ic-side-navigation\",\n  \"ic-alert\",\n];\n\nexport const IC_FIXED_COLOR_COMPONENTS = [\"ic-alert\"];\n\nexport interface IcColorExceptions {\n  [details: string]: string[];\n}\n\nexport const IC_BLOCK_COLOR_EXCEPTIONS: IcColorExceptions = {\n  \"ic-alert\": [\"ic-link\"],\n};\n\n/* Range within which the chosen theme colour would not have a sufficient brightness difference with either of the black or white foreground colours\n * The brightness difference must be greater than 125 to provide good colour visibility\n * Calculated by:\n * - Using the brightness formula for both colours: https://www.w3.org/TR/AERT/#color-contrast\n * - Adding 125 to the brightness of the black foreground colour - RGB(11, 12, 12)\n * - Subtracting 125 from the brightness of the white foreground colour - RGB(255, 255, 255)\n */\nexport const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;\nexport const WHITE_MAX_COLOR_BRIGHTNESS = 130;\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/utils/constants.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAErD,sBAAsB;AACtB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,sBAAsB;KAClC;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,OAAO;KACnB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;CACF,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,aAAa;IACb,mBAAmB;IACnB,WAAW;IACX,eAAe;IACf,cAAc;IACd,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,eAAe;IACf,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;IACf,aAAa;IACb,cAAc;IACd,eAAe;IACf,aAAa;IACb,cAAc;IACd,mBAAmB;IACnB,YAAY;IACZ,iBAAiB;IACjB,WAAW;IACX,WAAW;IACX,eAAe;IACf,sBAAsB;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,KAAK;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,SAAS;IACT,mBAAmB;IACnB,WAAW;IACX,oBAAoB;IACpB,UAAU;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,UAAU,CAAC,CAAC;AAMtD,MAAM,CAAC,MAAM,yBAAyB,GAAsB;IAC1D,UAAU,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC;CACrC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,OAAO,CAAC;AAClD,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAE9C,sFAAsF;AACtF,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,KAAK;IACL,UAAU;IACV,WAAW;IACX,WAAW;IACX,YAAY;IACZ,SAAS;IACT,iBAAiB;IACjB,iBAAiB;IACjB,eAAe;IACf,UAAU;IACV,aAAa;IACb,SAAS;IACT,QAAQ;IACR,KAAK;IACL,OAAO;IACP,QAAQ;IACR,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,MAAM;IACN,QAAQ;IACR,MAAM;IACN,SAAS;IACT,UAAU;IACV,QAAQ;IACR,OAAO;IACP,KAAK;CACN,CAAC","sourcesContent":["import errorIcon from \"../assets/error-icon.svg\";\nimport infoIcon from \"../assets/info-icon.svg\";\nimport neutralIcon from \"../assets/neutral-icon.svg\";\nimport successIcon from \"../assets/success-icon.svg\";\nimport warningIcon from \"../assets/warning-icon.svg\";\n\n// Global status icons\nexport const VARIANT_ICONS = {\n  neutral: {\n    icon: neutralIcon,\n    ariaLabel: \"Neutral\",\n  },\n  info: {\n    icon: infoIcon,\n    ariaLabel: \"For your information\",\n  },\n  warning: {\n    icon: warningIcon,\n    ariaLabel: \"Warning\",\n  },\n  error: {\n    icon: errorIcon,\n    ariaLabel: \"Error\",\n  },\n  success: {\n    icon: successIcon,\n    ariaLabel: \"Success\",\n  },\n};\n\n// Global ARIA attributes\nexport const IC_INHERITED_ARIA = [\n  \"aria-atomic\",\n  \"aria-autocomplete\",\n  \"aria-busy\",\n  \"aria-controls\",\n  \"aria-current\",\n  \"aria-describedby\",\n  \"aria-description\",\n  \"aria-details\",\n  \"aria-disabled\",\n  \"aria-dropeffect\",\n  \"aria-errormessage\",\n  \"aria-expanded\",\n  \"aria-flowto\",\n  \"aria-grabbed\",\n  \"aria-haspopup\",\n  \"aria-hidden\",\n  \"aria-invalid\",\n  \"aria-keyshortcuts\",\n  \"aria-label\",\n  \"aria-labelledby\",\n  \"aria-live\",\n  \"aria-owns\",\n  \"aria-relevant\",\n  \"aria-roledescription\",\n];\n\nexport const IC_DEVICE_SIZES = {\n  XS: 576,\n  S: 768,\n  M: 992,\n  L: 1200,\n  XL: 99999,\n};\n\nexport const IC_BLOCK_COLOR_COMPONENTS = [\n  \"ic-hero\",\n  \"ic-top-navigation\",\n  \"ic-footer\",\n  \"ic-side-navigation\",\n  \"ic-alert\",\n];\n\nexport const IC_FIXED_COLOR_COMPONENTS = [\"ic-alert\"];\n\nexport interface IcColorExceptions {\n  [details: string]: string[];\n}\n\nexport const IC_BLOCK_COLOR_EXCEPTIONS: IcColorExceptions = {\n  \"ic-alert\": [\"ic-link\", \"ic-button\"],\n};\n\n/* Range within which the chosen theme colour would not have a sufficient brightness difference with either of the black or white foreground colours\n * The brightness difference must be greater than 125 to provide good colour visibility\n * Calculated by:\n * - Using the brightness formula for both colours: https://www.w3.org/TR/AERT/#color-contrast\n * - Adding 125 to the brightness of the black foreground colour - RGB(11, 12, 12)\n * - Subtracting 125 from the brightness of the white foreground colour - RGB(255, 255, 255)\n */\nexport const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;\nexport const WHITE_MAX_COLOR_BRIGHTNESS = 130;\n\n// Keyboard characters that do not affect the content of an input control when pressed\nexport const IGNORED_KEYBOARD_CHARACTERS = [\n  \"Alt\",\n  \"AltGraph\",\n  \"ArrowDown\",\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"ArrowUp\",\n  \"AudioVolumeDown\",\n  \"AudioVolumeMute\",\n  \"AudioVolumeUp\",\n  \"CapsLock\",\n  \"ContextMenu\",\n  \"Control\",\n  \"Delete\",\n  \"End\",\n  \"Enter\",\n  \"Escape\",\n  \"F1\",\n  \"F10\",\n  \"F11\",\n  \"F12\",\n  \"F2\",\n  \"F3\",\n  \"F4\",\n  \"F5\",\n  \"F6\",\n  \"F7\",\n  \"F8\",\n  \"F9\",\n  \"Home\",\n  \"Insert\",\n  \"Meta\",\n  \"NumLock\",\n  \"PageDown\",\n  \"PageUp\",\n  \"Shift\",\n  \"Tab\",\n];\n"]}

package/dist/collection/utils/helpers.js

@@ -7,6 +7,9 @@ import { forceUpdate } from "@stencil/core";
 import { IC_BLOCK_COLOR_COMPONENTS, IC_BLOCK_COLOR_EXCEPTIONS, IC_FIXED_COLOR_COMPONENTS, } from "./constants"; // Using @ukic/web-components/dist/types/utils/constants does not work so duplicated constants into canary package
 import { IcBrandForegroundEnum } from "./types"; // Using @ukic/web-components/dist/types/utils/types does not work so duplicated constants into canary package
 const DARK_MODE_THRESHOLD = 133.3505;
+const ANYWHERE_SEARCH_POSITION = "anywhere";
+const icInput = "ic-input";
+const linkIcInput = "input.ic-input";
 /**
  * converts an enum of strings into an array of strings
  */
@@ -77,17 +80,17 @@ export const dynamicDebounce = (func, getDelay) => {
  */
 export const renderHiddenInput = (always, container, name, value, disabled) => {
     if (name !== undefined && (always || hasShadowDom(container))) {
-        const inputs = container.querySelectorAll("input.ic-input");
+        const inputs = container.querySelectorAll(linkIcInput);
         const inputEls = Array.from(inputs);
         const filtered = inputEls.filter((el) => container === el.parentElement);
         let input = filtered[0];
         if (input === null || input === undefined) {
             input = container.ownerDocument.createElement("input");
             input.type = "hidden";
-            input.classList.add("ic-input");
+            input.classList.add(icInput);
             container.appendChild(input);
         }
-        input.disabled = disabled;
+        input.disabled = !!disabled;
         input.name = name;
         if (value instanceof Date) {
             input.value = value ? value.toISOString() : "";
@@ -97,6 +100,46 @@ export const renderHiddenInput = (always, container, name, value, disabled) => {
         }
     }
 };
+/**
+ * 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
+ * allows it to be picked up inside of forms. It should contain the same
+ * values as the host element.
+ *
+ * @param event: The event that is emitted once a file is selected.
+ * @param container The element where the input will be added
+ * @param multiple If true, multiple files can be selected
+ * @param name The name of the input
+ * @param value The value of the input
+ * @param disabled If true, the input is disabled
+ * @param accept A string of the accepted files
+ */
+export const renderFileHiddenInput = (event, container, multiple, name, value, disabled, accept) => {
+    if (name !== undefined && hasShadowDom(container)) {
+        const inputs = container.querySelectorAll(linkIcInput);
+        const inputEls = Array.from(inputs);
+        const filtered = inputEls.filter((el) => container === el.parentElement);
+        let input = filtered[0];
+        if (input === null || input === undefined) {
+            input = container.ownerDocument.createElement("input");
+            input.classList.add(icInput);
+            container.appendChild(input);
+        }
+        input.type = "file";
+        input.hidden = true;
+        input.multiple = multiple;
+        input.name = name;
+        input.disabled = disabled;
+        if (value)
+            input.files = value;
+        if (accept)
+            input.accept = accept;
+        input.onchange = () => {
+            event.emit(input.files);
+        };
+        input.click();
+    }
+};
 export const removeHiddenInput = (container) => {
     const inputs = container.querySelectorAll("input.ic-input");
     const inputEls = Array.from(inputs);
@@ -104,6 +147,10 @@ export const removeHiddenInput = (container) => {
     const input = filtered[0];
     input === null || input === void 0 ? void 0 : input.remove();
 };
+export const hasShadowDom = (el) => el ? !!el.shadowRoot && !!el.attachShadow : false;
+export const getInputHelperTextID = (id) => id + "-helper-text";
+export const getInputValidationTextID = (id) => id + "-validation-text";
+export const getInputDescribedByText = (inputId, helperText, validationText) => `${helperText ? getInputHelperTextID(inputId) : ""} ${validationText ? getInputValidationTextID(inputId) : ""}`.trim();
 /**
  * This method helps to understand the context in which a component exists,
  * to assist with choosing appropriate foreground colours to use. For example,
@@ -122,7 +169,7 @@ export const getBrandFromContext = (el, brandFromEvent = null) => {
     const blockColorParent = parentElement === null || parentElement === void 0 ? void 0 : parentElement.closest(IC_BLOCK_COLOR_COMPONENTS.join(","));
     // If within a block color component
     if (blockColorParent) {
-        const parentTag = blockColorParent === null || blockColorParent === void 0 ? void 0 : blockColorParent.tagName.toLowerCase();
+        const parentTag = blockColorParent.tagName.toLowerCase();
         const currentTag = el.tagName.toLowerCase();
         if ((_a = IC_BLOCK_COLOR_EXCEPTIONS[parentTag]) === null || _a === void 0 ? void 0 : _a.includes(currentTag)) {
             return IcBrandForegroundEnum.Default;
@@ -131,13 +178,22 @@ export const getBrandFromContext = (el, brandFromEvent = null) => {
             !IC_FIXED_COLOR_COMPONENTS.includes(parentTag)) {
             return brandFromEvent;
         }
-        else if (blockColorParent.classList.contains(IcBrandForegroundEnum.Dark)) {
+        else if (blockColorParent.classList.contains(`${parentTag}-${IcBrandForegroundEnum.Dark}`) ||
+            blockColorParent.classList.contains(IcBrandForegroundEnum.Dark)) {
             return IcBrandForegroundEnum.Dark;
         }
         return IcBrandForegroundEnum.Light;
     }
     return IcBrandForegroundEnum.Default;
 };
+/**
+ * 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 const isMobileOrTablet = () => "maxTouchPoints" in navigator && "userAgent" in navigator
+    ? navigator.maxTouchPoints > 0 &&
+        /iPad|iPhone|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+    : false;
 /**
  * Will create a button within the lightDOM which interacts with the parent form.
  * This is required as buttons within the shadowDOM will not invoke a submit or reset
@@ -156,6 +212,72 @@ export const handleHiddenFormButtonClick = (form, button) => {
 export const isEmptyString = (value) => value ? value.trim().length === 0 : true;
 // A helper function that checks if a prop has been defined
 export const isPropDefined = (prop) => prop !== undefined ? prop : null;
+/**
+ * Extracts the label using the value from an object. Requires the object to have a label and value property.
+ * @param value - value from object
+ * @param options - list of menu items
+ * @returns - label corresponding to value
+ */
+export const getLabelFromValue = (value, options, valueField = "value", labelField = "label") => {
+    const ungroupedOptions = [];
+    if (options.length > 0 && options.map) {
+        options.map((option) => {
+            if (option.children) {
+                option.children.map((option) => ungroupedOptions.push(option));
+            }
+            else {
+                ungroupedOptions.push(option);
+            }
+        });
+        const matchingValue = ungroupedOptions.find((option) => option[valueField] === value);
+        if (matchingValue !== undefined)
+            return matchingValue[labelField];
+    }
+    return undefined;
+};
+/**
+ * Filters the options based on the search string.
+ * @param options - array of options
+ * @param includeDescriptions - determines whether option descriptions are included when filtering options
+ * @param searchString - string used to filter the options
+ * @param position - whether the search string matches the start of or anywhere in the options
+ * @returns filtered array of options
+ */
+export const getFilteredMenuOptions = (options, includeDescriptions, searchString, position = ANYWHERE_SEARCH_POSITION, labelField = "label") => options.filter((option) => {
+    var _a;
+    const label = option[labelField].toLowerCase();
+    const description = (_a = option.description) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    const lowerSearchString = searchString.toLowerCase();
+    return position === ANYWHERE_SEARCH_POSITION
+        ? includeDescriptions
+            ? label.includes(lowerSearchString) ||
+                (description === null || description === void 0 ? void 0 : description.includes(lowerSearchString))
+            : label.includes(lowerSearchString)
+        : includeDescriptions
+            ? label.startsWith(lowerSearchString) ||
+                (description === null || description === void 0 ? void 0 : description.startsWith(lowerSearchString))
+            : label.startsWith(lowerSearchString);
+});
+/**
+ * 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 const getOptionsWithoutGroupTitlesCount = (options) => {
+    const optionsWithoutGroupTitles = [];
+    if (options.length > 0 && options.map) {
+        options.map((option) => {
+            if (option.children) {
+                option.children.map((option) => optionsWithoutGroupTitles.push(option));
+            }
+            else {
+                optionsWithoutGroupTitles.push(option);
+            }
+        });
+    }
+    return optionsWithoutGroupTitles.length;
+};
 export const deviceSizeMatches = (size) => window.matchMedia(`(max-width: ${size}px)`).matches;
 export const getCurrentDeviceSize = () => {
     if (deviceSizeMatches(DEVICE_SIZES.S)) {
@@ -190,8 +312,9 @@ export const getBrandColorBrightness = () => {
 /**
  * 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 `getBrandColorBrightness`
  */
-export const getBrandForegroundAppearance = () => getBrandColorBrightness() > DARK_MODE_THRESHOLD
+export const getBrandForegroundAppearance = (brightness = getBrandColorBrightness()) => brightness > DARK_MODE_THRESHOLD
     ? IcBrandForegroundEnum.Dark
     : IcBrandForegroundEnum.Light;
 export const getSlot = (element, name) => {
@@ -249,7 +372,8 @@ export const DEVICE_SIZES = {
     XL: Number(getCssProperty("--ic-breakpoint-xl").replace("px", "")), // 1200
     UNDEFINED: 1200,
 };
-export const isSlotUsed = (element, slotName) => Array.from(element.children).some((child) => child.getAttribute("slot") === slotName);
+export const hasValidationStatus = (status, disabled) => !!status && !disabled;
+export const isSlotUsed = ({ children }, slotName) => Array.from(children).some((child) => child.getAttribute("slot") === slotName);
 // added as a common method to allow detection of gatsby hydration issue, where (camelCase) props are initially undefined & then update
 // with a value. Allows a callback function to be executed when this is the case
 export const onComponentPropUndefinedChange = (oldValue, newValue, callback) => {
@@ -257,99 +381,38 @@ export const onComponentPropUndefinedChange = (oldValue, newValue, callback) =>
         callback();
     }
 };
-export const hasShadowDom = (el) => !!el.shadowRoot && !!el.attachShadow;
-export const getInputHelperTextID = (id) => id + "-helper-text";
-export const getInputValidationTextID = (id) => id + "-validation-text";
-export const getInputDescribedByText = (inputId, helperText, validationText) => `${helperText ? getInputHelperTextID(inputId) : ""} ${validationText ? getInputValidationTextID(inputId) : ""}`.trim();
-export const isMobileOrTablet = () => "maxTouchPoints" in navigator ? navigator.maxTouchPoints > 0 : false;
-/**
- * Extracts the label using the value from an object. Requires the object to have a label and value property.
- * @param value - value from object
- * @param options - list of menu items
- * @returns - label corresponding to value
- */
-export const getLabelFromValue = (value, options, valueField = "value", labelField = "label") => {
-    const ungroupedOptions = [];
-    if (options.length > 0 && options.map) {
-        options.map((option) => {
-            if (option.children) {
-                option.children.map((option) => ungroupedOptions.push(option));
-            }
-            else {
-                ungroupedOptions.push(option);
-            }
-        });
-        const matchingValue = ungroupedOptions.find((option) => option[valueField] === value);
-        if (matchingValue !== undefined)
-            return matchingValue[labelField];
-    }
-    return undefined;
+export const onComponentRequiredPropUndefined = (props, component) => {
+    props.forEach(({ prop, propName }) => {
+        if (prop === null || prop === undefined) {
+            console.error(`No ${propName} specified for ${component} component - prop '${propName}' (web components) / '${kebabToCamelCase(propName)}' (react) required`);
+        }
+    });
 };
-/**
- * Filters the options based on the search string.
- * @param options - array of options
- * @param includeDescriptions - determines whether option descriptions are included when filtering options
- * @param searchString - string used to filter the options
- * @param position - whether the search string matches the start of or anywhere in the options
- * @returns filtered array of options
- */
-export const getFilteredMenuOptions = (options, includeDescriptions, searchString, position, labelField = "label") => options.filter((option) => {
-    var _a;
-    const label = option[labelField].toLowerCase();
-    const description = (_a = option.description) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    const lowerSearchString = searchString.toLowerCase();
-    return position === "anywhere"
-        ? includeDescriptions
-            ? label.includes(lowerSearchString) ||
-                (description === null || description === void 0 ? void 0 : description.includes(lowerSearchString))
-            : label.includes(lowerSearchString)
-        : includeDescriptions
-            ? label.startsWith(lowerSearchString) ||
-                (description === null || description === void 0 ? void 0 : description.startsWith(lowerSearchString))
-            : label.startsWith(lowerSearchString);
-});
-/**
- * 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 const getOptionsWithoutGroupTitlesCount = (options) => {
-    const optionsWithoutGroupTitles = [];
-    if (options.length > 0 && options.map) {
-        options.map((option) => {
-            if (option.children) {
-                option.children.map((option) => optionsWithoutGroupTitles.push(option));
-            }
-            else {
-                optionsWithoutGroupTitles.push(option);
-            }
-        });
+export const kebabToCamelCase = (kebabCase) => kebabCase
+    .toLowerCase()
+    .split("-")
+    .map((word, index) => index === 0
+    ? word
+    : `${word.substring(0, 1).toUpperCase()}${word.substring(1)}`)
+    .join("");
+export const checkResizeObserver = (callbackFn) => {
+    if (typeof window !== "undefined" &&
+        typeof window.ResizeObserver !== "undefined") {
+        callbackFn();
     }
-    return optionsWithoutGroupTitles.length;
-};
-const hex2dec = function (v) {
-    return parseInt(v, 16);
 };
+const hex2dec = (v) => parseInt(v, 16);
 export const hexToRgba = (hex) => {
-    let c;
-    if (hex.length === 4) {
-        c = hex.replace("#", "").split("");
-        return {
-            r: hex2dec(c[0] + c[0]),
-            g: hex2dec(c[1] + c[1]),
-            b: hex2dec(c[2] + c[2]),
-            a: 1,
-        };
-    }
-    else {
-        return {
-            r: hex2dec(hex.slice(1, 3)),
-            g: hex2dec(hex.slice(3, 5)),
-            b: hex2dec(hex.slice(5)),
-            a: 1,
-        };
-    }
+    const hexChars = hex
+        .replace("#", "")
+        .split("")
+        .map((char) => char.repeat(2));
+    return {
+        r: hex2dec(hex.length === 4 ? hexChars[0] : hex.slice(1, 3)),
+        g: hex2dec(hex.length === 4 ? hexChars[1] : hex.slice(3, 5)),
+        b: hex2dec(hex.length === 4 ? hexChars[2] : hex.slice(5)),
+        a: 1,
+    };
 };
 export const rgbaStrToObj = (rgbaStr) => {
     const isRGBA = rgbaStr.slice(3, 4).toLowerCase() === "a";
@@ -365,40 +428,8 @@ export const rgbaStrToObj = (rgbaStr) => {
         a: isRGBA ? rgbValues[3] : 1,
     };
 };
-export const elementOverflowsX = (element) => element.scrollWidth > element.clientWidth;
+export const elementOverflowsX = ({ scrollWidth, clientWidth, }) => scrollWidth > clientWidth;
 export const hasClassificationBanner = () => !!document.querySelector("ic-classification-banner:not([inline='true'])");
-export const pxToRem = (px, base = 16) => `${(1 / base) * parseInt(px)}rem`;
-export const isNumeric = (value) => {
-    return /^-?\d+$/.test(value);
-};
-export const hasValidationStatus = (status, disabled) => {
-    return status !== "" && !disabled;
-};
-export const onComponentRequiredPropUndefined = (props, component) => {
-    for (let i = 0; i < props.length; i++) {
-        const { prop, propName } = props[i];
-        if (prop === null || prop === undefined) {
-            console.error(`No ${propName} specified for ${component} component - prop '${propName}' (web components) / '${kebabToCamelCase(propName)}' (react) required`);
-        }
-    }
-};
-export const kebabToCamelCase = (kebabCase) => {
-    kebabCase = kebabCase.toLowerCase();
-    const individualWords = kebabCase.split("-");
-    let camelCase = individualWords[0];
-    for (let i = 1; i < individualWords.length; i++) {
-        camelCase +=
-            individualWords[i].substring(0, 1).toUpperCase() +
-                individualWords[i].substring(1);
-    }
-    return camelCase;
-};
-export const checkResizeObserver = (callbackFn) => {
-    if (typeof window !== "undefined" &&
-        typeof window.ResizeObserver !== "undefined") {
-        callbackFn();
-    }
-};
 export const addFormResetListener = (el, callbackFn) => {
     var _a;
     (_a = el.closest("FORM")) === null || _a === void 0 ? void 0 : _a.addEventListener("reset", callbackFn);
@@ -407,14 +438,18 @@ export const removeFormResetListener = (el, callbackFn) => {
     var _a;
     (_a = el.closest("FORM")) === null || _a === void 0 ? void 0 : _a.removeEventListener("reset", callbackFn);
 };
+export const pxToRem = (px, base = 16) => `${(1 / base) * parseInt(px)}rem`;
+/**
+ * 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 const removeDisabledFalse = (disabled, element) => {
     if (!disabled) {
         element.removeAttribute("disabled");
     }
 };
-export const isMacDevice = () => {
-    return window.navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
-};
+export const isMacDevice = () => window.navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
+export const isNumeric = (value) => /^-?\d+$/.test(value);
 export async function waitForHydration() {
     const elements = document.getElementsByTagName("*");
     for (let i = 0; i < elements.length; i++) {
@@ -429,15 +464,22 @@ export async function waitForHydration() {
     }
     return false;
 }
-export const capitalize = (text) => {
-    return text.charAt(0).toUpperCase() + text.slice(1);
-};
+export const convertToRGBA = (color) => {
+    const firstChar = color === null || color === void 0 ? void 0 : color.slice(0, 1).toLowerCase();
+    return firstChar === "#"
+        ? hexToRgba(color)
+        : firstChar === "r"
+            ? rgbaStrToObj(color)
+            : null;
+};
+export const capitalize = (text) => text.charAt(0).toUpperCase() + text.slice(1);
 export const checkSlotInChildMutations = (addedNodes, removedNodes, slotName) => {
     const hasSlot = (nodeList) => Array.from(nodeList).some((node) => Array.isArray(slotName)
         ? slotName.some((name) => node.slot === name)
         : node.slot === slotName);
     return hasSlot(addedNodes) || hasSlot(removedNodes);
 };
+export const isElInAGGrid = (el) => !!el.closest(".ag-cell") && !!el.closest(".ag-root");
 export const addDataToPosition = (dataObject, newKeys, newValue) => {
     const newData = {};
     const newIndexes = newKeys.map((key) => key.index);