@ukic/web-components 2.0.0-alpha.121

package/dist/collection/components/ic-back-to-top/ic-back-to-top.test.a11y.js

@@ -0,0 +1,28 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+beforeEach(() => {
+  // IntersectionObserver isn't available in test environment
+  const mockIntersectionObserver = jest.fn();
+  mockIntersectionObserver.mockReturnValue({
+    observe: jest.fn().mockReturnValue(null),
+    unobserve: jest.fn().mockReturnValue(null),
+    disconnect: jest.fn().mockReturnValue(null),
+  });
+  window.IntersectionObserver = mockIntersectionObserver;
+});
+describe("ic-back-to-top", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`
+      <div>
+        <div id="topEl" style="margin-top:-20px;">
+          <ic-typography variant="h2">Top of the page</ic-typography>
+        </div>
+        <div style="height:1000px;"></div>
+        <ic-back-to-top target="topEl"></ic-back-to-top>
+      </div>`);
+    const backToTop = el.lastElementChild;
+    expect(backToTop.shadowRoot.innerHTML).not.toBe("");
+    expect(await axe(backToTop)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-back-to-top.test.a11y.js.map

package/dist/collection/components/ic-back-to-top/ic-back-to-top.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-back-to-top.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,wBAAwB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EAC3C,wBAAwB,CAAC,eAAe,CAAC;IACvC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,oBAAoB,GAAG,wBAAwB,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;aAOhB,CAAC,CAAC;IACX,MAAM,SAAS,GAAG,EAAE,CAAC,gBAA2B,CAAC;IACjD,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACpD,MAAM,CAAC,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EACpD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockIntersectionObserver = jest.fn();\n  mockIntersectionObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.IntersectionObserver = mockIntersectionObserver;\n});\n\ndescribe(\"ic-back-to-top\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`\n      <div>\n        <div id=\"topEl\" style=\"margin-top:-20px;\">\n          <ic-typography variant=\"h2\">Top of the page</ic-typography>\n        </div>\n        <div style=\"height:1000px;\"></div>\n        <ic-back-to-top target=\"topEl\"></ic-back-to-top>\n      </div>`);\n    const backToTop = el.lastElementChild as Element;\n    expect(backToTop.shadowRoot.innerHTML).not.toBe(\"\");\n    expect(await axe(backToTop)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -0,0 +1,80 @@
+:host {
+  display: block;
+  margin-right: var(--ic-space-xs);
+  margin-bottom: var(--ic-space-xs);
+}
+
+:host .breadcrumb {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: var(--ic-space-xs);
+  min-height: var(--ic-space-lg);
+}
+
+:host .chevron {
+  width: var(--ic-space-lg);
+  height: var(--ic-space-lg);
+}
+
+:host .chevron svg {
+  color: var(--ic-architectural-400);
+}
+
+:host(:first-child) .chevron {
+  display: none;
+}
+
+.back-icon svg {
+  color: var(--ic-hyperlink);
+}
+
+:host(.back) {
+  display: flex;
+  align-items: center;
+}
+
+:host(.back) .chevron {
+  display: none;
+}
+
+ic-link {
+  --breadcrumb-link-display: flex;
+  --breadcrumb-link-align-items: center;
+  --breadcrumb-link-gap: var(--ic-space-xs);
+}
+
+:host([aria-current="page"]) .current-page-container {
+  display: flex;
+  align-items: center;
+  gap: var(--ic-space-xs);
+}
+
+:host(.collapsed-breadcrumb-wrapper) {
+  margin-right: var(--ic-space-xs) !important;
+  display: flex;
+  align-items: center;
+  gap: var(--ic-space-xs);
+}
+
+:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb) {
+  border: none;
+  background-color: transparent;
+  color: var(--ic-hyperlink);
+  text-decoration: underline;
+  font-weight: var(--ic-font-weight-bold);
+  cursor: pointer;
+}
+
+:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),
+:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {
+  outline: none;
+  text-decoration-line: underline;
+  text-decoration-thickness: 25%;
+  text-underline-offset: 25%;
+}
+
+.hide,
+:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {
+  display: none;
+}

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

@@ -0,0 +1,136 @@
+import { Host, h } from "@stencil/core";
+import chevronIcon from "../../assets/chevron-icon.svg";
+import backIcon from "../../assets/back-icon.svg";
+import { isSlotUsed } from "../../utils/helpers";
+export class Breadcrumb {
+  constructor() {
+    this.renderDefaultBreadcrumb = (current, pageTitle, describedById, href) => {
+      const hasPageTitle = pageTitle !== null && pageTitle !== undefined && pageTitle !== "";
+      if (current && hasPageTitle) {
+        return (h("span", { class: {
+            "current-page-container": current,
+          } }, isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle));
+      }
+      return (h("ic-link", { href: href, class: "breadcrumb-link", "aria-describedby": this.showBackIcon && describedById && describedById }, this.showBackIcon && (h("div", { class: "back-icon", innerHTML: backIcon })), isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle));
+    };
+    this.setSlottedCurrentPageClass = () => {
+      const icLink = this.el.querySelector("ic-link");
+      if (icLink) {
+        icLink.classList.remove("current-page");
+        if (this.current) {
+          const hasCurrentPageClass = icLink.classList.contains("current-page");
+          if (!hasCurrentPageClass) {
+            icLink.classList.add("breadcrumb-link", "current-page");
+          }
+        }
+      }
+    };
+    this.pageTitle = undefined;
+    this.href = undefined;
+    this.current = false;
+    this.showBackIcon = false;
+  }
+  componentWillRender() {
+    this.setSlottedCurrentPageClass();
+  }
+  render() {
+    const { current, href, pageTitle } = this;
+    const describedById = `${pageTitle && pageTitle.toLowerCase().replace(" ", "-")}-describedby`;
+    const hasPageTitle = pageTitle !== null && pageTitle !== undefined && pageTitle !== "";
+    const hasHref = href !== null && href !== undefined && href !== "";
+    return (h(Host, { class: {
+        back: this.showBackIcon,
+      }, "aria-current": current && "page", role: "listitem" }, h("div", { class: "breadcrumb" }, h("span", { innerHTML: chevronIcon, class: "chevron", "aria-hidden": "true" }), this.showBackIcon && describedById && (h("span", { id: describedById, class: "hide" }, `Back to ${pageTitle}`)), hasPageTitle && hasHref ? (this.renderDefaultBreadcrumb(current, pageTitle, describedById, href)) : (h("slot", null)))));
+  }
+  static get is() { return "ic-breadcrumb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-breadcrumb.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-breadcrumb.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "pageTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set breadcrumb title"
+        },
+        "attribute": "page-title",
+        "reflect": false
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set breadcrumb location"
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "current": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If true, aria-current will be set on the breadcrumb"
+        },
+        "attribute": "current",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showBackIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "If true, display back icon"
+            }],
+          "text": ""
+        },
+        "attribute": "show-back-icon",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=ic-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumb.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-breadcrumb\",\n  styleUrl: \"ic-breadcrumb.css\",\n  shadow: true,\n})\nexport class Breadcrumb {\n  /**\n   * @slot icon - Content will be rendered to the left of the breadcrumb page title\n   */\n\n  @Element() el: HTMLIcBreadcrumbElement;\n  /**\n   * Set breadcrumb title\n   */\n  @Prop() pageTitle!: string;\n  /**\n   * Set breadcrumb location\n   */\n  @Prop() href?: string;\n  /**\n   * If true, aria-current will be set on the breadcrumb\n   */\n  @Prop() current?: boolean = false;\n\n  /**\n   * @internal If true, display back icon\n   */\n  @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n  private renderDefaultBreadcrumb = (\n    current: boolean,\n    pageTitle: string,\n    describedById: string,\n    href: string\n  ): IcBreadcrumbDefault => {\n    const hasPageTitle =\n      pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n\n    if (current && hasPageTitle) {\n      return (\n        <span\n          class={{\n            \"current-page-container\": current,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n          {pageTitle}\n        </span>\n      );\n    }\n\n    return (\n      <ic-link\n        href={href}\n        class=\"breadcrumb-link\"\n        aria-describedby={this.showBackIcon && describedById && describedById}\n      >\n        {this.showBackIcon && (\n          <div class=\"back-icon\" innerHTML={backIcon}></div>\n        )}\n        {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n        {pageTitle}\n      </ic-link>\n    );\n  };\n\n  private setSlottedCurrentPageClass = () => {\n    const icLink = this.el.querySelector(\"ic-link\");\n    if (icLink) {\n      icLink.classList.remove(\"current-page\");\n      if (this.current) {\n        const hasCurrentPageClass = icLink.classList.contains(\"current-page\");\n        if (!hasCurrentPageClass) {\n          icLink.classList.add(\"breadcrumb-link\", \"current-page\");\n        }\n      }\n    }\n  };\n\n  componentWillRender(): void {\n    this.setSlottedCurrentPageClass();\n  }\n\n  render() {\n    const { current, href, pageTitle } = this;\n    const describedById = `${\n      pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n    }-describedby`;\n\n    const hasPageTitle =\n      pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n    const hasHref = href !== null && href !== undefined && href !== \"\";\n\n    return (\n      <Host\n        class={{\n          back: this.showBackIcon,\n        }}\n        aria-current={current && \"page\"}\n        role=\"listitem\"\n      >\n        <div class=\"breadcrumb\">\n          <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n          {this.showBackIcon && describedById && (\n            <span\n              id={describedById}\n              class=\"hide\"\n            >{`Back to ${pageTitle}`}</span>\n          )}\n          {hasPageTitle && hasHref ? (\n            this.renderDefaultBreadcrumb(\n              current,\n              pageTitle,\n              describedById,\n              href\n            )\n          ) : (\n            <slot />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-breadcrumb.types.js.map

package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumb.types.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb/ic-breadcrumb.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcBreadcrumbDefault = string | HTMLIcLinkElement | null;\n"]}

package/dist/collection/components/ic-breadcrumbs/ic-breadcrumbs-test-examples.js

@@ -0,0 +1,35 @@
+export const icBreadcrumbsCollapsed = `
+  <ic-breadcrumbs collapsed="true">
+  <ic-breadcrumb
+    page-title="Breadcrumb 1"
+    href="/breadcrumb-1"
+  ></ic-breadcrumb>
+  <ic-breadcrumb
+    page-title="Breadcrumb 2"
+    href="/breadcrumb-2"
+  ></ic-breadcrumb>
+  <ic-breadcrumb
+    current="page"
+    page-title="Breadcrumb 3"
+    href="/breadcrumb-3"
+  ></ic-breadcrumb>
+  </ic-breadcrumbs>
+`;
+export const icBreadcrumbsBack = `
+  <ic-breadcrumbs back-breadcrumb-only="true">
+  <ic-breadcrumb
+    page-title="Breadcrumb 1"
+    href="/breadcrumb-1"
+  ></ic-breadcrumb>
+  <ic-breadcrumb
+    page-title="Breadcrumb 2"
+    href="/breadcrumb-2"
+  ></ic-breadcrumb>
+  <ic-breadcrumb
+    current="page"
+    page-title="Breadcrumb 3"
+    href="/breadcrumb-3"
+  ></ic-breadcrumb>
+  </ic-breadcrumbs>
+`;
+//# sourceMappingURL=ic-breadcrumbs-test-examples.js.map

package/dist/collection/components/ic-breadcrumbs/ic-breadcrumbs-test-examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumbs-test-examples.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumbs/ic-breadcrumbs-test-examples.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG;;;;;;;;;;;;;;;;CAgBrC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;CAgBhC,CAAC","sourcesContent":["export const icBreadcrumbsCollapsed = `\n  <ic-breadcrumbs collapsed=\"true\">\n  <ic-breadcrumb\n    page-title=\"Breadcrumb 1\"\n    href=\"/breadcrumb-1\"\n  ></ic-breadcrumb>\n  <ic-breadcrumb\n    page-title=\"Breadcrumb 2\"\n    href=\"/breadcrumb-2\"\n  ></ic-breadcrumb>\n  <ic-breadcrumb\n    current=\"page\"\n    page-title=\"Breadcrumb 3\"\n    href=\"/breadcrumb-3\"\n  ></ic-breadcrumb>\n  </ic-breadcrumbs>\n`;\n\nexport const icBreadcrumbsBack = `\n  <ic-breadcrumbs back-breadcrumb-only=\"true\">\n  <ic-breadcrumb\n    page-title=\"Breadcrumb 1\"\n    href=\"/breadcrumb-1\"\n  ></ic-breadcrumb>\n  <ic-breadcrumb\n    page-title=\"Breadcrumb 2\"\n    href=\"/breadcrumb-2\"\n  ></ic-breadcrumb>\n  <ic-breadcrumb\n    current=\"page\"\n    page-title=\"Breadcrumb 3\"\n    href=\"/breadcrumb-3\"\n  ></ic-breadcrumb>\n  </ic-breadcrumbs>\n`;\n"]}

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

@@ -0,0 +1,35 @@
+:host {
+  display: block;
+}
+
+:host ol {
+  display: flex;
+  list-style-type: none;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0;
+}
+
+:host(.back) ol ::slotted(ic-breadcrumb) {
+  display: none;
+}
+
+:host(.back) ol ::slotted(ic-breadcrumb.show) {
+  display: flex;
+}
+
+:host(.collapsed) ol ::slotted(ic-breadcrumb.hide) {
+  display: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
+:host(.collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden) {
+  display: block;
+  opacity: 0;
+  transition: all var(--ic-easing-transition-slow);
+}
+
+:host(.collapsed) ol ::slotted(ic-breadcrumb.fade) {
+  opacity: 1;
+}

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

@@ -0,0 +1,228 @@
+import { Host, h } from "@stencil/core";
+import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, } from "../../utils/helpers";
+// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.
+export class Breadcrumbs {
+  constructor() {
+    this.ADD_CLASS_DELAY = 50;
+    this.setBackBreadcrumb = () => {
+      if (this.backBreadcrumbOnly) {
+        this.setBackBreadcrumbAttr();
+      }
+    };
+    this.setBackBreadcrumbAttr = () => {
+      const lastParentBreadcrumb = this.getLastParentBreadcrumb();
+      if (lastParentBreadcrumb) {
+        lastParentBreadcrumb.classList.add("show");
+        lastParentBreadcrumb.setAttribute("show-back-icon", "true");
+      }
+    };
+    this.getLastParentBreadcrumb = () => {
+      const allBreadcrumbs = Array.from(this.el.querySelectorAll("ic-breadcrumb"));
+      if (allBreadcrumbs.length === 1) {
+        return null;
+      }
+      this.breadcrumbs = allBreadcrumbs.filter((breadcrumb) => !breadcrumb.getAttribute("current"));
+      this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];
+      return this.breadcrumb;
+    };
+    this.setDefaultBreadcrumbs = () => {
+      const allBreadcrumbs = Array.from(this.el.querySelectorAll("ic-breadcrumb"));
+      allBreadcrumbs.forEach((breadcrumb) => {
+        breadcrumb.setAttribute("show-back-icon", "false");
+      });
+    };
+    this.setCollapsed = () => {
+      if (this.collapsed) {
+        const allBreadcrumbs = Array.from(this.el.querySelectorAll("ic-breadcrumb"));
+        this.collapsedBreadcrumbs = allBreadcrumbs
+          .splice(1, allBreadcrumbs.length - 2)
+          .filter((breadcrumb) => !breadcrumb.classList.contains("collapsed-breadcrumb-wrapper"));
+        this.collapsedBreadcrumbs.forEach((breadcrumb) => breadcrumb.classList.add("hide"));
+        const firstBreadcrumb = allBreadcrumbs[0];
+        if (firstBreadcrumb) {
+          firstBreadcrumb.insertAdjacentElement("afterend", this.collapsedBreadcrumbWrapper);
+        }
+      }
+    };
+    this.renderCollapsedBreadcrumb = () => {
+      this.collapsedBreadcrumbWrapper = document.createElement("ic-breadcrumb");
+      this.collapsedBreadcrumbWrapper.classList.add("collapsed-breadcrumb-wrapper");
+      const collapsedBreadcrumbEl = document.createElement("button");
+      const ariaLabel = document.createElement("span");
+      ariaLabel.id = "collapsed-button-label";
+      ariaLabel.innerText = "Collapsed breadcrumbs";
+      ariaLabel.className = "hide";
+      collapsedBreadcrumbEl.setAttribute("aria-labelledby", "collapsed-button-label");
+      const ariaDescribed = document.createElement("span");
+      ariaDescribed.id = "collapsed-button-described";
+      ariaDescribed.innerText = "Select to view collapsed breadcrumbs";
+      ariaDescribed.className = "hide";
+      collapsedBreadcrumbEl.setAttribute("aria-describedby", "collapsed-button-described");
+      collapsedBreadcrumbEl.id = "collapsed-ellipsis";
+      collapsedBreadcrumbEl.innerText = "...";
+      collapsedBreadcrumbEl.classList.add("collapsed-breadcrumb");
+      collapsedBreadcrumbEl.addEventListener("click", () => {
+        this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);
+      });
+      this.collapsedBreadcrumbWrapper.append(ariaDescribed);
+      this.collapsedBreadcrumbWrapper.append(ariaLabel);
+      this.collapsedBreadcrumbWrapper.append(collapsedBreadcrumbEl);
+      return this.collapsedBreadcrumbWrapper;
+    };
+    this.handleHiddenCollapsedBreadcrumbs = (collapsedBreadcrumbWrapper) => {
+      collapsedBreadcrumbWrapper.remove();
+      this.collapsedBreadcrumbs.forEach((breadcrumb) => {
+        breadcrumb.classList.add("visuallyhidden");
+        breadcrumb.classList.remove("hide");
+        setTimeout(() => {
+          breadcrumb.classList.add("fade");
+        }, this.ADD_CLASS_DELAY);
+        this.removeVisuallyHiddenClass(breadcrumb);
+      });
+      this.expandedBreadcrumbs = true;
+    };
+    this.removeVisuallyHiddenClass = (breadcrumb) => {
+      breadcrumb.addEventListener("transitionend", (e) => {
+        if (e.propertyName === "opacity") {
+          breadcrumb.classList.remove("visuallyhidden");
+        }
+      });
+    };
+    this.setLastParentCollapsedBackBreadcrumb = () => {
+      const lastParentBreadcrumb = this.getLastParentBreadcrumb();
+      this.setBackBreadcrumbAttr();
+      lastParentBreadcrumb.classList.remove("hide");
+    };
+    this.revertLastParentCollapsedBreadcrumb = () => {
+      const lastParentBreadcrumb = this.getLastParentBreadcrumb();
+      lastParentBreadcrumb.setAttribute("show-back-icon", "false");
+    };
+    this.resizeObserver = null;
+    this.resizeObserverCallback = (currSize) => {
+      if (currSize !== this.deviceSize) {
+        this.deviceSize = currSize;
+        if (this.deviceSize <= DEVICE_SIZES.S) {
+          this.el.setAttribute("back-breadcrumb-only", "true");
+          if (this.collapsed) {
+            this.setLastParentCollapsedBackBreadcrumb();
+          }
+          else {
+            this.setBackBreadcrumb();
+          }
+        }
+        else {
+          this.el.setAttribute("back-breadcrumb-only", "false");
+          if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {
+            this.revertLastParentCollapsedBreadcrumb();
+            if (this.expandedBreadcrumbs) {
+              this.setDefaultBreadcrumbs();
+            }
+            else {
+              this.setCollapsed();
+            }
+          }
+          else {
+            this.setDefaultBreadcrumbs();
+          }
+        }
+      }
+    };
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        const currSize = getCurrentDeviceSize();
+        this.resizeObserverCallback(currSize);
+      });
+      this.resizeObserver.observe(this.el);
+    };
+    this.backBreadcrumbOnly = false;
+    this.collapsed = false;
+    this.deviceSize = DEVICE_SIZES.XL;
+    this.expandedBreadcrumbs = false;
+  }
+  componentWillLoad() {
+    const allBreadcrumbs = Array.from(this.el.querySelectorAll("ic-breadcrumb"));
+    if (this.backBreadcrumbOnly) {
+      this.setBackBreadcrumb();
+    }
+    else {
+      checkResizeObserver(this.runResizeObserver);
+    }
+    if (this.collapsed) {
+      this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();
+      if (allBreadcrumbs.length > 2) {
+        if (getCurrentDeviceSize() === DEVICE_SIZES.S) {
+          this.setLastParentCollapsedBackBreadcrumb();
+        }
+        else {
+          this.setCollapsed();
+        }
+      }
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        back: this.backBreadcrumbOnly,
+        collapsed: this.collapsed,
+      } }, h("nav", { "aria-label": "breadcrumbs" }, h("ol", null, h("slot", null)))));
+  }
+  static get is() { return "ic-breadcrumbs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-breadcrumbs.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-breadcrumbs.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "backBreadcrumbOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, display the parent page and back icon as breadcrumb"
+        },
+        "attribute": "back-breadcrumb-only",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "collapsed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, all breadcrumbs between the first and last breadcrumb will be collapsed"
+        },
+        "attribute": "collapsed",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "deviceSize": {},
+      "expandedBreadcrumbs": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=ic-breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumbs/ic-breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-breadcrumbs\",\n  styleUrl: \"ic-breadcrumbs.css\",\n  shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class Breadcrumbs {\n  @Element() el: HTMLIcBreadcrumbsElement;\n  /**\n   * If true, display the parent page and back icon as breadcrumb\n   */\n  @Prop() backBreadcrumbOnly: boolean = false;\n  /**\n   * If true, all breadcrumbs between the first and last breadcrumb will be collapsed\n   */\n  @Prop() collapsed: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() expandedBreadcrumbs: boolean = false;\n\n  private breadcrumbs: HTMLIcBreadcrumbElement[];\n  private breadcrumb: HTMLIcBreadcrumbElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n  private ADD_CLASS_DELAY = 50;\n  private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n\n  private setBackBreadcrumb = () => {\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumbAttr();\n    }\n  };\n\n  private setBackBreadcrumbAttr = () => {\n    const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    if (lastParentBreadcrumb) {\n      lastParentBreadcrumb.classList.add(\"show\");\n      lastParentBreadcrumb.setAttribute(\"show-back-icon\", \"true\");\n    }\n  };\n\n  private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement | null => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(\"ic-breadcrumb\")\n    );\n\n    if (allBreadcrumbs.length === 1) {\n      return null;\n    }\n\n    this.breadcrumbs = allBreadcrumbs.filter(\n      (breadcrumb) => !breadcrumb.getAttribute(\"current\")\n    );\n    this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];\n\n    return this.breadcrumb;\n  };\n\n  private setDefaultBreadcrumbs = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(\"ic-breadcrumb\")\n    );\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.setAttribute(\"show-back-icon\", \"false\");\n    });\n  };\n\n  private setCollapsed = () => {\n    if (this.collapsed) {\n      const allBreadcrumbs = Array.from(\n        this.el.querySelectorAll(\"ic-breadcrumb\")\n      );\n      this.collapsedBreadcrumbs = allBreadcrumbs\n        .splice(1, allBreadcrumbs.length - 2)\n        .filter(\n          (breadcrumb) =>\n            !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n        );\n\n      this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n        breadcrumb.classList.add(\"hide\")\n      );\n\n      const firstBreadcrumb = allBreadcrumbs[0];\n\n      if (firstBreadcrumb) {\n        firstBreadcrumb.insertAdjacentElement(\n          \"afterend\",\n          this.collapsedBreadcrumbWrapper\n        );\n      }\n    }\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n    this.collapsedBreadcrumbWrapper.classList.add(\n      \"collapsed-breadcrumb-wrapper\"\n    );\n    const collapsedBreadcrumbEl = document.createElement(\"button\");\n\n    const ariaLabel = document.createElement(\"span\");\n    ariaLabel.id = \"collapsed-button-label\";\n    ariaLabel.innerText = \"Collapsed breadcrumbs\";\n    ariaLabel.className = \"hide\";\n    collapsedBreadcrumbEl.setAttribute(\n      \"aria-labelledby\",\n      \"collapsed-button-label\"\n    );\n\n    const ariaDescribed = document.createElement(\"span\");\n    ariaDescribed.id = \"collapsed-button-described\";\n    ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n    ariaDescribed.className = \"hide\";\n    collapsedBreadcrumbEl.setAttribute(\n      \"aria-describedby\",\n      \"collapsed-button-described\"\n    );\n\n    collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n    collapsedBreadcrumbEl.innerText = \"...\";\n    collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n    collapsedBreadcrumbEl.addEventListener(\"click\", () => {\n      this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n    });\n\n    this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n    this.collapsedBreadcrumbWrapper.append(ariaLabel);\n    this.collapsedBreadcrumbWrapper.append(collapsedBreadcrumbEl);\n\n    return this.collapsedBreadcrumbWrapper;\n  };\n\n  private handleHiddenCollapsedBreadcrumbs = (\n    collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement\n  ) => {\n    collapsedBreadcrumbWrapper.remove();\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.add(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"hide\");\n      setTimeout(() => {\n        breadcrumb.classList.add(\"fade\");\n      }, this.ADD_CLASS_DELAY);\n\n      this.removeVisuallyHiddenClass(breadcrumb);\n    });\n    this.expandedBreadcrumbs = true;\n  };\n\n  private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n    breadcrumb.addEventListener(\"transitionend\", (e) => {\n      if (e.propertyName === \"opacity\") {\n        breadcrumb.classList.remove(\"visuallyhidden\");\n      }\n    });\n  };\n\n  private setLastParentCollapsedBackBreadcrumb = () => {\n    const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    this.setBackBreadcrumbAttr();\n    lastParentBreadcrumb.classList.remove(\"hide\");\n  };\n\n  private revertLastParentCollapsedBreadcrumb = () => {\n    const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    lastParentBreadcrumb.setAttribute(\"show-back-icon\", \"false\");\n  };\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n        if (this.collapsed) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setBackBreadcrumb();\n        }\n      } else {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n        if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n          this.revertLastParentCollapsedBreadcrumb();\n          if (this.expandedBreadcrumbs) {\n            this.setDefaultBreadcrumbs();\n          } else {\n            this.setCollapsed();\n          }\n        } else {\n          this.setDefaultBreadcrumbs();\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  componentWillLoad(): void {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(\"ic-breadcrumb\")\n    );\n\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumb();\n    } else {\n      checkResizeObserver(this.runResizeObserver);\n    }\n\n    if (this.collapsed) {\n      this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n\n      if (allBreadcrumbs.length > 2) {\n        if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setCollapsed();\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          back: this.backBreadcrumbOnly,\n          collapsed: this.collapsed,\n        }}\n      >\n        <nav aria-label=\"breadcrumbs\">\n          <ol>\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-breadcrumbs/ic-breadcrumbs.test.a11y.js

@@ -0,0 +1,21 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+describe("breadcrumbs component", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture("<ic-breadcrumbs></ic-breadcrumbs>");
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+  it("ic-breadcrumbs/ic-breadcrumb passes accessibility", async () => {
+    const el = await fixture(`
+      <ic-breadcrumbs>
+        <ic-breadcrumb page-title="foo" href="/foo"></ic-breadcrumb>
+        <ic-breadcrumb current="true" page-title="bar" href="/bar"></ic-breadcrumb>
+      </ic-breadcrumbs>
+    `);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-breadcrumbs.test.a11y.js.map

package/dist/collection/components/ic-breadcrumbs/ic-breadcrumbs.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumbs.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumbs/ic-breadcrumbs.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,8BAA8B,CAAC;AAElF,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;EACrC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,mCAAmC,CAAC,CAAC;IAC9D,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;IACjE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;KAKxB,CAAC,CAAC;IACH,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,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(\"breadcrumbs component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\"<ic-breadcrumbs></ic-breadcrumbs>\");\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n\n  it(\"ic-breadcrumbs/ic-breadcrumb passes accessibility\", async () => {\n    const el = await fixture(`\n      <ic-breadcrumbs>\n        <ic-breadcrumb page-title=\"foo\" href=\"/foo\"></ic-breadcrumb>\n        <ic-breadcrumb current=\"true\" page-title=\"bar\" href=\"/bar\"></ic-breadcrumb>\n      </ic-breadcrumbs>\n    `);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}