@ukic/web-components 3.25.0 → 3.27.0

package/components/ic-breadcrumb-group.js

@@ -0,0 +1,278 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { D as DEVICE_SIZES, q 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(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb){display:none}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show){display:flex}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide){display:none;opacity:0;visibility:hidden}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){display:block;opacity:0;transition:all var(--ic-easing-transition-slow)}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade){opacity:1}@media (prefers-reduced-motion: reduce){:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){transition:none}}";
+const IcBreadcrumbGroupStyle0 = icBreadcrumbGroupCss;
+
+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.SHOW_BACK_ICON = "show-back-icon";
+        this.collapsedBreadcrumbs = [];
+        this.resizeObserver = null;
+        this.lastParentBreadcrumb = null;
+        this.deviceSize = DEVICE_SIZES.XL;
+        /**
+         * If `true`, display only a single breadcrumb for the parent page with a back icon.
+         */
+        this.backBreadcrumbOnly = false;
+        /**
+         * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.
+         */
+        this.collapsed = false;
+        /**
+         * If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.
+         */
+        this.monochrome = false;
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        this.setBreadcrumbTheme = () => {
+            Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB)).forEach((breadcrumb) => {
+                breadcrumb.theme = this.theme;
+            });
+        };
+        this.setBreadcrumbMonochrome = () => {
+            Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB)).forEach((breadcrumb) => {
+                breadcrumb.monochrome = this.monochrome;
+            });
+        };
+        this.setBackBreadcrumb = () => {
+            if (this.backBreadcrumbOnly) {
+                this.setLastParentCollapsedBackBreadcrumb();
+            }
+            else {
+                this.revertLastParentCollapsedBreadcrumb();
+            }
+        };
+        this.setBackBreadcrumbAttr = () => {
+            if (this.lastParentBreadcrumb) {
+                this.lastParentBreadcrumb.classList.add("show");
+                this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, "true");
+            }
+        };
+        this.getLastParentBreadcrumb = () => {
+            const allBreadcrumbs = this.el.querySelectorAll(this.IC_BREADCRUMB);
+            return allBreadcrumbs.length > 1
+                ? allBreadcrumbs[allBreadcrumbs.length - 2]
+                : null;
+        };
+        this.setCollapsed = () => {
+            var _a, _b;
+            this.collapsedBreadcrumbs.forEach((breadcrumb) => {
+                breadcrumb.classList.remove("visuallyhidden");
+                breadcrumb.classList.remove("fade");
+            });
+            if (this.collapsed) {
+                this.renderCollapsedBreadcrumb();
+                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"));
+                if (!this.backBreadcrumbOnly) {
+                    this.collapsedBreadcrumbs.forEach((breadcrumb) => breadcrumb.classList.add("hide"));
+                }
+                if (this.collapsedBreadcrumbWrapper) {
+                    (_a = allBreadcrumbs[0]) === null || _a === void 0 ? void 0 : _a.insertAdjacentElement("afterend", this.collapsedBreadcrumbWrapper);
+                }
+            }
+            else {
+                (_b = this.collapsedBreadcrumbWrapper) === null || _b === void 0 ? void 0 : _b.remove();
+            }
+        };
+        this.clickHandler = () => {
+            var _a;
+            (_a = this.collapsedBreadcrumbWrapper) === null || _a === void 0 ? void 0 : _a.remove();
+            this.collapsedBreadcrumbs.forEach((breadcrumb) => {
+                breadcrumb.classList.add("visuallyhidden");
+                breadcrumb.classList.remove("hide");
+                setTimeout(() => {
+                    breadcrumb.classList.add("fade");
+                }, this.ADD_CLASS_DELAY);
+                breadcrumb.addEventListener("transitionend", this.transitionendHandler);
+            });
+            this.collapsed = false;
+            // Set focus to first unhidden breadcrumb
+            this.collapsedBreadcrumbs[0].setFocus();
+        };
+        this.renderCollapsedBreadcrumb = () => {
+            if (this.collapsedBreadcrumbEl === undefined) {
+                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", ariaLabel.id);
+                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", ariaDescribed.id);
+                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);
+            }
+        };
+        this.transitionendHandler = (event) => {
+            if (event.propertyName === "opacity") {
+                event.target.classList.remove("visuallyhidden");
+            }
+        };
+        this.setLastParentCollapsedBackBreadcrumb = () => {
+            this.lastParentBreadcrumb = this.getLastParentBreadcrumb();
+            this.setBackBreadcrumbAttr();
+            if (this.lastParentBreadcrumb) {
+                this.lastParentBreadcrumb.classList.remove("hide");
+                this.lastParentBreadcrumb.classList.add("show");
+            }
+        };
+        this.revertLastParentCollapsedBreadcrumb = () => {
+            if (this.lastParentBreadcrumb) {
+                this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, "false");
+                if (this.collapsed) {
+                    this.lastParentBreadcrumb.classList.add("hide");
+                }
+            }
+        };
+        this.resizeObserverCallback = (currSize) => {
+            if (currSize !== this.deviceSize) {
+                this.deviceSize = currSize;
+                const isSmallDevice = this.deviceSize <= DEVICE_SIZES.S;
+                this.el.setAttribute("back-breadcrumb-only", `${isSmallDevice}`);
+                if (isSmallDevice) {
+                    if (this.collapsed) {
+                        this.setLastParentCollapsedBackBreadcrumb();
+                    }
+                    else {
+                        this.setBackBreadcrumb();
+                    }
+                }
+                else {
+                    const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
+                    if (this.collapsed && allBreadcrumbs.length > 2) {
+                        this.revertLastParentCollapsedBreadcrumb();
+                        this.setCollapsed();
+                    }
+                    else {
+                        allBreadcrumbs.forEach((breadcrumb) => {
+                            breadcrumb.setAttribute(this.SHOW_BACK_ICON, "false");
+                        });
+                    }
+                }
+            }
+        };
+        this.runResizeObserver = () => {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.resizeObserverCallback(getCurrentDeviceSize());
+            });
+            this.resizeObserver.observe(this.el);
+        };
+    }
+    watchBackBreadcrumbHandler() {
+        this.setBackBreadcrumb();
+    }
+    watchCollapsedHandler() {
+        this.setCollapsed();
+    }
+    watchMonochromeHandler() {
+        this.setBreadcrumbMonochrome();
+    }
+    watchThemeHandler() {
+        this.setBreadcrumbTheme();
+    }
+    componentWillLoad() {
+        this.setBreadcrumbTheme();
+        this.setBreadcrumbMonochrome();
+        if (this.backBreadcrumbOnly) {
+            this.setBackBreadcrumb();
+        }
+        else {
+            checkResizeObserver(this.runResizeObserver);
+        }
+        if (this.collapsed &&
+            this.el.querySelectorAll(this.IC_BREADCRUMB).length > 2) {
+            if (getCurrentDeviceSize() === DEVICE_SIZES.S) {
+                this.setLastParentCollapsedBackBreadcrumb();
+            }
+            else {
+                this.setCollapsed();
+            }
+        }
+        this.lastParentBreadcrumb = this.getLastParentBreadcrumb();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.lastParentBreadcrumb) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionend", this.transitionendHandler);
+        (_b = this.collapsedBreadcrumbEl) === null || _b === void 0 ? void 0 : _b.removeEventListener("click", this.clickHandler);
+    }
+    render() {
+        const { backBreadcrumbOnly, collapsed, theme } = this;
+        return (h(Host, { key: '6bee18e1a84707b5d493149d23094af6a0fb1be8', class: {
+                "ic-breadcrumb-group-back": backBreadcrumbOnly,
+                "ic-breadcrumb-group-collapsed": collapsed,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, h("nav", { key: '144ad11cead96e18ae62eba8fc2dead82e188854', "aria-label": "breadcrumbs" }, h("ol", { key: 'c101766f5e9b0e5d9a5aaebd5d0d8eda63ffc9ea' }, h("slot", { key: 'c761cdbb01472d0d8c2550254063b59fa714f722' })))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "backBreadcrumbOnly": ["watchBackBreadcrumbHandler"],
+        "collapsed": ["watchCollapsedHandler"],
+        "monochrome": ["watchMonochromeHandler"],
+        "theme": ["watchThemeHandler"]
+    }; }
+    static get style() { return IcBreadcrumbGroupStyle0; }
+}, [1, "ic-breadcrumb-group", {
+        "backBreadcrumbOnly": [4, "back-breadcrumb-only"],
+        "collapsed": [1028],
+        "monochrome": [4],
+        "theme": [1],
+        "deviceSize": [32]
+    }, undefined, {
+        "backBreadcrumbOnly": ["watchBackBreadcrumbHandler"],
+        "collapsed": ["watchCollapsedHandler"],
+        "monochrome": ["watchMonochromeHandler"],
+        "theme": ["watchThemeHandler"]
+    }]);
+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;
+    } });
+}
+
+const IcBreadcrumbGroup = BreadcrumbGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcBreadcrumbGroup, defineCustomElement };
+
+//# sourceMappingURL=ic-breadcrumb-group.js.map

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

@@ -0,0 +1 @@
+{"file":"ic-breadcrumb-group.js","mappings":";;;;;AAAA,MAAM,oBAAoB,GAAG,mvBAAmvB,CAAC;AACjxB,gCAAe,oBAAoB;;MCctB,eAAe;IAP5B;;;;QAQU,oBAAe,GAAG,EAAE,CAAC;QACrB,kBAAa,GAAG,eAAe,CAAC;QAChC,mBAAc,GAAG,gBAAgB,CAAC;QAElC,yBAAoB,GAA8B,EAAE,CAAC;QAErD,mBAAc,GAA0B,IAAI,CAAC;QAC7C,yBAAoB,GAAmC,IAAI,CAAC;QAI3D,eAAU,GAAW,YAAY,CAAC,EAAE,CAAC;;;;QAKtC,uBAAkB,GAAG,KAAK,CAAC;;;;QASV,cAAS,GAAG,KAAK,CAAC;;;;QASnC,eAAU,GAAG,KAAK,CAAC;;;;QASnB,UAAK,GAAgB,SAAS,CAAC;QAuC/B,uBAAkB,GAAG;YAC3B,KAAK,CAAC,IAAI,CACR,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAA0B,IAAI,CAAC,aAAa,CAAC,CACtE,CAAC,OAAO,CAAC,CAAC,UAAU;gBACnB,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;aAC/B,CAAC,CAAC;SACJ,CAAC;QAEM,4BAAuB,GAAG;YAChC,KAAK,CAAC,IAAI,CACR,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAA0B,IAAI,CAAC,aAAa,CAAC,CACtE,CAAC,OAAO,CAAC,CAAC,UAAU;gBACnB,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;aACzC,CAAC,CAAC;SACJ,CAAC;QAEM,sBAAiB,GAAG;YAC1B,IAAI,IAAI,CAAC,kBAAkB,EAAE;gBAC3B,IAAI,CAAC,oCAAoC,EAAE,CAAC;aAC7C;iBAAM;gBACL,IAAI,CAAC,mCAAmC,EAAE,CAAC;aAC5C;SACF,CAAC;QAEM,0BAAqB,GAAG;YAC9B,IAAI,IAAI,CAAC,oBAAoB,EAAE;gBAC7B,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;gBAChD,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;aACrE;SACF,CAAC;QAEM,4BAAuB,GAAG;YAChC,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAC7C,IAAI,CAAC,aAAa,CACnB,CAAC;YAEF,OAAO,cAAc,CAAC,MAAM,GAAG,CAAC;kBAC5B,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;kBACzC,IAAI,CAAC;SACV,CAAC;QAEM,iBAAY,GAAG;;YACrB,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,UAAU;gBAC3C,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;gBAC9C,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;aACrC,CAAC,CAAC;YAEH,IAAI,IAAI,CAAC,SAAS,EAAE;gBAClB,IAAI,CAAC,yBAAyB,EAAE,CAAC;gBACjC,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAA0B,IAAI,CAAC,aAAa,CAAC,CACtE,CAAC;gBAEF,IAAI,CAAC,oBAAoB,GAAG,cAAc;qBACvC,MAAM,CAAC,CAAC,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;qBACpC,MAAM,CACL,CAAC,UAAU,KACT,CAAC,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,8BAA8B,CAAC,CACjE,CAAC;gBACJ,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;oBAC5B,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,UAAU,KAC3C,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CACjC,CAAC;iBACH;gBAED,IAAI,IAAI,CAAC,0BAA0B,EAAE;oBACnC,MAAA,cAAc,CAAC,CAAC,CAAC,0CAAE,qBAAqB,CACtC,UAAU,EACV,IAAI,CAAC,0BAA0B,CAChC,CAAC;iBACH;aACF;iBAAM;gBACL,MAAA,IAAI,CAAC,0BAA0B,0CAAE,MAAM,EAAE,CAAC;aAC3C;SACF,CAAC;QAEM,iBAAY,GAAG;;YACrB,MAAA,IAAI,CAAC,0BAA0B,0CAAE,MAAM,EAAE,CAAC;YAC1C,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,UAAU;gBAC3C,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;gBAC3C,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;gBACpC,UAAU,CAAC;oBACT,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;iBAClC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;gBAEzB,UAAU,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;aACzE,CAAC,CAAC;YACH,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;;YAEvB,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;SACzC,CAAC;QAEM,8BAAyB,GAAG;YAClC,IAAI,IAAI,CAAC,qBAAqB,KAAK,SAAS,EAAE;gBAC5C,IAAI,CAAC,0BAA0B,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;gBAC1E,IAAI,CAAC,0BAA0B,CAAC,SAAS,CAAC,GAAG,CAC3C,8BAA8B,CAC/B,CAAC;gBACF,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBAE9D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBACjD,SAAS,CAAC,EAAE,GAAG,wBAAwB,CAAC;gBACxC,SAAS,CAAC,SAAS,GAAG,uBAAuB,CAAC;gBAC9C,SAAS,CAAC,SAAS,GAAG,MAAM,CAAC;gBAC7B,IAAI,CAAC,qBAAqB,CAAC,YAAY,CAAC,iBAAiB,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC;gBAEzE,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBACrD,aAAa,CAAC,EAAE,GAAG,4BAA4B,CAAC;gBAChD,aAAa,CAAC,SAAS,GAAG,sCAAsC,CAAC;gBACjE,aAAa,CAAC,SAAS,GAAG,MAAM,CAAC;gBACjC,IAAI,CAAC,qBAAqB,CAAC,YAAY,CACrC,kBAAkB,EAClB,aAAa,CAAC,EAAE,CACjB,CAAC;gBAEF,IAAI,CAAC,qBAAqB,CAAC,EAAE,GAAG,oBAAoB,CAAC;gBACrD,IAAI,CAAC,qBAAqB,CAAC,SAAS,GAAG,KAAK,CAAC;gBAC7C,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;gBACjE,IAAI,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;gBAExE,IAAI,CAAC,0BAA0B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;gBACtD,IAAI,CAAC,0BAA0B,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;gBAClD,IAAI,CAAC,0BAA0B,CAAC,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;aACpE;SACF,CAAC;QAEM,yBAAoB,GAAG,CAAC,KAAsB;YACpD,IAAI,KAAK,CAAC,YAAY,KAAK,SAAS,EAAE;gBACnC,KAAK,CAAC,MAAsB,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;aAClE;SACF,CAAC;QAEM,yCAAoC,GAAG;YAC7C,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;YAC3D,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7B,IAAI,IAAI,CAAC,oBAAoB,EAAE;gBAC7B,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;gBACnD,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;aACjD;SACF,CAAC;QAEM,wCAAmC,GAAG;YAC5C,IAAI,IAAI,CAAC,oBAAoB,EAAE;gBAC7B,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;gBACrE,IAAI,IAAI,CAAC,SAAS,EAAE;oBAClB,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;iBACjD;aACF;SACF,CAAC;QAEM,2BAAsB,GAAG,CAAC,QAAgB;YAChD,IAAI,QAAQ,KAAK,IAAI,CAAC,UAAU,EAAE;gBAChC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;gBAE3B,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC;gBACxD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,sBAAsB,EAAE,GAAG,aAAa,EAAE,CAAC,CAAC;gBAEjE,IAAI,aAAa,EAAE;oBACjB,IAAI,IAAI,CAAC,SAAS,EAAE;wBAClB,IAAI,CAAC,oCAAoC,EAAE,CAAC;qBAC7C;yBAAM;wBACL,IAAI,CAAC,iBAAiB,EAAE,CAAC;qBAC1B;iBACF;qBAAM;oBACL,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,CAC7C,CAAC;oBAEF,IAAI,IAAI,CAAC,SAAS,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;wBAC/C,IAAI,CAAC,mCAAmC,EAAE,CAAC;wBAC3C,IAAI,CAAC,YAAY,EAAE,CAAC;qBACrB;yBAAM;wBACL,cAAc,CAAC,OAAO,CAAC,CAAC,UAAU;4BAChC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;yBACvD,CAAC,CAAC;qBACJ;iBACF;aACF;SACF,CAAC;QAEM,sBAAiB,GAAG;YAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;gBACvC,IAAI,CAAC,sBAAsB,CAAC,oBAAoB,EAAE,CAAC,CAAC;aACrD,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACtC,CAAC;KAqBH;IA/QC,0BAA0B;QACxB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAOD,qBAAqB;QACnB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAOD,sBAAsB;QACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;IAOD,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;aAAM;YACL,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC7C;QAED,IACE,IAAI,CAAC,SAAS;YACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,GAAG,CAAC,EACvD;YACA,IAAI,oBAAoB,EAAE,KAAK,YAAY,CAAC,CAAC,EAAE;gBAC7C,IAAI,CAAC,oCAAoC,EAAE,CAAC;aAC7C;iBAAM;gBACL,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;SACF;QAED,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAC5D;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,mBAAmB,CAC5C,eAAe,EACf,IAAI,CAAC,oBAAoB,CAC1B,CAAC;QAEF,MAAA,IAAI,CAAC,qBAAqB,0CAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KAC7E;IA8LD,MAAM;QACJ,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEtD,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,0BAA0B,EAAE,kBAAkB;gBAC9C,+BAA+B,EAAE,SAAS;gBAC1C,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,IAED,0EAAgB,aAAa,IAC3B,6DACE,8DAAQ,CACL,CACD,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb) {\n  display: none;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show) {\n  display: flex;\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.ic-breadcrumb-group-collapsed)\n  ol\n  ::slotted(ic-breadcrumb.visuallyhidden) {\n  display: block;\n  opacity: 0;\n  transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade) {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.ic-breadcrumb-group-collapsed)\n    ol\n    ::slotted(ic-breadcrumb.visuallyhidden) {\n    transition: none;\n  }\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\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 IC_BREADCRUMB = \"ic-breadcrumb\";\n  private SHOW_BACK_ICON = \"show-back-icon\";\n  private collapsedBreadcrumbEl?: HTMLButtonElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[] = [];\n  private collapsedBreadcrumbWrapper?: HTMLIcBreadcrumbElement;\n  private resizeObserver: ResizeObserver | null = null;\n  private lastParentBreadcrumb: HTMLIcBreadcrumbElement | null = null;\n\n  @Element() el: HTMLIcBreadcrumbGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  /**\n   * If `true`, display only a single breadcrumb for the parent page with a back icon.\n   */\n  @Prop() backBreadcrumbOnly = false;\n  @Watch(\"backBreadcrumbOnly\")\n  watchBackBreadcrumbHandler(): void {\n    this.setBackBreadcrumb();\n  }\n\n  /**\n   * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n   */\n  @Prop({ mutable: true }) collapsed = false;\n  @Watch(\"collapsed\")\n  watchCollapsedHandler(): void {\n    this.setCollapsed();\n  }\n\n  /**\n   * If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.\n   */\n  @Prop() monochrome = false;\n  @Watch(\"monochrome\")\n  watchMonochromeHandler(): void {\n    this.setBreadcrumbMonochrome();\n  }\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n  @Watch(\"theme\")\n  watchThemeHandler(): void {\n    this.setBreadcrumbTheme();\n  }\n\n  componentWillLoad(): void {\n    this.setBreadcrumbTheme();\n    this.setBreadcrumbMonochrome();\n\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumb();\n    } else {\n      checkResizeObserver(this.runResizeObserver);\n    }\n\n    if (\n      this.collapsed &&\n      this.el.querySelectorAll(this.IC_BREADCRUMB).length > 2\n    ) {\n      if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n        this.setLastParentCollapsedBackBreadcrumb();\n      } else {\n        this.setCollapsed();\n      }\n    }\n\n    this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n  }\n\n  disconnectedCallback(): void {\n    this.lastParentBreadcrumb?.removeEventListener(\n      \"transitionend\",\n      this.transitionendHandler\n    );\n\n    this.collapsedBreadcrumbEl?.removeEventListener(\"click\", this.clickHandler);\n  }\n\n  private setBreadcrumbTheme = () => {\n    Array.from(\n      this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n    ).forEach((breadcrumb) => {\n      breadcrumb.theme = this.theme;\n    });\n  };\n\n  private setBreadcrumbMonochrome = () => {\n    Array.from(\n      this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n    ).forEach((breadcrumb) => {\n      breadcrumb.monochrome = this.monochrome;\n    });\n  };\n\n  private setBackBreadcrumb = () => {\n    if (this.backBreadcrumbOnly) {\n      this.setLastParentCollapsedBackBreadcrumb();\n    } else {\n      this.revertLastParentCollapsedBreadcrumb();\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 = this.el.querySelectorAll<HTMLIcBreadcrumbElement>(\n      this.IC_BREADCRUMB\n    );\n\n    return allBreadcrumbs.length > 1\n      ? allBreadcrumbs[allBreadcrumbs.length - 2]\n      : null;\n  };\n\n  private setCollapsed = () => {\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.remove(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"fade\");\n    });\n\n    if (this.collapsed) {\n      this.renderCollapsedBreadcrumb();\n      const allBreadcrumbs = Array.from(\n        this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n      );\n\n      this.collapsedBreadcrumbs = allBreadcrumbs\n        .splice(1, allBreadcrumbs.length - 2)\n        .filter(\n          (breadcrumb) =>\n            !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n        );\n      if (!this.backBreadcrumbOnly) {\n        this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n          breadcrumb.classList.add(\"hide\")\n        );\n      }\n\n      if (this.collapsedBreadcrumbWrapper) {\n        allBreadcrumbs[0]?.insertAdjacentElement(\n          \"afterend\",\n          this.collapsedBreadcrumbWrapper\n        );\n      }\n    } else {\n      this.collapsedBreadcrumbWrapper?.remove();\n    }\n  };\n\n  private clickHandler = () => {\n    this.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      breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n    });\n    this.collapsed = false;\n    // Set focus to first unhidden breadcrumb\n    this.collapsedBreadcrumbs[0].setFocus();\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    if (this.collapsedBreadcrumbEl === undefined) {\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(\"aria-labelledby\", ariaLabel.id);\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        ariaDescribed.id\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  };\n\n  private transitionendHandler = (event: TransitionEvent) => {\n    if (event.propertyName === \"opacity\") {\n      (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n    }\n  };\n\n  private setLastParentCollapsedBackBreadcrumb = () => {\n    this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    this.setBackBreadcrumbAttr();\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.remove(\"hide\");\n      this.lastParentBreadcrumb.classList.add(\"show\");\n    }\n  };\n\n  private revertLastParentCollapsedBreadcrumb = () => {\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n      if (this.collapsed) {\n        this.lastParentBreadcrumb.classList.add(\"hide\");\n      }\n    }\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      const isSmallDevice = this.deviceSize <= DEVICE_SIZES.S;\n      this.el.setAttribute(\"back-breadcrumb-only\", `${isSmallDevice}`);\n\n      if (isSmallDevice) {\n        if (this.collapsed) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setBackBreadcrumb();\n        }\n      } else {\n        const allBreadcrumbs = Array.from(\n          this.el.querySelectorAll(this.IC_BREADCRUMB)\n        );\n\n        if (this.collapsed && allBreadcrumbs.length > 2) {\n          this.revertLastParentCollapsedBreadcrumb();\n          this.setCollapsed();\n        } else {\n          allBreadcrumbs.forEach((breadcrumb) => {\n            breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n          });\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const { backBreadcrumbOnly, collapsed, theme } = this;\n\n    return (\n      <Host\n        class={{\n          \"ic-breadcrumb-group-back\": backBreadcrumbOnly,\n          \"ic-breadcrumb-group-collapsed\": collapsed,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <nav aria-label=\"breadcrumbs\">\n          <ol>\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ic-breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IcBreadcrumb extends Components.IcBreadcrumb, HTMLElement {}
+export const IcBreadcrumb: {
+    prototype: IcBreadcrumb;
+    new (): IcBreadcrumb;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ic-breadcrumb.js

@@ -0,0 +1,8 @@
+import { B as Breadcrumb, d as defineCustomElement$1 } from './ic-breadcrumb2.js';
+
+const IcBreadcrumb = Breadcrumb;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcBreadcrumb, defineCustomElement };
+
+//# sourceMappingURL=ic-breadcrumb.js.map

package/components/ic-breadcrumb.js.map

@@ -0,0 +1 @@
+{"file":"ic-breadcrumb.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ic-breadcrumb2.js

@@ -0,0 +1,145 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as chevronIcon } from './chevron-icon.js';
+import { n as getSlotElements, i as isSlotUsed } from './helpers.js';
+import { d as defineCustomElement$1 } from './ic-link2.js';
+
+const backIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>
+</svg>
+`;
+
+const icBreadcrumbCss = ":host{display:block;margin:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}: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,:host(.ic-breadcrumb-monochrome) .chevron svg{color:var(--ic-breadcrumb-icon-chevron)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-breadcrumb-icon)}:host(.ic-breadcrumb-monochrome) .back-icon svg{color:var(--ic-breadcrumb-icon-monochrome)}:host(.ic-breadcrumb-back){display:flex;align-items:center}:host(.ic-breadcrumb-back) .chevron{display:none}ic-link{--breadcrumb-link-display:inline-flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host(.ic-breadcrumb-aria-current-page){cursor:text}:host(.ic-breadcrumb-aria-current-page) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs);color:var(--ic-breadcrumb-text)}:host(.ic-breadcrumb-aria-current-page).ic-breadcrumb-monochrome .current-page-container{color:var(--ic-breadcrumb-text-monochrome)}:host(.ic-breadcrumb-aria-current-page) slot{pointer-events:none}: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-color-hyperlink-default);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:var(--ic-hc-focus-outline);border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}.slotted-link-container{gap:var(--ic-space-xs);display:flex}.slotted-link-container .back-icon{width:1.5rem;height:1.5rem}.slotted-link-container .link-wrapper{line-height:1.5rem}@media (forced-colors: active){.back-icon svg{color:currentcolor}}@supports (text-underline-offset: 25%){ic-link{--breadcrumb-link-display:flex}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}";
+const IcBreadcrumbStyle0 = icBreadcrumbCss;
+
+const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.HREF_ATTR = "href";
+        this.linkSlotContent = null;
+        this.slottedLinkEl = null;
+        this.slottedLinkHref = null;
+        /**
+         * If `true`, aria-current will be set on the breadcrumb.
+         */
+        this.current = false;
+        /**
+         * @internal If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.
+         */
+        this.monochrome = false;
+        /**
+         * @internal If `true`, back icon will be displayed.
+         */
+        this.showBackIcon = false;
+        /**
+         * @internal Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        // Prevent focus on breadcrumb if current page and contains slotted link
+        this.updatedSlottedLinkFocus = () => {
+            var _a, _b;
+            // Sets tabindex on wrong element in unit test snapshots
+            // - related to known Jest issue: https://github.com/ionic-team/stencil/issues/2830
+            if (this.linkSlotContent) {
+                this.linkSlotContent.tabIndex = this.current ? -1 : 0; // Prevent focus
+            }
+            if (this.current) {
+                (_a = this.slottedLinkEl) === null || _a === void 0 ? void 0 : _a.removeAttribute(this.HREF_ATTR); // Prevent screen reader announcing breadcrumb as a link
+            }
+            else if (this.slottedLinkHref) {
+                (_b = this.slottedLinkEl) === null || _b === void 0 ? void 0 : _b.setAttribute(this.HREF_ATTR, this.slottedLinkHref);
+            }
+        };
+        this.getSlottedLinkEl = () => {
+            if (!this.linkSlotContent)
+                return null;
+            return this.linkSlotContent.hasAttribute(this.HREF_ATTR)
+                ? this.linkSlotContent
+                : this.linkSlotContent.querySelector("[href]");
+        };
+        this.renderBackIcon = () => (h("div", { class: "back-icon", innerHTML: backIcon }));
+    }
+    watchCurrentHandler() {
+        this.updatedSlottedLinkFocus();
+        this.el.ariaCurrent = this.current ? "page" : null;
+    }
+    componentDidLoad() {
+        var _a, _b;
+        const slottedLinkWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".link-wrapper");
+        if (slottedLinkWrapper) {
+            const slotEls = getSlotElements(slottedLinkWrapper);
+            if (slotEls) {
+                this.linkSlotContent = slotEls[0];
+                this.slottedLinkEl = this.getSlottedLinkEl();
+                this.slottedLinkHref = ((_b = this.slottedLinkEl) === null || _b === void 0 ? void 0 : _b.getAttribute("href")) || null;
+            }
+            this.updatedSlottedLinkFocus();
+        }
+    }
+    componentWillRender() {
+        const icLink = this.el.querySelector("ic-link");
+        if (icLink) {
+            const CURRENT_PAGE = "current-page";
+            icLink.classList.remove(CURRENT_PAGE);
+            if (this.current && !icLink.classList.contains(CURRENT_PAGE)) {
+                icLink.classList.add("breadcrumb-link", CURRENT_PAGE);
+            }
+        }
+    }
+    /**
+     * Sets focus on the breadcrumb.
+     */
+    async setFocus() {
+        var _a, _b;
+        (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-link")) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+    render() {
+        const { current, href, monochrome, pageTitle, showBackIcon, theme } = this;
+        const describedById = `${pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.toLowerCase().replace(" ", "-")}-describedby`;
+        return (h(Host, { key: 'a7096975249f31144ffd6cd3c4cf6953169118ee', class: {
+                "ic-breadcrumb-back": showBackIcon,
+                "ic-breadcrumb-monochrome": monochrome,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`ic-breadcrumb-aria-current-page`]: current,
+            }, "aria-current": current && "page", role: "listitem" }, h("div", { key: '8b8254900371f6888fcbf7c9ef800acdb6804dfb', class: "breadcrumb" }, h("span", { key: '1a0159b54b3f432098ba881c6563eaf563916872', innerHTML: chevronIcon, class: "chevron", "aria-hidden": "true" }), showBackIcon && (h("span", { key: '512f88714836b57162c1920cbea4eb1203f7573b', id: describedById, class: "hide" }, `Back to ${pageTitle}`)), !href ? (h("div", { class: "slotted-link-container" }, showBackIcon && this.renderBackIcon(), h("span", { class: "link-wrapper" }, h("slot", null)))) : current ? (h("span", { class: "current-page-container" }, isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle)) : (h("ic-link", { theme: theme, monochrome: monochrome, href: href, class: "breadcrumb-link", "aria-describedby": showBackIcon && describedById }, showBackIcon && this.renderBackIcon(), isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return this; }
+    static get watchers() { return {
+        "current": ["watchCurrentHandler"]
+    }; }
+    static get style() { return IcBreadcrumbStyle0; }
+}, [17, "ic-breadcrumb", {
+        "current": [4],
+        "href": [1],
+        "monochrome": [4],
+        "pageTitle": [1, "page-title"],
+        "showBackIcon": [516, "show-back-icon"],
+        "theme": [1],
+        "setFocus": [64]
+    }, undefined, {
+        "current": ["watchCurrentHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-breadcrumb", "ic-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-breadcrumb":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Breadcrumb);
+            }
+            break;
+        case "ic-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Breadcrumb as B, defineCustomElement as d };
+
+//# sourceMappingURL=ic-breadcrumb2.js.map

package/components/ic-breadcrumb2.js.map

@@ -0,0 +1 @@
+{"file":"ic-breadcrumb2.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,k+EAAk+E,CAAC;AAC3/E,2BAAe,eAAe;;MCwBjB,UAAU;IAPvB;;;;QAQU,cAAS,GAAG,MAAM,CAAC;QACnB,oBAAe,GAAuB,IAAI,CAAC;QAC3C,kBAAa,GAAuB,IAAI,CAAC;QACzC,oBAAe,GAAkB,IAAI,CAAC;;;;QAOtC,YAAO,GAAG,KAAK,CAAC;;;;QAehB,eAAU,GAAG,KAAK,CAAC;;;;QAUF,iBAAY,GAAG,KAAK,CAAC;;;;QAKtC,UAAK,GAAgB,SAAS,CAAC;;QAG/B,4BAAuB,GAAG;;;;YAGhC,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;aACvD;YAED,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,MAAA,IAAI,CAAC,aAAa,0CAAE,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;aACrD;iBAAM,IAAI,IAAI,CAAC,eAAe,EAAE;gBAC/B,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;aACxE;SACF,CAAC;QAEM,qBAAgB,GAAG;YACzB,IAAI,CAAC,IAAI,CAAC,eAAe;gBAAE,OAAO,IAAI,CAAC;YAEvC,OAAO,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC;kBACpD,IAAI,CAAC,eAAe;kBACpB,IAAI,CAAC,eAAe,CAAC,aAAa,CAAc,QAAQ,CAAC,CAAC;SAC/D,CAAC;QAqCM,mBAAc,GAAG,OACvB,WAAK,KAAK,EAAC,WAAW,EAAC,SAAS,EAAE,QAAQ,GAAQ,CACnD,CAAC;KAwDH;IAlJC,mBAAmB;QACjB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;KACpD;IAkDD,gBAAgB;;QACd,MAAM,kBAAkB,GACtB,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,eAAe,CAAC,CAAC;QAErD,IAAI,kBAAkB,EAAE;YACtB,MAAM,OAAO,GAAG,eAAe,CAAC,kBAAkB,CAAC,CAAC;YACpD,IAAI,OAAO,EAAE;gBACX,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,CAAC,CAAgB,CAAC;gBACjD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC7C,IAAI,CAAC,eAAe,GAAG,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,MAAM,CAAC,KAAI,IAAI,CAAC;aACzE;YACD,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAChC;KACF;IAED,mBAAmB;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAChD,IAAI,MAAM,EAAE;YACV,MAAM,YAAY,GAAG,cAAc,CAAC;YACpC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YAEtC,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;gBAC5D,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;aACvD;SACF;KACF;;;;IAMD,MAAM,QAAQ;;QACZ,MAAA,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,SAAS,CAAC,0CAAE,KAAK,EAAE,CAAC;KACvD;IAMD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAC3E,MAAM,aAAa,GAAG,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAC9B,WAAW,GACZ,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC;QAEnC,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,oBAAoB,EAAE,YAAY;gBAClC,0BAA0B,EAAE,UAAU;gBACtC,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;gBAC1C,CAAC,iCAAiC,GAAG,OAAO;aAC7C,kBACa,OAAO,IAAI,MAAM,EAC/B,IAAI,EAAC,UAAU,IAEf,4DAAK,KAAK,EAAC,YAAY,IACrB,6DAAM,SAAS,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,iBAAa,MAAM,GAAG,EAClE,YAAY,KACX,6DACE,EAAE,EAAE,aAAa,EACjB,KAAK,EAAC,MAAM,IACZ,WAAW,SAAS,EAAE,CAAQ,CACjC,EACA,CAAC,IAAI,IACJ,WAAK,KAAK,EAAC,wBAAwB,IAChC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,EACtC,YAAM,KAAK,EAAC,cAAc,IACxB,eAAQ,CACH,CACH,IACJ,OAAO,IACT,YAAM,KAAK,EAAC,wBAAwB,IACjC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,EACxD,SAAS,CACL,KAEP,eACE,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,iBAAiB,sBACL,YAAY,IAAI,aAAa,IAE9C,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,EACrC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,EACxD,SAAS,CACF,CACX,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"sourcesContent":[":host {\n  display: block;\n  margin: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n:host .breadcrumb {\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  gap: var(--ic-space-xs);\n  min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n:host .chevron svg,\n:host(.ic-breadcrumb-monochrome) .chevron svg {\n  color: var(--ic-breadcrumb-icon-chevron);\n}\n\n:host(:first-child) .chevron {\n  display: none;\n}\n\n.back-icon svg {\n  color: var(--ic-breadcrumb-icon);\n}\n\n:host(.ic-breadcrumb-monochrome) .back-icon svg {\n  color: var(--ic-breadcrumb-icon-monochrome);\n}\n\n:host(.ic-breadcrumb-back) {\n  display: flex;\n  align-items: center;\n}\n\n:host(.ic-breadcrumb-back) .chevron {\n  display: none;\n}\n\nic-link {\n  --breadcrumb-link-display: inline-flex;\n  --breadcrumb-link-align-items: center;\n  --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host(.ic-breadcrumb-aria-current-page) {\n  cursor: text;\n}\n\n:host(.ic-breadcrumb-aria-current-page) .current-page-container {\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xs);\n  color: var(--ic-breadcrumb-text);\n}\n\n:host(.ic-breadcrumb-aria-current-page).ic-breadcrumb-monochrome\n  .current-page-container {\n  color: var(--ic-breadcrumb-text-monochrome);\n}\n\n:host(.ic-breadcrumb-aria-current-page) slot {\n  pointer-events: none;\n}\n\n:host(.collapsed-breadcrumb-wrapper) {\n  margin-right: var(--ic-space-xs) !important;\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb) {\n  border: none;\n  background-color: transparent;\n  color: var(--ic-color-hyperlink-default);\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n  cursor: pointer;\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n  outline: var(--ic-hc-focus-outline);\n  border-bottom: 0.25rem solid !important;\n  margin-bottom: -0.25rem !important;\n  text-decoration: none;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n  display: none;\n}\n\n.slotted-link-container {\n  gap: var(--ic-space-xs);\n  display: flex;\n}\n\n.slotted-link-container .back-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n.slotted-link-container .link-wrapper {\n  line-height: 1.5rem;\n}\n\n@media (forced-colors: active) {\n  .back-icon svg {\n    color: currentcolor;\n  }\n}\n\n@supports (text-underline-offset: 25%) {\n  ic-link {\n    --breadcrumb-link-display: flex;\n  }\n\n  :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n  :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n    text-decoration-line: underline;\n    text-decoration-thickness: 25%;\n    text-underline-offset: 25%;\n    border-bottom: 0 !important;\n    margin-bottom: 0 !important;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { getSlotElements, isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be rendered to the left of the breadcrumb page title.\n */\n@Component({\n  tag: \"ic-breadcrumb\",\n  styleUrl: \"ic-breadcrumb.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Breadcrumb {\n  private HREF_ATTR = \"href\";\n  private linkSlotContent: HTMLElement | null = null;\n  private slottedLinkEl: HTMLElement | null = null;\n  private slottedLinkHref: string | null = null;\n\n  @Element() el: HTMLIcBreadcrumbElement;\n\n  /**\n   * If `true`, aria-current will be set on the breadcrumb.\n   */\n  @Prop() current = false;\n  @Watch(\"current\")\n  watchCurrentHandler(): void {\n    this.updatedSlottedLinkFocus();\n    this.el.ariaCurrent = this.current ? \"page\" : null;\n  }\n\n  /**\n   * The URL that the breadcrumb link points to.\n   */\n  @Prop() href?: string;\n\n  /**\n   * @internal If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.\n   */\n  @Prop() monochrome = false;\n\n  /**\n   * The title of the breadcrumb.\n   */\n  @Prop() pageTitle!: string;\n\n  /**\n   * @internal If `true`, back icon will be displayed.\n   */\n  @Prop({ reflect: true }) showBackIcon = false;\n\n  /**\n   * @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n\n  // Prevent focus on breadcrumb if current page and contains slotted link\n  private updatedSlottedLinkFocus = () => {\n    // Sets tabindex on wrong element in unit test snapshots\n    // - related to known Jest issue: https://github.com/ionic-team/stencil/issues/2830\n    if (this.linkSlotContent) {\n      this.linkSlotContent.tabIndex = this.current ? -1 : 0; // Prevent focus\n    }\n\n    if (this.current) {\n      this.slottedLinkEl?.removeAttribute(this.HREF_ATTR); // Prevent screen reader announcing breadcrumb as a link\n    } else if (this.slottedLinkHref) {\n      this.slottedLinkEl?.setAttribute(this.HREF_ATTR, this.slottedLinkHref);\n    }\n  };\n\n  private getSlottedLinkEl = () => {\n    if (!this.linkSlotContent) return null;\n\n    return this.linkSlotContent.hasAttribute(this.HREF_ATTR)\n      ? this.linkSlotContent\n      : this.linkSlotContent.querySelector<HTMLElement>(\"[href]\");\n  };\n\n  componentDidLoad(): void {\n    const slottedLinkWrapper =\n      this.el.shadowRoot?.querySelector(\".link-wrapper\");\n\n    if (slottedLinkWrapper) {\n      const slotEls = getSlotElements(slottedLinkWrapper);\n      if (slotEls) {\n        this.linkSlotContent = slotEls[0] as HTMLElement;\n        this.slottedLinkEl = this.getSlottedLinkEl();\n        this.slottedLinkHref = this.slottedLinkEl?.getAttribute(\"href\") || null;\n      }\n      this.updatedSlottedLinkFocus();\n    }\n  }\n\n  componentWillRender(): void {\n    const icLink = this.el.querySelector(\"ic-link\");\n    if (icLink) {\n      const CURRENT_PAGE = \"current-page\";\n      icLink.classList.remove(CURRENT_PAGE);\n\n      if (this.current && !icLink.classList.contains(CURRENT_PAGE)) {\n        icLink.classList.add(\"breadcrumb-link\", CURRENT_PAGE);\n      }\n    }\n  }\n\n  /**\n   * Sets focus on the breadcrumb.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot?.querySelector(\"ic-link\")?.focus();\n  }\n\n  private renderBackIcon = () => (\n    <div class=\"back-icon\" innerHTML={backIcon}></div>\n  );\n\n  render() {\n    const { current, href, monochrome, pageTitle, showBackIcon, theme } = this;\n    const describedById = `${pageTitle\n      ?.toLowerCase()\n      .replace(\" \", \"-\")}-describedby`;\n\n    return (\n      <Host\n        class={{\n          \"ic-breadcrumb-back\": showBackIcon,\n          \"ic-breadcrumb-monochrome\": monochrome,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [`ic-breadcrumb-aria-current-page`]: current,\n        }}\n        aria-current={current && \"page\"}\n        role=\"listitem\"\n      >\n        <div class=\"breadcrumb\">\n          <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n          {showBackIcon && (\n            <span\n              id={describedById}\n              class=\"hide\"\n            >{`Back to ${pageTitle}`}</span>\n          )}\n          {!href ? (\n            <div class=\"slotted-link-container\">\n              {showBackIcon && this.renderBackIcon()}\n              <span class=\"link-wrapper\">\n                <slot />\n              </span>\n            </div>\n          ) : current ? (\n            <span class=\"current-page-container\">\n              {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n              {pageTitle}\n            </span>\n          ) : (\n            <ic-link\n              theme={theme}\n              monochrome={monochrome}\n              href={href}\n              class=\"breadcrumb-link\"\n              aria-describedby={showBackIcon && describedById}\n            >\n              {showBackIcon && this.renderBackIcon()}\n              {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n              {pageTitle}\n            </ic-link>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ic-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IcButton extends Components.IcButton, HTMLElement {}
+export const IcButton: {
+    prototype: IcButton;
+    new (): IcButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ic-button.js

@@ -0,0 +1,8 @@
+import { B as Button, d as defineCustomElement$1 } from './ic-button2.js';
+
+const IcButton = Button;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcButton, defineCustomElement };
+
+//# sourceMappingURL=ic-button.js.map

package/components/ic-button.js.map

@@ -0,0 +1 @@
+{"file":"ic-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}