@ukic/canary-web-components 2.0.0-canary.12 → 2.0.0-canary.13

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

@@ -1,217 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-beforeAll(() => {
-    jest.spyOn(console, "warn").mockImplementation(jest.fn());
-});
-const columnsWithNoTextWrap = `[
-  { key: "name", title: "Name", dataType: "string" },
-  { key: "age", title: "Age", dataType: "number" },
-  { key: "department", title: "Department", dataType: "string" },
-  { key: "employeeNumber", title: "Employee number", dataType: "number" },
-  { key: "jobTitle", title: "Job Title", dataType: "string"},
-]`;
-const columnsWithTextWrap = `[
-  { key: "name", title: "Name", dataType: "string" },
-  { key: "age", title: "Age", dataType: "number" },
-  { key: "department", title: "Department", dataType: "string" },
-  { key: "employeeNumber", title: "Employee number", dataType: "number" },
-  { key: "jobTitle", title: "Job Title", dataType: "string", textWrap: true },
-]`;
-const dataWithLongText = `[
-  {
-    name: "John Smith",
-    age: 36,
-    department: "Accounts & Finance",
-    employeeNumber: 1,
-    jobTitle: "Senior Financial Operations and Reporting Analyst",
-  },
-  {
-    name: "Sally Jones",
-    age: 32,
-    department: "Engineering",
-    employeeNumber: 2,
-    jobTitle:
-      "Senior Software Engineer, Site Reliability Engineering (Microsoft Azure)",
-  },
-  {
-    name: "Tim Rayes",
-    age: 41,
-    department: "Sales and Marketing",
-    employeeNumber: 3,
-    jobTitle:
-      "Regional Sales and Marketing Strategy Director (Europe, the Middle East, and Africa)",
-  },
-  {
-    name: "Luke Fisher",
-    age: "23",
-    department: "Engineering (Mobile App Development)",
-    employeeNumber: 4,
-    jobTitle: "Junior Tester",
-  },
-  {
-    name: "Jane Lock",
-    age: 34,
-    department: "Engineering",
-    employeeNumber: 5,
-    jobTitle: "Junior Product Manager",
-  },
-  {
-    name: "Margaret Hale",
-    age: 45,
-    department: "HR",
-    employeeNumber: 6,
-    jobTitle: "Junior Human Resource Information Specialist",
-  },
-]`;
-const dataWithLongTextAndTextWrap = `[
-  {
-    name: "John Smith",
-    age: 36,
-    department: "Accounts & Finance",
-    employeeNumber: 1,
-    jobTitle: "Senior Financial Operations and Reporting Analyst",
-  },
-  {
-    name: "Sally Jones",
-    age: 32,
-    department: "Engineering",
-    employeeNumber: 2,
-    jobTitle:
-      "Senior Software Engineer, Site Reliability Engineering (Microsoft Azure)",
-  },
-  {
-    name: "Tim Rayes",
-    age: 41,
-    department: "Sales and Marketing",
-    employeeNumber: 3,
-    jobTitle:
-      "Regional Sales and Marketing Strategy Director (Europe, the Middle East, and Africa)",
-    textWrap: true,
-  },
-  {
-    name: "Luke Fisher",
-    age: "23",
-    department: "Engineering (Mobile App Development)",
-    employeeNumber: 4,
-    jobTitle: "Junior Tester",
-  },
-  {
-    name: "Jane Lock",
-    age: 34,
-    department: "Engineering",
-    employeeNumber: 5,
-    jobTitle: "Junior Product Manager",
-  },
-  {
-    name: "Margaret Hale",
-    age: 45,
-    department: "HR",
-    employeeNumber: 6,
-    jobTitle: "Junior Human Resource Information Specialist",
-  },
-]`;
-const getDataTableContent = (attributes, rowHeight, cols = columnsWithNoTextWrap, data = dataWithLongText) => `
-  <ic-data-table caption="test-table"${attributes}></ic-data-table>
-  <script>
-    const dataTable = document.querySelector("ic-data-table");
-    dataTable.columns = ${cols};
-    dataTable.data = ${data};${rowHeight ? `\ndataTable.globalRowHeight = ${rowHeight};` : ""}
-  </script>
-`;
-describe("ic-data-table", () => {
-    describe("truncation & textWrap", () => {
-        it("should truncate, add a line clamp and wrap with a tooltip the cell typography if it is too long to fit into the cell container", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getDataTableContent());
-            await page.waitForChanges();
-            const { tagName, divStyles, longCellTypographyLineClamp } = await page.evaluate(() => {
-                const longCellTypography = document
-                    .querySelector("ic-data-table")
-                    .shadowRoot.querySelector("#jobTitle-2");
-                const parentEl = longCellTypography.parentElement;
-                const { height, overflowY } = window.getComputedStyle(parentEl.parentElement);
-                return {
-                    tagName: parentEl.tagName,
-                    divStyles: {
-                        height,
-                        overflowY,
-                    },
-                    longCellTypographyLineClamp: window.getComputedStyle(longCellTypography).webkitLineClamp,
-                };
-            });
-            expect(longCellTypographyLineClamp).toBe("1");
-            expect(tagName).toBe("IC-TOOLTIP");
-            expect(divStyles).toMatchObject({
-                height: "24px",
-                overflowY: "hidden",
-            });
-        });
-        it("should truncate using ic-typography's see more/see less button when truncationPattern is set to `showHide`", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getDataTableContent(' truncation-pattern="showHide"'));
-            await page.waitForChanges();
-            const { maxLinesProp, hasButton } = await page.evaluate(() => {
-                const typographyEl = document
-                    .querySelector("ic-data-table")
-                    .shadowRoot.querySelector("#jobTitle-1");
-                return {
-                    maxLinesProp: typographyEl.maxLines,
-                    hasButton: !!typographyEl.shadowRoot.querySelector("button"),
-                };
-            });
-            expect(maxLinesProp).toBe(1);
-            expect(hasButton).toBeTruthy();
-        });
-        it("should remove the fixed height of a column's cells when 'text-wrap' is set on the column", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getDataTableContent("", null, columnsWithTextWrap));
-            await page.waitForChanges();
-            (await page.evaluate(() => [0, 1, 2, 3, 4, 5].map((i) => document
-                .querySelector("ic-data-table")
-                .shadowRoot.querySelector(`#jobTitle-${i}`).parentElement.style["height"]))).forEach((height) => expect(height).toBe(""));
-        });
-        it("should remove the fixed height of a row's cells when 'text-wrap' is set on the row", async () => {
-            const page = await newE2EPage();
-            await page.setViewport({ width: 1626, height: 517 });
-            await page.setContent(getDataTableContent("", null, columnsWithNoTextWrap, dataWithLongTextAndTextWrap));
-            await page.waitForChanges();
-            const getRowHeight = async (rowIndex) => await page.evaluate((rowIndex) => ["name", "age", "department", "employeeNumber", "jobTitle"].map((key) => document
-                .querySelector("ic-data-table")
-                .shadowRoot.querySelector(`#${key}-${rowIndex}`).parentElement
-                .style["height"]), rowIndex);
-            (await getRowHeight(2)).forEach((height) => expect(height).toBe("")); //Row with textWrap
-            (await getRowHeight(4)).forEach((height) => expect(height).toBe("1.5rem"));
-        });
-        it("should truncate previously visible cell content when the row height changes to a smaller value", async () => {
-            const page = await newE2EPage();
-            await page.setViewport({ width: 1626, height: 517 });
-            await page.setContent(getDataTableContent("", 200, columnsWithNoTextWrap, dataWithLongText));
-            const getParentTagName = async () => await page.evaluate(() => document
-                .querySelector("ic-data-table")
-                .shadowRoot.querySelector("#jobTitle-1").parentElement.tagName);
-            expect(await getParentTagName()).toBe("DIV");
-            (await page.find("ic-data-table")).setProperty("globalRowHeight", 40);
-            await page.waitForChanges();
-            expect(await getParentTagName()).toBe("IC-TOOLTIP");
-            (await page.find("ic-data-table")).setProperty("globalRowHeight", 200);
-            await page.waitForChanges();
-            expect(await getParentTagName()).toBe("DIV");
-        });
-        it("should truncate previously visible cell content using `See more/See less` when the row height changes to a smaller value", async () => {
-            const page = await newE2EPage();
-            await page.setViewport({ width: 1626, height: 517 });
-            await page.setContent(getDataTableContent(' truncation-pattern="showHide"', 200, columnsWithNoTextWrap, dataWithLongText));
-            const getSeeMoreButton = async () => await page.evaluate(() => !!document
-                .querySelector("ic-data-table")
-                .shadowRoot.querySelector("#jobTitle-1")
-                .shadowRoot.querySelector("button"));
-            expect(await getSeeMoreButton()).toBeFalsy();
-            (await page.find("ic-data-table")).setProperty("globalRowHeight", 40);
-            await page.waitForChanges();
-            expect(await getSeeMoreButton()).toBeTruthy();
-            (await page.find("ic-data-table")).setProperty("globalRowHeight", 80);
-            await page.waitForChanges();
-            expect(await getSeeMoreButton()).toBeFalsy();
-        });
-    });
-});
-//# sourceMappingURL=ic-data-table.e2e.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ic-data-table.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-table/test/basic/ic-data-table.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\nconst columnsWithNoTextWrap = `[\n  { key: \"name\", title: \"Name\", dataType: \"string\" },\n  { key: \"age\", title: \"Age\", dataType: \"number\" },\n  { key: \"department\", title: \"Department\", dataType: \"string\" },\n  { key: \"employeeNumber\", title: \"Employee number\", dataType: \"number\" },\n  { key: \"jobTitle\", title: \"Job Title\", dataType: \"string\"},\n]`;\n\nconst columnsWithTextWrap = `[\n  { key: \"name\", title: \"Name\", dataType: \"string\" },\n  { key: \"age\", title: \"Age\", dataType: \"number\" },\n  { key: \"department\", title: \"Department\", dataType: \"string\" },\n  { key: \"employeeNumber\", title: \"Employee number\", dataType: \"number\" },\n  { key: \"jobTitle\", title: \"Job Title\", dataType: \"string\", textWrap: true },\n]`;\n\nconst dataWithLongText = `[\n  {\n    name: \"John Smith\",\n    age: 36,\n    department: \"Accounts & Finance\",\n    employeeNumber: 1,\n    jobTitle: \"Senior Financial Operations and Reporting Analyst\",\n  },\n  {\n    name: \"Sally Jones\",\n    age: 32,\n    department: \"Engineering\",\n    employeeNumber: 2,\n    jobTitle:\n      \"Senior Software Engineer, Site Reliability Engineering (Microsoft Azure)\",\n  },\n  {\n    name: \"Tim Rayes\",\n    age: 41,\n    department: \"Sales and Marketing\",\n    employeeNumber: 3,\n    jobTitle:\n      \"Regional Sales and Marketing Strategy Director (Europe, the Middle East, and Africa)\",\n  },\n  {\n    name: \"Luke Fisher\",\n    age: \"23\",\n    department: \"Engineering (Mobile App Development)\",\n    employeeNumber: 4,\n    jobTitle: \"Junior Tester\",\n  },\n  {\n    name: \"Jane Lock\",\n    age: 34,\n    department: \"Engineering\",\n    employeeNumber: 5,\n    jobTitle: \"Junior Product Manager\",\n  },\n  {\n    name: \"Margaret Hale\",\n    age: 45,\n    department: \"HR\",\n    employeeNumber: 6,\n    jobTitle: \"Junior Human Resource Information Specialist\",\n  },\n]`;\n\nconst dataWithLongTextAndTextWrap = `[\n  {\n    name: \"John Smith\",\n    age: 36,\n    department: \"Accounts & Finance\",\n    employeeNumber: 1,\n    jobTitle: \"Senior Financial Operations and Reporting Analyst\",\n  },\n  {\n    name: \"Sally Jones\",\n    age: 32,\n    department: \"Engineering\",\n    employeeNumber: 2,\n    jobTitle:\n      \"Senior Software Engineer, Site Reliability Engineering (Microsoft Azure)\",\n  },\n  {\n    name: \"Tim Rayes\",\n    age: 41,\n    department: \"Sales and Marketing\",\n    employeeNumber: 3,\n    jobTitle:\n      \"Regional Sales and Marketing Strategy Director (Europe, the Middle East, and Africa)\",\n    textWrap: true,\n  },\n  {\n    name: \"Luke Fisher\",\n    age: \"23\",\n    department: \"Engineering (Mobile App Development)\",\n    employeeNumber: 4,\n    jobTitle: \"Junior Tester\",\n  },\n  {\n    name: \"Jane Lock\",\n    age: 34,\n    department: \"Engineering\",\n    employeeNumber: 5,\n    jobTitle: \"Junior Product Manager\",\n  },\n  {\n    name: \"Margaret Hale\",\n    age: 45,\n    department: \"HR\",\n    employeeNumber: 6,\n    jobTitle: \"Junior Human Resource Information Specialist\",\n  },\n]`;\n\nconst getDataTableContent = (\n  attributes?: string,\n  rowHeight?: number,\n  cols = columnsWithNoTextWrap,\n  data = dataWithLongText\n) => `\n  <ic-data-table caption=\"test-table\"${attributes}></ic-data-table>\n  <script>\n    const dataTable = document.querySelector(\"ic-data-table\");\n    dataTable.columns = ${cols};\n    dataTable.data = ${data};${\n  rowHeight ? `\\ndataTable.globalRowHeight = ${rowHeight};` : \"\"\n}\n  </script>\n`;\n\ndescribe(\"ic-data-table\", () => {\n  describe(\"truncation & textWrap\", () => {\n    it(\"should truncate, add a line clamp and wrap with a tooltip the cell typography if it is too long to fit into the cell container\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(getDataTableContent());\n      await page.waitForChanges();\n\n      const { tagName, divStyles, longCellTypographyLineClamp } =\n        await page.evaluate(() => {\n          const longCellTypography = document\n            .querySelector(\"ic-data-table\")\n            .shadowRoot.querySelector(\"#jobTitle-2\");\n          const parentEl = longCellTypography.parentElement;\n          const { height, overflowY } = window.getComputedStyle(\n            parentEl.parentElement\n          );\n\n          return {\n            tagName: parentEl.tagName,\n            divStyles: {\n              height,\n              overflowY,\n            },\n            longCellTypographyLineClamp:\n              window.getComputedStyle(longCellTypography).webkitLineClamp,\n          };\n        });\n\n      expect(longCellTypographyLineClamp).toBe(\"1\");\n      expect(tagName).toBe(\"IC-TOOLTIP\");\n      expect(divStyles).toMatchObject({\n        height: \"24px\",\n        overflowY: \"hidden\",\n      });\n    });\n\n    it(\"should truncate using ic-typography's see more/see less button when truncationPattern is set to `showHide`\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(\n        getDataTableContent(' truncation-pattern=\"showHide\"')\n      );\n      await page.waitForChanges();\n\n      const { maxLinesProp, hasButton } = await page.evaluate(() => {\n        const typographyEl = document\n          .querySelector(\"ic-data-table\")\n          .shadowRoot.querySelector(\"#jobTitle-1\") as HTMLIcTypographyElement;\n        return {\n          maxLinesProp: typographyEl.maxLines,\n          hasButton: !!typographyEl.shadowRoot.querySelector(\"button\"),\n        };\n      });\n\n      expect(maxLinesProp).toBe(1);\n      expect(hasButton).toBeTruthy();\n    });\n\n    it(\"should remove the fixed height of a column's cells when 'text-wrap' is set on the column\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(getDataTableContent(\"\", null, columnsWithTextWrap));\n      await page.waitForChanges();\n\n      (\n        await page.evaluate(() =>\n          [0, 1, 2, 3, 4, 5].map(\n            (i) =>\n              document\n                .querySelector(\"ic-data-table\")\n                .shadowRoot.querySelector(`#jobTitle-${i}`).parentElement.style[\n                \"height\"\n              ]\n          )\n        )\n      ).forEach((height) => expect(height).toBe(\"\"));\n    });\n\n    it(\"should remove the fixed height of a row's cells when 'text-wrap' is set on the row\", async () => {\n      const page = await newE2EPage();\n      await page.setViewport({ width: 1626, height: 517 });\n      await page.setContent(\n        getDataTableContent(\n          \"\",\n          null,\n          columnsWithNoTextWrap,\n          dataWithLongTextAndTextWrap\n        )\n      );\n      await page.waitForChanges();\n\n      const getRowHeight = async (rowIndex: number) =>\n        await page.evaluate(\n          (rowIndex) =>\n            [\"name\", \"age\", \"department\", \"employeeNumber\", \"jobTitle\"].map(\n              (key) =>\n                document\n                  .querySelector(\"ic-data-table\")\n                  .shadowRoot.querySelector(`#${key}-${rowIndex}`).parentElement\n                  .style[\"height\"]\n            ),\n          rowIndex\n        );\n\n      (await getRowHeight(2)).forEach((height) => expect(height).toBe(\"\")); //Row with textWrap\n      (await getRowHeight(4)).forEach((height) =>\n        expect(height).toBe(\"1.5rem\")\n      );\n    });\n\n    it(\"should truncate previously visible cell content when the row height changes to a smaller value\", async () => {\n      const page = await newE2EPage();\n      await page.setViewport({ width: 1626, height: 517 });\n      await page.setContent(\n        getDataTableContent(\"\", 200, columnsWithNoTextWrap, dataWithLongText)\n      );\n\n      const getParentTagName = async () =>\n        await page.evaluate(\n          () =>\n            document\n              .querySelector(\"ic-data-table\")\n              .shadowRoot.querySelector(\"#jobTitle-1\").parentElement.tagName\n        );\n\n      expect(await getParentTagName()).toBe(\"DIV\");\n\n      (await page.find(\"ic-data-table\")).setProperty(\"globalRowHeight\", 40);\n      await page.waitForChanges();\n      expect(await getParentTagName()).toBe(\"IC-TOOLTIP\");\n\n      (await page.find(\"ic-data-table\")).setProperty(\"globalRowHeight\", 200);\n      await page.waitForChanges();\n      expect(await getParentTagName()).toBe(\"DIV\");\n    });\n\n    it(\"should truncate previously visible cell content using `See more/See less` when the row height changes to a smaller value\", async () => {\n      const page = await newE2EPage();\n      await page.setViewport({ width: 1626, height: 517 });\n      await page.setContent(\n        getDataTableContent(\n          ' truncation-pattern=\"showHide\"',\n          200,\n          columnsWithNoTextWrap,\n          dataWithLongText\n        )\n      );\n\n      const getSeeMoreButton = async () =>\n        await page.evaluate(\n          () =>\n            !!document\n              .querySelector(\"ic-data-table\")\n              .shadowRoot.querySelector(\"#jobTitle-1\")\n              .shadowRoot.querySelector(\"button\")\n        );\n\n      expect(await getSeeMoreButton()).toBeFalsy();\n\n      (await page.find(\"ic-data-table\")).setProperty(\"globalRowHeight\", 40);\n      await page.waitForChanges();\n      expect(await getSeeMoreButton()).toBeTruthy();\n\n      (await page.find(\"ic-data-table\")).setProperty(\"globalRowHeight\", 80);\n      await page.waitForChanges();\n      expect(await getSeeMoreButton()).toBeFalsy();\n    });\n  });\n});\n"]}

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.css

@@ -1,87 +0,0 @@
-.title-bar-wrapper,
-.header-container,
-.description-actions,
-.action-area,
-.custom-actions-wrapper {
-  display: flex;
-}
-
-.title-bar-wrapper,
-.action-area,
-.custom-actions-wrapper {
-  gap: var(--ic-space-xs);
-}
-
-.title-bar-wrapper {
-  flex-direction: column;
-  padding: var(--ic-space-sm) var(--ic-space-xs);
-  border-bottom: var(--ic-space-1px) solid var(--ic-architectural-300);
-}
-
-.full-width {
-  padding: var(--ic-space-sm) 0;
-  border-bottom: none;
-}
-
-ic-typography.ic-typography-subtitle-small {
-  color: var(--ic-color-tertiary-text);
-}
-
-ic-typography.ic-typography-h3,
-::slotted([slot="header"]) {
-  max-width: 800px;
-}
-
-ic-typography.ic-typography-body,
-::slotted([slot="description"]) {
-  color: var(--ic-color-secondary-text);
-}
-
-ic-typography.ic-typography-body,
-ic-typography.ic-typography-subtitle-small,
-::slotted([slot="description"]) {
-  max-width: 640px;
-}
-
-.density-input {
-  --input-width: 7.625rem;
-}
-
-@media screen and (max-width: 1200px) {
-  .header-container {
-    flex-direction: column;
-  }
-}
-
-@media screen and (min-width: 1201px) {
-  .header-container {
-    gap: var(--ic-space-xs);
-    align-items: baseline;
-  }
-}
-
-@media screen and (min-width: 769px) {
-  .description-actions {
-    justify-content: space-between;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .description-actions {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--ic-space-xs);
-  }
-}
-
-@media screen and (min-width: 577px) {
-  .action-area {
-    align-items: center;
-  }
-}
-
-@media screen and (max-width: 576px) {
-  .action-area {
-    flex-direction: column;
-  }
-}

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js

@@ -1,160 +0,0 @@
-import { h, } from "@stencil/core";
-import { isSlotUsed } from "../../utils/helpers";
-const DEFAULT_TITLE_BAR_HEADING = "Title Bar";
-/**
- * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.
- * @slot custom-actions - Render additional custom actions to the left of the density select.
- * @slot heading - The heading to render on the data table title bar.
- * @slot description - Render an alternative description in the description section.
- */
-export class DataTableTitleBar {
-    constructor() {
-        this.initialDensitySelectOption = "default";
-        this.isEmbedded = false;
-        this.changeDensity = (ev) => {
-            this.icTableDensityUpdate.emit({ value: ev.detail.value });
-        };
-        this.description = undefined;
-        this.heading = DEFAULT_TITLE_BAR_HEADING;
-        this.hideDensitySelect = false;
-        this.metadata = undefined;
-    }
-    componentWillLoad() {
-        const parentEl = this.el.parentElement;
-        if (parentEl.tagName === "IC-DATA-TABLE") {
-            const dataTable = parentEl;
-            this.initialDensitySelectOption = dataTable.density;
-            this.isEmbedded = dataTable.embedded;
-            if (this.heading === DEFAULT_TITLE_BAR_HEADING) {
-                this.heading = dataTable.caption;
-            }
-        }
-    }
-    render() {
-        const { changeDensity, description, el, heading, hideDensitySelect, initialDensitySelectOption, isEmbedded, metadata, } = this;
-        const showActionArea = isSlotUsed(el, "primary-action") ||
-            isSlotUsed(el, "custom-actions") ||
-            !hideDensitySelect;
-        const hasDescription = isSlotUsed(el, "description") || description;
-        return (h("div", { class: {
-                "title-bar-wrapper": true,
-                "full-width": isEmbedded,
-            } }, h("div", { class: "header-container" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3" }, heading)), metadata && (h("ic-typography", { variant: "subtitle-small" }, metadata))), (showActionArea || hasDescription) && (h("div", { class: "description-actions" }, h("slot", { name: "description" }, description && (h("ic-typography", { variant: "body" }, description))), showActionArea && (h("div", { class: "action-area" }, isSlotUsed(el, "custom-actions") && (h("div", { class: "custom-actions-wrapper" }, h("slot", { name: "custom-actions" }))), !hideDensitySelect && (h("ic-select", { small: true, label: "Change density", class: "density-input", hideLabel: true, options: [
-                { label: "Default", value: "default" },
-                { label: "Dense", value: "dense" },
-                { label: "Spacious", value: "spacious" },
-            ], value: initialDensitySelectOption, onIcChange: changeDensity })), isSlotUsed(el, "primary-action") && (h("slot", { name: "primary-action" }))))))));
-    }
-    static get is() { return "ic-data-table-title-bar"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ic-data-table-title-bar.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ic-data-table-title-bar.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot."
-                },
-                "attribute": "description",
-                "reflect": false
-            },
-            "heading": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The heading of the title bar. Can be overridden with the `heading` slot. If used with an ic-data-table it will default to the table's `caption` unless overridden."
-                },
-                "attribute": "heading",
-                "reflect": false,
-                "defaultValue": "DEFAULT_TITLE_BAR_HEADING"
-            },
-            "hideDensitySelect": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "When `true`, the density select will not be rendered."
-                },
-                "attribute": "hide-density-select",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "metadata": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The metadata displayed next to the `heading`."
-                },
-                "attribute": "metadata",
-                "reflect": false
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "icTableDensityUpdate",
-                "name": "icTableDensityUpdate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the table density select value is changed."
-                },
-                "complexType": {
-                    "original": "IcDensityUpdateEventDetail",
-                    "resolved": "IcDensityUpdateEventDetail",
-                    "references": {
-                        "IcDensityUpdateEventDetail": {
-                            "location": "import",
-                            "path": "../ic-data-table/ic-data-table.types",
-                            "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDensityUpdateEventDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=ic-data-table-title-bar.js.map

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ic-data-table-title-bar.js","sourceRoot":"","sources":["../../../src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,CAAC,GACF,MAAM,eAAe,CAAC;AAMvB,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,yBAAyB,GAAG,WAAW,CAAC;AAE9C;;;;;GAKG;AAMH,MAAM,OAAO,iBAAiB;;QACpB,+BAA0B,GAA8B,SAAS,CAAC;QAClE,eAAU,GAAY,KAAK,CAAC;QAyC5B,kBAAa,GAAG,CACtB,EAAmD,EACnD,EAAE;YACF,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC7D,CAAC,CAAC;;uBAjCyB,yBAAyB;iCAKd,KAAK;;;IAY3C,iBAAiB;QACf,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;QACvC,IAAI,QAAQ,CAAC,OAAO,KAAK,eAAe,EAAE;YACxC,MAAM,SAAS,GAAG,QAAkC,CAAC;YACrD,IAAI,CAAC,0BAA0B,GAAG,SAAS,CAAC,OAAO,CAAC;YACpD,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAC;YACrC,IAAI,IAAI,CAAC,OAAO,KAAK,yBAAyB,EAAE;gBAC9C,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC;aAClC;SACF;IACH,CAAC;IAQD,MAAM;QACJ,MAAM,EACJ,aAAa,EACb,WAAW,EACX,EAAE,EACF,OAAO,EACP,iBAAiB,EACjB,0BAA0B,EAC1B,UAAU,EACV,QAAQ,GACT,GAAG,IAAI,CAAC;QACT,MAAM,cAAc,GAClB,UAAU,CAAC,EAAE,EAAE,gBAAgB,CAAC;YAChC,UAAU,CAAC,EAAE,EAAE,gBAAgB,CAAC;YAChC,CAAC,iBAAiB,CAAC;QAErB,MAAM,cAAc,GAAG,UAAU,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,WAAW,CAAC;QACpE,OAAO,CACL,WACE,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,YAAY,EAAE,UAAU;aACzB;YAED,WAAK,KAAK,EAAC,kBAAkB;gBAC3B,YAAM,IAAI,EAAC,SAAS;oBAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD;gBACN,QAAQ,IAAI,CACX,qBAAe,OAAO,EAAC,gBAAgB,IAAE,QAAQ,CAAiB,CACnE,CACG;YACL,CAAC,cAAc,IAAI,cAAc,CAAC,IAAI,CACrC,WAAK,KAAK,EAAC,qBAAqB;gBAC9B,YAAM,IAAI,EAAC,aAAa,IACrB,WAAW,IAAI,CACd,qBAAe,OAAO,EAAC,MAAM,IAAE,WAAW,CAAiB,CAC5D,CACI;gBACN,cAAc,IAAI,CACjB,WAAK,KAAK,EAAC,aAAa;oBACrB,UAAU,CAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CACnC,WAAK,KAAK,EAAC,wBAAwB;wBACjC,YAAM,IAAI,EAAC,gBAAgB,GAAG,CAC1B,CACP;oBACA,CAAC,iBAAiB,IAAI,CACrB,iBACE,KAAK,QACL,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAC,eAAe,EACrB,SAAS,QACT,OAAO,EAAE;4BACP,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;4BACtC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;4BAClC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;yBACzC,EACD,KAAK,EAAE,0BAA0B,EACjC,UAAU,EAAE,aAAa,GACd,CACd;oBACA,UAAU,CAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CACnC,YAAM,IAAI,EAAC,gBAAgB,GAAG,CAC/B,CACG,CACP,CACG,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport { IcSelectCustomEvent } from \"@ukic/web-components/dist/types/interface\";\nimport {\n  IcDataTableDensityOptions,\n  IcDensityUpdateEventDetail,\n} from \"../ic-data-table/ic-data-table.types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nconst DEFAULT_TITLE_BAR_HEADING = \"Title Bar\";\n\n/**\n * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.\n * @slot custom-actions - Render additional custom actions to the left of the density select.\n * @slot heading - The heading to render on the data table title bar.\n * @slot description - Render an alternative description in the description section.\n */\n@Component({\n  tag: \"ic-data-table-title-bar\",\n  styleUrl: \"ic-data-table-title-bar.css\",\n  shadow: true,\n})\nexport class DataTableTitleBar {\n  private initialDensitySelectOption: IcDataTableDensityOptions = \"default\";\n  private isEmbedded: boolean = false;\n\n  @Element() el: HTMLIcDataTableTitleBarElement;\n\n  /**\n   * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.\n   */\n  @Prop() description?: string;\n\n  /**\n   * The heading of the title bar. Can be overridden with the `heading` slot. If used with an ic-data-table it will default to the table's `caption` unless overridden.\n   */\n  @Prop() heading?: string = DEFAULT_TITLE_BAR_HEADING;\n\n  /**\n   * When `true`, the density select will not be rendered.\n   */\n  @Prop() hideDensitySelect?: boolean = false;\n\n  /**\n   * The metadata displayed next to the `heading`.\n   */\n  @Prop() metadata?: string;\n\n  /**\n   * Emitted when the table density select value is changed.\n   */\n  @Event() icTableDensityUpdate: EventEmitter<IcDensityUpdateEventDetail>;\n\n  componentWillLoad(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl.tagName === \"IC-DATA-TABLE\") {\n      const dataTable = parentEl as HTMLIcDataTableElement;\n      this.initialDensitySelectOption = dataTable.density;\n      this.isEmbedded = dataTable.embedded;\n      if (this.heading === DEFAULT_TITLE_BAR_HEADING) {\n        this.heading = dataTable.caption;\n      }\n    }\n  }\n\n  private changeDensity = (\n    ev: IcSelectCustomEvent<IcDensityUpdateEventDetail>\n  ) => {\n    this.icTableDensityUpdate.emit({ value: ev.detail.value });\n  };\n\n  render() {\n    const {\n      changeDensity,\n      description,\n      el,\n      heading,\n      hideDensitySelect,\n      initialDensitySelectOption,\n      isEmbedded,\n      metadata,\n    } = this;\n    const showActionArea =\n      isSlotUsed(el, \"primary-action\") ||\n      isSlotUsed(el, \"custom-actions\") ||\n      !hideDensitySelect;\n\n    const hasDescription = isSlotUsed(el, \"description\") || description;\n    return (\n      <div\n        class={{\n          \"title-bar-wrapper\": true,\n          \"full-width\": isEmbedded,\n        }}\n      >\n        <div class=\"header-container\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\">{heading}</ic-typography>\n          </slot>\n          {metadata && (\n            <ic-typography variant=\"subtitle-small\">{metadata}</ic-typography>\n          )}\n        </div>\n        {(showActionArea || hasDescription) && (\n          <div class=\"description-actions\">\n            <slot name=\"description\">\n              {description && (\n                <ic-typography variant=\"body\">{description}</ic-typography>\n              )}\n            </slot>\n            {showActionArea && (\n              <div class=\"action-area\">\n                {isSlotUsed(el, \"custom-actions\") && (\n                  <div class=\"custom-actions-wrapper\">\n                    <slot name=\"custom-actions\" />\n                  </div>\n                )}\n                {!hideDensitySelect && (\n                  <ic-select\n                    small\n                    label=\"Change density\"\n                    class=\"density-input\"\n                    hideLabel\n                    options={[\n                      { label: \"Default\", value: \"default\" },\n                      { label: \"Dense\", value: \"dense\" },\n                      { label: \"Spacious\", value: \"spacious\" },\n                    ]}\n                    value={initialDensitySelectOption}\n                    onIcChange={changeDensity}\n                  ></ic-select>\n                )}\n                {isSlotUsed(el, \"primary-action\") && (\n                  <slot name=\"primary-action\" />\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ic-data-table-title-bar.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,yGAAyG,CAC1G,CAAC;QACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-data-table-title-bar\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-data-table-title-bar heading=\"header\" description=\"desc\" metadata=\"meta\"></ic-data-table-title-bar>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.js

@@ -1,70 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { h } from "@stencil/core";
-import { DataTableTitleBar } from "../../ic-data-table-title-bar";
-beforeAll(() => {
-    jest.spyOn(console, "warn").mockImplementation(jest.fn());
-});
-describe("ic-data-table-title-bar", () => {
-    it("should render", async () => {
-        const page = await newSpecPage({
-            components: [DataTableTitleBar],
-            template: () => (h("ic-data-table-title-bar", { heading: "header" })),
-        });
-        expect(page.root).toMatchSnapshot();
-    });
-    it("should render with description and metadata", async () => {
-        const page = await newSpecPage({
-            components: [DataTableTitleBar],
-            template: () => (h("ic-data-table-title-bar", { heading: "header", metadata: "metadata", description: "desc" })),
-        });
-        expect(page.root).toMatchSnapshot();
-    });
-    it("should render with slotted actions", async () => {
-        const page = await newSpecPage({
-            components: [DataTableTitleBar],
-            template: () => (h("ic-data-table-title-bar", { heading: "header" }, h("ic-button", { slot: "primary-action" }, "1"), h("ic-button", { slot: "custom-actions" }, "2"), h("ic-button", { slot: "custom-actions" }, "3"))),
-        });
-        expect(page.root).toMatchSnapshot();
-    });
-    it("should render with slotted header and description", async () => {
-        const page = await newSpecPage({
-            components: [DataTableTitleBar],
-            template: () => (h("ic-data-table-title-bar", null, h("ic-typography", { slot: "heading" }, "slotted header"), h("ic-typography", { slot: "description" }, "slotted desc"))),
-        });
-        expect(page.root).toMatchSnapshot();
-    });
-    it("should not render the actions area if hideDensitySelect is true and there are no slotted elements", async () => {
-        const page = await newSpecPage({
-            components: [DataTableTitleBar],
-            template: () => (h("ic-data-table-title-bar", { heading: "header", hideDensitySelect: true })),
-        });
-        expect(page.root).toMatchSnapshot();
-    });
-    it("should render the description area if the description is slotted and there is no action area", async () => {
-        const page = await newSpecPage({
-            components: [DataTableTitleBar],
-            template: () => (h("ic-data-table-title-bar", { heading: "header", hideDensitySelect: true }, h("ic-typography", { slot: "description" }, "slotted desc"))),
-        });
-        expect(page.root).toMatchSnapshot();
-    });
-    it("should emit the icTableDensityUpdate when the density select is updated", async () => {
-        const page = await newSpecPage({
-            components: [DataTableTitleBar],
-            template: () => (h("ic-data-table-title-bar", { heading: "header" })),
-        });
-        const eventSpy = jest.fn();
-        page.root.addEventListener("icTableDensityUpdate", eventSpy);
-        const icChange = new CustomEvent("icChange", {
-            detail: { value: "dense" },
-        });
-        const icSelect = page.root.shadowRoot.querySelector("ic-select");
-        icSelect.dispatchEvent(icChange);
-        await page.waitForChanges();
-        expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
-            detail: expect.objectContaining({
-                value: "dense",
-            }),
-        }));
-    });
-});
-//# sourceMappingURL=ic-data-table-title-bar.spec.js.map

package/dist/collection/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ic-data-table-title-bar.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { h } from \"@stencil/core\";\nimport { DataTableTitleBar } from \"../../ic-data-table-title-bar\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-data-table-title-bar\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar heading=\"header\"></ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with description and metadata\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar\n          heading=\"header\"\n          metadata=\"metadata\"\n          description=\"desc\"\n        ></ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with slotted actions\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar heading=\"header\">\n          <ic-button slot=\"primary-action\">1</ic-button>\n          <ic-button slot=\"custom-actions\">2</ic-button>\n          <ic-button slot=\"custom-actions\">3</ic-button>\n        </ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with slotted header and description\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar>\n          <ic-typography slot=\"heading\">slotted header</ic-typography>\n          <ic-typography slot=\"description\">slotted desc</ic-typography>\n        </ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should not render the actions area if hideDensitySelect is true and there are no slotted elements\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar\n          heading=\"header\"\n          hideDensitySelect={true}\n        ></ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render the description area if the description is slotted and there is no action area\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar heading=\"header\" hideDensitySelect={true}>\n          <ic-typography slot=\"description\">slotted desc</ic-typography>\n        </ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should emit the icTableDensityUpdate when the density select is updated\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar heading=\"header\"></ic-data-table-title-bar>\n      ),\n    });\n\n    const eventSpy = jest.fn();\n    page.root.addEventListener(\"icTableDensityUpdate\", eventSpy);\n\n    const icChange = new CustomEvent(\"icChange\", {\n      detail: { value: \"dense\" },\n    });\n    const icSelect = page.root.shadowRoot.querySelector(\"ic-select\");\n    icSelect.dispatchEvent(icChange);\n\n    await page.waitForChanges();\n    expect(eventSpy).toHaveBeenCalledWith(\n      expect.objectContaining({\n        detail: expect.objectContaining({\n          value: \"dense\",\n        }),\n      })\n    );\n  });\n});\n"]}