@ukic/web-components 2.31.0 → 2.32.0

package/hydrate/index.js

@@ -9144,7 +9144,7 @@ class Button {
         };
         // triggered when attributes of host element change
         this.hostMutationCallback = (mutationList) => {
-            mutationList.forEach(({ attributeName }) => {
+            mutationList.forEach(({ attributeName, type }) => {
                 const attribute = this.el.getAttribute(attributeName);
                 if (attributeName === "title")
                     this.title = attribute;
@@ -9250,6 +9250,7 @@ class Button {
             this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
             this.hostMutationObserver.observe(this.el, {
                 attributes: true,
+                childList: true,
             });
         }
     }
@@ -10837,7 +10838,7 @@ class FooterLink {
     }; }
 }
 
-const icFooterLinkGroupCss = "/*!@html*/html.sc-ic-footer-link-group{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-footer-link-group{margin:0}/*!@main*/main.sc-ic-footer-link-group{display:block}/*!@h1*/h1.sc-ic-footer-link-group{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-footer-link-group{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-footer-link-group{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-footer-link-group{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-footer-link-group{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-footer-link-group,strong.sc-ic-footer-link-group{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-footer-link-group,kbd.sc-ic-footer-link-group,samp.sc-ic-footer-link-group{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-footer-link-group{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-footer-link-group,sup.sc-ic-footer-link-group{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-footer-link-group{bottom:-0.25em}/*!@sup*/sup.sc-ic-footer-link-group{top:-0.5em}/*!@img*/img.sc-ic-footer-link-group{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-footer-link-group,input.sc-ic-footer-link-group,optgroup.sc-ic-footer-link-group,select.sc-ic-footer-link-group,textarea.sc-ic-footer-link-group{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-footer-link-group,input.sc-ic-footer-link-group{overflow:visible}/*!@button,\nselect*/button.sc-ic-footer-link-group,select.sc-ic-footer-link-group{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-footer-link-group,[type=\"button\"].sc-ic-footer-link-group,[type=\"reset\"].sc-ic-footer-link-group,[type=\"submit\"].sc-ic-footer-link-group{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-footer-link-group::-moz-focus-inner,[type=\"button\"].sc-ic-footer-link-group::-moz-focus-inner,[type=\"reset\"].sc-ic-footer-link-group::-moz-focus-inner,[type=\"submit\"].sc-ic-footer-link-group::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-footer-link-group:-moz-focusring,[type=\"button\"].sc-ic-footer-link-group:-moz-focusring,[type=\"reset\"].sc-ic-footer-link-group:-moz-focusring,[type=\"submit\"].sc-ic-footer-link-group:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-footer-link-group{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-footer-link-group{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-footer-link-group{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-footer-link-group{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-footer-link-group,[type=\"radio\"].sc-ic-footer-link-group{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-footer-link-group::-webkit-inner-spin-button,[type=\"number\"].sc-ic-footer-link-group::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-footer-link-group{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-footer-link-group::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-footer-link-group::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-footer-link-group{display:block}/*!@summary*/summary.sc-ic-footer-link-group{display:list-item}/*!@template*/template.sc-ic-footer-link-group{display:none}/*!@[hidden]*/[hidden].sc-ic-footer-link-group{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-footer-link-group,body.sc-ic-footer-link-group,div.sc-ic-footer-link-group,span.sc-ic-footer-link-group,applet.sc-ic-footer-link-group,object.sc-ic-footer-link-group,iframe.sc-ic-footer-link-group,h1.sc-ic-footer-link-group,h2.sc-ic-footer-link-group,h3.sc-ic-footer-link-group,h4.sc-ic-footer-link-group,h5.sc-ic-footer-link-group,h6.sc-ic-footer-link-group,p.sc-ic-footer-link-group,blockquote.sc-ic-footer-link-group,pre.sc-ic-footer-link-group,a.sc-ic-footer-link-group,abbr.sc-ic-footer-link-group,acronym.sc-ic-footer-link-group,address.sc-ic-footer-link-group,big.sc-ic-footer-link-group,cite.sc-ic-footer-link-group,code.sc-ic-footer-link-group,del.sc-ic-footer-link-group,dfn.sc-ic-footer-link-group,em.sc-ic-footer-link-group,img.sc-ic-footer-link-group,ins.sc-ic-footer-link-group,kbd.sc-ic-footer-link-group,q.sc-ic-footer-link-group,s.sc-ic-footer-link-group,samp.sc-ic-footer-link-group,small.sc-ic-footer-link-group,strike.sc-ic-footer-link-group,strong.sc-ic-footer-link-group,sub.sc-ic-footer-link-group,sup.sc-ic-footer-link-group,tt.sc-ic-footer-link-group,var.sc-ic-footer-link-group,b.sc-ic-footer-link-group,u.sc-ic-footer-link-group,i.sc-ic-footer-link-group,center.sc-ic-footer-link-group,dl.sc-ic-footer-link-group,dt.sc-ic-footer-link-group,dd.sc-ic-footer-link-group,ol.sc-ic-footer-link-group,ul.sc-ic-footer-link-group,li.sc-ic-footer-link-group,fieldset.sc-ic-footer-link-group,form.sc-ic-footer-link-group,label.sc-ic-footer-link-group,legend.sc-ic-footer-link-group,table.sc-ic-footer-link-group,caption.sc-ic-footer-link-group,tbody.sc-ic-footer-link-group,tfoot.sc-ic-footer-link-group,thead.sc-ic-footer-link-group,tr.sc-ic-footer-link-group,th.sc-ic-footer-link-group,td.sc-ic-footer-link-group,article.sc-ic-footer-link-group,aside.sc-ic-footer-link-group,canvas.sc-ic-footer-link-group,details.sc-ic-footer-link-group,embed.sc-ic-footer-link-group,figure.sc-ic-footer-link-group,figcaption.sc-ic-footer-link-group,footer.sc-ic-footer-link-group,header.sc-ic-footer-link-group,hgroup.sc-ic-footer-link-group,menu.sc-ic-footer-link-group,nav.sc-ic-footer-link-group,output.sc-ic-footer-link-group,ruby.sc-ic-footer-link-group,section.sc-ic-footer-link-group,summary.sc-ic-footer-link-group,time.sc-ic-footer-link-group,mark.sc-ic-footer-link-group,audio.sc-ic-footer-link-group,video.sc-ic-footer-link-group{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host(.footer-link-group-sparse)*/.footer-link-group-sparse.sc-ic-footer-link-group-h{--footer-link-group-margin-right:5.938rem;--footer-link-group-border-bottom:0 solid transparent;--footer-link-group-title-margin-top:0;--footer-link-group-title-margin-bottom:var(--ic-space-md)}/*!@:host(.footer-link-group-small)*/.footer-link-group-small.sc-ic-footer-link-group-h{--footer-link-group-margin-right:0;--footer-link-group-title-margin-top:var(--ic-space-md);--footer-link-group-title-margin-bottom:var(--ic-space-md);--footer-link-group-links-padding-left:var(--ic-space-md);--footer-link-group-links-padding-bottom:var(--ic-space-md)}/*!@:host(.footer-link-group-light.footer-link-group-small)*/.footer-link-group-light.footer-link-group-small.sc-ic-footer-link-group-h{--footer-link-group-border-bottom:var(--ic-keyline-lighten)}/*!@:host(.footer-link-group-dark.footer-link-group-small)*/.footer-link-group-dark.footer-link-group-small.sc-ic-footer-link-group-h{--footer-link-group-border-bottom:var(--ic-keyline-darken)}/*!@:host(.footer-link-group)*/.footer-link-group.sc-ic-footer-link-group-h{margin-right:var(--footer-link-group-margin-right);border-bottom:var(--footer-link-group-border-bottom)}/*!@:host(.footer-link-group-small.footer-link-group-light:hover)*/.footer-link-group-small.footer-link-group-light.sc-ic-footer-link-group-h:hover{background-color:var(--ic-action-light-bg-hover);cursor:pointer}/*!@:host(.footer-link-group-small.footer-link-group-dark:hover)*/.footer-link-group-small.footer-link-group-dark.sc-ic-footer-link-group-h:hover{background-color:var(--ic-action-dark-bg-hover);cursor:pointer}/*!@:host(.footer-link-group-sparse:focus)*/.footer-link-group-sparse.sc-ic-footer-link-group-h:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}/*!@:host(.footer-link-group-small:focus)*/.footer-link-group-small.sc-ic-footer-link-group-h:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}/*!@:host(.footer-link-group-small.footer-link-group-light:active)*/.footer-link-group-small.footer-link-group-light.sc-ic-footer-link-group-h:active{background-color:var(--ic-action-light-bg-active)}/*!@:host(.footer-link-group-small.footer-link-group-dark:active)*/.footer-link-group-small.footer-link-group-dark.sc-ic-footer-link-group-h:active{background-color:var(--ic-action-dark-bg-active)}/*!@.footer-link-group-title*/.footer-link-group-title.sc-ic-footer-link-group{margin-top:var(--footer-link-group-title-margin-top);margin-bottom:var(--footer-link-group-title-margin-bottom);flex-grow:1}/*!@.footer-link-group-toggle*/.footer-link-group-toggle.sc-ic-footer-link-group{fill:white !important}/*!@.footer-link-group-links*/.footer-link-group-links.sc-ic-footer-link-group{display:flex;flex-direction:column}/*!@.footer-link-group-header*/.footer-link-group-header.sc-ic-footer-link-group{display:flex;align-items:center}";
+const icFooterLinkGroupCss = "/*!@html*/html.sc-ic-footer-link-group{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-footer-link-group{margin:0}/*!@main*/main.sc-ic-footer-link-group{display:block}/*!@h1*/h1.sc-ic-footer-link-group{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-footer-link-group{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-footer-link-group{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-footer-link-group{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-footer-link-group{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-footer-link-group,strong.sc-ic-footer-link-group{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-footer-link-group,kbd.sc-ic-footer-link-group,samp.sc-ic-footer-link-group{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-footer-link-group{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-footer-link-group,sup.sc-ic-footer-link-group{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-footer-link-group{bottom:-0.25em}/*!@sup*/sup.sc-ic-footer-link-group{top:-0.5em}/*!@img*/img.sc-ic-footer-link-group{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-footer-link-group,input.sc-ic-footer-link-group,optgroup.sc-ic-footer-link-group,select.sc-ic-footer-link-group,textarea.sc-ic-footer-link-group{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-footer-link-group,input.sc-ic-footer-link-group{overflow:visible}/*!@button,\nselect*/button.sc-ic-footer-link-group,select.sc-ic-footer-link-group{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-footer-link-group,[type=\"button\"].sc-ic-footer-link-group,[type=\"reset\"].sc-ic-footer-link-group,[type=\"submit\"].sc-ic-footer-link-group{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-footer-link-group::-moz-focus-inner,[type=\"button\"].sc-ic-footer-link-group::-moz-focus-inner,[type=\"reset\"].sc-ic-footer-link-group::-moz-focus-inner,[type=\"submit\"].sc-ic-footer-link-group::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-footer-link-group:-moz-focusring,[type=\"button\"].sc-ic-footer-link-group:-moz-focusring,[type=\"reset\"].sc-ic-footer-link-group:-moz-focusring,[type=\"submit\"].sc-ic-footer-link-group:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-footer-link-group{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-footer-link-group{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-footer-link-group{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-footer-link-group{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-footer-link-group,[type=\"radio\"].sc-ic-footer-link-group{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-footer-link-group::-webkit-inner-spin-button,[type=\"number\"].sc-ic-footer-link-group::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-footer-link-group{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-footer-link-group::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-footer-link-group::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-footer-link-group{display:block}/*!@summary*/summary.sc-ic-footer-link-group{display:list-item}/*!@template*/template.sc-ic-footer-link-group{display:none}/*!@[hidden]*/[hidden].sc-ic-footer-link-group{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-footer-link-group,body.sc-ic-footer-link-group,div.sc-ic-footer-link-group,span.sc-ic-footer-link-group,applet.sc-ic-footer-link-group,object.sc-ic-footer-link-group,iframe.sc-ic-footer-link-group,h1.sc-ic-footer-link-group,h2.sc-ic-footer-link-group,h3.sc-ic-footer-link-group,h4.sc-ic-footer-link-group,h5.sc-ic-footer-link-group,h6.sc-ic-footer-link-group,p.sc-ic-footer-link-group,blockquote.sc-ic-footer-link-group,pre.sc-ic-footer-link-group,a.sc-ic-footer-link-group,abbr.sc-ic-footer-link-group,acronym.sc-ic-footer-link-group,address.sc-ic-footer-link-group,big.sc-ic-footer-link-group,cite.sc-ic-footer-link-group,code.sc-ic-footer-link-group,del.sc-ic-footer-link-group,dfn.sc-ic-footer-link-group,em.sc-ic-footer-link-group,img.sc-ic-footer-link-group,ins.sc-ic-footer-link-group,kbd.sc-ic-footer-link-group,q.sc-ic-footer-link-group,s.sc-ic-footer-link-group,samp.sc-ic-footer-link-group,small.sc-ic-footer-link-group,strike.sc-ic-footer-link-group,strong.sc-ic-footer-link-group,sub.sc-ic-footer-link-group,sup.sc-ic-footer-link-group,tt.sc-ic-footer-link-group,var.sc-ic-footer-link-group,b.sc-ic-footer-link-group,u.sc-ic-footer-link-group,i.sc-ic-footer-link-group,center.sc-ic-footer-link-group,dl.sc-ic-footer-link-group,dt.sc-ic-footer-link-group,dd.sc-ic-footer-link-group,ol.sc-ic-footer-link-group,ul.sc-ic-footer-link-group,li.sc-ic-footer-link-group,fieldset.sc-ic-footer-link-group,form.sc-ic-footer-link-group,label.sc-ic-footer-link-group,legend.sc-ic-footer-link-group,table.sc-ic-footer-link-group,caption.sc-ic-footer-link-group,tbody.sc-ic-footer-link-group,tfoot.sc-ic-footer-link-group,thead.sc-ic-footer-link-group,tr.sc-ic-footer-link-group,th.sc-ic-footer-link-group,td.sc-ic-footer-link-group,article.sc-ic-footer-link-group,aside.sc-ic-footer-link-group,canvas.sc-ic-footer-link-group,details.sc-ic-footer-link-group,embed.sc-ic-footer-link-group,figure.sc-ic-footer-link-group,figcaption.sc-ic-footer-link-group,footer.sc-ic-footer-link-group,header.sc-ic-footer-link-group,hgroup.sc-ic-footer-link-group,menu.sc-ic-footer-link-group,nav.sc-ic-footer-link-group,output.sc-ic-footer-link-group,ruby.sc-ic-footer-link-group,section.sc-ic-footer-link-group,summary.sc-ic-footer-link-group,time.sc-ic-footer-link-group,mark.sc-ic-footer-link-group,audio.sc-ic-footer-link-group,video.sc-ic-footer-link-group{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host(.footer-link-group-sparse)*/.footer-link-group-sparse.sc-ic-footer-link-group-h{--footer-link-group-margin-right:5.938rem;--footer-link-group-border-bottom:0 solid transparent;--footer-link-group-title-margin-top:0;--footer-link-group-title-margin-bottom:var(--ic-space-md)}/*!@:host(.footer-link-group-small)*/.footer-link-group-small.sc-ic-footer-link-group-h{--footer-link-group-margin-right:0;--footer-link-group-title-margin-top:var(--ic-space-md);--footer-link-group-title-margin-bottom:var(--ic-space-md);--footer-link-group-links-padding-left:var(--ic-space-md);--footer-link-group-links-padding-bottom:var(--ic-space-md)}/*!@:host(.footer-link-group-light.footer-link-group-small)*/.footer-link-group-light.footer-link-group-small.sc-ic-footer-link-group-h{--footer-link-group-border-bottom:var(--ic-keyline-lighten)}/*!@:host(.footer-link-group-dark.footer-link-group-small)*/.footer-link-group-dark.footer-link-group-small.sc-ic-footer-link-group-h{--footer-link-group-border-bottom:var(--ic-keyline-darken)}/*!@:host(.footer-link-group)*/.footer-link-group.sc-ic-footer-link-group-h{margin-right:var(--footer-link-group-margin-right);border-bottom:var(--footer-link-group-border-bottom)}/*!@:host(.footer-link-group-small.footer-link-group-light:hover)*/.footer-link-group-small.footer-link-group-light.sc-ic-footer-link-group-h:hover{background-color:var(--ic-action-light-bg-hover);cursor:pointer}/*!@:host(.footer-link-group-small.footer-link-group-dark:hover)*/.footer-link-group-small.footer-link-group-dark.sc-ic-footer-link-group-h:hover{background-color:var(--ic-action-dark-bg-hover);cursor:pointer}/*!@:host(.footer-link-group-sparse:focus)*/.footer-link-group-sparse.sc-ic-footer-link-group-h:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}/*!@:host(.footer-link-group-small:focus)*/.footer-link-group-small.sc-ic-footer-link-group-h:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}/*!@:host(.footer-link-group-small.footer-link-group-light:active)*/.footer-link-group-small.footer-link-group-light.sc-ic-footer-link-group-h:active{background-color:var(--ic-action-light-bg-active)}/*!@:host(.footer-link-group-small.footer-link-group-dark:active)*/.footer-link-group-small.footer-link-group-dark.sc-ic-footer-link-group-h:active{background-color:var(--ic-action-dark-bg-active)}/*!@:host ic-section-container*/.sc-ic-footer-link-group-h ic-section-container.sc-ic-footer-link-group{outline:none}/*!@.footer-link-group-title*/.footer-link-group-title.sc-ic-footer-link-group{margin-top:var(--footer-link-group-title-margin-top);margin-bottom:var(--footer-link-group-title-margin-bottom);flex-grow:1}/*!@.footer-link-group-toggle*/.footer-link-group-toggle.sc-ic-footer-link-group{fill:white !important}/*!@.footer-link-group-links*/.footer-link-group-links.sc-ic-footer-link-group{display:flex;flex-direction:column}/*!@.footer-link-group-header*/.footer-link-group-header.sc-ic-footer-link-group{display:flex;align-items:center}";
 
 class FooterLinkGroup {
     constructor(hostRef) {
@@ -10890,7 +10891,7 @@ class FooterLinkGroup {
             }, role: "listitem" }, hAsync("div", { class: "footer-link-group-title" }, hAsync("ic-typography", { variant: "subtitle-small" }, groupTitle)), hAsync("div", { class: "footer-link-group-links", role: "list" }, hAsync("slot", null)))) : (hAsync(Host, { class: {
                 ["footer-link-group footer-link-group-small"]: true,
                 [`footer-link-group-${this.dropdownIconStyle}`]: true,
-            }, tabIndex: "1", onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded }, hAsync("ic-section-container", { fullHeight: true }, hAsync("div", { class: "footer-link-group-header" }, hAsync("div", { class: "footer-link-group-title" }, hAsync("ic-typography", { variant: "label" }, groupTitle)), this.expanded ? (hAsync("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, hAsync("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))) : (hAsync("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, hAsync("g", { transform: "translate(0 1200) scale(1 -1)" }, hAsync("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))))), this.expanded && (hAsync("div", { class: "footer-link-group-links", role: "list" }, hAsync("slot", null))))));
+            }, onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded, role: "listitem" }, hAsync("ic-section-container", { tabindex: "0", fullHeight: true }, hAsync("div", { class: "footer-link-group-header" }, hAsync("div", { class: "footer-link-group-title" }, hAsync("ic-typography", { variant: "label" }, groupTitle)), this.expanded ? (hAsync("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, hAsync("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))) : (hAsync("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, hAsync("g", { transform: "translate(0 1200) scale(1 -1)" }, hAsync("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))))), this.expanded && (hAsync("div", { class: "footer-link-group-links", role: "list" }, hAsync("slot", null))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -14251,10 +14252,7 @@ class MenuItem {
                     checked: this.toggleChecked,
                 });
             }
-            this.handleMenuItemClick.emit({
-                label: this.label,
-                hasSubMenu: !!this.el.submenuTriggerFor,
-            });
+            this.handleMenuItemClick.emit(this.el);
         };
         this.getMenuItemAriaLabel = () => {
             let ariaLabel = this.label;
@@ -14813,6 +14811,7 @@ class NavigationItem {
         this.navItemClicked = createEvent(this, "navItemClicked", 7);
         this.isInitialRender = true;
         this.hostMutationObserver = null;
+        this.ANIMATION_DURATION = parseInt(getCssProperty("--ic-transition-duration-slow")) || 0;
         this.ARIA_LABEL_STRING = "aria-label";
         this.displayDefaultNavigationItem = (href, hreflang, target, rel, referrerpolicy, download, label) => {
             const variant = this.isTopNavChild || this.inTopNavSideMenu ? "body" : "label";
@@ -14837,6 +14836,7 @@ class NavigationItem {
             const { sideNavExpanded, sideNavMobile } = detail;
             this.sideNavExpanded = sideNavExpanded;
             this.isSideNavMobile = sideNavMobile;
+            this.sideNavToggleTooltip(!(sideNavExpanded || sideNavMobile));
         };
         this.handleBlur = ({ relatedTarget }) => {
             if (relatedTarget === null ||
@@ -14876,6 +14876,24 @@ class NavigationItem {
             }
             return hAsync("slot", null);
         };
+        // Displays tooltip only once the collapsing animation is finished
+        this.sideNavToggleTooltip = (showTooltip) => {
+            const tooltip = this.el.shadowRoot.querySelector("ic-tooltip");
+            const collapsedClass = "tooltip-navigation-item-side-nav-collapsed";
+            let timer;
+            if (tooltip) {
+                if (showTooltip) {
+                    tooltip.displayTooltip(false); // Hides tooltip for when mouse is hovering over icon
+                    timer = setTimeout(() => {
+                        tooltip.classList.add(collapsedClass);
+                    }, this.ANIMATION_DURATION);
+                }
+                else {
+                    clearTimeout(timer);
+                    tooltip.classList.remove(collapsedClass);
+                }
+            }
+        };
         this.deviceSize = DEVICE_SIZES.XL;
         this.focusStyle = getThemeForegroundColor();
         this.inTopNavSideMenu = false;
@@ -14908,10 +14926,14 @@ class NavigationItem {
         (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
+        var _a, _b;
         const { navType, parent } = getNavItemParentDetails(this.el);
         this.navigationType = navType;
         this.parentEl = parent;
         this.deviceSize = getCurrentDeviceSize();
+        this.sideNavExpanded =
+            ((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.classList.contains("sm-expanded")) ||
+                ((_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.classList.contains("xs-menu-open"));
         if (this.navigationType === "side") {
             this.parentEl.addEventListener("sideNavExpanded", this.sideNavExpandHandler);
         }
@@ -14974,8 +14996,7 @@ class NavigationItem {
                 ["expandable"]: this.expandable,
             }, onBlur: isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null, onClick: this.handleClick, "aria-current": selected ? "page" : null, role: "listitem" }, hAsync("ic-tooltip", { label: this.generateTooltipLabel(), target: "navigation-item", placement: "right", class: {
                 ["tooltip-navigation-item"]: true,
-                ["tooltip-navigation-item-side-nav-collapsed"]: (!this.sideNavExpanded || this.displayNavigationTooltip) &&
-                    this.navigationType === "side",
+                ["tooltip-navigation-item-side-nav-collapsed"]: this.displayNavigationTooltip && this.navigationType === "side",
                 ["tooltip-long-label-navigation-item-side-nav-expanded"]: this.el.hasAttribute("[display-navigation-tooltip = 'true']"),
             } }, this.renderNavigationItemContent())));
     }
@@ -15747,8 +15768,8 @@ class PopoverMenu {
         }
     }
     handleMenuItemClick(ev) {
-        if (!ev.detail.hasSubMenu && ev.detail.label !== "Back") {
-            this.closeMenu();
+        if (!ev.detail.submenuTriggerFor && ev.detail.label !== "Back") {
+            this.closeMenu(false, ev.detail);
         }
     }
     // This is listening for the event emitted when a menu item is acting as a trigger button
@@ -15822,17 +15843,17 @@ class PopoverMenu {
      * @internal Close the menu, emit icPopoverClosed of the root popover
      * @param setFocusToAnchor when true return focus to anchor element when menu is closed
      */
-    async closeMenu(setFocusToAnchor = false) {
+    async closeMenu(setFocusToAnchor = false, menuElement) {
         var _a;
         this.open = false;
         if (this.parentPopover) {
-            this.parentPopover.closeMenu(setFocusToAnchor);
+            this.parentPopover.closeMenu(setFocusToAnchor, menuElement);
         }
         else {
             if (setFocusToAnchor) {
                 (_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.focus();
             }
-            this.icPopoverClosed.emit();
+            this.icPopoverClosed.emit(menuElement);
         }
     }
     render() {
@@ -17683,8 +17704,10 @@ class SideNavigation {
                 appTitle.classList.remove("ic-typography-no-wrap");
             }, this.ANIMATION_DURATION);
         };
-        this.toggleMenuExpanded = () => {
-            this.menuExpanded = !this.menuExpanded;
+        this.toggleMenuExpanded = (expanded) => {
+            if (this.deviceSize > DEVICE_SIZES.S) {
+                this.menuExpanded = expanded;
+            }
             if (this.menuExpanded) {
                 this.setAndRemoveNoWrapAfterMenuExpanded();
                 this.el.shadowRoot
@@ -17966,7 +17989,7 @@ class SideNavigation {
         this.version = undefined;
     }
     watchExpandedHandler() {
-        this.setMenuExpanded(this.expanded);
+        this.toggleMenuExpanded(this.expanded);
     }
     componentWillLoad() {
         this.setMenuExpanded(this.expanded);
@@ -18025,7 +18048,7 @@ class SideNavigation {
             } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), hAsync("div", { class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), hAsync("div", { class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (hAsync("nav", { class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, hAsync("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), hAsync("ul", { class: "navigation-list" }, hAsync("slot", { name: "primary-navigation" }))))), hAsync("div", { class: {
                 ["bottom-wrapper"]: true,
                 ["classification-spacing"]: hasClassificationBanner(),
-            } }, isSlotUsed(this.el, "secondary-navigation") && (hAsync("nav", { class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, hAsync("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), hAsync("ul", { class: "navigation-list" }, hAsync("slot", { name: "secondary-navigation" })))), hAsync("div", { class: "bottom-side-nav" }, this.hasSecondaryNavigation && hAsync("ic-divider", null), displayExpandBtn && (hAsync("button", { class: "menu-expand-button", innerHTML: chevronIcon, onClick: this.toggleMenuExpanded, "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), hAsync("div", { class: "app-status-wrapper" }, status !== "" && (hAsync("div", { class: {
+            } }, isSlotUsed(this.el, "secondary-navigation") && (hAsync("nav", { class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, hAsync("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), hAsync("ul", { class: "navigation-list" }, hAsync("slot", { name: "secondary-navigation" })))), hAsync("div", { class: "bottom-side-nav" }, this.hasSecondaryNavigation && hAsync("ic-divider", null), displayExpandBtn && (hAsync("button", { class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), hAsync("div", { class: "app-status-wrapper" }, status !== "" && (hAsync("div", { class: {
                 ["app-status"]: true,
             } }, hAsync("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version !== "" && (hAsync("ic-typography", { variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
     }
@@ -19708,6 +19731,9 @@ class ToggleButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.icToggleChecked = createEvent(this, "icToggleChecked", 7);
+        this.hostMutationObserver = null;
+        this.hostMutationCallback = () => {
+        };
         this.handleFocus = (ev) => {
             ev.stopImmediatePropagation();
         };
@@ -19741,6 +19767,18 @@ class ToggleButton {
                 propName: this.variant === "icon" ? "accessible-label" : "label",
             },
         ], "Toggle button");
+        if (typeof MutationObserver !== "undefined") {
+            this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+            this.hostMutationObserver.observe(this.el, {
+                childList: true,
+            });
+        }
+    }
+    disconnectedCallback() {
+        if (this.hostMutationObserver !== null &&
+            this.hostMutationObserver !== undefined) {
+            this.hostMutationObserver.disconnect();
+        }
     }
     handleHostClick(e) {
         if (this.disabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukic/web-components",
-  "version": "2.31.0",
+  "version": "2.32.0",
   "description": "A web component UI library compiled with StencilJS",
   "author": "mi6",
   "bugs": {
@@ -96,5 +96,5 @@
     "webpack": "^5.76.0"
   },
   "license": "MIT",
-  "gitHead": "8f1cf8223eb9c9d871cca4af42fc7c39db4f1b6a"
+  "gitHead": "aff793113e94a59e56cc50e22325beb68593192a"
 }

package/dist/core/p-1d648b98.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icButtonCss","buttonIds","Button","this","buttonIdNum","hasTooltip","inheritedAttributes","describedbyEl","describedById","mutationObserver","hostMutationObserver","handleClick","el","type","hasRouterSlot","closest","hiddenFormButton","document","createElement","setAttribute","style","display","appendChild","click","remove","handleKeyDown","ev","key","closeButtonTooltip","onFocus","icFocus","emit","onBlur","icBlur","mutationCallback","describedByContent","innerText","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","attribute","getAttribute","title","ariaLabel","IC_INHERITED_ARIA","includes","forceUpdate","setHasTooltip","disableTooltip","isIconVariant","variant","startsWith","watchDisabledHandler","removeDisabledFalse","disabled","disconnectedCallback","undefined","disconnect","componentWillUpdate","loading","setProperty","getBoundingClientRect","width","componentWillLoad","_a","inheritAttributes","restInheritedAttributes","__rest","id","parentElement","querySelector","componentDidLoad","updateTheme","MutationObserver","observe","characterData","childList","subtree","attributes","componentWillRender","iconEl","hasIconSlot","handleHostClick","event","fileUpload","renderFileHiddenInput","icFileSelection","multiple","fileInputName","selectedFiles","accept","stopImmediatePropagation","dropdown","dropdownExpanded","themeChangeHandler","detail","mode","setFocus","buttonEl","focus","tooltip","shadowRoot","isTooltipVisible","displayTooltip","preventDefault","position","selectorPrefix","routerSlot","textContent","newTheme","foregroundColor","getThemeFromContext","IcThemeForegroundEnum","Default","appearance","render","TagType","href","buttonAttrs","form","formaction","formenctype","formmethod","formnovalidate","formtarget","download","rel","target","referrerpolicy","hreflang","describedby","buttonId","ButtonContent","h","Object","assign","class","ref","part","name","Dark","Light","innerHTML","arrowDropdown","Host","size","fullWidth","isSlotUsed","transparentBackground","onClick","onKeyDown","ariaOwnsId","ariaControlsId","label","placement","tooltipPlacement","silent","icLoadingIndicatorCss","LoadingIndicator","updateCircularProgressMeter","indeterminate","circularMeter","String","progress","getLabel","labelIndex","setLabel","Promise","interval","setInterval","labelList","length","labelDuration","getLabelVariant","outerElement","offsetWidth","setCircleLineWidth","compactStepCircularLineWidth","classList","contains","toastDismissTimerCircularLineWidth","circularLineWidth","circularDiameter","setLinearDeterminateWidth","innerElement","Math","min","max","proportion","showSecond","add","calcOuterClass","cls","updateLabel","isPropDefined","split","indicatorLabel","setCircleXY","r","x","y","nextRadius","setDashSteps","radius","dashArray","PI","watchPropHandler","watchProgressHandler","clearInterval","Number","componentDidUpdate","description","innerLabel","role","viewBox","cx","cy","icTooltipCss","Tooltip","delayedHideEvents","dialogOverflow","instantHideEvents","mouseOverTool","persistTooltip","onDialog","showEvents","disableHover","disableClick","getTooltipTranslate","dialogEl","child","children","tooltipX","tooltipY","left","bottom","top","right","height","toolTip","show","icDialogEl","popperInstance","createPopper","modifiers","options","offset","element","arrow","scroll","resize","popperProps","console","warn","hide","removeAttribute","destroy","checkCloseTooltip","setTimeout","mouseEnterTooltip","mouseLeaveTooltip","manageEventListeners","action","method","setExternalPopperProps","props","onComponentRequiredPropUndefined","prop","propName","componentDidRender","typographyEl","maxLines","resolve","hasAttribute"],"sources":["src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","src/components/ic-button/ic-button.tsx","src/components/ic-loading-indicator/ic-loading-indicator.css?tag=ic-loading-indicator&encapsulation=shadow","src/components/ic-loading-indicator/ic-loading-indicator.tsx","src/components/ic-tooltip/ic-tooltip.css?tag=ic-tooltip&encapsulation=shadow","src/components/ic-tooltip/ic-tooltip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --min-width: Minimum width of the button.\n* @prop --height: The height of the button.\n*/\n\n:host {\n  display: inline-block;\n  position: relative;\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::slotted(a) {\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: var(--min-width, 6.25rem);\n  display: inline-flex;\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:host(.with-badge) .button {\n  border-radius: 0.2188rem;\n}\n\n.button:hover,\n::slotted(a:hover) {\n  cursor: pointer;\n}\n\n.button:focus,\n::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible,\n::slotted(a:focus-visible) {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.dark) .button,\n:host(.dark) ::slotted(a) {\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:host(.light) ::slotted(a) {\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(.white-background) .button,\n:host(.white-background) ::slotted(a) {\n  --button-default-background-hover: var(--ic-action-default-bg-hover-no-alpha);\n  --button-default-background-active: var(\n    --ic-action-default-bg-active-no-alpha\n  );\n\n  background-color: var(--ic-architectural-white);\n}\n\n:host(.white-background.dark) .button,\n:host(.white-background.dark) ::slotted(a) {\n  --button-default-background-hover: var(--ic-action-dark-bg-hover-no-alpha);\n  --button-default-background-active: var(--ic-action-dark-bg-active-no-alpha);\n}\n\n:host(.button-variant-primary.light) .button,\n:host(.button-variant-primary.light) ::slotted(a) {\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:host(.button-variant-primary.dark) ::slotted(a) {\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(.disabled) ::slotted(a),\n:host(.loading),\n:host(.loading) .button {\n  pointer-events: none;\n}\n\n:host(.top-icon) .button {\n  flex-direction: column;\n\n  --height: fit-content;\n}\n\n:host(.top-icon) .button .icon-container {\n  margin-right: 0;\n}\n\n/* Variants */\n\n/* Primary */\n\n:host(.button-variant-primary) .button,\n:host(.button-variant-primary) ::slotted(a) {\n  color: var(--ic-color-white-text);\n  background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover {\n  background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary.loading) .button,\n:host(.button-variant-primary) .button:active {\n  background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary.disabled) .button,\n:host(.button-variant-primary.disabled) ::slotted(a) {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button,\n:host(.button-variant-primary.light.disabled) ::slotted(a) {\n  background: var(--ic-architectural-600);\n  color: var(--ic-architectural-500);\n}\n\n/* Secondary  */\n\n:host(.button-variant-secondary) .button,\n:host(.button-variant-secondary) ::slotted(a) {\n  border: var(--ic-border-width) solid var(--button-default);\n  color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover,\n:host(.button-variant-secondary) ::slotted(a:hover) {\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,\n:host(.button-variant-secondary) ::slotted(a:active),\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) ::slotted(a) {\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) ::slotted(a) {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n}\n\n/* Tertiary */\n\n:host(.button-variant-tertiary) .button,\n:host(.button-variant-tertiary) ::slotted(a) {\n  color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover,\n:host(.button-variant-tertiary) ::slotted(a:hover) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active,\n:host(.button-variant-tertiary) ::slotted(a:active),\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) ::slotted(a) {\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) ::slotted(a) {\n  color: var(--ic-architectural-500);\n}\n\n/* Destructive */\n\n:host(.button-variant-destructive) .button,\n:host(.button-variant-destructive) ::slotted(a) {\n  color: var(--ic-color-white-text);\n  background-color: var(--ic-action-destructive);\n  text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover {\n  background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active,\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:host(.button-variant-destructive.disabled) ::slotted(a) {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n/* Icon */\n\n:host(.button-variant-icon) .button,\n:host(.button-variant-icon) ::slotted(a) {\n  color: var(--button-default);\n  min-width: 0;\n  gap: var(--ic-space-xs);\n  margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon) .icon-container {\n  width: var(--ic-space-lg) !important;\n  height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon) .button:hover,\n:host(.button-variant-icon) ::slotted(a:hover) {\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) ::slotted(a: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) ::slotted(a) {\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n/***********************\n * Icon Variants\n ***********************/\n\n/* Icon-primary */\n\n:host(.button-variant-icon-primary) .button,\n:host(.button-variant-icon-primary) ::slotted(a) {\n  color: var(--ic-color-white-text);\n  background-color: var(--button-default);\n  min-width: 0;\n  gap: var(--ic-space-xs);\n  margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon-primary) .icon-container {\n  width: var(--ic-space-lg) !important;\n  height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon-primary) .button:hover,\n:host(.button-variant-icon-primary) ::slotted(a:hover) {\n  background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon-primary) .button:active,\n:host(.button-variant-icon-primary) ::slotted(a:active),\n:host(.button-variant-icon-primary.loading) .button {\n  background: var(--button-default-active);\n}\n\n:host(.button-variant-icon-primary.loading) .button ic-loading-indicator {\n  --inner-color: var(--ic-architectural-white);\n}\n\n:host(.button-variant-icon-primary.disabled) .button,\n:host(.button-variant-icon-primary.disabled) ::slotted(a) {\n  color: var(--ic-architectural-300);\n  background: var(--ic-architectural-200);\n}\n\n:host(.button-variant-icon-primary.light) .button,\n:host(.button-variant-icon-primary.light) ::slotted(a) {\n  color: var(--ic-color-primary-text);\n}\n\n:host(.button-variant-icon-primary.light) .button:hover,\n:host(.button-variant-icon-primary.light) ::slotted(a:hover) {\n  background: var(--ic-action-light-hover);\n}\n\n:host(.button-variant-icon-primary.light) .button:active,\n:host(.button-variant-icon-primary.light) ::slotted(a:active),\n:host(.button-variant-icon-primary.light.loading) .button,\n:host(.button-variant-icon-primary.light.loading) ::slotted(a) {\n  background: var(--ic-action-light-active);\n}\n\n:host(.button-variant-icon-primary.dark) .button:hover,\n:host(.button-variant-icon-primary.dark) ::slotted(a:hover) {\n  background: var(--ic-action-dark-hover);\n}\n\n:host(.button-variant-icon-primary.dark) .button:active,\n:host(.button-variant-icon-primary.dark) ::slotted(a:active),\n:host(.button-variant-icon-primary.dark.loading) .button,\n:host(.button-variant-icon-primary.dark.loading) ::slotted(a) {\n  background: var(--ic-action-dark-active);\n}\n\n/* Icon-secondary */\n\n:host(.button-variant-icon-secondary) .button,\n:host(.button-variant-icon-secondary) ::slotted(a) {\n  border: var(--ic-border-width) solid var(--button-default);\n  color: var(--button-default);\n  min-width: 0;\n  gap: var(--ic-space-xs);\n  margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon-secondary) .icon-container {\n  width: var(--ic-space-lg) !important;\n  height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon-secondary) .button:hover,\n:host(.button-variant-icon-secondary) ::slotted(a:hover) {\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-icon-secondary) .button:active,\n:host(.button-variant-icon-secondary) ::slotted(a:active),\n:host(.button-variant-icon-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-icon-secondary.disabled) .button,\n:host(.button-variant-icon-secondary.disabled) .button:hover,\n:host(.button-variant-icon-secondary.disabled) .button:active,\n:host(.button-variant-icon-secondary.disabled) ::slotted(a),\n:host(.button-variant-icon-secondary.disabled) ::slotted(a:hover),\n:host(.button-variant-icon-secondary.disabled) ::slotted(a:active) {\n  border-color: var(--ic-architectural-300);\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n:host(.button-variant-icon-secondary.light.disabled) .button,\n:host(.button-variant-icon-secondary.light.disabled) .button:hover,\n:host(.button-variant-icon-secondary.light.disabled) .button:active,\n:host(.button-variant-icon-secondary.light.disabled) ::slotted(a),\n:host(.button-variant-icon-secondary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-icon-secondary.light.disabled) ::slotted(a:active) {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n}\n\n/* Icon-tertiary */\n\n:host(.button-variant-icon-tertiary) .button,\n:host(.button-variant-icon-tertiary) ::slotted(a) {\n  color: var(--button-default);\n  min-width: 0;\n  gap: var(--ic-space-xs);\n  margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon-tertiary) .icon-container {\n  width: var(--ic-space-lg) !important;\n  height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon-tertiary) .button:hover,\n:host(.button-variant-icon-tertiary) ::slotted(a:hover) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon-tertiary) .button:active,\n:host(.button-variant-icon-tertiary) ::slotted(a:active),\n:host(.button-variant-icon-tertiary.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-icon-tertiary.disabled) .button,\n:host(.button-variant-icon-tertiary.disabled) .button:hover,\n:host(.button-variant-icon-tertiary.disabled) .button:active,\n:host(.button-variant-icon-tertiary.disabled) ::slotted(a),\n:host(.button-variant-icon-tertiary.disabled) ::slotted(a:hover),\n:host(.button-variant-icon-tertiary.disabled) ::slotted(a:active) {\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n/* Icon-destructive */\n\n:host(.button-variant-icon-destructive) .button,\n:host(.button-variant-icon-destructive) ::slotted(a) {\n  color: var(--ic-color-white-text);\n  background-color: var(--ic-action-destructive);\n  min-width: 0;\n  gap: var(--ic-space-xs);\n  margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon-destructive) .icon-container {\n  width: var(--ic-space-lg) !important;\n  height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon-destructive) .button:hover,\n:host(.button-variant-icon-destructive) ::slotted(a:hover) {\n  background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-icon-destructive) .button:active,\n:host(.button-variant-icon-destructive) ::slotted(a:active),\n:host(.button-variant-icon-destructive.loading) .button {\n  background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-icon-destructive.loading) .button ic-loading-indicator {\n  --inner-color: var(--ic-architectural-white);\n}\n\n:host(.button-variant-icon-destructive.disabled) .button,\n:host(.button-variant-icon-destructive.disabled) .button:hover,\n:host(.button-variant-icon-destructive.disabled) .button:active,\n:host(.button-variant-icon-destructive.disabled) ::slotted(a),\n:host(.button-variant-icon-destructive.disabled) ::slotted(a:hover),\n:host(.button-variant-icon-destructive.disabled) ::slotted(a:active) {\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: var(--height, 2.5rem);\n  padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-small) .button {\n  height: var(--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(--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:host(.button-size-default.button-variant-icon-primary) .button,\n:host(.button-size-default.button-variant-icon-secondary) .button,\n:host(.button-size-default.button-variant-icon-tertiary) .button,\n:host(.button-size-default.button-variant-icon-destructive) .button,\n:host(.button-size-default.button-variant-icon-primary) ::slotted(a),\n:host(.button-size-default.button-variant-icon-secondary) ::slotted(a),\n:host(.button-size-default.button-variant-icon-tertiary) ::slotted(a),\n:host(.button-size-default.button-variant-icon-destructive) ::slotted(a),\n:host(.button-size-default.button-variant-icon) ::slotted(a) {\n  height: var(--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:host(.button-size-small.button-variant-icon-primary) .button,\n:host(.button-size-small.button-variant-icon-secondary) .button,\n:host(.button-size-small.button-variant-icon-tertiary) .button,\n:host(.button-size-small.button-variant-icon-destructive) .button,\n:host(.button-size-small.button-variant-icon-primary) ::slotted(a),\n:host(.button-size-small.button-variant-icon-secondary) ::slotted(a),\n:host(.button-size-small.button-variant-icon-tertiary) ::slotted(a),\n:host(.button-size-small.button-variant-icon-destructive) ::slotted(a),\n:host(.button-size-small.button-variant-icon) ::slotted(a) {\n  height: var(--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:host(.button-size-large.button-variant-icon-primary) .button,\n:host(.button-size-large.button-variant-icon-secondary) .button,\n:host(.button-size-large.button-variant-icon-tertiary) .button,\n:host(.button-size-large.button-variant-icon-destructive) .button,\n:host(.button-size-large.button-variant-icon-primary) ::slotted(a),\n:host(.button-size-large.button-variant-icon-secondary) ::slotted(a),\n:host(.button-size-large.button-variant-icon-tertiary) ::slotted(a),\n:host(.button-size-large.button-variant-icon-destructive) ::slotted(a),\n:host(.button-size-large.button-variant-icon) ::slotted(a) {\n  height: var(--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:host(.full-width) ::slotted(a) {\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  margin-right: var(--ic-space-xs);\n}\n\ndiv.right-icon {\n  margin-right: auto;\n  margin-left: var(--ic-space-xs);\n}\n\n:host(.full-width) .right-icon {\n  margin-right: var(--ic-space-xs);\n}\n\n::slotted(:not(ic-badge)) {\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:host(.calendar-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  height: var(--height);\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/** Dropdown **/\n:host .arrow-dropdown {\n  margin-top: auto;\n}\n\n:host .dropdown-expanded {\n  transform: rotate(180deg);\n  margin-bottom: var(--ic-space-xxxs);\n}\n\n:host(.dropdown-no-icon) .button {\n  padding-right: var(--ic-space-xs);\n}\n\n/** Slotted router item **/\nslot[name=\"router-item\"]::slotted(a) {\n  pointer-events: all;\n}\n\n::slotted(a) {\n  font-size: 0.875rem !important;\n  border: none !important;\n  vertical-align: middle !important;\n}\n\n:host(.white-background) ::slotted(a) {\n  background-color: var(--ic-architectural-white) !important;\n}\n\n:host(.button-variant-primary) ::slotted(a) {\n  background-color: var(--button-default) !important;\n}\n\n:host(.button-variant-primary) ::slotted(a:hover) {\n  background-color: var(--button-default-hover) !important;\n}\n\n:host(.button-variant-primary) ::slotted(a:active) {\n  background-color: var(--button-default-active) !important;\n}\n\n:host(.button-variant-primary.disabled) ::slotted(a),\n:host(.button-variant-destructive.disabled) ::slotted(a) {\n  background: var(--ic-architectural-200) !important;\n}\n\n:host(.button-variant-primary.light.disabled) ::slotted(a) {\n  background: var(--ic-architectural-600) !important;\n}\n\n:host(.button-variant-secondary) ::slotted(a) {\n  border: var(--ic-border-width) solid var(--button-default) !important;\n}\n\n:host(.button-variant-secondary) ::slotted(a:hover) {\n  background-color: var(--button-default-background-hover) !important;\n  border-color: var(--button-default-hover) !important;\n}\n\n:host(.button-variant-secondary) ::slotted(a:active) {\n  border-color: var(--button-default-active) !important;\n  background-color: var(--button-default-background-active) !important;\n}\n\n:host(.button-variant-secondary.disabled) ::slotted(a),\n:host(.button-variant-secondary.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.disabled) ::slotted(a:active),\n:host(.button-variant-tertiary.disabled) ::slotted(a),\n:host(.button-variant-tertiary.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.disabled) ::slotted(a:active) {\n  border-color: var(--ic-architectural-300) !important;\n  background: none !important;\n}\n\n:host(.button-variant-secondary.light.disabled) ::slotted(a),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:active),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:active) {\n  border-color: var(--ic-architectural-500) !important;\n}\n\n:host(.button-variant-tertiary) ::slotted(a:hover),\n:host(.button-variant-icon) ::slotted(a:hover) {\n  background-color: var(--button-default-background-hover) !important;\n}\n\n:host(.button-variant-tertiary) ::slotted(a:active:not(:focus)),\n:host(.button-variant-tertiary) ::slotted(a:active:focus),\n:host(.button-variant-tertiary) ::slotted(a:active),\n:host(.button-variant-icon) ::slotted(a:active:not(:focus)) {\n  background-color: var(--button-default-background-active) !important;\n}\n\n:host(.button-variant-icon.disabled) ::slotted(a),\n:host(.button-variant-icon.disabled) ::slotted(a:hover),\n:host(.button-variant-icon.disabled) ::slotted(a:active) {\n  background: none !important;\n}\n\n:host(.button-variant-destructive) ::slotted(a) {\n  background-color: var(--ic-action-destructive) !important;\n}\n\n:host(.button-variant-destructive) ::slotted(a:hover) {\n  background-color: var(--ic-action-destructive-hover) !important;\n}\n\n:host(.button-variant-destructive) ::slotted(a:active) {\n  background-color: var(--ic-action-destructive-active) !important;\n}\n\n:host(.button-size-default) ::slotted(a) {\n  height: var(--height, 2.5rem) !important;\n  padding: var(--ic-space-xs) var(--ic-space-md) !important;\n}\n\n:host(.button-size-small) ::slotted(a) {\n  height: var(--height, var(--ic-space-xl)) !important;\n  padding: var(--ic-space-xxs) var(--ic-space-md) !important;\n}\n\n:host(.button-size-large) ::slotted(a) {\n  height: var(--height, var(--ic-space-xxl)) !important;\n  padding: var(--ic-space-sm) var(--ic-space-md) !important;\n}\n\n:host(.button-size-default.button-variant-icon) ::slotted(a) {\n  height: var(--height, var(--ic-space-xl)) !important;\n  padding: 0.375rem !important;\n}\n\n:host(.button-size-small.button-variant-icon) ::slotted(a) {\n  padding: var(--ic-space-xxs) !important;\n}\n\n:host(.button-size-large.button-variant-icon) ::slotted(a) {\n  padding: var(--ic-space-xs) !important;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .button,\n  ::slotted(a) {\n    border: 0.125rem solid transparent !important;\n  }\n}\n\n/** Pagination **/\n\n:host(.flip) ::slotted(svg) {\n  transform: scaleX(-1);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  forceUpdate,\n  h,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  getThemeFromContext,\n  inheritAttributes,\n  isSlotUsed,\n  removeDisabledFalse,\n  renderFileHiddenInput,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcButtonTypes,\n  IcButtonVariants,\n  IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n  IcSizes,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet buttonIds = 0;\n\n/**\n * @slot icon - Deprecated. This slot should not be used anymore. Use left-icon or right-icon slot instead.\n * @slot left-icon - Content will be placed to the left of the button label.\n * @slot right-icon - Content will be placed to the right of the button label.\n * @slot top-icon - Content will be placed above the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n * @slot router-item - Handle routing by nesting your routes in this slot. Setting loading to true will have no impact on this slot.\n */\n@Component({\n  tag: \"ic-button\",\n  styleUrl: \"ic-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Button {\n  private buttonEl: HTMLElement;\n  private buttonIdNum = buttonIds++;\n  private hasTooltip: boolean = false;\n  private id: string;\n  private inheritedAttributes: { [k: string]: string } = {};\n  private describedbyEl: HTMLElement = null;\n  private describedById: string = null;\n  private mutationObserver: MutationObserver = null;\n  private hostMutationObserver: MutationObserver = null;\n  private routerSlot: HTMLElement;\n\n  @Element() el: HTMLIcButtonElement;\n\n  @State() ariaLabel: string = null;\n  @State() describedByContent: string = null;\n  @State() title: string = null;\n\n  /**\n   * If `fileUpload` is set to `true`, this is the accepted list of file types.\n   */\n  @Prop() accept?: string = \"*\";\n\n  /**\n   * The appearance of the button, e.g. dark, light, or the default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * @internal Used to identify any related child component\n   */\n  @Prop() ariaControlsId: string | boolean;\n\n  /**\n   * @internal Used to identify any related child component\n   */\n  @Prop() ariaOwnsId: string | boolean;\n\n  /**\n   * If `true`, the button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\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  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * If `true`, the button will show a dropdown icon.\n   */\n  @Prop() dropdown?: boolean = false;\n\n  /**\n   * If `true`, the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true.\n   */\n  @Prop({ mutable: true, reflect: true }) dropdownExpanded?: boolean = false;\n\n  /**\n   * If `true`, when the button is clicked the native file explorer will be launched.\n   */\n  @Prop() fileUpload?: boolean = false;\n\n  /**\n   * The name of the control for the file input, which is submitted with the form data.\n   */\n  @Prop() fileInputName: string = `ic-button-file-upload-input-${buttonIds++}`;\n\n  /**\n   * The <form> element to associate the button with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner.\n   */\n  @Prop() formaction?: string;\n\n  /**\n   * The way the submitted form data is encoded.\n   */\n  @Prop() formenctype?: string;\n\n  /**\n   * The HTTP method used to submit the form.\n   */\n  @Prop() formmethod?: string;\n\n  /**\n   * If `true`, the form will not be validated when submitted.\n   */\n  @Prop() formnovalidate?: boolean;\n\n  /**\n   * The place to display the response from submitting the form. It overrides the target attribute of the button's form owner.\n   */\n  @Prop() formtarget?: string;\n\n  /**\n   * If `true`, the button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\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  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * If `true`, the button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The list of the files that have been selected by a user.\n   */\n  @Prop() selectedFiles: FileList;\n\n  /**\n   * The size of the button to be displayed.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\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  /**\n   * The position of the tooltip in relation to the button.\n   */\n  @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n\n  /**\n   * If `true`, the secondary variant of button will have a transparent background rather than white.\n   */\n  @Prop() transparentBackground?: boolean = true;\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: IcButtonTypes = \"button\";\n\n  /**\n   * The variant of the button to be displayed.\n   */\n  @Prop() variant?: IcButtonVariants = \"primary\";\n\n  /**\n   * Emitted when button has blur\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  /**\n   * If `fileUpload` is set to `true`, this will be emitted when a file is selected in the native explorer.\n   */\n  @Event() icFileSelection!: EventEmitter<FileList>;\n\n  /**\n   * Emitted when button has focus\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.mutationObserver !== null && this.mutationObserver !== undefined) {\n      this.mutationObserver.disconnect();\n    }\n    if (\n      this.hostMutationObserver !== null &&\n      this.hostMutationObserver !== undefined\n    ) {\n      this.hostMutationObserver.disconnect();\n    }\n  }\n\n  componentWillUpdate(): void {\n    if (this.loading) {\n      this.el.style.setProperty(\n        \"--min-width\",\n        `${this.el.getBoundingClientRect().width}px`\n      );\n    }\n    this.setHasTooltip();\n  }\n\n  componentWillLoad(): void {\n    const {\n      title,\n      \"aria-label\": ariaLabel,\n      ...restInheritedAttributes\n    } = inheritAttributes(this.el, [...IC_INHERITED_ARIA, \"title\"]);\n\n    this.title = title;\n    this.ariaLabel = ariaLabel;\n    this.inheritedAttributes = restInheritedAttributes;\n\n    removeDisabledFalse(this.disabled, this.el);\n\n    this.el.setAttribute(\"exportparts\", \"button\");\n\n    this.id = this.el.id || null;\n    this.setHasTooltip();\n\n    if (!this.hasTooltip) {\n      const describedById = this.inheritedAttributes[\"aria-describedby\"];\n      if (describedById !== undefined) {\n        this.describedById = describedById;\n        const el = this.el.parentElement.querySelector<HTMLElement>(\n          `#${describedById}`\n        );\n        if (el) {\n          this.describedByContent = el.innerText;\n          this.describedbyEl = el;\n        }\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    this.updateTheme();\n\n    if (typeof MutationObserver !== \"undefined\") {\n      if (this.describedById) {\n        this.mutationObserver = new MutationObserver(this.mutationCallback);\n        this.mutationObserver.observe(this.describedbyEl, {\n          characterData: true,\n          childList: true,\n          subtree: true,\n        });\n      }\n\n      this.hostMutationObserver = new MutationObserver(\n        this.hostMutationCallback\n      );\n      this.hostMutationObserver.observe(this.el, {\n        attributes: true,\n      });\n    }\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.hasIconSlot(\"left\")\n      ? this.el.querySelector(`[slot=\"left-icon\"]`)\n      : this.hasIconSlot(\"right\")\n      ? this.el.querySelector(`[slot=\"right-icon\"]`)\n      : null;\n    iconEl?.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (!this.hasRouterSlot()) {\n      if (this.fileUpload) {\n        renderFileHiddenInput(\n          this.icFileSelection,\n          this.el,\n          this.multiple,\n          this.fileInputName,\n          this.selectedFiles,\n          this.disabled,\n          this.accept\n        );\n      }\n      if (this.disabled || this.loading) {\n        event.stopImmediatePropagation();\n      }\n      if (this.dropdown) {\n        this.dropdownExpanded = !this.dropdownExpanded;\n      }\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.updateTheme(detail.mode);\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.buttonEl?.focus();\n  }\n\n  private async closeButtonTooltip(ev: KeyboardEvent): Promise<void> {\n    const tooltip = this.el.shadowRoot.querySelector(\"ic-tooltip\");\n    if (await tooltip.isTooltipVisible()) {\n      tooltip.displayTooltip(false);\n      ev.preventDefault();\n      ev.stopImmediatePropagation();\n    }\n  }\n\n  private hasIconSlot(position?: \"left\" | \"right\" | \"top\"): boolean {\n    const selectorPrefix = position ? `${position}-` : \"\";\n    return this.el.querySelector(`[slot=\"${selectorPrefix}icon\"]`) !== null;\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  private handleClick = (): void => {\n    if (\n      (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n      !this.hasRouterSlot() &&\n      !!this.el.closest(\"FORM\")\n    ) {\n      const hiddenFormButton = document.createElement(\"button\");\n\n      hiddenFormButton.setAttribute(\"type\", this.el.type);\n      hiddenFormButton.style.display = \"none\";\n\n      this.el.closest(\"FORM\").appendChild(hiddenFormButton);\n\n      hiddenFormButton.click();\n      hiddenFormButton.remove();\n    }\n  };\n\n  private handleKeyDown = (ev: KeyboardEvent): void => {\n    if (ev.key === \"Escape\" && this.hasTooltip) {\n      this.closeButtonTooltip(ev);\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);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  // triggered when text content of sibling element in light DOM changes\n  private mutationCallback = (): void => {\n    this.describedByContent = this.describedbyEl.innerText;\n  };\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      const attribute = this.el.getAttribute(attributeName);\n      if (attributeName === \"title\") this.title = attribute;\n      else if (attributeName === \"aria-label\") this.ariaLabel = attribute;\n\n      if (IC_INHERITED_ARIA.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] = attribute;\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  private setHasTooltip = (): void => {\n    this.hasTooltip =\n      !this.disableTooltip && (!!this.title || this.isIconVariant());\n  };\n\n  private isIconVariant = (): boolean => {\n    return this.variant.startsWith(\"icon\");\n  };\n\n  render() {\n    const TagType = (this.href && \"a\") || \"button\";\n    const { title, ariaLabel, inheritedAttributes } = this;\n    const buttonAttrs =\n      TagType === \"button\"\n        ? {\n            type: this.type,\n            disabled: this.disabled,\n            form: this.form,\n            formaction: this.formaction,\n            formenctype: this.formenctype,\n            formmethod: this.formmethod,\n            formnovalidate: this.formnovalidate,\n            formtarget: this.formtarget,\n          }\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\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 =\n        this.variant === \"icon\" && !!ariaLabel\n          ? null\n          : `ic-tooltip-${buttonId}`;\n    } else {\n      describedby = this.describedById;\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          aria-expanded={this.dropdown && `${this.dropdownExpanded}`}\n          {...buttonAttrs}\n          {...inheritedAttributes}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n          ref={(el) => (this.buttonEl = el)}\n          aria-describedby={describedby}\n          part=\"button\"\n        >\n          {this.hasIconSlot() && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          {this.hasIconSlot(\"left\") && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"left-icon\" />\n            </div>\n          )}\n          {this.hasIconSlot(\"top\") &&\n            !this.hasIconSlot(\"left\") &&\n            !this.hasIconSlot(\"right\") &&\n            !this.loading && (\n              <div class=\"icon-container\">\n                <slot name=\"top-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          {this.hasIconSlot(\"right\") && !this.loading && !this.dropdown && (\n            <div class={{ \"icon-container\": true, \"right-icon\": true }}>\n              <slot name=\"right-icon\" />\n            </div>\n          )}\n          {this.dropdown &&\n            !this.loading &&\n            this.variant !== \"icon\" &&\n            this.variant !== \"destructive\" && (\n              <span\n                class={{\n                  [\"arrow-dropdown\"]: !this.dropdownExpanded,\n                  [\"dropdown-expanded\"]: this.dropdownExpanded,\n                }}\n                innerHTML={arrowDropdown}\n              />\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          [\"with-badge\"]: isSlotUsed(this.el, \"badge\"),\n          [\"dropdown-no-icon\"]:\n            this.dropdown &&\n            !isSlotUsed(this.el, \"icon\") &&\n            !isSlotUsed(this.el, \"left-icon\"),\n          [\"top-icon\"]: isSlotUsed(this.el, \"top-icon\"),\n          [\"white-background\"]:\n            this.variant === \"secondary\" &&\n            !this.transparentBackground &&\n            this.appearance !== \"light\",\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        aria-owns={this.ariaOwnsId}\n        aria-controls={this.ariaControlsId}\n        aria-expanded={this.dropdown && `${this.dropdownExpanded}`}\n      >\n        {this.hasTooltip && (\n          <ic-tooltip\n            id={describedby}\n            label={title || ariaLabel}\n            target={buttonId}\n            placement={this.tooltipPlacement}\n            silent={this.isIconVariant() && !!ariaLabel}\n          >\n            {this.hasRouterSlot() ? (\n              <slot name=\"router-item\"></slot>\n            ) : (\n              <ButtonContent />\n            )}\n          </ic-tooltip>\n        )}\n        {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        {!this.hasTooltip &&\n          (this.hasRouterSlot() ? (\n            <slot name=\"router-item\"></slot>\n          ) : (\n            <ButtonContent />\n          ))}\n        {this.describedByContent && (\n          <span id={describedby} class=\"ic-button-describedby\">\n            {this.describedByContent}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n","@import \"../../global/normalize.css\";\n\n:host {\n  /**\n   * @prop --circular-diameter: Diameter of the circular-indicator\n   */\n\n  display: block;\n\n  --linear-border-radius: 0.25rem;\n  --inner-color: var(--ic-action-default);\n  --outer-color: var(--ic-architectural-100);\n  --label-color: var(--ic-color-primary-text);\n  --margin: none;\n  --linear-line-height: var(--ic-space-xs);\n}\n\n:host(.light) {\n  --inner-color: var(--ic-architectural-white);\n  --outer-color: var(--ic-architectural-800);\n  --label-color: var(--ic-architectural-white);\n}\n\n.ic-loading-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n:host([size=\"small\"]) {\n  --circular-diameter: 2.5rem;\n  --linear-line-height: var(--ic-space-xxs);\n}\n\n:host([size=\"default\"]) {\n  --circular-diameter: 5rem;\n}\n\n:host([size=\"large\"]) {\n  --circular-diameter: 7.5rem;\n}\n\n:host([size=\"icon\"]) {\n  display: inline-block;\n\n  --margin: var(--ic-space-xxxs);\n  --circular-diameter: 1.25rem;\n}\n\n:host(.label) {\n  --margin: 0 0 var(--ic-space-xs) 0;\n}\n\n.ic-loading-label {\n  color: var(--label-color);\n  margin-left: var(--label-margin-left);\n}\n\n.ic-loading-circular-outer {\n  height: var(--circular-diameter);\n  width: var(--circular-diameter);\n}\n\n.ic-loading-circular-outer.indeterminate {\n  animation: circular-animation 1s linear;\n  animation-iteration-count: infinite;\n}\n\n@keyframes circular-animation {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ic-loading-circular-outer,\n.ic-loading-linear-outer {\n  margin: var(--margin);\n}\n\n.ic-loading-linear-outer {\n  background-color: var(--outer-color);\n  height: var(--linear-line-height);\n  width: 100%;\n  border-radius: var(--linear-border-radius);\n  overflow: hidden;\n}\n\n.ic-loading-linear-inner {\n  position: relative;\n  height: 100%;\n  background-color: var(--inner-color);\n  border-radius: var(--linear-border-radius);\n}\n\n.indeterminate > .ic-loading-linear-inner {\n  animation: linear-animation 2s infinite;\n}\n\n.determinate > .ic-loading-linear-inner {\n  transition: width 0.5s;\n  width: var(--linear-width);\n}\n\n:host(.full-width) {\n  --linear-border-radius: none;\n}\n\n@keyframes linear-animation {\n  0% {\n    width: 0%;\n    left: -1%;\n  }\n\n  25% {\n    width: 0%;\n    left: -1%;\n  }\n\n  50% {\n    width: 101%;\n    left: -1%;\n  }\n\n  75% {\n    width: 0%;\n    left: 101%;\n  }\n\n  100% {\n    width: 0%;\n    left: 101%;\n  }\n}\n\n.ic-loading-circular-svg {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transform: rotate(-90deg);\n}\n\n.ic-loading-circular-svg circle {\n  width: 100%;\n  height: 100%;\n  fill: none;\n  stroke: var(--compact-step-outer-color, var(--outer-color));\n  stroke-width: var(--circular-line-width);\n  stroke-linecap: round;\n}\n\n/* --stroke-dash-array calculated via dashArray method */\n.ic-loading-circular-svg circle:nth-child(2) {\n  --circular-indeterminate: calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );\n\n  stroke-dasharray: var(--stroke-dasharray), var(--stroke-dasharray);\n  stroke-dashoffset: var(--stroke-dashoffset, var(--circular-indeterminate));\n  stroke: var(--compact-step-inner-color, var(--inner-color));\n}\n\n:host(.inner-label) .ic-loading-circular-inner {\n  display: grid;\n}\n\n:host(.inner-label) .ic-loading-circular-svg,\n.inner-text {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n:host(.not-required.compact-step-progress-indicator)\n  .ic-loading-circular-svg\n  circle:nth-child(2) {\n  stroke: var(--ic-architectural-300);\n}\n\n.inner-text {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ic-space-lg);\n  height: inherit;\n  overflow: hidden;\n  margin: auto;\n  color: var(--compact-step-inner-color, var(--ic-status-info));\n}\n\n:host(.not-required.compact-step-progress-indicator) .inner-text {\n  color: var(--ic-color-tertiary-text);\n}\n\n:host(.light.not-required.compact-step-progress-indicator) .inner-text {\n  color: var(--ic-architectural-400);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .indeterminate > .ic-loading-circular-inner {\n    forced-color-adjust: none;\n  }\n\n  .ic-loading-linear-outer {\n    border: var(--ic-hc-border);\n  }\n\n  .ic-loading-linear-inner {\n    background-color: canvastext;\n  }\n\n  .ic-loading-circular-svg circle {\n    stroke: Background;\n  }\n\n  .ic-loading-circular-svg circle:nth-child(2) {\n    stroke: canvastext;\n  }\n\n  :host(.not-required.compact-step-progress-indicator)\n    .ic-loading-circular-svg\n    circle:nth-child(2) {\n    stroke: GrayText;\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  IcLoadingCircleXYR,\n  IcLoadingSizes,\n  IcLoadingTypes,\n} from \"./ic-loading-indicator.types\";\nimport {\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\nimport { isPropDefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-loading-indicator\",\n  styleUrl: \"ic-loading-indicator.css\",\n  shadow: true,\n})\nexport class LoadingIndicator {\n  private circularMeter: SVGCircleElement;\n  private innerElement?: HTMLDivElement;\n  private interval: ReturnType<typeof setInterval>;\n  private labelList: string[];\n  private outerElement?: HTMLDivElement;\n\n  @Element() el: HTMLIcLoadingIndicatorElement;\n\n  @State() circularDiameter: number;\n  @State() circularLineWidth: number;\n  @State() indeterminate: boolean;\n  @State() indicatorLabel: string;\n  @State() showSecond: boolean = false;\n\n  /**\n   * The appearance of the loading indicator, e.g. dark or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  /**\n   * The description that will be set as the aria-label of the loading indicator when not using a visible label.\n   */\n  @Prop() description?: string = \"Loading\";\n\n  /**\n   * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.\n   */\n  @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n  /**\n   * @internal The step number of a compact step, managed by ic-step.\n   */\n  @Prop() innerLabel?: number;\n\n  /**\n   * The time in milliseconds before the label changes.\n   */\n  @Prop() labelDuration?: number = 8000;\n\n  /**\n   * The maximum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() max?: number = 100;\n\n  /**\n   * The minimum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() min?: number = 0;\n\n  /**\n   * The size of the loading indicator.\n   */\n  @Prop({ reflect: true }) size?: IcLoadingSizes = \"default\";\n\n  /**\n   * The type of indicator, either linear or circular.\n   */\n  @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\n\n  /**\n   * The label to be displayed beneath the loading indicator.\n   * Display a changing label by separating multiple messages with forward slashes.\n   */\n  @Prop() label?: string;\n\n  @Watch(\"label\")\n  watchPropHandler(): void {\n    this.updateLabel();\n  }\n\n  /**\n   * The current amount of progress made.\n   * If not provided, component acts as an indeterminate loading indicator.\n   */\n  @Prop() progress?: number;\n\n  @Watch(\"progress\")\n  watchProgressHandler(): void {\n    if (this.type === \"circular\") {\n      this.updateCircularProgressMeter();\n    }\n  }\n\n  disconnectedCallback(): void {\n    clearInterval(this.interval);\n  }\n\n  componentWillLoad(): void {\n    this.indeterminate = this.progress === undefined;\n    this.updateLabel();\n    this.el.setAttribute(\"exportparts\", \"ic-loading-container\");\n  }\n\n  componentDidLoad(): void {\n    if (this.type === \"circular\") {\n      this.setCircleLineWidth();\n      this.circularMeter = this.el.shadowRoot.querySelector(\n        \".ic-loading-circular-svg circle:nth-child(2)\"\n      );\n      this.updateCircularProgressMeter();\n    }\n\n    if (Number(this.progress) >= 0 && this.type === \"linear\") {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  componentWillUpdate(): void {\n    this.indeterminate = this.progress === undefined;\n  }\n\n  componentDidUpdate(): void {\n    if (Number(this.progress) >= 0 && this.type === \"linear\") {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  private updateCircularProgressMeter = () => {\n    if (!this.indeterminate) {\n      this.circularMeter.style.setProperty(\n        \"--progress-value\",\n        String(this.progress)\n      );\n    }\n  };\n\n  private getLabel = (\n    labelIndex: number,\n    setLabel: (label: string) => void\n  ) => {\n    return new Promise(() => {\n      this.interval = setInterval(() => {\n        if (labelIndex < this.labelList.length - 1) {\n          labelIndex++;\n        } else {\n          labelIndex = 0;\n        }\n        setLabel(this.labelList[labelIndex]);\n      }, this.labelDuration);\n    });\n  };\n\n  private getLabelVariant = () => {\n    let variant: \"label\" | \"h4\" | \"h2\" = \"h4\";\n    const width = this.outerElement?.offsetWidth;\n    if (this.size === \"small\" || (this.type === \"circular\" && width < 60)) {\n      variant = \"label\";\n    } else if (\n      this.size === \"large\" ||\n      (this.type === \"circular\" && width >= 120)\n    ) {\n      variant = \"h2\";\n    }\n    return variant;\n  };\n\n  // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n  private setCircleLineWidth = () => {\n    const { offsetWidth: width } = this.outerElement;\n\n    const compactStepCircularLineWidth = this.el.classList.contains(\n      \"compact-step-progress-indicator\"\n    )\n      ? 40\n      : 0;\n    const toastDismissTimerCircularLineWidth = this.el.classList.contains(\n      \"toast-dismiss-timer\"\n    )\n      ? 20\n      : 0;\n\n    if (\n      width ||\n      compactStepCircularLineWidth ||\n      toastDismissTimerCircularLineWidth\n    ) {\n      this.circularLineWidth =\n        (compactStepCircularLineWidth ||\n          toastDismissTimerCircularLineWidth ||\n          width) * 0.1;\n      this.circularDiameter =\n        compactStepCircularLineWidth ||\n        toastDismissTimerCircularLineWidth ||\n        width;\n      this.outerElement.style.setProperty(\n        \"--circular-line-width\",\n        `${this.circularLineWidth}px`\n      );\n    }\n  };\n\n  private setLinearDeterminateWidth = () => {\n    if (!this.innerElement) return;\n    // Ensure progress cannot be out of bounds\n\n    const progress = Math.min(this.max, Math.max(this.min, this.progress));\n    const proportion = (progress - this.min) / (this.max - this.min);\n    this.showSecond = proportion > 0.5;\n    if (this.showSecond) {\n      this.innerElement.classList.remove(\"clip\");\n    } else {\n      this.innerElement.classList.add(\"clip\");\n    }\n    this.innerElement.style.setProperty(\n      \"--linear-width\",\n      `${proportion * 100}%`\n    );\n  };\n\n  private calcOuterClass = (): string => {\n    let cls = `ic-loading-${this.type}-outer`;\n    cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n    return cls;\n  };\n\n  private updateLabel = (): void => {\n    if (isPropDefined(this.label)) {\n      this.labelList = this.label.split(\"/\");\n      const labelIndex = 0;\n      this.indicatorLabel = this.labelList[labelIndex];\n      if (this.labelList.length > 1) {\n        this.getLabel(labelIndex, (label) => {\n          this.indicatorLabel = label;\n        });\n      }\n    }\n  };\n\n  private setCircleXY = (): IcLoadingCircleXYR => {\n    if (this.circularDiameter > 0) {\n      const r = this.circularDiameter / 2;\n      const x = r;\n      const y = r;\n      const nextRadius = r - this.circularLineWidth / 2;\n      this.setDashSteps(nextRadius);\n\n      return { x, y, r: nextRadius };\n    }\n    return { x: 0, y: 0, r: 0 };\n  };\n\n  private setDashSteps = (radius: number) => {\n    const dashArray = 2 * Math.PI * radius;\n    const progress = Math.min(Math.max(this.progress, this.min), this.max);\n    const proportion = -1 - (progress - this.min) / (this.max - this.min);\n\n    this.circularMeter.style.setProperty(\n      \"--stroke-dasharray\",\n      `${dashArray}px`\n    );\n\n    if (!this.indeterminate) {\n      this.circularMeter.style.setProperty(\n        \"--circular-steps-max\",\n        String(this.max)\n      );\n      this.circularMeter.style.setProperty(\n        \"--stroke-dashoffset\",\n        `${proportion * dashArray}px`\n      );\n    }\n  };\n\n  render() {\n    const { appearance, label, description, size, fullWidth, innerLabel } =\n      this;\n    const { x, y, r } = this.setCircleXY();\n\n    return (\n      <Host\n        class={{\n          [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n          [\"label\"]: !!label,\n          [\"full-width\"]: fullWidth,\n          [\"inner-label\"]: !!innerLabel,\n        }}\n      >\n        <div class=\"ic-loading-container\" part=\"ic-loading-container\">\n          <div\n            ref={(el) => (this.outerElement = el as HTMLDivElement)}\n            class={this.calcOuterClass()}\n            role=\"progressbar\"\n            aria-labelledby={\n              this.label && this.size !== \"icon\" && \"ic-loading-label\"\n            }\n            aria-label={description}\n            aria-valuenow={this.progress}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n          >\n            <div\n              ref={(el) => (this.innerElement = el as HTMLDivElement)}\n              class={`ic-loading-${this.type}-inner`}\n            >\n              {this.innerLabel &&\n                this.innerLabel !== undefined &&\n                this.size === \"small\" && (\n                  <ic-typography variant=\"subtitle-small\" class=\"inner-text\">\n                    {this.innerLabel}\n                  </ic-typography>\n                )}\n              {this.type === \"circular\" && (\n                <svg\n                  class=\"ic-loading-circular-svg\"\n                  viewBox={`0 0 ${this.circularDiameter || 0} ${\n                    this.circularDiameter || 0\n                  }`}\n                >\n                  <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n                  <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n                </svg>\n              )}\n            </div>\n          </div>\n          {label && size !== \"icon\" && (\n            <ic-typography\n              id=\"ic-loading-label\"\n              class=\"ic-loading-label\"\n              role=\"status\"\n              variant={this.getLabelVariant()}\n            >\n              <p>{this.indicatorLabel}</p>\n            </ic-typography>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-tooltip: z-index of tooltip\n */\n\n:host(.ic-tooltip) {\n  width: max-content;\n  height: max-content;\n}\n\n:host(.ic-tooltip) .ic-tooltip-container {\n  background-color: var(--ic-architectural-800);\n  color: #ffff;\n  text-align: center;\n  padding: var(--ic-space-xxxs) var(--ic-space-xs);\n  border-radius: var(--ic-border-radius);\n  border: var(--ic-border-width) solid var(--ic-architectural-40);\n  position: absolute;\n  max-width: 20rem;\n  display: none;\n  z-index: var(--ic-z-index-tooltip);\n  box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed))\n  .ic-tooltip-container,\n:host(.tooltip-disabled) .ic-tooltip-container {\n  display: none !important;\n}\n\n:host(.tooltip-long-label-navigation-item-side-nav-expanded)\n  .ic-tooltip-container[data-show] {\n  display: block !important;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow,\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n  position: absolute;\n  background: inherit;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow {\n  visibility: hidden;\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n  visibility: visible;\n  content: \"\";\n  border: var(--ic-border-width) solid var(--ic-architectural-40);\n  width: 100%;\n  height: 100%;\n}\n\n:host(.ic-tooltip) .ic-tooltip-container[data-show] {\n  display: block;\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"top\"]\n  > .ic-tooltip-arrow {\n  height: var(--ic-space-xxxs);\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"top\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: 0 0 var(--ic-border-radius) var(--ic-border-radius);\n  left: 0;\n  top: var(--ic-space-xxxs);\n  border-top: 0;\n  transform: translateX(var(--tooltip-arrow-translate));\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n  > .ic-tooltip-arrow {\n  top: calc(-1 * var(--ic-space-xxs));\n  height: var(--ic-space-xxxs);\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: var(--ic-border-radius) var(--ic-border-radius) 0 0;\n  left: 0;\n  top: var(--ic-space-1px);\n  border-bottom: 0;\n  transform: translateX(var(--tooltip-arrow-translate));\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"left\"]\n  > .ic-tooltip-arrow {\n  width: var(--ic-space-xxxs);\n  right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"left\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: 0 var(--ic-border-radius) var(--ic-border-radius) 0;\n  border-left: 0;\n  top: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"right\"]\n  > .ic-tooltip-arrow {\n  width: var(--ic-space-xxxs);\n  left: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"right\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: var(--ic-border-radius) 0 0 var(--ic-border-radius);\n  border-right: 0;\n  top: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.on-dialog) .ic-tooltip-container {\n  transform: translate(\n    var(--tooltip-translate-x),\n    var(--tooltip-translate-y)\n  ) !important;\n}\n\n@media screen and (max-width: 576px) {\n  :host(.ic-tooltip) .ic-tooltip-container {\n    max-width: 18.875rem;\n  }\n}\n\n@media (forced-colors: active) {\n  :host(.ic-tooltip) .ic-tooltip-container,\n  :host(.ic-tooltip) .ic-tooltip-arrow::before {\n    border: var(--ic-hc-border);\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Method,\n  State,\n} from \"@stencil/core\";\nimport { Instance, Options, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  private arrow: HTMLDivElement;\n  private delayedHideEvents = [\"mouseleave\"];\n  private dialogOverflow = false;\n  private icDialogEl: HTMLIcDialogElement;\n  private instantHideEvents = [\"focusout\"];\n  private mouseOverTool: boolean = false;\n  private persistTooltip = false;\n  private popperInstance: Instance;\n  private onDialog: boolean = false;\n  private showEvents = [\n    !this.disableHover && \"mouseenter\",\n    !this.disableHover && \"focusin\",\n    !this.disableClick && \"click\",\n  ];\n  private toolTip: HTMLDivElement;\n\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * @internal If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n   */\n  @Prop() disableClick?: boolean = false;\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The position of the tooltip in relation to the parent element.\n   */\n  @Prop({ mutable: true }) placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * @internal Sets the tooltip to aria-hidden, when used as part of components that are already announced.\n   */\n  @Prop() silent?: boolean = false;\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  @State() popperProps: Partial<Options> = {};\n\n  /**\n   * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip\n   * @param props object - createPopper props set externally\n   */\n  @Method()\n  async setExternalPopperProps<T extends Partial<Options>>(props: T) {\n    this.popperProps = props;\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.manageEventListeners(\"add\");\n\n    this.icDialogEl = this.el.closest(\"ic-dialog\");\n    this.dialogOverflow =\n      this.icDialogEl?.getAttribute(\"data-overflow\") === \"true\";\n\n    this.onDialog = this.icDialogEl !== null;\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n  }\n\n  componentDidRender(): void {\n    const typographyEl = this.el.shadowRoot.querySelector(\n      \".ic-tooltip-container > ic-typography\"\n    );\n    this.maxLines > 0 &&\n      typographyEl.setAttribute(\n        \"style\",\n        `--truncation-max-lines: ${this.maxLines}`\n      );\n  }\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = persistTooltip;\n    show ? this.show() : this.hide();\n  }\n\n  /**\n   * @internal Method to return if tooltip is currently visible.\n   */\n  @Method()\n  async isTooltipVisible(): Promise<boolean> {\n    return Promise.resolve(this.toolTip.hasAttribute(\"data-show\"));\n  }\n\n  private getTooltipTranslate = (dialogEl: DOMRect) => {\n    const child = this.el.children[0].getBoundingClientRect();\n    let tooltipX;\n    let tooltipY;\n    switch (this.placement) {\n      case \"bottom\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"top\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"left\":\n      case \"left-start\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"left-end\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n      case \"right\":\n      case \"right-start\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"right-end\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n    }\n    if (this.dialogOverflow && tooltipX < 0) {\n      if (this.placement.includes(\"top\") || this.placement.includes(\"bottom\")) {\n        this.toolTip.style.setProperty(\n          \"--tooltip-arrow-translate\",\n          `${tooltipX}px`\n        );\n        tooltipX = child.left - dialogEl.left;\n      }\n      if (this.placement.includes(\"left\")) {\n        this.placement = \"right\";\n        tooltipX = child.left - dialogEl.left + child.width;\n      }\n    }\n\n    this.toolTip.style.setProperty(\"--tooltip-translate-x\", `${tooltipX}px`);\n    this.toolTip.style.setProperty(\"--tooltip-translate-y\", `${tooltipY}px`);\n  };\n\n  private show = () => {\n    if (this.label) {\n      this.toolTip.setAttribute(\"data-show\", \"\");\n\n      if (this.onDialog) {\n        this.el.classList.add(\"on-dialog\");\n        const dialogEl = this.icDialogEl.shadowRoot\n          .querySelector(\"dialog\")\n          .getBoundingClientRect();\n\n        this.getTooltipTranslate(dialogEl);\n      }\n\n      this.popperInstance = createPopper(this.el, this.toolTip, {\n        placement: this.placement,\n        modifiers: [\n          {\n            name: \"offset\",\n            options: {\n              offset: [0, 10],\n            },\n          },\n          {\n            name: \"arrow\",\n            options: {\n              element: this.arrow,\n            },\n          },\n          {\n            name: \"eventListeners\",\n            options: { scroll: false, resize: false },\n          },\n        ],\n        ...this.popperProps,\n      });\n    } else {\n      console.warn(`Tooltip can't display without prop 'label' set`);\n    }\n  };\n\n  private hide = () => {\n    this.toolTip.removeAttribute(\"data-show\");\n    this.persistTooltip = false;\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  };\n\n  private checkCloseTooltip = () => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide();\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = () => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\" && !this.persistTooltip) {\n      this.hide();\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, this.show);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseEnterTooltip);\n      }\n    });\n\n    if (!this.persistTooltip) {\n      this.instantHideEvents.forEach((event) => {\n        this.el[method](event, this.hide);\n      });\n    }\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, this.checkCloseTooltip);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseLeaveTooltip);\n      }\n    });\n\n    document[method](\"keydown\", this.handleKeyDown);\n  };\n\n  render() {\n    const { label, maxLines, silent } = this;\n    return (\n      <Host class={{ \"ic-tooltip\": true }}>\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n          aria-hidden={`${silent}`}\n        >\n          <ic-typography maxLines={maxLines} variant=\"caption\">\n            {label}\n          </ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-32fa7c28.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icPopoverMenuCss","PopoverMenu","this","ARIA_LABEL","popoverMenuEls","setButtonFocus","_a","currentFocus","focus","findAnchorEl","anchor","anchorElement","submenuId","undefined","console","error","document","querySelector","indexOf","isNotPopoverMenuEl","ev","id","tagName","target","getNextItemToSelect","currentItem","movingDown","numButtons","length","nextItem","addMenuItems","elements","i","el","push","groupSlotWrapper","shadowRoot","menuGroupElements","getSlotElements","getMenuAriaLabel","ariaLabel","getAttribute","isPropDefined","submenuLevel","parentLabel","handleBackButtonClick","parentPopover","openFromChild","open","initPopperJS","popperInstance","createPopper","anchorEl","placement","modifiers","name","options","offset","fallbackPlacements","rootBoundary","watchOpenHandler","some","menuItem","unshift","backButton","setTimeout","destroy","disconnectedCallback","componentDidLoad","slotWrapper","popoverMenuElements","componentWillRender","componentDidRender","handleMenuItemClick","detail","hasSubMenu","label","closeMenu","handleSubmenuChange","childEl","submenuTriggerFor","openFromParent","handleClick","handleKeyDown","key","preventDefault","blur","openingFromChild","openingFromParent","setFocusToAnchor","icPopoverClosed","emit","render","h","Host","class","menu","tabindex","role","ref","onClick","slot","viewBox","fill","xmlns","d","variant"],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n*/\n\n@media (prefers-reduced-motion: no-preference) {\n  :host .opening-from-parent {\n    animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n  }\n\n  :host .opening-from-child {\n    animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n  }\n}\n\n:host {\n  border-radius: var(--ic-border-radius);\n  color: var(--ic-color-primary-text);\n  background-color: var(--ic-architectural-white);\n  position: relative;\n  z-index: var(--ic-z-index-popover);\n  box-sizing: border-box;\n  box-shadow: var(--ic-elevation-overlay);\n  display: none;\n}\n\n:host(.on-dialog) {\n  inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n  transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n  transform: translate(0, calc(-1 * var(--translate-y))) !important;\n}\n\n.menu {\n  border: var(--ic-border-default);\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-architectural-white);\n  visibility: hidden;\n  height: 0;\n}\n\n.button {\n  text-decoration: none;\n  list-style-type: none;\n}\n\n:host(:focus-within) {\n  box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n  outline: none;\n}\n\n:host(.open) {\n  display: block;\n  min-width: calc(20rem - var(--ic-space-xl));\n  width: var(--popover-width, 20rem);\n  max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.open) .menu {\n  visibility: visible;\n  height: fit-content;\n  max-height: var(--max-height, fit-content);\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.parent-label {\n  color: var(--ic-color-tertiary-text);\n  margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n  from {\n    opacity: 0;\n    transform: translateX(10rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slide-out {\n  from {\n    opacity: 0;\n    transform: translateX(-10rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Watch,\n  State,\n  Method,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\n@Component({\n  tag: \"ic-popover-menu\",\n  styleUrl: \"ic-popover-menu.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class PopoverMenu {\n  private anchorEl: HTMLElement;\n  private ARIA_LABEL: string = \"aria-label\";\n  private backButton: HTMLIcMenuItemElement;\n  private currentFocus: number;\n  private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n  private popperInstance: PopperInstance;\n\n  @Element() el: HTMLIcPopoverMenuElement;\n\n  @State() openingFromChild: boolean = false;\n  @State() openingFromParent: boolean = false;\n\n  /**\n   * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n   */\n  @Prop() anchor: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentLabel?: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n  /**\n   * The unique identifier for a popover submenu.\n   */\n  @Prop() submenuId?: string;\n\n  /**\n   * @internal The level of menu being displayed.\n   */\n  @Prop() submenuLevel: number = 1;\n\n  /**\n   * If `true`, the popover menu will be displayed.\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n  @Watch(\"open\")\n  watchOpenHandler(): void {\n    if (this.open) {\n      if (\n        this.parentPopover !== undefined &&\n        !this.popoverMenuEls.some((menuItem) => menuItem.id)\n      ) {\n        this.popoverMenuEls.unshift(this.backButton);\n      }\n\n      this.currentFocus = 0;\n      // Needed so that anchorEl isn't always focused\n      setTimeout(this.setButtonFocus, 50);\n    } else if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  /**\n   * Emitted when the popover menu is closed.\n   */\n  @Event() icPopoverClosed: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  componentDidLoad(): void {\n    const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n    const popoverMenuElements = getSlotElements(slotWrapper);\n\n    if (popoverMenuElements !== null) {\n      this.addMenuItems(popoverMenuElements);\n    }\n\n    if (\n      this.submenuId === undefined &&\n      this.el.getAttribute(this.ARIA_LABEL) === null\n    ) {\n      console.error(\n        `No aria-label specified for popover menu component - aria-label required`\n      );\n    }\n  }\n\n  componentWillRender(): void {\n    this.anchorEl = this.findAnchorEl(this.anchor);\n  }\n\n  componentDidRender(): void {\n    if (this.open && !this.popperInstance) {\n      this.initPopperJS();\n    }\n  }\n\n  @Listen(\"handleMenuItemClick\")\n  handleMenuItemClick(\n    ev: CustomEvent<{\n      label: string;\n      hasSubMenu: boolean;\n    }>\n  ): void {\n    if (!ev.detail.hasSubMenu && ev.detail.label !== \"Back\") {\n      this.closeMenu();\n    }\n  }\n\n  // This is listening for the event emitted when a menu item is acting as a trigger button\n  @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n  handleSubmenuChange(ev: Event): void {\n    // Finds the trigger menu item that has emitted the event\n    const target = ev.target as HTMLIcMenuItemElement;\n    this.open = false;\n\n    // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n    const childEl = document.querySelector(\n      `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n    ) as HTMLIcPopoverMenuElement;\n    // Set the parent popover menu of the submenu and open the submenu\n    childEl.parentPopover = this.el;\n    childEl.anchor = this.anchor;\n    childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n    childEl.openFromParent();\n    childEl.submenuLevel = this.submenuLevel + 1;\n    // Set the label in the submenu using the label of the menu item that has emitted the event\n    childEl.parentLabel = target.label;\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleClick(ev: Event): void {\n    if (this.open && this.isNotPopoverMenuEl(ev)) {\n      // If menu is open and the next click on the document is not a popover El, close the popover\n      this.closeMenu();\n    }\n  }\n\n  // Manages the keyboard navigation in the popover menu\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.currentFocus = this.getNextItemToSelect(\n          this.currentFocus,\n          ev.key === \"ArrowDown\"\n        );\n        this.setButtonFocus();\n        break;\n      case \"Home\":\n        //Sets home focus as first element, or back button\n        this.currentFocus = 0;\n        this.setButtonFocus();\n        break;\n      case \"End\":\n        //Sets end focus as last element\n        this.currentFocus = this.popoverMenuEls.length - 1;\n        this.setButtonFocus();\n        break;\n      case \"Escape\":\n      case \"Tab\":\n        ev.preventDefault();\n        if (this.open) {\n          this.closeMenu(true);\n          this.el.blur();\n        }\n        break;\n    }\n  }\n\n  /**\n   * @internal Opens the menu from the child menu.\n   */\n  @Method()\n  async openFromChild(): Promise<void> {\n    this.open = true;\n    this.openingFromChild = true;\n\n    setTimeout(() => (this.openingFromChild = false), 1000);\n  }\n\n  /**\n   * @internal Opens the menu from the parent menu.\n   */\n  @Method()\n  async openFromParent(): Promise<void> {\n    this.open = true;\n    this.openingFromParent = true;\n\n    setTimeout(() => (this.openingFromParent = false), 1000);\n  }\n\n  private setButtonFocus = () => {\n    this.popoverMenuEls[this.currentFocus]?.focus();\n  };\n\n  // Checks that the popover menu has an anchor\n  private findAnchorEl = (anchor: string): HTMLElement => {\n    let anchorElement: HTMLElement = null;\n    if (!anchor) {\n      this.submenuId === undefined &&\n        console.error(\"No anchor specified for popover component\");\n    } else {\n      anchorElement = document.querySelector(\n        anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n      );\n      if (anchorElement === null) {\n        console.error(`Popover anchor element '${anchor}' not found`);\n      }\n    }\n    return anchorElement;\n  };\n\n  private isNotPopoverMenuEl = (ev: Event) => {\n    const { id, tagName } = ev.target as HTMLElement;\n    return (\n      id !== this.anchor &&\n      tagName !== \"IC-MENU-ITEM\" &&\n      tagName !== \"IC-MENU-GROUP\" &&\n      tagName !== \"IC-POPOVER-MENU\"\n    );\n  };\n\n  /**\n   * @internal Close the menu, emit icPopoverClosed of the root popover\n   * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n   */\n  @Method()\n  async closeMenu(setFocusToAnchor = false): Promise<void> {\n    this.open = false;\n    if (this.parentPopover) {\n      this.parentPopover.closeMenu(setFocusToAnchor);\n    } else {\n      if (setFocusToAnchor) {\n        this.anchorEl?.focus();\n      }\n      this.icPopoverClosed.emit();\n    }\n  }\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numButtons = this.popoverMenuEls.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    // Check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numButtons;\n    } else if (nextItem > numButtons) {\n      nextItem = 0;\n    }\n\n    return nextItem;\n  };\n\n  private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n    for (let i = 0; i < elements.length; i++) {\n      const el = elements[i] as HTMLIcMenuItemElement;\n      if (el.tagName === \"IC-MENU-ITEM\") {\n        this.popoverMenuEls.push(el);\n      } else if (el.tagName === \"IC-MENU-GROUP\") {\n        const groupSlotWrapper = el.shadowRoot.querySelector(\n          \".menu-items-wrapper\"\n        );\n        const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n        this.addMenuItems(menuGroupElements);\n      }\n    }\n  };\n\n  private getMenuAriaLabel = (): string => {\n    const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n    if (isPropDefined(this.submenuId)) {\n      return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  private handleBackButtonClick = (): void => {\n    this.parentPopover.openFromChild();\n    this.open = false;\n  };\n\n  private initPopperJS = () => {\n    this.popperInstance = createPopper(this.anchorEl, this.el, {\n      placement: \"bottom-start\",\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 4],\n          },\n        },\n        {\n          name: \"flip\",\n          options: {\n            fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n            rootBoundary: \"viewport\",\n          },\n        },\n      ],\n    });\n  };\n\n  render() {\n    return (\n      <Host class={{ open: this.open }}>\n        <div\n          id={\n            this.parentPopover === undefined\n              ? `ic-popover-submenu-${this.submenuId}`\n              : \"\"\n          }\n          class={{\n            menu: true,\n          }}\n          tabindex={open ? \"0\" : \"-1\"}\n        >\n          <span\n            class={{\n              \"opening-from-parent\": this.openingFromParent,\n              \"opening-from-child\": this.openingFromChild,\n            }}\n          >\n            {isPropDefined(this.submenuId) && (\n              <span>\n                <span role=\"menu\">\n                  <ic-menu-item\n                    class=\"ic-popover-submenu-back-button\"\n                    ref={(el) => (this.backButton = el)}\n                    label=\"Back\"\n                    onClick={this.handleBackButtonClick}\n                    id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n                  >\n                    <svg\n                      slot=\"icon\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"submenu-back-icon\"\n                    >\n                      <path\n                        d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n                        fill=\"currentColor\"\n                      />\n                    </svg>\n                  </ic-menu-item>\n                </span>\n                <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n                  {this.parentLabel}\n                </ic-typography>\n              </span>\n            )}\n            <ul class=\"button\" aria-label={this.getMenuAriaLabel()} role=\"menu\">\n              <slot></slot>\n            </ul>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}