@ukic/web-components 2.8.0 → 2.9.0

package/dist/collection/components/ic-theme/ic-theme.js

@@ -3,105 +3,105 @@ import { getThemeForegroundColor, hexToRgba, rgbaStrToObj, } from "../../utils/h
 import { getThemeColorBrightness } from "../../utils/helpers";
 import { BLACK_MIN_COLOR_BRIGHTNESS, WHITE_MAX_COLOR_BRIGHTNESS, } from "../../utils/constants";
 export class Theme {
-  constructor() {
-    this.checkThemeColorContrast = () => {
-      if (getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&
-        getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS) {
-        console.warn(`The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`);
-      }
-    };
-    this.setThemeColor = () => {
-      if (this.color !== null) {
-        let colorRGBA = null;
-        const firstChar = this.color.slice(0, 1);
-        if (firstChar === "#") {
-          colorRGBA = hexToRgba(this.color);
-        }
-        else if (firstChar.toLowerCase() === "r") {
-          colorRGBA = rgbaStrToObj(this.color);
-        }
-        this.setThemeRGBA(colorRGBA);
-      }
-    };
-    this.setThemeRGBA = (colorRGBA) => {
-      if (colorRGBA !== null) {
-        const root = document.documentElement;
-        root.style.setProperty("--ic-theme-primary-r", colorRGBA.r.toString());
-        root.style.setProperty("--ic-theme-primary-g", colorRGBA.g.toString());
-        root.style.setProperty("--ic-theme-primary-b", colorRGBA.b.toString());
-        root.style.setProperty("--ic-theme-primary-a", colorRGBA.a.toString());
-        this.checkThemeColorContrast();
-        const foregroundColor = getThemeForegroundColor();
-        this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });
-      }
-    };
-    this.color = null;
-  }
-  watchColorPropHandler() {
-    this.setThemeColor();
-  }
-  componentWillLoad() {
-    this.setThemeColor();
-  }
-  render() {
-    return h(Host, null);
-  }
-  static get is() { return "ic-theme"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() {
-    return {
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "themeChange",
-        "name": "themeChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Emitted when the theme is changed."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "IcTheme",
-          "resolved": "{ mode: IcThemeForeground; color: IcColorRGB; }",
-          "references": {
-            "IcTheme": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::IcTheme"
+    constructor() {
+        this.checkThemeColorContrast = () => {
+            if (getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&
+                getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS) {
+                console.warn(`The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`);
             }
-          }
-        }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "color",
-        "methodName": "watchColorPropHandler"
-      }];
-  }
+        };
+        this.setThemeColor = () => {
+            if (this.color !== null) {
+                let colorRGBA = null;
+                const firstChar = this.color.slice(0, 1);
+                if (firstChar === "#") {
+                    colorRGBA = hexToRgba(this.color);
+                }
+                else if (firstChar.toLowerCase() === "r") {
+                    colorRGBA = rgbaStrToObj(this.color);
+                }
+                this.setThemeRGBA(colorRGBA);
+            }
+        };
+        this.setThemeRGBA = (colorRGBA) => {
+            if (colorRGBA !== null) {
+                const root = document.documentElement;
+                root.style.setProperty("--ic-theme-primary-r", colorRGBA.r.toString());
+                root.style.setProperty("--ic-theme-primary-g", colorRGBA.g.toString());
+                root.style.setProperty("--ic-theme-primary-b", colorRGBA.b.toString());
+                root.style.setProperty("--ic-theme-primary-a", colorRGBA.a.toString());
+                this.checkThemeColorContrast();
+                const foregroundColor = getThemeForegroundColor();
+                this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });
+            }
+        };
+        this.color = null;
+    }
+    watchColorPropHandler() {
+        this.setThemeColor();
+    }
+    componentWillLoad() {
+        this.setThemeColor();
+    }
+    render() {
+        return h(Host, null);
+    }
+    static get is() { return "ic-theme"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "themeChange",
+                "name": "themeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Emitted when the theme is changed."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IcTheme",
+                    "resolved": "{ mode: IcThemeForeground; color: IcColorRGB; }",
+                    "references": {
+                        "IcTheme": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcTheme"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "color",
+                "methodName": "watchColorPropHandler"
+            }];
+    }
 }
 //# sourceMappingURL=ic-theme.js.map

package/dist/collection/components/ic-theme/ic-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-theme.js","sourceRoot":"","sources":["../../../src/components/ic-theme/ic-theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,YAAY,GACb,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EACL,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,uBAAuB,CAAC;AAM/B,MAAM,OAAO,KAAK;;IAoBR,4BAAuB,GAAG,GAAS,EAAE;MAC3C,IACE,uBAAuB,EAAE,GAAG,0BAA0B;QACtD,uBAAuB,EAAE,GAAG,0BAA0B,EACtD;QACA,OAAO,CAAC,IAAI,CACV,2TAA2T,CAC5T,CAAC;OACH;IACH,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MAC3B,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;QACvB,IAAI,SAAS,GAAG,IAAI,CAAC;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,IAAI,SAAS,KAAK,GAAG,EAAE;UACrB,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnC;aAAM,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;UAC1C,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACtC;QACD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;OAC9B;IACH,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,SAAsB,EAAE,EAAE;MAChD,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAEvE,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,MAAM,eAAe,GAAG,uBAAuB,EAAE,CAAC;QAClD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;OACpE;IACH,CAAC,CAAC;iBArDuB,IAAI;;EAG7B,qBAAqB;IACnB,IAAI,CAAC,aAAa,EAAE,CAAC;EACvB,CAAC;EAOD,iBAAiB;IACf,IAAI,CAAC,aAAa,EAAE,CAAC;EACvB,CAAC;EAyCD,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  Event,\n  EventEmitter,\n  h,\n  Watch,\n  Prop,\n} from \"@stencil/core\";\n\nimport { IcColorRGBA, IcTheme } from \"../../utils/types\";\nimport {\n  getThemeForegroundColor,\n  hexToRgba,\n  rgbaStrToObj,\n} from \"../../utils/helpers\";\nimport { getThemeColorBrightness } from \"../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n  tag: \"ic-theme\",\n  shadow: true,\n})\nexport class Theme {\n  /**\n   * The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() color?: string = null;\n\n  @Watch(\"color\")\n  watchColorPropHandler(): void {\n    this.setThemeColor();\n  }\n\n  /**\n   * @internal Emitted when the theme is changed.\n   */\n  @Event() themeChange: EventEmitter<IcTheme>;\n\n  componentWillLoad(): void {\n    this.setThemeColor();\n  }\n\n  private checkThemeColorContrast = (): void => {\n    if (\n      getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n      getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n    ) {\n      console.warn(\n        `The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n      );\n    }\n  };\n\n  private setThemeColor = () => {\n    if (this.color !== null) {\n      let colorRGBA = null;\n      const firstChar = this.color.slice(0, 1);\n      if (firstChar === \"#\") {\n        colorRGBA = hexToRgba(this.color);\n      } else if (firstChar.toLowerCase() === \"r\") {\n        colorRGBA = rgbaStrToObj(this.color);\n      }\n      this.setThemeRGBA(colorRGBA);\n    }\n  };\n\n  private setThemeRGBA = (colorRGBA: IcColorRGBA) => {\n    if (colorRGBA !== null) {\n      const root = document.documentElement;\n      root.style.setProperty(\"--ic-theme-primary-r\", colorRGBA.r.toString());\n      root.style.setProperty(\"--ic-theme-primary-g\", colorRGBA.g.toString());\n      root.style.setProperty(\"--ic-theme-primary-b\", colorRGBA.b.toString());\n      root.style.setProperty(\"--ic-theme-primary-a\", colorRGBA.a.toString());\n\n      this.checkThemeColorContrast();\n\n      const foregroundColor = getThemeForegroundColor();\n      this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });\n    }\n  };\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"]}
+{"version":3,"file":"ic-theme.js","sourceRoot":"","sources":["../../../src/components/ic-theme/ic-theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,YAAY,GACb,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EACL,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,uBAAuB,CAAC;AAM/B,MAAM,OAAO,KAAK;;QAoBR,4BAAuB,GAAG,GAAS,EAAE;YAC3C,IACE,uBAAuB,EAAE,GAAG,0BAA0B;gBACtD,uBAAuB,EAAE,GAAG,0BAA0B,EACtD;gBACA,OAAO,CAAC,IAAI,CACV,2TAA2T,CAC5T,CAAC;aACH;QACH,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;gBACvB,IAAI,SAAS,GAAG,IAAI,CAAC;gBACrB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACzC,IAAI,SAAS,KAAK,GAAG,EAAE;oBACrB,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBACnC;qBAAM,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;oBAC1C,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBACtC;gBACD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;aAC9B;QACH,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,SAAsB,EAAE,EAAE;YAChD,IAAI,SAAS,KAAK,IAAI,EAAE;gBACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;gBACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBAEvE,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBAE/B,MAAM,eAAe,GAAG,uBAAuB,EAAE,CAAC;gBAClD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;aACpE;QACH,CAAC,CAAC;qBArDuB,IAAI;;IAG7B,qBAAqB;QACnB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAOD,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAyCD,MAAM;QACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;IACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  Event,\n  EventEmitter,\n  h,\n  Watch,\n  Prop,\n} from \"@stencil/core\";\n\nimport { IcColorRGBA, IcTheme } from \"../../utils/types\";\nimport {\n  getThemeForegroundColor,\n  hexToRgba,\n  rgbaStrToObj,\n} from \"../../utils/helpers\";\nimport { getThemeColorBrightness } from \"../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n  tag: \"ic-theme\",\n  shadow: true,\n})\nexport class Theme {\n  /**\n   * The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() color?: string = null;\n\n  @Watch(\"color\")\n  watchColorPropHandler(): void {\n    this.setThemeColor();\n  }\n\n  /**\n   * @internal Emitted when the theme is changed.\n   */\n  @Event() themeChange: EventEmitter<IcTheme>;\n\n  componentWillLoad(): void {\n    this.setThemeColor();\n  }\n\n  private checkThemeColorContrast = (): void => {\n    if (\n      getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n      getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n    ) {\n      console.warn(\n        `The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n      );\n    }\n  };\n\n  private setThemeColor = () => {\n    if (this.color !== null) {\n      let colorRGBA = null;\n      const firstChar = this.color.slice(0, 1);\n      if (firstChar === \"#\") {\n        colorRGBA = hexToRgba(this.color);\n      } else if (firstChar.toLowerCase() === \"r\") {\n        colorRGBA = rgbaStrToObj(this.color);\n      }\n      this.setThemeRGBA(colorRGBA);\n    }\n  };\n\n  private setThemeRGBA = (colorRGBA: IcColorRGBA) => {\n    if (colorRGBA !== null) {\n      const root = document.documentElement;\n      root.style.setProperty(\"--ic-theme-primary-r\", colorRGBA.r.toString());\n      root.style.setProperty(\"--ic-theme-primary-g\", colorRGBA.g.toString());\n      root.style.setProperty(\"--ic-theme-primary-b\", colorRGBA.b.toString());\n      root.style.setProperty(\"--ic-theme-primary-a\", colorRGBA.a.toString());\n\n      this.checkThemeColorContrast();\n\n      const foregroundColor = getThemeForegroundColor();\n      this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });\n    }\n  };\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"]}

package/dist/collection/components/ic-theme/test/basic/ic-theme.e2e.js

@@ -1,72 +1,72 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe("ic-theme", () => {
-  it("renders", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-theme></ic-theme>`);
-    const element = await page.find("ic-theme");
-    expect(element).toHaveClass("hydrated");
-  });
-  it("should emit themeChange when setThemeRGB method called", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-theme></ic-theme>`);
-    const spy = await page.spyOnEvent("themeChange");
-    await page.$eval("ic-theme", (elm) => {
-      elm.color = "rgb(255, 201, 60)";
+    it("renders", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-theme></ic-theme>`);
+        const element = await page.find("ic-theme");
+        expect(element).toHaveClass("hydrated");
     });
-    await page.waitForChanges();
-    expect(spy).toHaveReceivedEventDetail({
-      mode: "dark",
-      color: {
-        a: 1,
-        b: 60,
-        g: 201,
-        r: 255,
-      },
+    it("should emit themeChange when setThemeRGB method called", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-theme></ic-theme>`);
+        const spy = await page.spyOnEvent("themeChange");
+        await page.$eval("ic-theme", (elm) => {
+            elm.color = "rgb(255, 201, 60)";
+        });
+        await page.waitForChanges();
+        expect(spy).toHaveReceivedEventDetail({
+            mode: "dark",
+            color: {
+                a: 1,
+                b: 60,
+                g: 201,
+                r: 255,
+            },
+        });
+        await page.$eval("ic-theme", (elm) => {
+            elm.color = "rgb(35, 81, 142)";
+        });
+        await page.waitForChanges();
+        expect(spy).toHaveReceivedEventDetail({
+            mode: "light",
+            color: {
+                a: 1,
+                b: 142,
+                g: 81,
+                r: 35,
+            },
+        });
     });
-    await page.$eval("ic-theme", (elm) => {
-      elm.color = "rgb(35, 81, 142)";
+    it("should emit correct textColor when rgb values invalid", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<ic-theme></ic-theme>");
+        const spy = await page.spyOnEvent("themeChange");
+        await page.$eval("ic-theme", (elm) => {
+            elm.color = "rgb(1000, 1000, 1000)";
+        });
+        await page.waitForChanges();
+        expect(spy).toHaveReceivedEventDetail({
+            mode: "dark",
+            color: {
+                a: 1,
+                b: 1000,
+                g: 1000,
+                r: 1000,
+            },
+        });
+        await page.$eval("ic-theme", (elm) => {
+            elm.color = "rgb(-1, -1, -1)";
+        });
+        await page.waitForChanges();
+        expect(spy).toHaveReceivedEventDetail({
+            mode: "light",
+            color: {
+                a: 1,
+                b: -1,
+                g: -1,
+                r: -1,
+            },
+        });
     });
-    await page.waitForChanges();
-    expect(spy).toHaveReceivedEventDetail({
-      mode: "light",
-      color: {
-        a: 1,
-        b: 142,
-        g: 81,
-        r: 35,
-      },
-    });
-  });
-  it("should emit correct textColor when rgb values invalid", async () => {
-    const page = await newE2EPage();
-    await page.setContent("<ic-theme></ic-theme>");
-    const spy = await page.spyOnEvent("themeChange");
-    await page.$eval("ic-theme", (elm) => {
-      elm.color = "rgb(1000, 1000, 1000)";
-    });
-    await page.waitForChanges();
-    expect(spy).toHaveReceivedEventDetail({
-      mode: "dark",
-      color: {
-        a: 1,
-        b: 1000,
-        g: 1000,
-        r: 1000,
-      },
-    });
-    await page.$eval("ic-theme", (elm) => {
-      elm.color = "rgb(-1, -1, -1)";
-    });
-    await page.waitForChanges();
-    expect(spy).toHaveReceivedEventDetail({
-      mode: "light",
-      color: {
-        a: 1,
-        b: -1,
-        g: -1,
-        r: -1,
-      },
-    });
-  });
 });
 //# sourceMappingURL=ic-theme.e2e.js.map

package/dist/collection/components/ic-theme/test/basic/ic-theme.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-theme.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-theme/test/basic/ic-theme.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-theme\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const element = await page.find(\"ic-theme\");\n    expect(element).toHaveClass(\"hydrated\");\n  });\n\n  it(\"should emit themeChange when setThemeRGB method called\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const spy = await page.spyOnEvent(\"themeChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(255, 201, 60)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 60,\n        g: 201,\n        r: 255,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(35, 81, 142)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: 142,\n        g: 81,\n        r: 35,\n      },\n    });\n  });\n\n  it(\"should emit correct textColor when rgb values invalid\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\"<ic-theme></ic-theme>\");\n\n    const spy = await page.spyOnEvent(\"themeChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(1000, 1000, 1000)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 1000,\n        g: 1000,\n        r: 1000,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(-1, -1, -1)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: -1,\n        g: -1,\n        r: -1,\n      },\n    });\n  });\n});\n"]}
+{"version":3,"file":"ic-theme.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-theme/test/basic/ic-theme.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-theme\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const element = await page.find(\"ic-theme\");\n    expect(element).toHaveClass(\"hydrated\");\n  });\n\n  it(\"should emit themeChange when setThemeRGB method called\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const spy = await page.spyOnEvent(\"themeChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(255, 201, 60)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 60,\n        g: 201,\n        r: 255,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(35, 81, 142)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: 142,\n        g: 81,\n        r: 35,\n      },\n    });\n  });\n\n  it(\"should emit correct textColor when rgb values invalid\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\"<ic-theme></ic-theme>\");\n\n    const spy = await page.spyOnEvent(\"themeChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(1000, 1000, 1000)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 1000,\n        g: 1000,\n        r: 1000,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(-1, -1, -1)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: -1,\n        g: -1,\n        r: -1,\n      },\n    });\n  });\n});\n"]}

package/dist/collection/components/ic-theme/test/basic/ic-theme.spec.js

@@ -5,73 +5,73 @@ import { BLACK_MIN_COLOR_BRIGHTNESS, WHITE_MAX_COLOR_BRIGHTNESS, } from "../../.
 //mocked as getThemeColorBrightness is NaN when run in test context
 //instead we return a value which will trigger the console warning about theme color contrast
 const mockThemeColorContrastFail = () => {
-  const func = jest.fn(() => {
-    return (BLACK_MIN_COLOR_BRIGHTNESS + WHITE_MAX_COLOR_BRIGHTNESS) / 2;
-  });
-  Object.defineProperty(helpers, "getThemeColorBrightness", {
-    value: func,
-  });
+    const func = jest.fn(() => {
+        return (BLACK_MIN_COLOR_BRIGHTNESS + WHITE_MAX_COLOR_BRIGHTNESS) / 2;
+    });
+    Object.defineProperty(helpers, "getThemeColorBrightness", {
+        value: func,
+    });
 };
 const expectRGBToBe = (page, expectR, expectG, expectB) => {
-  const r = page.doc.documentElement.style.getPropertyValue("--ic-theme-primary-r");
-  const g = page.doc.documentElement.style.getPropertyValue("--ic-theme-primary-g");
-  const b = page.doc.documentElement.style.getPropertyValue("--ic-theme-primary-b");
-  expect(r).toBe(expectR);
-  expect(g).toBe(expectG);
-  expect(b).toBe(expectB);
+    const r = page.doc.documentElement.style.getPropertyValue("--ic-theme-primary-r");
+    const g = page.doc.documentElement.style.getPropertyValue("--ic-theme-primary-g");
+    const b = page.doc.documentElement.style.getPropertyValue("--ic-theme-primary-b");
+    expect(r).toBe(expectR);
+    expect(g).toBe(expectG);
+    expect(b).toBe(expectB);
 };
 beforeAll(() => {
-  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+    jest.spyOn(console, "warn").mockImplementation(jest.fn());
 });
 describe("ic-theme", () => {
-  it("should render", async () => {
-    const page = await newSpecPage({
-      components: [Theme],
-      html: `<ic-theme></ic-theme>`,
-    });
-    expect(page.root).toEqualHtml(`
+    it("should render", async () => {
+        const page = await newSpecPage({
+            components: [Theme],
+            html: `<ic-theme></ic-theme>`,
+        });
+        expect(page.root).toEqualHtml(`
       <ic-theme>
         <mock:shadow-root></mock:shadow-root>
       </ic-theme>
     `);
-  });
-  it("should set theme colour with hex", async () => {
-    const page = await newSpecPage({
-      components: [Theme],
-      html: `<ic-theme color="#FFC0CB"></ic-theme>`,
     });
-    expectRGBToBe(page, "255", "192", "203");
-  });
-  it("should set theme colour with 3 character hex", async () => {
-    const page = await newSpecPage({
-      components: [Theme],
-      html: `<ic-theme color="#FFF"></ic-theme>`,
+    it("should set theme colour with hex", async () => {
+        const page = await newSpecPage({
+            components: [Theme],
+            html: `<ic-theme color="#FFC0CB"></ic-theme>`,
+        });
+        expectRGBToBe(page, "255", "192", "203");
+    });
+    it("should set theme colour with 3 character hex", async () => {
+        const page = await newSpecPage({
+            components: [Theme],
+            html: `<ic-theme color="#FFF"></ic-theme>`,
+        });
+        expectRGBToBe(page, "255", "255", "255");
     });
-    expectRGBToBe(page, "255", "255", "255");
-  });
-  it("should set theme colour with rgb", async () => {
-    const page = await newSpecPage({
-      components: [Theme],
-      html: `<ic-theme color="rgb(159, 43, 104)"></ic-theme>`,
+    it("should set theme colour with rgb", async () => {
+        const page = await newSpecPage({
+            components: [Theme],
+            html: `<ic-theme color="rgb(159, 43, 104)"></ic-theme>`,
+        });
+        expectRGBToBe(page, "159", "43", "104");
     });
-    expectRGBToBe(page, "159", "43", "104");
-  });
-  it("should set theme colour with rgba", async () => {
-    const page = await newSpecPage({
-      components: [Theme],
-      html: `<ic-theme color="rgba(159, 43, 104, 1)"></ic-theme>`,
+    it("should set theme colour with rgba", async () => {
+        const page = await newSpecPage({
+            components: [Theme],
+            html: `<ic-theme color="rgba(159, 43, 104, 1)"></ic-theme>`,
+        });
+        expectRGBToBe(page, "159", "43", "104");
     });
-    expectRGBToBe(page, "159", "43", "104");
-  });
-  it("should test updating theme color", async () => {
-    mockThemeColorContrastFail();
-    const page = await newSpecPage({
-      components: [Theme],
-      html: `<ic-theme color="rgba(159, 43, 104)"></ic-theme>`,
+    it("should test updating theme color", async () => {
+        mockThemeColorContrastFail();
+        const page = await newSpecPage({
+            components: [Theme],
+            html: `<ic-theme color="rgba(159, 43, 104)"></ic-theme>`,
+        });
+        page.root.color = "rgba(133, 133, 133, 1)";
+        await page.waitForChanges();
+        expectRGBToBe(page, "133", "133", "133");
     });
-    page.root.color = "rgba(133, 133, 133, 1)";
-    await page.waitForChanges();
-    expectRGBToBe(page, "133", "133", "133");
-  });
 });
 //# sourceMappingURL=ic-theme.spec.js.map

package/dist/collection/components/ic-theme/test/basic/ic-theme.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-theme.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-theme/test/basic/ic-theme.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage, SpecPage } from \"@stencil/core/testing\";\nimport { Theme } from \"../../ic-theme\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../../../utils/constants\";\n\n//mocked as getThemeColorBrightness is NaN when run in test context\n//instead we return a value which will trigger the console warning about theme color contrast\nconst mockThemeColorContrastFail = () => {\n  const func = jest.fn(() => {\n    return (BLACK_MIN_COLOR_BRIGHTNESS + WHITE_MAX_COLOR_BRIGHTNESS) / 2;\n  });\n\n  Object.defineProperty(helpers, \"getThemeColorBrightness\", {\n    value: func,\n  });\n};\n\nconst expectRGBToBe = (\n  page: SpecPage,\n  expectR: string,\n  expectG: string,\n  expectB: string\n) => {\n  const r = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-theme-primary-r\"\n  );\n  const g = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-theme-primary-g\"\n  );\n  const b = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-theme-primary-b\"\n  );\n\n  expect(r).toBe(expectR);\n  expect(g).toBe(expectG);\n  expect(b).toBe(expectB);\n};\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-theme\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme></ic-theme>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <ic-theme>\n        <mock:shadow-root></mock:shadow-root>\n      </ic-theme>\n    `);\n  });\n\n  it(\"should set theme colour with hex\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"#FFC0CB\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"255\", \"192\", \"203\");\n  });\n\n  it(\"should set theme colour with 3 character hex\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"#FFF\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"255\", \"255\", \"255\");\n  });\n\n  it(\"should set theme colour with rgb\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"rgb(159, 43, 104)\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"159\", \"43\", \"104\");\n  });\n\n  it(\"should set theme colour with rgba\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"rgba(159, 43, 104, 1)\"></ic-theme>`,\n    });\n    expectRGBToBe(page, \"159\", \"43\", \"104\");\n  });\n\n  it(\"should test updating theme color\", async () => {\n    mockThemeColorContrastFail();\n\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"rgba(159, 43, 104)\"></ic-theme>`,\n    });\n\n    page.root.color = \"rgba(133, 133, 133, 1)\";\n    await page.waitForChanges();\n\n    expectRGBToBe(page, \"133\", \"133\", \"133\");\n  });\n});\n"]}
+{"version":3,"file":"ic-theme.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-theme/test/basic/ic-theme.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage, SpecPage } from \"@stencil/core/testing\";\nimport { Theme } from \"../../ic-theme\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../../../utils/constants\";\n\n//mocked as getThemeColorBrightness is NaN when run in test context\n//instead we return a value which will trigger the console warning about theme color contrast\nconst mockThemeColorContrastFail = () => {\n  const func = jest.fn(() => {\n    return (BLACK_MIN_COLOR_BRIGHTNESS + WHITE_MAX_COLOR_BRIGHTNESS) / 2;\n  });\n\n  Object.defineProperty(helpers, \"getThemeColorBrightness\", {\n    value: func,\n  });\n};\n\nconst expectRGBToBe = (\n  page: SpecPage,\n  expectR: string,\n  expectG: string,\n  expectB: string\n) => {\n  const r = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-theme-primary-r\"\n  );\n  const g = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-theme-primary-g\"\n  );\n  const b = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-theme-primary-b\"\n  );\n\n  expect(r).toBe(expectR);\n  expect(g).toBe(expectG);\n  expect(b).toBe(expectB);\n};\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-theme\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme></ic-theme>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <ic-theme>\n        <mock:shadow-root></mock:shadow-root>\n      </ic-theme>\n    `);\n  });\n\n  it(\"should set theme colour with hex\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"#FFC0CB\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"255\", \"192\", \"203\");\n  });\n\n  it(\"should set theme colour with 3 character hex\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"#FFF\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"255\", \"255\", \"255\");\n  });\n\n  it(\"should set theme colour with rgb\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"rgb(159, 43, 104)\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"159\", \"43\", \"104\");\n  });\n\n  it(\"should set theme colour with rgba\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"rgba(159, 43, 104, 1)\"></ic-theme>`,\n    });\n    expectRGBToBe(page, \"159\", \"43\", \"104\");\n  });\n\n  it(\"should test updating theme color\", async () => {\n    mockThemeColorContrastFail();\n\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"rgba(159, 43, 104)\"></ic-theme>`,\n    });\n\n    page.root.color = \"rgba(133, 133, 133, 1)\";\n    await page.waitForChanges();\n\n    expectRGBToBe(page, \"133\", \"133\", \"133\");\n  });\n});\n"]}