@ukic/web-components 2.19.0 → 2.21.0

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

@@ -11,21 +11,19 @@ export class Theme {
             }
         };
         this.setThemeColor = () => {
-            if (this.color !== null && convertToRGBA(this.color) !== null) {
-                const colorRGBA = convertToRGBA(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());
+            const colorRGBA = convertToRGBA(this.color);
+            if (colorRGBA) {
+                const { r, g, b, a } = colorRGBA;
+                const { style } = document.documentElement;
+                style.setProperty("--ic-theme-primary-r", `${r}`);
+                style.setProperty("--ic-theme-primary-g", `${g}`);
+                style.setProperty("--ic-theme-primary-b", `${b}`);
+                style.setProperty("--ic-theme-primary-a", `${a}`);
                 this.checkThemeColorContrast();
-                const foregroundColor = getThemeForegroundColor();
-                this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });
+                this.themeChange.emit({
+                    mode: getThemeForegroundColor(),
+                    color: colorRGBA,
+                });
             }
         };
         this.color = null;
@@ -47,9 +45,15 @@ export class Theme {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IcColor",
+                    "resolved": "`#${string}` | `rgb(${string})` | `rgba(${string})`",
+                    "references": {
+                        "IcColor": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcColor"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,

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,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC7E,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,CAAC;gBACD,OAAO,CAAC,IAAI,CACV,2TAA2T,CAC5T,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;gBAC9D,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC5C,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,SAAsB,EAAE,EAAE;YAChD,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;gBACvB,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;YACrE,CAAC;QACH,CAAC,CAAC;qBA/CuB,IAAI;;IAG7B,qBAAqB;QACnB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAOD,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAmCD,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 { convertToRGBA, getThemeForegroundColor } 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 && convertToRGBA(this.color) !== null) {\n      const colorRGBA = convertToRGBA(this.color);\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,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC7E,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,CAAC;gBACD,OAAO,CAAC,IAAI,CACV,2TAA2T,CAC5T,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAG,EAAE;YAC3B,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAE5C,IAAI,SAAS,EAAE,CAAC;gBACd,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;gBACjC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,eAAe,CAAC;gBAC3C,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBAClD,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBAClD,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBAClD,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBAElD,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBAE/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;oBACpB,IAAI,EAAE,uBAAuB,EAAE;oBAC/B,KAAK,EAAE,SAAS;iBACjB,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;qBA7CwB,IAAI;;IAG9B,qBAAqB;QACnB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAOD,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAiCD,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 { IcColor, IcTheme } from \"../../utils/types\";\nimport { convertToRGBA, getThemeForegroundColor } 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?: IcColor = 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    const colorRGBA = convertToRGBA(this.color);\n\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      const { style } = document.documentElement;\n      style.setProperty(\"--ic-theme-primary-r\", `${r}`);\n      style.setProperty(\"--ic-theme-primary-g\", `${g}`);\n      style.setProperty(\"--ic-theme-primary-b\", `${b}`);\n      style.setProperty(\"--ic-theme-primary-a\", `${a}`);\n\n      this.checkThemeColorContrast();\n\n      this.themeChange.emit({\n        mode: getThemeForegroundColor(),\n        color: colorRGBA,\n      });\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,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe("ic-theme", () => {
-    it("renders", async () => {
+    it("should render", async () => {
         const page = await newE2EPage();
         await page.setContent(`<ic-theme></ic-theme>`);
         const element = await page.find("ic-theme");

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(\"should render\", 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-toggle-button/ic-toggle-button.css

@@ -613,3 +613,24 @@ video {
 :host(.checked.loading.dark) ::part(button) {
   background-color: var(--ic-action-dark-active);
 }
+
+@media (forced-colors: active) {
+  :host(.checked) ::part(button),
+  :host(.checked) ::part(button):hover {
+    background-color: Highlight;
+  }
+
+  :host(.checked.light) ::part(button),
+  :host(.checked.light) ::part(button):hover {
+    background-color: Highlight;
+  }
+
+  :host(.checked.dark) ::part(button),
+  :host(.checked.dark) ::part(button):hover {
+    background-color: Highlight;
+  }
+
+  :host(.checked.disabled) ::part(button) {
+    background-color: GrayText;
+  }
+}

package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js

@@ -6,7 +6,7 @@ const keyboard = (key) => {
     return new KeyboardEvent("keydown", { key: key });
 };
 describe("ic-toggle-button-group component unit tests", () => {
-    it("getAllToggleButtons should return an array of slotted ic-toggle-buttons", async () => {
+    it("should getAllToggleButtons and return an array of slotted ic-toggle-buttons", async () => {
         const page = await newSpecPage({
             components: [ToggleButtonGroup, ToggleButton, Button],
             html: `<ic-toggle-button-group select-type="single" size="small">
@@ -19,7 +19,7 @@ describe("ic-toggle-button-group component unit tests", () => {
         await page.waitForChanges();
         expect(toggleButtonArray.length).toBe(3);
     });
-    it("focusing group should focus the first ic-toggle-button when select method is 'single' and no other selection made", async () => {
+    it("should test when the toggle button group receives focus, it should cause the first toggle button inside the group to get focused (when select method is 'single' and no item is already selected)", async () => {
         const page = await newSpecPage({
             components: [ToggleButtonGroup, ToggleButton, Button],
             html: `<ic-toggle-button-group select-type="single">
@@ -35,7 +35,7 @@ describe("ic-toggle-button-group component unit tests", () => {
         await page.waitForChanges();
         expect(buttons[0].toggleChecked).toBeFalsy();
     });
-    it("focusing group when an ic-toggle-button selected should not select first option", async () => {
+    it("should test that focusing group when an ic-toggle-button selected should not select first option", async () => {
         const page = await newSpecPage({
             components: [ToggleButtonGroup, ToggleButton, Button],
             html: `<ic-toggle-button-group select-type="single">
@@ -53,7 +53,7 @@ describe("ic-toggle-button-group component unit tests", () => {
         expect(buttons[0].toggleChecked).toBeFalsy();
         expect(buttons[1].toggleChecked).toBeTruthy();
     });
-    it("focusing the toggle-button-group should focus but not select the first ic-toggle-button when select method is 'multi'", async () => {
+    it("should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'", async () => {
         const page = await newSpecPage({
             components: [ToggleButtonGroup, ToggleButton, Button],
             html: `<ic-toggle-button-group select-type="multi">
@@ -69,7 +69,7 @@ describe("ic-toggle-button-group component unit tests", () => {
         await page.waitForChanges();
         expect(buttons[0].toggleChecked).toBeFalsy();
     });
-    it("focusing the toggle-button-group should focus but not select the first ic-toggle-button when select method is 'multi'", async () => {
+    it("should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'", async () => {
         const page = await newSpecPage({
             components: [ToggleButtonGroup, ToggleButton, Button],
             html: `<ic-toggle-button-group select-type="multi">
@@ -90,7 +90,7 @@ describe("ic-toggle-button-group component unit tests", () => {
         await page.waitForChanges();
         expect(eventSpy).toHaveBeenCalled();
     });
-    it("handleKeyDown", async () => {
+    it("should test handleKeyDown function", async () => {
         const page = await newSpecPage({
             components: [ToggleButtonGroup, ToggleButton, Button],
             html: `<ic-toggle-button-group select-method="auto">
@@ -134,7 +134,7 @@ describe("ic-toggle-button-group component unit tests", () => {
         page.rootInstance.handleKeyDown(keyboard("Tab"));
         document.dispatchEvent(keyboard("Tab"));
     });
-    it("handleKeyDown", async () => {
+    it("should test handleKeyDown on disabled toggle-button-group", async () => {
         const page = await newSpecPage({
             components: [ToggleButtonGroup, ToggleButton, Button],
             html: `<ic-toggle-button-group disabled>

package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-toggle-button-group.spec.js","sourceRoot":"","sources":["../../../../src/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ToggleButtonGroup } from \"../ic-toggle-button-group\";\nimport { ToggleButton } from \"../../ic-toggle-button/ic-toggle-button\";\nimport { Button } from \"../../ic-button/ic-button\";\n\nconst keyboard = (key: string): KeyboardEvent => {\n  return new KeyboardEvent(\"keydown\", { key: key });\n};\n\ndescribe(\"ic-toggle-button-group component unit tests\", () => {\n  it(\"getAllToggleButtons should return an array of slotted ic-toggle-buttons\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\" size=\"small\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const toggleButtonArray = page.rootInstance.getAllToggleButtons();\n    await page.waitForChanges();\n    expect(toggleButtonArray.length).toBe(3);\n  });\n  it(\"focusing group should focus the first ic-toggle-button when select method is 'single' and no other selection made\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].toggleChecked).toBeFalsy();\n  });\n  it(\"focusing group when an ic-toggle-button selected should not select first option\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n\n    buttons[1].toggleChecked = true;\n\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].toggleChecked).toBeFalsy();\n    expect(buttons[1].toggleChecked).toBeTruthy();\n  });\n  it(\"focusing the toggle-button-group should focus but not select the first ic-toggle-button when select method is 'multi'\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"multi\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].toggleChecked).toBeFalsy();\n  });\n  it(\"focusing the toggle-button-group should focus but not select the first ic-toggle-button when select method is 'multi'\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"multi\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const eventSpy = jest.fn();\n    page.win.addEventListener(\"icChange\", eventSpy);\n\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n    buttons[0].toggleChecked = true;\n    buttons[1].toggleChecked = true;\n\n    const customEv = new CustomEvent(\"icToggleChecked\", {});\n\n    page.rootInstance.selectHandler(customEv);\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n  it(\"handleKeyDown\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-method=\"auto\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const firstButton = (await document.querySelector(\n      \"#0\"\n    )) as HTMLIcToggleButtonElement;\n    const secondButton = (await document.querySelector(\n      \"#1\"\n    )) as HTMLIcToggleButtonElement;\n    const thirdButton = (await document.querySelector(\n      \"#2\"\n    )) as HTMLIcToggleButtonElement;\n\n    expect(firstButton.toggleChecked).toBeFalsy();\n    await firstButton.click();\n    expect(firstButton.toggleChecked).toBeTruthy();\n\n    await page.waitForChanges();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n    expect(thirdButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowUp\"));\n    expect(thirdButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowDown\"));\n    expect(secondButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n    expect(thirdButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    secondButton.disabled = true;\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowRight\"));\n    expect(thirdButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    // for coverage\n    page.rootInstance.handleKeyDown(keyboard(\"Tab\"));\n    document.dispatchEvent(keyboard(\"Tab\"));\n  });\n  it(\"handleKeyDown\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group disabled>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const mockEvent = new FocusEvent(\"focus\");\n\n    expect(page.rootInstance.handleHostFocus(mockEvent)).toBeNull();\n  });\n});\n"]}
+{"version":3,"file":"ic-toggle-button-group.spec.js","sourceRoot":"","sources":["../../../../src/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ToggleButtonGroup } from \"../ic-toggle-button-group\";\nimport { ToggleButton } from \"../../ic-toggle-button/ic-toggle-button\";\nimport { Button } from \"../../ic-button/ic-button\";\n\nconst keyboard = (key: string): KeyboardEvent => {\n  return new KeyboardEvent(\"keydown\", { key: key });\n};\n\ndescribe(\"ic-toggle-button-group component unit tests\", () => {\n  it(\"should getAllToggleButtons and return an array of slotted ic-toggle-buttons\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\" size=\"small\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const toggleButtonArray = page.rootInstance.getAllToggleButtons();\n    await page.waitForChanges();\n    expect(toggleButtonArray.length).toBe(3);\n  });\n  it(\"should test when the toggle button group receives focus, it should cause the first toggle button inside the group to get focused (when select method is 'single' and no item is already selected)\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].toggleChecked).toBeFalsy();\n  });\n  it(\"should test that focusing group when an ic-toggle-button selected should not select first option\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n\n    buttons[1].toggleChecked = true;\n\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].toggleChecked).toBeFalsy();\n    expect(buttons[1].toggleChecked).toBeTruthy();\n  });\n  it(\"should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"multi\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].toggleChecked).toBeFalsy();\n  });\n  it(\"should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"multi\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const eventSpy = jest.fn();\n    page.win.addEventListener(\"icChange\", eventSpy);\n\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n    buttons[0].toggleChecked = true;\n    buttons[1].toggleChecked = true;\n\n    const customEv = new CustomEvent(\"icToggleChecked\", {});\n\n    page.rootInstance.selectHandler(customEv);\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n  it(\"should test handleKeyDown function\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-method=\"auto\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const firstButton = (await document.querySelector(\n      \"#0\"\n    )) as HTMLIcToggleButtonElement;\n    const secondButton = (await document.querySelector(\n      \"#1\"\n    )) as HTMLIcToggleButtonElement;\n    const thirdButton = (await document.querySelector(\n      \"#2\"\n    )) as HTMLIcToggleButtonElement;\n\n    expect(firstButton.toggleChecked).toBeFalsy();\n    await firstButton.click();\n    expect(firstButton.toggleChecked).toBeTruthy();\n\n    await page.waitForChanges();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n    expect(thirdButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowUp\"));\n    expect(thirdButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowDown\"));\n    expect(secondButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n    expect(thirdButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    secondButton.disabled = true;\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowRight\"));\n    expect(thirdButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    // for coverage\n    page.rootInstance.handleKeyDown(keyboard(\"Tab\"));\n    document.dispatchEvent(keyboard(\"Tab\"));\n  });\n  it(\"should test handleKeyDown on disabled toggle-button-group\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group disabled>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const mockEvent = new FocusEvent(\"focus\");\n\n    expect(page.rootInstance.handleHostFocus(mockEvent)).toBeNull();\n  });\n});\n"]}

package/dist/collection/components/ic-tooltip/ic-tooltip.css

@@ -445,6 +445,13 @@ video {
  * @prop --ic-z-index-tooltip: z-index of tooltip
  */
 
+:host(.ic-tooltip) {
+  width: -moz-max-content;
+  width: max-content;
+  height: -moz-max-content;
+  height: max-content;
+}
+
 :host(.ic-tooltip) .ic-tooltip-container {
   background-color: var(--ic-architectural-800);
   color: #ffff;

package/dist/collection/components/ic-top-navigation/ic-top-navigation.js

@@ -2,7 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, getThemeForegroundColor, getSlot, onComponentPropUndefinedChange, onComponentRequiredPropUndefined, isSlotUsed, isEmptyString, isPropDefined, } from "../../utils/helpers";
 /**
- * @slot app-icon - Content will be rendered to left of app title.
+ * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.
  * @slot app-title - Handle routing by nesting a route in the app title.
  * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).
  * @slot search - Content will be rendered in search area to left of buttons.
@@ -18,6 +18,12 @@ export class TopNavigation {
         this.hasSearchSlotContent = false;
         this.resizeObserver = null;
         this.searchBar = null;
+        this.checkSlots = () => {
+            this.hasAppIcon = isSlotUsed(this.el, "app-icon");
+            this.hasNavigation = isSlotUsed(this.el, "navigation");
+            this.hasIconButtons = isSlotUsed(this.el, "buttons");
+            this.hasSearchSlotContent = isSlotUsed(this.el, "search");
+        };
         this.initialiseSearchBar = () => {
             if (this.hasSearchSlotContent) {
                 const slot = getSlot(this.el, "search");
@@ -43,7 +49,6 @@ export class TopNavigation {
             this.searchButtonClick = false;
         };
         this.resizeObserverCallback = (currSize) => {
-            var _a;
             if (currSize !== this.deviceSize) {
                 this.deviceSize = currSize;
                 if (currSize > this.customMobileBreakpoint) {
@@ -55,7 +60,7 @@ export class TopNavigation {
                 this.topNavResized.emit({
                     size: currSize,
                 });
-                if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === "IC-SEARCH-BAR") {
+                if (this.searchBar && document.activeElement === this.searchBar) {
                     this.searchBar.setAttribute("hidden", "true");
                     //remove attribute again as this trigger a redraw & applies css
                     this.searchBar.removeAttribute("hidden");
@@ -94,15 +99,11 @@ export class TopNavigation {
         onComponentPropUndefinedChange(oldValue, newValue, this.initialiseSearchBar);
     }
     disconnectedCallback() {
-        if (this.resizeObserver !== null) {
-            this.resizeObserver.disconnect();
-        }
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
-        this.hasAppIcon = isSlotUsed(this.el, "app-icon");
-        this.hasNavigation = isSlotUsed(this.el, "navigation");
-        this.hasIconButtons = isSlotUsed(this.el, "buttons");
-        this.hasSearchSlotContent = isSlotUsed(this.el, "search");
+        this.checkSlots();
         this.deviceSize = getCurrentDeviceSize();
         this.initialiseSearchBar();
     }
@@ -112,10 +113,7 @@ export class TopNavigation {
             onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Top Navigation");
     }
     componentWillRender() {
-        this.hasNavigation = isSlotUsed(this.el, "navigation");
-        this.hasSearchSlotContent = isSlotUsed(this.el, "search");
-        this.hasIconButtons = isSlotUsed(this.el, "buttons");
-        this.hasAppIcon = isSlotUsed(this.el, "app-icon");
+        this.checkSlots();
     }
     navBarMenuCloseHandler() {
         this.showNavMenu(false);
@@ -151,16 +149,9 @@ export class TopNavigation {
     }
     showNavMenu(show) {
         this.navMenuVisible = show;
-        if (show) {
-            this.icNavigationMenuOpened.emit();
-            document.body.style.height = "100%";
-            document.body.style.overflow = "hidden";
-        }
-        else {
-            this.icNavigationMenuClosed.emit();
-            document.body.style.height = "auto";
-            document.body.style.overflow = "auto";
-        }
+        (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();
+        document.body.style.height = show ? "100%" : "auto";
+        document.body.style.overflow = show ? "hidden" : "auto";
     }
     render() {
         const { appTitle, contentAligned, customMobileBreakpoint, deviceSize, el, foregroundColor, hasAppIcon, hasFullWidthSearchBar, hasIconButtons, hasNavigation, hasSearchSlotContent, href, inline, menuButtonClick, mobileSearchBarVisible, navMenuVisible, searchButtonClickHandler, searchButtonMouseDownHandler, shortAppTitle, status, version, } = this;

package/dist/collection/components/ic-top-navigation/ic-top-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-top-navigation.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcTheme,\n  IcDeviceSizes,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  isEmptyString,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  private hasAppIcon: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private mobileSearchButtonEl: HTMLIcButtonElement;\n  private resizeObserver: ResizeObserver = null;\n  private searchBar: HTMLIcSearchBarElement = null;\n\n  @Element() el: HTMLIcTopNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasFullWidthSearchBar: boolean = false;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() searchValue: string = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n  /**\n   * Can set a custom breakpoint for the top navigation to switch to mobile mode.\n   * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n   */\n  @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * The short title of the app to be displayed at small screen sizes in place of the app title.\n   */\n  @Prop() shortAppTitle: string = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The version info to be displayed.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle: string;\n\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once gatbsy hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * Emitted when the top navigation is resized.\n   */\n  @Event() topNavResized: EventEmitter<{ size: number }>;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    this.el.shadowRoot.querySelector<HTMLElement>(\"#menu-button\").focus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler({\n    detail,\n  }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n    if (detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = detail.value;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n    this.searchValue = detail.value;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.foregroundColor = detail.mode;\n  }\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot?.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot?.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\"ic-search-bar\");\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      this.mobileSearchButtonEl.setAttribute(\n        \"aria-label\",\n        `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n      );\n      this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n      this.searchBar.fullWidth = this.mobileSearchBarVisible;\n      if (this.mobileSearchBarVisible) {\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  }\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    if (show) {\n      this.icNavigationMenuOpened.emit();\n      document.body.style.height = \"100%\";\n      document.body.style.overflow = \"hidden\";\n    } else {\n      this.icNavigationMenuClosed.emit();\n      document.body.style.height = \"auto\";\n      document.body.style.overflow = \"auto\";\n    }\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > this.customMobileBreakpoint) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.topNavResized.emit({\n        size: currSize,\n      });\n      if (document.activeElement?.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const {\n      appTitle,\n      contentAligned,\n      customMobileBreakpoint,\n      deviceSize,\n      el,\n      foregroundColor,\n      hasAppIcon,\n      hasFullWidthSearchBar,\n      hasIconButtons,\n      hasNavigation,\n      hasSearchSlotContent,\n      href,\n      inline,\n      menuButtonClick,\n      mobileSearchBarVisible,\n      navMenuVisible,\n      searchButtonClickHandler,\n      searchButtonMouseDownHandler,\n      shortAppTitle,\n      status,\n      version,\n    } = this;\n\n    const hasStatus = status !== \"\";\n    const hasVersion = version !== \"\";\n    const hasMenuContent =\n      hasNavigation || hasIconButtons || hasStatus || hasVersion;\n\n    const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n    const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n    const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n    const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n      ? deviceSize <= DEVICE_SIZES.S\n        ? \"subtitle-small\"\n        : \"h4\"\n      : \"h3\";\n\n    const mobileSearchButtonTitle = `${\n      mobileSearchBarVisible ? \"Hide\" : \"Show\"\n    } search`;\n    const menuSize = deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n    const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n    const hasAppTitleSlot = isSlotUsed(el, \"app-title\");\n    const Component = hasAppTitleSlot ? \"div\" : \"a\";\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <Host\n        class={{\n          \"fullwidth-searchbar\": hasFullWidthSearchBar,\n          \"mobile-mode\": overMobileBreakpoint,\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || hasAppTitleSlot) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {hasAppIcon && (\n                        <div class=\"app-icon-container\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      {deviceSize <= DEVICE_SIZES.S &&\n                      (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (\n                        <ic-typography\n                          variant=\"subtitle-small\"\n                          aria-label={\n                            (!hasAppTitleSlot || !shortAppTitleSlot) &&\n                            `${appTitle} (${shortAppTitle})`\n                          }\n                        >\n                          <h1>\n                            {shortAppTitleSlot ? (\n                              <slot name=\"short-app-title\"></slot>\n                            ) : (\n                              shortAppTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      ) : (\n                        <ic-typography variant={appTitleVariant}>\n                          <h1 class=\"title-wrap\">\n                            {hasAppTitleSlot ? (\n                              <slot name=\"app-title\"></slot>\n                            ) : (\n                              appTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      )}\n                    </Component>\n                  )}\n                  {hasStatus && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {hasVersion && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {!overMobileBreakpoint && <slot name=\"search\"></slot>}\n\n                      {hasSearchSlotContent && overMobileBreakpoint && (\n                        <ic-button\n                          id=\"search-toggle-button\"\n                          ref={(el) => (this.mobileSearchButtonEl = el)}\n                          onMouseDown={searchButtonMouseDownHandler}\n                          variant=\"icon\"\n                          size={searchButtonSize}\n                          aria-label={mobileSearchButtonTitle}\n                          appearance={foregroundColor}\n                          onClick={searchButtonClickHandler}\n                        >\n                          <slot name=\"toggle-icon\">\n                            <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              fill=\"#ffffff\"\n                            >\n                              <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                              <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                            </svg>\n                          </slot>\n                        </ic-button>\n                      )}\n\n                      {hasIconButtons && !overMobileBreakpoint && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && overMobileBreakpoint && (\n                        <div class=\"menu-button-container\">\n                          <span\n                            id=\"navigation-landmark-button-text\"\n                            class=\"navigation-landmark-button-text\"\n                            aria-hidden=\"true\"\n                          >\n                            Main navigation button\n                          </span>\n                          <nav\n                            aria-labelledby=\"navigation-landmark-button-text\"\n                            aria-hidden={`${navMenuVisible}`}\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              appearance={foregroundColor}\n                              variant=\"secondary\"\n                              aria-expanded=\"false\"\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"icon\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                              </svg>\n                            </ic-button>\n                          </nav>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {hasNavigation && !overMobileBreakpoint && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main pages\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll appearance={foregroundColor}>\n                      <ul class=\"navigation-item-list\" tabindex=\"-1\">\n                        <slot name=\"navigation\"></slot>\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {navMenuVisible && (\n          <ic-navigation-menu\n            version={version}\n            status={status}\n            class={{\n              [\"inline\"]: inline,\n            }}\n          >\n            {hasIconButtons && (\n              <div class=\"menu-buttons-slot\" slot=\"buttons\">\n                <slot name=\"buttons\"></slot>\n              </div>\n            )}\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-top-navigation.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcTheme,\n  IcDeviceSizes,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  isEmptyString,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  private hasAppIcon: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private mobileSearchButtonEl: HTMLIcButtonElement;\n  private resizeObserver: ResizeObserver = null;\n  private searchBar: HTMLIcSearchBarElement = null;\n\n  @Element() el: HTMLIcTopNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasFullWidthSearchBar: boolean = false;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() searchValue: string = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n  /**\n   * Can set a custom breakpoint for the top navigation to switch to mobile mode.\n   * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n   */\n  @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * The short title of the app to be displayed at small screen sizes in place of the app title.\n   */\n  @Prop() shortAppTitle: string = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The version info to be displayed.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle: string;\n\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once gatbsy hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * Emitted when the top navigation is resized.\n   */\n  @Event() topNavResized: EventEmitter<{ size: number }>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.checkSlots();\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.checkSlots();\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    this.el.shadowRoot.querySelector<HTMLElement>(\"#menu-button\").focus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler({\n    detail,\n  }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n    if (detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = detail.value;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n    this.searchValue = detail.value;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.foregroundColor = detail.mode;\n  }\n\n  private checkSlots = () => {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n  };\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot?.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot?.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\"ic-search-bar\");\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      this.mobileSearchButtonEl.setAttribute(\n        \"aria-label\",\n        `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n      );\n      this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n      this.searchBar.fullWidth = this.mobileSearchBarVisible;\n      if (this.mobileSearchBarVisible) {\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  }\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n    document.body.style.height = show ? \"100%\" : \"auto\";\n    document.body.style.overflow = show ? \"hidden\" : \"auto\";\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > this.customMobileBreakpoint) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.topNavResized.emit({\n        size: currSize,\n      });\n      if (this.searchBar && document.activeElement === this.searchBar) {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const {\n      appTitle,\n      contentAligned,\n      customMobileBreakpoint,\n      deviceSize,\n      el,\n      foregroundColor,\n      hasAppIcon,\n      hasFullWidthSearchBar,\n      hasIconButtons,\n      hasNavigation,\n      hasSearchSlotContent,\n      href,\n      inline,\n      menuButtonClick,\n      mobileSearchBarVisible,\n      navMenuVisible,\n      searchButtonClickHandler,\n      searchButtonMouseDownHandler,\n      shortAppTitle,\n      status,\n      version,\n    } = this;\n\n    const hasStatus = status !== \"\";\n    const hasVersion = version !== \"\";\n    const hasMenuContent =\n      hasNavigation || hasIconButtons || hasStatus || hasVersion;\n\n    const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n    const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n    const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n    const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n      ? deviceSize <= DEVICE_SIZES.S\n        ? \"subtitle-small\"\n        : \"h4\"\n      : \"h3\";\n\n    const mobileSearchButtonTitle = `${\n      mobileSearchBarVisible ? \"Hide\" : \"Show\"\n    } search`;\n    const menuSize = deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n    const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n    const hasAppTitleSlot = isSlotUsed(el, \"app-title\");\n    const Component = hasAppTitleSlot ? \"div\" : \"a\";\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <Host\n        class={{\n          \"fullwidth-searchbar\": hasFullWidthSearchBar,\n          \"mobile-mode\": overMobileBreakpoint,\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || hasAppTitleSlot) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {hasAppIcon && (\n                        <div class=\"app-icon-container\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      {deviceSize <= DEVICE_SIZES.S &&\n                      (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (\n                        <ic-typography\n                          variant=\"subtitle-small\"\n                          aria-label={\n                            (!hasAppTitleSlot || !shortAppTitleSlot) &&\n                            `${appTitle} (${shortAppTitle})`\n                          }\n                        >\n                          <h1>\n                            {shortAppTitleSlot ? (\n                              <slot name=\"short-app-title\"></slot>\n                            ) : (\n                              shortAppTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      ) : (\n                        <ic-typography variant={appTitleVariant}>\n                          <h1 class=\"title-wrap\">\n                            {hasAppTitleSlot ? (\n                              <slot name=\"app-title\"></slot>\n                            ) : (\n                              appTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      )}\n                    </Component>\n                  )}\n                  {hasStatus && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {hasVersion && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {!overMobileBreakpoint && <slot name=\"search\"></slot>}\n\n                      {hasSearchSlotContent && overMobileBreakpoint && (\n                        <ic-button\n                          id=\"search-toggle-button\"\n                          ref={(el) => (this.mobileSearchButtonEl = el)}\n                          onMouseDown={searchButtonMouseDownHandler}\n                          variant=\"icon\"\n                          size={searchButtonSize}\n                          aria-label={mobileSearchButtonTitle}\n                          appearance={foregroundColor}\n                          onClick={searchButtonClickHandler}\n                        >\n                          <slot name=\"toggle-icon\">\n                            <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              fill=\"#ffffff\"\n                            >\n                              <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                              <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                            </svg>\n                          </slot>\n                        </ic-button>\n                      )}\n\n                      {hasIconButtons && !overMobileBreakpoint && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && overMobileBreakpoint && (\n                        <div class=\"menu-button-container\">\n                          <span\n                            id=\"navigation-landmark-button-text\"\n                            class=\"navigation-landmark-button-text\"\n                            aria-hidden=\"true\"\n                          >\n                            Main navigation button\n                          </span>\n                          <nav\n                            aria-labelledby=\"navigation-landmark-button-text\"\n                            aria-hidden={`${navMenuVisible}`}\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              appearance={foregroundColor}\n                              variant=\"secondary\"\n                              aria-expanded=\"false\"\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"icon\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                              </svg>\n                            </ic-button>\n                          </nav>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {hasNavigation && !overMobileBreakpoint && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main pages\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll appearance={foregroundColor}>\n                      <ul class=\"navigation-item-list\" tabindex=\"-1\">\n                        <slot name=\"navigation\"></slot>\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {navMenuVisible && (\n          <ic-navigation-menu\n            version={version}\n            status={status}\n            class={{\n              [\"inline\"]: inline,\n            }}\n          >\n            {hasIconButtons && (\n              <div class=\"menu-buttons-slot\" slot=\"buttons\">\n                <slot name=\"buttons\"></slot>\n              </div>\n            )}\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"]}