@ukic/canary-web-components 2.0.0-canary.0

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

@@ -0,0 +1,118 @@
+import { Breadcrumb } from "../../ic-breadcrumb";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-breadcrumb", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [Breadcrumb],
+      html: `<ic-breadcrumb></ic-breadcrumb>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-breadcrumb role="listitem">
+        <mock:shadow-root>
+          <div class="breadcrumb">
+            <span aria-hidden="true" class="chevron">
+              svg
+            </span>
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </ic-breadcrumb>
+    `);
+  });
+  it("renders with page-title and href", async () => {
+    const page = await newSpecPage({
+      components: [Breadcrumb],
+      html: `<ic-breadcrumb page-title="foo" href="/"></ic-breadcrumb>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-breadcrumb href="/" page-title="foo" role="listitem">
+        <mock:shadow-root>
+          <div class="breadcrumb">
+            <span aria-hidden="true" class="chevron">
+              svg
+            </span>
+            <ic-link class="breadcrumb-link" href="/">
+              foo
+            </ic-link>
+          </div>
+        </mock:shadow-root>
+      </ic-breadcrumb>
+    `);
+  });
+  it("renders with page-title, href, current", async () => {
+    const page = await newSpecPage({
+      components: [Breadcrumb],
+      html: `<ic-breadcrumb page-title="foo" href="/" current="true"></ic-breadcrumb>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-breadcrumb current="true" href="/" page-title="foo" role="listitem" aria-current="page">
+        <mock:shadow-root>
+          <div class="breadcrumb">
+            <span aria-hidden="true" class="chevron">
+              svg
+            </span>
+            <span class="current-page-container">
+              foo
+            </span>
+          </div>
+        </mock:shadow-root>
+      </ic-breadcrumb>
+    `);
+  });
+  it("renders with icon", async () => {
+    const page = await newSpecPage({
+      components: [Breadcrumb],
+      html: `
+      <ic-breadcrumb page-title="foo" href="/" current="true">
+        <svg
+          slot="icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </ic-breadcrumb>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-breadcrumb current="true" href="/" page-title="foo" aria-current="page" role="listitem">
+        <mock:shadow-root>
+          <div class="breadcrumb">
+            <span aria-hidden="true" class="chevron">
+              svg
+            </span>
+            <span class="current-page-container">
+              <slot name="icon"></slot>
+              foo
+            </span>
+          </div>
+        </mock:shadow-root>
+        <svg fill="none" height="24" slot="icon" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z" fill="currentColor"></path>
+        </svg>
+      </ic-breadcrumb>
+    `);
+  });
+  it("should add the 'current-page' class when current prop is true", async () => {
+    const page = await newSpecPage({
+      components: [Breadcrumb],
+      html: "<ic-breadcrumb id='ic-breadcrumb' current=true><ic-link href='/'>Link</ic-link></ic-breadcrumb>",
+    });
+    await page.rootInstance.setSlottedCurrentPageClass();
+    expect(document.querySelector("ic-breadcrumb").classList.contains("current-page")).toBeTruthy;
+  });
+  it("should call 'setFocus' when breadcrumb is focused", async () => {
+    const page = await newSpecPage({
+      components: [Breadcrumb],
+      html: `<ic-breadcrumb></ic-breadcrumb>`,
+    });
+    //Can't expect anything in this test - this is to increase code coverage only
+    await page.rootInstance.setFocus().toHaveBeenCalled;
+  });
+});
+//# sourceMappingURL=ic-breadcrumb.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumb.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-breadcrumb/test/basic/ic-breadcrumb.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,iCAAiC;KACxC,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,2DAA2D;KAClE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;IACtD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,0EAA0E;KACjF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;IACjC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;;;;;;uBAeW;KAClB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;KAiB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+DAA+D,EAAE,KAAK,IAAI,EAAE;IAC7E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,iGAAiG;KACxG,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,0BAA0B,EAAE,CAAC;IAErD,MAAM,CACJ,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAC3E,CAAC,UAAU,CAAC;EACf,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;IACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,iCAAiC;KACxC,CAAC,CAAC;IAEH,6EAA6E;IAC7E,MAAM,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC;EACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { Breadcrumb } from \"../../ic-breadcrumb\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-breadcrumb\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [Breadcrumb],\n      html: `<ic-breadcrumb></ic-breadcrumb>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-breadcrumb role=\"listitem\">\n        <mock:shadow-root>\n          <div class=\"breadcrumb\">\n            <span aria-hidden=\"true\" class=\"chevron\">\n              svg\n            </span>\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </ic-breadcrumb>\n    `);\n  });\n\n  it(\"renders with page-title and href\", async () => {\n    const page = await newSpecPage({\n      components: [Breadcrumb],\n      html: `<ic-breadcrumb page-title=\"foo\" href=\"/\"></ic-breadcrumb>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-breadcrumb href=\"/\" page-title=\"foo\" role=\"listitem\">\n        <mock:shadow-root>\n          <div class=\"breadcrumb\">\n            <span aria-hidden=\"true\" class=\"chevron\">\n              svg\n            </span>\n            <ic-link class=\"breadcrumb-link\" href=\"/\">\n              foo\n            </ic-link>\n          </div>\n        </mock:shadow-root>\n      </ic-breadcrumb>\n    `);\n  });\n\n  it(\"renders with page-title, href, current\", async () => {\n    const page = await newSpecPage({\n      components: [Breadcrumb],\n      html: `<ic-breadcrumb page-title=\"foo\" href=\"/\" current=\"true\"></ic-breadcrumb>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-breadcrumb current=\"true\" href=\"/\" page-title=\"foo\" role=\"listitem\" aria-current=\"page\">\n        <mock:shadow-root>\n          <div class=\"breadcrumb\">\n            <span aria-hidden=\"true\" class=\"chevron\">\n              svg\n            </span>\n            <span class=\"current-page-container\">\n              foo\n            </span>\n          </div>\n        </mock:shadow-root>\n      </ic-breadcrumb>\n    `);\n  });\n\n  it(\"renders with icon\", async () => {\n    const page = await newSpecPage({\n      components: [Breadcrumb],\n      html: `\n      <ic-breadcrumb page-title=\"foo\" href=\"/\" current=\"true\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </ic-breadcrumb>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-breadcrumb current=\"true\" href=\"/\" page-title=\"foo\" aria-current=\"page\" role=\"listitem\">\n        <mock:shadow-root>\n          <div class=\"breadcrumb\">\n            <span aria-hidden=\"true\" class=\"chevron\">\n              svg\n            </span>\n            <span class=\"current-page-container\">\n              <slot name=\"icon\"></slot>\n              foo\n            </span>\n          </div>\n        </mock:shadow-root>\n        <svg fill=\"none\" height=\"24\" slot=\"icon\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\" fill=\"currentColor\"></path>\n        </svg>\n      </ic-breadcrumb>\n    `);\n  });\n\n  it(\"should add the 'current-page' class when current prop is true\", async () => {\n    const page = await newSpecPage({\n      components: [Breadcrumb],\n      html: \"<ic-breadcrumb id='ic-breadcrumb' current=true><ic-link href='/'>Link</ic-link></ic-breadcrumb>\",\n    });\n\n    await page.rootInstance.setSlottedCurrentPageClass();\n\n    expect(\n      document.querySelector(\"ic-breadcrumb\").classList.contains(\"current-page\")\n    ).toBeTruthy;\n  });\n\n  it(\"should call 'setFocus' when breadcrumb is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Breadcrumb],\n      html: `<ic-breadcrumb></ic-breadcrumb>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n});\n"]}

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

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+}
+
+:host ol {
+  display: flex;
+  list-style-type: none;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 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-breadcrumb-group/ic-breadcrumb-group.js

@@ -0,0 +1,234 @@
+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 BreadcrumbGroup {
+  constructor() {
+    this.ADD_CLASS_DELAY = 50;
+    this.IC_BREADCRUMB = "ic-breadcrumb";
+    this.resizeObserver = null;
+    this.SHOW_BACK_ICON = "show-back-icon";
+    this.setBackBreadcrumb = () => {
+      if (this.backBreadcrumbOnly) {
+        this.setBackBreadcrumbAttr();
+      }
+    };
+    this.setBackBreadcrumbAttr = () => {
+      if (this.lastParentBreadcrumb) {
+        this.lastParentBreadcrumb.classList.add("show");
+        this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, "true");
+      }
+    };
+    this.getLastParentBreadcrumb = () => {
+      const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.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.lastParentBreadcrumb = this.getLastParentBreadcrumb();
+    this.setDefaultBreadcrumbs = () => {
+      const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
+      allBreadcrumbs.forEach((breadcrumb) => {
+        breadcrumb.setAttribute(this.SHOW_BACK_ICON, "false");
+      });
+    };
+    this.setCollapsed = () => {
+      if (this.collapsed) {
+        const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.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.clickHandler = () => {
+      this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);
+    };
+    this.renderCollapsedBreadcrumb = () => {
+      this.collapsedBreadcrumbWrapper = document.createElement("ic-breadcrumb");
+      this.collapsedBreadcrumbWrapper.classList.add("collapsed-breadcrumb-wrapper");
+      this.collapsedBreadcrumbEl = document.createElement("button");
+      const ariaLabel = document.createElement("span");
+      ariaLabel.id = "collapsed-button-label";
+      ariaLabel.innerText = "Collapsed breadcrumbs";
+      ariaLabel.className = "hide";
+      this.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";
+      this.collapsedBreadcrumbEl.setAttribute("aria-describedby", "collapsed-button-described");
+      this.collapsedBreadcrumbEl.id = "collapsed-ellipsis";
+      this.collapsedBreadcrumbEl.innerText = "...";
+      this.collapsedBreadcrumbEl.classList.add("collapsed-breadcrumb");
+      this.collapsedBreadcrumbEl.addEventListener("click", this.clickHandler);
+      this.collapsedBreadcrumbWrapper.append(ariaDescribed);
+      this.collapsedBreadcrumbWrapper.append(ariaLabel);
+      this.collapsedBreadcrumbWrapper.append(this.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.transitionendHandler = (event) => {
+      if (event.propertyName === "opacity") {
+        event.target.classList.remove("visuallyhidden");
+      }
+    };
+    this.removeVisuallyHiddenClass = (breadcrumb) => {
+      breadcrumb.addEventListener("transitionend", this.transitionendHandler);
+    };
+    this.setLastParentCollapsedBackBreadcrumb = () => {
+      this.setBackBreadcrumbAttr();
+      this.lastParentBreadcrumb.classList.remove("hide");
+    };
+    this.revertLastParentCollapsedBreadcrumb = () => {
+      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, "false");
+    };
+    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.deviceSize = DEVICE_SIZES.XL;
+    this.expandedBreadcrumbs = false;
+    this.backBreadcrumbOnly = false;
+    this.collapsed = false;
+  }
+  componentWillLoad() {
+    const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.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();
+        }
+      }
+    }
+  }
+  disconnectedCallback() {
+    this.breadcrumb.removeEventListener("transitionend", this.transitionendHandler);
+    this.collapsedBreadcrumbEl.removeEventListener("click", this.clickHandler);
+  }
+  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-breadcrumb-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-breadcrumb-group.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-breadcrumb-group.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 only a single breadcrumb for the parent page with a back icon."
+        },
+        "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-breadcrumb-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumb-group.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.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-breadcrumb-group\",\n  styleUrl: \"ic-breadcrumb-group.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 BreadcrumbGroup {\n  private ADD_CLASS_DELAY = 50;\n  private breadcrumb: HTMLIcBreadcrumbElement;\n  private breadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbEl: HTMLButtonElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n  private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n  private resizeObserver: ResizeObserver = null;\n  private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n  @Element() el: HTMLIcBreadcrumbGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() expandedBreadcrumbs: boolean = false;\n\n  /**\n   * If `true`, display only a single breadcrumb for the parent page with a back icon.\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  componentWillLoad(): void {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.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  disconnectedCallback(): void {\n    this.breadcrumb.removeEventListener(\n      \"transitionend\",\n      this.transitionendHandler\n    );\n    this.collapsedBreadcrumbEl.removeEventListener(\"click\", this.clickHandler);\n  }\n\n  private setBackBreadcrumb = () => {\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumbAttr();\n    }\n  };\n\n  private setBackBreadcrumbAttr = () => {\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.add(\"show\");\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n    }\n  };\n\n  private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement | null => {\n    const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n      this.el.querySelectorAll(this.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 lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n  private setDefaultBreadcrumbs = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n    });\n  };\n\n  private setCollapsed = () => {\n    if (this.collapsed) {\n      const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n        this.el.querySelectorAll(this.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 clickHandler = () => {\n    this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n    this.collapsedBreadcrumbWrapper.classList.add(\n      \"collapsed-breadcrumb-wrapper\"\n    );\n    this.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    this.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    this.collapsedBreadcrumbEl.setAttribute(\n      \"aria-describedby\",\n      \"collapsed-button-described\"\n    );\n\n    this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n    this.collapsedBreadcrumbEl.innerText = \"...\";\n    this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n    this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n    this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n    this.collapsedBreadcrumbWrapper.append(ariaLabel);\n    this.collapsedBreadcrumbWrapper.append(this.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 transitionendHandler = (event: TransitionEvent) => {\n    if (event.propertyName === \"opacity\") {\n      (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n    }\n  };\n\n  private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n    breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n  };\n\n  private setLastParentCollapsedBackBreadcrumb = () => {\n    this.setBackBreadcrumbAttr();\n    this.lastParentBreadcrumb.classList.remove(\"hide\");\n  };\n\n  private revertLastParentCollapsedBreadcrumb = () => {\n    this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n  };\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  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-breadcrumb-group/test/a11y/ic-breadcrumb-group.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("breadcrumb group component", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture("<ic-breadcrumb-group></ic-breadcrumb-group>");
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+  it("ic-breadcrumb-group/ic-breadcrumb passes accessibility", async () => {
+    const el = await fixture(`
+      <ic-breadcrumb-group>
+        <ic-breadcrumb page-title="foo" href="/foo"></ic-breadcrumb>
+        <ic-breadcrumb current="true" page-title="bar" href="/bar"></ic-breadcrumb>
+      </ic-breadcrumb-group>
+    `);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-breadcrumb-group.test.a11y.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumb-group.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-breadcrumb-group/test/a11y/ic-breadcrumb-group.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,4BAA4B,EAAE,GAAG,EAAE;EAC1C,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,6CAA6C,CAAC,CAAC;IACxE,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,wDAAwD,EAAE,KAAK,IAAI,EAAE;IACtE,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(\"breadcrumb group component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\"<ic-breadcrumb-group></ic-breadcrumb-group>\");\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n\n  it(\"ic-breadcrumb-group/ic-breadcrumb passes accessibility\", async () => {\n    const el = await fixture(`\n      <ic-breadcrumb-group>\n        <ic-breadcrumb page-title=\"foo\" href=\"/foo\"></ic-breadcrumb>\n        <ic-breadcrumb current=\"true\" page-title=\"bar\" href=\"/bar\"></ic-breadcrumb>\n      </ic-breadcrumb-group>\n    `);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group-test-examples.js

@@ -0,0 +1,35 @@
+export const icBreadcrumbGroupCollapsed = `
+  <ic-breadcrumb-group 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-breadcrumb-group>
+`;
+export const icBreadcrumbGroupBack = `
+  <ic-breadcrumb-group 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-breadcrumb-group>
+`;
+//# sourceMappingURL=ic-breadcrumb-group-test-examples.js.map

package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group-test-examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumb-group-test-examples.js","sourceRoot":"","sources":["../../../../../src/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group-test-examples.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;;;;;;;;;;;;;;;;CAgBzC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;CAgBpC,CAAC","sourcesContent":["export const icBreadcrumbGroupCollapsed = `\n  <ic-breadcrumb-group 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-breadcrumb-group>\n`;\n\nexport const icBreadcrumbGroupBack = `\n  <ic-breadcrumb-group 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-breadcrumb-group>\n`;\n"]}

package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.e2e.js

@@ -0,0 +1,41 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { icBreadcrumbGroupCollapsed, icBreadcrumbGroupBack, } from "./ic-breadcrumb-group-test-examples";
+describe("ic-breadcrumb-group", () => {
+  it("displays collapsed breadcrumbs", async () => {
+    const page = await newE2EPage();
+    await page.setContent(icBreadcrumbGroupCollapsed);
+    await page.waitForChanges();
+    let visibleBreadcrumbs = await page.evaluate(() => {
+      return Array.from(document.querySelectorAll("ic-breadcrumb:not(.collapsed-breadcrumb-wrapper")).filter((b) => getComputedStyle(b).display !== "none").length;
+    });
+    expect(visibleBreadcrumbs).toBe(2);
+    const btn = await page.find("ic-breadcrumb.collapsed-breadcrumb-wrapper button");
+    expect(btn).not.toBeNull();
+    await btn.click();
+    await page.waitForChanges();
+    visibleBreadcrumbs = await page.evaluate(() => {
+      return Array.from(document.querySelectorAll("ic-breadcrumb:not(.collapsed-breadcrumb-wrapper")).filter((b) => getComputedStyle(b).display !== "none").length;
+    });
+    expect(visibleBreadcrumbs).toBe(3);
+  });
+  it("renders aria elements when back-breadcrumb-only is set", async () => {
+    const page = await newE2EPage();
+    await page.setContent(icBreadcrumbGroupBack);
+    await page.waitForChanges();
+    const describedbySpan = await page.find("ic-breadcrumb-group ic-breadcrumb[show-back-icon] >>> span.hide");
+    const icLinkNestedATag = await page.$eval("ic-breadcrumb-group", (el) => {
+      const nestedATag = el
+        .querySelector("ic-breadcrumb[show-back-icon]")
+        .shadowRoot.querySelector("ic-link")
+        .shadowRoot.querySelector("a");
+      return {
+        ariaDescribedBy: nestedATag.getAttribute("aria-describedby"),
+      };
+    });
+    expect(describedbySpan).not.toBeNull();
+    expect(describedbySpan.id).toBe("breadcrumb-2-describedby");
+    expect(icLinkNestedATag.ariaDescribedBy).toBeTruthy();
+    expect(icLinkNestedATag.ariaDescribedBy).toBe("breadcrumb-2-describedby");
+  });
+});
+//# sourceMappingURL=ic-breadcrumb-group.e2e.js.map

package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumb-group.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EACL,0BAA0B,EAC1B,qBAAqB,GACtB,MAAM,qCAAqC,CAAC;AAE7C,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;EACnC,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,0BAA0B,CAAC,CAAC;IAClD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,IAAI,kBAAkB,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAChD,OAAO,KAAK,CAAC,IAAI,CACf,QAAQ,CAAC,gBAAgB,CACvB,iDAAiD,CAClD,CACF,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,MAAM,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAEnC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CACzB,mDAAmD,CACpD,CAAC;IAEF,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAE3B,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IAElB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,kBAAkB,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAC5C,OAAO,KAAK,CAAC,IAAI,CACf,QAAQ,CAAC,gBAAgB,CACvB,iDAAiD,CAClD,CACF,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,MAAM,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EACrC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;IACtE,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAC7C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,IAAI,CACrC,iEAAiE,CAClE,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,EAAE,EAAE,EAAE;MACtE,MAAM,UAAU,GAAG,EAAE;SAClB,aAAa,CAAC,+BAA+B,CAAC;SAC9C,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC;SACnC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;MAEjC,OAAO;QACL,eAAe,EAAE,UAAU,CAAC,YAAY,CAAC,kBAAkB,CAAC;OAC7D,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IACvC,MAAM,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAE5D,MAAM,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,UAAU,EAAE,CAAC;IACtD,MAAM,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;EAC5E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\nimport {\n  icBreadcrumbGroupCollapsed,\n  icBreadcrumbGroupBack,\n} from \"./ic-breadcrumb-group-test-examples\";\n\ndescribe(\"ic-breadcrumb-group\", () => {\n  it(\"displays collapsed breadcrumbs\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(icBreadcrumbGroupCollapsed);\n    await page.waitForChanges();\n\n    let visibleBreadcrumbs = await page.evaluate(() => {\n      return Array.from(\n        document.querySelectorAll(\n          \"ic-breadcrumb:not(.collapsed-breadcrumb-wrapper\"\n        )\n      ).filter((b) => getComputedStyle(b).display !== \"none\").length;\n    });\n\n    expect(visibleBreadcrumbs).toBe(2);\n\n    const btn = await page.find(\n      \"ic-breadcrumb.collapsed-breadcrumb-wrapper button\"\n    );\n\n    expect(btn).not.toBeNull();\n\n    await btn.click();\n\n    await page.waitForChanges();\n\n    visibleBreadcrumbs = await page.evaluate(() => {\n      return Array.from(\n        document.querySelectorAll(\n          \"ic-breadcrumb:not(.collapsed-breadcrumb-wrapper\"\n        )\n      ).filter((b) => getComputedStyle(b).display !== \"none\").length;\n    });\n\n    expect(visibleBreadcrumbs).toBe(3);\n  });\n\n  it(\"renders aria elements when back-breadcrumb-only is set\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(icBreadcrumbGroupBack);\n    await page.waitForChanges();\n\n    const describedbySpan = await page.find(\n      \"ic-breadcrumb-group ic-breadcrumb[show-back-icon] >>> span.hide\"\n    );\n\n    const icLinkNestedATag = await page.$eval(\"ic-breadcrumb-group\", (el) => {\n      const nestedATag = el\n        .querySelector(\"ic-breadcrumb[show-back-icon]\")\n        .shadowRoot.querySelector(\"ic-link\")\n        .shadowRoot.querySelector(\"a\");\n\n      return {\n        ariaDescribedBy: nestedATag.getAttribute(\"aria-describedby\"),\n      };\n    });\n\n    expect(describedbySpan).not.toBeNull();\n    expect(describedbySpan.id).toBe(\"breadcrumb-2-describedby\");\n\n    expect(icLinkNestedATag.ariaDescribedBy).toBeTruthy();\n    expect(icLinkNestedATag.ariaDescribedBy).toBe(\"breadcrumb-2-describedby\");\n  });\n});\n"]}