npm - @ukic/web-components - Versions diffs - 2.19.0 → 2.21.0 - Mend

@ukic/web-components 2.19.0 → 2.21.0

Files changed (590) hide show

package/dist/cjs/ic-back-to-top.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f982899d.js');
-const helpers = require('./helpers-88e018cf.js');
+const helpers = require('./helpers-466a551d.js');
 require('./types-dc22e301.js');
 const ArrowUpward = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
@@ -11,7 +11,7 @@ const ArrowUpward = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
 </svg>
 `;
-const icBackToTopCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;position:absolute;right:0}button{position:fixed;right:var(--ic-space-md);bottom:var(--ic-space-md);height:2.5rem;align-items:center;padding:var(--ic-space-xs) var(--ic-space-md) var(--ic-space-xs)\n    var(--ic-space-sm);margin:0;gap:var(--ic-space-xs);display:flex;background-color:var(--ic-architectural-white);border:var(--ic-border-width) solid var(--ic-action-default);outline-width:inherit;box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);border-radius:5rem;text-decoration:none;visibility:hidden;opacity:0;transition:visibility 0s linear var(--ic-transition-duration-slow),\n    opacity var(--ic-transition-duration-slow);cursor:pointer;z-index:var(--ic-z-index-back-to-top)}button:hover{text-decoration:none;background-color:var(--ic-action-default-bg-hover-no-alpha);border:var(--ic-border-width) solid var(--ic-action-default-hover)}button:active{text-decoration:none;background-color:var(--ic-action-default-bg-active-no-alpha);border:var(--ic-border-width) solid var(--ic-action-default-active)}button:focus{box-shadow:var(--ic-border-focus)}.ic-back-to-top-link.show{visibility:visible;opacity:1;transition:visibility 0s linear 0s,\n    opacity var(--ic-transition-duration-slow),\n    box-shadow var(--ic-easing-transition-fast)}.ic-back-to-top-link.by-footer{position:relative;right:var(--ic-space-md);bottom:3.5rem}.ic-back-to-top-link.offset-banner{margin-bottom:var(--ic-space-lg)}.ic-back-to-top-icon{fill:var(--ic-action-default);padding-left:var(--ic-space-xxs);padding-top:var(--ic-space-xxxs)}.ic-back-to-top-icon>svg{height:var(--ic-space-md);width:var(--ic-space-md);display:inline-block}.ic-back-to-top-link span{color:var(--ic-action-default)}.ic-back-to-top-link:hover .ic-back-to-top-icon{fill:var(--ic-action-default-hover)}.ic-back-to-top-link:hover span{color:var(--ic-action-default-hover)}@media (forced-colors: active){.ic-back-to-top-icon{fill:currentcolor}}";
+const icBackToTopCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;position:absolute;right:0}.positioning{position:fixed;right:var(--ic-space-md);bottom:var(--ic-space-md);transition:visibility 0s linear var(--ic-transition-duration-slow),\n    opacity var(--ic-transition-duration-slow);z-index:var(--ic-z-index-back-to-top)}button{height:2.5rem;align-items:center;padding:var(--ic-space-xs) var(--ic-space-md) var(--ic-space-xs)\n    var(--ic-space-sm);margin:0;gap:var(--ic-space-xs);display:flex;background-color:var(--ic-architectural-white);border:var(--ic-border-width) solid var(--ic-action-default);outline-width:inherit;box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);border-radius:5rem;text-decoration:none;visibility:hidden;opacity:0;cursor:pointer}button:hover{text-decoration:none;background-color:var(--ic-action-default-bg-hover-no-alpha);border:var(--ic-border-width) solid var(--ic-action-default-hover)}button:active{text-decoration:none;background-color:var(--ic-action-default-bg-active-no-alpha);border:var(--ic-border-width) solid var(--ic-action-default-active)}button:focus{box-shadow:var(--ic-border-focus)}.ic-back-to-top-link.show{visibility:visible;opacity:1;transition:visibility 0s linear 0s,\n    opacity var(--ic-transition-duration-slow),\n    box-shadow var(--ic-easing-transition-fast)}.ic-back-to-top-link.by-footer{position:relative;right:var(--ic-space-md);bottom:3.5rem}.ic-back-to-top-link.offset-banner{margin-bottom:var(--ic-space-lg)}.ic-back-to-top-icon{fill:var(--ic-action-default);padding-left:var(--ic-space-xxs);padding-top:var(--ic-space-xxxs)}.ic-back-to-top-icon>svg{height:var(--ic-space-md);width:var(--ic-space-md);display:inline-block}.ic-back-to-top-link span{color:var(--ic-action-default)}.ic-back-to-top-link:hover .ic-back-to-top-icon{fill:var(--ic-action-default-hover)}.ic-back-to-top-link:hover span{color:var(--ic-action-default-hover)}@media (forced-colors: active){.ic-back-to-top-icon{fill:currentcolor}}";
 const backToTopLabel = "Back to top";
 const BackToTop = class {
@@ -90,10 +90,21 @@ const BackToTop = class {
             const banners = document.querySelectorAll("ic-classification-banner:not([inline='true'])");
             this.bannerOffset = banners.length > 0;
         };
+        this.buildButton = () => {
+            const { bannerOffset, targetElVisible, footerVisible, variant } = this;
+            return (index.h("button", { class: {
+                    ["ic-back-to-top-link"]: true,
+                    ["offset-banner"]: bannerOffset,
+                    ["show"]: !targetElVisible,
+                    ["by-footer"]: footerVisible,
+                    ["positioning"]: variant !== "icon",
+                }, "aria-label": backToTopLabel, onClick: this.handleClick }, index.h("span", { class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), this.variant !== "icon" && (index.h("ic-typography", { variant: "subtitle-small" }, index.h("span", null, backToTopLabel)))));
+        };
         this.bannerOffset = false;
         this.footerVisible = false;
         this.targetElVisible = true;
         this.target = undefined;
+        this.variant = "default";
     }
     watchPropHandler(newValue, oldValue) {
         //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value
@@ -120,13 +131,8 @@ const BackToTop = class {
         helpers.onComponentRequiredPropUndefined([{ prop: this.target, propName: "target" }], "Back to Top");
     }
     render() {
-        const { bannerOffset, targetElVisible, footerVisible } = this;
-        return (index.h("button", { class: {
-                ["ic-back-to-top-link"]: true,
-                ["offset-banner"]: bannerOffset,
-                ["show"]: !targetElVisible,
-                ["by-footer"]: footerVisible,
-            }, "aria-label": backToTopLabel, onClick: this.handleClick }, index.h("span", { class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), index.h("ic-typography", { variant: "subtitle-small" }, index.h("span", null, backToTopLabel))));
+        const { variant, buildButton } = this;
+        return variant === "icon" ? (index.h("ic-tooltip", { label: backToTopLabel, placement: "top", class: "positioning" }, buildButton())) : (buildButton());
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ic-back-to-top.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-back-to-top.entry.cjs.js","mappings":"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","names":["onComponentPropUndefinedChange","onComponentRequiredPropUndefined","h"],"sources":["src/components/ic-back-to-top/ic-back-to-top.css?tag=ic-back-to-top&encapsulation=shadow","src/components/ic-back-to-top/ic-back-to-top.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-back-to-top: z-index of back to top\n /\n\n:host {\n display: block;\n position: absolute;\n right: 0;\n}\n\nbutton {\n position: fixed;\n right: var(--ic-space-md);\n bottom: var(--ic-space-md);\n height: 2.5rem;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-md) var(--ic-space-xs)\n var(--ic-space-sm);\n margin: 0;\n gap: var(--ic-space-xs);\n display: flex;\n background-color: var(--ic-architectural-white);\n border: var(--ic-border-width) solid var(--ic-action-default);\n outline-width: inherit;\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n border-radius: 5rem;\n text-decoration: none;\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s linear var(--ic-transition-duration-slow),\n opacity var(--ic-transition-duration-slow);\n cursor: pointer;\n z-index: var(--ic-z-index-back-to-top);\n}\n\nbutton:hover {\n text-decoration: none;\n background-color: var(--ic-action-default-bg-hover-no-alpha);\n border: var(--ic-border-width) solid var(--ic-action-default-hover);\n}\n\nbutton:active {\n text-decoration: none;\n background-color: var(--ic-action-default-bg-active-no-alpha);\n border: var(--ic-border-width) solid var(--ic-action-default-active);\n}\n\nbutton:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.ic-back-to-top-link.show {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s linear 0s,\n opacity var(--ic-transition-duration-slow),\n box-shadow var(--ic-easing-transition-fast);\n}\n\n.ic-back-to-top-link.by-footer {\n position: relative;\n right: var(--ic-space-md);\n bottom: 3.5rem;\n}\n\n.ic-back-to-top-link.offset-banner {\n margin-bottom: var(--ic-space-lg);\n}\n\n.ic-back-to-top-icon {\n fill: var(--ic-action-default);\n padding-left: var(--ic-space-xxs);\n padding-top: var(--ic-space-xxxs);\n}\n\n.ic-back-to-top-icon > svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n display: inline-block;\n}\n\n.ic-back-to-top-link span {\n color: var(--ic-action-default);\n}\n\n.ic-back-to-top-link:hover .ic-back-to-top-icon {\n fill: var(--ic-action-default-hover);\n}\n\n.ic-back-to-top-link:hover span {\n color: var(--ic-action-default-hover);\n}\n\n@media (forced-colors: active) {\n .ic-back-to-top-icon {\n fill: currentcolor;\n }\n}\n","import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n tag: \"ic-back-to-top\",\n styleUrl: \"ic-back-to-top.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BackToTop {\n private isTargetElNull: boolean;\n private targetEl: Element;\n private topObserver: IntersectionObserver = null;\n\n @Element() el: HTMLIcBackToTopElement;\n\n @State() bannerOffset: boolean = false;\n @State() footerVisible: boolean = false;\n @State() targetElVisible: boolean = true;\n\n /\n The ID of the element to jump back to when the link is clicked.\n */\n @Prop() target!: string;\n\n @Watch(\"target\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n onComponentPropUndefinedChange(oldValue, newValue, () => {\n this.createTopObserver(newValue);\n });\n }\n\n componentWillLoad(): void {\n this.createTopObserver(this.target);\n this.checkForClassificationBanner();\n\n //observer for when footer scrolls into view\n let footers = document.querySelectorAll(\n \"ic-footer\"\n ) as NodeListOf<HTMLElement>;\n if (footers.length === 0) {\n footers = document.querySelectorAll(\"footer\");\n }\n\n if (footers.length) {\n const footerEl = footers[footers.length - 1];\n const threshold = this.bannerOffset ? 0.15 : 0;\n const footerObserver = new IntersectionObserver(\n this.footerObserverCallback,\n { threshold: [threshold] }\n );\n footerObserver.observe(footerEl);\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.target, propName: \"target\" }],\n \"Back to Top\"\n );\n }\n\n private setTargetElVisible = (visible: boolean) => {\n this.targetElVisible = visible;\n };\n\n private setFooterVisible = (visible: boolean) => {\n this.checkForClassificationBanner();\n this.footerVisible =\n typeof window !== \"undefined\" && window.scrollY === 0 ? false : visible;\n };\n\n private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setTargetElVisible(entries[0].isIntersecting);\n };\n\n private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setFooterVisible(entries[0].isIntersecting);\n };\n\n private findTargetEl = (target: string): Element => {\n let targetElement: Element = null;\n if (target === null \|\| target === undefined) {\n console.log(\n \"Error: No target ID specified for back to top component - defaulting to top of page\"\n );\n } else {\n targetElement = document.querySelector(\n `${target.startsWith(\"#\") ? \"\" : \"#\"}${target}`\n );\n if (targetElement === null) {\n console.log(\n `Error: Back to top target element '${target}' not found - defaulting to top of page`\n );\n }\n }\n return targetElement;\n };\n\n private createTopObserver = (target: string) => {\n this.targetEl = this.findTargetEl(target);\n let objParent: HTMLElement;\n\n //remove old element & observer\n if (this.topObserver !== null) {\n const observedEl = document.querySelector(\"#ic-back-to-top-target\");\n if (observedEl !== null) {\n this.topObserver.unobserve(observedEl);\n observedEl.remove();\n }\n }\n\n if (this.targetEl === null) {\n objParent = document.body;\n this.targetEl = objParent.firstElementChild;\n this.isTargetElNull = true;\n } else {\n objParent = this.targetEl.parentNode as HTMLElement;\n this.isTargetElNull = false;\n }\n\n //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n const objBackToTopTargetEl = document.createElement(\"div\");\n objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n // resize observer needs to factor in any top margin on the target el\n const marginTop = getComputedStyle(this.targetEl).marginTop;\n this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n threshold: [0],\n rootMargin: `${marginTop} 0px 0px 0px`,\n });\n this.topObserver.observe(objBackToTopTargetEl);\n };\n\n private handleClick = () => {\n if (this.isTargetElNull) {\n window.scrollTo(0, 0);\n } else {\n this.targetEl.scrollIntoView();\n }\n };\n\n private checkForClassificationBanner = () => {\n //adjust position for classification banner at bottom\n const banners = document.querySelectorAll(\n \"ic-classification-banner:not([inline='true'])\"\n );\n this.bannerOffset = banners.length > 0;\n };\n\n render() {\n const { bannerOffset, targetElVisible, footerVisible } = this;\n return (\n <button\n class={{\n [\"ic-back-to-top-link\"]: true,\n [\"offset-banner\"]: bannerOffset,\n [\"show\"]: !targetElVisible,\n [\"by-footer\"]: footerVisible,\n }}\n aria-label={backToTopLabel}\n onClick={this.handleClick}\n >\n <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n <ic-typography variant=\"subtitle-small\">\n <span>{backToTopLabel}</span>\n </ic-typography>\n </button>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-back-to-top.entry.cjs.js","mappings":"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","names":["h","onComponentPropUndefinedChange","onComponentRequiredPropUndefined"],"sources":["src/components/ic-back-to-top/ic-back-to-top.css?tag=ic-back-to-top&encapsulation=shadow","src/components/ic-back-to-top/ic-back-to-top.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-back-to-top: z-index of back to top\n /\n\n:host {\n display: block;\n position: absolute;\n right: 0;\n}\n\n.positioning {\n position: fixed;\n right: var(--ic-space-md);\n bottom: var(--ic-space-md);\n transition: visibility 0s linear var(--ic-transition-duration-slow),\n opacity var(--ic-transition-duration-slow);\n z-index: var(--ic-z-index-back-to-top);\n}\n\nbutton {\n height: 2.5rem;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-md) var(--ic-space-xs)\n var(--ic-space-sm);\n margin: 0;\n gap: var(--ic-space-xs);\n display: flex;\n background-color: var(--ic-architectural-white);\n border: var(--ic-border-width) solid var(--ic-action-default);\n outline-width: inherit;\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n border-radius: 5rem;\n text-decoration: none;\n visibility: hidden;\n opacity: 0;\n cursor: pointer;\n}\n\nbutton:hover {\n text-decoration: none;\n background-color: var(--ic-action-default-bg-hover-no-alpha);\n border: var(--ic-border-width) solid var(--ic-action-default-hover);\n}\n\nbutton:active {\n text-decoration: none;\n background-color: var(--ic-action-default-bg-active-no-alpha);\n border: var(--ic-border-width) solid var(--ic-action-default-active);\n}\n\nbutton:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.ic-back-to-top-link.show {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s linear 0s,\n opacity var(--ic-transition-duration-slow),\n box-shadow var(--ic-easing-transition-fast);\n}\n\n.ic-back-to-top-link.by-footer {\n position: relative;\n right: var(--ic-space-md);\n bottom: 3.5rem;\n}\n\n.ic-back-to-top-link.offset-banner {\n margin-bottom: var(--ic-space-lg);\n}\n\n.ic-back-to-top-icon {\n fill: var(--ic-action-default);\n padding-left: var(--ic-space-xxs);\n padding-top: var(--ic-space-xxxs);\n}\n\n.ic-back-to-top-icon > svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n display: inline-block;\n}\n\n.ic-back-to-top-link span {\n color: var(--ic-action-default);\n}\n\n.ic-back-to-top-link:hover .ic-back-to-top-icon {\n fill: var(--ic-action-default-hover);\n}\n\n.ic-back-to-top-link:hover span {\n color: var(--ic-action-default-hover);\n}\n\n@media (forced-colors: active) {\n .ic-back-to-top-icon {\n fill: currentcolor;\n }\n}\n","import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcBackToTopVariants } from \"./ic-back-to-top.types\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n tag: \"ic-back-to-top\",\n styleUrl: \"ic-back-to-top.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BackToTop {\n private isTargetElNull: boolean;\n private targetEl: Element;\n private topObserver: IntersectionObserver = null;\n\n @Element() el: HTMLIcBackToTopElement;\n\n @State() bannerOffset: boolean = false;\n @State() footerVisible: boolean = false;\n @State() targetElVisible: boolean = true;\n\n /\n The ID of the element to jump back to when the link is clicked.\n /\n @Prop() target!: string;\n\n /\n The variant of the button to render\n */\n @Prop() variant: IcBackToTopVariants = \"default\";\n\n @Watch(\"target\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n onComponentPropUndefinedChange(oldValue, newValue, () => {\n this.createTopObserver(newValue);\n });\n }\n\n componentWillLoad(): void {\n this.createTopObserver(this.target);\n this.checkForClassificationBanner();\n\n //observer for when footer scrolls into view\n let footers = document.querySelectorAll(\n \"ic-footer\"\n ) as NodeListOf<HTMLElement>;\n if (footers.length === 0) {\n footers = document.querySelectorAll(\"footer\");\n }\n\n if (footers.length) {\n const footerEl = footers[footers.length - 1];\n const threshold = this.bannerOffset ? 0.15 : 0;\n const footerObserver = new IntersectionObserver(\n this.footerObserverCallback,\n { threshold: [threshold] }\n );\n footerObserver.observe(footerEl);\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.target, propName: \"target\" }],\n \"Back to Top\"\n );\n }\n\n private setTargetElVisible = (visible: boolean) => {\n this.targetElVisible = visible;\n };\n\n private setFooterVisible = (visible: boolean) => {\n this.checkForClassificationBanner();\n this.footerVisible =\n typeof window !== \"undefined\" && window.scrollY === 0 ? false : visible;\n };\n\n private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setTargetElVisible(entries[0].isIntersecting);\n };\n\n private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setFooterVisible(entries[0].isIntersecting);\n };\n\n private findTargetEl = (target: string): Element => {\n let targetElement: Element = null;\n if (target === null \|\| target === undefined) {\n console.log(\n \"Error: No target ID specified for back to top component - defaulting to top of page\"\n );\n } else {\n targetElement = document.querySelector(\n `${target.startsWith(\"#\") ? \"\" : \"#\"}${target}`\n );\n if (targetElement === null) {\n console.log(\n `Error: Back to top target element '${target}' not found - defaulting to top of page`\n );\n }\n }\n return targetElement;\n };\n\n private createTopObserver = (target: string) => {\n this.targetEl = this.findTargetEl(target);\n let objParent: HTMLElement;\n\n //remove old element & observer\n if (this.topObserver !== null) {\n const observedEl = document.querySelector(\"#ic-back-to-top-target\");\n if (observedEl !== null) {\n this.topObserver.unobserve(observedEl);\n observedEl.remove();\n }\n }\n\n if (this.targetEl === null) {\n objParent = document.body;\n this.targetEl = objParent.firstElementChild;\n this.isTargetElNull = true;\n } else {\n objParent = this.targetEl.parentNode as HTMLElement;\n this.isTargetElNull = false;\n }\n\n //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n const objBackToTopTargetEl = document.createElement(\"div\");\n objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n // resize observer needs to factor in any top margin on the target el\n const marginTop = getComputedStyle(this.targetEl).marginTop;\n this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n threshold: [0],\n rootMargin: `${marginTop} 0px 0px 0px`,\n });\n this.topObserver.observe(objBackToTopTargetEl);\n };\n\n private handleClick = () => {\n if (this.isTargetElNull) {\n window.scrollTo(0, 0);\n } else {\n this.targetEl.scrollIntoView();\n }\n };\n\n private checkForClassificationBanner = () => {\n //adjust position for classification banner at bottom\n const banners = document.querySelectorAll(\n \"ic-classification-banner:not([inline='true'])\"\n );\n this.bannerOffset = banners.length > 0;\n };\n\n private buildButton = () => {\n const { bannerOffset, targetElVisible, footerVisible, variant } = this;\n\n return (\n <button\n class={{\n [\"ic-back-to-top-link\"]: true,\n [\"offset-banner\"]: bannerOffset,\n [\"show\"]: !targetElVisible,\n [\"by-footer\"]: footerVisible,\n [\"positioning\"]: variant !== \"icon\",\n }}\n aria-label={backToTopLabel}\n onClick={this.handleClick}\n >\n <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n {this.variant !== \"icon\" && (\n <ic-typography variant=\"subtitle-small\">\n <span>{backToTopLabel}</span>\n </ic-typography>\n )}\n </button>\n );\n };\n\n render() {\n const { variant, buildButton } = this;\n\n return variant === \"icon\" ? (\n <ic-tooltip label={backToTopLabel} placement=\"top\" class=\"positioning\">\n {buildButton()}\n </ic-tooltip>\n ) : (\n buildButton()\n );\n }\n}\n"],"version":3}

package/dist/cjs/ic-badge.cjs.entry.js CHANGED Viewed

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f982899d.js');
-const types = require('./types-dc22e301.js');
-const helpers = require('./helpers-88e018cf.js');
+const helpers = require('./helpers-466a551d.js');
+require('./types-dc22e301.js');
 const icBadgeCss = "@media (prefers-reduced-motion: no-preference){:host(.show){animation:expand var(--ic-transition-duration-slow)}:host(.hide){animation:shrink var(--ic-transition-duration-slow)}}:host{display:flex;height:var(--ic-space-md);min-width:var(--ic-space-md);width:-moz-fit-content;width:fit-content;border-radius:calc(2 * var(--ic-space-xxl));position:absolute}:host(.neutral){background-color:var(--ic-architectural-500)}:host(.light){background-color:var(--ic-architectural-40)}:host(.info){background-color:var(--ic-status-info)}:host(.warning){background-color:var(--ic-status-warning-mid)}:host(.error){background-color:var(--ic-status-error)}:host(.success){background-color:var(--ic-status-success)}:host(.small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.dot.default){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.dot.small){height:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));min-width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.dot.large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.foreground-dark) ::slotted(*){fill:var(--ic-color-primary-text)}:host(.foreground-light) ::slotted(*){fill:white}:host(.foreground-dark) ic-typography{color:var(--ic-color-primary-text)}:host(.foreground-light) ic-typography{color:white}:host(.text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.text.small) ic-typography{padding:0 0.2132rem}:host(.text.large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.icon.small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.icon.large) ::slotted(svg){width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));height:calc(var(--ic-space-sm) + var(--ic-space-xxxs));padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}:host(.far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.far.small),:host(.dot.far.large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.dot.far),:host(.dot.far.small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.near){top:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));right:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)))}:host(.dot.near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.inline){position:static}:host(.hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}@keyframes expand{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}";
@@ -13,102 +13,59 @@ const Badge = class {
         index.registerInstance(this, hostRef);
         this.ariaLabel = null;
         this.setBadgeColour = () => {
-            if (this.customColor !== null && helpers.convertToRGBA(this.customColor) !== null) {
-                const colorRGBA = helpers.convertToRGBA(this.customColor);
+            const colorRGBA = helpers.convertToRGBA(this.customColor);
+            if (colorRGBA) {
                 this.customColorRGBA = colorRGBA;
-                this.el.style.backgroundColor = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;
+                const { r, g, b, a } = colorRGBA;
+                this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;
             }
         };
-        this.getBadgeForeground = () => {
-            let red;
-            let green;
-            let blue;
+        this.getBadgeRGB = () => {
             switch (this.variant) {
                 case "custom":
-                    red = this.customColorRGBA.r;
-                    green = this.customColorRGBA.g;
-                    blue = this.customColorRGBA.b;
-                    break;
+                    return this.customColorRGBA;
                 case "error":
-                    red = parseInt(helpers.getCssProperty("--ic-status-error-r"));
-                    green = parseInt(helpers.getCssProperty("--ic-status-error-g"));
-                    blue = parseInt(helpers.getCssProperty("--ic-status-error-b"));
-                    break;
                 case "success":
-                    red = parseInt(helpers.getCssProperty("--ic-status-success-r"));
-                    green = parseInt(helpers.getCssProperty("--ic-status-success-g"));
-                    blue = parseInt(helpers.getCssProperty("--ic-status-success-b"));
-                    break;
                 case "warning":
-                    red = parseInt(helpers.getCssProperty("--ic-status-warning-r"));
-                    green = parseInt(helpers.getCssProperty("--ic-status-warning-g"));
-                    blue = parseInt(helpers.getCssProperty("--ic-status-warning-b"));
-                    break;
                 case "info": {
-                    const info = helpers.hexToRgba(helpers.getCssProperty("--ic-status-info"));
-                    red = info.r;
-                    green = info.g;
-                    blue = info.b;
-                    break;
-                }
-                case "neutral": {
-                    const neutral = helpers.hexToRgba(helpers.getCssProperty("--ic-architectural-500"));
-                    red = neutral.r;
-                    green = neutral.g;
-                    blue = neutral.b;
-                    break;
-                }
-                case "light": {
-                    const light = helpers.hexToRgba(helpers.getCssProperty("--ic-architectural-40"));
-                    red = light.r;
-                    green = light.g;
-                    blue = light.b;
-                    break;
+                    return helpers.rgbaStrToObj(helpers.getCssProperty(`--ic-status-${this.variant}`));
                 }
+                case "neutral":
+                case "light":
+                    return helpers.hexToRgba(helpers.getCssProperty(`--ic-architectural-${this.variant === "neutral" ? 500 : 40}`));
             }
-            const brightness = (red * 299 + green * 587 + blue * 114) / 1000;
-            this.foregroundColour =
-                brightness > 133.3505
-                    ? types.IcThemeForegroundEnum.Dark
-                    : types.IcThemeForegroundEnum.Light;
         };
-        this.getTextLabel = () => {
-            let label;
-            if (this.textLabel !== null) {
-                if (this.maxNumber !== null) {
-                    label =
-                        Number(this.textLabel) > this.maxNumber
-                            ? `${this.maxNumber}+`
-                            : this.textLabel;
-                }
-                else {
-                    label = this.textLabel;
-                }
-            }
-            return label;
+        this.getBadgeForeground = () => {
+            const { r, g, b } = this.getBadgeRGB();
+            this.foregroundColour = helpers.getThemeForegroundColor((r * 299 + g * 587 + b * 114) / 1000);
         };
+        this.getTextLabel = () => this.maxNumber && Number(this.textLabel) > this.maxNumber
+            ? `${this.maxNumber}+`
+            : this.textLabel;
         // Set aria-label on badge and / or parent element
         // Aria-describedby seems to not work, probably due to shadow DOM
         this.setAccessibleLabel = () => {
-            const parentElType = helpers.getParentElementType(this.el);
-            const parentElAriaLabel = helpers.getParentElement(this.el).ariaLabel;
+            const parentEl = this.el.parentElement;
             const defaultAriaLabel = this.isAccessibleLabelDefined()
                 ? this.accessibleLabel
                 : this.textLabel || "with badge being displayed";
-            if (helpers.getParentElement(this.el) !== null) {
-                if (parentElType !== "IC-CARD" &&
-                    (parentElType !== "IC-TAB" ||
-                        (parentElType === "IC-TAB" && parentElAriaLabel))) {
-                    helpers.getParentElement(this.el).ariaLabel = `${parentElAriaLabel ? `${parentElAriaLabel} ,` : ""} ${defaultAriaLabel}`;
+            if (parentEl) {
+                const { tagName } = parentEl;
+                if (tagName !== "IC-CARD" &&
+                    (tagName !== "IC-TAB" || (tagName === "IC-TAB" && this.parentAriaLabel))) {
+                    const ariaLabelPrefix = this.parentAriaLabel
+                        ? `${this.parentAriaLabel} ,`
+                        : "";
+                    parentEl.ariaLabel = this.visible
+                        ? `${ariaLabelPrefix} ${defaultAriaLabel}`
+                        : undefined;
                 }
                 else {
                     this.ariaLabel = `, ${defaultAriaLabel}`;
                 }
             }
         };
-        this.isAccessibleLabelDefined = () => {
-            return helpers.isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;
-        };
+        this.isAccessibleLabelDefined = () => helpers.isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;
         this.accessibleLabel = undefined;
         this.customColor = null;
         this.maxNumber = undefined;
@@ -119,9 +76,25 @@ const Badge = class {
         this.variant = "neutral";
         this.visible = true;
     }
+    accessibleLabelHandler() {
+        this.setAccessibleLabel();
+    }
+    customColorHandler() {
+        this.variant === "custom" && this.setBadgeColour();
+    }
+    variantHandler() {
+        this.getBadgeForeground();
+    }
+    visibleHandler() {
+        this.setAccessibleLabel();
+    }
     componentWillLoad() {
+        var _a;
         this.variant === "custom" && this.setBadgeColour();
         this.getBadgeForeground();
+        const ariaLabel = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.ariaLabel;
+        if (ariaLabel)
+            this.parentAriaLabel = ariaLabel;
         this.setAccessibleLabel();
     }
     componentDidLoad() {
@@ -141,19 +114,24 @@ const Badge = class {
         this.visible = false;
     }
     render() {
-        const { position, size, type, variant, foregroundColour, visible } = this;
+        const { ariaLabel, el, foregroundColour, getTextLabel, position, size, textLabel, type, variant, visible, } = this;
         return (index.h(index.Host, { class: {
                 [`${position}`]: true,
                 [`${size}`]: true,
                 [`${variant}`]: true,
                 [`${type}`]: true,
                 [`foreground-${foregroundColour}`]: foregroundColour !== null,
-                ["show"]: visible,
-                ["hide"]: !visible,
-            }, id: this.el.id || null, "aria-label": this.ariaLabel, role: "status" }, type === "icon" && index.h("slot", { name: "badge-icon" }), type === "text" && (index.h("ic-typography", { variant: size === "small" ? "badge-small" : "badge" }, this.getTextLabel()))));
+                [`${visible ? "show" : "hide"}`]: true,
+            }, id: el.id || null, "aria-label": ariaLabel, role: "status" }, type === "icon" && index.h("slot", { name: "badge-icon" }), type === "text" && textLabel && (index.h("ic-typography", { variant: size === "small" ? "badge-small" : "badge" }, getTextLabel()))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "accessibleLabel": ["accessibleLabelHandler"],
+        "customColor": ["customColorHandler"],
+        "variant": ["variantHandler"],
+        "visible": ["visibleHandler"]
+    }; }
 };
 Badge.style = icBadgeCss;

package/dist/cjs/ic-badge.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-badge.entry.cjs.js","mappings":"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","names":["convertToRGBA","getCssProperty","hexToRgba","IcThemeForegroundEnum","getParentElementType","getParentElement","isPropDefined","onComponentRequiredPropUndefined","h","Host"],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n :host(.show) {\n animation: expand var(--ic-transition-duration-slow);\n }\n\n :host(.hide) {\n animation: shrink var(--ic-transition-duration-slow);\n }\n}\n\n:host {\n display: flex;\n height: var(--ic-space-md);\n min-width: var(--ic-space-md);\n width: fit-content;\n border-radius: calc(2 * var(--ic-space-xxl));\n position: absolute;\n}\n\n:host(.neutral) {\n background-color: var(--ic-architectural-500);\n}\n\n:host(.light) {\n background-color: var(--ic-architectural-40);\n}\n\n:host(.info) {\n background-color: var(--ic-status-info);\n}\n\n:host(.warning) {\n background-color: var(--ic-status-warning-mid);\n}\n\n:host(.error) {\n background-color: var(--ic-status-error);\n}\n\n:host(.success) {\n background-color: var(--ic-status-success);\n}\n\n:host(.small) {\n height: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.large) {\n height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.dot.default) {\n height: var(--ic-space-xs);\n width: var(--ic-space-xs);\n min-width: var(--ic-space-xs);\n}\n\n:host(.dot.small) {\n height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.dot.large) {\n height: var(--ic-space-sm);\n width: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.foreground-dark) ::slotted() {\n fill: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ::slotted() {\n fill: white;\n}\n\n:host(.foreground-dark) ic-typography {\n color: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ic-typography {\n color: white;\n}\n\n:host(.text) ic-typography {\n align-self: center;\n padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.text.small) ic-typography {\n padding: 0 0.2132rem;\n}\n\n:host(.text.large) ic-typography {\n padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.icon) ::slotted(svg) {\n width: var(--ic-space-sm);\n height: var(--ic-space-sm);\n padding: var(--ic-space-xxxs);\n}\n\n:host(.icon.small) ::slotted(svg) {\n width: var(--ic-space-xs);\n height: var(--ic-space-xs);\n}\n\n:host(.icon.large) ::slotted(svg) {\n width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.far) {\n top: calc(-1 * var(--ic-space-xs));\n right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.far.small),\n:host(.dot.far.large) {\n top: calc(-1 * var(--ic-space-xxs));\n right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.dot.far),\n:host(.dot.far.small) {\n top: calc(-1 * var(--ic-space-xxxs));\n right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.near) {\n top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.dot.near) {\n top: calc(-1 * var(--ic-space-1px));\n right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.inline) {\n position: static;\n}\n\n:host(.hide) {\n visibility: hidden !important;\n transition: visibility var(--ic-transition-duration-slow);\n}\n\n@keyframes expand {\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes shrink {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n}\n","import { Component, Element, Host, Method, Prop, h } from \"@stencil/core\";\nimport {\n IcBadgePositions,\n IcBadgeTypes,\n IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n IcColorRGBA,\n IcSizes,\n IcThemeForeground,\n IcThemeForegroundEnum,\n IcColor,\n} from \"../../utils/types\";\nimport {\n convertToRGBA,\n getCssProperty,\n getParentElement,\n getParentElementType,\n hexToRgba,\n isPropDefined,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n/*\n @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n /\n@Component({\n tag: \"ic-badge\",\n styleUrl: \"ic-badge.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Badge {\n private ariaLabel: string = null;\n private customColorRGBA: IcColorRGBA;\n private foregroundColour: IcThemeForeground;\n\n @Element() el: HTMLIcBadgeElement;\n\n /\n The accessible label of the badge component to provide context for screen reader users.\n /\n @Prop() accessibleLabel?: string;\n\n /\n The custom badge colour. This will only style the badge component if variant=\"custom\".\n * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n /\n @Prop() customColor?: IcColor = null;\n\n /\n The maximum number shown on the badge appended with a +.\n * This will only be displayed if type=\"text\" and textLabel is not empty.\n /\n @Prop() maxNumber?: number;\n\n /\n The positioning of the badge in reference to the parent element.\n /\n @Prop() position?: IcBadgePositions = \"far\";\n\n /\n The size of the badge to be displayed.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n The text displayed in the badge. This will only be displayed if type=\"text\".\n /\n @Prop() textLabel?: string;\n\n /\n The type of badge to be displayed.\n /\n @Prop() type?: IcBadgeTypes = \"text\";\n\n /\n The variant of the badge to be displayed.\n /\n @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n /\n If `true`, the badge will be displayed.\n /\n @Prop({ mutable: true }) visible: boolean = true;\n\n componentWillLoad(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n\n this.getBadgeForeground();\n\n this.setAccessibleLabel();\n }\n\n componentDidLoad(): void {\n this.type === \"text\" &&\n onComponentRequiredPropUndefined(\n [{ prop: this.textLabel, propName: \"text-label\" }],\n \"Badge\"\n );\n }\n\n /\n @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n /\n @Method()\n async showBadge(): Promise<void> {\n this.visible = true;\n }\n\n /\n @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n /\n @Method()\n async hideBadge(): Promise<void> {\n this.visible = false;\n }\n\n private setBadgeColour = () => {\n if (this.customColor !== null && convertToRGBA(this.customColor) !== null) {\n const colorRGBA = convertToRGBA(this.customColor);\n this.customColorRGBA = colorRGBA;\n this.el.style.backgroundColor = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;\n }\n };\n\n private getBadgeForeground = () => {\n let red: number;\n let green: number;\n let blue: number;\n\n switch (this.variant) {\n case \"custom\":\n red = this.customColorRGBA.r;\n green = this.customColorRGBA.g;\n blue = this.customColorRGBA.b;\n break;\n case \"error\":\n red = parseInt(getCssProperty(\"--ic-status-error-r\"));\n green = parseInt(getCssProperty(\"--ic-status-error-g\"));\n blue = parseInt(getCssProperty(\"--ic-status-error-b\"));\n break;\n case \"success\":\n red = parseInt(getCssProperty(\"--ic-status-success-r\"));\n green = parseInt(getCssProperty(\"--ic-status-success-g\"));\n blue = parseInt(getCssProperty(\"--ic-status-success-b\"));\n break;\n case \"warning\":\n red = parseInt(getCssProperty(\"--ic-status-warning-r\"));\n green = parseInt(getCssProperty(\"--ic-status-warning-g\"));\n blue = parseInt(getCssProperty(\"--ic-status-warning-b\"));\n break;\n case \"info\": {\n const info = hexToRgba(getCssProperty(\"--ic-status-info\"));\n red = info.r;\n green = info.g;\n blue = info.b;\n break;\n }\n case \"neutral\": {\n const neutral = hexToRgba(getCssProperty(\"--ic-architectural-500\"));\n red = neutral.r;\n green = neutral.g;\n blue = neutral.b;\n break;\n }\n case \"light\": {\n const light = hexToRgba(getCssProperty(\"--ic-architectural-40\"));\n red = light.r;\n green = light.g;\n blue = light.b;\n break;\n }\n }\n\n const brightness = (red 299 + green * 587 + blue * 114) / 1000;\n this.foregroundColour =\n brightness > 133.3505\n ? IcThemeForegroundEnum.Dark\n : IcThemeForegroundEnum.Light;\n };\n\n private getTextLabel = () => {\n let label;\n if (this.textLabel !== null) {\n if (this.maxNumber !== null) {\n label =\n Number(this.textLabel) > this.maxNumber\n ? `${this.maxNumber}+`\n : this.textLabel;\n } else {\n label = this.textLabel;\n }\n }\n return label;\n };\n\n // Set aria-label on badge and / or parent element\n // Aria-describedby seems to not work, probably due to shadow DOM\n private setAccessibleLabel = () => {\n const parentElType = getParentElementType(this.el);\n const parentElAriaLabel = getParentElement(this.el).ariaLabel;\n const defaultAriaLabel = this.isAccessibleLabelDefined()\n ? this.accessibleLabel\n : this.textLabel \|\| \"with badge being displayed\";\n\n if (getParentElement(this.el) !== null) {\n if (\n parentElType !== \"IC-CARD\" &&\n (parentElType !== \"IC-TAB\" \|\|\n (parentElType === \"IC-TAB\" && parentElAriaLabel))\n ) {\n getParentElement(this.el).ariaLabel = `${\n parentElAriaLabel ? `${parentElAriaLabel} ,` : \"\"\n } ${defaultAriaLabel}`;\n } else {\n this.ariaLabel = `, ${defaultAriaLabel}`;\n }\n }\n };\n\n private isAccessibleLabelDefined = () => {\n return isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n };\n\n render() {\n const { position, size, type, variant, foregroundColour, visible } = this;\n\n return (\n <Host\n class={{\n [`${position}`]: true,\n [`${size}`]: true,\n [`${variant}`]: true,\n [`${type}`]: true,\n [`foreground-${foregroundColour}`]: foregroundColour !== null,\n [\"show\"]: visible,\n [\"hide\"]: !visible,\n }}\n id={this.el.id \|\| null}\n aria-label={this.ariaLabel}\n role=\"status\"\n >\n {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n {type === \"text\" && (\n <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n {this.getTextLabel()}\n </ic-typography>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-badge.entry.cjs.js","mappings":"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","names":["convertToRGBA","rgbaStrToObj","getCssProperty","hexToRgba","getThemeForegroundColor","isPropDefined","onComponentRequiredPropUndefined","h","Host"],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n :host(.show) {\n animation: expand var(--ic-transition-duration-slow);\n }\n\n :host(.hide) {\n animation: shrink var(--ic-transition-duration-slow);\n }\n}\n\n:host {\n display: flex;\n height: var(--ic-space-md);\n min-width: var(--ic-space-md);\n width: fit-content;\n border-radius: calc(2 * var(--ic-space-xxl));\n position: absolute;\n}\n\n:host(.neutral) {\n background-color: var(--ic-architectural-500);\n}\n\n:host(.light) {\n background-color: var(--ic-architectural-40);\n}\n\n:host(.info) {\n background-color: var(--ic-status-info);\n}\n\n:host(.warning) {\n background-color: var(--ic-status-warning-mid);\n}\n\n:host(.error) {\n background-color: var(--ic-status-error);\n}\n\n:host(.success) {\n background-color: var(--ic-status-success);\n}\n\n:host(.small) {\n height: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.large) {\n height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.dot.default) {\n height: var(--ic-space-xs);\n width: var(--ic-space-xs);\n min-width: var(--ic-space-xs);\n}\n\n:host(.dot.small) {\n height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.dot.large) {\n height: var(--ic-space-sm);\n width: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.foreground-dark) ::slotted() {\n fill: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ::slotted() {\n fill: white;\n}\n\n:host(.foreground-dark) ic-typography {\n color: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ic-typography {\n color: white;\n}\n\n:host(.text) ic-typography {\n align-self: center;\n padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.text.small) ic-typography {\n padding: 0 0.2132rem;\n}\n\n:host(.text.large) ic-typography {\n padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.icon) ::slotted(svg) {\n width: var(--ic-space-sm);\n height: var(--ic-space-sm);\n padding: var(--ic-space-xxxs);\n}\n\n:host(.icon.small) ::slotted(svg) {\n width: var(--ic-space-xs);\n height: var(--ic-space-xs);\n}\n\n:host(.icon.large) ::slotted(svg) {\n width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.far) {\n top: calc(-1 * var(--ic-space-xs));\n right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.far.small),\n:host(.dot.far.large) {\n top: calc(-1 * var(--ic-space-xxs));\n right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.dot.far),\n:host(.dot.far.small) {\n top: calc(-1 * var(--ic-space-xxxs));\n right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.near) {\n top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.dot.near) {\n top: calc(-1 * var(--ic-space-1px));\n right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.inline) {\n position: static;\n}\n\n:host(.hide) {\n visibility: hidden !important;\n transition: visibility var(--ic-transition-duration-slow);\n}\n\n@keyframes expand {\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes shrink {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {\n IcBadgePositions,\n IcBadgeTypes,\n IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n IcColorRGBA,\n IcSizes,\n IcThemeForeground,\n IcColor,\n} from \"../../utils/types\";\nimport {\n convertToRGBA,\n getCssProperty,\n getThemeForegroundColor,\n hexToRgba,\n isPropDefined,\n onComponentRequiredPropUndefined,\n rgbaStrToObj,\n} from \"../../utils/helpers\";\n\n/*\n @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n /\n@Component({\n tag: \"ic-badge\",\n styleUrl: \"ic-badge.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Badge {\n private ariaLabel: string = null;\n private customColorRGBA: IcColorRGBA;\n private foregroundColour: IcThemeForeground;\n private parentAriaLabel: string;\n\n @Element() el: HTMLIcBadgeElement;\n\n /\n The accessible label of the badge component to provide context for screen reader users.\n /\n @Prop() accessibleLabel?: string;\n\n @Watch(\"accessibleLabel\")\n accessibleLabelHandler(): void {\n this.setAccessibleLabel();\n }\n\n /\n The custom badge colour. This will only style the badge component if variant=\"custom\".\n * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n /\n @Prop() customColor?: IcColor = null;\n\n @Watch(\"customColor\")\n customColorHandler(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n }\n\n /\n The maximum number shown on the badge appended with a +.\n * This will only be displayed if type=\"text\" and textLabel is not empty.\n /\n @Prop() maxNumber?: number;\n\n /\n The positioning of the badge in reference to the parent element.\n /\n @Prop() position?: IcBadgePositions = \"far\";\n\n /\n The size of the badge to be displayed.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n The text displayed in the badge. This will only be displayed if type=\"text\".\n /\n @Prop() textLabel?: string;\n\n /\n The type of badge to be displayed.\n /\n @Prop() type?: IcBadgeTypes = \"text\";\n\n /\n The variant of the badge to be displayed.\n /\n @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n @Watch(\"variant\")\n variantHandler(): void {\n this.getBadgeForeground();\n }\n\n /\n If `true`, the badge will be displayed.\n /\n @Prop({ mutable: true }) visible: boolean = true;\n\n @Watch(\"visible\")\n visibleHandler(): void {\n this.setAccessibleLabel();\n }\n\n componentWillLoad(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n\n this.getBadgeForeground();\n\n const ariaLabel = this.el.parentElement?.ariaLabel;\n if (ariaLabel) this.parentAriaLabel = ariaLabel;\n this.setAccessibleLabel();\n }\n\n componentDidLoad(): void {\n this.type === \"text\" &&\n onComponentRequiredPropUndefined(\n [{ prop: this.textLabel, propName: \"text-label\" }],\n \"Badge\"\n );\n }\n\n /\n @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n /\n @Method()\n async showBadge(): Promise<void> {\n this.visible = true;\n }\n\n /\n @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n /\n @Method()\n async hideBadge(): Promise<void> {\n this.visible = false;\n }\n\n private setBadgeColour = () => {\n const colorRGBA = convertToRGBA(this.customColor);\n\n if (colorRGBA) {\n this.customColorRGBA = colorRGBA;\n const { r, g, b, a } = colorRGBA;\n this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n }\n };\n\n private getBadgeRGB = () => {\n switch (this.variant) {\n case \"custom\":\n return this.customColorRGBA;\n case \"error\":\n case \"success\":\n case \"warning\":\n case \"info\": {\n return rgbaStrToObj(getCssProperty(`--ic-status-${this.variant}`));\n }\n case \"neutral\":\n case \"light\":\n return hexToRgba(\n getCssProperty(\n `--ic-architectural-${this.variant === \"neutral\" ? 500 : 40}`\n )\n );\n }\n };\n\n private getBadgeForeground = () => {\n const { r, g, b } = this.getBadgeRGB();\n this.foregroundColour = getThemeForegroundColor(\n (r 299 + g * 587 + b * 114) / 1000\n );\n };\n\n private getTextLabel = () =>\n this.maxNumber && Number(this.textLabel) > this.maxNumber\n ? `${this.maxNumber}+`\n : this.textLabel;\n\n // Set aria-label on badge and / or parent element\n // Aria-describedby seems to not work, probably due to shadow DOM\n private setAccessibleLabel = () => {\n const parentEl = this.el.parentElement;\n const defaultAriaLabel = this.isAccessibleLabelDefined()\n ? this.accessibleLabel\n : this.textLabel \|\| \"with badge being displayed\";\n\n if (parentEl) {\n const { tagName } = parentEl;\n if (\n tagName !== \"IC-CARD\" &&\n (tagName !== \"IC-TAB\" \|\| (tagName === \"IC-TAB\" && this.parentAriaLabel))\n ) {\n const ariaLabelPrefix = this.parentAriaLabel\n ? `${this.parentAriaLabel} ,`\n : \"\";\n parentEl.ariaLabel = this.visible\n ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n : undefined;\n } else {\n this.ariaLabel = `, ${defaultAriaLabel}`;\n }\n }\n };\n\n private isAccessibleLabelDefined = () =>\n isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n render() {\n const {\n ariaLabel,\n el,\n foregroundColour,\n getTextLabel,\n position,\n size,\n textLabel,\n type,\n variant,\n visible,\n } = this;\n\n return (\n <Host\n class={{\n [`${position}`]: true,\n [`${size}`]: true,\n [`${variant}`]: true,\n [`${type}`]: true,\n [`foreground-${foregroundColour}`]: foregroundColour !== null,\n [`${visible ? \"show\" : \"hide\"}`]: true,\n }}\n id={el.id \|\| null}\n aria-label={ariaLabel}\n role=\"status\"\n >\n {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n {type === \"text\" && textLabel && (\n <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n {getTextLabel()}\n </ic-typography>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ic-breadcrumb-group.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f982899d.js');
-const helpers = require('./helpers-88e018cf.js');
+const helpers = require('./helpers-466a551d.js');
 require('./types-dc22e301.js');
 const icBreadcrumbGroupCss = ":host{display:block}:host ol{display:flex;list-style-type:none;align-items:center;flex-wrap:wrap;padding:0;margin:0}:host(.back) ol ::slotted(ic-breadcrumb){display:none}:host(.back) ol ::slotted(ic-breadcrumb.show){display:flex}:host(.collapsed) ol ::slotted(ic-breadcrumb.hide){display:none;opacity:0;visibility:hidden}:host(.collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){display:block;opacity:0;transition:all var(--ic-easing-transition-slow)}:host(.collapsed) ol ::slotted(ic-breadcrumb.fade){opacity:1}";
@@ -92,6 +92,8 @@ const BreadcrumbGroup = class {
                 this.removeVisuallyHiddenClass(breadcrumb);
             });
             this.expandedBreadcrumbs = true;
+            // Set focus to first unhidden breadcrumb
+            this.collapsedBreadcrumbs[0].setFocus();
         };
         this.transitionendHandler = (event) => {
             if (event.propertyName === "opacity") {

package/dist/cjs/ic-breadcrumb-group.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-breadcrumb-group.entry.cjs.js","mappings":"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","names":["DEVICE_SIZES","getCurrentDeviceSize","checkResizeObserver","h","Host"],"sources":["src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host ol {\n display: flex;\n list-style-type: none;\n align-items: center;\n flex-wrap: wrap;\n padding: 0;\n margin: 0;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb) {\n display: none;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb.show) {\n display: flex;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden) {\n display: block;\n opacity: 0;\n transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.fade) {\n opacity: 1;\n}\n","import { Component, Host, h, Element, Prop, State } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeForeground } 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 breadcrumb: HTMLIcBreadcrumbElement;\n private breadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbEl: HTMLButtonElement;\n private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n private resizeObserver: ResizeObserver = null;\n private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n @Element() el: HTMLIcBreadcrumbGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() expandedBreadcrumbs: boolean = false;\n\n /*\n The appearance of the breadcrumb group.\n /\n @Prop() appearance: IcThemeForeground = \"default\";\n\n /\n If `true`, display only a single breadcrumb for the parent page with a back icon.\n /\n @Prop() backBreadcrumbOnly: boolean = false;\n /\n If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n */\n @Prop() collapsed: boolean = false;\n\n componentWillLoad(): void {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n if (this.appearance !== \"default\") {\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(\"appearance\", this.appearance);\n });\n }\n\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumb();\n } else {\n checkResizeObserver(this.runResizeObserver);\n }\n\n if (this.collapsed) {\n this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n\n if (allBreadcrumbs.length > 2) {\n if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setCollapsed();\n }\n }\n }\n }\n\n disconnectedCallback(): void {\n this.breadcrumb &&\n this.breadcrumb.removeEventListener(\n \"transitionend\",\n this.transitionendHandler\n );\n\n this.collapsedBreadcrumbEl &&\n this.collapsedBreadcrumbEl.removeEventListener(\n \"click\",\n this.clickHandler\n );\n }\n\n private setBackBreadcrumb = () => {\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumbAttr();\n }\n };\n\n private setBackBreadcrumbAttr = () => {\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.add(\"show\");\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n }\n };\n\n private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement \| null => {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n if (allBreadcrumbs.length === 1) {\n return null;\n }\n\n this.breadcrumbs = allBreadcrumbs.filter(\n (breadcrumb) => !breadcrumb.getAttribute(\"current\")\n );\n this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];\n\n return this.breadcrumb;\n };\n\n private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n private setDefaultBreadcrumbs = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n });\n };\n\n private setCollapsed = () => {\n if (this.collapsed) {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n this.collapsedBreadcrumbs = allBreadcrumbs\n .splice(1, allBreadcrumbs.length - 2)\n .filter(\n (breadcrumb) =>\n !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n );\n\n this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n breadcrumb.classList.add(\"hide\")\n );\n\n const firstBreadcrumb = allBreadcrumbs[0];\n\n if (firstBreadcrumb) {\n firstBreadcrumb.insertAdjacentElement(\n \"afterend\",\n this.collapsedBreadcrumbWrapper\n );\n }\n }\n };\n\n private clickHandler = () => {\n this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n };\n\n private renderCollapsedBreadcrumb = () => {\n this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n this.collapsedBreadcrumbWrapper.classList.add(\n \"collapsed-breadcrumb-wrapper\"\n );\n this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n const ariaLabel = document.createElement(\"span\");\n ariaLabel.id = \"collapsed-button-label\";\n ariaLabel.innerText = \"Collapsed breadcrumbs\";\n ariaLabel.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-labelledby\",\n \"collapsed-button-label\"\n );\n\n const ariaDescribed = document.createElement(\"span\");\n ariaDescribed.id = \"collapsed-button-described\";\n ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n ariaDescribed.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-describedby\",\n \"collapsed-button-described\"\n );\n\n this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n this.collapsedBreadcrumbEl.innerText = \"...\";\n this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n this.collapsedBreadcrumbWrapper.append(ariaLabel);\n this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n\n return this.collapsedBreadcrumbWrapper;\n };\n\n private handleHiddenCollapsedBreadcrumbs = (\n collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement\n ) => {\n collapsedBreadcrumbWrapper.remove();\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.add(\"visuallyhidden\");\n breadcrumb.classList.remove(\"hide\");\n setTimeout(() => {\n breadcrumb.classList.add(\"fade\");\n }, this.ADD_CLASS_DELAY);\n\n this.removeVisuallyHiddenClass(breadcrumb);\n });\n this.expandedBreadcrumbs = true;\n };\n\n private transitionendHandler = (event: TransitionEvent) => {\n if (event.propertyName === \"opacity\") {\n (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n }\n };\n\n private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n };\n\n private setLastParentCollapsedBackBreadcrumb = () => {\n this.setBackBreadcrumbAttr();\n this.lastParentBreadcrumb.classList.remove(\"hide\");\n };\n\n private revertLastParentCollapsedBreadcrumb = () => {\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n\n if (this.deviceSize <= DEVICE_SIZES.S) {\n this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n if (this.collapsed) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setBackBreadcrumb();\n }\n } else {\n this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n this.revertLastParentCollapsedBreadcrumb();\n if (this.expandedBreadcrumbs) {\n this.setDefaultBreadcrumbs();\n } else {\n this.setCollapsed();\n }\n } else {\n this.setDefaultBreadcrumbs();\n }\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n back: this.backBreadcrumbOnly,\n collapsed: this.collapsed,\n }}\n >\n <nav aria-label=\"breadcrumbs\">\n <ol>\n <slot />\n </ol>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-breadcrumb-group.entry.cjs.js","mappings":"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","names":["DEVICE_SIZES","getCurrentDeviceSize","checkResizeObserver","h","Host"],"sources":["src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host ol {\n display: flex;\n list-style-type: none;\n align-items: center;\n flex-wrap: wrap;\n padding: 0;\n margin: 0;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb) {\n display: none;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb.show) {\n display: flex;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden) {\n display: block;\n opacity: 0;\n transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.fade) {\n opacity: 1;\n}\n","import { Component, Host, h, Element, Prop, State } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeForeground } 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 breadcrumb: HTMLIcBreadcrumbElement;\n private breadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbEl: HTMLButtonElement;\n private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n private resizeObserver: ResizeObserver = null;\n private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n @Element() el: HTMLIcBreadcrumbGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() expandedBreadcrumbs: boolean = false;\n\n /*\n The appearance of the breadcrumb group.\n /\n @Prop() appearance: IcThemeForeground = \"default\";\n\n /\n If `true`, display only a single breadcrumb for the parent page with a back icon.\n /\n @Prop() backBreadcrumbOnly: boolean = false;\n /\n If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n */\n @Prop() collapsed: boolean = false;\n\n componentWillLoad(): void {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n if (this.appearance !== \"default\") {\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(\"appearance\", this.appearance);\n });\n }\n\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumb();\n } else {\n checkResizeObserver(this.runResizeObserver);\n }\n\n if (this.collapsed) {\n this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n\n if (allBreadcrumbs.length > 2) {\n if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setCollapsed();\n }\n }\n }\n }\n\n disconnectedCallback(): void {\n this.breadcrumb &&\n this.breadcrumb.removeEventListener(\n \"transitionend\",\n this.transitionendHandler\n );\n\n this.collapsedBreadcrumbEl &&\n this.collapsedBreadcrumbEl.removeEventListener(\n \"click\",\n this.clickHandler\n );\n }\n\n private setBackBreadcrumb = () => {\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumbAttr();\n }\n };\n\n private setBackBreadcrumbAttr = () => {\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.add(\"show\");\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n }\n };\n\n private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement \| null => {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n if (allBreadcrumbs.length === 1) {\n return null;\n }\n\n this.breadcrumbs = allBreadcrumbs.filter(\n (breadcrumb) => !breadcrumb.getAttribute(\"current\")\n );\n this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];\n\n return this.breadcrumb;\n };\n\n private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n private setDefaultBreadcrumbs = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n });\n };\n\n private setCollapsed = () => {\n if (this.collapsed) {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n this.collapsedBreadcrumbs = allBreadcrumbs\n .splice(1, allBreadcrumbs.length - 2)\n .filter(\n (breadcrumb) =>\n !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n );\n\n this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n breadcrumb.classList.add(\"hide\")\n );\n\n const firstBreadcrumb = allBreadcrumbs[0];\n\n if (firstBreadcrumb) {\n firstBreadcrumb.insertAdjacentElement(\n \"afterend\",\n this.collapsedBreadcrumbWrapper\n );\n }\n }\n };\n\n private clickHandler = () => {\n this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n };\n\n private renderCollapsedBreadcrumb = () => {\n this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n this.collapsedBreadcrumbWrapper.classList.add(\n \"collapsed-breadcrumb-wrapper\"\n );\n this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n const ariaLabel = document.createElement(\"span\");\n ariaLabel.id = \"collapsed-button-label\";\n ariaLabel.innerText = \"Collapsed breadcrumbs\";\n ariaLabel.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-labelledby\",\n \"collapsed-button-label\"\n );\n\n const ariaDescribed = document.createElement(\"span\");\n ariaDescribed.id = \"collapsed-button-described\";\n ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n ariaDescribed.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-describedby\",\n \"collapsed-button-described\"\n );\n\n this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n this.collapsedBreadcrumbEl.innerText = \"...\";\n this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n this.collapsedBreadcrumbWrapper.append(ariaLabel);\n this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n\n return this.collapsedBreadcrumbWrapper;\n };\n\n private handleHiddenCollapsedBreadcrumbs = (\n collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement\n ) => {\n collapsedBreadcrumbWrapper.remove();\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.add(\"visuallyhidden\");\n breadcrumb.classList.remove(\"hide\");\n setTimeout(() => {\n breadcrumb.classList.add(\"fade\");\n }, this.ADD_CLASS_DELAY);\n\n this.removeVisuallyHiddenClass(breadcrumb);\n });\n this.expandedBreadcrumbs = true;\n // Set focus to first unhidden breadcrumb\n this.collapsedBreadcrumbs[0].setFocus();\n };\n\n private transitionendHandler = (event: TransitionEvent) => {\n if (event.propertyName === \"opacity\") {\n (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n }\n };\n\n private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n };\n\n private setLastParentCollapsedBackBreadcrumb = () => {\n this.setBackBreadcrumbAttr();\n this.lastParentBreadcrumb.classList.remove(\"hide\");\n };\n\n private revertLastParentCollapsedBreadcrumb = () => {\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n\n if (this.deviceSize <= DEVICE_SIZES.S) {\n this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n if (this.collapsed) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setBackBreadcrumb();\n }\n } else {\n this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n this.revertLastParentCollapsedBreadcrumb();\n if (this.expandedBreadcrumbs) {\n this.setDefaultBreadcrumbs();\n } else {\n this.setCollapsed();\n }\n } else {\n this.setDefaultBreadcrumbs();\n }\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n back: this.backBreadcrumbOnly,\n collapsed: this.collapsed,\n }}\n >\n <nav aria-label=\"breadcrumbs\">\n <ol>\n <slot />\n </ol>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f982899d.js');
 const chevronIcon = require('./chevron-icon-3bf07531.js');
-const helpers = require('./helpers-88e018cf.js');
+const helpers = require('./helpers-466a551d.js');
 require('./types-dc22e301.js');
 const backIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">