@ukic/web-components 2.8.0 → 2.10.0

package/dist/cjs/{helpers-0d63359f.js → helpers-3f91f63a.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const types = require('./types-7d67439f.js');
+const types = require('./types-dc22e301.js');
 
 const errorIcon = `<svg aria-labelledby="error-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
     <title id="error-title">Error</title>
@@ -44,71 +44,71 @@ const warningIcon = `<svg aria-labelledby="warning-title" xmlns="http://www.w3.o
 
 // Global status icons
 const VARIANT_ICONS = {
-  neutral: {
-    icon: neutralIcon,
-    ariaLabel: "Neutral",
-  },
-  info: {
-    icon: infoIcon,
-    ariaLabel: "For your information",
-  },
-  warning: {
-    icon: warningIcon,
-    ariaLabel: "Warning",
-  },
-  error: {
-    icon: errorIcon,
-    ariaLabel: "Error",
-  },
-  success: {
-    icon: successIcon,
-    ariaLabel: "Success",
-  },
+    neutral: {
+        icon: neutralIcon,
+        ariaLabel: "Neutral",
+    },
+    info: {
+        icon: infoIcon,
+        ariaLabel: "For your information",
+    },
+    warning: {
+        icon: warningIcon,
+        ariaLabel: "Warning",
+    },
+    error: {
+        icon: errorIcon,
+        ariaLabel: "Error",
+    },
+    success: {
+        icon: successIcon,
+        ariaLabel: "Success",
+    },
 };
 // Global ARIA attributes
 const IC_INHERITED_ARIA = [
-  "aria-atomic",
-  "aria-autocomplete",
-  "aria-busy",
-  "aria-controls",
-  "aria-current",
-  "aria-describedby",
-  "aria-description",
-  "aria-details",
-  "aria-disabled",
-  "aria-dropeffect",
-  "aria-errormessage",
-  "aria-expanded",
-  "aria-flowto",
-  "aria-grabbed",
-  "aria-haspopup",
-  "aria-hidden",
-  "aria-invalid",
-  "aria-keyshortcuts",
-  "aria-label",
-  "aria-labelledby",
-  "aria-live",
-  "aria-owns",
-  "aria-relevant",
-  "aria-roledescription",
+    "aria-atomic",
+    "aria-autocomplete",
+    "aria-busy",
+    "aria-controls",
+    "aria-current",
+    "aria-describedby",
+    "aria-description",
+    "aria-details",
+    "aria-disabled",
+    "aria-dropeffect",
+    "aria-errormessage",
+    "aria-expanded",
+    "aria-flowto",
+    "aria-grabbed",
+    "aria-haspopup",
+    "aria-hidden",
+    "aria-invalid",
+    "aria-keyshortcuts",
+    "aria-label",
+    "aria-labelledby",
+    "aria-live",
+    "aria-owns",
+    "aria-relevant",
+    "aria-roledescription",
 ];
 const IC_DEVICE_SIZES = {
-  XS: 576,
-  S: 768,
-  M: 992,
-  L: 1200,
-  XL: 99999,
+    XS: 576,
+    S: 768,
+    M: 992,
+    L: 1200,
+    XL: 99999,
 };
 const IC_BLOCK_COLOR_COMPONENTS = [
-  "ic-hero",
-  "ic-top-navigation",
-  "ic-footer",
-  "ic-side-navigation",
-  "ic-alert",
+    "ic-hero",
+    "ic-top-navigation",
+    "ic-footer",
+    "ic-side-navigation",
+    "ic-alert",
 ];
 const IC_FIXED_COLOR_COMPONENTS = ["ic-alert"];
 const IC_BLOCK_COLOR_EXCEPTIONS = {
-  "ic-alert": ["ic-link"],
+    "ic-alert": ["ic-link"],
 };
 /* 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
@@ -129,32 +129,32 @@ const DARK_MODE_THRESHOLD = 133.3505;
  * does not trigger a re-render.
  */
 const inheritAttributes = (element, attributes = []) => {
-  const attributeObject = {};
-  attributes.forEach((attr) => {
-    if (element.hasAttribute(attr)) {
-      const value = element.getAttribute(attr);
-      if (value !== null) {
-        attributeObject[attr] = element.getAttribute(attr);
-      }
-      element.removeAttribute(attr);
-    }
-  });
-  return attributeObject;
+    const attributeObject = {};
+    attributes.forEach((attr) => {
+        if (element.hasAttribute(attr)) {
+            const value = element.getAttribute(attr);
+            if (value !== null) {
+                attributeObject[attr] = element.getAttribute(attr);
+            }
+            element.removeAttribute(attr);
+        }
+    });
+    return attributeObject;
 };
 const debounceEvent = (event, wait) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const original = event._original || event;
-  return {
-    _original: event,
-    emit: debounce(original.emit.bind(original), wait),
-  };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const original = event._original || event;
+    return {
+        _original: event,
+        emit: debounce(original.emit.bind(original), wait),
+    };
 };
 const debounce = (func, wait = 0) => {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(func, wait, ...args);
-  };
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(func, wait, ...args);
+    };
 };
 /**
  * This method is used to add a hidden input to a host element that contains
@@ -169,28 +169,28 @@ const debounce = (func, wait = 0) => {
  * @param disabled If true, the input is disabled
  */
 const renderHiddenInput = (always, container, name, value, disabled) => {
-  if (name !== undefined && (always || hasShadowDom(container))) {
-    const inputs = container.querySelectorAll("input.ic-input");
-    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");
-      container.appendChild(input);
+    if (name !== undefined && (always || hasShadowDom(container))) {
+        const inputs = container.querySelectorAll("input.ic-input");
+        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");
+            container.appendChild(input);
+        }
+        input.disabled = disabled;
+        input.name = name;
+        input.value = value || "";
     }
-    input.disabled = disabled;
-    input.name = name;
-    input.value = value || "";
-  }
 };
 const removeHiddenInput = (container) => {
-  const inputs = container.querySelectorAll("input.ic-input");
-  const inputEls = Array.from(inputs);
-  const filtered = inputEls.filter((el) => container === el.parentElement);
-  const input = filtered[0];
-  input === null || input === void 0 ? void 0 : input.remove();
+    const inputs = container.querySelectorAll("input.ic-input");
+    const inputEls = Array.from(inputs);
+    const filtered = inputEls.filter((el) => container === el.parentElement);
+    const input = filtered[0];
+    input === null || input === void 0 ? void 0 : input.remove();
 };
 const hasShadowDom = (el) => !!el.shadowRoot && !!el.attachShadow;
 const getInputHelperTextID = (id) => id + "-helper-text";
@@ -209,26 +209,26 @@ const getInputDescribedByText = (inputId, helperText, validationText) => `${help
  * @returns IcThemeForeground depending on the context
  */
 const getThemeFromContext = (el, themeFromEvent = null) => {
-  var _a;
-  const parentElement = el.parentElement || el.getRootNode().host.parentElement;
-  const blockColorParent = parentElement.closest(IC_BLOCK_COLOR_COMPONENTS.join(","));
-  // If within a block color component
-  if (blockColorParent !== null) {
-    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 types.IcThemeForegroundEnum.Default;
-    }
-    else if (themeFromEvent !== null &&
-      !IC_FIXED_COLOR_COMPONENTS.includes(parentTag)) {
-      return themeFromEvent;
-    }
-    else if (blockColorParent.classList.contains(types.IcThemeForegroundEnum.Dark)) {
-      return types.IcThemeForegroundEnum.Dark;
+    var _a;
+    const parentElement = el.parentElement || el.getRootNode().host.parentElement;
+    const blockColorParent = parentElement.closest(IC_BLOCK_COLOR_COMPONENTS.join(","));
+    // If within a block color component
+    if (blockColorParent !== null) {
+        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 types.IcThemeForegroundEnum.Default;
+        }
+        else if (themeFromEvent !== null &&
+            !IC_FIXED_COLOR_COMPONENTS.includes(parentTag)) {
+            return themeFromEvent;
+        }
+        else if (blockColorParent.classList.contains(types.IcThemeForegroundEnum.Dark)) {
+            return types.IcThemeForegroundEnum.Dark;
+        }
+        return types.IcThemeForegroundEnum.Light;
     }
-    return types.IcThemeForegroundEnum.Light;
-  }
-  return types.IcThemeForegroundEnum.Default;
+    return types.IcThemeForegroundEnum.Default;
 };
 const isMobileOrTablet = () => "maxTouchPoints" in navigator ? navigator.maxTouchPoints > 0 : false;
 /**
@@ -239,12 +239,12 @@ const isMobileOrTablet = () => "maxTouchPoints" in navigator ? navigator.maxTouc
  * @param button - shadowDOM button
  */
 const handleHiddenFormButtonClick = (form, button) => {
-  const hiddenFormButton = document.createElement("button");
-  hiddenFormButton.setAttribute("type", button.type);
-  hiddenFormButton.style.display = "none";
-  form.appendChild(hiddenFormButton);
-  hiddenFormButton.click();
-  hiddenFormButton.remove();
+    const hiddenFormButton = document.createElement("button");
+    hiddenFormButton.setAttribute("type", button.type);
+    hiddenFormButton.style.display = "none";
+    form.appendChild(hiddenFormButton);
+    hiddenFormButton.click();
+    hiddenFormButton.remove();
 };
 const isEmptyString = (value) => value ? value.trim().length === 0 : true;
 // A helper function that checks if a prop has been defined
@@ -256,21 +256,21 @@ const isPropDefined = (prop) => prop !== undefined ? prop : null;
  * @returns - label corresponding to value
  */
 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;
+    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.
@@ -281,36 +281,36 @@ const getLabelFromValue = (value, options, valueField = "value", labelField = "l
  * @returns filtered array of options
  */
 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);
+    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);
 });
 const deviceSizeMatches = (size) => window.matchMedia(`(max-width: ${size}px)`).matches;
 const getCurrentDeviceSize = () => {
-  if (deviceSizeMatches(DEVICE_SIZES.S)) {
-    return DEVICE_SIZES.S;
-  }
-  if (deviceSizeMatches(DEVICE_SIZES.M)) {
-    return DEVICE_SIZES.M;
-  }
-  if (deviceSizeMatches(DEVICE_SIZES.L)) {
-    return DEVICE_SIZES.L;
-  }
-  if (deviceSizeMatches(DEVICE_SIZES.XL)) {
-    return DEVICE_SIZES.XL;
-  }
-  //fallback needed as all of above get initialised to 0 in jest tests
-  return DEVICE_SIZES.UNDEFINED;
+    if (deviceSizeMatches(DEVICE_SIZES.S)) {
+        return DEVICE_SIZES.S;
+    }
+    if (deviceSizeMatches(DEVICE_SIZES.M)) {
+        return DEVICE_SIZES.M;
+    }
+    if (deviceSizeMatches(DEVICE_SIZES.L)) {
+        return DEVICE_SIZES.L;
+    }
+    if (deviceSizeMatches(DEVICE_SIZES.XL)) {
+        return DEVICE_SIZES.XL;
+    }
+    //fallback needed as all of above get initialised to 0 in jest tests
+    return DEVICE_SIZES.UNDEFINED;
 };
 const getCssProperty = (cssVar) => getComputedStyle(document.documentElement).getPropertyValue(cssVar);
 /**
@@ -321,158 +321,158 @@ const getCssProperty = (cssVar) => getComputedStyle(document.documentElement).ge
  * @returns number representing the brightness of the theme colour
  */
 const getThemeColorBrightness = () => {
-  const themeRed = getCssProperty("--ic-theme-primary-r");
-  const themeGreen = getCssProperty("--ic-theme-primary-g");
-  const themeBlue = getCssProperty("--ic-theme-primary-b");
-  return ((parseInt(themeRed) * 299 +
-    parseInt(themeGreen) * 587 +
-    parseInt(themeBlue) * 114) /
-    1000);
+    const themeRed = getCssProperty("--ic-theme-primary-r");
+    const themeGreen = getCssProperty("--ic-theme-primary-g");
+    const themeBlue = getCssProperty("--ic-theme-primary-b");
+    return ((parseInt(themeRed) * 299 +
+        parseInt(themeGreen) * 587 +
+        parseInt(themeBlue) * 114) /
+        1000);
 };
 /**
  * Returns if dark or light foreground colors should be used for color contrast reasons
  * @returns "dark" or "light"
  */
 const getThemeForegroundColor = () => getThemeColorBrightness() > DARK_MODE_THRESHOLD
-  ? types.IcThemeForegroundEnum.Dark
-  : types.IcThemeForegroundEnum.Light;
+    ? types.IcThemeForegroundEnum.Dark
+    : types.IcThemeForegroundEnum.Light;
 const getSlot = (element, name) => {
-  if (element && element.querySelector) {
-    return element.querySelector(`[slot="${name}"]`);
-  }
-  return null;
+    if (element && element.querySelector) {
+        return element.querySelector(`[slot="${name}"]`);
+    }
+    return null;
 };
 const slotHasContent = (element, name) => getSlot(element, name) !== null;
 const getSlotContent = (element, name) => {
-  const slot = getSlot(element, name);
-  if (slot) {
-    return getSlotElements(slot);
-  }
-  return null;
+    const slot = getSlot(element, name);
+    if (slot) {
+        return getSlotElements(slot);
+    }
+    return null;
 };
 const getSlotElements = (slot) => {
-  const slotContent = slot.firstElementChild;
-  if (slotContent !== null) {
-    const elements = slotContent.assignedElements
-      ? slotContent.assignedElements()
-      : slotContent.childNodes;
-    return elements.length ? elements : null;
-  }
-  else {
-    //check for single element
-    return slot === null ? null : [slot];
-  }
+    const slotContent = slot.firstElementChild;
+    if (slotContent !== null) {
+        const elements = slotContent.assignedElements
+            ? slotContent.assignedElements()
+            : slotContent.childNodes;
+        return elements.length ? elements : null;
+    }
+    else {
+        //check for single element
+        return slot === null ? null : [slot];
+    }
 };
 const getNavItemParentDetails = (el) => {
-  let navType = { navType: "", parent: null };
-  switch (getParentElementType(el)) {
-    case "IC-NAVIGATION-GROUP":
-      navType = getNavItemParentDetails(el.parentElement);
-      break;
-    case "IC-TOP-NAVIGATION":
-      navType = { navType: "top", parent: getParentElement(el) };
-      break;
-    case "IC-SIDE-NAVIGATION":
-      navType = { navType: "side", parent: getParentElement(el) };
-      break;
-    case "IC-PAGE-HEADER":
-      navType = { navType: "page-header", parent: null };
-      break;
-  }
-  return navType;
+    let navType = { navType: "", parent: null };
+    switch (getParentElementType(el)) {
+        case "IC-NAVIGATION-GROUP":
+            navType = getNavItemParentDetails(el.parentElement);
+            break;
+        case "IC-TOP-NAVIGATION":
+            navType = { navType: "top", parent: getParentElement(el) };
+            break;
+        case "IC-SIDE-NAVIGATION":
+            navType = { navType: "side", parent: getParentElement(el) };
+            break;
+        case "IC-PAGE-HEADER":
+            navType = { navType: "page-header", parent: null };
+            break;
+    }
+    return navType;
 };
 const DEVICE_SIZES = {
-  XS: Number(getCssProperty("--ic-breakpoint-xs").replace("px", "")),
-  S: Number(getCssProperty("--ic-breakpoint-sm").replace("px", "")),
-  M: Number(getCssProperty("--ic-breakpoint-md").replace("px", "")),
-  L: Number(getCssProperty("--ic-breakpoint-lg").replace("px", "")),
-  XL: Number(getCssProperty("--ic-breakpoint-xl").replace("px", "")),
-  UNDEFINED: 1200,
+    XS: Number(getCssProperty("--ic-breakpoint-xs").replace("px", "")),
+    S: Number(getCssProperty("--ic-breakpoint-sm").replace("px", "")),
+    M: Number(getCssProperty("--ic-breakpoint-md").replace("px", "")),
+    L: Number(getCssProperty("--ic-breakpoint-lg").replace("px", "")),
+    XL: Number(getCssProperty("--ic-breakpoint-xl").replace("px", "")),
+    UNDEFINED: 1200,
 };
 const hasValidationStatus = (status, disabled) => {
-  return status !== "" && !disabled;
+    return status !== "" && !disabled;
 };
 const isSlotUsed = (element, slotName) => Array.from(element.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
 const onComponentPropUndefinedChange = (oldValue, newValue, callback) => {
-  if (oldValue === undefined && newValue !== oldValue) {
-    callback();
-  }
+    if (oldValue === undefined && newValue !== oldValue) {
+        callback();
+    }
 };
 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`);
+    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`);
+        }
     }
-  }
 };
 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;
+    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;
 };
 const checkResizeObserver = (callbackFn) => {
-  if (typeof window !== "undefined" &&
-    typeof window.ResizeObserver !== "undefined") {
-    callbackFn();
-  }
+    if (typeof window !== "undefined" &&
+        typeof window.ResizeObserver !== "undefined") {
+        callbackFn();
+    }
 };
 const hex2dec = function (v) {
-  return parseInt(v, 16);
+    return parseInt(v, 16);
 };
 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,
-    };
-  }
+    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 rgbaStrToObj = (rgbaStr) => {
-  const fourthChar = rgbaStr.slice(3, 4);
-  let colorRGBA;
-  if (fourthChar.toLowerCase() === "a") {
-    colorRGBA = { r: null, g: null, b: null, a: null };
-    const rgba = rgbaStr
-      .substring(5, rgbaStr.length - 1)
-      .replace(/ /g, "")
-      .split(",");
-    colorRGBA.r = Number(rgba[0]);
-    colorRGBA.g = Number(rgba[1]);
-    colorRGBA.b = Number(rgba[2]);
-    colorRGBA.a = Number(rgba[3]);
-  }
-  else {
-    colorRGBA = { r: null, g: null, b: null, a: 1 };
-    const rgb = rgbaStr
-      .substring(4, rgbaStr.length - 1)
-      .replace(/ /g, "")
-      .split(",");
-    colorRGBA.r = Number(rgb[0]);
-    colorRGBA.g = Number(rgb[1]);
-    colorRGBA.b = Number(rgb[2]);
-  }
-  return colorRGBA;
+    const fourthChar = rgbaStr.slice(3, 4);
+    let colorRGBA;
+    if (fourthChar.toLowerCase() === "a") {
+        colorRGBA = { r: null, g: null, b: null, a: null };
+        const rgba = rgbaStr
+            .substring(5, rgbaStr.length - 1)
+            .replace(/ /g, "")
+            .split(",");
+        colorRGBA.r = Number(rgba[0]);
+        colorRGBA.g = Number(rgba[1]);
+        colorRGBA.b = Number(rgba[2]);
+        colorRGBA.a = Number(rgba[3]);
+    }
+    else {
+        colorRGBA = { r: null, g: null, b: null, a: 1 };
+        const rgb = rgbaStr
+            .substring(4, rgbaStr.length - 1)
+            .replace(/ /g, "")
+            .split(",");
+        colorRGBA.r = Number(rgb[0]);
+        colorRGBA.g = Number(rgb[1]);
+        colorRGBA.b = Number(rgb[2]);
+    }
+    return colorRGBA;
 };
 const elementOverflowsX = (element) => element.scrollWidth > element.clientWidth;
 /**
@@ -485,22 +485,22 @@ const getParentElement = (child) => child.parentElement;
 const hasClassificationBanner = () => !!document.querySelector("ic-classification-banner:not([inline='true'])");
 const getForm = (el) => el.closest("FORM");
 const addFormResetListener = (el, callbackFn) => {
-  const form = getForm(el);
-  if (form !== null) {
-    form.addEventListener("reset", callbackFn);
-  }
+    const form = getForm(el);
+    if (form !== null) {
+        form.addEventListener("reset", callbackFn);
+    }
 };
 const removeFormResetListener = (el, callbackFn) => {
-  const form = getForm(el);
-  if (form !== null) {
-    form.removeEventListener("reset", callbackFn);
-  }
+    const form = getForm(el);
+    if (form !== null) {
+        form.removeEventListener("reset", callbackFn);
+    }
 };
 const pxToRem = (px, base = 16) => `${(1 / base) * parseInt(px)}rem`;
 const removeDisabledFalse = (disabled, element) => {
-  if (!disabled) {
-    element.removeAttribute("disabled");
-  }
+    if (!disabled) {
+        element.removeAttribute("disabled");
+    }
 };
 
 exports.BLACK_MIN_COLOR_BRIGHTNESS = BLACK_MIN_COLOR_BRIGHTNESS;
@@ -551,4 +551,4 @@ exports.slotHasContent = slotHasContent;
 exports.successIcon = successIcon;
 exports.warningIcon = warningIcon;
 
-//# sourceMappingURL=helpers-0d63359f.js.map
+//# sourceMappingURL=helpers-3f91f63a.js.map