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

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

@@ -0,0 +1,87 @@
+.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

@@ -0,0 +1,160 @@
+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

@@ -0,0 +1 @@
+{"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":"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","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-date-picker/test/a11y/ic-date-picker.test.a11y.js → ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.js}

@@ -1,13 +1,11 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
 import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
-describe("ic-date-picker", () => {
+describe("ic-data-table-title-bar", () => {
     it("passes accessibility", async () => {
-        const el = await fixture(`
-    <ic-date-picker label="Date picker label"></ic-date-picker>
-    `);
+        const el = await fixture(`<ic-data-table-title-bar heading="header" description="desc" metadata="meta"></ic-data-table-title-bar>`);
         checkShadowElementRendersCorrectly(el);
         expect(await axe(el)).toHaveNoViolations();
     });
 });
-//# sourceMappingURL=ic-date-picker.test.a11y.js.map
+//# sourceMappingURL=ic-data-table-title-bar.test.a11y.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1 @@
+{"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"]}

package/dist/collection/components/ic-menu-with-multi/ic-menu.js

@@ -1058,8 +1058,8 @@ export class Menu {
                     "references": {
                         "IcSizes": {
                             "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcSizes"
+                            "path": "@ukic/web-components/dist/types/utils/types",
+                            "id": "../web-components/dist/types/utils/types.d.ts::IcSizes"
                         }
                     }
                 },