@ukic/canary-web-components 2.0.0-canary.8 → 3.0.0-canary.1

package/dist/collection/utils/constants.js

@@ -1,3 +1,31 @@
+import errorIcon from "../assets/error-icon.svg";
+import infoIcon from "../assets/info-icon.svg";
+import neutralIcon from "../assets/neutral-icon.svg";
+import successIcon from "../assets/success-icon.svg";
+import warningIcon from "../assets/warning-icon.svg";
+// Global status icons
+export 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",
+    },
+};
 // Global ARIA attributes
 export const IC_INHERITED_ARIA = [
     "aria-atomic",
@@ -25,4 +53,31 @@ export const IC_INHERITED_ARIA = [
     "aria-relevant",
     "aria-roledescription",
 ];
+export const IC_DEVICE_SIZES = {
+    XS: 576,
+    S: 768,
+    M: 992,
+    L: 1200,
+    XL: 99999,
+};
+export const IC_BLOCK_COLOR_COMPONENTS = [
+    "ic-hero",
+    "ic-top-navigation",
+    "ic-footer",
+    "ic-side-navigation",
+    "ic-alert",
+];
+export const IC_FIXED_COLOR_COMPONENTS = ["ic-alert"];
+export const IC_BLOCK_COLOR_EXCEPTIONS = {
+    "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
+ * Calculated by:
+ * - Using the brightness formula for both colours: https://www.w3.org/TR/AERT/#color-contrast
+ * - Adding 125 to the brightness of the black foreground colour - RGB(11, 12, 12)
+ * - Subtracting 125 from the brightness of the white foreground colour - RGB(255, 255, 255)
+ */
+export const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;
+export const WHITE_MAX_COLOR_BRIGHTNESS = 130;
 //# 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,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","sourcesContent":["// 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"]}
+{"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"]}

package/dist/collection/utils/date-helpers.js

@@ -0,0 +1,133 @@
+export const isMonthFirstFormat = (dateString) => {
+    const monthFirstFormat = /^(0[1-9]|1[0-2])(\/|-)(0[1-9]|[12][0-9]|3[01])(\/|-)\d{4}$/;
+    return monthFirstFormat.test(dateString);
+};
+export const isDayFirstFormat = (dateString) => {
+    const dayFirstFormat = /^(0[1-9]|[12][0-9]|3[01])(\/|-)(0[1-9]|1[0-2])(\/|-)\d{4}$/;
+    return dayFirstFormat.test(dateString);
+};
+export const createDate = (date, dateFormat) => {
+    let newDate;
+    if (isDateOrEpoch(date)) {
+        newDate = typeof date === "string" ? new Date(date) : date;
+    }
+    else if (typeof date === "string") {
+        const dateArray = splitStringDate(date, dateFormat);
+        const year = Number(dateArray[0]);
+        const month = Number(dateArray[1]) - 1;
+        const day = Number(dateArray[2]);
+        newDate = new Date(year, month, day);
+    }
+    return newDate;
+};
+export const isDateOrEpoch = (date) => {
+    return date instanceof Date || !isNaN(+new Date(+date));
+};
+export const extractDateFromZuluDateTime = (zuluDateTime) => zuluDateTime.slice(0, zuluDateTime.indexOf("T"));
+export const splitStringDate = (date, dateFormat) => {
+    // returns an array where item 1 is year, item 2 is month, item 3 is day
+    if (date.includes("T") && date.includes("Z")) {
+        const nextDate = extractDateFromZuluDateTime(date);
+        return nextDate.split("-");
+    }
+    let newDate = [];
+    const dateWithSlashes = date.replace(/-/g, "/");
+    if (dateWithSlashes.split("/").length > 1) {
+        const dateParts = dateWithSlashes.split("/");
+        // pad any values to 2 characters
+        dateParts.forEach((d, i) => {
+            if (d.length === 1) {
+                dateParts[i] = convertToDoubleDigits(d);
+            }
+        });
+        if (dateParts[0].length === 4) {
+            newDate = [dateParts[0], dateParts[1], dateParts[2]];
+        }
+        else {
+            const newDateStr = dateParts.join("/");
+            const validDayFirst = isDayFirstFormat(newDateStr);
+            const validMonthFirst = isMonthFirstFormat(newDateStr);
+            if (validDayFirst && validMonthFirst) {
+                if (dateFormat.charAt(0) === "M") {
+                    newDate = [dateParts[2], dateParts[0], dateParts[1]];
+                }
+                else {
+                    newDate = [dateParts[2], dateParts[1], dateParts[0]];
+                }
+            }
+            else if (validMonthFirst) {
+                newDate = [dateParts[2], dateParts[0], dateParts[1]];
+            }
+            else {
+                newDate = [dateParts[2], dateParts[1], dateParts[0]];
+            }
+        }
+    }
+    return newDate;
+};
+export const convertToDoubleDigits = (value) => {
+    if (+value < 10) {
+        return `0${value}`;
+    }
+    return value.toString();
+};
+export const getWeekStart = (date, startDay) => {
+    const tmpDate = new Date(date);
+    const day = tmpDate.getDay();
+    const diff = (day < startDay ? 7 : 0) + day - startDay;
+    tmpDate.setDate(tmpDate.getDate() - diff);
+    return tmpDate;
+};
+export const getWeekEnd = (date, startDay) => {
+    const d = new Date(date);
+    const day = d.getDay();
+    const diff = (day < startDay ? -7 : 0) + 6 - (day - startDay);
+    d.setDate(d.getDate() + diff);
+    return d;
+};
+export const getMonthStart = (date) => {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+};
+export const getMonthEnd = (date) => {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+};
+/**
+ * Compare if two dates are equal exactly equal
+ */
+export const dateMatches = (a, b) => {
+    if (a === null || b === null) {
+        return false;
+    }
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+};
+export const clampDate = (date, min, max) => {
+    const time = date.getTime();
+    if (min !== null && time < min.getTime()) {
+        return min;
+    }
+    if (max !== null && time > max.getTime()) {
+        return max;
+    }
+    return date;
+};
+/**
+ * Compare if date is within specified range
+ */
+export const dateInRange = (date, min, max) => {
+    return clampDate(date, min, max) === date;
+};
+export const yearInRange = (year, min, max) => {
+    let allowed = true;
+    if (year !== null) {
+        if (min !== null && year < min.getFullYear()) {
+            allowed = false;
+        }
+        if (allowed && max !== null && year > max.getFullYear()) {
+            allowed = false;
+        }
+    }
+    return allowed;
+};
+//# sourceMappingURL=date-helpers.js.map

package/dist/collection/utils/date-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-helpers.js","sourceRoot":"","sources":["../../src/utils/date-helpers.ts"],"names":[],"mappings":"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","sourcesContent":["import { IcDateFormat, IcWeekDays } from \"../utils/types\";\n\nexport const isMonthFirstFormat = (dateString: string) => {\n  const monthFirstFormat =\n    /^(0[1-9]|1[0-2])(\\/|-)(0[1-9]|[12][0-9]|3[01])(\\/|-)\\d{4}$/;\n  return monthFirstFormat.test(dateString);\n};\n\nexport const isDayFirstFormat = (dateString: string) => {\n  const dayFirstFormat =\n    /^(0[1-9]|[12][0-9]|3[01])(\\/|-)(0[1-9]|1[0-2])(\\/|-)\\d{4}$/;\n  return dayFirstFormat.test(dateString);\n};\n\nexport const createDate = (date: string | Date, dateFormat: IcDateFormat) => {\n  let newDate;\n  if (isDateOrEpoch(date)) {\n    newDate = typeof date === \"string\" ? new Date(date) : date;\n  } else if (typeof date === \"string\") {\n    const dateArray = splitStringDate(date, dateFormat);\n    const year = Number(dateArray[0]);\n    const month = Number(dateArray[1]) - 1;\n    const day = Number(dateArray[2]);\n    newDate = new Date(year, month, day);\n  }\n  return newDate;\n};\n\nexport const isDateOrEpoch = (date: Date | string) => {\n  return date instanceof Date || !isNaN(+new Date(+date));\n};\n\nexport const extractDateFromZuluDateTime = (zuluDateTime: string) =>\n  zuluDateTime.slice(0, zuluDateTime.indexOf(\"T\"));\n\nexport const splitStringDate = (\n  date: string,\n  dateFormat: IcDateFormat\n): string[] => {\n  // returns an array where item 1 is year, item 2 is month, item 3 is day\n  if (date.includes(\"T\") && date.includes(\"Z\")) {\n    const nextDate = extractDateFromZuluDateTime(date);\n    return nextDate.split(\"-\");\n  }\n\n  let newDate: string[] = [];\n\n  const dateWithSlashes = date.replace(/-/g, \"/\");\n  if (dateWithSlashes.split(\"/\").length > 1) {\n    const dateParts = dateWithSlashes.split(\"/\");\n\n    // pad any values to 2 characters\n    dateParts.forEach((d, i) => {\n      if (d.length === 1) {\n        dateParts[i] = convertToDoubleDigits(d);\n      }\n    });\n    if (dateParts[0].length === 4) {\n      newDate = [dateParts[0], dateParts[1], dateParts[2]];\n    } else {\n      const newDateStr = dateParts.join(\"/\");\n      const validDayFirst = isDayFirstFormat(newDateStr);\n      const validMonthFirst = isMonthFirstFormat(newDateStr);\n      if (validDayFirst && validMonthFirst) {\n        if (dateFormat.charAt(0) === \"M\") {\n          newDate = [dateParts[2], dateParts[0], dateParts[1]];\n        } else {\n          newDate = [dateParts[2], dateParts[1], dateParts[0]];\n        }\n      } else if (validMonthFirst) {\n        newDate = [dateParts[2], dateParts[0], dateParts[1]];\n      } else {\n        newDate = [dateParts[2], dateParts[1], dateParts[0]];\n      }\n    }\n  }\n\n  return newDate;\n};\n\nexport const convertToDoubleDigits = (value: string | number): string => {\n  if (+value < 10) {\n    return `0${value}`;\n  }\n  return value.toString();\n};\n\nexport const getWeekStart = (date: Date, startDay: IcWeekDays): Date => {\n  const tmpDate = new Date(date);\n  const day = tmpDate.getDay();\n  const diff = (day < startDay ? 7 : 0) + day - startDay;\n\n  tmpDate.setDate(tmpDate.getDate() - diff);\n  return tmpDate;\n};\n\nexport const getWeekEnd = (date: Date, startDay: IcWeekDays): Date => {\n  const d = new Date(date);\n  const day = d.getDay();\n  const diff = (day < startDay ? -7 : 0) + 6 - (day - startDay);\n\n  d.setDate(d.getDate() + diff);\n  return d;\n};\n\nexport const getMonthStart = (date: Date): Date => {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n};\n\nexport const getMonthEnd = (date: Date): Date => {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n};\n\n/**\n * Compare if two dates are equal exactly equal\n */\nexport const dateMatches = (a: Date, b: Date): boolean => {\n  if (a === null || b === null) {\n    return false;\n  }\n\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n};\n\nexport const clampDate = (date: Date, min: Date, max: Date): Date => {\n  const time = date.getTime();\n  if (min !== null && time < min.getTime()) {\n    return min;\n  }\n  if (max !== null && time > max.getTime()) {\n    return max;\n  }\n  return date;\n};\n\n/**\n * Compare if date is within specified range\n */\nexport const dateInRange = (date: Date, min: Date, max: Date): boolean => {\n  return clampDate(date, min, max) === date;\n};\n\nexport const yearInRange = (year: number, min: Date, max: Date): boolean => {\n  let allowed = true;\n  if (year !== null) {\n    if (min !== null && year < min.getFullYear()) {\n      allowed = false;\n    }\n    if (allowed && max !== null && year > max.getFullYear()) {\n      allowed = false;\n    }\n  }\n  return allowed;\n};\n"]}

package/dist/collection/utils/helpers.js

@@ -1,4 +1,19 @@
-// Build does not recognise these functions being passed via @ukic/web-components so they have been added locally
+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 { IcThemeForegroundEnum, } 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;
+/**
+ * converts an enum of strings into an array of strings
+ */
+export const stringEnumToArray = (theEnum) => {
+    const arr = [];
+    Object.values(theEnum).forEach((val) => {
+        if (isNaN(Number(val))) {
+            const str = val;
+            arr.push(str);
+        }
+    });
+    return arr;
+};
 /**
  * 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.
@@ -19,6 +34,29 @@ export const inheritAttributes = (element, attributes = []) => {
     });
     return attributeObject;
 };
+export 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),
+    };
+};
+export const debounce = (func, wait = 0) => {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(func, wait, ...args);
+    };
+};
+export const dynamicDebounce = (func, getDelay) => {
+    let timer;
+    return (...args) => {
+        const delay = getDelay();
+        clearTimeout(timer);
+        timer = setTimeout(func, delay, ...args);
+    };
+};
 /**
  * This method is used to add a hidden input to a host element that contains
  * a Shadow DOM. It does not add the input inside of the Shadow root which
@@ -45,7 +83,173 @@ export const renderHiddenInput = (always, container, name, value, disabled) => {
         }
         input.disabled = disabled;
         input.name = name;
-        input.value = value || "";
+        if (value instanceof Date) {
+            input.value = value ? value.toISOString() : null;
+        }
+        else {
+            input.value = value || "";
+        }
+    }
+};
+export 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();
+};
+/**
+ * This method helps to understand the context in which a component exists,
+ * to assist with choosing appropriate foreground colours to use. For example,
+ * this method will help you use the 'white' version of a button if it's within
+ * a block colour element using white foreground text.
+ *
+ * This only works for components/elements passed via <slot> and not if they
+ * are part of an IC component.
+ *
+ * ""
+ * @returns IcThemeForeground depending on the context
+ */
+export 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 IcThemeForegroundEnum.Default;
+        }
+        else if (themeFromEvent !== null &&
+            !IC_FIXED_COLOR_COMPONENTS.includes(parentTag)) {
+            return themeFromEvent;
+        }
+        else if (blockColorParent.classList.contains(IcThemeForegroundEnum.Dark)) {
+            return IcThemeForegroundEnum.Dark;
+        }
+        return IcThemeForegroundEnum.Light;
+    }
+    return IcThemeForegroundEnum.Default;
+};
+/**
+ * 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
+ *
+ * @param form - parent form element which contains shadowDom button
+ * @param button - shadowDOM button
+ */
+export 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();
+};
+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;
+export const deviceSizeMatches = (size) => window.matchMedia(`(max-width: ${size}px)`).matches;
+export 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;
+};
+export const getCssProperty = (cssVar) => getComputedStyle(document.documentElement).getPropertyValue(cssVar);
+/**
+ * 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"
+ * @returns number representing the brightness of the theme colour
+ */
+export 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);
+};
+/**
+ * Returns if dark or light foreground colors should be used for color contrast reasons
+ * @returns "dark" or "light"
+ */
+export const getThemeForegroundColor = () => getThemeColorBrightness() > DARK_MODE_THRESHOLD
+    ? IcThemeForegroundEnum.Dark
+    : IcThemeForegroundEnum.Light;
+export const getSlot = (element, name) => {
+    if (element && element.querySelector) {
+        return element.querySelector(`[slot="${name}"]`);
+    }
+    return null;
+};
+export const slotHasContent = (element, name) => getSlot(element, name) !== null;
+export const getSlotContent = (element, name) => {
+    const slot = getSlot(element, name);
+    if (slot) {
+        return getSlotElements(slot);
+    }
+    return null;
+};
+export const getSlotElements = (slot) => {
+    const slotContent = slot.firstElementChild;
+    if (slotContent !== null) {
+        const elements = slotContent.assignedElements
+            ? slotContent.assignedElements()
+            : slotContent.childNodes;
+        return elements.length ? elements : slot.tagName ? [slot] : null;
+    }
+    else {
+        //check for single element
+        return slot === null ? null : [slot];
+    }
+};
+export 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;
+};
+export 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,
+};
+export 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
+export const onComponentPropUndefinedChange = (oldValue, newValue, callback) => {
+    if (oldValue === undefined && newValue !== oldValue) {
+        callback();
     }
 };
 export const hasShadowDom = (el) => !!el.shadowRoot && !!el.attachShadow;
@@ -119,14 +323,67 @@ export const getOptionsWithoutGroupTitlesCount = (options) => {
     }
     return optionsWithoutGroupTitles.length;
 };
-export const getCssProperty = (cssVar) => getComputedStyle(document.documentElement).getPropertyValue(cssVar);
-export 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,
+const hex2dec = function (v) {
+    return 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,
+        };
+    }
+};
+export 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;
+};
+export const elementOverflowsX = (element) => element.scrollWidth > element.clientWidth;
+/**
+ *
+ * @param child - The child element
+ * @returns string
+ */
+export const getParentElementType = (child) => child.parentElement.tagName;
+export const getParentElement = (child) => child.parentElement;
+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;
@@ -177,4 +434,39 @@ export const removeDisabledFalse = (disabled, element) => {
 export const isMacDevice = () => {
     return window.navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
 };
+export async function waitForHydration() {
+    const elements = document.getElementsByTagName("*");
+    for (let i = 0; i < elements.length; i++) {
+        if (elements[i].tagName.startsWith("IC-")) {
+            if (elements[i].classList.contains("hydrated")) {
+                return true;
+            }
+        }
+        else {
+            return false;
+        }
+    }
+    return false;
+}
+export const capitalize = (text) => {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+};
+export const checkSlotInChildMutations = (addedNodes, removedNodes, slotName) => {
+    const hasSlot = (nodeList) => Array.from(nodeList).some((node) => node.slot === slotName);
+    return hasSlot(addedNodes) || hasSlot(removedNodes);
+};
+export const addDataToPosition = (dataObject, newKeys, newValue) => {
+    const newData = {};
+    const newIndexes = newKeys.map((key) => key.index);
+    let controlledIndex = 0; // When a new key is added to the data, need to increment the index to account for this new object value
+    Object.keys(dataObject).forEach((dataKey) => {
+        if (newIndexes.includes(controlledIndex)) {
+            newData[newKeys[newIndexes.indexOf(controlledIndex)].key] = newValue;
+            controlledIndex++;
+        }
+        newData[dataKey] = dataObject[dataKey];
+        controlledIndex++;
+    });
+    return newData;
+};
 //# sourceMappingURL=helpers.js.map