@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.11

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

@@ -289,7 +289,7 @@ describe("ic-top-navigation", () => {
         });
         expect(page.rootInstance.searchValue).toBe("hi again!");
     });
-    it("should test theme change", async () => {
+    it("should test brand change", async () => {
         const page = await newSpecPage({
             components: [TopNavigation],
             html: `<ic-top-navigation
@@ -299,10 +299,10 @@ describe("ic-top-navigation", () => {
     >
     </ic-top-navigation>`,
         });
-        await page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
+        await page.rootInstance.brandChangeHandler({ detail: { mode: "dark" } });
         await page.waitForChanges();
         expect(page.rootInstance.foregroundColor).toBe("dark");
-        await page.rootInstance.themeChangeHandler({ detail: { mode: "light" } });
+        await page.rootInstance.brandChangeHandler({ detail: { mode: "light" } });
         await page.waitForChanges();
         expect(page.rootInstance.foregroundColor).toBe("light");
         //call runResizeObserver

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

@@ -1 +1 @@
-{"version":3,"file":"ic-top-navigation.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-top-navigation/test/basic/ic-top-navigation.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\nimport { NavigationMenu } from \"../../../ic-navigation-menu/ic-navigation-menu\";\nimport { SearchBar } from \"../../../ic-search-bar/ic-search-bar\";\nimport { TopNavigation } from \"../../ic-top-navigation\";\nimport { TextField } from \"../../../ic-text-field/ic-text-field\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\nconst waitForSearchFocus = async () => {\n  //delay to account for 100ms delay in search bar focus\n  await waitForTimeout(200);\n};\n\ndescribe(\"ic-top-navigation\", () => {\n  it(\"should render with app title\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\"></ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-app-title\");\n  });\n\n  it(\"should render with app icon & title\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\">\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-app-icon-and-title\");\n  });\n\n  it(\"should render with custom title link url\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\" href=\"https://www.google.co.uk/\">\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-custom-title-link-url\");\n  });\n\n  it(\"should render with title, version & status\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      ></ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-title-version-status\");\n  });\n\n  it(\"should render with search\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n      <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\">\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-search\");\n  });\n\n  it(\"should render with buttons\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <ic-navigation-button\n          label=\"button1\"\n          slot=\"buttons\"\n          onclick=\"alert('test')\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n            />\n          </svg>\n        </ic-navigation-button>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-buttons\");\n  });\n\n  it(\"should render with navigation\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, NavigationItem],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <ic-navigation-item label=\"Navigation 1\" slot=navigation href=\"/\"></ic-navigation-item>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-navigation\");\n  });\n\n  it(\"should test app title updates\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\"></ic-top-navigation>`,\n    });\n    const appTitle = await page.root.shadowRoot.querySelector(\"h1\");\n\n    expect(appTitle.textContent).toEqual(\"ApplicationName\");\n    page.root.appTitle = \"New Application Name\";\n    await page.waitForChanges();\n\n    expect(appTitle.textContent).toEqual(\"New Application Name\");\n  });\n\n  it(\"should test form in search slot\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\">\n      <form role=\"search\" slot=\"search\">\n        <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\">\n        </ic-search-bar>\n      </form>\n      </ic-top-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"form-in-search-slot\");\n  });\n\n  it(\"should render with slotted app-title content\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n      <a slot=\"app-title\" href=\"/\">App Title</a>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-app-title-content\");\n  });\n\n  it(\"should test behaviour on small device\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    <ic-search-bar label=\"Search\" placeholder=\"Search\" slot=\"search\"></ic-search-bar>\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n\n    let searchBtn = page.root.shadowRoot.querySelector(\n      \"#search-toggle-button\"\n    ) as HTMLElement;\n    expect(searchBtn).not.toBeNull();\n\n    searchBtn.click();\n    await page.waitForChanges();\n    await waitForSearchFocus();\n\n    let menuButton = page.root.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    expect(menuButton).not.toBeNull();\n    expect(page.rootInstance.searchButtonClick).toBe(false);\n    page.rootInstance.searchButtonMouseDownHandler();\n    expect(page.rootInstance.searchButtonClick).toBe(true);\n\n    searchBtn.click();\n    await page.waitForChanges();\n    await waitForSearchFocus();\n    expect(page.rootInstance.searchButtonClick).toBe(false);\n\n    menuButton.click();\n    await page.waitForChanges();\n\n    let menu = page.root.shadowRoot.querySelector(\"ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    await page.waitForChanges();\n\n    menu = page.root.shadowRoot.querySelector(\"ic-navigation-menu\");\n    expect(menu).toBeNull();\n\n    searchBtn = page.root.shadowRoot.querySelector(\n      \"#search-toggle-button\"\n    ) as HTMLElement;\n    expect(searchBtn).toBeNull();\n    menuButton = page.root.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    expect(menuButton).toBeNull();\n  });\n\n  it(\"should test hiding of mobile search bar on resize\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    <ic-search-bar label=\"Search\" placeholder=\"Search\" slot=\"search\"></ic-search-bar>\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n    const searchBtn = page.root.shadowRoot.querySelector(\n      \"#search-toggle-button\"\n    ) as HTMLElement;\n    expect(searchBtn).not.toBeNull();\n\n    searchBtn.click();\n    await page.waitForChanges();\n    await waitForSearchFocus();\n    expect(page.rootInstance.mobileSearchBarVisible).toBe(true);\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    await page.waitForChanges();\n    await waitForSearchFocus();\n    expect(page.rootInstance.mobileSearchBarVisible).toBe(false);\n  });\n\n  it(\"should test nav bar menu visibility\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    <ic-search-bar label=\"Search\" placeholder=\"Search\" slot=\"search\"></ic-search-bar>\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n\n    const menuButton = page.root.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    expect(menuButton).not.toBeNull();\n    expect(page.rootInstance.navMenuVisible).toBe(false);\n    menuButton.click();\n    await page.waitForChanges();\n    expect(page.rootInstance.navMenuVisible).toBe(true);\n    await page.rootInstance.navBarMenuCloseHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.navMenuVisible).toBe(false);\n  });\n\n  it(\"should test short title on mobile devices\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n      app-title=\"Application Name\"\n      short-app-title=\"App Name\"\n    >\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot(\"renders-with-short-title\");\n  });\n\n  it(\"should render with slotted short-app-title\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n      <a slot=\"app-title\" href=\"/\">App Title</a>\n      <a slot=\"short-app-title\" href=\"/\">Title</a>\n      </ic-top-navigation>`,\n    });\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-short-title\");\n  });\n\n  it(\"should test search value change\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    </ic-top-navigation>`,\n    });\n\n    //test search value change\n    await page.rootInstance.searchValueChangeHandler({\n      detail: { value: \"hi!\" },\n    });\n    expect(page.rootInstance.searchValue).toBe(\"hi!\");\n\n    //test search input blur\n    page.rootInstance.mobileSearchBarVisible = true;\n    page.rootInstance.searchButtonClick = false;\n    await page.rootInstance.searchInputBlurHandler({\n      detail: { value: \"hi again!\" },\n    });\n    expect(page.rootInstance.searchValue).toBe(\"hi again!\");\n  });\n\n  it(\"should test theme change\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.foregroundColor).toBe(\"dark\");\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.foregroundColor).toBe(\"light\");\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n});\n"]}
+{"version":3,"file":"ic-top-navigation.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-top-navigation/test/basic/ic-top-navigation.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\nimport { NavigationMenu } from \"../../../ic-navigation-menu/ic-navigation-menu\";\nimport { SearchBar } from \"../../../ic-search-bar/ic-search-bar\";\nimport { TopNavigation } from \"../../ic-top-navigation\";\nimport { TextField } from \"../../../ic-text-field/ic-text-field\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\nconst waitForSearchFocus = async () => {\n  //delay to account for 100ms delay in search bar focus\n  await waitForTimeout(200);\n};\n\ndescribe(\"ic-top-navigation\", () => {\n  it(\"should render with app title\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\"></ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-app-title\");\n  });\n\n  it(\"should render with app icon & title\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\">\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-app-icon-and-title\");\n  });\n\n  it(\"should render with custom title link url\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\" href=\"https://www.google.co.uk/\">\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-custom-title-link-url\");\n  });\n\n  it(\"should render with title, version & status\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      ></ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-title-version-status\");\n  });\n\n  it(\"should render with search\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n      <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\">\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-search\");\n  });\n\n  it(\"should render with buttons\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <ic-navigation-button\n          label=\"button1\"\n          slot=\"buttons\"\n          onclick=\"alert('test')\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n            />\n          </svg>\n        </ic-navigation-button>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-buttons\");\n  });\n\n  it(\"should render with navigation\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, NavigationItem],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <ic-navigation-item label=\"Navigation 1\" slot=navigation href=\"/\"></ic-navigation-item>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-navigation\");\n  });\n\n  it(\"should test app title updates\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\"></ic-top-navigation>`,\n    });\n    const appTitle = await page.root.shadowRoot.querySelector(\"h1\");\n\n    expect(appTitle.textContent).toEqual(\"ApplicationName\");\n    page.root.appTitle = \"New Application Name\";\n    await page.waitForChanges();\n\n    expect(appTitle.textContent).toEqual(\"New Application Name\");\n  });\n\n  it(\"should test form in search slot\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\">\n      <form role=\"search\" slot=\"search\">\n        <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\">\n        </ic-search-bar>\n      </form>\n      </ic-top-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"form-in-search-slot\");\n  });\n\n  it(\"should render with slotted app-title content\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n      <a slot=\"app-title\" href=\"/\">App Title</a>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-app-title-content\");\n  });\n\n  it(\"should test behaviour on small device\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    <ic-search-bar label=\"Search\" placeholder=\"Search\" slot=\"search\"></ic-search-bar>\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n\n    let searchBtn = page.root.shadowRoot.querySelector(\n      \"#search-toggle-button\"\n    ) as HTMLElement;\n    expect(searchBtn).not.toBeNull();\n\n    searchBtn.click();\n    await page.waitForChanges();\n    await waitForSearchFocus();\n\n    let menuButton = page.root.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    expect(menuButton).not.toBeNull();\n    expect(page.rootInstance.searchButtonClick).toBe(false);\n    page.rootInstance.searchButtonMouseDownHandler();\n    expect(page.rootInstance.searchButtonClick).toBe(true);\n\n    searchBtn.click();\n    await page.waitForChanges();\n    await waitForSearchFocus();\n    expect(page.rootInstance.searchButtonClick).toBe(false);\n\n    menuButton.click();\n    await page.waitForChanges();\n\n    let menu = page.root.shadowRoot.querySelector(\"ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    await page.waitForChanges();\n\n    menu = page.root.shadowRoot.querySelector(\"ic-navigation-menu\");\n    expect(menu).toBeNull();\n\n    searchBtn = page.root.shadowRoot.querySelector(\n      \"#search-toggle-button\"\n    ) as HTMLElement;\n    expect(searchBtn).toBeNull();\n    menuButton = page.root.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    expect(menuButton).toBeNull();\n  });\n\n  it(\"should test hiding of mobile search bar on resize\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    <ic-search-bar label=\"Search\" placeholder=\"Search\" slot=\"search\"></ic-search-bar>\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n    const searchBtn = page.root.shadowRoot.querySelector(\n      \"#search-toggle-button\"\n    ) as HTMLElement;\n    expect(searchBtn).not.toBeNull();\n\n    searchBtn.click();\n    await page.waitForChanges();\n    await waitForSearchFocus();\n    expect(page.rootInstance.mobileSearchBarVisible).toBe(true);\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    await page.waitForChanges();\n    await waitForSearchFocus();\n    expect(page.rootInstance.mobileSearchBarVisible).toBe(false);\n  });\n\n  it(\"should test nav bar menu visibility\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    <ic-search-bar label=\"Search\" placeholder=\"Search\" slot=\"search\"></ic-search-bar>\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n\n    const menuButton = page.root.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    expect(menuButton).not.toBeNull();\n    expect(page.rootInstance.navMenuVisible).toBe(false);\n    menuButton.click();\n    await page.waitForChanges();\n    expect(page.rootInstance.navMenuVisible).toBe(true);\n    await page.rootInstance.navBarMenuCloseHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.navMenuVisible).toBe(false);\n  });\n\n  it(\"should test short title on mobile devices\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n      app-title=\"Application Name\"\n      short-app-title=\"App Name\"\n    >\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot(\"renders-with-short-title\");\n  });\n\n  it(\"should render with slotted short-app-title\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n      <a slot=\"app-title\" href=\"/\">App Title</a>\n      <a slot=\"short-app-title\" href=\"/\">Title</a>\n      </ic-top-navigation>`,\n    });\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-short-title\");\n  });\n\n  it(\"should test search value change\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    </ic-top-navigation>`,\n    });\n\n    //test search value change\n    await page.rootInstance.searchValueChangeHandler({\n      detail: { value: \"hi!\" },\n    });\n    expect(page.rootInstance.searchValue).toBe(\"hi!\");\n\n    //test search input blur\n    page.rootInstance.mobileSearchBarVisible = true;\n    page.rootInstance.searchButtonClick = false;\n    await page.rootInstance.searchInputBlurHandler({\n      detail: { value: \"hi again!\" },\n    });\n    expect(page.rootInstance.searchValue).toBe(\"hi again!\");\n  });\n\n  it(\"should test brand change\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.brandChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.foregroundColor).toBe(\"dark\");\n\n    await page.rootInstance.brandChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.foregroundColor).toBe(\"light\");\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n});\n"]}

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

@@ -444,7 +444,7 @@ video {
 :host {
   display: block;
   position: relative;
-  color: var(--ic-typography-color, var(--ic-color-primary-text));
+  color: var(--ic-typography-color, var(--ic-color-text-primary));
 }
 
 :host(.ic-typography-vertical-margins-h1) {
@@ -592,7 +592,7 @@ video {
   border: none;
   background: none;
   padding: 0;
-  color: var(--ic-color-primary-text);
+  color: var(--ic-color-text-primary);
   text-decoration: underline;
   font-weight: var(--ic-font-weight-bold);
   transition: var(--ic-easing-transition-fast);
@@ -629,7 +629,7 @@ video {
 
 :host(.ic-theme-dark),
 :host(.ic-theme-light) {
-  --ic-typography-color: var(--ic-color-primary-text);
+  --ic-typography-color: var(--ic-color-text-primary);
 }
 
 :host(.in-ag-grid),
@@ -650,11 +650,9 @@ video {
   }
 }
 
-/* Add back in after storybook has the `color-scheme: light dark` code */
-
-/* @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {
+@media (prefers-color-scheme: dark) and (not (forced-colors: active)) {
   :host,
-  .trunc-btn {
-    color: var(--ic-architectural-white);
+  .trunc-btn::not(ic-tooltip) {
+    color: var(--ic-typography-color);
   }
-} */
+}

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

@@ -26,7 +26,9 @@ export class Typography {
             }
         };
         this.getElementTop = (el) => {
-            return el.getClientRects ? el.getClientRects()[0].top : 0;
+            return el.getClientRects && el.getClientRects()[0]
+                ? el.getClientRects()[0].top
+                : 0;
         };
         this.runResizeObserver = () => {
             this.resizeObserver = new ResizeObserver(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"ic-typography.js","sourceRoot":"","sources":["../../../src/components/ic-typography/ic-typography.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  h,\n  Element,\n  Host,\n  State,\n  Watch,\n  Method,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport { IcTypographyVariants, IcThemeMode } from \"../../utils/types\";\nimport { checkResizeObserver, isElInAGGrid } from \"../../utils/helpers\";\n\n@Component({\n  styleUrl: \"ic-typography.css\",\n  tag: \"ic-typography\",\n  shadow: true,\n})\nexport class Typography {\n  private focusBtnFromKeyboard: boolean = true;\n  private inAGGrid: boolean = false;\n  private lastMarkerTop: number = 0;\n  private lastWidth: number = 0;\n  private marker: HTMLElement;\n  private resizeInterval: number;\n  private resizeObserver: ResizeObserver = null;\n  private truncatedHeight: number = 0;\n  private truncWrapperEl: Element;\n\n  @Element() el: HTMLIcTypographyElement;\n\n  @State() truncated: boolean = false;\n  @State() truncButtonFocussed: boolean = false;\n\n  /**\n   * If `true`, appropriate top and bottom margins will be applied to the typography.\n   */\n  @Prop() applyVerticalMargins?: boolean = false;\n\n  /**\n   * If `true`, the typography will have a bold font weight.\n   * Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).\n   */\n  @Prop() bold?: boolean = false;\n\n  /**\n   * If `true`, the typography will have an italic font style.\n   */\n  @Prop() italic?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text, only used for the 'body' variant.\n   */\n  @Prop({ mutable: true }) maxLines?: number;\n\n  /**\n   * If `true`, the typography will have a line through it.\n   */\n  @Prop() strikethrough?: boolean = false;\n\n  /**\n   * Sets the text color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * If `true`, the typography will have a line under it.\n   */\n  @Prop() underline?: boolean = false;\n\n  /**\n   * The ICDS typography style to use.\n   */\n  @Prop() variant?: IcTypographyVariants = \"body\";\n\n  /**\n   * @internal Emits and event when the typography truncation button has been clicked.\n   */\n  @Event() typographyTruncationExpandToggle: EventEmitter<{\n    expanded: boolean;\n    typographyEl: HTMLIcTypographyElement;\n  }>;\n\n  @State() expanded: boolean = false;\n\n  @Watch(\"expanded\")\n  watchExpandedHandler(): void {\n    this.el.setAttribute(\n      \"style\",\n      `--truncation-max-lines: ${this.expanded ? \"initial\" : this.maxLines}`\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n  /**\n   * @internal This is used by data table to remove all truncation in certain events\n   */\n  @Method()\n  async resetTruncation() {\n    if (this.truncated) {\n      this.truncated = false;\n      this.maxLines = 0;\n      this.el.removeAttribute(\"max-lines\");\n      this.expanded = false;\n      this.el.removeAttribute(\"style\");\n    }\n  }\n\n  componentDidLoad(): void {\n    if (\n      (this.variant === \"body\" ||\n        (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n          \"IC-TOOLTIP\") &&\n      this.maxLines > 0\n    ) {\n      const marker = document.createElement(\"span\");\n      marker.style.visibility = \"hidden\";\n      this.el.appendChild(marker);\n      this.marker = marker;\n      this.lastWidth = this.el.clientWidth;\n      this.checkMaxLines(this.el.clientHeight);\n      checkResizeObserver(this.runResizeObserver);\n    }\n  }\n\n  componentWillRender(): void {\n    if (isElInAGGrid(this.el)) {\n      this.inAGGrid = true;\n    }\n  }\n\n  private toggleExpanded = (ev: Event) => {\n    ev.stopPropagation();\n\n    this.expanded = !this.expanded;\n    this.typographyTruncationExpandToggle.emit({\n      expanded: this.expanded,\n      typographyEl: this.el,\n    });\n  };\n\n  /**\n   * @internal This checks if the number of lines of text exceeds the maxLines prop. If so, set the line clamp CSS to the max lines\n   * @param height - text container height\n   */\n\n  @Method()\n  async checkMaxLines(height: number) {\n    //24 is the height of a single line\n    const numLines = Math.floor(height / 24);\n    if (numLines > this.maxLines) {\n      this.el.setAttribute(\"style\", `--truncation-max-lines: ${this.maxLines}`);\n      this.truncatedHeight = this.el.clientHeight;\n      this.truncated = true;\n    }\n  }\n\n  /**\n   * @internal This method makes it possible to set the expanded status of truncated text outside of ic-typography component\n   */\n  @Method()\n  async setShowHideExpanded(expanded: boolean) {\n    this.expanded = expanded;\n  }\n\n  private checkMarkerPosition = (elTop: number, markerTop: number) => {\n    if (markerTop - elTop < this.truncatedHeight) {\n      this.truncated = false;\n      this.expanded = false;\n    } else {\n      this.truncated = true;\n    }\n  };\n\n  private getElementTop = (el: HTMLElement) => {\n    return el.getClientRects ? el.getClientRects()[0].top : 0;\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      clearTimeout(this.resizeInterval);\n      this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);\n    });\n    this.resizeObserver.observe(this.truncWrapperEl);\n  };\n\n  private resizeObserverCallback = () => {\n    if (this.lastWidth === this.el.clientWidth) {\n      return;\n    }\n\n    if (this.truncatedHeight === 0) {\n      this.checkMaxLines(this.el.clientHeight);\n      return;\n    }\n\n    const markerTop = this.getElementTop(this.marker);\n    if (markerTop === this.lastMarkerTop) {\n      return;\n    }\n\n    this.checkMarkerPosition(this.getElementTop(this.el), markerTop);\n    this.lastMarkerTop = markerTop;\n    this.lastWidth = this.el.clientWidth;\n  };\n\n  private truncButtonFocus = (): void => {\n    if (this.focusBtnFromKeyboard) {\n      this.truncButtonFocussed = true;\n    }\n  };\n\n  private truncButtonBlur = (): void => {\n    this.focusBtnFromKeyboard = true;\n    this.truncButtonFocussed = false;\n  };\n\n  private truncButtonFocusFromMouse = (): void => {\n    this.focusBtnFromKeyboard = false;\n  };\n\n  render() {\n    const {\n      variant,\n      applyVerticalMargins,\n      maxLines,\n      truncated,\n      expanded,\n      strikethrough,\n      underline,\n      italic,\n      bold,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-typography-${variant}`]: true,\n          [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n          [\"ic-typography-bold\"]: bold,\n          [\"ic-typography-italic\"]: italic,\n          [\"ic-typography-strikethrough\"]: strikethrough,\n          [\"ic-typography-underline\"]: underline,\n          [\"in-ag-grid\"]: this.inAGGrid,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        {(variant === \"body\" ||\n          (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n            \"IC-TOOLTIP\") &&\n        maxLines > 0 ? (\n          <div class=\"trunc-wrapper\" ref={(el) => (this.truncWrapperEl = el)}>\n            <slot />\n          </div>\n        ) : (\n          <slot />\n        )}\n        {variant === \"body\" && maxLines > 0 && truncated && (\n          <button\n            class={{ \"trunc-btn\": true, focus: this.truncButtonFocussed }}\n            onFocus={this.truncButtonFocus}\n            onBlur={this.truncButtonBlur}\n            onMouseDown={this.truncButtonFocusFromMouse}\n            onClick={this.toggleExpanded}\n          >\n            {expanded ? \"See less\" : \"See more\"}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-typography.js","sourceRoot":"","sources":["../../../src/components/ic-typography/ic-typography.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  h,\n  Element,\n  Host,\n  State,\n  Watch,\n  Method,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport { IcTypographyVariants, IcThemeMode } from \"../../utils/types\";\nimport { checkResizeObserver, isElInAGGrid } from \"../../utils/helpers\";\n\n@Component({\n  styleUrl: \"ic-typography.css\",\n  tag: \"ic-typography\",\n  shadow: true,\n})\nexport class Typography {\n  private focusBtnFromKeyboard: boolean = true;\n  private inAGGrid: boolean = false;\n  private lastMarkerTop: number = 0;\n  private lastWidth: number = 0;\n  private marker: HTMLElement;\n  private resizeInterval: number;\n  private resizeObserver: ResizeObserver = null;\n  private truncatedHeight: number = 0;\n  private truncWrapperEl: Element;\n\n  @Element() el: HTMLIcTypographyElement;\n\n  @State() truncated: boolean = false;\n  @State() truncButtonFocussed: boolean = false;\n\n  /**\n   * If `true`, appropriate top and bottom margins will be applied to the typography.\n   */\n  @Prop() applyVerticalMargins?: boolean = false;\n\n  /**\n   * If `true`, the typography will have a bold font weight.\n   * Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).\n   */\n  @Prop() bold?: boolean = false;\n\n  /**\n   * If `true`, the typography will have an italic font style.\n   */\n  @Prop() italic?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text, only used for the 'body' variant.\n   */\n  @Prop({ mutable: true }) maxLines?: number;\n\n  /**\n   * If `true`, the typography will have a line through it.\n   */\n  @Prop() strikethrough?: boolean = false;\n\n  /**\n   * Sets the text color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * If `true`, the typography will have a line under it.\n   */\n  @Prop() underline?: boolean = false;\n\n  /**\n   * The ICDS typography style to use.\n   */\n  @Prop() variant?: IcTypographyVariants = \"body\";\n\n  /**\n   * @internal Emits and event when the typography truncation button has been clicked.\n   */\n  @Event() typographyTruncationExpandToggle: EventEmitter<{\n    expanded: boolean;\n    typographyEl: HTMLIcTypographyElement;\n  }>;\n\n  @State() expanded: boolean = false;\n\n  @Watch(\"expanded\")\n  watchExpandedHandler(): void {\n    this.el.setAttribute(\n      \"style\",\n      `--truncation-max-lines: ${this.expanded ? \"initial\" : this.maxLines}`\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n  /**\n   * @internal This is used by data table to remove all truncation in certain events\n   */\n  @Method()\n  async resetTruncation() {\n    if (this.truncated) {\n      this.truncated = false;\n      this.maxLines = 0;\n      this.el.removeAttribute(\"max-lines\");\n      this.expanded = false;\n      this.el.removeAttribute(\"style\");\n    }\n  }\n\n  componentDidLoad(): void {\n    if (\n      (this.variant === \"body\" ||\n        (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n          \"IC-TOOLTIP\") &&\n      this.maxLines > 0\n    ) {\n      const marker = document.createElement(\"span\");\n      marker.style.visibility = \"hidden\";\n      this.el.appendChild(marker);\n      this.marker = marker;\n      this.lastWidth = this.el.clientWidth;\n      this.checkMaxLines(this.el.clientHeight);\n      checkResizeObserver(this.runResizeObserver);\n    }\n  }\n\n  componentWillRender(): void {\n    if (isElInAGGrid(this.el)) {\n      this.inAGGrid = true;\n    }\n  }\n\n  private toggleExpanded = (ev: Event) => {\n    ev.stopPropagation();\n\n    this.expanded = !this.expanded;\n    this.typographyTruncationExpandToggle.emit({\n      expanded: this.expanded,\n      typographyEl: this.el,\n    });\n  };\n\n  /**\n   * @internal This checks if the number of lines of text exceeds the maxLines prop. If so, set the line clamp CSS to the max lines\n   * @param height - text container height\n   */\n\n  @Method()\n  async checkMaxLines(height: number) {\n    //24 is the height of a single line\n    const numLines = Math.floor(height / 24);\n    if (numLines > this.maxLines) {\n      this.el.setAttribute(\"style\", `--truncation-max-lines: ${this.maxLines}`);\n      this.truncatedHeight = this.el.clientHeight;\n      this.truncated = true;\n    }\n  }\n\n  /**\n   * @internal This method makes it possible to set the expanded status of truncated text outside of ic-typography component\n   */\n  @Method()\n  async setShowHideExpanded(expanded: boolean) {\n    this.expanded = expanded;\n  }\n\n  private checkMarkerPosition = (elTop: number, markerTop: number) => {\n    if (markerTop - elTop < this.truncatedHeight) {\n      this.truncated = false;\n      this.expanded = false;\n    } else {\n      this.truncated = true;\n    }\n  };\n\n  private getElementTop = (el: HTMLElement) => {\n    return el.getClientRects && el.getClientRects()[0]\n      ? el.getClientRects()[0].top\n      : 0;\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      clearTimeout(this.resizeInterval);\n      this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);\n    });\n    this.resizeObserver.observe(this.truncWrapperEl);\n  };\n\n  private resizeObserverCallback = () => {\n    if (this.lastWidth === this.el.clientWidth) {\n      return;\n    }\n\n    if (this.truncatedHeight === 0) {\n      this.checkMaxLines(this.el.clientHeight);\n      return;\n    }\n\n    const markerTop = this.getElementTop(this.marker);\n    if (markerTop === this.lastMarkerTop) {\n      return;\n    }\n\n    this.checkMarkerPosition(this.getElementTop(this.el), markerTop);\n    this.lastMarkerTop = markerTop;\n    this.lastWidth = this.el.clientWidth;\n  };\n\n  private truncButtonFocus = (): void => {\n    if (this.focusBtnFromKeyboard) {\n      this.truncButtonFocussed = true;\n    }\n  };\n\n  private truncButtonBlur = (): void => {\n    this.focusBtnFromKeyboard = true;\n    this.truncButtonFocussed = false;\n  };\n\n  private truncButtonFocusFromMouse = (): void => {\n    this.focusBtnFromKeyboard = false;\n  };\n\n  render() {\n    const {\n      variant,\n      applyVerticalMargins,\n      maxLines,\n      truncated,\n      expanded,\n      strikethrough,\n      underline,\n      italic,\n      bold,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-typography-${variant}`]: true,\n          [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n          [\"ic-typography-bold\"]: bold,\n          [\"ic-typography-italic\"]: italic,\n          [\"ic-typography-strikethrough\"]: strikethrough,\n          [\"ic-typography-underline\"]: underline,\n          [\"in-ag-grid\"]: this.inAGGrid,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        {(variant === \"body\" ||\n          (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n            \"IC-TOOLTIP\") &&\n        maxLines > 0 ? (\n          <div class=\"trunc-wrapper\" ref={(el) => (this.truncWrapperEl = el)}>\n            <slot />\n          </div>\n        ) : (\n          <slot />\n        )}\n        {variant === \"body\" && maxLines > 0 && truncated && (\n          <button\n            class={{ \"trunc-btn\": true, focus: this.truncButtonFocussed }}\n            onFocus={this.truncButtonFocus}\n            onBlur={this.truncButtonBlur}\n            onMouseDown={this.truncButtonFocusFromMouse}\n            onClick={this.toggleExpanded}\n          >\n            {expanded ? \"See less\" : \"See more\"}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}