@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.5

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

@@ -1,213 +1,222 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { D as DEVICE_SIZES, d as getCurrentDeviceSize, c as checkResizeObserver } from './helpers.js';
+import { D as DEVICE_SIZES, l as getCurrentDeviceSize, c as checkResizeObserver } from './helpers.js';
 import { d as defineCustomElement$3 } from './ic-breadcrumb2.js';
 import { d as defineCustomElement$2 } from './ic-link2.js';
 
 const icBreadcrumbGroupCss = ":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}";
 
 const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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) {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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.appearance = "default";
+        this.backBreadcrumbOnly = false;
+        this.collapsed = false;
+    }
+    componentWillLoad() {
         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);
+        if (this.appearance !== "default") {
+            allBreadcrumbs.forEach((breadcrumb) => {
+                breadcrumb.setAttribute("appearance", this.appearance);
+            });
         }
-      }
-    };
-    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 {
+        if (this.backBreadcrumbOnly) {
             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();
+            checkResizeObserver(this.runResizeObserver);
+        }
+        if (this.collapsed) {
+            this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();
+            if (allBreadcrumbs.length > 2) {
+                if (getCurrentDeviceSize() === DEVICE_SIZES.S) {
+                    this.setLastParentCollapsedBackBreadcrumb();
+                }
+                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);
+    disconnectedCallback() {
+        this.breadcrumb &&
+            this.breadcrumb.removeEventListener("transitionend", this.transitionendHandler);
+        this.collapsedBreadcrumbEl &&
+            this.collapsedBreadcrumbEl.removeEventListener("click", this.clickHandler);
     }
-    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)))));
     }
-  }
-  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)))));
-  }
-  get el() { return this; }
-  static get style() { return icBreadcrumbGroupCss; }
+    get el() { return this; }
+    static get style() { return icBreadcrumbGroupCss; }
 }, [1, "ic-breadcrumb-group", {
-    "backBreadcrumbOnly": [4, "back-breadcrumb-only"],
-    "collapsed": [4],
-    "deviceSize": [32],
-    "expandedBreadcrumbs": [32]
-  }]);
+        "appearance": [1],
+        "backBreadcrumbOnly": [4, "back-breadcrumb-only"],
+        "collapsed": [4],
+        "deviceSize": [32],
+        "expandedBreadcrumbs": [32]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ic-breadcrumb-group", "ic-breadcrumb", "ic-link"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ic-breadcrumb-group":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, BreadcrumbGroup);
-      }
-      break;
-    case "ic-breadcrumb":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ic-link":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-breadcrumb-group", "ic-breadcrumb", "ic-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-breadcrumb-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BreadcrumbGroup);
+            }
+            break;
+        case "ic-breadcrumb":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ic-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const IcBreadcrumbGroup = BreadcrumbGroup;

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

@@ -1 +1 @@
-{"file":"ic-breadcrumb-group.js","mappings":"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","names":[],"sources":["src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host ol {\n  display: flex;\n  list-style-type: none;\n  align-items: center;\n  flex-wrap: wrap;\n  padding: 0;\n  margin: 0;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb) {\n  display: none;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb.show) {\n  display: flex;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.hide) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden) {\n  display: block;\n  opacity: 0;\n  transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.fade) {\n  opacity: 1;\n}\n","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"],"version":3}
+{"file":"ic-breadcrumb-group.js","mappings":"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","names":[],"sources":["../web-components/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","../web-components/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host ol {\n  display: flex;\n  list-style-type: none;\n  align-items: center;\n  flex-wrap: wrap;\n  padding: 0;\n  margin: 0;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb) {\n  display: none;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb.show) {\n  display: flex;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.hide) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden) {\n  display: block;\n  opacity: 0;\n  transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.fade) {\n  opacity: 1;\n}\n","import { Host, h } from \"@stencil/core\";\nimport { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, } from \"../../utils/helpers\";\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n    constructor() {\n        this.ADD_CLASS_DELAY = 50;\n        this.IC_BREADCRUMB = \"ic-breadcrumb\";\n        this.resizeObserver = null;\n        this.SHOW_BACK_ICON = \"show-back-icon\";\n        this.setBackBreadcrumb = () => {\n            if (this.backBreadcrumbOnly) {\n                this.setBackBreadcrumbAttr();\n            }\n        };\n        this.setBackBreadcrumbAttr = () => {\n            if (this.lastParentBreadcrumb) {\n                this.lastParentBreadcrumb.classList.add(\"show\");\n                this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n            }\n        };\n        this.getLastParentBreadcrumb = () => {\n            const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));\n            if (allBreadcrumbs.length === 1) {\n                return null;\n            }\n            this.breadcrumbs = allBreadcrumbs.filter((breadcrumb) => !breadcrumb.getAttribute(\"current\"));\n            this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];\n            return this.breadcrumb;\n        };\n        this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n        this.setDefaultBreadcrumbs = () => {\n            const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));\n            allBreadcrumbs.forEach((breadcrumb) => {\n                breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n            });\n        };\n        this.setCollapsed = () => {\n            if (this.collapsed) {\n                const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));\n                this.collapsedBreadcrumbs = allBreadcrumbs\n                    .splice(1, allBreadcrumbs.length - 2)\n                    .filter((breadcrumb) => !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\"));\n                this.collapsedBreadcrumbs.forEach((breadcrumb) => breadcrumb.classList.add(\"hide\"));\n                const firstBreadcrumb = allBreadcrumbs[0];\n                if (firstBreadcrumb) {\n                    firstBreadcrumb.insertAdjacentElement(\"afterend\", this.collapsedBreadcrumbWrapper);\n                }\n            }\n        };\n        this.clickHandler = () => {\n            this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n        };\n        this.renderCollapsedBreadcrumb = () => {\n            this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n            this.collapsedBreadcrumbWrapper.classList.add(\"collapsed-breadcrumb-wrapper\");\n            this.collapsedBreadcrumbEl = document.createElement(\"button\");\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(\"aria-labelledby\", \"collapsed-button-label\");\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(\"aria-describedby\", \"collapsed-button-described\");\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            this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n            this.collapsedBreadcrumbWrapper.append(ariaLabel);\n            this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n            return this.collapsedBreadcrumbWrapper;\n        };\n        this.handleHiddenCollapsedBreadcrumbs = (collapsedBreadcrumbWrapper) => {\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                this.removeVisuallyHiddenClass(breadcrumb);\n            });\n            this.expandedBreadcrumbs = true;\n        };\n        this.transitionendHandler = (event) => {\n            if (event.propertyName === \"opacity\") {\n                event.target.classList.remove(\"visuallyhidden\");\n            }\n        };\n        this.removeVisuallyHiddenClass = (breadcrumb) => {\n            breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n        };\n        this.setLastParentCollapsedBackBreadcrumb = () => {\n            this.setBackBreadcrumbAttr();\n            this.lastParentBreadcrumb.classList.remove(\"hide\");\n        };\n        this.revertLastParentCollapsedBreadcrumb = () => {\n            this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n        };\n        this.resizeObserverCallback = (currSize) => {\n            if (currSize !== this.deviceSize) {\n                this.deviceSize = currSize;\n                if (this.deviceSize <= DEVICE_SIZES.S) {\n                    this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n                    if (this.collapsed) {\n                        this.setLastParentCollapsedBackBreadcrumb();\n                    }\n                    else {\n                        this.setBackBreadcrumb();\n                    }\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                        }\n                        else {\n                            this.setCollapsed();\n                        }\n                    }\n                    else {\n                        this.setDefaultBreadcrumbs();\n                    }\n                }\n            }\n        };\n        this.runResizeObserver = () => {\n            this.resizeObserver = new ResizeObserver(() => {\n                const currSize = getCurrentDeviceSize();\n                this.resizeObserverCallback(currSize);\n            });\n            this.resizeObserver.observe(this.el);\n        };\n        this.deviceSize = DEVICE_SIZES.XL;\n        this.expandedBreadcrumbs = false;\n        this.appearance = \"default\";\n        this.backBreadcrumbOnly = false;\n        this.collapsed = false;\n    }\n    componentWillLoad() {\n        const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));\n        if (this.appearance !== \"default\") {\n            allBreadcrumbs.forEach((breadcrumb) => {\n                breadcrumb.setAttribute(\"appearance\", this.appearance);\n            });\n        }\n        if (this.backBreadcrumbOnly) {\n            this.setBackBreadcrumb();\n        }\n        else {\n            checkResizeObserver(this.runResizeObserver);\n        }\n        if (this.collapsed) {\n            this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n            if (allBreadcrumbs.length > 2) {\n                if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n                    this.setLastParentCollapsedBackBreadcrumb();\n                }\n                else {\n                    this.setCollapsed();\n                }\n            }\n        }\n    }\n    disconnectedCallback() {\n        this.breadcrumb &&\n            this.breadcrumb.removeEventListener(\"transitionend\", this.transitionendHandler);\n        this.collapsedBreadcrumbEl &&\n            this.collapsedBreadcrumbEl.removeEventListener(\"click\", this.clickHandler);\n    }\n    render() {\n        return (h(Host, { class: {\n                back: this.backBreadcrumbOnly,\n                collapsed: this.collapsed,\n            } }, h(\"nav\", { \"aria-label\": \"breadcrumbs\" }, h(\"ol\", null, h(\"slot\", null)))));\n    }\n    static get is() { return \"ic-breadcrumb-group\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ic-breadcrumb-group.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-breadcrumb-group.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"appearance\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcThemeForeground\",\n                    \"resolved\": \"\\\"dark\\\" | \\\"default\\\" | \\\"light\\\"\",\n                    \"references\": {\n                        \"IcThemeForeground\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcThemeForeground\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The appearance of the breadcrumb group.\"\n                },\n                \"attribute\": \"appearance\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"default\\\"\"\n            },\n            \"backBreadcrumbOnly\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, display only a single breadcrumb for the parent page with a back icon.\"\n                },\n                \"attribute\": \"back-breadcrumb-only\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"collapsed\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\"\n                },\n                \"attribute\": \"collapsed\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"deviceSize\": {},\n            \"expandedBreadcrumbs\": {}\n        };\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=ic-breadcrumb-group.js.map\n"],"version":3}