@ukic/web-components 2.1.0-beta.11 → 2.1.0-beta.13

package/dist/core/{p-acb08809.entry.js → p-6b39f8b4.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as i,h as t,H as a,g as r}from"./p-5450cebf.js";import{u as o,d as n,a as c,r as s}from"./p-3dea2867.js";import"./p-6f57b13c.js";const d='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}:host([additional-field-display="static"]) ::slotted(ic-text-field){margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}:host([disabled]){color:var(--ic-architectural-200)}.container input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:transparent;border:0.063rem solid #a7acb3;border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:0.063rem solid var(--ic-action-default)}.container:active input~.checkmark{background-color:var(--ic-action-default-bg-active);border:0.063rem solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark{background-color:var(--ic-action-default-bg-active);border:0.125rem solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark::after{background-color:var(--ic-action-default-active)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-action-default)}.container input:checked:disabled~.checkmark{background-color:transparent;border:0.125rem solid var(--ic-architectural-200)}.container input:disabled~.checkmark{border:0.063rem dashed var(--ic-architectural-200)}.container input:disabled~.checkmark::after{background:var(--ic-architectural-200)}.container:hover input:disabled~.checkmark{background-color:transparent;box-shadow:none;border:0.125rem solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-architectural-200)}.container .checkmark::after{content:"";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-action-default)}.radio-label{margin-left:var(--ic-space-md)}.additional-field-wrapper{margin-left:var(--ic-space-xs)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default);margin-left:-0.063rem}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){::slotted(ic-text-field){--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}';const l=class{constructor(t){e(this,t);this.radioOptionSelect=i(this,"radioOptionSelect",7);this.icCheck=i(this,"icCheck",7);this.defaultRadioValue="";this.skipFocus=false;this.handleClick=()=>{if(!this.disabled){if(this.skipFocus===false){this.radioElement.focus()}this.skipFocus=false;if(this.hasAdditionalField){const e=this.host.querySelector("ic-text-field");this.value=e.value!==""?e.value:this.defaultRadioValue}this.icCheck.emit({value:this.value});this.radioOptionSelect.emit({value:this.value})}};this.swallowClick=e=>{e.stopPropagation()};this.hasAdditionalField=false;this.handleFormReset=()=>{this.skipFocus=true;this.selected=this.initiallySelected};this.selected=false;this.disabled=false;this.label=undefined;this.value=undefined;this.name=undefined;this.groupLabel=undefined;this.dynamicText="This selection requires additional answers";this.additionalFieldDisplay="static";this.initiallySelected=this.selected}selectedChangeHandler(e){if(e){this.handleClick()}}async setFocus(){if(this.host.shadowRoot.querySelector("input")){this.host.shadowRoot.querySelector("input").focus()}}componentWillLoad(){const e=o(this.host,"additional-field");if(e!==null){this.hasAdditionalField=true;const i=e[0];if(i.tagName==="IC-TEXT-FIELD"){const e=i;e.hiddenInput=false}}this.defaultRadioValue=this.value;n(this.host,this.handleFormReset)}textfieldValueHandler(e){const i=e.detail.value;if(this.selected){if(i!==""){this.value=e.detail.value;this.icCheck.emit({value:this.value});this.radioOptionSelect.emit({value:this.value})}else{this.value=this.defaultRadioValue;this.icCheck.emit({value:this.defaultRadioValue});this.radioOptionSelect.emit({value:this.defaultRadioValue})}}}componentDidLoad(){c([{prop:this.value,propName:"value"}],"Radio Option")}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.host.querySelector("ic-text-field");if(!this.selected){e&&e.setAttribute("disabled","")}else{e&&e.removeAttribute("disabled")}}}disconnectedCallback(){s(this.host,this.handleFormReset)}render(){const e=`ic-radio-option-${this.label!==undefined?this.label:this.value}-${this.groupLabel}`;return t(a,{onClick:this.handleClick},t("div",{class:{["container"]:true,["disabled"]:this.disabled}},t("div",null,t("input",{role:"radio",tabindex:this.selected?"0":"-1",type:"radio",name:this.name,id:e,value:this.value,disabled:this.disabled?true:null,checked:this.selected,ref:e=>this.radioElement=e}),t("span",{class:"checkmark"})),t("ic-typography",{class:"radio-label",variant:"body"},t("label",{htmlFor:e},this.label))),this.hasAdditionalField&&t("div",{onClick:this.swallowClick,class:{"dynamic-container":true,hidden:this.additionalFieldDisplay==="dynamic"&&!this.selected}},this.additionalFieldDisplay==="dynamic"&&t("div",{class:"branch-corner"}),t("div",null,this.additionalFieldDisplay==="dynamic"&&t("ic-typography",{variant:"caption"},t("p",{class:"dynamic-text"},this.dynamicText)),t("div",{class:{"additional-field-wrapper":this.additionalFieldDisplay==="static"}},t("slot",{name:"additional-field"})))))}static get delegatesFocus(){return true}get host(){return r(this)}static get watchers(){return{selected:["selectedChangeHandler"]}}};l.style=d;export{l as ic_radio_option};
-//# sourceMappingURL=p-acb08809.entry.js.map
+import{r as e,c as i,h as t,H as a,g as r}from"./p-589f6dd3.js";import{u as c,d as o,a as n,r as s}from"./p-3dea2867.js";import"./p-6f57b13c.js";const d='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}:host([additional-field-display="static"]) ::slotted(ic-text-field){margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}:host(.disabled){color:var(--ic-architectural-200)}.container input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:transparent;border:var(--ic-space-1px) solid #a7acb3;border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-space-1px) solid var(--ic-action-default)}.container:active input~.checkmark{background-color:var(--ic-action-default-bg-active);border:var(--ic-space-1px) solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark{background-color:var(--ic-action-default-bg-active);border:0.125rem solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark::after{background-color:var(--ic-action-default-active)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-action-default)}.container input:checked:disabled~.checkmark{background-color:transparent;border:0.125rem solid var(--ic-architectural-200)}.container input:disabled~.checkmark{border:var(--ic-space-1px) dashed var(--ic-architectural-200)}.container input:disabled~.checkmark::after{background:var(--ic-architectural-200)}.container:hover input:disabled~.checkmark{background-color:transparent;box-shadow:none;border:0.125rem solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-architectural-200)}.container .checkmark::after{content:"";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-action-default)}.radio-label{margin-left:var(--ic-space-md)}.additional-field-wrapper{margin-left:var(--ic-space-xs)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default);margin-left:calc(-1 * var(--ic-space-1px))}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){::slotted(ic-text-field){--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}';const l=class{constructor(t){e(this,t);this.radioOptionSelect=i(this,"radioOptionSelect",7);this.icCheck=i(this,"icCheck",7);this.defaultRadioValue="";this.skipFocus=false;this.handleClick=()=>{if(!this.disabled){if(this.skipFocus===false){this.radioElement.focus()}this.skipFocus=false;if(this.hasAdditionalField){const e=this.host.querySelector("ic-text-field");this.value=e.value!==""?e.value:this.defaultRadioValue}this.icCheck.emit({value:this.value});this.radioOptionSelect.emit({value:this.value})}};this.swallowClick=e=>{e.stopPropagation()};this.hasAdditionalField=false;this.handleFormReset=()=>{this.skipFocus=true;this.selected=this.initiallySelected};this.selected=false;this.disabled=false;this.label=undefined;this.value=undefined;this.name=undefined;this.groupLabel=undefined;this.dynamicText="This selection requires additional answers";this.additionalFieldDisplay="static";this.initiallySelected=this.selected}selectedChangeHandler(e){if(e){this.handleClick()}}async setFocus(){if(this.host.shadowRoot.querySelector("input")){this.host.shadowRoot.querySelector("input").focus()}}componentWillLoad(){const e=c(this.host,"additional-field");if(e!==null){this.hasAdditionalField=true;const i=e[0];if(i.tagName==="IC-TEXT-FIELD"){const e=i;e.hiddenInput=false}}this.defaultRadioValue=this.value;o(this.host,this.handleFormReset)}textfieldValueHandler(e){const i=e.detail.value;if(this.selected){if(i!==""){this.value=e.detail.value;this.icCheck.emit({value:this.value});this.radioOptionSelect.emit({value:this.value})}else{this.value=this.defaultRadioValue;this.icCheck.emit({value:this.defaultRadioValue});this.radioOptionSelect.emit({value:this.defaultRadioValue})}}}componentDidLoad(){n([{prop:this.value,propName:"value"}],"Radio Option")}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.host.querySelector("ic-text-field");if(!this.selected){e&&e.setAttribute("disabled","")}else{e&&e.removeAttribute("disabled")}}}disconnectedCallback(){s(this.host,this.handleFormReset)}render(){const e=`ic-radio-option-${this.label!==undefined?this.label:this.value}-${this.groupLabel}`;return t(a,{onClick:this.handleClick,class:{disabled:this.disabled}},t("div",{class:{["container"]:true,["disabled"]:this.disabled}},t("div",null,t("input",{role:"radio",tabindex:this.selected?"0":"-1",type:"radio",name:this.name,id:e,value:this.value,disabled:this.disabled?true:null,checked:this.selected,ref:e=>this.radioElement=e}),t("span",{class:"checkmark"})),t("ic-typography",{class:"radio-label",variant:"body"},t("label",{htmlFor:e},this.label))),this.hasAdditionalField&&t("div",{onClick:this.swallowClick,class:{"dynamic-container":true,hidden:this.additionalFieldDisplay==="dynamic"&&!this.selected}},this.additionalFieldDisplay==="dynamic"&&t("div",{class:"branch-corner"}),t("div",null,this.additionalFieldDisplay==="dynamic"&&t("ic-typography",{variant:"caption"},t("p",{class:"dynamic-text"},this.dynamicText)),t("div",{class:{"additional-field-wrapper":this.additionalFieldDisplay==="static"}},t("slot",{name:"additional-field"})))))}static get delegatesFocus(){return true}get host(){return r(this)}static get watchers(){return{selected:["selectedChangeHandler"]}}};l.style=d;export{l as ic_radio_option};
+//# sourceMappingURL=p-6b39f8b4.entry.js.map

package/dist/core/p-6b39f8b4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","src/components/ic-radio-option/ic-radio-option.tsx"],"names":["icRadioOptionCss","RadioOption","this","defaultRadioValue","skipFocus","handleClick","disabled","radioElement","focus","hasAdditionalField","textfield","host","querySelector","value","icCheck","emit","radioOptionSelect","swallowClick","event","stopPropagation","handleFormReset","selected","initiallySelected","[object Object]","shadowRoot","additonalFieldContent","getSlotContent","Element","tagName","textField","hiddenInput","addFormResetListener","textFieldValue","detail","onComponentRequiredPropUndefined","prop","propName","additionalFieldDisplay","setAttribute","removeAttribute","removeFormResetListener","id","label","undefined","groupLabel","h","Host","onClick","class","role","tabindex","type","name","checked","ref","el","variant","htmlFor","dynamic-container","hidden","dynamicText","additional-field-wrapper"],"mappings":"iJAAA,MAAMA,EAAmB,2wMC4BZC,EAAW,qHAoEdC,KAAAC,kBAA4B,GAC5BD,KAAAE,UAAY,MAEZF,KAAAG,YAAc,KACpB,IAAKH,KAAKI,SAAU,CAClB,GAAIJ,KAAKE,YAAc,MAAO,CAC5BF,KAAKK,aAAaC,QAEpBN,KAAKE,UAAY,MAEjB,GAAIF,KAAKO,mBAAoB,CAC3B,MAAMC,EAAYR,KAAKS,KAAKC,cAAc,iBAC1CV,KAAKW,MACHH,EAAUG,QAAU,GAAKH,EAAUG,MAAQX,KAAKC,kBAGpDD,KAAKY,QAAQC,KAAK,CAChBF,MAAOX,KAAKW,QAGdX,KAAKc,kBAAkBD,KAAK,CAC1BF,MAAOX,KAAKW,UAKVX,KAAAe,aAAgBC,IACtBA,EAAMC,mBAGAjB,KAAAO,mBAA8B,MAkB9BP,KAAAkB,gBAAkB,KACxBlB,KAAKE,UAAY,KACjBF,KAAKmB,SAAWnB,KAAKoB,iCAjHsC,oBAIhC,+GAoBC,yEAM5B,gCAE2BpB,KAAKmB,SAelCE,sBAAsBF,GACpB,GAAIA,EAAU,CACZnB,KAAKG,eAQTkB,iBACE,GAAIrB,KAAKS,KAAKa,WAAWZ,cAAc,SAAU,CAC/CV,KAAKS,KAAKa,WAAWZ,cAAc,SAASJ,SAmChDe,oBACE,MAAME,EAAwBC,EAAexB,KAAKS,KAAM,oBAExD,GAAIc,IAA0B,KAAM,CAClCvB,KAAKO,mBAAqB,KAC1B,MAAMkB,EAAUF,EAAsB,GACtC,GAAIE,EAAQC,UAAY,gBAAiB,CACvC,MAAMC,EAAYF,EAClBE,EAAUC,YAAc,OAI5B5B,KAAKC,kBAAoBD,KAAKW,MAE9BkB,EAAqB7B,KAAKS,KAAMT,KAAKkB,iBASvCG,sBAAsBL,GACpB,MAAMc,EAAiBd,EAAMe,OAAOpB,MAEpC,GAAIX,KAAKmB,SAAU,CACjB,GAAIW,IAAmB,GAAI,CACzB9B,KAAKW,MAAQK,EAAMe,OAAOpB,MAC1BX,KAAKY,QAAQC,KAAK,CAChBF,MAAOX,KAAKW,QAEdX,KAAKc,kBAAkBD,KAAK,CAC1BF,MAAOX,KAAKW,YAET,CACLX,KAAKW,MAAQX,KAAKC,kBAClBD,KAAKY,QAAQC,KAAK,CAChBF,MAAOX,KAAKC,oBAEdD,KAAKc,kBAAkBD,KAAK,CAC1BF,MAAOX,KAAKC,sBAMpBoB,mBACEW,EACE,CAAC,CAAEC,KAAMjC,KAAKW,MAAOuB,SAAU,UAC/B,gBAIJb,qBACE,GAAIrB,KAAKmC,yBAA2B,SAAU,CAC5C,MAAM3B,EAAYR,KAAKS,KAAKC,cAAc,iBAC1C,IAAKV,KAAKmB,SAAU,CAClBX,GAAaA,EAAU4B,aAAa,WAAY,QAC3C,CACL5B,GAAaA,EAAU6B,gBAAgB,cAK7ChB,uBACEiB,EAAwBtC,KAAKS,KAAMT,KAAKkB,iBAG1CG,SACE,MAAMkB,EAAK,mBACTvC,KAAKwC,QAAUC,UAAYzC,KAAKwC,MAAQxC,KAAKW,SAC3CX,KAAK0C,aAET,OACEC,EAACC,EAAI,CAACC,QAAS7C,KAAKG,YAAa2C,MAAO,CAAE1C,SAAUJ,KAAKI,WACvDuC,EAAA,MAAA,CAAKG,MAAO,CAAEzB,CAAC,aAAc,KAAMA,CAAC,YAAarB,KAAKI,WACpDuC,EAAA,MAAA,KACEA,EAAA,QAAA,CACEI,KAAK,QACLC,SAAUhD,KAAKmB,SAAW,IAAM,KAChC8B,KAAK,QACLC,KAAMlD,KAAKkD,KACXX,GAAIA,EACJ5B,MAAOX,KAAKW,MACZP,SAAUJ,KAAKI,SAAW,KAAO,KACjC+C,QAASnD,KAAKmB,SACdiC,IAAMC,GAAQrD,KAAKK,aAAegD,IAEpCV,EAAA,OAAA,CAAMG,MAAM,eAEdH,EAAA,gBAAA,CAAeG,MAAM,cAAcQ,QAAQ,QACzCX,EAAA,QAAA,CAAOY,QAAShB,GAAKvC,KAAKwC,SAI7BxC,KAAKO,oBACJoC,EAAA,MAAA,CACEE,QAAS7C,KAAKe,aACd+B,MAAO,CACLU,oBAAqB,KACrBC,OACEzD,KAAKmC,yBAA2B,YAAcnC,KAAKmB,WAGtDnB,KAAKmC,yBAA2B,WAC/BQ,EAAA,MAAA,CAAKG,MAAM,kBAEbH,EAAA,MAAA,KACG3C,KAAKmC,yBAA2B,WAC/BQ,EAAA,gBAAA,CAAeW,QAAQ,WACrBX,EAAA,IAAA,CAAGG,MAAM,gBAAgB9C,KAAK0D,cAGlCf,EAAA,MAAA,CACEG,MAAO,CACLa,2BACE3D,KAAKmC,yBAA2B,WAGpCQ,EAAA,OAAA,CAAMO,KAAK","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-text-field) {\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\n:host(.disabled) {\n  color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n.container {\n  display: grid;\n  grid-template-columns: min-content auto;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: inline-block;\n  position: absolute;\n  cursor: pointer;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  border-radius: 50%;\n  border: none;\n}\n\n/* Create a custom radio button */\n.checkmark {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: transparent;\n  border: var(--ic-space-1px) solid #a7acb3;\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\n  box-sizing: border-box;\n}\n\n/* Show the indicator (dot/circle) when checked */\n.container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n.container:hover input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n  border: var(--ic-space-1px) solid var(--ic-action-default);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: var(--ic-space-1px) solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 0.125rem solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-action-default-active);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-action-default);\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  background-color: transparent;\n  border: 0.125rem solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: var(--ic-space-1px) dashed var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n  background: var(--ic-architectural-200);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n  background-color: transparent;\n  box-shadow: none;\n  border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-architectural-200);\n}\n\n/* Style the indicator (dot/circle) */\n.container .checkmark::after {\n  content: \"\";\n  position: absolute;\n  display: none;\n  top: calc(50% - var(--ic-space-xs));\n  left: calc(50% - var(--ic-space-xs));\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  border-radius: 50%;\n  background: var(--ic-action-default);\n}\n\n.radio-label {\n  margin-left: var(--ic-space-md);\n}\n\n.additional-field-wrapper {\n  margin-left: var(--ic-space-xs);\n}\n\n/* The line */\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-action-default);\n  border-left: 0.125rem solid var(--ic-action-default);\n  margin-left: calc(-1 * var(--ic-space-1px));\n}\n\n/* The dynamic container */\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n  display: none;\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n  ::slotted(ic-text-field) {\n    --input-width: 100%;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n\n  .container input:checked ~ .checkmark,\n  .container:active input:checked ~ .checkmark {\n    border-color: Highlight;\n  }\n\n  .container input:checked ~ .checkmark::after,\n  .container:active input:checked ~ .checkmark::after {\n    background-color: Highlight;\n  }\n\n  .container input:disabled ~ .checkmark,\n  .container input:checked:disabled ~ .checkmark {\n    border-color: GrayText;\n  }\n\n  .container input:disabled ~ .checkmark::after,\n  .container:active input:disabled ~ .checkmark::after {\n    background-color: GrayText;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  State,\n  Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcValueEventDetail } from \"../../interface\";\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class RadioOption {\n  private radioElement: HTMLInputElement;\n  /**\n   * If `true`, the radio option will be displayed in a selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The label for the radio option.\n   */\n  @Prop() label?: string;\n  /**\n   * The value for the radio option.\n   */\n  @Prop({ mutable: true }) value!: string;\n  /**\n   * The name for the radio option.\n   */\n  @Prop() name: string;\n  /**\n   * The group label for the radio option.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  @State() initiallySelected = this.selected;\n\n  @Element() host: HTMLIcRadioOptionElement;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when a radio is selected.\n   */\n  @Event() icCheck: EventEmitter<IcValueEventDetail>;\n\n  @Watch(\"selected\")\n  selectedChangeHandler(selected: boolean): void {\n    if (selected) {\n      this.handleClick();\n    }\n  }\n\n  /**\n   * Sets focus on the radio option.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.host.shadowRoot.querySelector(\"input\")) {\n      this.host.shadowRoot.querySelector(\"input\").focus();\n    }\n  }\n\n  private defaultRadioValue: string = \"\";\n  private skipFocus = false;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      if (this.skipFocus === false) {\n        this.radioElement.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        const textfield = this.host.querySelector(\"ic-text-field\");\n        this.value =\n          textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n      }\n\n      this.icCheck.emit({\n        value: this.value,\n      });\n\n      this.radioOptionSelect.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private swallowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  private hasAdditionalField: boolean = false;\n  componentWillLoad(): void {\n    const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n    if (additonalFieldContent !== null) {\n      this.hasAdditionalField = true;\n      const Element = additonalFieldContent[0] as HTMLElement;\n      if (Element.tagName === \"IC-TEXT-FIELD\") {\n        const textField = Element as HTMLIcTextFieldElement;\n        textField.hiddenInput = false;\n      }\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  @Listen(\"icChange\")\n  textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    const textFieldValue = event.detail.value;\n\n    if (this.selected) {\n      if (textFieldValue !== \"\") {\n        this.value = event.detail.value;\n        this.icCheck.emit({\n          value: this.value,\n        });\n        this.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\n        this.icCheck.emit({\n          value: this.defaultRadioValue,\n        });\n        this.radioOptionSelect.emit({\n          value: this.defaultRadioValue,\n        });\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.selected) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    const id = `ic-radio-option-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    return (\n      <Host onClick={this.handleClick} class={{ disabled: this.disabled }}>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          <div>\n            <input\n              role=\"radio\"\n              tabindex={this.selected ? \"0\" : \"-1\"}\n              type=\"radio\"\n              name={this.name}\n              id={id}\n              value={this.value}\n              disabled={this.disabled ? true : null}\n              checked={this.selected}\n              ref={(el) => (this.radioElement = el)}\n            ></input>\n            <span class=\"checkmark\"></span>\n          </div>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n\n        {this.hasAdditionalField && (\n          <div\n            onClick={this.swallowClick}\n            class={{\n              \"dynamic-container\": true,\n              hidden:\n                this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n            }}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{this.dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-6f57b13c.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/utils/types.ts"],"names":["IcInformationStatus","IcThemeForegroundEnum"],"mappings":"IAwBYA,GAAZ,SAAYA,GACVA,EAAA,WAAA,UACAA,EAAA,SAAA,QACAA,EAAA,WAAA,WAHF,CAAYA,IAAAA,EAAmB,SAsEnBC,GAAZ,SAAYA,GACVA,EAAA,WAAA,UACAA,EAAA,QAAA,OACAA,EAAA,SAAA,SAHF,CAAYA,IAAAA,EAAqB","sourcesContent":["export type IcFocusableComponents =\n  | HTMLIcBreadcrumbElement\n  | HTMLIcButtonElement\n  | HTMLIcCardElement\n  | HTMLIcCheckboxElement\n  | HTMLIcChipElement\n  | HTMLIcLinkElement\n  | HTMLIcNavigationButtonElement\n  | HTMLIcNavigationGroupElement\n  | HTMLIcNavigationItemElement\n  | HTMLIcRadioOptionElement\n  | HTMLIcSearchBarElement\n  | HTMLIcSelectElement\n  | HTMLIcSwitchElement\n  | HTMLIcTabElement\n  | HTMLIcTextFieldElement;\n\nexport type IcStatusVariants =\n  | \"neutral\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport enum IcInformationStatus {\n  Warning = \"warning\",\n  Error = \"error\",\n  Success = \"success\",\n}\n\nexport type IcInformationStatusOrEmpty = \"warning\" | \"error\" | \"success\" | \"\";\n\nexport type IcNavType = \"side\" | \"top\" | \"page-header\";\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type IcAutocompleteTypes =\n  | \"on\"\n  | \"off\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level4\"\n  | \"address-level3\"\n  | \"address-level2\"\n  | \"address-level1\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tel-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\nexport type IcAlignment = \"left\" | \"center\" | \"full-width\";\n\nexport enum IcThemeForegroundEnum {\n  Default = \"default\",\n  Dark = \"dark\",\n  Light = \"light\",\n}\n\nexport type IcThemeForeground = \"default\" | \"dark\" | \"light\";\n\nexport type IcThemeForegroundNoDefault = \"dark\" | \"light\";\n\nexport type IcTheme = {\n  mode: IcThemeForeground;\n  color: IcColorRGB;\n};\n\nexport type IcAdditionalFieldTypes = \"static\" | \"dynamic\";\n\nexport type IcColorRGB = {\n  r: number;\n  g: number;\n  b: number;\n};\n\nexport type IcColorRGBA = IcColorRGB & {\n  a: number;\n};\n\nexport type IcActivationTypes = \"automatic\" | \"manual\";\n\nexport type IcAutocorrectStates = \"on\" | \"off\";\n\nexport type IcNavParentDetails = {\n  navType: IcNavType | \"\";\n  parent: HTMLElement;\n};\n\nexport type IcTypographyVariants =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"subtitle-large\"\n  | \"subtitle-small\"\n  | \"body\"\n  | \"label\"\n  | \"label-uppercase\"\n  | \"caption\"\n  | \"caption-uppercase\";\n\nexport interface IcMenuOption {\n  value?: string;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n  recommended?: boolean;\n  children?: IcMenuOption[];\n}\n\nexport type IcSearchMatchPositions = \"start\" | \"anywhere\";\n\nexport type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;\n\nexport type IcRequiredPropsTypes =\n  | string\n  | boolean\n  | number\n  | HTMLElement\n  | IcMenuOption[];\n\nexport type IcPropObject = { prop: IcRequiredPropsTypes; propName: string };\n\nexport type IcRelatedTarget = EventTarget | undefined;\n\nexport type IcOrientation = \"horizontal\" | \"vertical\";\n\nexport interface IcValueEventDetail {\n  value: string;\n}\nexport interface IcBlurEventDetail {\n  relatedTarget: IcRelatedTarget;\n}\n"]}
+{"version":3,"sources":["src/utils/types.ts"],"names":["IcInformationStatus","IcThemeForegroundEnum"],"mappings":"IAwBYA,GAAZ,SAAYA,GACVA,EAAA,WAAA,UACAA,EAAA,SAAA,QACAA,EAAA,WAAA,WAHF,CAAYA,IAAAA,EAAmB,SAsEnBC,GAAZ,SAAYA,GACVA,EAAA,WAAA,UACAA,EAAA,QAAA,OACAA,EAAA,SAAA,SAHF,CAAYA,IAAAA,EAAqB","sourcesContent":["export type IcFocusableComponents =\n  | HTMLIcBreadcrumbElement\n  | HTMLIcButtonElement\n  | HTMLIcCardElement\n  | HTMLIcCheckboxElement\n  | HTMLIcChipElement\n  | HTMLIcLinkElement\n  | HTMLIcNavigationButtonElement\n  | HTMLIcNavigationGroupElement\n  | HTMLIcNavigationItemElement\n  | HTMLIcRadioOptionElement\n  | HTMLIcSearchBarElement\n  | HTMLIcSelectElement\n  | HTMLIcSwitchElement\n  | HTMLIcTabElement\n  | HTMLIcTextFieldElement;\n\nexport type IcStatusVariants =\n  | \"neutral\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport enum IcInformationStatus {\n  Warning = \"warning\",\n  Error = \"error\",\n  Success = \"success\",\n}\n\nexport type IcInformationStatusOrEmpty = \"warning\" | \"error\" | \"success\" | \"\";\n\nexport type IcNavType = \"side\" | \"top\" | \"page-header\";\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type IcAutocompleteTypes =\n  | \"on\"\n  | \"off\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level4\"\n  | \"address-level3\"\n  | \"address-level2\"\n  | \"address-level1\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tel-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\nexport type IcAlignment = \"left\" | \"center\" | \"full-width\";\n\nexport enum IcThemeForegroundEnum {\n  Default = \"default\",\n  Dark = \"dark\",\n  Light = \"light\",\n}\n\nexport type IcThemeForeground = \"default\" | \"dark\" | \"light\";\n\nexport type IcThemeForegroundNoDefault = \"dark\" | \"light\";\n\nexport type IcTheme = {\n  mode: IcThemeForeground;\n  color: IcColorRGB;\n};\n\nexport type IcAdditionalFieldTypes = \"static\" | \"dynamic\";\n\nexport type IcColorRGB = {\n  r: number;\n  g: number;\n  b: number;\n};\n\nexport type IcColorRGBA = IcColorRGB & {\n  a: number;\n};\n\nexport type IcActivationTypes = \"automatic\" | \"manual\";\n\nexport type IcAutocorrectStates = \"on\" | \"off\";\n\nexport type IcNavParentDetails = {\n  navType: IcNavType | \"\";\n  parent: HTMLElement;\n};\n\nexport type IcTypographyVariants =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"subtitle-large\"\n  | \"subtitle-small\"\n  | \"body\"\n  | \"label\"\n  | \"label-uppercase\"\n  | \"caption\"\n  | \"caption-uppercase\"\n  | \"code-large\"\n  | \"code-small\"\n  | \"code-extra-small\";\n\nexport interface IcMenuOption {\n  value?: string;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n  recommended?: boolean;\n  children?: IcMenuOption[];\n  loading?: boolean;\n  timedOut?: boolean;\n}\n\nexport type IcSearchMatchPositions = \"start\" | \"anywhere\";\n\nexport type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;\n\nexport type IcRequiredPropsTypes =\n  | string\n  | boolean\n  | number\n  | HTMLElement\n  | IcMenuOption[];\n\nexport type IcPropObject = { prop: IcRequiredPropsTypes; propName: string };\n\nexport type IcRelatedTarget = EventTarget | undefined;\n\nexport type IcOrientation = \"horizontal\" | \"vertical\";\n\nexport interface IcValueEventDetail {\n  value: string;\n  keyPressed?: string;\n}\nexport interface IcBlurEventDetail {\n  relatedTarget: IcRelatedTarget;\n}\n"]}

package/dist/core/p-80eff050.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as o,g as i}from"./p-589f6dd3.js";const a='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}a{text-align:center}.item-container{display:flex;justify-content:center;align-items:center;width:calc(var(--ic-space-xl) + var(--ic-space-sm));height:var(--ic-space-xl);margin:var(--ic-space-xxs) var(--ic-space-xxxs);cursor:pointer;text-decoration:none}button{background:none;border:none;outline:inherit;position:relative}.ellipsis{pointer-events:none;color:var(--ic-color-secondary-text)}.item-container:focus{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.page{color:var(--ic-action-default)}.simple-current{width:calc(var(--ic-space-xxl) + var(--ic-space-md));height:var(--ic-space-lg);cursor:default}.item-container.page:hover:not(.selected):not(:focus){border-radius:var(--ic-border-radius);background-color:var(--ic-action-default-bg-hover)}.item-container.page:active:not(.selected):not(:focus){background-color:var(--ic-action-default-bg-active)}.selected{pointer-events:none;outline:none}.selected::after{content:"";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-default)}.page-selected{color:var(--ic-color-primary-text)}.item-container.page.light:hover:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-hover)}.item-container.page.light:active:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-active)}ic-typography.light{color:var(--ic-color-white-text)}.selected.light::after{content:"";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-light)}.item-container.page.dark:hover:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-hover)}.item-container.page.dark:active:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-active)}ic-typography.dark{color:var(--ic-color-primary-text)}.selected.dark::after{content:"";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-dark)}.disabled{color:var(--ic-architectural-200);pointer-events:none;cursor:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (forced-colors: active){.selected::after{background-color:Highlight}.selected.light::after{background-color:Highlight}.selected.dark::after{background-color:Highlight}}';const n=class{constructor(o){e(this,o);this.paginationItemClick=t(this,"paginationItemClick",7);this.handleClick=()=>{this.paginationItemClick.emit({page:this.page})};this.page=undefined;this.selected=false;this.type=undefined;this.disabled=false;this.appearance=undefined;this.label="Page ";this.ariaOverride=false;this.pages=undefined}render(){const{page:e,selected:t,type:i,disabled:a,appearance:n,label:r,ariaOverride:c,pages:s}=this;return o("a",null,i==="ellipsis"?o("div",{class:{["item-container"]:true,["ellipsis"]:true,["disabled"]:a}},o("ic-typography",{class:{[`${n}`]:true},variant:"label"},"...")):i==="page"?o("button",{disabled:a,onClick:this.handleClick,tabindex:t?"-1":"0",role:"button","aria-current":t&&"Current page","aria-label":t?`${r}: ${e}`:`Go to page ${e}`,class:{["selected"]:!a&&t,["disabled"]:a,["item-container"]:true,[`${n}`]:true,["page"]:i==="page"}},o("ic-typography",{variant:"label",class:{["page-selected"]:t,["disabled"]:a,[`${n}`]:true}},e)):o("ic-typography",{"aria-live":"polite","aria-label":c?`Page ${e} of ${s}`:`${r} ${e}`,class:`simple-current ${n}`,variant:"label"},r," ",e))}get el(){return i(this)}};n.style=a;export{n as ic_pagination_item};
+//# sourceMappingURL=p-80eff050.entry.js.map

package/dist/core/p-80eff050.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-pagination-item/ic-pagination-item.css?tag=ic-pagination-item&encapsulation=shadow","src/components/ic-pagination-item/ic-pagination-item.tsx"],"names":["icPaginationItemCss","PaginationItem","this","handleClick","paginationItemClick","emit","page","[object Object]","selected","type","disabled","appearance","label","ariaOverride","pages","h","class","variant","onClick","tabindex","role","aria-current","aria-label","aria-live"],"mappings":"yDAAA,MAAMA,EAAsB,2nJCgBfC,EAAc,wFAyCjBC,KAAAC,YAAc,KACpBD,KAAKE,oBAAoBC,KAAK,CAAEC,KAAMJ,KAAKI,0CAhCjB,wCAQA,2CAQJ,0BAIQ,2BAehCC,SACE,MAAMD,KACJA,EAAIE,SACJA,EAAQC,KACRA,EAAIC,SACJA,EAAQC,WACRA,EAAUC,MACVA,EAAKC,aACLA,EAAYC,MACZA,GACEZ,KAEJ,OACEa,EAAA,IAAA,KACGN,IAAS,WACRM,EAAA,MAAA,CACEC,MAAO,CACLT,CAAC,kBAAmB,KACpBA,CAAC,YAAa,KACdA,CAAC,YAAaG,IAGhBK,EAAA,gBAAA,CACEC,MAAO,CACLT,CAAC,GAAGI,KAAe,MAErBM,QAAQ,SAAO,QAKjBR,IAAS,OACXM,EAAA,SAAA,CACEL,SAAUA,EACVQ,QAAShB,KAAKC,YACdgB,SAAUX,EAAW,KAAO,IAC5BY,KAAK,SAAQC,eACCb,GAAY,eAAcc,aAC5Bd,EAAW,GAAGI,MAAUN,IAAS,cAAcA,IAC3DU,MAAO,CACLT,CAAC,aAAcG,GAAYF,EAC3BD,CAAC,YAAaG,EACdH,CAAC,kBAAmB,KACpBA,CAAC,GAAGI,KAAe,KACnBJ,CAAC,QAASE,IAAS,SAGrBM,EAAA,gBAAA,CACEE,QAAQ,QACRD,MAAO,CACLT,CAAC,iBAAkBC,EACnBD,CAAC,YAAaG,EACdH,CAAC,GAAGI,KAAe,OAGpBL,IAILS,EAAA,gBAAA,CAAAQ,YACY,SAAQD,aAEhBT,EAAe,QAAQP,QAAWQ,IAAU,GAAGF,KAASN,IAE1DU,MAAO,kBAAkBL,IACzBM,QAAQ,SAEPL,EAAK,IAAGN","sourcesContent":["@import \"../../global/normalize.css\";\n\na {\n  text-align: center;\n}\n\n.item-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: calc(var(--ic-space-xl) + var(--ic-space-sm));\n  height: var(--ic-space-xl);\n  margin: var(--ic-space-xxs) var(--ic-space-xxxs);\n  cursor: pointer;\n  text-decoration: none;\n}\n\nbutton {\n  background: none;\n  border: none;\n  outline: inherit;\n  position: relative;\n}\n\n.ellipsis {\n  pointer-events: none;\n  color: var(--ic-color-secondary-text);\n}\n\n.item-container:focus {\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.page {\n  color: var(--ic-action-default);\n}\n\n.simple-current {\n  width: calc(var(--ic-space-xxl) + var(--ic-space-md));\n  height: var(--ic-space-lg);\n  cursor: default;\n}\n\n/** DEFAULT STATES **/\n.item-container.page:hover:not(.selected):not(:focus) {\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-action-default-bg-hover);\n}\n\n.item-container.page:active:not(.selected):not(:focus) {\n  background-color: var(--ic-action-default-bg-active);\n}\n\n.selected {\n  pointer-events: none;\n  outline: none;\n}\n\n.selected::after {\n  content: \"\";\n  height: var(--ic-space-xxs);\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: var(--ic-action-default);\n}\n\n.page-selected {\n  color: var(--ic-color-primary-text);\n}\n\n/** LIGHT STATES **/\n.item-container.page.light:hover:not(.selected):not(:focus) {\n  background-color: var(--ic-action-light-bg-hover);\n}\n\n.item-container.page.light:active:not(.selected):not(:focus) {\n  background-color: var(--ic-action-light-bg-active);\n}\n\nic-typography.light {\n  color: var(--ic-color-white-text);\n}\n\n.selected.light::after {\n  content: \"\";\n  height: var(--ic-space-xxs);\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: var(--ic-action-light);\n}\n\n/** DARK STATES **/\n.item-container.page.dark:hover:not(.selected):not(:focus) {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n.item-container.page.dark:active:not(.selected):not(:focus) {\n  background-color: var(--ic-action-dark-bg-active);\n}\n\nic-typography.dark {\n  color: var(--ic-color-primary-text);\n}\n\n.selected.dark::after {\n  content: \"\";\n  height: var(--ic-space-xxs);\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: var(--ic-action-dark);\n}\n\n.disabled {\n  color: var(--ic-architectural-200);\n  pointer-events: none;\n  cursor: none;\n  user-select: none;\n}\n\n@media (forced-colors: active) {\n  .selected::after {\n    background-color: Highlight;\n  }\n\n  .selected.light::after {\n    background-color: Highlight;\n  }\n\n  .selected.dark::after {\n    background-color: Highlight;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { IcPaginationItemType } from \"./ic-pagination-item.types\";\nimport { IcThemeForeground } from \"../../interface\";\n\n@Component({\n  tag: \"ic-pagination-item\",\n  styleUrl: \"ic-pagination-item.css\",\n  shadow: true,\n})\nexport class PaginationItem {\n  @Element() el: HTMLIcPaginationItemElement;\n\n  /**\n   * The current page number.\n   */\n  @Prop() page: number | null;\n  /**\n   * If `true`, the pagination item will be selected.\n   */\n  @Prop() selected: boolean = false;\n  /**\n   * The type of pagination item - 'page' or 'ellipsis'.\n   */\n  @Prop() type: IcPaginationItemType;\n  /**\n   * If `true`, the pagination item will be disabled.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * The appearance of the pagination, e.g. dark, light or the default.\n   */\n  @Prop() appearance: IcThemeForeground;\n  /**\n   * The label for the pagination item (applicable when simple pagination is being used).\n   */\n  @Prop() label: string = \"Page \";\n  /**\n   * If true the aria-label will be set to `Page X of Y`, where X is the current page and Y is the page count.\n   */\n  @Prop() ariaOverride: boolean = false;\n  /**\n   * The total number of pages.\n   */\n  @Prop() pages: number;\n\n  /**\n   * @internal - Emitted when a pagination item is clicked.\n   */\n  @Event() paginationItemClick: EventEmitter<{ page: number }>;\n\n  private handleClick = () => {\n    this.paginationItemClick.emit({ page: this.page });\n  };\n\n  render() {\n    const {\n      page,\n      selected,\n      type,\n      disabled,\n      appearance,\n      label,\n      ariaOverride,\n      pages,\n    } = this;\n\n    return (\n      <a>\n        {type === \"ellipsis\" ? (\n          <div\n            class={{\n              [\"item-container\"]: true,\n              [\"ellipsis\"]: true,\n              [\"disabled\"]: disabled,\n            }}\n          >\n            <ic-typography\n              class={{\n                [`${appearance}`]: true,\n              }}\n              variant=\"label\"\n            >\n              ...\n            </ic-typography>\n          </div>\n        ) : type === \"page\" ? (\n          <button\n            disabled={disabled}\n            onClick={this.handleClick}\n            tabindex={selected ? \"-1\" : \"0\"}\n            role=\"button\"\n            aria-current={selected && \"Current page\"}\n            aria-label={selected ? `${label}: ${page}` : `Go to page ${page}`}\n            class={{\n              [\"selected\"]: !disabled && selected,\n              [\"disabled\"]: disabled,\n              [\"item-container\"]: true,\n              [`${appearance}`]: true,\n              [\"page\"]: type === \"page\",\n            }}\n          >\n            <ic-typography\n              variant=\"label\"\n              class={{\n                [\"page-selected\"]: selected,\n                [\"disabled\"]: disabled,\n                [`${appearance}`]: true,\n              }}\n            >\n              {page}\n            </ic-typography>\n          </button>\n        ) : (\n          <ic-typography\n            aria-live=\"polite\"\n            aria-label={\n              ariaOverride ? `Page ${page} of ${pages}` : `${label} ${page}`\n            }\n            class={`simple-current ${appearance}`}\n            variant=\"label\"\n          >\n            {label} {page}\n          </ic-typography>\n        )}\n      </a>\n    );\n  }\n}\n"]}

package/dist/core/p-864b46bf.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,H as o,g as a}from"./p-589f6dd3.js";import{b as r,m as n,n as s,a as c}from"./p-3dea2867.js";import{I as l}from"./p-6f57b13c.js";import{c as d}from"./p-ec26fc38.js";const h='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-active);--button-default-background-hover:var(--ic-action-default-bg-hover);--button-default-background-active:var(--ic-action-default-bg-active);--icon-width:100%;--icon-height:100%}.button{font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:0.875rem;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:var(--min-width, 6.25rem);display:inline-flex;gap:var(--ic-space-xs);flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}.button:hover{cursor:pointer}.button:focus,:host .button:focus{box-shadow:var(--ic-border-focus)}:host(.light) .button:focus{box-shadow:var(--ic-border-focus)}.button:focus-visible{outline:var(--ic-hc-focus-outline)}:host(.dark) .button{--button-default:var(--ic-action-dark);--button-default-hover:var(--ic-action-dark);--button-default-active:var(--ic-action-dark);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-active)}:host(.light) .button{--button-default:var(--ic-action-light);--button-default-hover:var(--ic-action-light);--button-default-active:var(--ic-action-light);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-active)}:host(.button-variant-primary.light) .button{color:var(--ic-color-primary-text);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}:host(.button-variant-primary.dark) .button{--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}:host(.disabled),:host(.disabled) .button,:host(.loading),:host(.loading) .button{pointer-events:none}:host(.button-variant-primary) .button{color:var(--ic-architectural-white);background-color:var(--button-default)}:host(.button-variant-primary) .button:hover:not(:focus){background-color:var(--button-default-hover)}:host(.button-variant-primary) .button:active:not(:focus),:host(.button-variant-primary.loading) .button{background-color:var(--button-default-active)}:host(.button-variant-primary.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-variant-primary.light.disabled) .button{background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.button-variant-secondary) .button{border:var(--ic-space-1px) solid var(--button-default);color:var(--button-default)}:host(.button-variant-secondary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.button-variant-secondary) .button:active:not(:focus){border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.disabled) .button,:host(.button-variant-secondary.disabled) .button:hover,:host(.button-variant-secondary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-secondary.light.disabled) .button,:host(.button-variant-secondary.light.disabled) .button:hover,:host(.button-variant-secondary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-tertiary) .button{color:var(--button-default)}:host(.button-variant-tertiary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-tertiary) .button:active:not(:focus),:host(.button-variant-tertiary.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-tertiary.disabled) .button,:host(.button-variant-tertiary.disabled) .button:hover,:host(.button-variant-tertiary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-tertiary.light.disabled) .button,:host(.button-variant-tertiary.light.disabled) .button:hover,:host(.button-variant-tertiary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-icon) .button{color:var(--button-default);min-width:0}:host(.button-variant-icon) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button:active:not(:focus),:host(.button-variant-icon.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-icon.disabled) .button,:host(.button-variant-icon.disabled) .button:hover,:host(.button-variant-icon.disabled) .button:active{color:var(--ic-architectural-300);background:none}:host(.button-variant-destructive) .button{color:var(--ic-architectural-white);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.button-variant-destructive) .button:hover:not(:focus){background-color:var(--ic-action-destructive-hover)}:host(.button-variant-destructive) .button:active:not(:focus),:host(.button-variant-destructive.loading) .button{background-color:var(--ic-action-destructive-active)}:host(.button-variant-destructive.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-size-default) .button{height:2.5rem;padding:var(--ic-space-xs) var(--ic-space-md)}:host(.button-size-small) .button{height:var(--ic-space-xl);padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.button-size-large) .button{height:var(--ic-space-xxl);padding:var(--ic-space-sm) var(--ic-space-md)}:host(.button-size-default.button-variant-icon) .button{height:var(--ic-space-xl);width:var(--ic-space-xl);padding:0.375rem}:host(.button-size-small.button-variant-icon) .button{height:var(--ic-space-lg);width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.button-size-large.button-variant-icon) .button{height:2.5rem;width:2.5rem;padding:var(--ic-space-xs)}:host(.full-width),:host(.full-width) .button{width:100%}div.loading-container{position:relative;align-items:center;width:100%}ic-loading-indicator{--outer-color:transparent}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center}::slotted(*){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:1.25rem;--icon-width:1.25rem}:host(.search-submit-button-small) ::slotted(svg){--icon-height:1rem;--icon-width:1rem}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.menu-close-button) ::slotted(svg){--icon-height:0.875rem;--icon-width:0.875rem}:host(.popout-menu-button) .button{justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}@media (forced-colors: active){.button{border:0.125rem solid transparent}}';var u=undefined&&undefined.__rest||function(t,i){var e={};for(var o in t)if(Object.prototype.hasOwnProperty.call(t,o)&&i.indexOf(o)<0)e[o]=t[o];if(t!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,o=Object.getOwnPropertySymbols(t);a<o.length;a++){if(i.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(t,o[a]))e[o[a]]=t[o[a]]}return e};let b=0;const p=class{constructor(e){t(this,e);this.icFocus=i(this,"icFocus",7);this.icBlur=i(this,"icBlur",7);this.inheritedAttributes={};this.hasTooltip=false;this.buttonIdNum=b++;this.handleClick=()=>{if((this.el.type==="submit"||this.el.type==="reset")&&!!this.el.closest("FORM")){this.handleHiddenFormButtonClick(this.el.closest("FORM"))}};this.onFocus=()=>{this.icFocus.emit()};this.onBlur=()=>{this.icBlur.emit()};this.disabled=false;this.loading=false;this.type="button";this.href=undefined;this.target=undefined;this.rel=undefined;this.download=false;this.hreflang=undefined;this.referrerpolicy=undefined;this.variant="primary";this.size="default";this.fullWidth=false;this.disableTooltip=false;this.tooltipPlacement="bottom";this.appearance="default";this.form=undefined;this.formaction=undefined;this.formenctype=undefined;this.formmethod=undefined;this.formnovalidate=undefined;this.formtarget=undefined}handleHostClick(t){if(this.disabled||this.loading){t.stopImmediatePropagation()}}themeChangeHandler(t){const i=t.detail;this.updateTheme(i.mode)}async setFocus(){if(this.buttonEl){this.buttonEl.focus()}}async updateAriaLabel(t){if(this.hasTooltip){this.tooltipEl.label=t;this.buttonEl.setAttribute("aria-label",t)}}hasIconSlot(){const t=this.el.querySelector(`[slot="icon"]`);if(t!=null){return true}return false}handleHiddenFormButtonClick(t){const i=document.createElement("button");i.setAttribute("type",this.el.type);i.style.display="none";t.appendChild(i);i.click();i.remove()}updateTheme(t=null){const i=r(this.el,t||null);if(i!==l.Default){this.appearance=i}}componentWillLoad(){this.inheritedAttributes=n(this.el,[...s,"aria-expanded","title"]);this.el.setAttribute("exportparts","button");const t=this.el.id;this.id=t!==undefined?t:null;this.hasTooltip=this.variant==="icon"}componentDidLoad(){this.updateTheme()}render(){const t=this.href&&"a"||"button";const i=this.inheritedAttributes,{title:a,"aria-label":r}=i,n=u(i,["title","aria-label"]);const s=t==="button"?{type:this.type,disabled:this.disabled,form:this.form,formaction:this.formaction,formenctype:this.formenctype,formmethod:this.formmethod,formnovalidate:this.formnovalidate,formtarget:this.formtarget}:{download:this.download!==false?this.download:null,href:this.href,rel:this.rel,target:this.target,referrerpolicy:this.referrerpolicy,hreflang:this.hreflang};const c=a&&a;const d=this.hasTooltip?{}:{title:c};let h="";if(this.hasTooltip){if(c!==undefined){h=c}else if(r!==null){h=r}}let b=null;let p=null;if(this.hasTooltip){p=this.id!==null?`ic-button-with-tooltip-${this.id}`:`ic-button-with-tooltip-${this.buttonIdNum}`;b=`ic-tooltip-${p}`}const f=()=>e(t,Object.assign({class:"button","aria-disabled":this.loading||this.disabled?"true":null,"aria-label":this.loading?"Loading":r},s,n,d,{onFocus:this.onFocus,onBlur:this.onBlur,ref:t=>this.buttonEl=t,id:p,"aria-describedby":b,part:"button"}),this.hasIconSlot()&&!this.loading&&e("div",{class:"icon-container"},e("slot",{name:"icon"})),this.loading?e("div",{class:"loading-container"},e("ic-loading-indicator",{type:"linear",appearance:this.variant==="primary"||this.variant==="destructive"||this.appearance===l.Dark||this.appearance===l.Light?"light":"dark"})):e("slot",null));return e(o,{class:{["disabled"]:this.disabled&&!this.loading,[`button-variant-${this.variant}`]:true,[`button-size-${this.size}`]:true,["loading"]:this.loading,["dark"]:this.appearance===l.Dark,["light"]:this.appearance===l.Light,["full-width"]:this.fullWidth},onClick:this.handleClick},this.hasTooltip&&e("ic-tooltip",{class:{["tooltip-disabled"]:this.disableTooltip},ref:t=>this.tooltipEl=t,label:h,target:p,placement:this.tooltipPlacement},e(f,null)),!this.hasTooltip&&e(f,null))}static get delegatesFocus(){return true}get el(){return a(this)}};p.style=h;const f='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--linear-border-radius:0.25rem;--inner-color:var(--ic-action-default);--outer-color:var(--ic-architectural-100);--label-color:var(--ic-color-primary-text);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.light){--inner-color:var(--ic-architectural-white);--outer-color:var(--ic-architectural-800);--label-color:var(--ic-architectural-white)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size="small"]){--circular-diameter:2.5rem;--linear-line-height:var(--ic-space-xxs)}:host([size="default"]){--circular-diameter:5rem}:host([size="large"]){--circular-diameter:7.5rem}:host([size="icon"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:1.25rem}:host(.label){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{white-space:nowrap;color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host(.full-width){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--outer-color);stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}:host(.inner-label) .ic-loading-circular-inner{display:grid}:host(.inner-label) .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;color:var(--ic-theme-primary)}:host(.not-required.compact-step-progress-indicator) .inner-text{color:var(--ic-color-tertiary-text)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-hc-border)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}';const v=class{constructor(i){t(this,i);this.updateCircularProgressMeter=()=>{if(!this.indeterminate){this.circularMeter.style.setProperty("--progress-value",String(this.progress))}};this.getLabel=(t,i)=>new Promise((()=>{this.interval=setInterval((()=>{if(t<this.labelList.length-1){t++}else{t=0}i(this.labelList[t])}),this.labelDuration)}));this.getLabelVariant=()=>{var t;let i="h4";const e=(t=this.outerElement)===null||t===void 0?void 0:t.offsetWidth;if(this.size==="small"||this.type==="circular"&&e<60){i="label"}else if(this.size==="large"||this.type==="circular"&&e>=120){i="h2"}return i};this.setCircleLineWidth=()=>{const{offsetWidth:t}=this.outerElement;const i=this.host.classList.contains("compact-step-progress-indicator")?40:0;const e=this.host.classList.contains("toast-dismiss-timer")?20:0;if(t||i||e){this.circularLineWidth=(i||e||t)*.1;this.circularDiameter=i||e||t;this.outerElement.style.setProperty("--circular-line-width",`${this.circularLineWidth}px`)}};this.setLinearDeterminateWidth=()=>{if(!this.innerElement)return;const t=Math.min(this.max,Math.max(this.min,this.progress));const i=(t-this.min)/(this.max-this.min);this.showSecond=i>.5;if(this.showSecond){this.innerElement.classList.remove("clip")}else{this.innerElement.classList.add("clip")}this.innerElement.style.setProperty("--linear-width",`${i*100}%`)};this.calcOuterClass=()=>{let t=`ic-loading-${this.type}-outer`;t+=this.indeterminate?" indeterminate":" determinate";return t};this.updateLabel=()=>{if(this.label!==undefined){this.labelList=this.label.split("/");const t=0;this.indicatorLabel=this.labelList[t];if(this.labelList.length>1){this.getLabel(t,(t=>{this.indicatorLabel=t}))}}};this.setCircleXY=()=>{if(this.circularDiameter>0){const t=this.circularDiameter/2;const i=t;const e=t;const o=t-this.circularLineWidth/2;this.setDashSteps(o);return{x:i,y:e,r:o}}return{x:0,y:0,r:0}};this.setDashSteps=t=>{const i=2*Math.PI*t;const e=Math.min(Math.max(this.progress,this.min),this.max);const o=-1-(e-this.min)/(this.max-this.min);this.circularMeter.style.setProperty("--stroke-dasharray",`${i}px`);if(!this.indeterminate){this.circularMeter.style.setProperty("--circular-steps-max",String(this.max));this.circularMeter.style.setProperty("--stroke-dashoffset",`${o*i}px`)}};this.progress=undefined;this.min=0;this.max=100;this.label=undefined;this.description="Loading";this.innerLabel=undefined;this.labelDuration=8e3;this.size="default";this.type="circular";this.fullWidth=false;this.appearance="dark";this.indicatorLabel=undefined;this.indeterminate=undefined;this.showSecond=false;this.circularLineWidth=undefined;this.circularDiameter=undefined}watchPropHandler(){this.updateLabel()}watchProgressHandler(){if(this.type==="circular"){this.updateCircularProgressMeter()}}componentWillLoad(){this.indeterminate=this.progress===undefined;this.updateLabel()}componentDidLoad(){if(this.type==="circular"){this.setCircleLineWidth();this.circularMeter=this.host.shadowRoot.querySelector(".ic-loading-circular-svg circle:nth-child(2)");this.updateCircularProgressMeter()}if(Number(this.progress)>=0&&this.type==="linear"){this.setLinearDeterminateWidth()}}componentWillUpdate(){this.indeterminate=this.progress===undefined}componentDidUpdate(){if(Number(this.progress)>=0&&this.type==="linear"){this.setLinearDeterminateWidth()}}disconnectedCallback(){clearInterval(this.interval)}render(){const{appearance:t,label:i,description:a,size:r,fullWidth:n,innerLabel:s}=this;const{x:c,y:d,r:h}=this.setCircleXY();return e(o,{class:{["light"]:t===l.Light,["label"]:!!i,["full-width"]:n,["inner-label"]:!!s}},e("div",{class:"ic-loading-container"},e("div",{ref:t=>this.outerElement=t,class:this.calcOuterClass(),role:"progressbar","aria-labelledby":this.label&&this.size!=="icon"&&"ic-loading-label","aria-label":a,"aria-valuenow":this.progress,"aria-valuemin":this.min,"aria-valuemax":this.max},e("div",{ref:t=>this.innerElement=t,class:`ic-loading-${this.type}-inner`},this.innerLabel&&this.innerLabel!==undefined&&this.size==="small"&&e("ic-typography",{variant:"subtitle-small",class:"inner-text"},this.innerLabel),this.type==="circular"&&e("svg",{class:"ic-loading-circular-svg",viewBox:`0 0 ${this.circularDiameter||0} ${this.circularDiameter||0}`},e("circle",{cx:`${c}`,cy:`${d}`,r:`${h}`}),e("circle",{cx:`${c}`,cy:`${d}`,r:`${h}`})))),i&&r!=="icon"&&e("ic-typography",{id:"ic-loading-label",class:"ic-loading-label",role:"status",variant:this.getLabelVariant()},e("p",null,this.indicatorLabel))))}get host(){return a(this)}static get watchers(){return{label:["watchPropHandler"],progress:["watchProgressHandler"]}}};v.style=f;const m='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-tooltip) .ic-tooltip-container{background-color:var(--ic-architectural-800);color:#ffff;text-align:center;padding:var(--ic-space-xxxs) 0.625rem;border-radius:var(--ic-border-radius);position:absolute;max-width:20rem;display:none;z-index:var(--ic-z-index-tooltip);box-shadow:var(--ic-elevation-overlay)}:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed)) .ic-tooltip-container,:host(.tooltip-disabled) .ic-tooltip-container{display:none !important}:host(.tooltip-long-label-navigation-item-side-nav-expanded) .ic-tooltip-container[data-show]{display:block !important}:host(.ic-tooltip) .ic-tooltip-arrow,:host(.ic-tooltip) .ic-tooltip-arrow::before{position:absolute;background:inherit;width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-tooltip) .ic-tooltip-arrow{visibility:hidden}:host(.ic-tooltip) .ic-tooltip-arrow::before{visibility:visible;content:""}:host(.ic-tooltip) .ic-tooltip-container[data-show]{display:block}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="top"]>.ic-tooltip-arrow{bottom:calc(-1 * var(--ic-space-md))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="top"]>.ic-tooltip-arrow::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;height:var(--ic-space-xxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="bottom"]>.ic-tooltip-arrow{top:calc(-1 * var(--ic-space-xxs))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="bottom"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;height:var(--ic-space-xxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="left"]>.ic-tooltip-arrow{right:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="left"]>.ic-tooltip-arrow::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="right"]>.ic-tooltip-arrow{left:-0.875rem}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="right"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius)}@media (forced-colors: active){:host(.ic-tooltip) .ic-tooltip-container{border:var(--ic-hc-border)}}';const g=class{constructor(i){t(this,i);this.mouseOverTool=false;this.showEvents=this.disableHover?["click"]:["mouseenter","focusin"];this.instantHideEvents=["focusout"];this.delayedHideEvents=["mouseleave"];this.persistTooltip=false;this.show=t=>{this.toolTip.setAttribute("data-show","");t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:true}]})));t.update()};this.hide=t=>{this.toolTip.removeAttribute("data-show");t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:false}]})));this.persistTooltip=false};this.checkCloseTooltip=t=>{setTimeout((()=>{if(!this.mouseOverTool&&!this.persistTooltip){this.hide(t)}}),100)};this.mouseEnterTooltip=()=>{this.mouseOverTool=true};this.mouseLeaveTooltip=t=>{this.mouseOverTool=false;this.checkCloseTooltip(t)};this.handleKeyDown=t=>{if(t==="Escape"&&!this.persistTooltip){this.hide(this.popperInstance)}};this.manageEventListeners=t=>{const i=t==="add"?"addEventListener":"removeEventListener";this.showEvents.forEach((t=>{this.el[i](t,(()=>this.show(this.popperInstance)));if(this.toolTip!==undefined){this.toolTip[i](t,(()=>this.mouseEnterTooltip()))}}));this.instantHideEvents.forEach((t=>{this.el[i](t,(()=>!this.persistTooltip&&this.hide(this.popperInstance)))}));this.delayedHideEvents.forEach((t=>{this.el[i](t,(()=>this.checkCloseTooltip(this.popperInstance)));if(this.toolTip!==undefined){this.toolTip[i](t,(()=>this.mouseLeaveTooltip(this.popperInstance)))}}));document[i]("keydown",(t=>this.handleKeyDown(t.key)))};this.screenReaderOnlyStyles={position:"absolute",left:"-10000px",top:"auto",width:"1px",height:"1px",overflow:"hidden"};this.target=undefined;this.placement="bottom";this.label=undefined;this.disableHover=false}updateLabel(t){const i=this.el.previousElementSibling;if(i!==null){i.innerText=t}}async displayTooltip(t,i){this.persistTooltip=i;t?this.show(this.popperInstance):this.hide(this.popperInstance)}componentDidLoad(){this.popperInstance=d(this.el,this.toolTip,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,10]}},{name:"arrow",options:{element:this.arrow}}]});this.manageEventListeners("add");c([{prop:this.label,propName:"label"}],"Tooltip");if(this.target!==undefined){const t=document.createElement("span");t.id=`ic-tooltip-${this.target}`;t.innerText=this.label;t.classList.add("ic-tooltip-label");Object.assign(t.style,this.screenReaderOnlyStyles);this.el.insertAdjacentElement("beforebegin",t)}}disconnectedCallback(){this.manageEventListeners("remove")}render(){const{label:t}=this;return e(o,{class:{"ic-tooltip":true}},e("div",{ref:t=>this.toolTip=t,role:"tooltip",class:"ic-tooltip-container"},e("ic-typography",{variant:"caption"},t),e("div",{ref:t=>this.arrow=t,class:"ic-tooltip-arrow","data-popper-arrow":true})),e("slot",null))}get el(){return a(this)}static get watchers(){return{label:["updateLabel"]}}};g.style=m;export{p as ic_button,v as ic_loading_indicator,g as ic_tooltip};
+//# sourceMappingURL=p-864b46bf.entry.js.map

package/dist/core/p-864b46bf.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"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"],"names":["icButtonCss","buttonIds","Button","this","inheritedAttributes","hasTooltip","buttonIdNum","handleClick","el","type","closest","handleHiddenFormButtonClick","onFocus","icFocus","emit","onBlur","icBlur","[object Object]","event","disabled","loading","stopImmediatePropagation","ev","theme","detail","updateTheme","mode","buttonEl","focus","newValue","tooltipEl","label","setAttribute","iconEl","querySelector","form","hiddenFormButton","document","createElement","style","display","appendChild","click","remove","newTheme","foregroundColor","getThemeFromContext","IcThemeForegroundEnum","Default","appearance","inheritAttributes","IC_INHERITED_ARIA","id","undefined","variant","TagType","href","_a","title","aria-label","ariaLabel","restInheritedAttributes","__rest","buttonAttrs","formaction","formenctype","formmethod","formnovalidate","formtarget","download","rel","target","referrerpolicy","hreflang","newTitle","titleAttr","tooltipText","describedBy","buttonId","ButtonContent","h","Object","assign","class","aria-disabled","ref","aria-describedby","part","hasIconSlot","name","Dark","Light","Host","size","fullWidth","onClick","disableTooltip","placement","tooltipPlacement","icLoadingIndicatorCss","LoadingIndicator","updateCircularProgressMeter","indeterminate","circularMeter","setProperty","String","progress","getLabel","labelIndex","setLabel","Promise","interval","setInterval","labelList","length","labelDuration","getLabelVariant","width","outerElement","offsetWidth","setCircleLineWidth","compactStepCircularLineWidth","host","classList","contains","toastDismissTimerCircularLineWidth","circularLineWidth","circularDiameter","setLinearDeterminateWidth","innerElement","Math","min","max","proportion","showSecond","add","calcOuterClass","cls","updateLabel","split","indicatorLabel","setCircleXY","r","x","y","nextRadius","setDashSteps","radius","dashArray","PI","shadowRoot","Number","clearInterval","description","innerLabel","role","aria-labelledby","aria-valuenow","aria-valuemin","aria-valuemax","viewBox","cx","cy","icTooltipCss","Tooltip","mouseOverTool","showEvents","disableHover","instantHideEvents","delayedHideEvents","persistTooltip","show","popper","toolTip","setOptions","options","modifiers","enabled","update","hide","removeAttribute","checkCloseTooltip","setTimeout","mouseEnterTooltip","mouseLeaveTooltip","handleKeyDown","key","popperInstance","manageEventListeners","action","method","forEach","screenReaderOnlyStyles","position","left","top","height","overflow","describedBySpan","previousElementSibling","innerText","createPopper","offset","element","arrow","onComponentRequiredPropUndefined","prop","propName","ariaDescribedBy","insertAdjacentElement","ic-tooltip","data-popper-arrow"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --min-width: Minimum width of the button.\n*/\n\n:host {\n  display: inline-block;\n\n  --button-default: var(--ic-action-default);\n  --button-default-hover: var(--ic-action-default-hover);\n  --button-default-active: var(--ic-action-default-active);\n  --button-default-background-hover: var(--ic-action-default-bg-hover);\n  --button-default-background-active: var(--ic-action-default-bg-active);\n  --icon-width: 100%;\n  --icon-height: 100%;\n}\n\n.button {\n  font-family: var(--ic-font-body-family);\n  text-decoration: none;\n  font-weight: 600;\n  font-size: 0.875rem;\n  transition: var(--ic-easing-transition-fast);\n  border-radius: var(--ic-border-radius);\n  min-width: var(--min-width, 6.25rem);\n  display: inline-flex;\n  gap: var(--ic-space-xs);\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n.button:hover {\n  cursor: pointer;\n}\n\n.button:focus,\n:host .button:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n:host(.light) .button:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.dark) .button {\n  --button-default: var(--ic-action-dark);\n  --button-default-hover: var(--ic-action-dark);\n  --button-default-active: var(--ic-action-dark);\n  --button-default-background-hover: var(--ic-action-dark-bg-hover);\n  --button-default-background-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.light) .button {\n  --button-default: var(--ic-action-light);\n  --button-default-hover: var(--ic-action-light);\n  --button-default-active: var(--ic-action-light);\n  --button-default-background-hover: var(--ic-action-light-bg-hover);\n  --button-default-background-active: var(--ic-action-light-bg-active);\n}\n\n:host(.button-variant-primary.light) .button {\n  color: var(--ic-color-primary-text);\n\n  --button-default-hover: var(--ic-action-light-hover);\n  --button-default-active: var(--ic-action-light-active);\n}\n\n:host(.button-variant-primary.dark) .button {\n  --button-default-hover: var(--ic-action-dark-hover);\n  --button-default-active: var(--ic-action-dark-active);\n}\n\n:host(.disabled),\n:host(.disabled) .button,\n:host(.loading),\n:host(.loading) .button {\n  pointer-events: none;\n}\n\n/* Variants */\n\n/* Primary */\n\n:host(.button-variant-primary) .button {\n  color: var(--ic-architectural-white);\n  background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover:not(:focus) {\n  background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary) .button:active:not(:focus),\n:host(.button-variant-primary.loading) .button {\n  background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary.disabled) .button {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button {\n  background: var(--ic-architectural-600);\n  color: var(--ic-architectural-500);\n}\n\n/* Secondary */\n\n:host(.button-variant-secondary) .button {\n  border: var(--ic-space-1px) solid var(--button-default);\n  color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  border-color: var(--button-default-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-secondary) .button:active:not(:focus) {\n  border-color: var(--button-default-active);\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.loading) .button {\n  border-color: var(--button-default-active);\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) .button:hover,\n:host(.button-variant-secondary.disabled) .button:active {\n  border-color: var(--ic-architectural-300);\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) .button:hover,\n:host(.button-variant-secondary.light.disabled) .button:active {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n  background: none;\n}\n\n/* Tertiary */\n\n:host(.button-variant-tertiary) .button {\n  color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active:not(:focus),\n:host(.button-variant-tertiary.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) .button:hover,\n:host(.button-variant-tertiary.disabled) .button:active {\n  border-color: var(--ic-architectural-300);\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) .button:hover,\n:host(.button-variant-tertiary.light.disabled) .button:active {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n  background: none;\n}\n\n/* Icon */\n\n:host(.button-variant-icon) .button {\n  color: var(--button-default);\n  min-width: 0;\n}\n\n:host(.button-variant-icon) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) .button:hover,\n:host(.button-variant-icon.disabled) .button:active {\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n/* Destructive */\n\n:host(.button-variant-destructive) .button {\n  color: var(--ic-architectural-white);\n  background-color: var(--ic-action-destructive);\n  text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover:not(:focus) {\n  background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active:not(:focus),\n:host(.button-variant-destructive.loading) .button {\n  background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-destructive.disabled) .button {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n/* Sizing */\n\n:host(.button-size-default) .button {\n  height: 2.5rem;\n  padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-small) .button {\n  height: var(--ic-space-xl);\n  padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.button-size-large) .button {\n  height: var(--ic-space-xxl);\n  padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.button-size-default.button-variant-icon) .button {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n  padding: 0.375rem;\n}\n\n:host(.button-size-small.button-variant-icon) .button {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  padding: var(--ic-space-xxs);\n}\n\n:host(.button-size-large.button-variant-icon) .button {\n  height: 2.5rem;\n  width: 2.5rem;\n  padding: var(--ic-space-xs);\n}\n\n/* Width */\n:host(.full-width),\n:host(.full-width) .button {\n  width: 100%;\n}\n\n/* Loading */\n\ndiv.loading-container {\n  position: relative;\n  align-items: center;\n  width: 100%;\n}\n\nic-loading-indicator {\n  --outer-color: transparent;\n}\n\n@keyframes loading-animation {\n  0% {\n    width: 0%;\n    left: 0%;\n  }\n\n  25% {\n    width: 0%;\n    left: 0%;\n    opacity: 0;\n  }\n\n  50% {\n    width: 100%;\n    left: 0%;\n    opacity: 1;\n  }\n\n  75% {\n    width: 0%;\n    left: 100%;\n  }\n\n  100% {\n    width: 0%;\n    left: 100%;\n    opacity: 0;\n  }\n}\n\n/* Icons */\n\ndiv.icon-container {\n  box-sizing: border-box;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n::slotted(*) {\n  width: var(--icon-width) !important;\n  height: var(--icon-height) !important;\n  fill: currentcolor !important;\n  pointer-events: none;\n}\n\n:host(.button-variant-icon) .button .icon-container {\n  margin: 0;\n  pointer-events: none;\n}\n\n/** SEARCH **/\n\n:host(.search-submit-button) ::slotted(svg) {\n  --icon-height: 1.25rem;\n  --icon-width: 1.25rem;\n}\n\n:host(.search-submit-button-small) ::slotted(svg) {\n  --icon-height: 1rem;\n  --icon-width: 1rem;\n}\n\n:host(.clear-button) {\n  margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus {\n  box-shadow: none;\n}\n\n:host(.search-submit-button) .button:focus {\n  box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n  box-shadow: none;\n  background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) {\n  display: flex;\n  align-items: center;\n  margin: 0 var(--ic-space-xxs);\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n  --icon-height: 0.875rem;\n  --icon-width: 0.875rem;\n}\n\n:host(.popout-menu-button) .button {\n  justify-content: left;\n  border-radius: 0;\n  white-space: pre-line;\n  text-align: start;\n}\n\n:host(.popout-menu-button) div.icon-container {\n  flex: none;\n}\n\n:host(.popout-menu-button) .button:focus {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n  display: none;\n}\n\n:host .ic-tooltip {\n  display: block;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .button {\n    border: 0.125rem solid transparent;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  h,\n} from \"@stencil/core\";\n\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcButtonSizes,\n  IcButtonTypes,\n  IcButtonVariants,\n  IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n@Component({\n  tag: \"ic-button\",\n  styleUrl: \"ic-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Button {\n  @Element() el: HTMLIcButtonElement;\n  /**\n   * If `true`, the button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * If `true`, the button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: IcButtonTypes = \"button\";\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The variant of the button to be displayed.\n   */\n  @Prop() variant?: IcButtonVariants = \"primary\";\n  /**\n   * The size of the button to be displayed.\n   */\n  @Prop() size?: IcButtonSizes = \"default\";\n  /**\n   * If `true`, the button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n   */\n  @Prop() disableTooltip?: boolean = false;\n  /**\n   * The position of the tooltip in relation to the button.\n   */\n  @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n  /**\n   * The appearance of the button, e.g. dark, light, or the default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n  /**\n   * The <form> element to associate the button with.\n   */\n  @Prop() form?: string;\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   * The way the submitted form data is encoded.\n   */\n  @Prop() formenctype?: string;\n  /**\n   * The HTTP method used to submit the form.\n   */\n  @Prop() formmethod?: string;\n  /**\n   * If `true`, the form will not be validated when submitted.\n   */\n  @Prop() formnovalidate?: boolean;\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   * Emitted when button has focus\n   */\n  @Event() icFocus!: EventEmitter<void>;\n  /**\n   * Emitted when button has blur\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private buttonEl: HTMLElement;\n  private hasTooltip: boolean = false;\n  private buttonIdNum = buttonIds++;\n  private tooltipEl: HTMLIcTooltipElement;\n  private id: string;\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  /**\n   * @internal Updates tooltip/aria-label text - needed as can't watch an ARIA attribute change.\n   */\n  @Method()\n  async updateAriaLabel(newValue: string): Promise<void> {\n    if (this.hasTooltip) {\n      this.tooltipEl.label = newValue;\n      this.buttonEl.setAttribute(\"aria-label\", newValue);\n    }\n  }\n\n  private hasIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    if (iconEl != null) {\n      return true;\n    }\n    return false;\n  }\n\n  private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n    const hiddenFormButton = document.createElement(\"button\");\n\n    hiddenFormButton.setAttribute(\"type\", this.el.type);\n    hiddenFormButton.style.display = \"none\";\n\n    form.appendChild(hiddenFormButton);\n\n    hiddenFormButton.click();\n    hiddenFormButton.remove();\n  }\n\n  private handleClick = (): void => {\n    if (\n      (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n      !!this.el.closest(\"FORM\")\n    ) {\n      this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n    }\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n      \"title\",\n    ]);\n\n    this.el.setAttribute(\"exportparts\", \"button\");\n\n    const id = this.el.id;\n    this.id = id !== undefined ? id : null;\n    this.hasTooltip = this.variant === \"icon\";\n  }\n\n  componentDidLoad(): void {\n    this.updateTheme();\n  }\n\n  render() {\n    const TagType = (this.href && \"a\") || \"button\";\n    const {\n      title,\n      \"aria-label\": ariaLabel,\n      ...restInheritedAttributes\n    } = this.inheritedAttributes;\n    const buttonAttrs =\n      TagType === \"button\"\n        ? {\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    const newTitle = title && (title as string);\n    const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n    let tooltipText = \"\";\n    if (this.hasTooltip) {\n      if (newTitle !== undefined) {\n        tooltipText = newTitle;\n      } else if (ariaLabel !== null) {\n        tooltipText = ariaLabel as string;\n      }\n    }\n\n    let describedBy: string = null;\n    let buttonId: string = null;\n    if (this.hasTooltip) {\n      buttonId =\n        this.id !== null\n          ? `ic-button-with-tooltip-${this.id}`\n          : `ic-button-with-tooltip-${this.buttonIdNum}`;\n      describedBy = `ic-tooltip-${buttonId}`;\n    }\n\n    const ButtonContent = () => {\n      return (\n        <TagType\n          class=\"button\"\n          aria-disabled={this.loading || this.disabled ? \"true\" : null}\n          aria-label={this.loading ? \"Loading\" : ariaLabel}\n          {...buttonAttrs}\n          {...restInheritedAttributes}\n          {...titleAttr}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n          ref={(el) => (this.buttonEl = el)}\n          id={buttonId}\n          aria-describedby={describedBy}\n          part=\"button\"\n        >\n          {this.hasIconSlot() && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          {this.loading ? (\n            <div class=\"loading-container\">\n              <ic-loading-indicator\n                type=\"linear\"\n                appearance={\n                  this.variant === \"primary\" ||\n                  this.variant === \"destructive\" ||\n                  this.appearance === IcThemeForegroundEnum.Dark ||\n                  this.appearance === IcThemeForegroundEnum.Light\n                    ? \"light\"\n                    : \"dark\"\n                }\n              ></ic-loading-indicator>\n            </div>\n          ) : (\n            <slot />\n          )}\n        </TagType>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled && !this.loading,\n          [`button-variant-${this.variant}`]: true,\n          [`button-size-${this.size}`]: true,\n          [\"loading\"]: this.loading,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n          [\"full-width\"]: this.fullWidth,\n        }}\n        onClick={this.handleClick}\n      >\n        {this.hasTooltip && (\n          <ic-tooltip\n            class={{ [\"tooltip-disabled\"]: this.disableTooltip }}\n            ref={(el) => (this.tooltipEl = el)}\n            label={tooltipText}\n            target={buttonId}\n            placement={this.tooltipPlacement}\n          >\n            <ButtonContent />\n          </ic-tooltip>\n        )}\n\n        {!this.hasTooltip && <ButtonContent />}\n      </Host>\n    );\n  }\n}\n","@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  white-space: nowrap;\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(--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(--ic-theme-primary);\n}\n\n:host(.not-required.compact-step-progress-indicator) .inner-text {\n  color: var(--ic-color-tertiary-text);\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\";\n\n@Component({\n  tag: \"ic-loading-indicator\",\n  styleUrl: \"ic-loading-indicator.css\",\n  shadow: true,\n})\nexport class LoadingIndicator {\n  @Element() host: HTMLIcLoadingIndicatorElement;\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  /**\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 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 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  /**\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   * @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 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   * 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   * The appearance of the loading indicator, e.g. dark or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  @State() indicatorLabel: string;\n  @State() indeterminate: boolean;\n  @State() showSecond: boolean = false;\n  @State() circularLineWidth: number;\n  @State() circularDiameter: number;\n\n  @Watch(\"label\")\n  watchPropHandler(): void {\n    this.updateLabel();\n  }\n\n  @Watch(\"progress\")\n  watchProgressHandler(): void {\n    if (this.type === \"circular\") {\n      this.updateCircularProgressMeter();\n    }\n  }\n\n  private outerElement?: HTMLDivElement;\n  private innerElement?: HTMLDivElement;\n  private labelList: string[];\n  private circularMeter: SVGCircleElement;\n  private interval: ReturnType<typeof setInterval>;\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.host.classList.contains(\n      \"compact-step-progress-indicator\"\n    )\n      ? 40\n      : 0;\n    const toastDismissTimerCircularLineWidth = this.host.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 (this.label !== undefined) {\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  componentWillLoad(): void {\n    this.indeterminate = this.progress === undefined;\n    this.updateLabel();\n  }\n\n  componentDidLoad(): void {\n    if (this.type === \"circular\") {\n      this.setCircleLineWidth();\n      this.circularMeter = this.host.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  disconnectedCallback(): void {\n    clearInterval(this.interval);\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\">\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) .ic-tooltip-container {\n  background-color: var(--ic-architectural-800);\n  color: #ffff;\n  text-align: center;\n  padding: var(--ic-space-xxxs) 0.625rem;\n  border-radius: var(--ic-border-radius);\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  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow {\n  visibility: hidden;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n  visibility: visible;\n  content: \"\";\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  bottom: calc(-1 * var(--ic-space-md));\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  height: var(--ic-space-xxs);\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}\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  height: var(--ic-space-xxs);\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"left\"]\n  > .ic-tooltip-arrow {\n  right: var(--ic-space-xxxs);\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}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"right\"]\n  > .ic-tooltip-arrow {\n  left: -0.875rem;\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}\n\n@media (forced-colors: active) {\n  :host(.ic-tooltip) .ic-tooltip-container {\n    border: var(--ic-hc-border);\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { Instance, 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  @Element() el: HTMLIcTooltipElement;\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 position of the tool-tip in relation to the parent element.\n   */\n  @Prop() placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\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  @Watch(\"label\")\n  updateLabel(newValue: string): void {\n    const describedBySpan = this.el.previousElementSibling as HTMLElement;\n    if (describedBySpan !== null) {\n      describedBySpan.innerText = newValue;\n    }\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.popperInstance) : this.hide(this.popperInstance);\n  }\n\n  private toolTip: HTMLDivElement;\n  private arrow: HTMLDivElement;\n  private mouseOverTool: boolean = false;\n  private showEvents = this.disableHover\n    ? [\"click\"]\n    : [\"mouseenter\", \"focusin\"];\n  private instantHideEvents = [\"focusout\"];\n  private delayedHideEvents = [\"mouseleave\"];\n  private popperInstance: Instance;\n  private persistTooltip = false;\n\n  private show = (popper: Instance) => {\n    this.toolTip.setAttribute(\"data-show\", \"\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: true },\n      ],\n    }));\n    popper.update();\n  };\n\n  private hide = (popper: Instance) => {\n    this.toolTip.removeAttribute(\"data-show\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: false },\n      ],\n    }));\n    this.persistTooltip = false;\n  };\n\n  private checkCloseTooltip = (popper: Instance) => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide(popper);\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = (popper: Instance) => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip(popper);\n  };\n\n  private handleKeyDown = (key: string) => {\n    if (key === \"Escape\" && !this.persistTooltip) {\n      this.hide(this.popperInstance);\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(this.popperInstance));\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, () => this.mouseEnterTooltip());\n      }\n    });\n\n    this.instantHideEvents.forEach((event) => {\n      this.el[method](\n        event,\n        () => !this.persistTooltip && this.hide(this.popperInstance)\n      );\n    });\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, () => this.checkCloseTooltip(this.popperInstance));\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, () =>\n          this.mouseLeaveTooltip(this.popperInstance)\n        );\n      }\n    });\n\n    document[method](\"keydown\", (event: KeyboardEvent) =>\n      this.handleKeyDown(event.key)\n    );\n  };\n\n  private screenReaderOnlyStyles = {\n    position: \"absolute\",\n    left: \"-10000px\",\n    top: \"auto\",\n    width: \"1px\",\n    height: \"1px\",\n    overflow: \"hidden\",\n  };\n\n  componentDidLoad(): void {\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    });\n\n    this.manageEventListeners(\"add\");\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n\n    if (this.target !== undefined) {\n      const ariaDescribedBy = document.createElement(\"span\");\n      ariaDescribedBy.id = `ic-tooltip-${this.target}`;\n      ariaDescribedBy.innerText = this.label;\n      ariaDescribedBy.classList.add(\"ic-tooltip-label\");\n      Object.assign(ariaDescribedBy.style, this.screenReaderOnlyStyles);\n\n      this.el.insertAdjacentElement(\"beforebegin\", ariaDescribedBy);\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n  }\n\n  render() {\n    const { label } = 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        >\n          <ic-typography variant=\"caption\">{label}</ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n            data-popper-arrow\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-8780890e.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as e,h as t,g as a}from"./p-589f6dd3.js";import{a as o,i as s}from"./p-3dea2867.js";import"./p-6f57b13c.js";const r=`<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM15 13.59L13.59 15L10 11.41L6.41 15L5 13.59L8.59 10L5 6.41L6.41 5L10 8.59L13.59 5L15 6.41L11.41 10L15 13.59Z" fill="currentColor"/>\n</svg>\n`;const c='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block}.chip{display:flex;padding:var(--ic-space-xxs);font-size:0.875rem;border-radius:var(--ic-space-md);text-align:left;text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative}.chip.small{padding:var(--ic-space-xxxs);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}.chip.large{padding:var(--ic-space-xs);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}.label{padding:0 var(--ic-space-xs)}.chip.hovered:not(:focus-within){background-color:var(--ic-architectural-300)}.chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}.chip.outline.hovered:not(:focus-within){background-color:var(--ic-action-dark-bg-hover)}ic-tooltip:focus-within{z-index:1}.filled{background-color:var(--ic-architectural-200);color:black;border:none}.filled.disabled{background-color:var(--ic-architectural-100)}.outline{color:var(--ic-architectural-900);border:var(--ic-space-1px) solid var(--ic-architectural-900);padding:calc(var(--ic-space-xxs) - var(--ic-space-1px))}.outline.small{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}.outline.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}.outline.disabled{border:var(--ic-border-disabled);background:none}.chip.disabled ic-typography{color:var(--ic-architectural-200)}.dismiss-icon{border:none;border-radius:50%;padding:0;background:none;cursor:pointer;margin:var(--ic-space-xxxs);height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs))}.dismiss-icon:focus{outline:var(--ic-hc-focus-outline)}.dismiss-icon[disabled]{pointer-events:none;color:var(--ic-architectural-200)}.icon{padding:var(--ic-space-xxxs);box-sizing:border-box}.icon,ic-tooltip{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chip.disabled path,.chip.disabled ::slotted(svg){fill:var(--ic-architectural-200)}@media (forced-colors: active){.chip{border:var(--ic-hc-border)}.filled.small{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}.filled{padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}.filled.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}.chip.disabled{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.chip.disabled ic-typography{color:GrayText}.chip.disabled path,.chip.disabled ::slotted(svg){fill:GrayText}.chip:focus-within{outline:none;border-color:Highlight}}';const n=class{constructor(t){i(this,t);this.dismiss=e(this,"dismiss",7);this.icDismiss=e(this,"icDismiss",7);this.dismissAction=()=>{this.dismiss.emit();this.icDismiss.emit()};this.mouseEnterHandler=()=>{this.isHovered=true};this.mouseLeaveHandler=()=>{this.isHovered=false};this.label=undefined;this.appearance="filled";this.size="default";this.dismissible=false;this.disabled=false;this.visible=true;this.isHovered=false}handleClick(){this.visible=!this.visible}async setFocus(){if(this.el.shadowRoot.querySelector("button")){this.el.shadowRoot.querySelector("button").focus()}}componentDidLoad(){var i;this.dismissible&&((i=this.el.shadowRoot.querySelector("span.ic-tooltip-label"))===null||i===void 0?void 0:i.setAttribute("aria-hidden","true"));o([{prop:this.label,propName:"label"}],"Chip")}render(){const{label:i,appearance:e,size:a,dismissible:o,visible:c,disabled:n,isHovered:l}=this;return c&&t("div",{class:{["chip"]:true,[`${e}`]:true,[`${a}`]:true,["disabled"]:n,["dismissible"]:o,["hovered"]:l}},s(this.el,"icon")&&t("div",{class:"icon"},t("slot",{name:"icon"})),t("ic-typography",{variant:"label","apply-vertical-margins":false,class:"label"},t("span",null,i)),o&&t("ic-tooltip",{label:"Dismiss",target:"dismiss-icon",class:{["tooltip-disabled"]:n}},t("button",{id:"dismiss-icon",class:{["dismiss-icon"]:true},"aria-label":`Dismiss ${i} chip`,disabled:n,tabindex:n?-1:0,onClick:this.dismissAction,onMouseEnter:this.mouseEnterHandler,onMouseLeave:this.mouseLeaveHandler,innerHTML:r})))}static get delegatesFocus(){return true}get el(){return a(this)}};n.style=c;export{n as ic_chip};
+//# sourceMappingURL=p-8780890e.entry.js.map

package/dist/core/p-8780890e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-chip/ic-chip.css?tag=ic-chip&encapsulation=shadow","src/components/ic-chip/ic-chip.tsx"],"names":["icChipCss","Chip","this","dismissAction","dismiss","emit","icDismiss","mouseEnterHandler","isHovered","mouseLeaveHandler","[object Object]","visible","el","shadowRoot","querySelector","focus","dismissible","_a","setAttribute","onComponentRequiredPropUndefined","prop","label","propName","appearance","size","disabled","h","class","isSlotUsed","name","variant","apply-vertical-margins","target","id","aria-label","tabindex","onClick","onMouseEnter","onMouseLeave","innerHTML","dismissIcon"],"mappings":"mcAAA,MAAMA,EAAY,ouJC4BLC,EAAI,qGA2CPC,KAAAC,cAAgB,KACtBD,KAAKE,QAAQC,OACbH,KAAKI,UAAUD,QAGTH,KAAAK,kBAAoB,KAC1BL,KAAKM,UAAY,MAGXN,KAAAO,kBAAoB,KAC1BP,KAAKM,UAAY,4CA3CqB,mBAIX,2BAIG,oBAIH,mBAED,oBAEE,MAG9BE,cACER,KAAKS,SAAWT,KAAKS,QA8BvBD,iBACE,GAAIR,KAAKU,GAAGC,WAAWC,cAAc,UAAW,CAC9CZ,KAAKU,GAAGC,WAAWC,cAAc,UAAUC,SAI/CL,yBACER,KAAKc,eACHC,EAAAf,KAAKU,GAAGC,WACLC,cAAc,4BAAwB,MAAAG,SAAA,OAAA,EAAAA,EACrCC,aAAa,cAAe,SAClCC,EACE,CAAC,CAAEC,KAAMlB,KAAKmB,MAAOC,SAAU,UAC/B,QAIJZ,SACE,MAAMW,MACJA,EAAKE,WACLA,EAAUC,KACVA,EAAIR,YACJA,EAAWL,QACXA,EAAOc,SACPA,EAAQjB,UACRA,GACEN,KAEJ,OACES,GACEe,EAAA,MAAA,CACEC,MAAO,CACLjB,CAAC,QAAS,KACVA,CAAC,GAAGa,KAAe,KACnBb,CAAC,GAAGc,KAAS,KACbd,CAAC,YAAae,EACdf,CAAC,eAAgBM,EACjBN,CAAC,WAAYF,IAGdoB,EAAW1B,KAAKU,GAAI,SACnBc,EAAA,MAAA,CAAKC,MAAM,QACTD,EAAA,OAAA,CAAMG,KAAK,UAGfH,EAAA,gBAAA,CACEI,QAAQ,QAAOC,yBACS,MACxBJ,MAAM,SAEND,EAAA,OAAA,KAAOL,IAERL,GACCU,EAAA,aAAA,CACEL,MAAM,UACNW,OAAO,eACPL,MAAO,CAAEjB,CAAC,oBAAqBe,IAE/BC,EAAA,SAAA,CACEO,GAAG,eACHN,MAAO,CACLjB,CAAC,gBAAiB,MACnBwB,aACW,WAAWb,SACvBI,SAAUA,EACVU,SAAUV,GAAY,EAAI,EAC1BW,QAASlC,KAAKC,cACdkC,aAAcnC,KAAKK,kBACnB+B,aAAcpC,KAAKO,kBACnB8B,UAAWC","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: inline-block;\n}\n\n.chip {\n  display: flex;\n  padding: var(--ic-space-xxs);\n  font-size: 0.875rem;\n  border-radius: var(--ic-space-md);\n  text-align: left;\n  text-decoration: none;\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n}\n\n.chip.small {\n  padding: var(--ic-space-xxxs);\n  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.chip.large {\n  padding: var(--ic-space-xs);\n  border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.label {\n  padding: 0 var(--ic-space-xs);\n}\n\n.chip.hovered:not(:focus-within) {\n  background-color: var(--ic-architectural-300);\n}\n\n.chip:focus-within {\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n.chip.outline.hovered:not(:focus-within) {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\nic-tooltip:focus-within {\n  z-index: 1;\n}\n\n.filled {\n  background-color: var(--ic-architectural-200);\n  color: black;\n  border: none;\n}\n\n.filled.disabled {\n  background-color: var(--ic-architectural-100);\n}\n\n.outline {\n  color: var(--ic-architectural-900);\n  border: var(--ic-space-1px) solid var(--ic-architectural-900);\n  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.outline.small {\n  padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));\n}\n\n.outline.large {\n  padding: calc(var(--ic-space-xs) - var(--ic-space-1px));\n}\n\n.outline.disabled {\n  border: var(--ic-border-disabled);\n  background: none;\n}\n\n.chip.disabled ic-typography {\n  color: var(--ic-architectural-200);\n}\n\n.dismiss-icon {\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  background: none;\n  cursor: pointer;\n  margin: var(--ic-space-xxxs);\n  height: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n  width: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n}\n\n.dismiss-icon:focus {\n  outline: var(--ic-hc-focus-outline);\n}\n\n.dismiss-icon[disabled] {\n  pointer-events: none;\n  color: var(--ic-architectural-200);\n}\n\n.icon {\n  padding: var(--ic-space-xxxs);\n  box-sizing: border-box;\n}\n\n.icon,\nic-tooltip {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n.chip.disabled path,\n.chip.disabled ::slotted(svg) {\n  fill: var(--ic-architectural-200);\n}\n\n@media (forced-colors: active) {\n  .chip {\n    border: var(--ic-hc-border);\n  }\n\n  .filled.small {\n    padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));\n  }\n\n  .filled {\n    padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n  }\n\n  .filled.large {\n    padding: calc(var(--ic-space-xs) - var(--ic-space-1px));\n  }\n\n  .chip.disabled {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .chip.disabled ic-typography {\n    color: GrayText;\n  }\n\n  .chip.disabled path,\n  .chip.disabled ::slotted(svg) {\n    fill: GrayText;\n  }\n\n  .chip:focus-within {\n    outline: none;\n    border-color: Highlight;\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance, IcChipSizes } from \"./ic-chip.types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Chip {\n  @Element() el: HTMLIcChipElement;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() appearance?: IcChipAppearance = \"filled\";\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcChipSizes = \"default\";\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @State() visible: boolean = true;\n\n  @State() isHovered: boolean = false;\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.isHovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.isHovered = false;\n  };\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.dismissible &&\n      this.el.shadowRoot\n        .querySelector(\"span.ic-tooltip-label\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  render() {\n    const {\n      label,\n      appearance,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      isHovered,\n    } = this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            [\"chip\"]: true,\n            [`${appearance}`]: true,\n            [`${size}`]: true,\n            [\"disabled\"]: disabled,\n            [\"dismissible\"]: dismissible,\n            [\"hovered\"]: isHovered,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            apply-vertical-margins={false}\n            class=\"label\"\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ [\"tooltip-disabled\"]: disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class={{\n                  [\"dismiss-icon\"]: true,\n                }}\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n        </div>\n      )\n    );\n  }\n}\n"]}

package/dist/core/p-895bda21.entry.js

@@ -0,0 +1,2 @@
+import{r as i,h as t,H as e,g as o}from"./p-589f6dd3.js";import{D as n,k as s,g as a,p as r}from"./p-3dea2867.js";import{C as d}from"./p-06321d19.js";import"./p-6f57b13c.js";const h='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(.in-side-menu){border-bottom:var(--ic-space-1px) solid var(--ic-architectural-200);padding:var(--ic-space-md) 0}:host .navigation-group{height:100%;width:-moz-fit-content;width:fit-content;color:var(--ic-theme-text);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md);transition:var(--ic-easing-transition-slow);position:relative;background:none;border:none}:host(.in-side-menu) .navigation-group{height:2.5rem;width:100%;text-align:left}:host(.in-side-menu) .navigation-group .ic-typography-label{width:11.875rem}:host(.in-side-menu) .navigation-group-side-menu{color:var(--ic-action-default);justify-content:flex-start;padding:0 var(--ic-space-md) 0 var(--ic-space-md)}:host(.in-side-menu) .navigation-group-side-menu-collapsed,:host(.in-side-menu) .navigation-group-side-menu-expanded{color:var(--ic-action-default);justify-content:flex-start;padding-left:var(--ic-space-md)}:host(.in-side-menu) .navigation-group-side-menu-expanded{margin-bottom:var(--ic-space-xs)}:host(.in-side-menu) .navigation-group-side-menu-collapsed::after,:host(.in-side-menu) .navigation-group-side-menu-expanded::after{border-style:solid;border-width:0.125em 0.125em 0 0;content:"";display:inline-block;height:0.45em;left:0.75em;position:relative;top:-0.1em;transform:rotate(135deg);vertical-align:top;width:0.45em}:host(.in-side-menu) .navigation-group-side-menu-expanded::after{top:0.15em;transform:rotate(-45deg)}:host .navigation-group:hover,:host .navigation-group:active,:host .selected{background-color:var(--ic-architectural-20);color:var(--ic-color-primary-text);outline:none;cursor:pointer}:host(:not(.in-side-menu)) .navigation-group:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline);z-index:var(--ic-z-index-navigation-item);transition:box-shadow var(--ic-easing-transition-fast)}:host(.in-side-menu) .navigation-group-side-menu:hover,:host(.in-side-menu) .navigation-group-side-menu:active,:host(.in-side-menu) .navigation-group-side-menu:focus{background-color:var(--ic-architectural-20);color:var(--ic-action-default);cursor:auto;box-shadow:none;outline:none}:host(.in-side-menu) .navigation-group-side-menu:focus{outline:var(--ic-hc-focus-outline)}:host(.in-side-menu) .navigation-group-side-menu-expanded:hover:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover);color:var(--ic-action-default);cursor:pointer}:host(.in-side-menu) .navigation-group-side-menu-expanded:active:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:active:not(:focus){background-color:var(--ic-action-dark-bg-active);color:var(--ic-action-default)}:host(.in-side-menu) .navigation-group-side-menu-expanded:focus,:host(.in-side-menu) .navigation-group-side-menu-collapsed:focus{color:var(--ic-action-default);box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline)}:host .navigation-group-dropdown{background-color:var(--ic-architectural-20);border-bottom:var(--ic-space-1px) solid var(--ic-architectural-300);position:absolute;left:0;right:0;padding:var(--ic-space-xs) var(--ic-space-md);box-shadow:0 0.375rem 0.5rem -0.375rem rgba(0 0 0 / 20%);z-index:calc(var(--ic-z-index-navigation-item) - 1)}:host .navigation-group-dropdown-items-list{list-style:none;display:flex;flex-flow:column wrap;align-content:flex-start;padding-left:var(--ic-space-md);max-height:16.5rem}:host .chevron-toggle-icon-wrapper{display:flex;align-items:center}:host .chevron-toggle-icon-wrapper svg{transform:rotate(90deg);height:var(--ic-space-lg);width:var(--ic-space-lg)}:host .chevron-toggle-icon-closed svg{transform:rotate(-90deg)}:host(.expanded) .grouped-links-wrapper{height:var(--navigation-child-items-height, auto);transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.collapsed) .grouped-links-wrapper{height:var(--navigation-child-items-height, 0);transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.navigation-group-side-nav) .navigation-group{height:var(--navigation-group-height);width:var(--navigation-group-width);justify-content:var(--navigation-group-justify-content);padding-right:var(--navigation-group-expand-toggle-padding)}:host(.navigation-group-side-nav) .navigation-group:hover,:host(.navigation-group-side-nav) .navigation-group:active,:host(.navigation-group-side-nav) .selected{background-color:var(--navigation-group-hover);color:var(--navigation-group-text-hover)}:host(.navigation-group-side-nav) .navigation-group:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background:none}:host(.navigation-group-side-nav) .ic-typography-caption{position:var(--navigation-group-title-position);left:var(--navigation-group-title-position-left);white-space:nowrap}.menu-visibility-visible{visibility:visible}.menu-visibility-hidden{visibility:hidden}';const c=class{constructor(e){i(this,e);this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS=50;this.sideNavExpandHandler=()=>{setTimeout((()=>this.setInitialGroupedLinksWrapperHeight()),this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS)};this.topNavResizedHandler=i=>{const t=i.detail.size;if(t!==this.deviceSize){this.deviceSize=t;this.inTopNavSideMenu=t<=n.L}};this.setGroupedNavItemTabIndex=i=>{this.el.querySelectorAll("ic-navigation-item").forEach((t=>{const e=t.shadowRoot.querySelector("a")||t.querySelector("a");if(e){e.setAttribute("tabindex",i)}}))};this.toggleGroupedLinkWrapperHeight=(i,t)=>{if(i){if(t){i.setAttribute("style",`--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`);this.setGroupedNavItemTabIndex("0")}else{i.setAttribute("style",`--navigation-child-items-height: 0`);this.setGroupedNavItemTabIndex("-1")}}};this.toggleExpanded=()=>{this.expanded=!this.expanded;const i=this.el.shadowRoot.querySelector(".grouped-links-wrapper");this.toggleGroupedLinkWrapperHeight(i,this.expanded)};this.handleClick=i=>{if(this.navigationType==="top"&&i.detail){this.toggleDropdown()}else{this.toggleExpanded()}};this.handleBlur=i=>{const t=i.relatedTarget;if(!this.el.contains(t)){this.hideDropdown()}};this.handleTopNavKeydown=i=>{if(!this.inTopNavSideMenu&&i.key==="Escape"){this.hideDropdown();this.el.blur()}else if(i.key===" "||i.key==="Enter"){this.toggleDropdown()}};this.handleKeydown=i=>{if(i.key==="Enter"||i.key==="Space"){switch(this.navigationType){case"top":this.handleTopNavKeydown(i);break;case"side":this.toggleExpanded();i.preventDefault();break;default:this.toggleExpanded();break}}};this.handleMouseLeave=i=>{const t=i.relatedTarget;if(!this.el.contains(t)&&t!==this.dropdown&&document.activeElement!==this.el&&!this.el.contains(document.activeElement)){this.hideDropdown()}};this.triggerShowDropdown=()=>{this.showDropdown()};this.renderDropdownGroupedLinks=()=>t("div",{class:{["navigation-group-dropdown"]:!this.inTopNavSideMenu,["navigation-group-dropdown-side-menu"]:this.inTopNavSideMenu,["selected"]:this.dropdownOpen&&!this.inTopNavSideMenu},onMouseLeave:!this.inTopNavSideMenu?this.handleMouseLeave:null,ref:i=>this.dropdown=i},t("nav",{class:{["navigation-group-dropdown-items"]:!this.inTopNavSideMenu}},t("ul",null,t("slot",null))));this.renderGroupedLinks=()=>t("ul",{class:"grouped-links-wrapper"},t("slot",null));this.getNavigationChildItemsHeight=()=>{const i=this.el.querySelectorAll("ic-navigation-item").length||0;const t=this.el.querySelector("ic-navigation-item")||null;if(this.navigationType==="side"&&!!i&&t){return`${parseInt(getComputedStyle(t).height)*i}px`}return"auto"};this.setInitialGroupedLinksWrapperHeight=()=>{const i=this.el.shadowRoot.querySelector(".grouped-links-wrapper");if(i&&this.expanded){i.setAttribute("style",`--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`)}};this.renderNavigationItems=()=>{if(this.dropdownOpen||this.inTopNavSideMenu&&!this.expandable){return this.renderDropdownGroupedLinks()}if(this.navigationType!=="top"){return this.renderGroupedLinks()}return null};this.label=undefined;this.expandable=false;this.dropdownOpen=false;this.inTopNavSideMenu=false;this.deviceSize=n.XL;this.focusStyle=s();this.navigationType=undefined;this.parentEl=undefined;this.expanded=true}childBlurHandler(){this.hideDropdown()}navItemClickHandler(){this.hideDropdown()}themeChangeHandler(i){const t=i.detail;this.focusStyle=t.mode}async setFocus(){if(this.groupEl){this.groupEl.focus()}}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen}showDropdown(){if(!this.dropdownOpen){this.toggleDropdown()}}hideDropdown(){if(this.dropdownOpen){this.toggleDropdown()}}componentWillLoad(){this.deviceSize=a();const i=r(this.el);this.navigationType=i.navType;this.parentEl=i.parent;if(this.deviceSize<=n.L&&this.navigationType==="top"){this.inTopNavSideMenu=true}if(this.navigationType==="side"){this.parentEl.addEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.addEventListener("topNavResized",this.topNavResizedHandler)}}componentDidLoad(){setTimeout((()=>this.setInitialGroupedLinksWrapperHeight()),this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS)}disconnectedCallback(){if(this.navigationType==="side"){this.parentEl.removeEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.removeEventListener("topNavResized",this.topNavResizedHandler)}}render(){const{label:i,dropdownOpen:o,inTopNavSideMenu:n,expandable:s}=this;const a=!n||s?"button":"div";return t(e,{class:{["in-side-menu"]:n,expanded:this.expanded,collapsed:!this.expanded,["navigation-group-side-nav"]:this.navigationType==="side"},role:"listitem"},t(a,{tabindex:n&&!s?"-1":"0",onMouseOver:!n&&this.navigationType==="top"?this.triggerShowDropdown:null,onMouseLeave:this.navigationType==="top"&&this.handleMouseLeave,onBlur:this.handleBlur,onClick:s?this.handleClick:null,onKeyDown:this.handleKeydown,class:{["navigation-group"]:true,[this.focusStyle]:!n,["navigation-group-side-menu"]:n&&!s,["navigation-group-side-menu-collapsed"]:n&&s&&!o,["navigation-group-side-menu-expanded"]:n&&s&&o,["selected"]:o&&!n},ref:i=>this.groupEl=i,"aria-expanded":o||this.expanded?"true":"false","aria-haspopup":!n&&this.navigationType==="top"?"true":"false"},t("ic-typography",{variant:this.navigationType==="side"?"caption":"label"},i),this.navigationType==="side"&&s&&t("div",{class:{"chevron-toggle-icon-wrapper":true,"chevron-toggle-icon-closed":this.expanded},innerHTML:d})),this.renderNavigationItems())}static get delegatesFocus(){return true}get el(){return o(this)}};c.style=h;export{c as ic_navigation_group};
+//# sourceMappingURL=p-895bda21.entry.js.map

package/dist/core/p-895bda21.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-navigation-group/ic-navigation-group.css?tag=ic-navigation-group&encapsulation=shadow","src/components/ic-navigation-group/ic-navigation-group.tsx"],"names":["icNavigationGroupCss","NavigationGroup","this","DYNAMIC_GROUPED_LINKS_HEIGHT_MS","sideNavExpandHandler","setTimeout","setInitialGroupedLinksWrapperHeight","topNavResizedHandler","ev","newSize","detail","size","deviceSize","inTopNavSideMenu","DEVICE_SIZES","L","setGroupedNavItemTabIndex","tabIndexValue","el","querySelectorAll","forEach","navigationItem","navItem","shadowRoot","querySelector","setAttribute","toggleGroupedLinkWrapperHeight","wrapper","expanded","getNavigationChildItemsHeight","toggleExpanded","linkWrapper","handleClick","navigationType","toggleDropdown","handleBlur","target","relatedTarget","contains","hideDropdown","handleTopNavKeydown","key","blur","handleKeydown","preventDefault","handleMouseLeave","dropdown","document","activeElement","triggerShowDropdown","showDropdown","renderDropdownGroupedLinks","h","class","[object Object]","dropdownOpen","onMouseLeave","ref","renderGroupedLinks","navigationItemLength","length","parseInt","getComputedStyle","height","renderNavigationItems","expandable","XL","getThemeForegroundColor","theme","focusStyle","mode","groupEl","focus","getCurrentDeviceSize","navParentDetails","getNavItemParentDetails","navType","parentEl","parent","addEventListener","removeEventListener","label","NavigationGroupElement","Host","collapsed","role","tabindex","onMouseOver","onBlur","onClick","onKeyDown","aria-expanded","aria-haspopup","variant","chevron-toggle-icon-wrapper","chevron-toggle-icon-closed","innerHTML","chevronIcon"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-navigation-item: z-index of navigation group item\n */\n\n:host {\n  display: block;\n}\n\n:host(.in-side-menu) {\n  border-bottom: var(--ic-space-1px) solid var(--ic-architectural-200);\n  padding: var(--ic-space-md) 0;\n}\n\n:host .navigation-group {\n  height: 100%;\n  width: fit-content;\n  color: var(--ic-theme-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--ic-space-md);\n  transition: var(--ic-easing-transition-slow);\n  position: relative;\n  background: none;\n  border: none;\n}\n\n:host(.in-side-menu) .navigation-group {\n  height: 2.5rem;\n  width: 100%;\n  text-align: left;\n}\n\n:host(.in-side-menu) .navigation-group .ic-typography-label {\n  width: 11.875rem;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu {\n  color: var(--ic-action-default);\n  justify-content: flex-start;\n  padding: 0 var(--ic-space-md) 0 var(--ic-space-md);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-collapsed,\n:host(.in-side-menu) .navigation-group-side-menu-expanded {\n  color: var(--ic-action-default);\n  justify-content: flex-start;\n  padding-left: var(--ic-space-md);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded {\n  margin-bottom: var(--ic-space-xs);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-collapsed::after,\n:host(.in-side-menu) .navigation-group-side-menu-expanded::after {\n  border-style: solid;\n  border-width: 0.125em 0.125em 0 0;\n  content: \"\";\n  display: inline-block;\n  height: 0.45em;\n  left: 0.75em;\n  position: relative;\n  top: -0.1em;\n  transform: rotate(135deg);\n  vertical-align: top;\n  width: 0.45em;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded::after {\n  top: 0.15em;\n  transform: rotate(-45deg);\n}\n\n:host .navigation-group:hover,\n:host .navigation-group:active,\n:host .selected {\n  background-color: var(--ic-architectural-20);\n  color: var(--ic-color-primary-text);\n  outline: none;\n  cursor: pointer;\n}\n\n:host(:not(.in-side-menu)) .navigation-group:focus {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  outline: var(--ic-hc-focus-outline);\n  z-index: var(--ic-z-index-navigation-item);\n  transition: box-shadow var(--ic-easing-transition-fast);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu:hover,\n:host(.in-side-menu) .navigation-group-side-menu:active,\n:host(.in-side-menu) .navigation-group-side-menu:focus {\n  background-color: var(--ic-architectural-20);\n  color: var(--ic-action-default);\n  cursor: auto;\n  box-shadow: none;\n  outline: none;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu:focus {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded:hover:not(:focus),\n:host(.in-side-menu) .navigation-group-side-menu-collapsed:hover:not(:focus) {\n  background-color: var(--ic-action-dark-bg-hover);\n  color: var(--ic-action-default);\n  cursor: pointer;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded:active:not(:focus),\n:host(.in-side-menu) .navigation-group-side-menu-collapsed:active:not(:focus) {\n  background-color: var(--ic-action-dark-bg-active);\n  color: var(--ic-action-default);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded:focus,\n:host(.in-side-menu) .navigation-group-side-menu-collapsed:focus {\n  color: var(--ic-action-default);\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host .navigation-group-dropdown {\n  background-color: var(--ic-architectural-20);\n  border-bottom: var(--ic-space-1px) solid var(--ic-architectural-300);\n  position: absolute;\n  left: 0;\n  right: 0;\n  padding: var(--ic-space-xs) var(--ic-space-md);\n  box-shadow: 0 0.375rem 0.5rem -0.375rem rgba(0 0 0 / 20%);\n  z-index: calc(var(--ic-z-index-navigation-item) - 1);\n}\n\n:host .navigation-group-dropdown-items-list {\n  list-style: none;\n  display: flex;\n  flex-flow: column wrap;\n  align-content: flex-start;\n  padding-left: var(--ic-space-md);\n  max-height: 16.5rem;\n}\n\n:host .chevron-toggle-icon-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n:host .chevron-toggle-icon-wrapper svg {\n  transform: rotate(90deg);\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host .chevron-toggle-icon-closed svg {\n  transform: rotate(-90deg);\n}\n\n:host(.expanded) .grouped-links-wrapper {\n  height: var(--navigation-child-items-height, auto);\n  transition: var(--ic-easing-transition-slow);\n  overflow: hidden;\n}\n\n:host(.collapsed) .grouped-links-wrapper {\n  height: var(--navigation-child-items-height, 0);\n  transition: var(--ic-easing-transition-slow);\n  overflow: hidden;\n}\n\n:host(.navigation-group-side-nav) .navigation-group {\n  height: var(--navigation-group-height);\n  width: var(--navigation-group-width);\n  justify-content: var(--navigation-group-justify-content);\n  padding-right: var(--navigation-group-expand-toggle-padding);\n}\n\n:host(.navigation-group-side-nav) .navigation-group:hover,\n:host(.navigation-group-side-nav) .navigation-group:active,\n:host(.navigation-group-side-nav) .selected {\n  background-color: var(--navigation-group-hover);\n  color: var(--navigation-group-text-hover);\n}\n\n:host(.navigation-group-side-nav) .navigation-group:focus {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  background: none;\n}\n\n:host(.navigation-group-side-nav) .ic-typography-caption {\n  position: var(--navigation-group-title-position);\n  left: var(--navigation-group-title-position-left);\n  white-space: nowrap;\n}\n\n.menu-visibility-visible {\n  visibility: visible;\n}\n\n.menu-visibility-hidden {\n  visibility: hidden;\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  Listen,\n  h,\n  Method,\n} from \"@stencil/core\";\n\nimport {\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n@Component({\n  tag: \"ic-navigation-group\",\n  styleUrl: \"ic-navigation-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationGroup {\n  @Element() el: HTMLIcNavigationGroupElement;\n\n  /**\n   * The label to display on the group.\n   */\n  @Prop() label: string;\n\n  /**\n   *  If `true`, the group will be expandable in the side menu.\n   */\n  @Prop() expandable: boolean = false;\n\n  @State() dropdownOpen: boolean = false;\n\n  @State() inTopNavSideMenu: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() focusStyle = getThemeForegroundColor();\n\n  @State() navigationType: IcNavType | \"\";\n\n  @State() parentEl: HTMLElement;\n\n  @State() expanded: boolean = true;\n\n  private groupEl: HTMLElement;\n  private dropdown: HTMLElement;\n  private DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 50;\n\n  @Listen(\"childBlur\")\n  childBlurHandler(): void {\n    this.hideDropdown();\n  }\n\n  @Listen(\"navItemClicked\")\n  navItemClickHandler(): void {\n    this.hideDropdown();\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.focusStyle = theme.mode;\n  }\n\n  /**\n   * Sets focus on the nav item.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.groupEl) {\n      this.groupEl.focus();\n    }\n  }\n\n  private sideNavExpandHandler = (): void => {\n    setTimeout(\n      () => this.setInitialGroupedLinksWrapperHeight(),\n      this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS\n    );\n  };\n\n  private topNavResizedHandler = (ev: CustomEvent): void => {\n    const newSize = ev.detail.size;\n    if (newSize !== this.deviceSize) {\n      this.deviceSize = newSize;\n      this.inTopNavSideMenu = newSize <= DEVICE_SIZES.L;\n    }\n  };\n\n  private toggleDropdown() {\n    this.dropdownOpen = !this.dropdownOpen;\n  }\n\n  private setGroupedNavItemTabIndex = (tabIndexValue: string) => {\n    this.el.querySelectorAll(\"ic-navigation-item\").forEach((navigationItem) => {\n      const navItem =\n        navigationItem.shadowRoot.querySelector(\"a\") ||\n        navigationItem.querySelector(\"a\");\n      if (navItem) {\n        navItem.setAttribute(\"tabindex\", tabIndexValue);\n      }\n    });\n  };\n\n  private toggleGroupedLinkWrapperHeight = (\n    wrapper: HTMLElement,\n    expanded: boolean\n  ) => {\n    if (wrapper) {\n      if (expanded) {\n        wrapper.setAttribute(\n          \"style\",\n          `--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`\n        );\n        this.setGroupedNavItemTabIndex(\"0\");\n      } else {\n        wrapper.setAttribute(\"style\", `--navigation-child-items-height: 0`);\n        this.setGroupedNavItemTabIndex(\"-1\");\n      }\n    }\n  };\n\n  private toggleExpanded = () => {\n    this.expanded = !this.expanded;\n    const linkWrapper = this.el.shadowRoot.querySelector(\n      \".grouped-links-wrapper\"\n    ) as HTMLElement;\n\n    this.toggleGroupedLinkWrapperHeight(linkWrapper, this.expanded);\n  };\n\n  private showDropdown() {\n    if (!this.dropdownOpen) {\n      this.toggleDropdown();\n    }\n  }\n\n  private hideDropdown() {\n    if (this.dropdownOpen) {\n      this.toggleDropdown();\n    }\n  }\n\n  private handleClick = (ev: MouseEvent) => {\n    if (this.navigationType === \"top\" && ev.detail) {\n      this.toggleDropdown();\n    } else {\n      this.toggleExpanded();\n    }\n  };\n\n  private handleBlur = (ev: FocusEvent) => {\n    const target = ev.relatedTarget as HTMLElement;\n    if (!this.el.contains(target)) {\n      this.hideDropdown();\n    }\n  };\n\n  private handleTopNavKeydown = (ev: KeyboardEvent) => {\n    if (!this.inTopNavSideMenu && ev.key === \"Escape\") {\n      this.hideDropdown();\n      this.el.blur();\n    } else if (ev.key === \" \" || ev.key === \"Enter\") {\n      this.toggleDropdown();\n    }\n  };\n\n  private handleKeydown = (ev: KeyboardEvent) => {\n    if (ev.key === \"Enter\" || ev.key === \"Space\") {\n      switch (this.navigationType) {\n        case \"top\":\n          this.handleTopNavKeydown(ev as KeyboardEvent);\n          break;\n        case \"side\":\n          this.toggleExpanded();\n          ev.preventDefault();\n          break;\n        default:\n          this.toggleExpanded();\n          break;\n      }\n    }\n  };\n\n  private handleMouseLeave = (ev: MouseEvent) => {\n    const target = ev.relatedTarget as HTMLElement;\n    if (\n      !this.el.contains(target) &&\n      target !== this.dropdown &&\n      document.activeElement !== this.el &&\n      !this.el.contains(document.activeElement)\n    ) {\n      this.hideDropdown();\n    }\n  };\n\n  private triggerShowDropdown = () => {\n    this.showDropdown();\n  };\n\n  private renderDropdownGroupedLinks = (): HTMLDivElement => (\n    <div\n      class={{\n        [\"navigation-group-dropdown\"]: !this.inTopNavSideMenu,\n        [\"navigation-group-dropdown-side-menu\"]: this.inTopNavSideMenu,\n        [\"selected\"]: this.dropdownOpen && !this.inTopNavSideMenu,\n      }}\n      onMouseLeave={!this.inTopNavSideMenu ? this.handleMouseLeave : null}\n      ref={(el) => (this.dropdown = el)}\n    >\n      <nav\n        class={{\n          [\"navigation-group-dropdown-items\"]: !this.inTopNavSideMenu,\n        }}\n      >\n        <ul>\n          <slot></slot>\n        </ul>\n      </nav>\n    </div>\n  );\n\n  private renderGroupedLinks = (): HTMLDivElement => (\n    <ul class=\"grouped-links-wrapper\">\n      <slot></slot>\n    </ul>\n  );\n\n  /**\n   * Gets the total height of navigation links to improve\n   * smoothness of expand/collapse animations\n   */\n  private getNavigationChildItemsHeight = (): string => {\n    const navigationItemLength =\n      this.el.querySelectorAll(\"ic-navigation-item\").length || 0;\n    const navigationItem = this.el.querySelector(\"ic-navigation-item\") || null;\n\n    if (\n      this.navigationType === \"side\" &&\n      !!navigationItemLength &&\n      navigationItem\n    ) {\n      return `${\n        parseInt(getComputedStyle(navigationItem).height) * navigationItemLength\n      }px`;\n    }\n\n    return \"auto\";\n  };\n\n  private setInitialGroupedLinksWrapperHeight = () => {\n    const linkWrapper = this.el.shadowRoot.querySelector(\n      \".grouped-links-wrapper\"\n    ) as HTMLElement;\n\n    if (linkWrapper && this.expanded) {\n      linkWrapper.setAttribute(\n        \"style\",\n        `--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`\n      );\n    }\n  };\n\n  private renderNavigationItems = (): HTMLDivElement | null => {\n    if (this.dropdownOpen || (this.inTopNavSideMenu && !this.expandable)) {\n      return this.renderDropdownGroupedLinks();\n    }\n\n    if (this.navigationType !== \"top\") {\n      return this.renderGroupedLinks();\n    }\n\n    return null;\n  };\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    const navParentDetails = getNavItemParentDetails(this.el);\n    this.navigationType = navParentDetails.navType;\n    this.parentEl = navParentDetails.parent;\n    if (this.deviceSize <= DEVICE_SIZES.L && this.navigationType === \"top\") {\n      this.inTopNavSideMenu = true;\n    }\n\n    if (this.navigationType === \"side\") {\n      this.parentEl.addEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.addEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n  }\n\n  componentDidLoad(): void {\n    /**\n     * debounce is required as the incorrect height was retrieved instantly after\n     * componentDidLoad is invoked.\n     */\n    setTimeout(\n      () => this.setInitialGroupedLinksWrapperHeight(),\n      this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl.removeEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.removeEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n  }\n\n  render() {\n    const { label, dropdownOpen, inTopNavSideMenu, expandable } = this;\n\n    const NavigationGroupElement =\n      !inTopNavSideMenu || expandable ? \"button\" : \"div\";\n\n    return (\n      <Host\n        class={{\n          [\"in-side-menu\"]: inTopNavSideMenu,\n          expanded: this.expanded,\n          collapsed: !this.expanded,\n          [\"navigation-group-side-nav\"]: this.navigationType === \"side\",\n        }}\n        role=\"listitem\"\n      >\n        <NavigationGroupElement\n          tabindex={inTopNavSideMenu && !expandable ? \"-1\" : \"0\"}\n          onMouseOver={\n            !inTopNavSideMenu && this.navigationType === \"top\"\n              ? this.triggerShowDropdown\n              : null\n          }\n          onMouseLeave={this.navigationType === \"top\" && this.handleMouseLeave}\n          onBlur={this.handleBlur}\n          onClick={expandable ? this.handleClick : null}\n          onKeyDown={this.handleKeydown}\n          class={{\n            [\"navigation-group\"]: true,\n            [this.focusStyle]: !inTopNavSideMenu,\n            [\"navigation-group-side-menu\"]: inTopNavSideMenu && !expandable,\n            [\"navigation-group-side-menu-collapsed\"]:\n              inTopNavSideMenu && expandable && !dropdownOpen,\n            [\"navigation-group-side-menu-expanded\"]:\n              inTopNavSideMenu && expandable && dropdownOpen,\n            [\"selected\"]: dropdownOpen && !inTopNavSideMenu,\n          }}\n          ref={(el) => (this.groupEl = el)}\n          aria-expanded={dropdownOpen || this.expanded ? \"true\" : \"false\"}\n          aria-haspopup={\n            !inTopNavSideMenu && this.navigationType === \"top\"\n              ? \"true\"\n              : \"false\"\n          }\n        >\n          <ic-typography\n            variant={this.navigationType === \"side\" ? \"caption\" : \"label\"}\n          >\n            {label}\n          </ic-typography>\n          {this.navigationType === \"side\" && expandable && (\n            <div\n              class={{\n                \"chevron-toggle-icon-wrapper\": true,\n                \"chevron-toggle-icon-closed\": this.expanded,\n              }}\n              innerHTML={chevronIcon}\n            ></div>\n          )}\n        </NavigationGroupElement>\n        {this.renderNavigationItems()}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-92c4fa7f.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as i,g as a}from"./p-589f6dd3.js";import{i as s,g as n,D as o,c as r}from"./p-3dea2867.js";import"./p-6f57b13c.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;z-index:var(--ic-z-index-page-header)}:host(.sticky){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay)}header{background-color:var(--ic-architectural-40)}header.border-bottom{border-bottom:var(--ic-space-1px) solid var(--ic-architectural-300)}header.tabs{padding-top:var(--ic-space-md)}.breadcrumb-area{margin-bottom:var(--ic-space-md)}.main-content{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"title-area action-area"\n    "input-area action-area";-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md);justify-content:space-between;width:100%}.title-area{display:flex;flex-direction:column;flex:1;min-width:19rem;grid-area:title-area}.header-content{display:flex;align-items:center;width:100%;flex-wrap:wrap;row-gap:var(--ic-space-xs);-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md)}.heading{display:inline-block;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.subheading.small{margin-top:var(--ic-space-xs)}.action-area{display:flex;gap:var(--ic-space-md);flex-flow:row wrap;justify-self:end;justify-content:flex-end;height:-moz-fit-content;height:fit-content;grid-area:action-area}.input-area,.navigation-area{margin-top:var(--ic-space-md);width:100%}.tabs-slot{display:flex;overflow-x:auto;padding:0.5rem;margin:-0.5rem}.tabs-slot::-webkit-scrollbar{display:none}.input-area{grid-area:input-area}@media screen and (max-width: 576px){::slotted(ic-text-field){--input-width:100%;max-width:20rem}.main-content{grid-template-areas:"title-area"\n      "action-area"\n      "input-area";justify-content:flex-start}.title-area{min-width:0}.action-area{min-width:100%;margin-top:var(--ic-space-md);justify-content:start}}@media screen and (min-width: 992px){:host(.sticky-desktop){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay)}}';const d=class{constructor(e){t(this,e);this.resizeObserver=null;this.resizeObserverCallback=()=>{if(this.reverseOrder&&s(this.el,"actions")){this.applyReverseOrder()}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.el)};this.applyReverseOrder=()=>{const t=n();if(t!==this.deviceSize){this.deviceSize=t}const e=this.el.shadowRoot.querySelector("div.action-area");const i=[];for(let t=0;t<this.actionContent.length;t++){const e=this.actionContent[t];let a=e.offsetHeight;if(a===undefined){a=0}i.push(a)}const a=Math.max(...i);let s=e.offsetHeight;if(s===undefined){s=0}if(this.deviceSize>o.S&&s<=a&&!this.areButtonsReversed){this.actionContent=this.actionContent.reverse();this.actionContent.forEach((t=>{this.el.append(t)}));this.areButtonsReversed=!this.areButtonsReversed}else if((this.deviceSize>o.S&&s>a||this.deviceSize<=o.S)&&this.areButtonsReversed){this.actionContent=this.actionContent.reverse();this.actionContent.forEach((t=>{this.el.append(t)}));this.areButtonsReversed=!this.areButtonsReversed}};this.heading=undefined;this.subheading=undefined;this.aligned="left";this.small=false;this.border=true;this.sticky=false;this.stickyDesktopOnly=false;this.reverseOrder=false;this.deviceSize=o.XL;this.areButtonsReversed=false;this.actionContent=undefined}componentWillLoad(){this.actionContent=Array.from(this.el.querySelectorAll(`[slot="actions"]`))}componentDidLoad(){r(this.runResizeObserver)}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){const{small:t,border:a,heading:n,subheading:o,aligned:r,sticky:l,stickyDesktopOnly:d}=this;return e(i,{class:{["sticky"]:l,["sticky-desktop"]:!l&&d}},e("header",{class:{["border-bottom"]:a,["tabs"]:s(this.el,"tabs")}},e("ic-section-container",{aligned:r,fullHeight:s(this.el,"tabs")},s(this.el,"breadcrumbs")&&e("div",{class:"breadcrumb-area"},e("slot",{name:"breadcrumbs"})),e("div",{class:"main-content"},e("div",{class:"title-area"},e("div",{class:"header-content"},e("slot",{name:"heading"},e("ic-typography",{variant:t?"h4":"h2",class:"heading"},e("h2",null,n))),e("slot",{name:"heading-adornment"})),e("div",null,e("slot",{name:"subheading"},o&&e("ic-typography",{variant:"body",class:{["subheading"]:true,["small"]:t}},o)))),s(this.el,"actions")&&e("div",{class:"action-area"},e("slot",{name:"actions"})),s(this.el,"input")&&e("div",{class:"input-area"},e("slot",{name:"input"}))),(s(this.el,"stepper")||s(this.el,"tabs"))&&e("div",{class:"navigation-area"},s(this.el,"stepper")&&!s(this.el,"tabs")&&e("slot",{name:"stepper"}),s(this.el,"tabs")&&e("nav",{"aria-label":"navigation-landmark-page-header"},e("ic-horizontal-scroll",null,e("ul",{class:"tabs-slot"},e("slot",{name:"tabs"}))))))))}get el(){return a(this)}};d.style=l;export{d as ic_page_header};
+//# sourceMappingURL=p-92c4fa7f.entry.js.map