npm - @ukic/web-components - Versions diffs - 2.1.0-beta.0 → 2.1.0-beta.10 - Mend

@ukic/web-components 2.1.0-beta.0 → 2.1.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (826) hide show

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

@@ -2,11 +2,12 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { o as onComponentPropUndefinedChange, a as onComponentRequiredPropUndefined } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
-const ArrowUpward = `<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" aria-hidden="true">
+const ArrowUpward = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
     <path d="M0 8L1.41 9.41L7 3.83V16H9V3.83L14.58 9.42L16 8L8 0L0 8Z"/>
-</svg>`;
+</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:40px;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:1px solid var(--ic-action-default);outline-width:inherit;box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);border-radius:80px;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-overlay)}button:hover{text-decoration:none;background-color:var(--ic-action-default-bg-hover-no-alpha);border:1px solid var(--ic-action-default-hover)}button:active{text-decoration:none;background-color:var(--ic-action-default-bg-active-no-alpha);border:1px 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:56px}.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-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)}";
+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:0.063rem 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:0.063rem solid var(--ic-action-default-hover)}button:active{text-decoration:none;background-color:var(--ic-action-default-bg-active-no-alpha);border:0.063rem 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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -19,7 +20,13 @@ const BackToTop = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.targetElVisible = visible;
     };
     this.setFooterVisible = (visible) => {
-      this.footerVisible = visible;
+      this.checkForClassificationBanner();
+      if (typeof window !== "undefined" && window.scrollY === 0) {
+        this.footerVisible = false;
+      }
+      else {
+        this.footerVisible = visible;
+      }
     };
     this.targetElObserverCallback = (entries) => {
       this.setTargetElVisible(entries[0].isIntersecting);
@@ -80,6 +87,11 @@ const BackToTop = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.targetEl.scrollIntoView();
       }
     };
+    this.checkForClassificationBanner = () => {
+      //adjust position for classification banner at bottom
+      const banners = document.querySelectorAll("ic-classification-banner:not([inline='true'])");
+      this.bannerOffset = banners.length > 0;
+    };
     this.target = undefined;
     this.bannerOffset = false;
     this.targetElVisible = true;
@@ -93,13 +105,12 @@ const BackToTop = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentWillLoad() {
     this.createTopObserver(this.target);
-    //adjust position for classification banner at bottom
-    const banners = document.querySelectorAll("ic-classification-banner:not([inline='true'])");
-    if (banners.length) {
-      this.bannerOffset = true;
-    }
+    this.checkForClassificationBanner();
     //observer for when footer scrolls into view
-    const footers = document.querySelectorAll("footer");
+    let footers = document.querySelectorAll("ic-footer");
+    if (footers.length === 0) {
+      footers = document.querySelectorAll("footer");
+    }
     if (footers.length) {
       const footerEl = footers[footers.length - 1];
       const threshold = this.bannerOffset ? 0.15 : 0;
@@ -119,12 +130,13 @@ const BackToTop = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         ["by-footer"]: footerVisible,
       }, "aria-label": backToTopLabel, onClick: this.handleClick }, h("span", { class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), h("ic-typography", { variant: "subtitle-small" }, h("span", null, backToTopLabel))));
   }
+  static get delegatesFocus() { return true; }
   get el() { return this; }
   static get watchers() { return {
     "target": ["watchPropHandler"]
   }; }
   static get style() { return icBackToTopCss; }
-}, [1, "ic-back-to-top", {
+}, [17, "ic-back-to-top", {
     "target": [1],
     "bannerOffset": [32],
     "targetElVisible": [32],

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

	@@ -1 +1 @@
1	- {"file":"ic-back-to-top.js","mappings":"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","names":[],"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/normalise.css\";\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: 40px;\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: 1px solid var(--ic-action-default);\n outline-width: inherit;\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n border-radius: 80px;\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-overlay);\n}\n\nbutton:hover {\n text-decoration: none;\n background-color: var(--ic-action-default-bg-hover-no-alpha);\n border: 1px 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: 1px 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: 56px;\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-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","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: true,\n})\nexport class BackToTop {\n @Element() el: HTMLIcBackToTopElement;\n\n /*\n The ID of the element to jump back to when the link is clicked.\n */\n @Prop() target!: string;\n\n @State() bannerOffset: boolean = false;\n\n @State() targetElVisible: boolean = true;\n\n @State() footerVisible: boolean = false;\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 private topObserver: IntersectionObserver = null;\n private targetEl: Element;\n private isTargetElNull: boolean;\n\n private setTargetElVisible = (visible: boolean) => {\n this.targetElVisible = visible;\n };\n\n private setFooterVisible = (visible: boolean) => {\n this.footerVisible = 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.indexOf(\"#\") === 0 ? target : \"#\" + 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 componentWillLoad(): void {\n this.createTopObserver(this.target);\n\n //adjust position for classification banner at bottom\n const banners = document.querySelectorAll(\n \"ic-classification-banner:not([inline='true'])\"\n );\n if (banners.length) {\n this.bannerOffset = true;\n }\n\n //observer for when footer scrolls into view\n const footers = document.querySelectorAll(\"footer\");\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 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.js","mappings":"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","names":[],"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: 0.063rem 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: 0.063rem 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: 0.063rem 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 @Element() el: HTMLIcBackToTopElement;\n\n /\n The ID of the element to jump back to when the link is clicked.\n */\n @Prop() target!: string;\n\n @State() bannerOffset: boolean = false;\n\n @State() targetElVisible: boolean = true;\n\n @State() footerVisible: boolean = false;\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 private topObserver: IntersectionObserver = null;\n private targetEl: Element;\n private isTargetElNull: boolean;\n\n private setTargetElVisible = (visible: boolean) => {\n this.targetElVisible = visible;\n };\n\n private setFooterVisible = (visible: boolean) => {\n this.checkForClassificationBanner();\n if (typeof window !== \"undefined\" && window.scrollY === 0) {\n this.footerVisible = false;\n } else {\n this.footerVisible = visible;\n }\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.indexOf(\"#\") === 0 ? target : \"#\" + 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 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 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}

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

	@@ -1 +1 @@
1	- {"file":"ic-breadcrumb-group.js","mappings":"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","names":[],"sources":["./src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","./src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host ol {\n display: flex;\n list-style-type: none;\n align-items: center;\n flex-wrap: wrap;\n padding: 0;\n margin: 0;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb) {\n display: none;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb.show) {\n display: flex;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden) {\n display: block;\n opacity: 0;\n transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.fade) {\n opacity: 1;\n}\n","import { Component, Host, h, Element, Prop, State } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-breadcrumb-group\",\n styleUrl: \"ic-breadcrumb-group.css\",\n shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n @Element() el: HTMLIcBreadcrumbGroupElement;\n /*\n If true, display the parent page and back icon as breadcrumb\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 @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() expandedBreadcrumbs: boolean = false;\n\n private breadcrumbs: HTMLIcBreadcrumbElement[];\n private breadcrumb: HTMLIcBreadcrumbElement;\n private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n private ADD_CLASS_DELAY = 50;\n private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n\n private setBackBreadcrumb = () => {\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumbAttr();\n }\n };\n\n private setBackBreadcrumbAttr = () => {\n const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n if (lastParentBreadcrumb) {\n lastParentBreadcrumb.classList.add(\"show\");\n lastParentBreadcrumb.setAttribute(\"show-back-icon\", \"true\");\n }\n };\n\n private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement \| null => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(\"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 setDefaultBreadcrumbs = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(\"ic-breadcrumb\")\n );\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(\"show-back-icon\", \"false\");\n });\n };\n\n private setCollapsed = () => {\n if (this.collapsed) {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(\"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 renderCollapsedBreadcrumb = () => {\n this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n this.collapsedBreadcrumbWrapper.classList.add(\n \"collapsed-breadcrumb-wrapper\"\n );\n const 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 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 collapsedBreadcrumbEl.setAttribute(\n \"aria-describedby\",\n \"collapsed-button-described\"\n );\n\n collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n collapsedBreadcrumbEl.innerText = \"...\";\n collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n collapsedBreadcrumbEl.addEventListener(\"click\", () => {\n this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n });\n\n this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n this.collapsedBreadcrumbWrapper.append(ariaLabel);\n this.collapsedBreadcrumbWrapper.append(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 removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.addEventListener(\"transitionend\", (e) => {\n if (e.propertyName === \"opacity\") {\n breadcrumb.classList.remove(\"visuallyhidden\");\n }\n });\n };\n\n private setLastParentCollapsedBackBreadcrumb = () => {\n const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n this.setBackBreadcrumbAttr();\n lastParentBreadcrumb.classList.remove(\"hide\");\n };\n\n private revertLastParentCollapsedBreadcrumb = () => {\n const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n lastParentBreadcrumb.setAttribute(\"show-back-icon\", \"false\");\n };\n\n private resizeObserver: ResizeObserver = null;\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 componentWillLoad(): void {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(\"ic-breadcrumb\")\n );\n\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumb();\n } else {\n checkResizeObserver(this.runResizeObserver);\n }\n\n if (this.collapsed) {\n this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n\n if (allBreadcrumbs.length > 2) {\n if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setCollapsed();\n }\n }\n }\n }\n\n 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.js","mappings":";;;;;AAAA,MAAM,oBAAoB,GAAG,qgBAAqgB;;MCcrhB,eAAe;;;;;IAiBlB,oBAAe,GAAG,EAAE,CAAC;IAGrB,sBAAiB,GAAG;MAC1B,IAAI,IAAI,CAAC,kBAAkB,EAAE;QAC3B,IAAI,CAAC,qBAAqB,EAAE,CAAC;OAC9B;KACF,CAAC;IAEM,0BAAqB,GAAG;MAC9B,MAAM,oBAAoB,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;MAC5D,IAAI,oBAAoB,EAAE;QACxB,oBAAoB,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC3C,oBAAoB,CAAC,YAAY,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;OAC7D;KACF,CAAC;IAEM,4BAAuB,GAAG;MAChC,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAC1C,CAAC;MAEF,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;QAC/B,OAAO,IAAI,CAAC;OACb;MAED,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC,MAAM,CACtC,CAAC,UAAU,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,SAAS,CAAC,CACpD,CAAC;MACF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;MAEhE,OAAO,IAAI,CAAC,UAAU,CAAC;KACxB,CAAC;IAEM,0BAAqB,GAAG;MAC9B,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAC1C,CAAC;MACF,cAAc,CAAC,OAAO,CAAC,CAAC,UAAU;QAChC,UAAU,CAAC,YAAY,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;OACpD,CAAC,CAAC;KACJ,CAAC;IAEM,iBAAY,GAAG;MACrB,IAAI,IAAI,CAAC,SAAS,EAAE;QAClB,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAC1C,CAAC;QACF,IAAI,CAAC,oBAAoB,GAAG,cAAc;WACvC,MAAM,CAAC,CAAC,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;WACpC,MAAM,CACL,CAAC,UAAU,KACT,CAAC,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,8BAA8B,CAAC,CACjE,CAAC;QAEJ,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,UAAU,KAC3C,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CACjC,CAAC;QAEF,MAAM,eAAe,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;QAE1C,IAAI,eAAe,EAAE;UACnB,eAAe,CAAC,qBAAqB,CACnC,UAAU,EACV,IAAI,CAAC,0BAA0B,CAChC,CAAC;SACH;OACF;KACF,CAAC;IAEM,8BAAyB,GAAG;MAClC,IAAI,CAAC,0BAA0B,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MAC1E,IAAI,CAAC,0BAA0B,CAAC,SAAS,CAAC,GAAG,CAC3C,8BAA8B,CAC/B,CAAC;MACF,MAAM,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MAE/D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACjD,SAAS,CAAC,EAAE,GAAG,wBAAwB,CAAC;MACxC,SAAS,CAAC,SAAS,GAAG,uBAAuB,CAAC;MAC9C,SAAS,CAAC,SAAS,GAAG,MAAM,CAAC;MAC7B,qBAAqB,CAAC,YAAY,CAChC,iBAAiB,EACjB,wBAAwB,CACzB,CAAC;MAEF,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACrD,aAAa,CAAC,EAAE,GAAG,4BAA4B,CAAC;MAChD,aAAa,CAAC,SAAS,GAAG,sCAAsC,CAAC;MACjE,aAAa,CAAC,SAAS,GAAG,MAAM,CAAC;MACjC,qBAAqB,CAAC,YAAY,CAChC,kBAAkB,EAClB,4BAA4B,CAC7B,CAAC;MAEF,qBAAqB,CAAC,EAAE,GAAG,oBAAoB,CAAC;MAChD,qBAAqB,CAAC,SAAS,GAAG,KAAK,CAAC;MACxC,qBAAqB,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;MAC5D,qBAAqB,CAAC,gBAAgB,CAAC,OAAO,EAAE;QAC9C,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;OACxE,CAAC,CAAC;MAEH,IAAI,CAAC,0BAA0B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;MACtD,IAAI,CAAC,0BAA0B,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;MAClD,IAAI,CAAC,0BAA0B,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;MAE9D,OAAO,IAAI,CAAC,0BAA0B,CAAC;KACxC,CAAC;IAEM,qCAAgC,GAAG,CACzC,0BAAmD;MAEnD,0BAA0B,CAAC,MAAM,EAAE,CAAC;MACpC,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,UAAU;QAC3C,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;QAC3C,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACpC,UAAU,CAAC;UACT,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;SAClC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAEzB,IAAI,CAAC,yBAAyB,CAAC,UAAU,CAAC,CAAC;OAC5C,CAAC,CAAC;MACH,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;KACjC,CAAC;IAEM,8BAAyB,GAAG,CAAC,UAAmC;MACtE,UAAU,CAAC,gBAAgB,CAAC,eAAe,EAAE,CAAC,CAAC;QAC7C,IAAI,CAAC,CAAC,YAAY,KAAK,SAAS,EAAE;UAChC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;SAC/C;OACF,CAAC,CAAC;KACJ,CAAC;IAEM,yCAAoC,GAAG;MAC7C,MAAM,oBAAoB,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;MAC5D,IAAI,CAAC,qBAAqB,EAAE,CAAC;MAC7B,oBAAoB,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;KAC/C,CAAC;IAEM,wCAAmC,GAAG;MAC5C,MAAM,oBAAoB,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;MAC5D,oBAAoB,CAAC,YAAY,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;KAC9D,CAAC;IAEM,mBAAc,GAAmB,IAAI,CAAC;IAEtC,2BAAsB,GAAG,CAAC,QAAgB;MAChD,IAAI,QAAQ,KAAK,IAAI,CAAC,UAAU,EAAE;QAChC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;QAE3B,IAAI,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,CAAC,EAAE;UACrC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;UACrD,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,oCAAoC,EAAE,CAAC;WAC7C;eAAM;YACL,IAAI,CAAC,iBAAiB,EAAE,CAAC;WAC1B;SACF;aAAM;UACL,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;UACtD,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YACrE,IAAI,CAAC,mCAAmC,EAAE,CAAC;YAC3C,IAAI,IAAI,CAAC,mBAAmB,EAAE;cAC5B,IAAI,CAAC,qBAAqB,EAAE,CAAC;aAC9B;iBAAM;cACL,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;WACF;eAAM;YACL,IAAI,CAAC,qBAAqB,EAAE,CAAC;WAC9B;SACF;OACF;KACF,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;QACvC,MAAM,QAAQ,GAAG,oBAAoB,EAAE,CAAC;QACxC,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC;OACvC,CAAC,CAAC;MAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACtC,CAAC;8BAhMoC,KAAK;qBAId,KAAK;sBAEJ,YAAY,CAAC,EAAE;+BACL,KAAK;;EA2L7C,iBAAiB;IACf,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAC1C,CAAC;IAEF,IAAI,IAAI,CAAC,kBAAkB,EAAE;MAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;SAAM;MACL,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAC7C;IAED,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;MAEnE,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;QAC7B,IAAI,oBAAoB,EAAE,KAAK,YAAY,CAAC,CAAC,EAAE;UAC7C,IAAI,CAAC,oCAAoC,EAAE,CAAC;SAC7C;aAAM;UACL,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;OACF;KACF;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CAAC,kBAAkB;QAC7B,SAAS,EAAE,IAAI,CAAC,SAAS;OAC1B,IAED,yBAAgB,aAAa,IAC3B,cACE,eAAQ,CACL,CACD,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","./src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host ol {\n display: flex;\n list-style-type: none;\n align-items: center;\n flex-wrap: wrap;\n padding: 0;\n margin: 0;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb) {\n display: none;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb.show) {\n display: flex;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden) {\n display: block;\n opacity: 0;\n transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.fade) {\n opacity: 1;\n}\n","import { Component, Host, h, Element, Prop, State } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-breadcrumb-group\",\n styleUrl: \"ic-breadcrumb-group.css\",\n shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n @Element() el: HTMLIcBreadcrumbGroupElement;\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 @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() expandedBreadcrumbs: boolean = false;\n\n private breadcrumbs: HTMLIcBreadcrumbElement[];\n private breadcrumb: HTMLIcBreadcrumbElement;\n private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n private ADD_CLASS_DELAY = 50;\n private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n\n private setBackBreadcrumb = () => {\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumbAttr();\n }\n };\n\n private setBackBreadcrumbAttr = () => {\n const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n if (lastParentBreadcrumb) {\n lastParentBreadcrumb.classList.add(\"show\");\n lastParentBreadcrumb.setAttribute(\"show-back-icon\", \"true\");\n }\n };\n\n private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement \| null => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(\"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 setDefaultBreadcrumbs = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(\"ic-breadcrumb\")\n );\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(\"show-back-icon\", \"false\");\n });\n };\n\n private setCollapsed = () => {\n if (this.collapsed) {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(\"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 renderCollapsedBreadcrumb = () => {\n this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n this.collapsedBreadcrumbWrapper.classList.add(\n \"collapsed-breadcrumb-wrapper\"\n );\n const 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 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 collapsedBreadcrumbEl.setAttribute(\n \"aria-describedby\",\n \"collapsed-button-described\"\n );\n\n collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n collapsedBreadcrumbEl.innerText = \"...\";\n collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n collapsedBreadcrumbEl.addEventListener(\"click\", () => {\n this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n });\n\n this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n this.collapsedBreadcrumbWrapper.append(ariaLabel);\n this.collapsedBreadcrumbWrapper.append(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 removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.addEventListener(\"transitionend\", (e) => {\n if (e.propertyName === \"opacity\") {\n breadcrumb.classList.remove(\"visuallyhidden\");\n }\n });\n };\n\n private setLastParentCollapsedBackBreadcrumb = () => {\n const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n this.setBackBreadcrumbAttr();\n lastParentBreadcrumb.classList.remove(\"hide\");\n };\n\n private revertLastParentCollapsedBreadcrumb = () => {\n const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n lastParentBreadcrumb.setAttribute(\"show-back-icon\", \"false\");\n };\n\n private resizeObserver: ResizeObserver = null;\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 componentWillLoad(): void {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(\"ic-breadcrumb\")\n );\n\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumb();\n } else {\n checkResizeObserver(this.runResizeObserver);\n }\n\n if (this.collapsed) {\n this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n\n if (allBreadcrumbs.length > 2) {\n if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setCollapsed();\n }\n }\n }\n }\n\n 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/components/ic-breadcrumb2.js CHANGED Viewed

@@ -3,12 +3,12 @@ import { c as chevronIcon } from './chevron-icon.js';
 import { i as isSlotUsed } from './helpers.js';
 import { d as defineCustomElement$1 } from './ic-link2.js';
-const backIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+const backIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>
 </svg>
 `;
-const icBreadcrumbCss = ":host{display:block;margin:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}:host .breadcrumb{display:flex;align-items:center;white-space:nowrap;gap:var(--ic-space-xs);min-height:var(--ic-space-lg)}:host .chevron{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host .chevron svg{color:var(--ic-architectural-400)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-hyperlink)}:host(.back){display:flex;align-items:center}:host(.back) .chevron{display:none}ic-link{--breadcrumb-link-display:flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current=\"page\"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper){margin-right:var(--ic-space-xs) !important;display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb){border:none;background-color:transparent;color:var(--ic-hyperlink);text-decoration:underline;font-weight:var(--ic-font-weight-bold);cursor:pointer}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){outline:var(--ic-hc-focus-outline);text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}";
+const icBreadcrumbCss = ":host{display:block;margin:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}:host .breadcrumb{display:flex;align-items:center;white-space:nowrap;gap:var(--ic-space-xs);min-height:var(--ic-space-lg)}:host .chevron{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host .chevron svg{color:var(--ic-architectural-400)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-hyperlink)}:host(.back){display:flex;align-items:center}:host(.back) .chevron{display:none}ic-link{--breadcrumb-link-display:flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current=\"page\"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper){margin-right:var(--ic-space-xs) !important;display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb){border:none;background-color:transparent;color:var(--ic-hyperlink);text-decoration:underline;font-weight:var(--ic-font-weight-bold);cursor:pointer}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){outline:var(--ic-hc-focus-outline);text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}@media (forced-colors: active){.back-icon svg{color:currentcolor}}";
 const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -41,6 +41,14 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.current = false;
     this.showBackIcon = false;
   }
+  /**
+   * Sets focus on the breadcrumb.
+   */
+  async setFocus() {
+    if (this.el.shadowRoot.querySelector("ic-link")) {
+      this.el.shadowRoot.querySelector("ic-link").focus();
+    }
+  }
   componentWillRender() {
     this.setSlottedCurrentPageClass();
   }
@@ -53,13 +61,15 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         back: this.showBackIcon,
       }, "aria-current": current && "page", role: "listitem" }, h("div", { class: "breadcrumb" }, h("span", { innerHTML: chevronIcon, class: "chevron", "aria-hidden": "true" }), this.showBackIcon && describedById && (h("span", { id: describedById, class: "hide" }, `Back to ${pageTitle}`)), hasPageTitle && hasHref ? (this.renderDefaultBreadcrumb(current, pageTitle, describedById, href)) : (h("slot", null)))));
   }
+  static get delegatesFocus() { return true; }
   get el() { return this; }
   static get style() { return icBreadcrumbCss; }
-}, [1, "ic-breadcrumb", {
+}, [17, "ic-breadcrumb", {
     "pageTitle": [1, "page-title"],
     "href": [1],
     "current": [4],
-    "showBackIcon": [516, "show-back-icon"]
+    "showBackIcon": [516, "show-back-icon"],
+    "setFocus": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/ic-breadcrumb2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-breadcrumb2.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,~~04CAA04C~~;;~~MCYr5C~~,UAAU;;;;;~~IAwBb~~,4BAAuB,GAAG,CAChC,OAAgB,EAChB,SAAiB,EACjB,aAAqB,EACrB,IAAY;MAEZ,MAAM,YAAY,GAChB,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,EAAE,CAAC;MAEpE,IAAI,OAAO,IAAI,YAAY,EAAE;QAC3B,QACE,YACE,KAAK,EAAE;YACL,wBAAwB,EAAE,OAAO;WAClC,IAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,EACxD,SAAS,CACL,EACP;OACH;MAED,QACE,eACE,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,iBAAiB,sBACL,IAAI,CAAC,YAAY,IAAI,aAAa,IAAI,aAAa,IAEpE,IAAI,CAAC,YAAY,KAChB,WAAK,KAAK,EAAC,WAAW,EAAC,SAAS,EAAE,QAAQ,GAAQ,CACnD,EACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,EACxD,SAAS,CACF,EACV;KACH,CAAC;IAEM,+BAA0B,GAAG;MACnC,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;MAChD,IAAI,MAAM,EAAE;QACV,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QACxC,IAAI,IAAI,CAAC,OAAO,EAAE;UAChB,MAAM,mBAAmB,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;UACtE,IAAI,CAAC,mBAAmB,EAAE;YACxB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC;WACzD;SACF;OACF;KACF,CAAC;;;~~mBAvD0B~~,KAAK;wBAKgB,KAAK~~;;EAoDtD~~,mBAAmB;IACjB,IAAI,CAAC,0BAA0B,EAAE,CAAC;GACnC;EAED,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC1C,MAAM,aAAa,GAAG,GACpB,SAAS,IAAI,SAAS,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CACvD,cAAc,CAAC;IAEf,MAAM,YAAY,GAChB,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,EAAE,CAAC;IACpE,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,EAAE,CAAC;IAEnE,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CAAC,YAAY;OACxB,kBACa,OAAO,IAAI,MAAM,EAC/B,IAAI,EAAC,UAAU,IAEf,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,SAAS,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,iBAAa,MAAM,GAAG,EAClE,IAAI,CAAC,YAAY,IAAI,aAAa,KACjC,YACE,EAAE,EAAE,aAAa,EACjB,KAAK,EAAC,MAAM,IACZ,WAAW,SAAS,EAAE,CAAQ,CACjC,EACA,YAAY,IAAI,OAAO,IACtB,IAAI,CAAC,uBAAuB,CAC1B,OAAO,EACP,SAAS,EACT,aAAa,EACb,IAAI,CACL,KAED,eAAQ,CACT,CACG,CACD,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","./src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"sourcesContent":[":host {\n display: block;\n margin: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n:host .breadcrumb {\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: var(--ic-space-xs);\n min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host .chevron svg {\n color: var(--ic-architectural-400);\n}\n\n:host(:first-child) .chevron {\n display: none;\n}\n\n.back-icon svg {\n color: var(--ic-hyperlink);\n}\n\n:host(.back) {\n display: flex;\n align-items: center;\n}\n\n:host(.back) .chevron {\n display: none;\n}\n\nic-link {\n --breadcrumb-link-display: flex;\n --breadcrumb-link-align-items: center;\n --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container {\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\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-hyperlink);\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 text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n display: none;\n}\n","import { Component, Host, Prop, h, Element } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-breadcrumb\",\n styleUrl: \"ic-breadcrumb.css\",\n shadow: true,\n})\nexport class Breadcrumb {\n /*\n @slot icon - Content will be rendered to the left of the breadcrumb page title\n /\n\n @Element() el: HTMLIcBreadcrumbElement;\n /\n ~~Set~~ breadcrumb ~~title\~~n /\n @Prop() pageTitle!: string;\n /\n ~~Set~~ breadcrumb ~~location\~~n /\n @Prop() href?: string;\n /\n If true, aria-current will be set on the breadcrumb\n /\n @Prop() current?: boolean = false;\n\n /\n @internal If true, ~~display~~ back icon\n */\n @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n private renderDefaultBreadcrumb = (\n current: boolean,\n pageTitle: string,\n describedById: string,\n href: string\n ): IcBreadcrumbDefault => {\n const hasPageTitle =\n pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n\n if (current && hasPageTitle) {\n return (\n <span\n class={{\n \"current-page-container\": current,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </span>\n );\n }\n\n return (\n <ic-link\n href={href}\n class=\"breadcrumb-link\"\n aria-describedby={this.showBackIcon && describedById && describedById}\n >\n {this.showBackIcon && (\n <div class=\"back-icon\" innerHTML={backIcon}></div>\n )}\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </ic-link>\n );\n };\n\n private setSlottedCurrentPageClass = () => {\n const icLink = this.el.querySelector(\"ic-link\");\n if (icLink) {\n icLink.classList.remove(\"current-page\");\n if (this.current) {\n const hasCurrentPageClass = icLink.classList.contains(\"current-page\");\n if (!hasCurrentPageClass) {\n icLink.classList.add(\"breadcrumb-link\", \"current-page\");\n }\n }\n }\n };\n\n componentWillRender(): void {\n this.setSlottedCurrentPageClass();\n }\n\n render() {\n const { current, href, pageTitle } = this;\n const describedById = `${\n pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n }-describedby`;\n\n const hasPageTitle =\n pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n const hasHref = href !== null && href !== undefined && href !== \"\";\n\n return (\n <Host\n class={{\n back: this.showBackIcon,\n }}\n aria-current={current && \"page\"}\n role=\"listitem\"\n >\n <div class=\"breadcrumb\">\n <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n {this.showBackIcon && describedById && (\n <span\n id={describedById}\n class=\"hide\"\n >{`Back to ${pageTitle}`}</span>\n )}\n {hasPageTitle && hasHref ? (\n this.renderDefaultBreadcrumb(\n current,\n pageTitle,\n describedById,\n href\n )\n ) : (\n <slot />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-breadcrumb2.js","mappings":"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","names":[],"sources":["./src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","./src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"sourcesContent":[":host {\n display: block;\n margin: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n:host .breadcrumb {\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: var(--ic-space-xs);\n min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host .chevron svg {\n color: var(--ic-architectural-400);\n}\n\n:host(:first-child) .chevron {\n display: none;\n}\n\n.back-icon svg {\n color: var(--ic-hyperlink);\n}\n\n:host(.back) {\n display: flex;\n align-items: center;\n}\n\n:host(.back) .chevron {\n display: none;\n}\n\nic-link {\n --breadcrumb-link-display: flex;\n --breadcrumb-link-align-items: center;\n --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container {\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\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-hyperlink);\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 text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n display: none;\n}\n\n@media (forced-colors: active) {\n .back-icon svg {\n color: currentcolor;\n }\n}\n","import { Component, Host, Prop, h, Element, Method } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-breadcrumb\",\n styleUrl: \"ic-breadcrumb.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Breadcrumb {\n /*\n @slot icon - Content will be rendered to the left of the breadcrumb page title.\n /\n\n @Element() el: HTMLIcBreadcrumbElement;\n /\n The title of the breadcrumb.\n /\n @Prop() pageTitle!: string;\n /\n The URL that the breadcrumb link points to.\n /\n @Prop() href?: string;\n /\n If `true`, aria-current will be set on the breadcrumb.\n /\n @Prop() current?: boolean = false;\n\n /\n @internal If `true`, back icon will be displayed.\n /\n @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n /\n Sets focus on the breadcrumb.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"ic-link\")) {\n this.el.shadowRoot.querySelector(\"ic-link\").focus();\n }\n }\n\n private renderDefaultBreadcrumb = (\n current: boolean,\n pageTitle: string,\n describedById: string,\n href: string\n ): IcBreadcrumbDefault => {\n const hasPageTitle =\n pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n\n if (current && hasPageTitle) {\n return (\n <span\n class={{\n \"current-page-container\": current,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </span>\n );\n }\n\n return (\n <ic-link\n href={href}\n class=\"breadcrumb-link\"\n aria-describedby={this.showBackIcon && describedById && describedById}\n >\n {this.showBackIcon && (\n <div class=\"back-icon\" innerHTML={backIcon}></div>\n )}\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </ic-link>\n );\n };\n\n private setSlottedCurrentPageClass = () => {\n const icLink = this.el.querySelector(\"ic-link\");\n if (icLink) {\n icLink.classList.remove(\"current-page\");\n if (this.current) {\n const hasCurrentPageClass = icLink.classList.contains(\"current-page\");\n if (!hasCurrentPageClass) {\n icLink.classList.add(\"breadcrumb-link\", \"current-page\");\n }\n }\n }\n };\n\n componentWillRender(): void {\n this.setSlottedCurrentPageClass();\n }\n\n render() {\n const { current, href, pageTitle } = this;\n const describedById = `${\n pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n }-describedby`;\n\n const hasPageTitle =\n pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n const hasHref = href !== null && href !== undefined && href !== \"\";\n\n return (\n <Host\n class={{\n back: this.showBackIcon,\n }}\n aria-current={current && \"page\"}\n role=\"listitem\"\n >\n <div class=\"breadcrumb\">\n <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n {this.showBackIcon && describedById && (\n <span\n id={describedById}\n class=\"hide\"\n >{`Back to ${pageTitle}`}</span>\n )}\n {hasPageTitle && hasHref ? (\n this.renderDefaultBreadcrumb(\n current,\n pageTitle,\n describedById,\n href\n )\n ) : (\n <slot />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-button2.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { E as getThemeFromContext, l as inheritAttributes, m as IC_INHERITED_ARIA } from './helpers.js';
+import { b as getThemeFromContext, m as inheritAttributes, n as IC_INHERITED_ARIA } from './helpers.js';
 import { I as IcThemeForegroundEnum } from './types.js';
 import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$2 } from './ic-tooltip2.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
-const icButtonCss = "/*! 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:inline-block;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-active);--button-default-background-hover:var(--ic-action-default-bg-hover);--button-default-background-active:var(--ic-action-default-bg-active);--icon-width:100%;--icon-height:100%}.button{font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:14px;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:100px;display:inline-flex;gap:var(--ic-space-xs);flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}.button:hover{cursor:pointer}.button:focus,:host .button:focus{box-shadow:var(--ic-border-focus)}:host(.light) .button:focus{box-shadow:var(--ic-border-focus)}.button:focus-visible{outline:var(--ic-hc-focus-outline)}:host(.dark) .button{--button-default:var(--ic-action-dark);--button-default-hover:var(--ic-action-dark);--button-default-active:var(--ic-action-dark);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-active)}:host(.light) .button{--button-default:var(--ic-action-light);--button-default-hover:var(--ic-action-light);--button-default-active:var(--ic-action-light);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-active)}:host(.button-variant-primary.light) .button{color:var(--ic-color-primary-text);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}:host(.button-variant-primary.dark) .button{--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}:host(.disabled),:host(.disabled) .button,:host(.loading),:host(.loading) .button{pointer-events:none}:host(.button-variant-primary) .button{color:var(--ic-architectural-white);background-color:var(--button-default)}:host(.button-variant-primary) .button:hover:not(:focus){background-color:var(--button-default-hover)}:host(.button-variant-primary) .button:active:not(:focus),:host(.button-variant-primary.loading) .button{background-color:var(--button-default-active)}:host(.button-variant-primary.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-variant-primary.light.disabled) .button{background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.button-variant-secondary) .button{border:1px solid var(--button-default);color:var(--button-default)}:host(.button-variant-secondary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.button-variant-secondary) .button:active:not(:focus){border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.disabled) .button,:host(.button-variant-secondary.disabled) .button:hover,:host(.button-variant-secondary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-secondary.light.disabled) .button,:host(.button-variant-secondary.light.disabled) .button:hover,:host(.button-variant-secondary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-tertiary) .button{color:var(--button-default)}:host(.button-variant-tertiary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-tertiary) .button:active:not(:focus),:host(.button-variant-tertiary.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-tertiary.disabled) .button,:host(.button-variant-tertiary.disabled) .button:hover,:host(.button-variant-tertiary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-tertiary.light.disabled) .button,:host(.button-variant-tertiary.light.disabled) .button:hover,:host(.button-variant-tertiary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-icon) .button{color:var(--button-default);min-width:0}:host(.button-variant-icon) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button:active:not(:focus),:host(.button-variant-icon.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-icon.disabled) .button,:host(.button-variant-icon.disabled) .button:hover,:host(.button-variant-icon.disabled) .button:active{color:var(--ic-architectural-300);background:none}:host(.button-variant-destructive) .button{color:var(--ic-architectural-white);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.button-variant-destructive) .button:hover:not(:focus){background-color:var(--ic-action-destructive-hover)}:host(.button-variant-destructive) .button:active:not(:focus),:host(.button-variant-destructive.loading) .button{background-color:var(--ic-action-destructive-active)}:host(.button-variant-destructive.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-size-default) .button{height:40px;padding:var(--ic-space-xs) var(--ic-space-md)}:host(.button-size-small) .button{height:var(--ic-space-xl);padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.button-size-large) .button{height:var(--ic-space-xxl);padding:var(--ic-space-sm) var(--ic-space-md)}:host(.button-size-default.button-variant-icon) .button{height:var(--ic-space-xl);width:var(--ic-space-xl);padding:6px}:host(.button-size-small.button-variant-icon) .button{height:var(--ic-space-lg);width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.button-size-large.button-variant-icon) .button{height:40px;width:40px;padding:var(--ic-space-xs)}:host(.full-width),:host(.full-width) .button{width:100%}div.loading-container{position:relative;align-items:center}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center}::slotted(svg){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:20px;--icon-width:20px}:host(.search-submit-button-small) ::slotted(svg){--icon-height:16px;--icon-width:16px}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.menu-close-button) ::slotted(svg){--icon-height:14px;--icon-width:14px}:host(.popout-menu-button) .button{justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}";
+const icButtonCss = "/*! 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:inline-block;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-active);--button-default-background-hover:var(--ic-action-default-bg-hover);--button-default-background-active:var(--ic-action-default-bg-active);--icon-width:100%;--icon-height:100%}.button{font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:0.875rem;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:6.25rem;display:inline-flex;gap:var(--ic-space-xs);flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}.button:hover{cursor:pointer}.button:focus,:host .button:focus{box-shadow:var(--ic-border-focus)}:host(.light) .button:focus{box-shadow:var(--ic-border-focus)}.button:focus-visible{outline:var(--ic-hc-focus-outline)}:host(.dark) .button{--button-default:var(--ic-action-dark);--button-default-hover:var(--ic-action-dark);--button-default-active:var(--ic-action-dark);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-active)}:host(.light) .button{--button-default:var(--ic-action-light);--button-default-hover:var(--ic-action-light);--button-default-active:var(--ic-action-light);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-active)}:host(.button-variant-primary.light) .button{color:var(--ic-color-primary-text);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}:host(.button-variant-primary.dark) .button{--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}:host(.disabled),:host(.disabled) .button,:host(.loading),:host(.loading) .button{pointer-events:none}:host(.button-variant-primary) .button{color:var(--ic-architectural-white);background-color:var(--button-default)}:host(.button-variant-primary) .button:hover:not(:focus){background-color:var(--button-default-hover)}:host(.button-variant-primary) .button:active:not(:focus),:host(.button-variant-primary.loading) .button{background-color:var(--button-default-active)}:host(.button-variant-primary.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-variant-primary.light.disabled) .button{background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.button-variant-secondary) .button{border:0.063rem solid var(--button-default);color:var(--button-default)}:host(.button-variant-secondary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.button-variant-secondary) .button:active:not(:focus){border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.disabled) .button,:host(.button-variant-secondary.disabled) .button:hover,:host(.button-variant-secondary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-secondary.light.disabled) .button,:host(.button-variant-secondary.light.disabled) .button:hover,:host(.button-variant-secondary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-tertiary) .button{color:var(--button-default)}:host(.button-variant-tertiary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-tertiary) .button:active:not(:focus),:host(.button-variant-tertiary.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-tertiary.disabled) .button,:host(.button-variant-tertiary.disabled) .button:hover,:host(.button-variant-tertiary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-tertiary.light.disabled) .button,:host(.button-variant-tertiary.light.disabled) .button:hover,:host(.button-variant-tertiary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-icon) .button{color:var(--button-default);min-width:0}:host(.button-variant-icon) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button:active:not(:focus),:host(.button-variant-icon.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-icon.disabled) .button,:host(.button-variant-icon.disabled) .button:hover,:host(.button-variant-icon.disabled) .button:active{color:var(--ic-architectural-300);background:none}:host(.button-variant-destructive) .button{color:var(--ic-architectural-white);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.button-variant-destructive) .button:hover:not(:focus){background-color:var(--ic-action-destructive-hover)}:host(.button-variant-destructive) .button:active:not(:focus),:host(.button-variant-destructive.loading) .button{background-color:var(--ic-action-destructive-active)}:host(.button-variant-destructive.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-size-default) .button{height:2.5rem;padding:var(--ic-space-xs) var(--ic-space-md)}:host(.button-size-small) .button{height:var(--ic-space-xl);padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.button-size-large) .button{height:var(--ic-space-xxl);padding:var(--ic-space-sm) var(--ic-space-md)}:host(.button-size-default.button-variant-icon) .button{height:var(--ic-space-xl);width:var(--ic-space-xl);padding:0.375rem}:host(.button-size-small.button-variant-icon) .button{height:var(--ic-space-lg);width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.button-size-large.button-variant-icon) .button{height:2.5rem;width:2.5rem;padding:var(--ic-space-xs)}:host(.full-width),:host(.full-width) .button{width:100%}div.loading-container{position:relative;align-items:center;width:100%}ic-loading-indicator{--outer-color:transparent}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center}::slotted(*){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:1.25rem;--icon-width:1.25rem}:host(.search-submit-button-small) ::slotted(svg){--icon-height:1rem;--icon-width:1rem}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.menu-close-button) ::slotted(svg){--icon-height:0.875rem;--icon-width:0.875rem}:host(.popout-menu-button) .button{justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}@media (forced-colors: active){.button{border:0.125rem solid transparent}}";
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};
@@ -27,8 +27,6 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     this.icFocus = createEvent(this, "icFocus", 7);
     this.icBlur = createEvent(this, "icBlur", 7);
-    // CalculatedWidth must have a default value, since width is only calculated once button is rendered (with text).
-    this.calculatedWidth = 68;
     this.inheritedAttributes = {};
     this.hasTooltip = false;
     this.buttonIdNum = buttonIds++;
@@ -60,10 +58,6 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.tooltipPlacement = "bottom";
     this.appearance = "default";
   }
-  calculateWidth() {
-    // Assume even padding on left and right
-    this.calculatedWidth = this.el.offsetWidth - 2 * this.el.offsetLeft;
-  }
   handleHostClick(event) {
     if (this.disabled || this.loading) {
       event.stopImmediatePropagation();
@@ -74,7 +68,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.updateTheme(theme.mode);
   }
   /**
-   * Sets focus on the native `button`
+   * Sets focus on the native `button`.
    */
   async setFocus() {
     if (this.buttonEl) {
@@ -82,7 +76,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   /**
-   * @internal Updates tooltip/aria-label text - needed as can't watch an aria attribute change.
+   * @internal Updates tooltip/aria-label text - needed as can't watch an ARIA attribute change.
    */
   async updateAriaLabel(newValue) {
     if (this.hasTooltip) {
@@ -90,9 +84,6 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.buttonEl.setAttribute("aria-label", newValue);
     }
   }
-  getLoadingBarWidth() {
-    return { width: `${this.calculatedWidth.toString()}px` };
-  }
   hasIconSlot() {
     const iconEl = this.el.querySelector(`[slot="icon"]`);
     if (iconEl != null) {
@@ -125,7 +116,6 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.hasTooltip = this.variant === "icon";
   }
   componentDidLoad() {
-    this.calculateWidth();
     this.updateTheme();
   }
   render() {
@@ -162,7 +152,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       describedBy = `ic-tooltip-${buttonId}`;
     }
     const ButtonContent = () => {
-      return (h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel }, buttonAttrs, restInheritedAttributes, titleAttr, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), id: buttonId, "aria-describedby": describedBy }), this.hasIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), this.loading ? (h("div", { class: "loading-container", style: this.getLoadingBarWidth() }, h("ic-loading-indicator", { type: "linear", appearance: this.variant === "primary" ||
+      return (h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel }, buttonAttrs, restInheritedAttributes, titleAttr, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), id: buttonId, "aria-describedby": describedBy }), this.hasIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), this.loading ? (h("div", { class: "loading-container" }, h("ic-loading-indicator", { type: "linear", appearance: this.variant === "primary" ||
           this.variant === "destructive" ||
           this.appearance === IcThemeForegroundEnum.Dark ||
           this.appearance === IcThemeForegroundEnum.Light
@@ -177,14 +167,12 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
         ["light"]: this.appearance === IcThemeForegroundEnum.Light,
         ["full-width"]: this.fullWidth,
-      }, onClick: this.handleClick }, this.hasTooltip && (h("ic-tooltip", { class: { ["tooltip-disabled-button"]: this.disableTooltip }, ref: (el) => (this.tooltipEl = el), label: tooltipText, target: buttonId, placement: this.tooltipPlacement }, h(ButtonContent, null))), !this.hasTooltip && h(ButtonContent, null)));
+      }, onClick: this.handleClick }, this.hasTooltip && (h("ic-tooltip", { class: { ["tooltip-disabled"]: this.disableTooltip }, ref: (el) => (this.tooltipEl = el), label: tooltipText, target: buttonId, placement: this.tooltipPlacement }, h(ButtonContent, null))), !this.hasTooltip && h(ButtonContent, null)));
   }
+  static get delegatesFocus() { return true; }
   get el() { return this; }
-  static get watchers() { return {
-    "loading": ["calculateWidth"]
-  }; }
   static get style() { return icButtonCss; }
-}, [1, "ic-button", {
+}, [17, "ic-button", {
     "disabled": [4],
     "loading": [4],
     "type": [1],
@@ -202,7 +190,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "appearance": [1025],
     "setFocus": [64],
     "updateAriaLabel": [64]
-  }, [[2, "click", "handleHostClick"], [4, "icThemeChange", "themeChangeHandler"]]]);
+  }, [[2, "click", "handleHostClick"], [4, "themeChange", "themeChangeHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/ic-button2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-button2.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,k3UAAk3U;;;;;;;;;;;;;;AC2Bt4U,IAAI,SAAS,GAAG,CAAC,CAAC;MAUL,MAAM;;;;;;;;IAwET,oBAAe,GAAW,EAAE,CAAC;IAC7B,wBAAmB,GAA6B,EAAE,CAAC;IAEnD,eAAU,GAAY,KAAK,CAAC;IAC5B,gBAAW,GAAG,SAAS,EAAE,CAAC;IAoE1B,gBAAW,GAAG;MACpB,IACE,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,OAAO;QACtD,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EACzB;QACA,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;OAC3D;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB,CAAC;oBA1J2B,KAAK;mBAIN,KAAK;gBAIF,QAAQ;;;;oBAgBD,KAAK;;;mBAYN,SAAS;gBAIf,SAAS;qBAIV,KAAK;0BAIA,KAAK;4BAIc,QAAQ;sBAIJ,SAAS;;EAoBnE,cAAc;;IAEZ,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;GACrE;EAGD,eAAe,CAAC,KAAY;IAC1B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;MACjC,KAAK,CAAC,wBAAwB,EAAE,CAAC;KAClC;GACF;EAGD,kBAAkB,CAAC,EAAe;IAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;GAC9B;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;KACvB;GACF;;;;EAMD,MAAM,eAAe,CAAC,QAAgB;IACpC,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,QAAQ,CAAC;MAChC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;KACpD;GACF;EAEO,kBAAkB;IACxB,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC;GAC1D;EAEO,WAAW;IACjB,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACtD,IAAI,MAAM,IAAI,IAAI,EAAE;MAClB,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAK,CAAC;GACd;EAEO,2BAA2B,CAAC,IAAqB;IACvD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAE1D,gBAAgB,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IACpD,gBAAgB,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAExC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAEnC,gBAAgB,CAAC,KAAK,EAAE,CAAC;IACzB,gBAAgB,CAAC,MAAM,EAAE,CAAC;GAC3B;EAmBO,WAAW,CAAC,WAA8B,IAAI;IACpD,MAAM,eAAe,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,IAAI,IAAI,CAAC,CAAC;IAEvE,IAAI,eAAe,KAAK,qBAAqB,CAAC,OAAO,EAAE;MACrD,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC;KACnC;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE;MACpD,GAAG,iBAAiB;MACpB,eAAe;MACf,OAAO;KACR,CAAC,CAAC;IAEH,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IACtB,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC;IACvC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;GAC3C;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,GAAG,KAAK,QAAQ,CAAC;IAC/C,MAAM,KAIF,IAAI,CAAC,mBAAmB,EAJtB,EACJ,KAAK,EACL,YAAY,EAAE,SAAS,OAEG,EADvB,uBAAuB,cAHtB,uBAIL,CAA2B,CAAC;IAC7B,MAAM,WAAW,GACf,OAAO,KAAK,QAAQ;QAChB,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;QAC5C;QACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI;QACxD,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,cAAc,EAAE,IAAI,CAAC,cAAc;QACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,CAAC;IACR,MAAM,QAAQ,GAAG,KAAK,IAAK,KAAgB,CAAC;IAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;IAC7D,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,WAAW,GAAG,QAAQ,CAAC;OACxB;WAAM,IAAI,SAAS,KAAK,IAAI,EAAE;QAC7B,WAAW,GAAG,SAAmB,CAAC;OACnC;KACF;IAED,IAAI,WAAW,GAAW,IAAI,CAAC;IAC/B,IAAI,QAAQ,GAAW,IAAI,CAAC;IAC5B,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,QAAQ;QACN,IAAI,CAAC,EAAE,KAAK,IAAI;YACZ,0BAA0B,IAAI,CAAC,EAAE,EAAE;YACnC,0BAA0B,IAAI,CAAC,WAAW,EAAE,CAAC;MACnD,WAAW,GAAG,cAAc,QAAQ,EAAE,CAAC;KACxC;IAED,MAAM,aAAa,GAAG;MACpB,QACE,EAAC,OAAO,kBACN,KAAK,EAAC,QAAQ,mBACC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,gBAChD,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,SAAS,IAC5C,WAAW,EACX,uBAAuB,EACvB,SAAS,IACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EACjC,EAAE,EAAE,QAAQ,sBACM,WAAW,KAE5B,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,KAClC,WAAK,KAAK,EAAC,gBAAgB,IACzB,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,EACA,IAAI,CAAC,OAAO,IACX,WAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAC7D,4BACE,IAAI,EAAC,QAAQ,EACb,UAAU,EACR,IAAI,CAAC,OAAO,KAAK,SAAS;UAC1B,IAAI,CAAC,OAAO,KAAK,aAAa;UAC9B,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,IAAI;UAC9C,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,KAAK;YAC3C,OAAO;YACP,MAAM,GAEU,CACpB,KAEN,eAAQ,CACT,CACO,EACV;KACH,CAAC;IAEF,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO;QAC5C,CAAC,kBAAkB,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;QACxC,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;QAClC,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO;QACzB,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,IAAI;QACxD,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,KAAK;QAC1D,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS;OAC/B,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,UAAU,KACd,kBACE,KAAK,EAAE,EAAE,CAAC,yBAAyB,GAAG,IAAI,CAAC,cAAc,EAAE,EAC3D,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAClC,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,QAAQ,EAChB,SAAS,EAAE,IAAI,CAAC,gBAAgB,IAEhC,EAAC,aAAa,OAAG,CACN,CACd,EAEA,CAAC,IAAI,CAAC,UAAU,IAAI,EAAC,aAAa,OAAG,CACjC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","./src/components/ic-button/ic-button.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: inline-block;\n\n --button-default: var(--ic-action-default);\n --button-default-hover: var(--ic-action-default-hover);\n --button-default-active: var(--ic-action-default-active);\n --button-default-background-hover: var(--ic-action-default-bg-hover);\n --button-default-background-active: var(--ic-action-default-bg-active);\n --icon-width: 100%;\n --icon-height: 100%;\n}\n\n.button {\n font-family: var(--ic-font-body-family);\n text-decoration: none;\n font-weight: 600;\n font-size: 14px;\n transition: var(--ic-easing-transition-fast);\n border-radius: var(--ic-border-radius);\n min-width: 100px;\n display: inline-flex;\n gap: var(--ic-space-xs);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background: none;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n vertical-align: middle;\n}\n\n.button:hover {\n cursor: pointer;\n}\n\n.button:focus,\n:host .button:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.light) .button:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.dark) .button {\n --button-default: var(--ic-action-dark);\n --button-default-hover: var(--ic-action-dark);\n --button-default-active: var(--ic-action-dark);\n --button-default-background-hover: var(--ic-action-dark-bg-hover);\n --button-default-background-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.light) .button {\n --button-default: var(--ic-action-light);\n --button-default-hover: var(--ic-action-light);\n --button-default-active: var(--ic-action-light);\n --button-default-background-hover: var(--ic-action-light-bg-hover);\n --button-default-background-active: var(--ic-action-light-bg-active);\n}\n\n:host(.button-variant-primary.light) .button {\n color: var(--ic-color-primary-text);\n\n --button-default-hover: var(--ic-action-light-hover);\n --button-default-active: var(--ic-action-light-active);\n}\n\n:host(.button-variant-primary.dark) .button {\n --button-default-hover: var(--ic-action-dark-hover);\n --button-default-active: var(--ic-action-dark-active);\n}\n\n:host(.disabled),\n:host(.disabled) .button,\n:host(.loading),\n:host(.loading) .button {\n pointer-events: none;\n}\n\n/* Variants /\n\n/ Primary /\n\n:host(.button-variant-primary) .button {\n color: var(--ic-architectural-white);\n background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover:not(:focus) {\n background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary) .button:active:not(:focus),\n:host(.button-variant-primary.loading) .button {\n background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary.disabled) .button {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button {\n background: var(--ic-architectural-600);\n color: var(--ic-architectural-500);\n}\n\n/ Secondary /\n\n:host(.button-variant-secondary) .button {\n border: 1px solid var(--button-default);\n color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover:not(:focus) {\n background-color: var(--button-default-background-hover);\n border-color: var(--button-default-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-secondary) .button:active:not(:focus) {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.loading) .button {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) .button:hover,\n:host(.button-variant-secondary.disabled) .button:active {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) .button:hover,\n:host(.button-variant-secondary.light.disabled) .button:active {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n background: none;\n}\n\n/ Tertiary /\n\n:host(.button-variant-tertiary) .button {\n color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover:not(:focus) {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active:not(:focus),\n:host(.button-variant-tertiary.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) .button:hover,\n:host(.button-variant-tertiary.disabled) .button:active {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) .button:hover,\n:host(.button-variant-tertiary.light.disabled) .button:active {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n background: none;\n}\n\n/ Icon /\n\n:host(.button-variant-icon) .button {\n color: var(--button-default);\n min-width: 0;\n}\n\n:host(.button-variant-icon) .button:hover:not(:focus) {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) .button:hover,\n:host(.button-variant-icon.disabled) .button:active {\n color: var(--ic-architectural-300);\n background: none;\n}\n\n/ Destructive /\n\n:host(.button-variant-destructive) .button {\n color: var(--ic-architectural-white);\n background-color: var(--ic-action-destructive);\n text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover:not(:focus) {\n background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active:not(:focus),\n:host(.button-variant-destructive.loading) .button {\n background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-destructive.disabled) .button {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n/ Sizing /\n\n:host(.button-size-default) .button {\n height: 40px;\n padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-small) .button {\n height: var(--ic-space-xl);\n padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.button-size-large) .button {\n height: var(--ic-space-xxl);\n padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.button-size-default.button-variant-icon) .button {\n height: var(--ic-space-xl);\n width: var(--ic-space-xl);\n padding: 6px;\n}\n\n:host(.button-size-small.button-variant-icon) .button {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n padding: var(--ic-space-xxs);\n}\n\n:host(.button-size-large.button-variant-icon) .button {\n height: 40px;\n width: 40px;\n padding: var(--ic-space-xs);\n}\n\n/ Width /\n:host(.full-width),\n:host(.full-width) .button {\n width: 100%;\n}\n\n/ Loading /\n\ndiv.loading-container {\n position: relative;\n align-items: center;\n}\n\n@keyframes loading-animation {\n 0% {\n width: 0%;\n left: 0%;\n }\n\n 25% {\n width: 0%;\n left: 0%;\n opacity: 0;\n }\n\n 50% {\n width: 100%;\n left: 0%;\n opacity: 1;\n }\n\n 75% {\n width: 0%;\n left: 100%;\n }\n\n 100% {\n width: 0%;\n left: 100%;\n opacity: 0;\n }\n}\n\n/ Icons /\n\ndiv.icon-container {\n box-sizing: border-box;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n::slotted(svg) {\n width: var(--icon-width) !important;\n height: var(--icon-height) !important;\n fill: currentcolor !important;\n pointer-events: none;\n}\n\n:host(.button-variant-icon) .button .icon-container {\n margin: 0;\n pointer-events: none;\n}\n\n/* SEARCH /\n\n:host(.search-submit-button) ::slotted(svg) {\n --icon-height: 20px;\n --icon-width: 20px;\n}\n\n:host(.search-submit-button-small) ::slotted(svg) {\n --icon-height: 16px;\n --icon-width: 16px;\n}\n\n:host(.clear-button) {\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n box-shadow: none;\n background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) {\n display: flex;\n align-items: center;\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n --icon-height: 14px;\n --icon-width: 14px;\n}\n\n:host(.popout-menu-button) .button {\n justify-content: left;\n border-radius: 0;\n white-space: pre-line;\n text-align: start;\n}\n\n:host(.popout-menu-button) div.icon-container {\n flex: none;\n}\n\n:host(.popout-menu-button) .button:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n display: none;\n}\n\n:host .ic-tooltip {\n display: block;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n Watch,\n h,\n} from \"@stencil/core\";\n\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcButtonSizes,\n IcButtonTypes,\n IcButtonVariants,\n IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/\n * @slot icon - Content will be placed to the left of the button label.\n /\n@Component({\n tag: \"ic-button\",\n styleUrl: \"ic-button.css\",\n shadow: true,\n})\nexport class Button {\n @Element() el: HTMLIcButtonElement;\n /\n Determines whether the button should be in disabled state.\n /\n @Prop() disabled?: boolean = false;\n /\n Determines whether the button should be in loading state.\n /\n @Prop() loading?: boolean = false;\n /\n The type of the button.\n /\n @Prop() type?: IcButtonTypes = \"button\";\n /\n The URL that the link points to. This will render the button as an \"a\" tag.\n /\n @Prop() href?: string;\n /\n Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n /\n Prompts the user to save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n /\n Hints at the human language of the linked URL.\n /\n @Prop() hreflang?: string;\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n /\n The button variant to be displayed.\n /\n @Prop() variant?: IcButtonVariants = \"primary\";\n /\n The size of the button to be displayed.\n /\n @Prop() size?: IcButtonSizes = \"default\";\n /\n Fill the width of the container if true.\n /\n @Prop() fullWidth?: boolean = false;\n /\n Disable ic-tooltip which is shown for icon variant. Title or aria-label must be set if this prop is not applied.\n /\n @Prop() disableTooltip?: boolean = false;\n /\n The position of the tooltip in relation to the button.\n /\n @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n /\n Determines the whether the appearance of the button is dark, light, or the default.\n /\n @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n /\n Emitted when button has focus\n /\n @Event() icFocus!: EventEmitter<void>;\n /\n Emitted when button has blur\n /\n @Event() icBlur!: EventEmitter<void>;\n\n // CalculatedWidth must have a default value, since width is only calculated once button is rendered (with text).\n private calculatedWidth: number = 68;\n private inheritedAttributes: { [k: string]: unknown } = {};\n private buttonEl: HTMLElement;\n private hasTooltip: boolean = false;\n private buttonIdNum = buttonIds++;\n private tooltipEl: HTMLIcTooltipElement;\n private id: string;\n\n @Watch(\"loading\")\n calculateWidth(): void {\n // Assume even padding on left and right\n this.calculatedWidth = this.el.offsetWidth - 2 this.el.offsetLeft;\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"icThemeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n /*\n Sets focus on the native `button`\n /\n @Method()\n async setFocus(): Promise<void> {\n if (this.buttonEl) {\n this.buttonEl.focus();\n }\n }\n\n /\n @internal Updates tooltip/aria-label text - needed as can't watch an aria attribute change.\n */\n @Method()\n async updateAriaLabel(newValue: string): Promise<void> {\n if (this.hasTooltip) {\n this.tooltipEl.label = newValue;\n this.buttonEl.setAttribute(\"aria-label\", newValue);\n }\n }\n\n private getLoadingBarWidth(): { [key: string]: string } {\n return { width: `${this.calculatedWidth.toString()}px` };\n }\n\n private hasIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n if (iconEl != null) {\n return true;\n }\n return false;\n }\n\n private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n const hiddenFormButton = document.createElement(\"button\");\n\n hiddenFormButton.setAttribute(\"type\", this.el.type);\n hiddenFormButton.style.display = \"none\";\n\n form.appendChild(hiddenFormButton);\n\n hiddenFormButton.click();\n hiddenFormButton.remove();\n }\n\n private handleClick = (): void => {\n if (\n (this.el.type === \"submit\" \|\| this.el.type === \"reset\") &&\n !!this.el.closest(\"FORM\")\n ) {\n this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n }\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme \|\| null);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"aria-expanded\",\n \"title\",\n ]);\n\n const id = this.el.id;\n this.id = id !== undefined ? id : null;\n this.hasTooltip = this.variant === \"icon\";\n }\n\n componentDidLoad(): void {\n this.calculateWidth();\n this.updateTheme();\n }\n\n render() {\n const TagType = (this.href && \"a\") \|\| \"button\";\n const {\n title,\n \"aria-label\": ariaLabel,\n ...restInheritedAttributes\n } = this.inheritedAttributes;\n const buttonAttrs =\n TagType === \"button\"\n ? { type: this.type, disabled: this.disabled }\n : {\n download: this.download !== false ? this.download : null,\n href: this.href,\n rel: this.rel,\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n hreflang: this.hreflang,\n };\n const newTitle = title && (title as string);\n const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n let tooltipText = \"\";\n if (this.hasTooltip) {\n if (newTitle !== undefined) {\n tooltipText = newTitle;\n } else if (ariaLabel !== null) {\n tooltipText = ariaLabel as string;\n }\n }\n\n let describedBy: string = null;\n let buttonId: string = null;\n if (this.hasTooltip) {\n buttonId =\n this.id !== null\n ? `ic-button-with-tooltip-${this.id}`\n : `ic-button-with-tooltip-${this.buttonIdNum}`;\n describedBy = `ic-tooltip-${buttonId}`;\n }\n\n const ButtonContent = () => {\n return (\n <TagType\n class=\"button\"\n aria-disabled={this.loading \|\| this.disabled ? \"true\" : null}\n aria-label={this.loading ? \"Loading\" : ariaLabel}\n {...buttonAttrs}\n {...restInheritedAttributes}\n {...titleAttr}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ref={(el) => (this.buttonEl = el)}\n id={buttonId}\n aria-describedby={describedBy}\n >\n {this.hasIconSlot() && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n {this.loading ? (\n <div class=\"loading-container\" style={this.getLoadingBarWidth()}>\n <ic-loading-indicator\n type=\"linear\"\n appearance={\n this.variant === \"primary\" \|\|\n this.variant === \"destructive\" \|\|\n this.appearance === IcThemeForegroundEnum.Dark \|\|\n this.appearance === IcThemeForegroundEnum.Light\n ? \"light\"\n : \"dark\"\n }\n ></ic-loading-indicator>\n </div>\n ) : (\n <slot />\n )}\n </TagType>\n );\n };\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled && !this.loading,\n [`button-variant-${this.variant}`]: true,\n [`button-size-${this.size}`]: true,\n [\"loading\"]: this.loading,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n [\"full-width\"]: this.fullWidth,\n }}\n onClick={this.handleClick}\n >\n {this.hasTooltip && (\n <ic-tooltip\n class={{ [\"tooltip-disabled-button\"]: this.disableTooltip }}\n ref={(el) => (this.tooltipEl = el)}\n label={tooltipText}\n target={buttonId}\n placement={this.tooltipPlacement}\n >\n <ButtonContent />\n </ic-tooltip>\n )}\n\n {!this.hasTooltip && <ButtonContent />}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-button2.js","mappings":"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","names":[],"sources":["./src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","./src/components/ic-button/ic-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n\n --button-default: var(--ic-action-default);\n --button-default-hover: var(--ic-action-default-hover);\n --button-default-active: var(--ic-action-default-active);\n --button-default-background-hover: var(--ic-action-default-bg-hover);\n --button-default-background-active: var(--ic-action-default-bg-active);\n --icon-width: 100%;\n --icon-height: 100%;\n}\n\n.button {\n font-family: var(--ic-font-body-family);\n text-decoration: none;\n font-weight: 600;\n font-size: 0.875rem;\n transition: var(--ic-easing-transition-fast);\n border-radius: var(--ic-border-radius);\n min-width: 6.25rem;\n display: inline-flex;\n gap: var(--ic-space-xs);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background: none;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n vertical-align: middle;\n}\n\n.button:hover {\n cursor: pointer;\n}\n\n.button:focus,\n:host .button:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.light) .button:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.dark) .button {\n --button-default: var(--ic-action-dark);\n --button-default-hover: var(--ic-action-dark);\n --button-default-active: var(--ic-action-dark);\n --button-default-background-hover: var(--ic-action-dark-bg-hover);\n --button-default-background-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.light) .button {\n --button-default: var(--ic-action-light);\n --button-default-hover: var(--ic-action-light);\n --button-default-active: var(--ic-action-light);\n --button-default-background-hover: var(--ic-action-light-bg-hover);\n --button-default-background-active: var(--ic-action-light-bg-active);\n}\n\n:host(.button-variant-primary.light) .button {\n color: var(--ic-color-primary-text);\n\n --button-default-hover: var(--ic-action-light-hover);\n --button-default-active: var(--ic-action-light-active);\n}\n\n:host(.button-variant-primary.dark) .button {\n --button-default-hover: var(--ic-action-dark-hover);\n --button-default-active: var(--ic-action-dark-active);\n}\n\n:host(.disabled),\n:host(.disabled) .button,\n:host(.loading),\n:host(.loading) .button {\n pointer-events: none;\n}\n\n/* Variants /\n\n/ Primary /\n\n:host(.button-variant-primary) .button {\n color: var(--ic-architectural-white);\n background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover:not(:focus) {\n background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary) .button:active:not(:focus),\n:host(.button-variant-primary.loading) .button {\n background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary.disabled) .button {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button {\n background: var(--ic-architectural-600);\n color: var(--ic-architectural-500);\n}\n\n/ Secondary /\n\n:host(.button-variant-secondary) .button {\n border: 0.063rem solid var(--button-default);\n color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover:not(:focus) {\n background-color: var(--button-default-background-hover);\n border-color: var(--button-default-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-secondary) .button:active:not(:focus) {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.loading) .button {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) .button:hover,\n:host(.button-variant-secondary.disabled) .button:active {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) .button:hover,\n:host(.button-variant-secondary.light.disabled) .button:active {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n background: none;\n}\n\n/ Tertiary /\n\n:host(.button-variant-tertiary) .button {\n color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover:not(:focus) {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active:not(:focus),\n:host(.button-variant-tertiary.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) .button:hover,\n:host(.button-variant-tertiary.disabled) .button:active {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) .button:hover,\n:host(.button-variant-tertiary.light.disabled) .button:active {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n background: none;\n}\n\n/ Icon /\n\n:host(.button-variant-icon) .button {\n color: var(--button-default);\n min-width: 0;\n}\n\n:host(.button-variant-icon) .button:hover:not(:focus) {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) .button:hover,\n:host(.button-variant-icon.disabled) .button:active {\n color: var(--ic-architectural-300);\n background: none;\n}\n\n/ Destructive /\n\n:host(.button-variant-destructive) .button {\n color: var(--ic-architectural-white);\n background-color: var(--ic-action-destructive);\n text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover:not(:focus) {\n background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active:not(:focus),\n:host(.button-variant-destructive.loading) .button {\n background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-destructive.disabled) .button {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n/ Sizing /\n\n:host(.button-size-default) .button {\n height: 2.5rem;\n padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-small) .button {\n height: var(--ic-space-xl);\n padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.button-size-large) .button {\n height: var(--ic-space-xxl);\n padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.button-size-default.button-variant-icon) .button {\n height: var(--ic-space-xl);\n width: var(--ic-space-xl);\n padding: 0.375rem;\n}\n\n:host(.button-size-small.button-variant-icon) .button {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n padding: var(--ic-space-xxs);\n}\n\n:host(.button-size-large.button-variant-icon) .button {\n height: 2.5rem;\n width: 2.5rem;\n padding: var(--ic-space-xs);\n}\n\n/ Width /\n:host(.full-width),\n:host(.full-width) .button {\n width: 100%;\n}\n\n/ Loading /\n\ndiv.loading-container {\n position: relative;\n align-items: center;\n width: 100%;\n}\n\nic-loading-indicator {\n --outer-color: transparent;\n}\n\n@keyframes loading-animation {\n 0% {\n width: 0%;\n left: 0%;\n }\n\n 25% {\n width: 0%;\n left: 0%;\n opacity: 0;\n }\n\n 50% {\n width: 100%;\n left: 0%;\n opacity: 1;\n }\n\n 75% {\n width: 0%;\n left: 100%;\n }\n\n 100% {\n width: 0%;\n left: 100%;\n opacity: 0;\n }\n}\n\n/ Icons /\n\ndiv.icon-container {\n box-sizing: border-box;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n::slotted() {\n width: var(--icon-width) !important;\n height: var(--icon-height) !important;\n fill: currentcolor !important;\n pointer-events: none;\n}\n\n:host(.button-variant-icon) .button .icon-container {\n margin: 0;\n pointer-events: none;\n}\n\n/ SEARCH /\n\n:host(.search-submit-button) ::slotted(svg) {\n --icon-height: 1.25rem;\n --icon-width: 1.25rem;\n}\n\n:host(.search-submit-button-small) ::slotted(svg) {\n --icon-height: 1rem;\n --icon-width: 1rem;\n}\n\n:host(.clear-button) {\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n box-shadow: none;\n background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) {\n display: flex;\n align-items: center;\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n --icon-height: 0.875rem;\n --icon-width: 0.875rem;\n}\n\n:host(.popout-menu-button) .button {\n justify-content: left;\n border-radius: 0;\n white-space: pre-line;\n text-align: start;\n}\n\n:host(.popout-menu-button) div.icon-container {\n flex: none;\n}\n\n:host(.popout-menu-button) .button:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n display: none;\n}\n\n:host .ic-tooltip {\n display: block;\n}\n\n/ High Contrast /\n@media (forced-colors: active) {\n .button {\n border: 0.125rem solid transparent;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n h,\n} from \"@stencil/core\";\n\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcButtonSizes,\n IcButtonTypes,\n IcButtonVariants,\n IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/*\n @slot icon - Content will be placed to the left of the button label.\n /\n@Component({\n tag: \"ic-button\",\n styleUrl: \"ic-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Button {\n @Element() el: HTMLIcButtonElement;\n /\n If `true`, the button will be in disabled state.\n /\n @Prop() disabled?: boolean = false;\n /\n If `true`, the button will be in loading state.\n /\n @Prop() loading?: boolean = false;\n /\n The type of the button.\n /\n @Prop() type?: IcButtonTypes = \"button\";\n /\n The URL that the link points to. This will render the button as an \"a\" tag.\n /\n @Prop() href?: string;\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n /\n The variant of the button to be displayed.\n /\n @Prop() variant?: IcButtonVariants = \"primary\";\n /\n The size of the button to be displayed.\n /\n @Prop() size?: IcButtonSizes = \"default\";\n /\n If `true`, the button will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n /\n If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n /\n @Prop() disableTooltip?: boolean = false;\n /\n The position of the tooltip in relation to the button.\n /\n @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n /\n The appearance of the button, e.g. dark, light, or the default.\n /\n @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n /\n Emitted when button has focus\n /\n @Event() icFocus!: EventEmitter<void>;\n /\n Emitted when button has blur\n /\n @Event() icBlur!: EventEmitter<void>;\n\n private inheritedAttributes: { [k: string]: unknown } = {};\n private buttonEl: HTMLElement;\n private hasTooltip: boolean = false;\n private buttonIdNum = buttonIds++;\n private tooltipEl: HTMLIcTooltipElement;\n private id: string;\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n /\n Sets focus on the native `button`.\n /\n @Method()\n async setFocus(): Promise<void> {\n if (this.buttonEl) {\n this.buttonEl.focus();\n }\n }\n\n /\n @internal Updates tooltip/aria-label text - needed as can't watch an ARIA attribute change.\n */\n @Method()\n async updateAriaLabel(newValue: string): Promise<void> {\n if (this.hasTooltip) {\n this.tooltipEl.label = newValue;\n this.buttonEl.setAttribute(\"aria-label\", newValue);\n }\n }\n\n private hasIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n if (iconEl != null) {\n return true;\n }\n return false;\n }\n\n private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n const hiddenFormButton = document.createElement(\"button\");\n\n hiddenFormButton.setAttribute(\"type\", this.el.type);\n hiddenFormButton.style.display = \"none\";\n\n form.appendChild(hiddenFormButton);\n\n hiddenFormButton.click();\n hiddenFormButton.remove();\n }\n\n private handleClick = (): void => {\n if (\n (this.el.type === \"submit\" \|\| this.el.type === \"reset\") &&\n !!this.el.closest(\"FORM\")\n ) {\n this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n }\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme \|\| null);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"aria-expanded\",\n \"title\",\n ]);\n\n const id = this.el.id;\n this.id = id !== undefined ? id : null;\n this.hasTooltip = this.variant === \"icon\";\n }\n\n componentDidLoad(): void {\n this.updateTheme();\n }\n\n render() {\n const TagType = (this.href && \"a\") \|\| \"button\";\n const {\n title,\n \"aria-label\": ariaLabel,\n ...restInheritedAttributes\n } = this.inheritedAttributes;\n const buttonAttrs =\n TagType === \"button\"\n ? { type: this.type, disabled: this.disabled }\n : {\n download: this.download !== false ? this.download : null,\n href: this.href,\n rel: this.rel,\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n hreflang: this.hreflang,\n };\n const newTitle = title && (title as string);\n const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n let tooltipText = \"\";\n if (this.hasTooltip) {\n if (newTitle !== undefined) {\n tooltipText = newTitle;\n } else if (ariaLabel !== null) {\n tooltipText = ariaLabel as string;\n }\n }\n\n let describedBy: string = null;\n let buttonId: string = null;\n if (this.hasTooltip) {\n buttonId =\n this.id !== null\n ? `ic-button-with-tooltip-${this.id}`\n : `ic-button-with-tooltip-${this.buttonIdNum}`;\n describedBy = `ic-tooltip-${buttonId}`;\n }\n\n const ButtonContent = () => {\n return (\n <TagType\n class=\"button\"\n aria-disabled={this.loading \|\| this.disabled ? \"true\" : null}\n aria-label={this.loading ? \"Loading\" : ariaLabel}\n {...buttonAttrs}\n {...restInheritedAttributes}\n {...titleAttr}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ref={(el) => (this.buttonEl = el)}\n id={buttonId}\n aria-describedby={describedBy}\n >\n {this.hasIconSlot() && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n {this.loading ? (\n <div class=\"loading-container\">\n <ic-loading-indicator\n type=\"linear\"\n appearance={\n this.variant === \"primary\" \|\|\n this.variant === \"destructive\" \|\|\n this.appearance === IcThemeForegroundEnum.Dark \|\|\n this.appearance === IcThemeForegroundEnum.Light\n ? \"light\"\n : \"dark\"\n }\n ></ic-loading-indicator>\n </div>\n ) : (\n <slot />\n )}\n </TagType>\n );\n };\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled && !this.loading,\n [`button-variant-${this.variant}`]: true,\n [`button-size-${this.size}`]: true,\n [\"loading\"]: this.loading,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n [\"full-width\"]: this.fullWidth,\n }}\n onClick={this.handleClick}\n >\n {this.hasTooltip && (\n <ic-tooltip\n class={{ [\"tooltip-disabled\"]: this.disableTooltip }}\n ref={(el) => (this.tooltipEl = el)}\n label={tooltipText}\n target={buttonId}\n placement={this.tooltipPlacement}\n >\n <ButtonContent />\n </ic-tooltip>\n )}\n\n {!this.hasTooltip && <ButtonContent />}\n </Host>\n );\n }\n}\n"],"version":3}