@ukic/canary-web-components 3.0.0-canary.17 → 3.0.0-canary.18

package/dist/cjs/ic-breadcrumb.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d337cd8a.js');
 const chevronIcon = require('./chevron-icon-3dedd973.js');
-const helpers = require('./helpers-e2bbcec9.js');
+const helpers = require('./helpers-f4e7322b.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"/>
@@ -18,6 +18,9 @@ const Breadcrumb = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.HREF_ATTR = "href";
+        this.linkSlotContent = null;
+        this.slottedLinkEl = null;
+        this.slottedLinkHref = null;
         /**
          * If `true`, aria-current will be set on the breadcrumb.
          */
@@ -36,54 +39,27 @@ const Breadcrumb = class {
         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.slottedLinkEl) {
-                if (this.current) {
-                    this.slottedLinkEl.removeAttribute(this.HREF_ATTR); // Prevent screen reader announcing breadcrumb as a link
-                }
-                else {
-                    this.slottedLinkHref &&
-                        this.slottedLinkEl.setAttribute(this.HREF_ATTR, this.slottedLinkHref);
-                }
+            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 = () => {
-            const link = this.linkSlotContent;
-            if (link) {
-                const elWithHref = link.hasAttribute(this.HREF_ATTR)
-                    ? link
-                    : link.querySelector("[href]");
-                return elWithHref;
-            }
-            return null;
+            if (!this.linkSlotContent)
+                return null;
+            return this.linkSlotContent.hasAttribute(this.HREF_ATTR)
+                ? this.linkSlotContent
+                : this.linkSlotContent.querySelector("[href]");
         };
         this.renderBackIcon = () => (index.h("div", { class: "back-icon", innerHTML: backIcon }));
-        this.renderDefaultBreadcrumb = (current, pageTitle, describedById, href) => {
-            const hasPageTitle = pageTitle !== null && helpers.isPropDefined(pageTitle) && pageTitle !== "";
-            if (current && hasPageTitle) {
-                return (index.h("span", { class: {
-                        "current-page-container": current,
-                    } }, helpers.isSlotUsed(this.el, "icon") && index.h("slot", { name: "icon" }), pageTitle));
-            }
-            return (index.h("ic-link", { theme: this.theme, monochrome: this.monochrome, href: href, class: "breadcrumb-link", "aria-describedby": this.showBackIcon && describedById && describedById }, this.showBackIcon && this.renderBackIcon(), helpers.isSlotUsed(this.el, "icon") && index.h("slot", { name: "icon" }), pageTitle));
-        };
-        this.setSlottedCurrentPageClass = () => {
-            const icLink = this.el.querySelector("ic-link");
-            const currentPage = "current-page";
-            if (icLink) {
-                icLink.classList.remove(currentPage);
-                if (this.current) {
-                    const hasCurrentPageClass = icLink.classList.contains(currentPage);
-                    if (!hasCurrentPageClass) {
-                        icLink.classList.add("breadcrumb-link", currentPage);
-                    }
-                }
-            }
-        };
     }
     watchCurrentHandler() {
         this.updatedSlottedLinkFocus();
@@ -96,14 +72,21 @@ const Breadcrumb = class {
             const slotEls = helpers.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.slottedLinkEl = this.getSlottedLinkEl();
-            this.slottedLinkHref = (_b = this.slottedLinkEl) === null || _b === void 0 ? void 0 : _b.getAttribute("href");
             this.updatedSlottedLinkFocus();
         }
     }
     componentWillRender() {
-        this.setSlottedCurrentPageClass();
+        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.
@@ -113,15 +96,13 @@ const Breadcrumb = class {
         (_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, pageTitle } = this;
-        const describedById = `${pageTitle && pageTitle.toLowerCase().replace(" ", "-")}-describedby`;
-        const hasPageTitle = pageTitle !== null && helpers.isPropDefined(pageTitle) && pageTitle !== "";
-        const hasHref = href !== null && helpers.isPropDefined(href) && href !== "";
-        return (index.h(index.Host, { key: '29422d3d1b30d190d6233a644ad70df833478edd', class: {
-                "ic-breadcrumb-back": !!this.showBackIcon,
-                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-                "ic-breadcrumb-monochrome": !!this.monochrome,
-            }, "aria-current": current && "page", role: "listitem" }, index.h("div", { key: '1f8c4f0fca86a3d08df82674e33cabe7419f7616', class: "breadcrumb" }, index.h("span", { key: '9761c21d30b9e55e8cf5d3517ada73fa4d73710b', innerHTML: chevronIcon.Chevron, class: "chevron", "aria-hidden": "true" }), this.showBackIcon && describedById && (index.h("span", { key: 'ad6be34d684a28dd063895c73f35ed65a3741dc9', id: describedById, class: "hide" }, `Back to ${pageTitle}`)), hasPageTitle && hasHref ? (this.renderDefaultBreadcrumb(!!current, pageTitle, describedById, href)) : (index.h("div", { class: "slotted-link-container" }, this.showBackIcon && this.renderBackIcon(), index.h("span", { class: "link-wrapper" }, index.h("slot", null)))))));
+        const { current, href, monochrome, pageTitle, showBackIcon, theme } = this;
+        const describedById = `${pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.toLowerCase().replace(" ", "-")}-describedby`;
+        return (index.h(index.Host, { key: '0a6d1443010427dbc75347c9c69b7c40680be25f', class: {
+                "ic-breadcrumb-back": showBackIcon,
+                "ic-breadcrumb-monochrome": monochrome,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, "aria-current": current && "page", role: "listitem" }, index.h("div", { key: 'bd351348bd835963705c29c5aa4e857c3752d645', class: "breadcrumb" }, index.h("span", { key: '9a4e28f31aa1c8cf2e111a0ce64902abba338461', innerHTML: chevronIcon.Chevron, class: "chevron", "aria-hidden": "true" }), showBackIcon && (index.h("span", { key: '289414d58963cea6e68b782ba36df782690db04a', id: describedById, class: "hide" }, `Back to ${pageTitle}`)), !href ? (index.h("div", { class: "slotted-link-container" }, showBackIcon && this.renderBackIcon(), index.h("span", { class: "link-wrapper" }, index.h("slot", null)))) : current ? (index.h("span", { class: "current-page-container" }, helpers.isSlotUsed(this.el, "icon") && index.h("slot", { name: "icon" }), pageTitle)) : (index.h("ic-link", { theme: theme, monochrome: monochrome, href: href, class: "breadcrumb-link", "aria-describedby": showBackIcon && describedById }, showBackIcon && this.renderBackIcon(), helpers.isSlotUsed(this.el, "icon") && index.h("slot", { name: "icon" }), pageTitle)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ic-breadcrumb.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-breadcrumb.entry.cjs.js","mappings":"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","names":["h","isPropDefined","isSlotUsed","getSlotElements","Host","chevronIcon"],"sources":["../web-components/dist/collection/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","../web-components/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js"],"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([aria-current=\"page\"]) {\n  cursor: text;\n}\n\n:host([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([aria-current=\"page\"].ic-breadcrumb-monochrome) .current-page-container {\n  color: var(--ic-breadcrumb-text-monochrome);\n}\n\n:host([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 { Host, h, } from \"@stencil/core\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { getSlotElements, isPropDefined, isSlotUsed, } from \"../../utils/helpers\";\n/**\n * @slot icon - Content will be rendered to the left of the breadcrumb page title.\n */\nexport class Breadcrumb {\n    constructor() {\n        this.HREF_ATTR = \"href\";\n        /**\n         * If `true`, aria-current will be set on the breadcrumb.\n         */\n        this.current = false;\n        /**\n         * @internal If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.\n         */\n        this.monochrome = false;\n        /**\n         * @internal If `true`, back icon will be displayed.\n         */\n        this.showBackIcon = false;\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        this.theme = \"inherit\";\n        // Prevent focus on breadcrumb if current page and contains slotted link\n        this.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            if (this.slottedLinkEl) {\n                if (this.current) {\n                    this.slottedLinkEl.removeAttribute(this.HREF_ATTR); // Prevent screen reader announcing breadcrumb as a link\n                }\n                else {\n                    this.slottedLinkHref &&\n                        this.slottedLinkEl.setAttribute(this.HREF_ATTR, this.slottedLinkHref);\n                }\n            }\n        };\n        this.getSlottedLinkEl = () => {\n            const link = this.linkSlotContent;\n            if (link) {\n                const elWithHref = link.hasAttribute(this.HREF_ATTR)\n                    ? link\n                    : link.querySelector(\"[href]\");\n                return elWithHref;\n            }\n            return null;\n        };\n        this.renderBackIcon = () => (h(\"div\", { class: \"back-icon\", innerHTML: backIcon }));\n        this.renderDefaultBreadcrumb = (current, pageTitle, describedById, href) => {\n            const hasPageTitle = pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n            if (current && hasPageTitle) {\n                return (h(\"span\", { class: {\n                        \"current-page-container\": current,\n                    } }, isSlotUsed(this.el, \"icon\") && h(\"slot\", { name: \"icon\" }), pageTitle));\n            }\n            return (h(\"ic-link\", { theme: this.theme, monochrome: this.monochrome, href: href, class: \"breadcrumb-link\", \"aria-describedby\": this.showBackIcon && describedById && describedById }, this.showBackIcon && this.renderBackIcon(), isSlotUsed(this.el, \"icon\") && h(\"slot\", { name: \"icon\" }), pageTitle));\n        };\n        this.setSlottedCurrentPageClass = () => {\n            const icLink = this.el.querySelector(\"ic-link\");\n            const currentPage = \"current-page\";\n            if (icLink) {\n                icLink.classList.remove(currentPage);\n                if (this.current) {\n                    const hasCurrentPageClass = icLink.classList.contains(currentPage);\n                    if (!hasCurrentPageClass) {\n                        icLink.classList.add(\"breadcrumb-link\", currentPage);\n                    }\n                }\n            }\n        };\n    }\n    watchCurrentHandler() {\n        this.updatedSlottedLinkFocus();\n        this.el.ariaCurrent = this.current ? \"page\" : null;\n    }\n    componentDidLoad() {\n        var _a, _b;\n        const slottedLinkWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(\".link-wrapper\");\n        if (slottedLinkWrapper) {\n            const slotEls = getSlotElements(slottedLinkWrapper);\n            if (slotEls) {\n                this.linkSlotContent = slotEls[0];\n            }\n            this.slottedLinkEl = this.getSlottedLinkEl();\n            this.slottedLinkHref = (_b = this.slottedLinkEl) === null || _b === void 0 ? void 0 : _b.getAttribute(\"href\");\n            this.updatedSlottedLinkFocus();\n        }\n    }\n    componentWillRender() {\n        this.setSlottedCurrentPageClass();\n    }\n    /**\n     * Sets focus on the breadcrumb.\n     */\n    async setFocus() {\n        var _a, _b;\n        (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(\"ic-link\")) === null || _b === void 0 ? void 0 : _b.focus();\n    }\n    render() {\n        const { current, href, pageTitle } = this;\n        const describedById = `${pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")}-describedby`;\n        const hasPageTitle = pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n        const hasHref = href !== null && isPropDefined(href) && href !== \"\";\n        return (h(Host, { key: '29422d3d1b30d190d6233a644ad70df833478edd', class: {\n                \"ic-breadcrumb-back\": !!this.showBackIcon,\n                [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n                \"ic-breadcrumb-monochrome\": !!this.monochrome,\n            }, \"aria-current\": current && \"page\", role: \"listitem\" }, h(\"div\", { key: '1f8c4f0fca86a3d08df82674e33cabe7419f7616', class: \"breadcrumb\" }, h(\"span\", { key: '9761c21d30b9e55e8cf5d3517ada73fa4d73710b', innerHTML: chevronIcon, class: \"chevron\", \"aria-hidden\": \"true\" }), this.showBackIcon && describedById && (h(\"span\", { key: 'ad6be34d684a28dd063895c73f35ed65a3741dc9', id: describedById, class: \"hide\" }, `Back to ${pageTitle}`)), hasPageTitle && hasHref ? (this.renderDefaultBreadcrumb(!!current, pageTitle, describedById, href)) : (h(\"div\", { class: \"slotted-link-container\" }, this.showBackIcon && this.renderBackIcon(), h(\"span\", { class: \"link-wrapper\" }, h(\"slot\", null)))))));\n    }\n    static get is() { return \"ic-breadcrumb\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get delegatesFocus() { return true; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ic-breadcrumb.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-breadcrumb.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"current\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, aria-current will be set on the breadcrumb.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"current\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"href\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The URL that the breadcrumb link points to.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"href\",\n                \"reflect\": false\n            },\n            \"monochrome\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"monochrome\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"pageTitle\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": true,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The title of the breadcrumb.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"page-title\",\n                \"reflect\": false\n            },\n            \"showBackIcon\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"If `true`, back icon will be displayed.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"show-back-icon\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"theme\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcThemeMode\",\n                    \"resolved\": \"\\\"dark\\\" | \\\"inherit\\\" | \\\"light\\\" | undefined\",\n                    \"references\": {\n                        \"IcThemeMode\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcThemeMode\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"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                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"theme\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"inherit\\\"\"\n            }\n        };\n    }\n    static get methods() {\n        return {\n            \"setFocus\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Sets focus on the breadcrumb.\",\n                    \"tags\": []\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"current\",\n                \"methodName\": \"watchCurrentHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=ic-breadcrumb.js.map\n"],"version":3}
+{"file":"ic-breadcrumb.entry.cjs.js","mappings":"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","names":["h","getSlotElements","Host","chevronIcon","isSlotUsed"],"sources":["../web-components/dist/collection/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","../web-components/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js"],"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([aria-current=\"page\"]) {\n  cursor: text;\n}\n\n:host([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([aria-current=\"page\"].ic-breadcrumb-monochrome) .current-page-container {\n  color: var(--ic-breadcrumb-text-monochrome);\n}\n\n:host([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 { Host, h, } from \"@stencil/core\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { getSlotElements, isSlotUsed } from \"../../utils/helpers\";\n/**\n * @slot icon - Content will be rendered to the left of the breadcrumb page title.\n */\nexport class Breadcrumb {\n    constructor() {\n        this.HREF_ATTR = \"href\";\n        this.linkSlotContent = null;\n        this.slottedLinkEl = null;\n        this.slottedLinkHref = null;\n        /**\n         * If `true`, aria-current will be set on the breadcrumb.\n         */\n        this.current = false;\n        /**\n         * @internal If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.\n         */\n        this.monochrome = false;\n        /**\n         * @internal If `true`, back icon will be displayed.\n         */\n        this.showBackIcon = false;\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        this.theme = \"inherit\";\n        // Prevent focus on breadcrumb if current page and contains slotted link\n        this.updatedSlottedLinkFocus = () => {\n            var _a, _b;\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            if (this.current) {\n                (_a = this.slottedLinkEl) === null || _a === void 0 ? void 0 : _a.removeAttribute(this.HREF_ATTR); // Prevent screen reader announcing breadcrumb as a link\n            }\n            else if (this.slottedLinkHref) {\n                (_b = this.slottedLinkEl) === null || _b === void 0 ? void 0 : _b.setAttribute(this.HREF_ATTR, this.slottedLinkHref);\n            }\n        };\n        this.getSlottedLinkEl = () => {\n            if (!this.linkSlotContent)\n                return null;\n            return this.linkSlotContent.hasAttribute(this.HREF_ATTR)\n                ? this.linkSlotContent\n                : this.linkSlotContent.querySelector(\"[href]\");\n        };\n        this.renderBackIcon = () => (h(\"div\", { class: \"back-icon\", innerHTML: backIcon }));\n    }\n    watchCurrentHandler() {\n        this.updatedSlottedLinkFocus();\n        this.el.ariaCurrent = this.current ? \"page\" : null;\n    }\n    componentDidLoad() {\n        var _a, _b;\n        const slottedLinkWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(\".link-wrapper\");\n        if (slottedLinkWrapper) {\n            const slotEls = getSlotElements(slottedLinkWrapper);\n            if (slotEls) {\n                this.linkSlotContent = slotEls[0];\n                this.slottedLinkEl = this.getSlottedLinkEl();\n                this.slottedLinkHref = ((_b = this.slottedLinkEl) === null || _b === void 0 ? void 0 : _b.getAttribute(\"href\")) || null;\n            }\n            this.updatedSlottedLinkFocus();\n        }\n    }\n    componentWillRender() {\n        const icLink = this.el.querySelector(\"ic-link\");\n        if (icLink) {\n            const CURRENT_PAGE = \"current-page\";\n            icLink.classList.remove(CURRENT_PAGE);\n            if (this.current && !icLink.classList.contains(CURRENT_PAGE)) {\n                icLink.classList.add(\"breadcrumb-link\", CURRENT_PAGE);\n            }\n        }\n    }\n    /**\n     * Sets focus on the breadcrumb.\n     */\n    async setFocus() {\n        var _a, _b;\n        (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(\"ic-link\")) === null || _b === void 0 ? void 0 : _b.focus();\n    }\n    render() {\n        const { current, href, monochrome, pageTitle, showBackIcon, theme } = this;\n        const describedById = `${pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.toLowerCase().replace(\" \", \"-\")}-describedby`;\n        return (h(Host, { key: '0a6d1443010427dbc75347c9c69b7c40680be25f', class: {\n                \"ic-breadcrumb-back\": showBackIcon,\n                \"ic-breadcrumb-monochrome\": monochrome,\n                [`ic-theme-${theme}`]: theme !== \"inherit\",\n            }, \"aria-current\": current && \"page\", role: \"listitem\" }, h(\"div\", { key: 'bd351348bd835963705c29c5aa4e857c3752d645', class: \"breadcrumb\" }, h(\"span\", { key: '9a4e28f31aa1c8cf2e111a0ce64902abba338461', innerHTML: chevronIcon, class: \"chevron\", \"aria-hidden\": \"true\" }), showBackIcon && (h(\"span\", { key: '289414d58963cea6e68b782ba36df782690db04a', 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)))));\n    }\n    static get is() { return \"ic-breadcrumb\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get delegatesFocus() { return true; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ic-breadcrumb.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-breadcrumb.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"current\": {\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`, aria-current will be set on the breadcrumb.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"current\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"href\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The URL that the breadcrumb link points to.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"href\",\n                \"reflect\": false\n            },\n            \"monochrome\": {\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                            \"name\": \"internal\",\n                            \"text\": \"If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"monochrome\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"pageTitle\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": true,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The title of the breadcrumb.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"page-title\",\n                \"reflect\": false\n            },\n            \"showBackIcon\": {\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                            \"name\": \"internal\",\n                            \"text\": \"If `true`, back icon will be displayed.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"show-back-icon\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"theme\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcThemeMode\",\n                    \"resolved\": \"\\\"dark\\\" | \\\"inherit\\\" | \\\"light\\\"\",\n                    \"references\": {\n                        \"IcThemeMode\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcThemeMode\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"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                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"theme\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"inherit\\\"\"\n            }\n        };\n    }\n    static get methods() {\n        return {\n            \"setFocus\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Sets focus on the breadcrumb.\",\n                    \"tags\": []\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"current\",\n                \"methodName\": \"watchCurrentHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=ic-breadcrumb.js.map\n"],"version":3}