@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

package/dist/core/p-32cc8827.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as t,H as c,g as s}from"./p-589f6dd3.js";import{d as a,a as o,r,e as n,h as l}from"./p-471820e6.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:inline-block}input{overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.ic-switch-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ic-space-xxs);cursor:pointer}.ic-switch-label{margin-left:var(--ic-space-xxs);margin-bottom:var(--ic-space-sm)}.ic-switch-label-small{margin-bottom:0.625rem}.ic-switch-toggle{display:flex;align-items:center;justify-content:space-around;width:4rem;height:var(--ic-space-xl);position:relative;border-radius:100vw;background-color:var(--ic-architectural-200);border:var(--ic-space-1px) solid var(--ic-architectural-700);box-sizing:border-box;transition:var(--ic-transition-duration-fast)}.ic-switch-line-break{flex:1 0 100%}.ic-switch-checked-status{padding-left:var(--ic-space-xxs)}.ic-switch-toggle::before{content:"";width:1.333rem;height:1.333rem;border-radius:50%;position:absolute;z-index:2;top:50%;left:0.333rem;transform:translate(0, -50%);background-color:var(--ic-architectural-700);transition:var(--ic-transition-duration-slow)}.ic-switch-icon{display:inline-block;vertical-align:middle;width:0.625rem;height:0.625rem}.ic-switch-icon-circle,.ic-switch-icon-line{stroke-width:1}.ic-switch-icon-circle{stroke:var(--ic-architectural-700)}.ic-switch-icon-line{stroke:var(--ic-architectural-white)}@media (prefers-reduced-motion: reduce){.ic-switch-toggle::before{transition-duration:0ms}}.ic-switch-input:checked+.ic-switch-toggle{background-color:var(--ic-action-default);border:none}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-xl), -50%);background-color:var(--ic-architectural-white)}.ic-switch-input:not([disabled])+.ic-switch-toggle:hover::before{box-shadow:0 0 0 0.75rem var(--ic-action-dark-bg-hover)}.ic-switch-input:not([disabled])+.ic-switch-toggle:active::before{box-shadow:0 0 0 0.75rem var(--ic-action-dark-bg-active)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:hover::before{box-shadow:0 0 0 0.75rem var(--ic-action-default-bg-hover)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:active::before{box-shadow:0 0 0 0.75rem var(--ic-action-default-bg-active)}.ic-switch-input:focus:not([disabled])+.ic-switch-toggle,.ic-switch-input:focus-visible:not([disabled])+.ic-switch-toggle{box-shadow:0 0 0 var(--ic-space-1px) var(--ic-architectural-white),\n    0 0 0 0.188rem var(--ic-action-default),\n    0 0 0 0.5rem var(--ic-action-default-active-alpha)}.ic-switch-disabled{cursor:default}.ic-switch-disabled .ic-switch-icon-circle{stroke:var(--ic-architectural-300)}.ic-switch-disabled .ic-switch-icon-line{stroke:var(--ic-action-default-bg-active)}.ic-switch-input:disabled+.ic-switch-toggle{background-color:var(--ic-architectural-80);border:var(--ic-space-1px) dashed var(--ic-architectural-300)}.ic-switch-input:disabled~.ic-switch-checked-status{color:var(--ic-architectural-300)}.ic-switch-input:disabled+.ic-switch-toggle::before{background-color:var(--ic-architectural-300)}.ic-switch-input:disabled:checked+.ic-switch-toggle{background-color:var(--ic-status-info-background);border:var(--ic-space-1px) dashed #98c9f5}.ic-switch-input:disabled:checked+.ic-switch-toggle::before{background-color:var(--ic-architectural-white)}.ic-switch-small{gap:var(--ic-space-xxxs)}.ic-switch-small .ic-switch-checked-status{padding-left:0.375rem}.ic-switch-small .ic-switch-toggle{width:var(--ic-space-xxl);height:var(--ic-space-lg)}.ic-switch-small .ic-switch-toggle::before{width:var(--ic-space-md);height:var(--ic-space-md);left:var(--ic-space-xxs)}.ic-switch-small .ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-lg), -50%)}::slotted(*){margin-left:var(--ic-space-sm)}::slotted(svg){fill:currentcolor}@media (forced-colors: active){.ic-switch-toggle::before,.ic-switch-input:checked+.ic-switch-toggle{border:var(--ic-hc-border)}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(calc(var(--ic-space-xl) - 0.125rem), -50%)}.ic-switch-input:disabled+.ic-switch-toggle,.ic-switch-input:disabled:checked+.ic-switch-toggle,.ic-switch-input:disabled+.ic-switch-toggle::before{border-color:GrayText}.ic-switch-input:disabled~.ic-switch-checked-status{color:GrayText}.ic-switch-disabled .ic-switch-icon-circle,.ic-switch-disabled .ic-switch-icon-line{stroke:GrayText}}';let d=0;const b=class{constructor(t){i(this,t);this.icChange=e(this,"icChange",7);this.icFocus=e(this,"icFocus",7);this.icBlur=e(this,"icBlur",7);this.inputId=`ic-switch-input-${d++}`;this.handleChange=()=>{this.checkedState=!this.checkedState;this.icChange.emit({checked:this.checkedState,value:this.value})};this.onFocus=()=>{this.icFocus.emit()};this.onBlur=()=>{this.icBlur.emit()};this.handleFormReset=()=>{this.checkedState=this.initiallyChecked};this.label=undefined;this.hideLabel=false;this.helperText="";this.checked=false;this.small=false;this.disabled=false;this.name=this.inputId;this.showState=false;this.value="on";this.checkedState=false;this.initiallyChecked=this.checked}async setFocus(){if(this.el.shadowRoot.querySelector("input")){this.el.shadowRoot.querySelector("input").focus()}}componentWillLoad(){this.checkedState=this.checked;a(this.el,this.handleFormReset)}componentDidLoad(){o([{prop:this.label,propName:"label"}],"Switch")}disconnectedCallback(){r(this.el,this.handleFormReset)}render(){const{label:i,checkedState:e,small:s,disabled:a,name:o,showState:r,value:h,hideLabel:d,helperText:b,inputId:p}=this;n(true,this.el,o,e?h:"",a);const u=l(p,b!=="",false);return t(c,null,t("label",{class:{["ic-switch-container"]:true,["ic-switch-disabled"]:a,["ic-switch-small"]:s},htmlFor:p},!d&&t("ic-input-label",{for:p,label:i,helperText:b,readonly:true,disabled:a,class:{["ic-switch-label"]:true,["ic-switch-label-small"]:s}}),!d&&t("span",{class:"ic-switch-line-break"}),t("input",{checked:e,disabled:a,"aria-label":i,"aria-checked":e?"true":"false","aria-describedby":u,role:"switch",class:"ic-switch-input",type:"checkbox",name:"toggle",id:p,onFocus:this.onFocus,onBlur:this.onBlur,onChange:this.handleChange}),t("span",{class:"ic-switch-toggle"},t("svg",{class:"ic-switch-icon","aria-hidden":"true",focusable:"false",viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},t("line",{class:"ic-switch-icon-line",x1:"9",y1:s?"2":"1",x2:"9",y2:s?"8":"9"})),t("svg",{class:"ic-switch-icon","aria-hidden":"true",focusable:"false",viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},t("circle",{class:"ic-switch-icon-circle",fill:"none",cx:"5",cy:"5",r:s?"3.335":"4.445"}))),t("slot",{name:"right-adornment"}),r&&t("ic-typography",{"aria-hidden":"true",variant:"label",class:"ic-switch-checked-status"},e?"On":"Off")))}static get delegatesFocus(){return true}get el(){return s(this)}};b.style=h;export{b as ic_switch};
-//# sourceMappingURL=p-32cc8827.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","src/components/ic-switch/ic-switch.tsx"],"names":["icSwitchCss","inputIds","Switch","this","inputId","handleChange","checkedState","icChange","emit","checked","value","onFocus","icFocus","onBlur","icBlur","handleFormReset","initiallyChecked","[object Object]","el","shadowRoot","querySelector","focus","addFormResetListener","onComponentRequiredPropUndefined","prop","label","propName","removeFormResetListener","small","disabled","name","showState","hideLabel","helperText","renderHiddenInput","describedBy","getInputDescribedByText","h","Host","class","htmlFor","for","readonly","aria-label","aria-checked","aria-describedby","role","type","id","onChange","aria-hidden","focusable","viewBox","xmlns","x1","y1","x2","y2","fill","cx","cy","r","variant"],"mappings":"mJAAA,MAAMA,EAAc,kiNCoBpB,IAAIC,EAAW,QAYFC,EAAM,kIACTC,KAAAC,QAAU,mBAAmBH,MAiE7BE,KAAAE,aAAe,KACrBF,KAAKG,cAAgBH,KAAKG,aAC1BH,KAAKI,SAASC,KAAK,CACjBC,QAASN,KAAKG,aACdI,MAAOP,KAAKO,SAIRP,KAAAQ,QAAU,KAChBR,KAAKS,QAAQJ,QAGPL,KAAAU,OAAS,KACfV,KAAKW,OAAON,QAGNL,KAAAY,gBAAkB,KACxBZ,KAAKG,aAAeH,KAAKa,sDAtEG,sBAIA,gBAIF,iBAIF,oBAIG,gBAILb,KAAKC,uBAIC,iBASE,uBAiBC,4BACLD,KAAKM,QA0BjCQ,iBACE,GAAId,KAAKe,GAAGC,WAAWC,cAAc,SAAU,CAC7CjB,KAAKe,GAAGC,WAAWC,cAAc,SAASC,SAI9CJ,oBACEd,KAAKG,aAAeH,KAAKM,QACzBa,EAAqBnB,KAAKe,GAAIf,KAAKY,iBAGrCE,mBACEM,EACE,CAAC,CAAEC,KAAMrB,KAAKsB,MAAOC,SAAU,UAC/B,UAIJT,uBACEU,EAAwBxB,KAAKe,GAAIf,KAAKY,iBAGxCE,SACE,MAAMQ,MACJA,EAAKnB,aACLA,EAAYsB,MACZA,EAAKC,SACLA,EAAQC,KACRA,EAAIC,UACJA,EAASrB,MACTA,EAAKsB,UACLA,EAASC,WACTA,EAAU7B,QACVA,GACED,KAEJ+B,EAAkB,KAAM/B,KAAKe,GAAIY,EAAMxB,EAAeI,EAAQ,GAAImB,GAElE,MAAMM,EAAcC,EAClBhC,EACA6B,IAAe,GACf,OAGF,OACEI,EAACC,EAAI,KACHD,EAAA,QAAA,CACEE,MAAO,CACLtB,CAAC,uBAAwB,KACzBA,CAAC,sBAAuBY,EACxBZ,CAAC,mBAAoBW,GAEvBY,QAASpC,IAEP4B,GACAK,EAAA,iBAAA,CACEI,IAAKrC,EACLqB,MAAOA,EACPQ,WAAYA,EACZS,SAAU,KACVb,SAAUA,EACVU,MAAO,CACLtB,CAAC,mBAAoB,KACrBA,CAAC,yBAA0BW,MAI/BI,GAAaK,EAAA,OAAA,CAAME,MAAM,yBAC3BF,EAAA,QAAA,CACE5B,QAASH,EACTuB,SAAUA,EAAQc,aACNlB,EAAKmB,eACHtC,EAAe,OAAS,QAAOuC,mBAC3BV,EAClBW,KAAK,SACLP,MAAM,kBACNQ,KAAK,WACLjB,KAAK,SACLkB,GAAI5C,EACJO,QAASR,KAAKQ,QACdE,OAAQV,KAAKU,OACboC,SAAU9C,KAAKE,eAEjBgC,EAAA,OAAA,CAAME,MAAM,oBACVF,EAAA,MAAA,CACEE,MAAM,iBAAgBW,cACV,OACZC,UAAU,QACVC,QAAQ,YACRC,MAAM,8BAENhB,EAAA,OAAA,CACEE,MAAM,sBACNe,GAAG,IACHC,GAAI3B,EAAQ,IAAM,IAClB4B,GAAG,IACHC,GAAI7B,EAAQ,IAAM,OAGtBS,EAAA,MAAA,CACEE,MAAM,iBAAgBW,cACV,OACZC,UAAU,QACVC,QAAQ,YACRC,MAAM,8BAENhB,EAAA,SAAA,CACEE,MAAM,wBACNmB,KAAK,OACLC,GAAG,IACHC,GAAG,IACHC,EAAGjC,EAAQ,QAAU,YAI3BS,EAAA,OAAA,CAAMP,KAAK,oBACVC,GACCM,EAAA,gBAAA,CAAAa,cACc,OACZY,QAAQ,QACRvB,MAAM,4BAELjC,EAAe,KAAO","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: inline-block;\n}\n\ninput {\n  overflow: hidden;\n  appearance: none;\n}\n\n.ic-switch-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ic-space-xxs);\n  cursor: pointer;\n}\n\n.ic-switch-label {\n  margin-left: var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-sm);\n}\n\n.ic-switch-label-small {\n  margin-bottom: 0.625rem;\n}\n\n.ic-switch-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 4rem;\n  height: var(--ic-space-xl);\n  position: relative;\n  border-radius: 100vw;\n  background-color: var(--ic-architectural-200);\n  border: var(--ic-space-1px) solid var(--ic-architectural-700);\n  box-sizing: border-box;\n  transition: var(--ic-transition-duration-fast);\n}\n\n.ic-switch-line-break {\n  flex: 1 0 100%;\n}\n\n.ic-switch-checked-status {\n  padding-left: var(--ic-space-xxs);\n}\n\n.ic-switch-toggle::before {\n  content: \"\";\n  width: 1.333rem;\n  height: 1.333rem;\n  border-radius: 50%;\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 0.333rem;\n  transform: translate(0, -50%);\n  background-color: var(--ic-architectural-700);\n  transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-icon {\n  display: inline-block;\n  vertical-align: middle;\n  width: 0.625rem;\n  height: 0.625rem;\n}\n\n.ic-switch-icon-circle,\n.ic-switch-icon-line {\n  stroke-width: 1;\n}\n\n.ic-switch-icon-circle {\n  stroke: var(--ic-architectural-700);\n}\n\n.ic-switch-icon-line {\n  stroke: var(--ic-architectural-white);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ic-switch-toggle::before {\n    transition-duration: 0ms;\n  }\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n  background-color: var(--ic-action-default);\n  border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-xl), -50%);\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-active);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n  box-shadow: 0 0 0 var(--ic-space-1px) var(--ic-architectural-white),\n    0 0 0 0.188rem var(--ic-action-default),\n    0 0 0 0.5rem var(--ic-action-default-active-alpha);\n}\n\n.ic-switch-disabled {\n  cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n  stroke: var(--ic-architectural-300);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n  stroke: var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n  background-color: var(--ic-architectural-80);\n  border: var(--ic-space-1px) dashed var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled ~ .ic-switch-checked-status {\n  color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n  background-color: var(--ic-status-info-background);\n  border: var(--ic-space-1px) dashed #98c9f5;\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-small {\n  gap: var(--ic-space-xxxs);\n}\n\n.ic-switch-small .ic-switch-checked-status {\n  padding-left: 0.375rem;\n}\n\n.ic-switch-small .ic-switch-toggle {\n  width: var(--ic-space-xxl);\n  height: var(--ic-space-lg);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  left: var(--ic-space-xxs);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-lg), -50%);\n}\n\n::slotted(*) {\n  margin-left: var(--ic-space-sm);\n}\n\n::slotted(svg) {\n  fill: currentcolor;\n}\n\n@media (forced-colors: active) {\n  .ic-switch-toggle::before,\n  .ic-switch-input:checked + .ic-switch-toggle {\n    border: var(--ic-hc-border);\n  }\n\n  .ic-switch-input:checked + .ic-switch-toggle::before {\n    transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);\n  }\n\n  .ic-switch-input:disabled + .ic-switch-toggle,\n  .ic-switch-input:disabled:checked + .ic-switch-toggle,\n  .ic-switch-input:disabled + .ic-switch-toggle::before {\n    border-color: GrayText;\n  }\n\n  .ic-switch-input:disabled ~ .ic-switch-checked-status {\n    color: GrayText;\n  }\n\n  .ic-switch-disabled .ic-switch-icon-circle,\n  .ic-switch-disabled .ic-switch-icon-line {\n    stroke: GrayText;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot right-adornment - Content is placed to the right of switch before state label.\n */\n@Component({\n  tag: \"ic-switch\",\n  styleUrl: \"ic-switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Switch {\n  private inputId = `ic-switch-input-${inputIds++}`;\n\n  @Element() el: HTMLIcSwitchElement;\n\n  /**\n   * The aria-label applied to the switch when no visual 'name' is provided.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n  /**\n   * If `true`, the switch will display as checked.\n   */\n  @Prop() checked?: boolean = false;\n  /**\n   * If `true`, the small styling will be applied to the switch.\n   */\n  @Prop() small?: boolean = false;\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n  /**\n   * If `true`, the switch will render the On/Off state text.\n   */\n  @Prop() showState?: boolean = false;\n\n  /**\n   * The value of the toggle does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n   * it's only used when the toggle participates in a native `<form>`.\n   */\n  @Prop() value?: string | null = \"on\";\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  @State() checkedState: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  private handleChange = () => {\n    this.checkedState = !this.checkedState;\n    this.icChange.emit({\n      checked: this.checkedState,\n      value: this.value,\n    });\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checkedState = this.initiallyChecked;\n  };\n\n  /**\n   * Sets focus on the switch.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"input\")) {\n      this.el.shadowRoot.querySelector(\"input\").focus();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.checkedState = this.checked;\n    addFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Switch\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  render() {\n    const {\n      label,\n      checkedState,\n      small,\n      disabled,\n      name,\n      showState,\n      value,\n      hideLabel,\n      helperText,\n      inputId,\n    } = this;\n\n    renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n\n    const describedBy = getInputDescribedByText(\n      inputId,\n      helperText !== \"\",\n      false\n    );\n\n    return (\n      <Host>\n        <label\n          class={{\n            [\"ic-switch-container\"]: true,\n            [\"ic-switch-disabled\"]: disabled,\n            [\"ic-switch-small\"]: small,\n          }}\n          htmlFor={inputId}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              readonly={true}\n              disabled={disabled}\n              class={{\n                [\"ic-switch-label\"]: true,\n                [\"ic-switch-label-small\"]: small,\n              }}\n            ></ic-input-label>\n          )}\n          {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n          <input\n            checked={checkedState}\n            disabled={disabled}\n            aria-label={label}\n            aria-checked={checkedState ? \"true\" : \"false\"}\n            aria-describedby={describedBy}\n            role=\"switch\"\n            class=\"ic-switch-input\"\n            type=\"checkbox\"\n            name=\"toggle\"\n            id={inputId}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={this.handleChange}\n          />\n          <span class=\"ic-switch-toggle\">\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <line\n                class=\"ic-switch-icon-line\"\n                x1=\"9\"\n                y1={small ? \"2\" : \"1\"}\n                x2=\"9\"\n                y2={small ? \"8\" : \"9\"}\n              />\n            </svg>\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                class=\"ic-switch-icon-circle\"\n                fill=\"none\"\n                cx=\"5\"\n                cy=\"5\"\n                r={small ? \"3.335\" : \"4.445\"}\n              />\n            </svg>\n          </span>\n          <slot name=\"right-adornment\"></slot>\n          {showState && (\n            <ic-typography\n              aria-hidden=\"true\"\n              variant=\"label\"\n              class=\"ic-switch-checked-status\"\n            >\n              {checkedState ? \"On\" : \"Off\"}\n            </ic-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-3498db0b.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,H as a,g as o}from"./p-589f6dd3.js";import{d as c,a as r,r as n,e as s,f as d,i as l}from"./p-471820e6.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(.disabled){color:var(--ic-architectural-200);pointer-events:none}.container{display:flex;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);margin-bottom:var(--ic-space-xxs);align-items:center}:host(.small) .container{margin-bottom:var(--ic-space-xxxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;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 var(--ic-architectural-300);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast);flex-shrink:0}.checkbox:checked{background-color:var(--ic-action-default);border:var(--ic-space-1px) solid var(--ic-action-default);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-architectural-200)}.checkbox:indeterminate,.checkbox.indeterminate:checked{background-color:transparent;border:0.125rem solid var(--ic-action-default)}.checkbox:checked:hover{background-color:var(--ic-action-default-hover)}.checkbox:indeterminate:hover,.checkbox.indeterminate:checked:hover{background-color:var(--ic-action-default-bg-hover);border:0.125rem solid var(--ic-action-default-hover)}.checkbox:checked:active{background-color:var(--ic-action-default-active)}.checkbox:indeterminate:active,.checkbox.indeterminate:checked:active{background-color:var(--ic-action-default-bg-active);border:0.125rem solid var(--ic-action-default-active)}.checkbox:hover{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-hover)}.checkbox:active{background-color:var(--ic-action-default-bg-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active);border:var(--ic-space-1px) solid var(--ic-action-default-active)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:var(--ic-space-1px) dashed var(--ic-architectural-200)}.checkbox-label{padding-left:var(--ic-space-sm)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:white;z-index:1;background-color:transparent;pointer-events:none;flex-shrink:0}.indeterminate-symbol{position:relative;width:0.875rem;height:var(--ic-space-xxxs);right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-action-default);pointer-events:none;flex-shrink:0}.container:hover .indeterminate-symbol{background-color:var(--ic-action-default-hover)}.container:active .indeterminate-symbol{background-color:var(--ic-action-default-active)}.additional-field-wrapper{margin-left:calc(var(--ic-space-md) + var(--ic-space-lg));margin-top:calc(var(--ic-space-sm) / 2)}.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)}.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-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){.checkbox{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert;transition:none}.checkbox:checked{transition:none}.checkbox:focus-visible{outline:0.125rem solid highlight}.checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.checkmark{fill:none}.indeterminate-symbol{display:none}}';const b=class{constructor(t){e(this,t);this.checkboxChecked=i(this,"checkboxChecked",7);this.icCheck=i(this,"icCheck",7);this.handleClick=()=>{this.checked=!this.checked;this.icCheck.emit();this.checkboxChecked.emit()};this.handleFormReset=()=>{this.checked=this.initiallyChecked};this.IC_TEXT_FIELD="ic-text-field";this.checked=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.indeterminate=false;this.small=false;this.initiallyChecked=this.checked}async setFocus(){const e=this.host.shadowRoot.querySelector(".checkbox");if(e){e.focus()}}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.host.querySelector(this.IC_TEXT_FIELD);if(!this.checked){e&&e.setAttribute("disabled","")}else{e&&e.removeAttribute("disabled")}}else{if(!this.checked){this.additionalFieldContainer.style.display="none"}else{this.additionalFieldContainer.style.display="flex"}}}componentWillLoad(){var e;c(this.host,this.handleFormReset);(e=this.host.querySelector(this.IC_TEXT_FIELD))===null||e===void 0?void 0:e.addEventListener("icChange",(e=>e.stopImmediatePropagation()))}componentDidLoad(){r([{prop:this.label,propName:"label"},{prop:this.value,propName:"value"}],"Checkbox")}disconnectedCallback(){var e;n(this.host,this.handleFormReset);(e=this.host.querySelector(this.IC_TEXT_FIELD))===null||e===void 0?void 0:e.removeEventListener("icChange",(e=>e.stopImmediatePropagation()))}render(){let e=`ic-checkbox-${this.label!==undefined?this.label:this.value}-${this.groupLabel}`;e=e.replace(/ /g,"-");this.checked?s(true,this.host,this.name,this.checked&&this.value,this.disabled):d(this.host);return t(a,{class:{["disabled"]:this.disabled,["small"]:this.small}},t("div",{class:"container"},this.checked&&!this.indeterminate&&t("svg",{class:"checkmark",width:"1.5rem",height:"1.5rem",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","fill-rule":"evenodd","clip-rule":"evenodd"},t("title",null,"checkmark icon"),t("path",{d:"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z"})),this.checked&&this.indeterminate&&t("div",{class:"indeterminate-symbol"}),t("input",{role:"checkbox",class:{["checkbox"]:true,["checked"]:this.checked,["indeterminate"]:this.indeterminate},type:"checkbox",name:this.name,id:e,value:this.value,disabled:this.disabled?true:null,checked:this.checked,indeterminate:this.indeterminate,onClick:this.handleClick}),t("ic-typography",{class:"checkbox-label",variant:"body"},t("label",{htmlFor:e},this.label))),l(this.host,"additional-field")&&t("div",{class:"dynamic-container",ref:e=>this.additionalFieldContainer=e},this.additionalFieldDisplay==="dynamic"&&t("div",{class:"branch-corner"}),t("div",null,this.additionalFieldDisplay==="dynamic"&&t("ic-typography",{variant:"caption"},t("p",{class:"dynamic-text","aria-live":"polite"},this.dynamicText)),t("div",{class:{"additional-field-wrapper":this.additionalFieldDisplay==="static"}},t("slot",{name:"additional-field"})))))}static get delegatesFocus(){return true}get host(){return o(this)}};b.style=h;export{b as ic_checkbox};
-//# sourceMappingURL=p-3498db0b.entry.js.map

package/dist/core/p-3498db0b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"names":["icCheckboxCss","Checkbox","this","handleClick","checked","icCheck","emit","checkboxChecked","handleFormReset","initiallyChecked","IC_TEXT_FIELD","[object Object]","checkboxEl","host","shadowRoot","querySelector","focus","additionalFieldDisplay","textfield","setAttribute","removeAttribute","additionalFieldContainer","style","display","addFormResetListener","_a","addEventListener","e","stopImmediatePropagation","onComponentRequiredPropUndefined","prop","label","propName","value","removeFormResetListener","removeEventListener","id","undefined","groupLabel","replace","renderHiddenInput","name","disabled","removeHiddenInput","h","Host","class","small","indeterminate","width","height","viewBox","xmlns","fill-rule","clip-rule","d","role","type","onClick","variant","htmlFor","isSlotUsed","ref","el","aria-live","dynamicText","additional-field-wrapper"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.disabled) {\n  color: var(--ic-architectural-200);\n  pointer-events: none;\n}\n\n.container {\n  display: flex;\n  width: fit-content;\n  padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-xxs);\n  align-items: center;\n}\n\n:host(.small) .container {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\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 var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n  flex-shrink: 0;\n}\n\n.checkbox:checked {\n  background-color: var(--ic-action-default);\n  border: var(--ic-space-1px) solid var(--ic-action-default);\n  transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n  background-color: var(--ic-architectural-200);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n  background-color: transparent;\n  border: 0.125rem solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--ic-action-default-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  border: 0.125rem solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n  background-color: var(--ic-action-default-active);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n  background-color: var(--ic-action-default-bg-active);\n  border: 0.125rem solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\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-hover);\n}\n\n.checkbox:active {\n  background-color: var(--ic-action-default-bg-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n  border: var(--ic-space-1px) solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n  border: var(--ic-space-1px) dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n  padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n  cursor: pointer;\n}\n\n.checkmark {\n  position: relative;\n  right: calc(-1 * var(--ic-space-lg));\n  margin-left: calc(-1 * var(--ic-space-lg));\n  fill: white;\n  z-index: 1;\n  background-color: transparent;\n  pointer-events: none;\n  flex-shrink: 0;\n}\n\n.indeterminate-symbol {\n  position: relative;\n  width: 0.875rem;\n  height: var(--ic-space-xxxs);\n  right: -1.188rem;\n  margin-left: -0.875rem;\n  z-index: 1;\n  background-color: var(--ic-action-default);\n  pointer-events: none;\n  flex-shrink: 0;\n}\n\n.container:hover .indeterminate-symbol {\n  background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n  background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n  margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\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}\n\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-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  .checkbox {\n    appearance: revert;\n    transition: none;\n  }\n\n  .checkbox:checked {\n    transition: none;\n  }\n\n  .checkbox:focus-visible {\n    outline: 0.125rem solid highlight;\n  }\n\n  .checkbox:disabled:not(:checked) {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .checkmark {\n    fill: none;\n  }\n\n  .indeterminate-symbol {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n  /**\n   * If `true`, the checkbox will be set to the checked state.\n   */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: string;\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop() name: string;\n  /**\n   * The group label for the checkbox.\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   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n\n  /**\n   * If true, the small styling will be applied to the checkbox.\n   */\n  @Prop() small?: boolean = false;\n\n  @State() initiallyChecked = this.checked;\n\n  @Element() host: HTMLIcCheckboxElement;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  private additionalFieldContainer: HTMLDivElement;\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.icCheck.emit();\n    this.checkboxChecked.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const checkboxEl: HTMLElement =\n      this.host.shadowRoot.querySelector(\".checkbox\");\n    if (checkboxEl) {\n      checkboxEl.focus();\n    }\n  }\n\n  private IC_TEXT_FIELD: string = \"ic-text-field\";\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(this.IC_TEXT_FIELD);\n      if (!this.checked) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    } else {\n      if (!this.checked) {\n        this.additionalFieldContainer.style.display = \"none\";\n      } else {\n        this.additionalFieldContainer.style.display = \"flex\";\n      }\n    }\n  }\n\n  componentWillLoad(): void {\n    addFormResetListener(this.host, this.handleFormReset);\n    this.host\n      .querySelector(this.IC_TEXT_FIELD)\n      ?.addEventListener(\"icChange\", (e) => e.stopImmediatePropagation());\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n    this.host\n      .querySelector(this.IC_TEXT_FIELD)\n      ?.removeEventListener(\"icChange\", (e) => e.stopImmediatePropagation());\n  }\n\n  render() {\n    let id = `ic-checkbox-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    id = id.replace(/ /g, \"-\");\n\n    this.checked\n      ? renderHiddenInput(\n          true,\n          this.host,\n          this.name,\n          this.checked && this.value,\n          this.disabled\n        )\n      : removeHiddenInput(this.host);\n\n    return (\n      <Host class={{ [\"disabled\"]: this.disabled, [\"small\"]: this.small }}>\n        <div class=\"container\">\n          {this.checked && !this.indeterminate && (\n            <svg\n              class=\"checkmark\"\n              width=\"1.5rem\"\n              height=\"1.5rem\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          {this.checked && this.indeterminate && (\n            <div class=\"indeterminate-symbol\" />\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              [\"checkbox\"]: true,\n              [\"checked\"]: this.checked,\n              [\"indeterminate\"]: this.indeterminate,\n            }}\n            type=\"checkbox\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.checked}\n            indeterminate={this.indeterminate}\n            onClick={this.handleClick}\n          ></input>\n          <ic-typography class=\"checkbox-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n        {isSlotUsed(this.host, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\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\" aria-live=\"polite\">\n                    {this.dynamicText}\n                  </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-36e0671f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":["icTopNavigationCss","TopNavigation","this","hasAppIcon","hasNavigation","hasIconButtons","hasSearchSlotContent","searchBar","initialiseSearchBar","slot","getSlot","el","tagName","querySelector","hideLabel","emitTopNavResized","size","event","CustomEvent","detail","dispatchEvent","menuButtonClick","showNavMenu","searchButtonMouseDownHandler","searchButtonClick","searchButtonClickHandler","toggleSearchBar","resizeObserver","resizeObserverCallback","currSize","deviceSize","DEVICE_SIZES","L","mobileSearchBarVisible","document","activeElement","undefined","setAttribute","removeAttribute","setTimeout","focus","runResizeObserver","ResizeObserver","getCurrentDeviceSize","observe","XL","getThemeForegroundColor","[object Object]","newValue","oldValue","onComponentPropUndefinedChange","menuBtn","shadowRoot","ev","searchValue","value","theme","foregroundColor","mode","mobileSearchButtonEl","updateAriaLabel","hasFullWidthSearchBar","fullWidth","show","navMenuVisible","icNavigationMenuOpened","emit","body","style","height","overflow","icNavigationMenuClosed","isSlotUsed","checkResizeObserver","onComponentRequiredPropUndefined","prop","appTitle","propName","disconnect","hasMenuContent","status","version","searchButtonSize","S","appTitleVariant","hasTitle","mobileSearchButtonTitle","menuSize","Component","attrs","href","h","Host","class","IcThemeForegroundEnum","Dark","aligned","contentAligned","full-height","role","Object","assign","aria-hidden","name","variant","aria-label","id","ref","onMouseDown","appearance","onClick","xmlns","viewBox","fill","d","aria-labelledby","aria-expanded","menuOpen","aria-haspopup","width","tabindex","inline"],"mappings":"yLAAA,MAAMA,EAAqB,6/NC4CdC,EAAa,6JAgEhBC,KAAAC,WAAsB,MACtBD,KAAAE,cAAyB,MACzBF,KAAAG,eAA0B,MAC1BH,KAAAI,qBAAgC,MAChCJ,KAAAK,UAAoC,KAkCpCL,KAAAM,oBAAsB,KAC5B,GAAIN,KAAKI,qBAAsB,CAC7B,MAAMG,EAAOC,EAAQR,KAAKS,GAAI,UAC9B,GAAIF,GAAQA,EAAKG,UAAY,gBAAiB,CAC5CV,KAAKK,UAAYE,OACZ,GAAIA,GAAQA,EAAKG,UAAY,OAAQ,CAC1CV,KAAKK,UAAYE,EAAKI,cACpB,iBAIJ,GAAIX,KAAKK,YAAc,KAAM,CAC3BL,KAAKK,UAAUO,UAAY,QAwBzBZ,KAAAa,kBAAqBC,IAC3B,MAAMC,EAAQ,IAAIC,YAAY,gBAAiB,CAAEC,OAAQ,CAAEH,KAAMA,KACjEd,KAAKS,GAAGS,cAAcH,IAGhBf,KAAAmB,gBAAkB,KACxBnB,KAAKoB,YAAY,OAgBXpB,KAAAqB,6BAA+B,KACrCrB,KAAKsB,kBAAoB,MAGnBtB,KAAAuB,yBAA2B,KACjCvB,KAAKwB,kBACLxB,KAAKsB,kBAAoB,OAGnBtB,KAAAyB,eAAiC,KAEjCzB,KAAA0B,uBAA0BC,IAChC,GAAIA,IAAa3B,KAAK4B,WAAY,CAChC5B,KAAK4B,WAAaD,EAClB,GAAIA,EAAWE,EAAaC,EAAG,CAC7B9B,KAAKoB,YAAY,OACjB,GAAIpB,KAAK+B,uBAAwB,CAC/B/B,KAAKwB,mBAGTxB,KAAKa,kBAAkBc,GACvB,GACEK,SAASC,gBAAkB,MAC3BD,SAASC,gBAAkBC,WAC3BF,SAASC,cAAcvB,UAAY,gBACnC,CACAV,KAAKK,UAAU8B,aAAa,SAAU,QAEtCnC,KAAKK,UAAU+B,gBAAgB,UAC/BC,YAAW,KACTrC,KAAKK,UAAUiC,UACd,QAKDtC,KAAAuC,kBAAoB,KAC1BvC,KAAKyB,eAAiB,IAAIe,gBAAe,KACvC,MAAMb,EAAWc,IACjBzC,KAAK0B,uBAAuBC,MAG9B3B,KAAKyB,eAAeiB,QAAQ1C,KAAKS,uCA/LZ,iBAKG,eAKD,uBAKa,yBAKZ,oBAEG,sBACCoB,EAAac,+BACA,0BACR,uBACJ,iCACc,6BACP,2BACQC,+BACJ,MAG1CC,iBAAiBC,EAAkBC,GAGjCC,EACED,EACAD,EACA9C,KAAKM,qBAsBTuC,yBACE7C,KAAKoB,YAAY,OACjB,MAAM6B,EAAUjD,KAAKS,GAAGyC,WAAWvC,cACjC,gBAEFsC,EAAQX,QAIVO,uBAAuBM,GACrB,GAAIA,EAAGlC,SAAW,KAAM,CACtB,GAAIjB,KAAK+B,yBAA2B/B,KAAKsB,kBAAmB,CAE1DtB,KAAKwB,kBAEPxB,KAAKoD,YAAcD,EAAGlC,OAAOoC,OAKjCR,yBAAyBM,GACvBnD,KAAKoD,YAAcD,EAAGlC,OAAOoC,MAI/BR,mBAAmBM,GACjB,MAAMG,EAAiBH,EAAGlC,OAC1BjB,KAAKuD,gBAAkBD,EAAME,KAoBvBX,kBACN7C,KAAK+B,wBAA0B/B,KAAK+B,uBAEpC,GAAI/B,KAAKK,YAAc,KAAM,CAC3B,GAAIL,KAAK+B,uBAAwB,CAC/B/B,KAAKyD,qBAAqBC,gBAAgB,eAC1C1D,KAAK2D,sBAAwB,KAC7B3D,KAAKK,UAAUuD,UAAY,KAC3BvB,YAAW,KACTrC,KAAKK,UAAUiC,UACd,SACE,CACLtC,KAAKyD,qBAAqBC,gBAAgB,eAC1C1D,KAAK2D,sBAAwB,MAC7B3D,KAAKK,UAAUuD,UAAY,QAczBf,YAAYgB,GAClB7D,KAAK8D,eAAiBD,EACtB,GAAIA,EAAM,CACR7D,KAAK+D,uBAAuBC,OAC5BhC,SAASiC,KAAKC,MAAMC,OAAS,OAC7BnC,SAASiC,KAAKC,MAAME,SAAW,aAC1B,CACLpE,KAAKqE,uBAAuBL,OAC5BhC,SAASiC,KAAKC,MAAMC,OAAS,OAC7BnC,SAASiC,KAAKC,MAAME,SAAW,QAiDnCvB,oBACE7C,KAAKC,WAAaqE,EAAWtE,KAAKS,GAAI,YACtCT,KAAKE,cAAgBoE,EAAWtE,KAAKS,GAAI,cACzCT,KAAKG,eAAiBmE,EAAWtE,KAAKS,GAAI,WAC1CT,KAAKI,qBAAuBkE,EAAWtE,KAAKS,GAAI,UAChDT,KAAK4B,WAAaa,IAClBzC,KAAKM,sBAGPuC,sBACE7C,KAAKE,cAAgBoE,EAAWtE,KAAKS,GAAI,cACzCT,KAAKI,qBAAuBkE,EAAWtE,KAAKS,GAAI,UAChDT,KAAKG,eAAiBmE,EAAWtE,KAAKS,GAAI,WAC1CT,KAAKC,WAAaqE,EAAWtE,KAAKS,GAAI,YAGxCoC,mBACE0B,EAAoBvE,KAAKuC,oBAExB+B,EAAWtE,KAAKS,GAAI,cACnB+D,EACE,CAAC,CAAEC,KAAMzE,KAAK0E,SAAUC,SAAU,cAClC,kBAIN9B,uBACE,GAAI7C,KAAKyB,iBAAmB,KAAM,CAChCzB,KAAKyB,eAAemD,cAIxB/B,SACE,MAAMgC,EACJ7E,KAAKE,eACLF,KAAKG,gBACLH,KAAK8E,SAAW,IAChB9E,KAAK+E,UAAY,GAEnB,MAAMC,EACJhF,KAAK4B,YAAcC,EAAaoD,EAAI,UAAY,QAElD,IAAIC,EAAwC,KAE5C,MAAMC,EAAWnF,KAAK0E,WAAa,IAAM1E,KAAK0E,WAAaxC,UAE3D,GAAIlC,KAAK4B,YAAcC,EAAaC,EAAG,CACrCoD,EAAkB,KAClB,GAAIlF,KAAK4B,YAAcC,EAAaoD,EAAG,CACrCC,EAAkB,kBAItB,MAAME,EAA0BpF,KAAK+B,uBACjC,cACA,cACJ,MAAMsD,EAAWrF,KAAK4B,YAAcC,EAAaoD,EAAI,QAAU,UAE/D,MAAMK,EAAYhB,EAAWtE,KAAKS,GAAI,aAAe,MAAQ,IAE7D,MAAM8E,EAAQD,GAAa,KAAO,CAChCE,KAAMxF,KAAKwF,MAGb,OACEC,EAACC,EAAI,CACHC,MAAO,CACL9C,CAAC,uBAAwB7C,KAAK2D,sBAC9Bd,CAAC+C,EAAsBC,MACrB7F,KAAKuD,kBAAoBqC,EAAsBC,OAGnDJ,EAAA,MAAA,CAAKE,MAAM,kBACTF,EAAA,uBAAA,CAAsBK,QAAS9F,KAAK+F,eAAcC,cAAA,MAChDP,EAAA,SAAA,CAAQQ,KAAK,UACXR,EAAA,MAAA,CAAKE,MAAM,uBACTF,EAAA,MAAA,CAAKE,MAAM,0BACPR,GAAYb,EAAWtE,KAAKS,GAAI,eAChCgF,EAACH,EAASY,OAAAC,OAAA,CAACR,MAAM,cAAiBJ,GAC/BvF,KAAKC,YACJwF,EAAA,MAAA,CAAKE,MAAM,qBAAoBS,cAAa,QAC1CX,EAAA,OAAA,CAAMY,KAAK,cAGfZ,EAAA,gBAAA,CAAea,QAASpB,GACtBO,EAAA,KAAA,CAAIE,MAAM,cACPrB,EAAWtE,KAAKS,GAAI,aACnBgF,EAAA,OAAA,CAAMY,KAAK,cAEXrG,KAAa,YAMtBA,KAAK8E,SAAW,IACfW,EAAA,MAAA,CAAKE,MAAM,cACTF,EAAA,gBAAA,CAAAc,aACa,UACXD,QAAQ,kBACRX,MAAM,mBAEL3F,KAAK8E,SAIX9E,KAAK+E,UAAY,IAChBU,EAAA,MAAA,CAAKE,MAAM,eACTF,EAAA,gBAAA,CACEa,QAAQ,QACRX,MAAM,mBAAkBY,aACb,eAEVvG,KAAK+E,YAMZ/E,KAAKI,sBAAwByE,IAC7BY,EAAA,MAAA,CAAKE,MAAM,yBACTF,EAAA,MAAA,CAAKE,MAAM,4BACR3F,KAAK4B,WAAaC,EAAaC,GAC9B2D,EAAA,OAAA,CAAMY,KAAK,WAGZrG,KAAKI,sBACJJ,KAAK4B,YAAcC,EAAaC,GAC9B2D,EAAA,YAAA,CACEe,GAAG,uBACHC,IAAMhG,GAAQT,KAAKyD,qBAAuBhD,EAC1CiG,YAAa1G,KAAKqB,6BAClBiF,QAAQ,OACRxF,KAAMkE,EAAgBuB,aACVnB,EACZuB,WAAY3G,KAAKuD,gBACjBqD,QAAS5G,KAAKuB,0BAEdkE,EAAA,OAAA,CAAMY,KAAK,cAAc9F,KAAK,QAC5BkF,EAAA,MAAA,CACEoB,MAAM,6BACNC,QAAQ,YACRC,KAAK,WAELtB,EAAA,OAAA,CAAMuB,EAAE,kBAAkBD,KAAK,SAC/BtB,EAAA,OAAA,CAAMuB,EAAE,kPAMjBhH,KAAKG,gBAAkBH,KAAK4B,WAAaC,EAAaC,GACrD2D,EAAA,MAAA,CAAKE,MAAM,0BACTF,EAAA,OAAA,CAAMY,KAAK,aAGdxB,GAAkB7E,KAAK4B,YAAcC,EAAaC,GACjD2D,EAAA,MAAA,CAAKE,MAAM,yBACTF,EAAA,OAAA,CACEe,GAAG,kCACHb,MAAM,kCAAiCS,cAC3B,QAAM,0BAIpBX,EAAA,MAAA,CAAAwB,kBACkB,kCAAiCb,cACpCpG,KAAK8D,eAAiB,OAAS,SAE5C2B,EAAA,YAAA,CACEe,GAAG,cACHG,WAAY3G,KAAKuD,gBACjB+C,QAAQ,YAAWY,gBACJlH,KAAKmH,SAAW,OAAS,QAAOC,gBACjC,OAAMb,aACR,QACVvG,KAAKE,cAAgB,aAAe,aAEtCY,KAAMuE,EACNuB,QAAS5G,KAAKmB,iBAAe,OAG7BsE,EAAA,MAAA,CACEoB,MAAM,6BACN1C,OAAO,OACP2C,QAAQ,YACRO,MAAM,OACNN,KAAK,UACLxG,KAAK,QAELkF,EAAA,OAAA,CAAMuB,EAAE,kBAAkBD,KAAK,SAC/BtB,EAAA,OAAA,CAAMuB,EAAE,yDAWzBhH,KAAK+B,wBACJ0D,EAAA,MAAA,CAAKE,MAAM,wBACTF,EAAA,OAAA,CAAMY,KAAK,YAIdrG,KAAKE,eAAiBF,KAAK4B,WAAaC,EAAaC,GACpD2D,EAAA,MAAA,CAAKE,MAAM,mBACTF,EAAA,OAAA,CACEe,GAAG,2BACHb,MAAM,2BAA0BS,cACpB,QAAM,mBAIpBX,EAAA,MAAA,CAAAwB,kBACkB,2BAChBtB,MAAM,uBAENF,EAAA,uBAAA,CAAsBkB,WAAY3G,KAAKuD,iBACrCkC,EAAA,KAAA,CAAIE,MAAM,uBAAuB2B,SAAS,MACxC7B,EAAA,OAAA,CAAMY,KAAK,sBAS1BrG,KAAK8D,gBACJ2B,EAAA,qBAAA,CACEV,QAAS/E,KAAK+E,QACdD,OAAQ9E,KAAK8E,OACba,MAAO,CACL9C,CAAC,UAAW7C,KAAKuH,SAGnB9B,EAAA,MAAA,CAAKE,MAAM,oBAAoBpF,KAAK,WAClCkF,EAAA,OAAA,CAAMY,KAAK,aAEbZ,EAAA,KAAA,CAAIlF,KAAK,cACPkF,EAAA,OAAA,CAAMY,KAAK","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  color: var(--ic-theme-text);\n  width: 100%;\n  position: relative;\n}\n\n:host .top-navigation {\n  background-color: var(--ic-theme-primary);\n  height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n  width: 100%;\n}\n\n:host .title-link {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active,\n:host .title-link ::slotted(a),\n:host .title-link:visited ::slotted(a),\n:host .title-link:active ::slotted(a) {\n  color: var(--ic-theme-text);\n  text-decoration: none;\n  outline: none;\n}\n\n:host .title-link:hover:not(:focus) {\n  background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active:not(:focus) {\n  background-color: var(--ic-theme-active);\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n  font-weight: 600;\n}\n\n:host .nav-panel-container {\n  border-top: var(--ic-keyline-lighten);\n  padding: 0 var(--ic-space-lg);\n  margin-left: calc(-1 * var(--section-container-margin));\n  margin-right: calc(-1 * var(--section-container-margin));\n  display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n  border-top: var(--ic-keyline-darken);\n}\n\n.top-panel-container {\n  display: flex;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.navigation-tabs {\n  margin-top: calc(-1 * var(--ic-space-1px));\n}\n\n.app-details-container {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n  display: flex;\n  padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n  display: flex;\n  margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n  display: flex;\n}\n\n.title-wrap {\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  -ms-word-break: break-all;\n  word-break: break-word;\n  hyphens: auto;\n}\n\n:host .app-status {\n  border-radius: var(--ic-space-md);\n  background-color: var(--ic-architectural-white);\n  color: var(--ic-color-primary-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n  flex: 1 1 0;\n  max-width: fit-content;\n}\n\n:host(.dark) .app-status {\n  background-color: var(--ic-theme-text);\n  color: var(--ic-color-white-text);\n}\n\n:host .app-version {\n  border-radius: var(--ic-space-md);\n  background-color: var(--ic-theme-active);\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n  margin-left: var(--ic-space-xs);\n  flex: 1 1 0;\n  max-width: fit-content;\n}\n\nslot[name=\"app-icon\"]::slotted(svg) {\n  fill: var(--ic-theme-text);\n  width: 2em;\n  height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n  fill: var(--ic-theme-text);\n}\n\n.search-menu-container {\n  justify-content: right;\n  display: flex;\n  align-items: center;\n}\n\n.menu-button-container {\n  margin-left: var(--ic-space-md);\n}\n\n.menu-button-container .navigation-landmark-button-text {\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n.search-actions-container {\n  display: flex;\n}\n\n.menu-buttons-slot {\n  display: flex;\n  flex-direction: column;\n}\n\n.navigation-landmark-text {\n  position: absolute;\n  width: var(--ic-space-1px);\n  height: var(--ic-space-1px);\n  padding: 0;\n  margin: calc(-1 * var(--ic-space-1px));\n  overflow: hidden;\n}\n\n.navigation-item-list {\n  display: flex;\n  list-style: none;\n  height: 2.75rem;\n}\n\n.navigation-item-list::-webkit-scrollbar {\n  display: none;\n}\n\n:host ic-section-container {\n  padding-bottom: 0 !important;\n  padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n  .app-details-container {\n    margin-right: var(--ic-space-lg);\n  }\n}\n\n/* large */\n@media screen and (max-width: 1200px) {\n  :host .nav-panel-container {\n    padding: 0 var(--ic-space-md);\n  }\n}\n\n/* medium */\n@media screen and (max-width: 992px) {\n  :host .nav-panel-container,\n  :host .app-status,\n  :host .app-version {\n    display: none;\n  }\n\n  :host .title-link {\n    margin-right: var(--ic-space-xs);\n  }\n\n  .search-menu-container {\n    max-width: 10rem;\n  }\n\n  .search-bar-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-top: var(--ic-keyline-darken);\n    height: 4rem;\n    padding-left: var(--ic-space-md);\n    padding-right: var(--ic-space-md);\n    margin-left: calc(-1 * var(--section-container-margin));\n    margin-right: calc(-1 * var(--section-container-margin));\n  }\n}\n\n/* x small */\n@media screen and (max-width: 576px) {\n  :host .title-link {\n    margin-right: var(--ic-space-xxxs);\n    word-break: break-word;\n    hyphens: none;\n  }\n\n  .top-panel-container {\n    min-height: 2.5rem;\n  }\n\n  .searchbox-inline {\n    display: none;\n  }\n\n  .search-bar-container {\n    margin-top: 0;\n    height: 3.5rem;\n    padding-left: var(--ic-space-xs);\n    padding-right: var(--ic-space-xs);\n  }\n\n  .menu-button-container {\n    margin-left: var(--ic-space-sm);\n  }\n\n  slot[name=\"app-icon\"]::slotted(svg) {\n    width: 1.5em;\n    height: 1.5em;\n  }\n\n  slot[name=\"toggle-icon\"] svg {\n    width: 1.5em;\n    height: 1.5em;\n  }\n}\n\n@media (forced-colors: active) {\n  :host .top-navigation {\n    border-bottom: var(--ic-hc-border);\n  }\n\n  .app-status,\n  .app-version {\n    border: var(--ic-hc-border);\n  }\n\n  slot[name=\"app-icon\"]::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcTheme,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  @Element() el: HTMLIcTopNavigationElement;\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle: string;\n\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * The version info to be displayed.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  @State() menuOpen: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchValue: string = \"\";\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasFullWidthSearchBar: boolean = false;\n\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once gatbsy hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  private hasAppIcon: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private searchBar: HTMLIcSearchBarElement = null;\n  private mobileSearchButtonEl: HTMLIcButtonElement;\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    const menuBtn = this.el.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    menuBtn.focus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler(ev: CustomEvent): void {\n    if (ev.detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = ev.detail.value;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler(ev: CustomEvent): void {\n    this.searchValue = ev.detail.value;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot && slot.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot && slot.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\n          \"ic-search-bar\"\n        ) as HTMLIcSearchBarElement;\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      if (this.mobileSearchBarVisible) {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Hide search\");\n        this.hasFullWidthSearchBar = true;\n        this.searchBar.fullWidth = true;\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      } else {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Show search\");\n        this.hasFullWidthSearchBar = false;\n        this.searchBar.fullWidth = false;\n      }\n    }\n  }\n\n  private emitTopNavResized = (size: number): void => {\n    const event = new CustomEvent(\"topNavResized\", { detail: { size: size } });\n    this.el.dispatchEvent(event);\n  };\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    if (show) {\n      this.icNavigationMenuOpened.emit();\n      document.body.style.height = \"100%\";\n      document.body.style.overflow = \"hidden\";\n    } else {\n      this.icNavigationMenuClosed.emit();\n      document.body.style.height = \"auto\";\n      document.body.style.overflow = \"auto\";\n    }\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > DEVICE_SIZES.L) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.emitTopNavResized(currSize);\n      if (\n        document.activeElement !== null &&\n        document.activeElement !== undefined &&\n        document.activeElement.tagName === \"IC-SEARCH-BAR\"\n      ) {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  componentWillLoad(): void {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const hasMenuContent =\n      this.hasNavigation ||\n      this.hasIconButtons ||\n      this.status !== \"\" ||\n      this.version !== \"\";\n\n    const searchButtonSize =\n      this.deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n\n    let appTitleVariant: IcTypographyVariants = \"h3\";\n\n    const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n    if (this.deviceSize <= DEVICE_SIZES.L) {\n      appTitleVariant = \"h4\";\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        appTitleVariant = \"subtitle-small\";\n      }\n    }\n\n    const mobileSearchButtonTitle = this.mobileSearchBarVisible\n      ? \"Hide search\"\n      : \"Show search\";\n    const menuSize = this.deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n    const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: this.href,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"fullwidth-searchbar\"]: this.hasFullWidthSearchBar,\n          [IcThemeForegroundEnum.Dark]:\n            this.foregroundColor === IcThemeForegroundEnum.Dark,\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={this.contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {this.hasAppIcon && (\n                        <div class=\"app-icon-container\" aria-hidden=\"true\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      <ic-typography variant={appTitleVariant}>\n                        <h1 class=\"title-wrap\">\n                          {isSlotUsed(this.el, \"app-title\") ? (\n                            <slot name=\"app-title\"></slot>\n                          ) : (\n                            this.appTitle\n                          )}\n                        </h1>\n                      </ic-typography>\n                    </Component>\n                  )}\n                  {this.status !== \"\" && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {this.status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {this.version !== \"\" && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {this.version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(this.hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {this.deviceSize > DEVICE_SIZES.L && (\n                        <slot name=\"search\"></slot>\n                      )}\n\n                      {this.hasSearchSlotContent &&\n                        this.deviceSize <= DEVICE_SIZES.L && (\n                          <ic-button\n                            id=\"search-toggle-button\"\n                            ref={(el) => (this.mobileSearchButtonEl = el)}\n                            onMouseDown={this.searchButtonMouseDownHandler}\n                            variant=\"icon\"\n                            size={searchButtonSize}\n                            aria-label={mobileSearchButtonTitle}\n                            appearance={this.foregroundColor}\n                            onClick={this.searchButtonClickHandler}\n                          >\n                            <slot name=\"toggle-icon\" slot=\"icon\">\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                viewBox=\"0 0 24 24\"\n                                fill=\"#ffffff\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                              </svg>\n                            </slot>\n                          </ic-button>\n                        )}\n\n                      {this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (\n                        <div class=\"menu-button-container\">\n                          <span\n                            id=\"navigation-landmark-button-text\"\n                            class=\"navigation-landmark-button-text\"\n                            aria-hidden=\"true\"\n                          >\n                            Main navigation button\n                          </span>\n                          <nav\n                            aria-labelledby=\"navigation-landmark-button-text\"\n                            aria-hidden={this.navMenuVisible ? \"true\" : \"false\"}\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              appearance={this.foregroundColor}\n                              variant=\"secondary\"\n                              aria-expanded={this.menuOpen ? \"true\" : \"false\"}\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                this.hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={this.menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"icon\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                              </svg>\n                            </ic-button>\n                          </nav>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {this.mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main navigation\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll appearance={this.foregroundColor}>\n                      <ul class=\"navigation-item-list\" tabindex=\"-1\">\n                        <slot name=\"navigation\"></slot>\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {this.navMenuVisible && (\n          <ic-navigation-menu\n            version={this.version}\n            status={this.status}\n            class={{\n              [\"inline\"]: this.inline,\n            }}\n          >\n            <div class=\"menu-buttons-slot\" slot=\"buttons\">\n              <slot name=\"buttons\"></slot>\n            </div>\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-443052a7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"names":["icStepCss","Step","[object Object]","this","variant","stepType","current","ariaLabel","stepStatus","toUpperCase","slice","compactStepStyling","statusIcon","h","class","aria-hidden","innerHTML","checkIcon","warningIcon","compactStep","compact-step-progress-indicator","not-required","size","inner-label","stepNum","progress","stepTitle","lastStepNum","stepSubtitle","undefined","lastStep","nextStepTitle","icon","partialBar","finalStep","el","parentElement","classList","contains","defaultStep","Host","role","aria-label","aria-current"],"mappings":"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","sourcesContent":["/* SHARED STYLING */\n:host {\n  display: flex;\n  flex: auto;\n}\n\n.step {\n  display: flex;\n  flex: 1 1 0;\n}\n\n.step-icon {\n  display: flex;\n  justify-content: center;\n}\n\n.step-title,\n.step-subtitle,\n.step-status,\n.next-step {\n  white-space: pre-line;\n}\n\n.visually-hidden {\n  position: absolute;\n  left: -625rem;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n/* COMPACT STEP STYLING */\n:host(.compact) {\n  column-gap: var(--ic-space-sm);\n\n  --compact-step-inner-color: var(--ic-status-info);\n  --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.compact) .step {\n  column-gap: var(--ic-space-sm);\n}\n\n:host(.compact) .step:not(.current) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n  margin: var(--ic-space-xs) 0 0;\n}\n\n:host(.compact) .step-title-area {\n  display: flex;\n  flex-direction: column;\n  width: 14.25rem;\n}\n\n.info-line {\n  display: flex;\n  column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n  display: flex;\n  color: var(--ic-color-secondary-text);\n  column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n  color: var(--ic-status-success);\n}\n\n.compact-step-disabled :is(.step-title, .step-status) {\n  color: var(--ic-color-tertiary-text);\n}\n\n.step-num {\n  color: var(--ic-color-secondary-text);\n  white-space: nowrap;\n}\n\n:host(.compact) .step-icon {\n  margin: var(--ic-space-xxxs);\n}\n\n:host(.compact) .step-icon svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n/* DEFAULT STEP STYLING */\n:host(.default) .step {\n  flex-direction: column;\n}\n\n:host(.default.last-step) {\n  flex-grow: initial;\n}\n\n.step-top {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  align-self: flex-start;\n  height: 2.5rem;\n}\n\n:host(.default) .step-icon {\n  border-radius: 50%;\n}\n\n.step-icon-inner {\n  width: var(--ic-space-xl);\n  height: var(--ic-space-xl);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n}\n\n:host(.default) .current {\n  color: var(--ic-status-info);\n}\n\n:host(.default) .step-title-area {\n  margin: var(--ic-space-xs) 0;\n  padding-right: var(--ic-space-xs);\n  width: 100%;\n}\n\n:host(.default) .step-title,\n.step-subtitle {\n  width: fit-content;\n}\n\n.step-subtitle {\n  color: var(--ic-color-tertiary-text);\n}\n\n.current .step-subtitle {\n  color: var(--ic-color-primary-text);\n}\n\n:host(.default) .completed {\n  color: var(--ic-status-success);\n}\n\n.active .step-icon-inner {\n  box-shadow: inset var(--ic-architectural-200) 0 0 0 0.125rem;\n}\n\n.current .step-icon-inner {\n  background-color: var(--ic-status-info);\n  color: white;\n}\n\n.disabled {\n  color: var(--ic-architectural-200);\n}\n\n.disabled .step-icon-inner {\n  border: var(--ic-space-1px) dashed var(--ic-architectural-200);\n  width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n  height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n}\n\n.disabled .step-title-area {\n  color: var(--ic-color-tertiary-text);\n}\n\n.completed .step-icon-inner {\n  background: var(--ic-status-success);\n  box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);\n  border-radius: 100%;\n}\n\n:host(.default) .current .step-icon {\n  border: var(--ic-space-xxxs) solid var(--ic-status-info);\n  padding: var(--ic-space-xxxs);\n  margin: 0 calc(-1 * var(--ic-space-xxxs));\n\n  /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n  height: var(--ic-space-xxxs);\n  background-color: var(--ic-architectural-200);\n  margin: 0 var(--ic-space-xs);\n  border-radius: var(--ic-space-xxs);\n  width: 100%;\n}\n\n.aligned-full-width.step-connect {\n  min-width: 6.25rem;\n  width: 100%;\n}\n\n.disabled .step-connect {\n  height: 0;\n  background-color: rgb(0 0 0 / 0%);\n  border-top: 0.125rem dashed var(--ic-architectural-200);\n  border-radius: 0;\n}\n\n.completed .step-connect {\n  background-color: var(--ic-status-success);\n}\n\n.step-connect-inner {\n  width: 70%;\n  display: flex;\n  flex: auto;\n  height: var(--ic-space-xxxs);\n  border-radius: var(--ic-space-xxs);\n  background-color: var(--ic-status-info);\n}\n\n.step-icon-inner .check-icon {\n  padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n  width: var(--ic-space-md);\n  height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n  fill: var(--ic-color-white-text);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  /* COMPACT STEP */\n  .compact-step-disabled :is(.step-title, .step-status) {\n    color: GrayText;\n  }\n\n  /* DEFAULT STEP */\n  .step-connect:not(.disabled .step-connect) {\n    border: var(--ic-hc-border);\n  }\n\n  .active .step-icon-inner,\n  .completed .step-icon-inner,\n  .current .step-icon-inner {\n    forced-color-adjust: none;\n    box-shadow: inset canvastext 0 0 0 0.125rem;\n    background-color: transparent;\n    color: canvastext;\n  }\n\n  :host(.default) .current .step-icon {\n    padding: 0;\n    border: none;\n  }\n\n  .disabled,\n  .disabled .step-title-area {\n    color: GrayText;\n  }\n\n  .step-connect-inner,\n  .completed .step-connect {\n    background-color: canvastext;\n  }\n\n  .step-icon-inner .check-icon > svg > path {\n    fill: canvastext;\n  }\n}\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport { IcStepVariants, IcStepStatuses, IcStepTypes } from \"./ic-step.types\";\n\n@Component({\n  tag: \"ic-step\",\n  styleUrl: \"ic-step.css\",\n  shadow: true,\n})\nexport class Step {\n  @Element() el: HTMLIcStepElement;\n  /**\n   * @internal The variant of the step. This is managed by ic-stepper.\n   */\n  @Prop() variant!: IcStepVariants;\n\n  /**\n   * The title of the step within the stepper.\n   */\n  @Prop() stepTitle?: string;\n\n  /**\n   * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n   */\n  @Prop() stepSubtitle?: string;\n\n  /**\n   * The status of the step. Use this prop to display a status message on the step if it is required or optional.\n   */\n  @Prop() stepStatus?: IcStepStatuses;\n\n  /**\n   * The state of the step within the stepper.\n   */\n  @Prop() stepType?: IcStepTypes = \"active\";\n\n  /**\n   * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.\n   */\n  @Prop({ mutable: true }) current?: boolean = false;\n\n  /**\n   * @internal If a compact stepper is being used, this sets the styling of the step.\n   */\n  @Prop() compactStepStyling?: IcStepTypes;\n\n  /**\n   * @internal The step number, managed by ic-stepper.\n   */\n  @Prop() stepNum?: number;\n\n  /**\n   * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n   */\n  @Prop() lastStep!: boolean;\n\n  /**\n   * @internal The step number of the final step. This is managed by ic-stepper.\n   */\n  @Prop() lastStepNum?: number;\n\n  /**\n   * @internal The name of the next step. This is managed by ic-stepper.\n   */\n  @Prop() nextStepTitle?: string;\n\n  /**\n   * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n   */\n  @Prop() progress?: number;\n\n  @Watch(\"stepType\")\n  stepTypeChangeHandler(): void {\n    if (this.variant === \"compact\" && this.stepType === \"current\") {\n      this.current = true;\n    } else {\n      this.current = false;\n    }\n  }\n\n  render() {\n    // ARIA LABEL\n    let ariaLabel = \"\";\n\n    if (this.stepType === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.stepType === \"disabled\") {\n      ariaLabel = \". Non-required step\";\n    } else if (this.stepStatus === \"required\") {\n      ariaLabel = \". Required step\";\n    } else if (this.stepStatus === \"optional\") {\n      ariaLabel = \". Optional step\";\n    }\n\n    // STEP STATUS\n    let stepStatus;\n    if (this.stepStatus) {\n      stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);\n    }\n\n    // STEP TYPE\n    let stepType;\n    if (\n      this.stepType === \"disabled\" ||\n      this.compactStepStyling === \"disabled\"\n    ) {\n      stepType = \"Not required\";\n    } else if (this.compactStepStyling === \"completed\") {\n      stepType = \"Completed\";\n    }\n\n    // STATUS ICON FOR COMPACT STEP\n    let statusIcon;\n    if (\n      this.stepType === \"completed\" ||\n      this.compactStepStyling === \"completed\"\n    ) {\n      statusIcon = (\n        <span\n          class=\"check-icon step-icon\"\n          aria-hidden=\"true\"\n          innerHTML={checkIcon}\n        ></span>\n      );\n    } else if (\n      this.stepType === \"disabled\" ||\n      this.compactStepStyling === \"disabled\"\n    ) {\n      statusIcon = (\n        <span\n          class=\"warning-icon step-icon\"\n          aria-hidden=\"true\"\n          innerHTML={warningIcon}\n        ></span>\n      );\n    }\n\n    // COMPACT STEP COMPONENT\n    const compactStep = (\n      <div\n        class={{\n          [\"step\"]: true,\n          [\"current\"]: this.current,\n          [`compact-step-${this.compactStepStyling}`]:\n            !!this.compactStepStyling,\n        }}\n      >\n        <ic-loading-indicator\n          class={{\n            \"compact-step-progress-indicator\": true,\n            \"not-required\":\n              this.stepType === \"disabled\" ||\n              this.compactStepStyling === \"disabled\",\n          }}\n          aria-hidden=\"true\"\n          size=\"small\"\n          inner-label={this.stepNum}\n          progress={this.progress}\n        ></ic-loading-indicator>\n        <div class=\"step-title-area\">\n          <ic-typography variant=\"h4\" class=\"step-title\">\n            {this.stepTitle}\n          </ic-typography>\n          <div class=\"info-line\">\n            <ic-typography variant=\"caption\" class=\"step-num\">\n              {`${this.stepNum} of ${this.lastStepNum}`}\n              <span class=\"visually-hidden\"> steps</span>\n            </ic-typography>\n            {(this.stepSubtitle ||\n              this.stepType === \"completed\" ||\n              this.stepType === \"disabled\" ||\n              (this.variant === \"compact\" &&\n                !!this.compactStepStyling &&\n                this.compactStepStyling !== \"active\") ||\n              !!this.stepStatus) && (\n              <div class=\"step-status\">\n                {statusIcon !== undefined && statusIcon}\n                {(this.stepSubtitle || stepType) && (\n                  <ic-typography variant=\"caption\">\n                    {this.stepSubtitle !== null &&\n                    this.stepSubtitle !== undefined\n                      ? this.stepSubtitle\n                      : this.stepType === \"disabled\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"disabled\") ||\n                        this.stepType === \"completed\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"completed\")\n                      ? stepType\n                      : this.stepStatus && stepStatus}\n                  </ic-typography>\n                )}\n              </div>\n            )}\n          </div>\n          {this.lastStep ? (\n            <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n              Last step\n            </ic-typography>\n          ) : (\n            this.nextStepTitle !== undefined && (\n              <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n                Next<span class=\"visually-hidden\"> step is</span>:{\" \"}\n                {this.nextStepTitle}\n              </ic-typography>\n            )\n          )}\n        </div>\n      </div>\n    );\n\n    // ICON FOR DEFAULT STEP\n    let icon;\n    if (this.stepType !== \"completed\") {\n      icon = (\n        <ic-typography variant=\"subtitle-small\">\n          <span class=\"step-icon-inner\" aria-hidden=\"true\">\n            {this.stepNum}\n          </span>\n        </ic-typography>\n      );\n    } else {\n      icon = (\n        <div class=\"step-icon-inner\" aria-hidden=\"true\">\n          <span class=\"check-icon\" innerHTML={checkIcon}></span>\n        </div>\n      );\n    }\n\n    // STEP CONNECT FOR DEFAULT STEP\n    const partialBar = this.stepType === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n\n    const finalStep = !this.lastStep && (\n      <div\n        class={{\n          [\"step-connect\"]: true,\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"default\") &&\n            !this.el.parentElement.classList.contains(\"aligned-left\"),\n        }}\n      >\n        {partialBar}\n      </div>\n    );\n\n    // DEFAULT STEP COMPONENT\n    const defaultStep = (\n      <div\n        class={{\n          [\"step\"]: true,\n          [`${this.stepType}`]: true,\n        }}\n      >\n        <div class=\"step-top\">\n          <div class=\"step-icon\">{icon}</div>\n          {finalStep}\n        </div>\n        {(this.stepTitle || this.stepSubtitle || this.stepStatus) && (\n          <div class=\"step-title-area\">\n            {this.stepTitle && (\n              <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n                {this.stepTitle}\n              </ic-typography>\n            )}\n            {this.stepTitle && (this.stepSubtitle || this.stepStatus) && (\n              <ic-typography variant=\"caption\" class=\"step-subtitle\">\n                {this.stepSubtitle !== null && this.stepSubtitle !== undefined\n                  ? this.stepSubtitle\n                  : stepStatus}\n              </ic-typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`Step ${this.stepNum}${ariaLabel}`}\n        aria-current={(this.current || this.stepType === \"current\") && \"step\"}\n        class={{\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"default\") &&\n            !this.el.parentElement.classList.contains(\"aligned-left\"),\n          [`${this.variant}`]: true,\n        }}\n      >\n        {this.variant === \"compact\" ? compactStep : defaultStep}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-454b1ecd.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-skeleton/ic-skeleton.css?tag=ic-skeleton&encapsulation=shadow","src/components/ic-skeleton/ic-skeleton.tsx"],"names":["icSkeletonCss","Skeleton","[object Object]","this","el","style","height","width","default","heightOnly","widthOnly","variant","light","hasChild","firstElementChild","defaultSkeletonStyle","heightSetStyle","widthSetStyle","h","Host","class","aria-disabled"],"mappings":"yDAAA,MAAMA,EAAgB,uqGCQTC,EAAQ,4CAKoB,uBAIb,wGAU1BC,oBACE,GAAIC,KAAKC,GAAGC,MAAMC,SAAW,IAAMH,KAAKC,GAAGC,MAAME,QAAU,GAAI,CAC7DJ,KAAKK,QAAU,UACV,KAAML,KAAKC,GAAGC,MAAMC,SAAW,KAAOH,KAAKC,GAAGC,MAAME,QAAU,GAAI,CACvEJ,KAAKM,WAAa,UACb,KAAMN,KAAKC,GAAGC,MAAME,QAAU,KAAOJ,KAAKC,GAAGC,MAAMC,SAAW,GAAI,CACvEH,KAAKO,UAAY,MAIrBR,SACE,MAAMS,QAAEA,EAAOC,MAAEA,GAAUT,KAE3BA,KAAKU,WAAaV,KAAKC,GAAGU,kBAE1B,MAAMC,EAAuB,CAC3BT,OAAQK,GAAW,OAAS,MAAQA,GAAW,SAAW,OAAS,OACnEJ,MAAOI,GAAW,SAAW,OAAS,SAGxC,MAAMK,EAAiB,CACrBV,OAAQH,KAAKC,GAAGC,MAAMC,OACtBC,MAAOI,GAAW,SAAW,OAAS,SAGxC,MAAMM,EAAgB,CACpBX,OAAQK,GAAW,OAAS,MAAQA,GAAW,SAAW,OAAS,OACnEJ,MAAOJ,KAAKC,GAAGC,MAAME,OAGvB,OACEW,EAACC,EAAI,CACHC,MAAO,CACLlB,CAAC,YAAa,KACdA,CAAC,UAAWS,GAAW,SACvBT,CAAC,SAAUU,GAEbP,OACIF,KAAKU,UAAYV,KAAKK,SAAWO,GAClCZ,KAAKM,YAAcO,GACnBb,KAAKO,WAAaO,EAAcI,gBAErB,QAEdH,EAAA,OAAA","sourcesContent":["@import \"../../global/normalize.css\";\n\n@keyframes loading {\n  0% {\n    background-color: var(--ic-architectural-100);\n  }\n\n  50% {\n    background-color: var(--ic-architectural-200);\n  }\n\n  100% {\n    background-color: var(--ic-architectural-100);\n  }\n}\n\n@keyframes loading-light {\n  0% {\n    background-color: var(--ic-architectural-600);\n  }\n\n  50% {\n    background-color: var(--ic-architectural-400);\n  }\n\n  100% {\n    background-color: var(--ic-architectural-600);\n  }\n}\n\n:host {\n  display: inline-block;\n}\n\n:host(.skeleton) {\n  background-color: var(--ic-architectural-100);\n  border-radius: var(--ic-border-radius);\n  animation: loading 1200ms infinite;\n  display: inline-block;\n}\n\n:host(.skeleton) > * {\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.circle) {\n  border-radius: 50%;\n}\n\n:host(.light) {\n  background-color: var(--ic-architectural-600);\n  animation: loading-light 1200ms infinite;\n}\n\n@media (forced-colors: active) {\n  :host(.skeleton) {\n    -ms-high-contrast-adjust: none;\n    forced-color-adjust: none;\n    background: currentcolor;\n  }\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\n\n@Component({\n  tag: \"ic-skeleton\",\n  styleUrl: \"ic-skeleton.css\",\n  shadow: true,\n})\nexport class Skeleton {\n  @Element() el: HTMLIcSkeletonElement;\n  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n  /**\n   * If `true`, the skeleton will be set to the light variant.\n   */\n  @Prop() light?: boolean = false;\n\n  @State() hasChild: boolean;\n\n  @State() default: boolean;\n\n  @State() heightOnly: boolean;\n\n  @State() widthOnly: boolean;\n\n  componentWillLoad(): void {\n    if (this.el.style.height === \"\" && this.el.style.width === \"\") {\n      this.default = true;\n    } else if (!(this.el.style.height === \"\") && this.el.style.width === \"\") {\n      this.heightOnly = true;\n    } else if (!(this.el.style.width === \"\") && this.el.style.height === \"\") {\n      this.widthOnly = true;\n    }\n  }\n\n  render() {\n    const { variant, light } = this;\n\n    this.hasChild = !!this.el.firstElementChild;\n\n    const defaultSkeletonStyle = {\n      height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n      width: variant == \"circle\" ? \"25px\" : \"260px\",\n    };\n\n    const heightSetStyle = {\n      height: this.el.style.height,\n      width: variant == \"circle\" ? \"25px\" : \"260px\",\n    };\n\n    const widthSetStyle = {\n      height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n      width: this.el.style.width,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"skeleton\"]: true,\n          [\"circle\"]: variant == \"circle\",\n          [\"light\"]: light,\n        }}\n        style={\n          (!this.hasChild && this.default && defaultSkeletonStyle) ||\n          (this.heightOnly && heightSetStyle) ||\n          (this.widthOnly && widthSetStyle)\n        }\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-46371c05.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-theme/ic-theme.tsx"],"names":["Theme","this","checkThemeColorContrast","getThemeColorBrightness","BLACK_MIN_COLOR_BRIGHTNESS","WHITE_MAX_COLOR_BRIGHTNESS","console","warn","setThemeColor","color","colorRGBA","firstChar","slice","hexToRgba","toLowerCase","rgbaStrToObj","setThemeRGBA","root","document","documentElement","style","setProperty","r","toString","g","b","a","foregroundColor","getThemeForegroundColor","themeChange","emit","mode","[object Object]","h","Host"],"mappings":"8JA0BaA,EAAK,wEAgBRC,KAAAC,wBAA0B,KAChC,GACEC,IAA4BC,GAC5BD,IAA4BE,EAC5B,CACAC,QAAQC,KACN,+TAKEN,KAAAO,cAAgB,KACtB,GAAIP,KAAKQ,QAAU,KAAM,CACvB,IAAIC,EAAY,KAChB,MAAMC,EAAYV,KAAKQ,MAAMG,MAAM,EAAG,GACtC,GAAID,IAAc,IAAK,CACrBD,EAAYG,EAAUZ,KAAKQ,YACtB,GAAIE,EAAUG,gBAAkB,IAAK,CAC1CJ,EAAYK,EAAad,KAAKQ,OAEhCR,KAAKe,aAAaN,KAIdT,KAAAe,aAAgBN,IACtB,GAAIA,IAAc,KAAM,CACtB,MAAMO,EAAOC,SAASC,gBACtBF,EAAKG,MAAMC,YAAY,uBAAwBX,EAAUY,EAAEC,YAC3DN,EAAKG,MAAMC,YAAY,uBAAwBX,EAAUc,EAAED,YAC3DN,EAAKG,MAAMC,YAAY,uBAAwBX,EAAUe,EAAEF,YAC3DN,EAAKG,MAAMC,YAAY,uBAAwBX,EAAUgB,EAAEH,YAE3DtB,KAAKC,0BAEL,MAAMyB,EAAkBC,IACxB3B,KAAK4B,YAAYC,KAAK,CAAEC,KAAMJ,EAAiBlB,MAAOC,iBA/CjC,KAGzBsB,wBACE/B,KAAKO,gBA+CPwB,oBACE/B,KAAKO,gBAGPwB,SACE,OAAOC,EAACC,EAAI","sourcesContent":["import {\n  Component,\n  Host,\n  Event,\n  EventEmitter,\n  h,\n  Watch,\n  Prop,\n} from \"@stencil/core\";\n\nimport { IcColorRGBA, IcTheme } from \"../../utils/types\";\nimport {\n  getThemeForegroundColor,\n  hexToRgba,\n  rgbaStrToObj,\n} from \"../../utils/helpers\";\nimport { getThemeColorBrightness } from \"../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n  tag: \"ic-theme\",\n  shadow: true,\n})\nexport class Theme {\n  /**\n   * The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() color?: string = null;\n\n  @Watch(\"color\")\n  watchColorPropHandler(): void {\n    this.setThemeColor();\n  }\n\n  /**\n   * @internal Emitted when the theme is changed.\n   */\n  @Event() themeChange: EventEmitter<IcTheme>;\n\n  private checkThemeColorContrast = (): void => {\n    if (\n      getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n      getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n    ) {\n      console.warn(\n        `The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n      );\n    }\n  };\n\n  private setThemeColor = () => {\n    if (this.color !== null) {\n      let colorRGBA = null;\n      const firstChar = this.color.slice(0, 1);\n      if (firstChar === \"#\") {\n        colorRGBA = hexToRgba(this.color);\n      } else if (firstChar.toLowerCase() === \"r\") {\n        colorRGBA = rgbaStrToObj(this.color);\n      }\n      this.setThemeRGBA(colorRGBA);\n    }\n  };\n\n  private setThemeRGBA = (colorRGBA: IcColorRGBA) => {\n    if (colorRGBA !== null) {\n      const root = document.documentElement;\n      root.style.setProperty(\"--ic-theme-primary-r\", colorRGBA.r.toString());\n      root.style.setProperty(\"--ic-theme-primary-g\", colorRGBA.g.toString());\n      root.style.setProperty(\"--ic-theme-primary-b\", colorRGBA.b.toString());\n      root.style.setProperty(\"--ic-theme-primary-a\", colorRGBA.a.toString());\n\n      this.checkThemeColorContrast();\n\n      const foregroundColor = getThemeForegroundColor();\n      this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });\n    }\n  };\n\n  componentWillLoad(): void {\n    this.setThemeColor();\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"]}

package/dist/core/p-471820e6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/utils/constants.ts","src/utils/helpers.ts"],"names":["VARIANT_ICONS","neutral","icon","neutralIcon","ariaLabel","info","infoIcon","warning","warningIcon","error","errorIcon","success","successIcon","IC_INHERITED_ARIA","IC_DEVICE_SIZES","XS","S","M","L","XL","IC_BLOCK_COLOR_COMPONENTS","IC_FIXED_COLOR_COMPONENTS","IC_BLOCK_COLOR_EXCEPTIONS","ic-alert","BLACK_MIN_COLOR_BRIGHTNESS","WHITE_MAX_COLOR_BRIGHTNESS","DARK_MODE_THRESHOLD","inheritAttributes","element","attributes","attributeObject","forEach","attr","hasAttribute","value","getAttribute","removeAttribute","debounceEvent","event","wait","original","_original","emit","debounce","bind","func","timer","args","clearTimeout","setTimeout","renderHiddenInput","always","container","name","disabled","undefined","hasShadowDom","inputs","querySelectorAll","inputEls","Array","from","filtered","filter","el","parentElement","input","ownerDocument","createElement","type","classList","add","appendChild","removeHiddenInput","remove","shadowRoot","attachShadow","getInputHelperTextID","id","getInputValidationTextID","getInputDescribedByText","inputId","helperText","validationText","trim","getThemeFromContext","themeFromEvent","getRootNode","host","blockColorParent","closest","join","parentTag","tagName","toLowerCase","currentTag","_a","includes","IcThemeForegroundEnum","Default","contains","Dark","Light","isMobileOrTablet","navigator","maxTouchPoints","handleHiddenFormButtonClick","form","button","hiddenFormButton","document","setAttribute","style","display","click","isEmptyString","length","getLabelFromValue","options","ungroupedOptions","map","option","children","push","find","label","getFilteredMenuOptions","includeDescriptions","searchString","position","rawFilteredOptions","description","startsWith","deviceSizeMatches","size","window","matchMedia","matches","getCurrentDeviceSize","DEVICE_SIZES","UNDEFINED","getCssProperty","cssVar","getComputedStyle","documentElement","getPropertyValue","getThemeColorBrightness","themeRed","themeGreen","themeBlue","parseInt","getThemeForegroundColor","getSlot","querySelector","slotHasContent","getSlotContent","slot","getSlotElements","slotContent","firstElementChild","elements","assignedElements","childNodes","getNavItemParentDetails","navType","parent","getParentElementType","getParentElement","Number","replace","hasValidationStatus","status","isSlotUsed","slotName","some","child","onComponentPropUndefinedChange","oldValue","newValue","callback","onComponentRequiredPropUndefined","props","component","i","prop","propName","console","kebabToCamelCase","kebabCase","individualWords","split","camelCase","substring","toUpperCase","checkResizeObserver","callbackFn","ResizeObserver","hex2dec","v","hexToRgba","hex","c","r","g","b","a","slice","rgbaStrToObj","rgbaStr","fourthChar","colorRGBA","rgba","rgb","elementOverflowsX","scrollWidth","clientWidth","hasClassificationBanner","getForm","addFormResetListener","addEventListener","removeFormResetListener","removeEventListener","pxToRem","px","base","tempPx"],"mappings":"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","sourcesContent":["import errorIcon from \"../assets/error-icon.svg\";\nimport infoIcon from \"../assets/info-icon.svg\";\nimport neutralIcon from \"../assets/neutral-icon.svg\";\nimport successIcon from \"../assets/success-icon.svg\";\nimport warningIcon from \"../assets/warning-icon.svg\";\n\n// Global status icons\nexport const VARIANT_ICONS = {\n  neutral: {\n    icon: neutralIcon,\n    ariaLabel: \"Neutral\",\n  },\n  info: {\n    icon: infoIcon,\n    ariaLabel: \"For your information\",\n  },\n  warning: {\n    icon: warningIcon,\n    ariaLabel: \"Warning\",\n  },\n  error: {\n    icon: errorIcon,\n    ariaLabel: \"Error\",\n  },\n  success: {\n    icon: successIcon,\n    ariaLabel: \"Success\",\n  },\n};\n\n// Global ARIA attributes\nexport const IC_INHERITED_ARIA = [\n  \"aria-atomic\",\n  \"aria-busy\",\n  \"aria-controls\",\n  \"aria-current\",\n  \"aria-describedby\",\n  \"aria-description\",\n  \"aria-details\",\n  \"aria-disabled\",\n  \"aria-dropeffect\",\n  \"aria-errormessage\",\n  \"aria-flowto\",\n  \"aria-grabbed\",\n  \"aria-haspopup\",\n  \"aria-hidden\",\n  \"aria-invalid\",\n  \"aria-keyshortcuts\",\n  \"aria-label\",\n  \"aria-labelledby\",\n  \"aria-live\",\n  \"aria-owns\",\n  \"aria-relevant\",\n  \"aria-roledescription\",\n];\n\nexport const IC_DEVICE_SIZES = {\n  XS: 576,\n  S: 768,\n  M: 992,\n  L: 1200,\n  XL: 99999,\n};\n\nexport const IC_BLOCK_COLOR_COMPONENTS = [\n  \"ic-hero\",\n  \"ic-top-navigation\",\n  \"ic-footer\",\n  \"ic-side-navigation\",\n  \"ic-alert\",\n];\n\nexport const IC_FIXED_COLOR_COMPONENTS = [\"ic-alert\"];\n\nexport interface IcColorExceptions {\n  [details: string]: string[];\n}\n\nexport const IC_BLOCK_COLOR_EXCEPTIONS: IcColorExceptions = {\n  \"ic-alert\": [\"ic-link\"],\n};\n\n/* Range within which the chosen theme colour would not have a sufficient brightness difference with either of the black or white foreground colours\n * The brightness difference must be greater than 125 to provide good colour visibility\n * Calculated by:\n * - Using the brightness formula for both colours: https://www.w3.org/TR/AERT/#color-contrast\n * - Adding 125 to the brightness of the black foreground colour - RGB(11, 12, 12)\n * - Subtracting 125 from the brightness of the white foreground colour - RGB(255, 255, 255)\n */\nexport const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;\nexport const WHITE_MAX_COLOR_BRIGHTNESS = 130;\n","import { EventEmitter } from \"@stencil/core\";\nimport {\n  IcCallbackFunctionNoReturn,\n  IcInformationStatusOrEmpty,\n  IcNavParentDetails,\n  IcPropObject,\n  IcSearchMatchPositions,\n  IcColorRGBA,\n} from \"./types\";\n\nimport {\n  IcMenuOption,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../utils/types\";\nimport {\n  IC_BLOCK_COLOR_COMPONENTS,\n  IC_BLOCK_COLOR_EXCEPTIONS,\n  IC_FIXED_COLOR_COMPONENTS,\n} from \"./constants\";\n\nconst DARK_MODE_THRESHOLD = 133.3505;\n\n/**\n * Used to inherit global attributes set on the host. Called in componentWillLoad and assigned\n * to a variable that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (\n  element: HTMLElement,\n  attributes: string[] = []\n): { [key: string]: unknown } => {\n  const attributeObject: { [key: string]: unknown } = {};\n\n  attributes.forEach((attr) => {\n    if (element.hasAttribute(attr)) {\n      const value = element.getAttribute(attr);\n      if (value !== null) {\n        attributeObject[attr] = element.getAttribute(attr);\n      }\n      element.removeAttribute(attr);\n    }\n  });\n\n  return attributeObject;\n};\n\nexport const debounceEvent = (\n  event: EventEmitter,\n  wait: number\n): EventEmitter => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const original = (event as any)._original || event;\n  return {\n    _original: event,\n    emit: debounce(original.emit.bind(original), wait),\n  } as EventEmitter;\n};\n\nexport const debounce = (\n  func: (...args: unknown[]) => void,\n  wait = 0\n): unknown => {\n  let timer: ReturnType<typeof setTimeout>;\n  return (...args: unknown[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(func, wait, ...args);\n  };\n};\n\n/**\n * This method is used to add a hidden input to a host element that contains\n * a Shadow DOM. It does not add the input inside of the Shadow root which\n * allows it to be picked up inside of forms. It should contain the same\n * values as the host element.\n *\n * @param always Add a hidden input even if the container does not use Shadow\n * @param container The element where the input will be added\n * @param name The name of the input\n * @param value The value of the input\n * @param disabled If true, the input is disabled\n */\nexport const renderHiddenInput = (\n  always: boolean,\n  container: HTMLElement,\n  name: string,\n  value: string | undefined | null,\n  disabled: boolean\n): void => {\n  if (name !== undefined && (always || hasShadowDom(container))) {\n    const inputs = container.querySelectorAll(\"input.ic-input\");\n    const inputEls = Array.from(inputs);\n    const filtered = inputEls.filter((el) => container === el.parentElement);\n\n    let input = filtered[0] as HTMLInputElement;\n    if (input === null || input === undefined) {\n      input = container.ownerDocument.createElement(\"input\");\n      input.type = \"hidden\";\n      input.classList.add(\"ic-input\");\n      container.appendChild(input);\n    }\n    input.disabled = disabled;\n    input.name = name;\n    input.value = value || \"\";\n  }\n};\n\nexport const removeHiddenInput = (container: HTMLElement): void => {\n  const inputs = container.querySelectorAll(\"input.ic-input\");\n  const inputEls = Array.from(inputs);\n  const filtered = inputEls.filter((el) => container === el.parentElement);\n  const input = filtered[0] as HTMLInputElement;\n  input?.remove();\n};\n\nexport const hasShadowDom = (el: HTMLElement): boolean => {\n  return !!el.shadowRoot && !!el.attachShadow;\n};\n\nexport const getInputHelperTextID = (id: string): string => {\n  return id + \"-helper-text\";\n};\n\nexport const getInputValidationTextID = (id: string): string => {\n  return id + \"-validation-text\";\n};\n\nexport const getInputDescribedByText = (\n  inputId: string,\n  helperText: boolean,\n  validationText: boolean\n): string => {\n  return `${helperText ? getInputHelperTextID(inputId) : \"\"} ${\n    validationText ? getInputValidationTextID(inputId) : \"\"\n  }`.trim();\n};\n\n/**\n * This method helps to understand the context in which a component exists,\n * to assist with choosing appropriate foreground colours to use. For example,\n * this method will help you use the 'white' version of a button if it's within\n * a block colour element using white foreground text.\n *\n * This only works for components/elements passed via <slot> and not if they\n * are part of an IC component.\n *\n * \"\"\n * @returns IcThemeForeground depending on the context\n */\nexport const getThemeFromContext = (\n  el: Element,\n  themeFromEvent: IcThemeForeground = null\n): IcThemeForeground => {\n  const parentElement =\n    el.parentElement || (<ShadowRoot>el.getRootNode()).host.parentElement;\n  const blockColorParent = parentElement.closest(\n    IC_BLOCK_COLOR_COMPONENTS.join(\",\")\n  );\n\n  // If within a block color component\n  if (blockColorParent !== null) {\n    const parentTag = blockColorParent.tagName.toLowerCase();\n    const currentTag = el.tagName.toLowerCase();\n\n    if (IC_BLOCK_COLOR_EXCEPTIONS[parentTag]?.includes(currentTag)) {\n      return IcThemeForegroundEnum.Default;\n    } else if (\n      themeFromEvent !== null &&\n      !IC_FIXED_COLOR_COMPONENTS.includes(parentTag)\n    ) {\n      return themeFromEvent;\n    } else if (\n      blockColorParent.classList.contains(IcThemeForegroundEnum.Dark)\n    ) {\n      return IcThemeForegroundEnum.Dark;\n    }\n\n    return IcThemeForegroundEnum.Light;\n  }\n\n  return IcThemeForegroundEnum.Default;\n};\n\nexport const isMobileOrTablet = (): boolean => {\n  let isMobileOrTablet = false;\n  if (\"maxTouchPoints\" in navigator) {\n    isMobileOrTablet = navigator.maxTouchPoints > 0;\n  }\n  return isMobileOrTablet;\n};\n\n/**\n * Will create a button within the lightDOM which interacts with the parent form.\n * This is required as buttons within the shadowDOM will not invoke a submit or reset\n *\n * @param form - parent form element which contains shadowDom button\n * @param button - shadowDOM button\n */\nexport const handleHiddenFormButtonClick = (\n  form: HTMLFormElement,\n  button: HTMLIcButtonElement | HTMLButtonElement\n): void => {\n  const hiddenFormButton = document.createElement(\"button\");\n\n  hiddenFormButton.setAttribute(\"type\", button.type);\n  hiddenFormButton.style.display = \"none\";\n\n  form.appendChild(hiddenFormButton);\n\n  hiddenFormButton.click();\n  hiddenFormButton.remove();\n};\n\nexport const isEmptyString = (value: string): boolean => {\n  if (!value) {\n    return true;\n  }\n\n  return value.trim().length === 0;\n};\n\n/**\n * Extracts the label using the value from an object. Requires the object to have a label and value property.\n * @param value - value from object\n * @param options - list of menu items\n * @returns - label corresponding to value\n */\nexport const getLabelFromValue = (\n  value: string,\n  options: IcMenuOption[]\n): string | undefined => {\n  const ungroupedOptions: IcMenuOption[] = [];\n  if (options.length > 0 && options.map) {\n    options.map((option) => {\n      if (option.children) {\n        option.children.map((option: IcMenuOption) =>\n          ungroupedOptions.push(option)\n        );\n      } else {\n        ungroupedOptions.push(option);\n      }\n    });\n    return ungroupedOptions.find((option) => option.value === value)?.label;\n  }\n\n  return undefined;\n};\n\n/**\n * Filters the options based on the search string.\n * @param options - array of options\n * @param includeDescriptions - determines whether option descriptions are included when filtering options\n * @param searchString - string used to filter the options\n * @param position - whether the search string matches the start of or anywhere in the options\n * @returns filtered array of options\n */\nexport const getFilteredMenuOptions = (\n  options: IcMenuOption[],\n  includeDescriptions: boolean,\n  searchString: string,\n  position: IcSearchMatchPositions\n): IcMenuOption[] => {\n  let rawFilteredOptions;\n\n  if (position === \"anywhere\") {\n    rawFilteredOptions = options.filter((option) => {\n      if (includeDescriptions) {\n        return (\n          option.label.toLowerCase().includes(searchString.toLowerCase()) ||\n          option.description?.toLowerCase().includes(searchString.toLowerCase())\n        );\n      } else {\n        return option.label.toLowerCase().includes(searchString.toLowerCase());\n      }\n    });\n  } else {\n    rawFilteredOptions = options.filter((option) => {\n      if (includeDescriptions) {\n        return (\n          option.label.toLowerCase().startsWith(searchString.toLowerCase()) ||\n          option.description\n            ?.toLowerCase()\n            .startsWith(searchString.toLowerCase())\n        );\n      } else {\n        return option.label\n          .toLowerCase()\n          .startsWith(searchString.toLowerCase());\n      }\n    });\n  }\n\n  return rawFilteredOptions;\n};\n\nexport const deviceSizeMatches = (size: number): boolean =>\n  window.matchMedia(`(max-width: ${size}px)`).matches;\n\nexport const getCurrentDeviceSize = (): number => {\n  if (deviceSizeMatches(DEVICE_SIZES.S)) {\n    return DEVICE_SIZES.S;\n  }\n  if (deviceSizeMatches(DEVICE_SIZES.M)) {\n    return DEVICE_SIZES.M;\n  }\n  if (deviceSizeMatches(DEVICE_SIZES.L)) {\n    return DEVICE_SIZES.L;\n  }\n  if (deviceSizeMatches(DEVICE_SIZES.XL)) {\n    return DEVICE_SIZES.XL;\n  }\n  //fallback needed as all of above get initialised to 0 in jest tests\n  return DEVICE_SIZES.UNDEFINED;\n};\n\nexport const getCssProperty = (cssVar: string): string => {\n  return getComputedStyle(document.documentElement).getPropertyValue(cssVar);\n};\n\n/**\n * Returns the brightness of the theme colour, calculated by using the theme RGB CSS values by:\n * - Multiplying each RGB value by a set number: https://www.w3.org/TR/AERT/#color-contrast\n * - Adding them together and dividing by 1000\n * This is a similar calculation to its CSS counterpart: \"--ic-theme-text\"\n * @returns number representing the brightness of the theme colour\n */\nexport const getThemeColorBrightness = (): number => {\n  const themeRed = getCssProperty(\"--ic-theme-primary-r\");\n  const themeGreen = getCssProperty(\"--ic-theme-primary-g\");\n  const themeBlue = getCssProperty(\"--ic-theme-primary-b\");\n  return (\n    (parseInt(themeRed) * 299 +\n      parseInt(themeGreen) * 587 +\n      parseInt(themeBlue) * 114) /\n    1000\n  );\n};\n\n/**\n * Returns if dark or light foreground colors should be used for color contrast reasons\n * @returns \"dark\" or \"light\"\n */\nexport const getThemeForegroundColor = (): IcThemeForeground => {\n  return getThemeColorBrightness() > DARK_MODE_THRESHOLD\n    ? IcThemeForegroundEnum.Dark\n    : IcThemeForegroundEnum.Light;\n};\n\nexport const getSlot = (element: HTMLElement, name: string): Element | null => {\n  if (element && element.querySelector) {\n    return element.querySelector(`[slot=\"${name}\"]`);\n  }\n  return null;\n};\n\nexport const slotHasContent = (element: HTMLElement, name: string): boolean =>\n  getSlot(element, name) !== null;\n\nexport const getSlotContent = (\n  element: HTMLElement,\n  name: string\n): Element[] | NodeListOf<ChildNode> | null => {\n  const slot = getSlot(element, name);\n  if (slot) {\n    return getSlotElements(slot);\n  }\n\n  return null;\n};\n\nexport const getSlotElements = (slot: Element) => {\n  const slotContent = slot.firstElementChild as HTMLSlotElement;\n\n  if (slotContent !== null) {\n    const elements = slotContent.assignedElements\n      ? slotContent.assignedElements()\n      : slotContent.childNodes;\n    return elements.length ? elements : null;\n  } else {\n    //check for single element\n    return slot === null ? null : [slot];\n  }\n};\n\nexport const getNavItemParentDetails = (\n  el: HTMLElement\n): IcNavParentDetails => {\n  let navType: IcNavParentDetails = { navType: \"\", parent: null };\n  switch (getParentElementType(el)) {\n    case \"IC-NAVIGATION-GROUP\":\n      navType = getNavItemParentDetails(el.parentElement);\n      break;\n    case \"IC-TOP-NAVIGATION\":\n      navType = { navType: \"top\", parent: getParentElement(el) };\n      break;\n    case \"IC-SIDE-NAVIGATION\":\n      navType = { navType: \"side\", parent: getParentElement(el) };\n      break;\n    case \"IC-PAGE-HEADER\":\n      navType = { navType: \"page-header\", parent: null };\n      break;\n  }\n  return navType;\n};\n\nexport const DEVICE_SIZES = {\n  XS: Number(getCssProperty(\"--ic-breakpoint-xs\").replace(\"px\", \"\")), // 0\n  S: Number(getCssProperty(\"--ic-breakpoint-sm\").replace(\"px\", \"\")), // 576\n  M: Number(getCssProperty(\"--ic-breakpoint-md\").replace(\"px\", \"\")), // 768\n  L: Number(getCssProperty(\"--ic-breakpoint-lg\").replace(\"px\", \"\")), // 992\n  XL: Number(getCssProperty(\"--ic-breakpoint-xl\").replace(\"px\", \"\")), // 1200\n  UNDEFINED: 1200,\n};\n\nexport const hasValidationStatus = (\n  status: IcInformationStatusOrEmpty,\n  disabled: boolean\n): boolean => {\n  return status !== \"\" && !disabled;\n};\n\nexport const isSlotUsed = (element: HTMLElement, slotName: string): boolean => {\n  return Array.from(element.children).some(\n    (child) => child.getAttribute(\"slot\") === slotName\n  );\n};\n\n// added as a common method to allow detection of gatsby hydration issue, where (camelCase) props are initially undefined & then update\n// with a value. Allows a callback function to be executed when this is the case\nexport const onComponentPropUndefinedChange = (\n  oldValue: string | undefined,\n  newValue: string | undefined,\n  callback: IcCallbackFunctionNoReturn\n): void => {\n  if (oldValue === undefined && newValue !== oldValue) {\n    callback();\n  }\n};\n\nexport const onComponentRequiredPropUndefined = (\n  props: IcPropObject[],\n  component: string\n): void => {\n  for (let i = 0; i < props.length; i++) {\n    const { prop, propName } = props[i];\n    if (prop === null || prop === undefined) {\n      console.error(\n        `No ${propName} specified for ${component} component - prop '${propName}' (web components) / '${kebabToCamelCase(\n          propName\n        )}' (react) required`\n      );\n    }\n  }\n};\n\nexport const kebabToCamelCase = (kebabCase: string): string => {\n  kebabCase = kebabCase.toLowerCase();\n  const individualWords: string[] = kebabCase.split(\"-\");\n  let camelCase = individualWords[0];\n  for (let i = 1; i < individualWords.length; i++) {\n    camelCase +=\n      individualWords[i].substring(0, 1).toUpperCase() +\n      individualWords[i].substring(1);\n  }\n  return camelCase;\n};\n\nexport const checkResizeObserver = (\n  callbackFn: IcCallbackFunctionNoReturn\n): void => {\n  if (\n    typeof window !== \"undefined\" &&\n    typeof window.ResizeObserver !== \"undefined\"\n  ) {\n    callbackFn();\n  }\n};\n\nconst hex2dec = function (v: string) {\n  return parseInt(v, 16);\n};\n\nexport const hexToRgba = (hex: string): IcColorRGBA => {\n  let c;\n  if (hex.length === 4) {\n    c = hex.replace(\"#\", \"\").split(\"\");\n    return {\n      r: hex2dec(c[0] + c[0]),\n      g: hex2dec(c[1] + c[1]),\n      b: hex2dec(c[2] + c[2]),\n      a: 1,\n    };\n  } else {\n    return {\n      r: hex2dec(hex.slice(1, 3)),\n      g: hex2dec(hex.slice(3, 5)),\n      b: hex2dec(hex.slice(5)),\n      a: 1,\n    };\n  }\n};\n\nexport const rgbaStrToObj = (rgbaStr: string): IcColorRGBA => {\n  const fourthChar = rgbaStr.slice(3, 4);\n  let colorRGBA: IcColorRGBA;\n  if (fourthChar.toLowerCase() === \"a\") {\n    colorRGBA = { r: null, g: null, b: null, a: null };\n    const rgba = rgbaStr\n      .substring(5, rgbaStr.length - 1)\n      .replace(/ /g, \"\")\n      .split(\",\");\n    colorRGBA.r = Number(rgba[0]);\n    colorRGBA.g = Number(rgba[1]);\n    colorRGBA.b = Number(rgba[2]);\n    colorRGBA.a = Number(rgba[3]);\n  } else {\n    colorRGBA = { r: null, g: null, b: null, a: 1 };\n    const rgb = rgbaStr\n      .substring(4, rgbaStr.length - 1)\n      .replace(/ /g, \"\")\n      .split(\",\");\n    colorRGBA.r = Number(rgb[0]);\n    colorRGBA.g = Number(rgb[1]);\n    colorRGBA.b = Number(rgb[2]);\n  }\n\n  return colorRGBA;\n};\n\nexport const elementOverflowsX = (element: HTMLElement): boolean => {\n  return element.scrollWidth > element.clientWidth;\n};\n/**\n *\n * @param child - The child element\n * @returns string\n */\nexport const getParentElementType = (child: HTMLElement): string =>\n  child.parentElement.tagName;\n\nexport const getParentElement = (child: HTMLElement): HTMLElement =>\n  child.parentElement;\n\nexport const hasClassificationBanner = (): boolean => {\n  return document.querySelector(\"ic-classification-banner:not([inline='true'])\")\n    ? true\n    : false;\n};\n\nexport const getForm = (el: HTMLElement): HTMLFormElement | null => {\n  return el.closest(\"FORM\");\n};\n\nexport const addFormResetListener = (\n  el: HTMLElement,\n  callbackFn: IcCallbackFunctionNoReturn\n): void => {\n  const form = getForm(el);\n  if (form !== null) {\n    form.addEventListener(\"reset\", callbackFn);\n  }\n};\n\nexport const removeFormResetListener = (\n  el: HTMLElement,\n  callbackFn: IcCallbackFunctionNoReturn\n): void => {\n  const form = getForm(el);\n  if (form !== null) {\n    form.removeEventListener(\"reset\", callbackFn);\n  }\n};\n\nexport const pxToRem = (px: string, base = 16) => {\n  const tempPx = parseInt(px);\n  return `${(1 / base) * tempPx}rem`;\n};\n"]}

package/dist/core/p-4dd0eb6a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-status-tag/ic-status-tag.css?tag=ic-status-tag&encapsulation=shadow","src/components/ic-status-tag/ic-status-tag.tsx"],"names":["icStatusTagCss","StatusTag","[object Object]","onComponentRequiredPropUndefined","prop","this","label","propName","status","appearance","small","announced","h","Host","role","aria-label","class","variant","apply-vertical-margins"],"mappings":"8GAAA,MAAMA,EAAiB,ivHCYVC,EAAS,gEAQmB,0BAIM,oBAInB,qBAII,MAE9BC,mBACEC,EACE,CAAC,CAAEC,KAAMC,KAAKC,MAAOC,SAAU,UAC/B,cAIJL,SACE,MAAMI,MAAEA,EAAKE,OAAEA,EAAMC,WAAEA,EAAUC,MAAEA,EAAKC,UAAEA,GAAcN,KACxD,OACEO,EAACC,EAAI,CAACC,KAAMH,EAAY,SAAW,KAAII,aAAa,UAClDH,EAAA,SAAA,CACEI,MAAO,CACLd,CAAC,OAAQ,KACTA,CAAC,GAAGO,KAAcD,KAAW,KAC7BN,CAAC,SAAUQ,IAGbE,EAAA,gBAAA,CACEK,QAAQ,kBAAiBC,yBACD,OAExBN,EAAA,OAAA,KAAON","sourcesContent":["@import \"../../global/normalize.css\";\n\n.tag {\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n  font-size: 0.875rem;\n  border-radius: var(--ic-space-md);\n  display: inline-block;\n  min-width: 2.5rem;\n  text-align: center;\n}\n\n.small {\n  padding: var(--ic-space-xxxs) var(--ic-space-sm);\n  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.filled-neutral {\n  background-color: var(--ic-architectural-600);\n  color: var(--ic-architectural-white);\n}\n\n.filled-success {\n  background-color: var(--ic-status-success);\n  color: var(--ic-architectural-white);\n}\n\n.filled-warning {\n  background-color: var(--ic-status-warning);\n  color: var(--ic-color-primary-text);\n}\n\n.filled-danger {\n  background-color: var(--ic-status-error);\n  color: var(--ic-architectural-white);\n}\n\n.outlined-neutral {\n  background-color: var(--ic-architectural-200);\n  color: var(--ic-color-secondary-text);\n  border: var(--ic-space-1px) solid var(--ic-architectural-400);\n}\n\n.outlined-success {\n  background-color: var(--ic-status-success-background);\n  color: var(--ic-status-success);\n  border: var(--ic-space-1px) solid var(--ic-status-success);\n}\n\n.outlined-warning {\n  background-color: var(--ic-status-warning-background);\n  color: var(--ic-status-warning-dark);\n  border: var(--ic-space-1px) solid var(--ic-status-warning-dark);\n}\n\n.outlined-danger {\n  background-color: var(--ic-status-error-background);\n  color: var(--ic-status-error);\n  border: var(--ic-space-1px) solid var(--ic-status-error);\n}\n\n@media (forced-colors: active) {\n  .tag {\n    border: var(--ic-hc-border);\n    -ms-high-contrast-adjust: none;\n    forced-color-adjust: none;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n  IcStatusTagStatuses,\n  IcStatusTagAppearance,\n} from \"./ic-status-tag.types\";\n\n@Component({\n  tag: \"ic-status-tag\",\n  styleUrl: \"ic-status-tag.css\",\n  shadow: true,\n})\nexport class StatusTag {\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() appearance?: IcStatusTagAppearance = \"filled\";\n  /**\n   * If `true`, the small styling will be applied to the status tag.\n   */\n  @Prop() small?: boolean = false;\n  /**\n   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n   */\n  @Prop() announced?: boolean = false;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Status Tag\"\n    );\n  }\n\n  render() {\n    const { label, status, appearance, small, announced } = this;\n    return (\n      <Host role={announced ? \"status\" : null} aria-label=\"Status\">\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${appearance}-${status}`]: true,\n            [\"small\"]: small,\n          }}\n        >\n          <ic-typography\n            variant=\"label-uppercase\"\n            apply-vertical-margins={false}\n          >\n            <span>{label}</span>\n          </ic-typography>\n        </strong>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-50421f27.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","src/components/ic-footer/ic-footer.tsx"],"names":["icFooterCss","Footer","this","resizeObserverCallback","currSize","deviceSize","footerResized","emit","runResizeObserver","resizeObserver","ResizeObserver","getCurrentDeviceSize","observe","footerEl","IC_DEVICE_SIZES","XL","getThemeForegroundColor","[object Object]","bp","breakpoint","XS","S","M","L","ev","theme","detail","foregroundColor","mode","checkResizeObserver","disconnect","aligned","caption","copyright","description","groupLinks","small","isSmall","h","Host","class","footer","IcThemeForegroundEnum","Dark","Light","ref","fullHeight","variant","name","isSlotUsed","el","hasClassificationBanner"],"mappings":"2KAAA,MAAMA,EAAc,0/HCuCPC,EAAM,4EAmETC,KAAAC,uBAA0BC,IAChC,GAAIA,IAAaF,KAAKG,WAAY,CAChCH,KAAKG,WAAaD,EAEpBF,KAAKI,cAAcC,QAGbL,KAAAM,kBAAoB,KAC1BN,KAAKO,eAAiB,IAAIC,gBAAe,KACvC,MAAMN,EAAWO,IACjBT,KAAKC,uBAAuBC,MAG9BF,KAAKO,eAAeG,QAAQV,KAAKW,mDAhEH,uBAKW,yBAKZ,4CAUF,qBAECC,EAAgBC,wBAEAC,IAEtCC,UACN,MAAMC,EAAKhB,KAAKiB,WAEhB,OAAOD,IAAO,cACVhB,KAAKG,WAAaS,EAAgBM,GAClCF,IAAO,QACPhB,KAAKG,WAAaS,EAAgBO,EAClCH,IAAO,SACPhB,KAAKG,WAAaS,EAAgBQ,EAClCJ,IAAO,QACPhB,KAAKG,WAAaS,EAAgBS,EAClCL,IAAO,cACPhB,KAAKG,WAAaS,EAAgBC,GAClC,MAINE,mBAAmBO,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BxB,KAAKyB,gBAAkBF,EAAMG,KAsB/BX,oBACEf,KAAKG,WAAaM,IAGpBM,mBACEY,EAAoB3B,KAAKM,mBAG3BS,uBACEf,KAAKO,eAAeqB,aAGtBb,SACE,MAAMc,QACJA,EAAOC,QACPA,EAAOC,UACPA,EAASC,YACTA,EAAWC,WACXA,EAAUR,gBACVA,GACEzB,KACJ,MAAMkC,EAAQlC,KAAKmC,UAEnB,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,OAAQ,KACRxB,CAAC,UAAUmB,EAAQ,QAAU,YAAa,KAC1CnB,CAAC,UAAUkB,EAAa,UAAY,eAAgB,KACpDlB,CAAC,UAAUU,KAAoB,KAE/BV,CAACyB,EAAsBC,MACrBhB,IAAoBe,EAAsBC,KAC5C1B,CAACyB,EAAsBE,OACrBjB,IAAoBe,EAAsBE,QAG9CN,EAAA,SAAA,CAAQO,IAAMhC,GAAcX,KAAKW,SAAWA,GAE1CyB,EAAA,MAAA,CAAKE,MAAM,sBACTF,EAAA,uBAAA,CAAsBP,QAASA,EAASe,WAAY,MAClDR,EAAA,MAAA,CAAKE,MAAM,4BACTF,EAAA,gBAAA,CAAeS,QAAQ,QACrBT,EAAA,OAAA,CAAMU,KAAK,eAAed,OAOlCI,EAAA,MAAA,CAAKE,MAAM,gBACRL,GAAcC,EACbE,EAAA,MAAA,CAAKE,MAAM,sBACTF,EAAA,OAAA,CAAMU,KAAK,UAGbV,EAAA,uBAAA,CAAsBQ,WAAU,KAACf,QAASA,GACxCO,EAAA,MAAA,CAAKE,MAAM,sBACTF,EAAA,OAAA,CAAMU,KAAK,YAOnBV,EAAA,MAAA,CAAKE,MAAM,qBACTF,EAAA,uBAAA,CAAsBP,QAASA,EAASe,WAAY,MAClDR,EAAA,MAAA,CAAKE,MAAM,2BACRS,EAAW/C,KAAKgD,GAAI,SACnBZ,EAAA,MAAA,CAAKE,MAAM,eAETF,EAAA,OAAA,CAAMU,KAAK,WAGbC,EAAW/C,KAAKgD,GAAI,YAAclB,IAClCM,EAAA,MAAA,CAAKE,MAAM,kBACTF,EAAA,gBAAA,CACES,QACE7C,KAAKG,YAAcS,EAAgBQ,EAC/B,UACA,QAGNgB,EAAA,OAAA,CAAMU,KAAK,WAAWhB,KAI3BC,GACCK,EAAA,MAAA,CACEE,MAAO,CACLvB,CAAC,oBAAqB,KACtBA,CAAC,0BAA2BkC,MAG9Bb,EAAA,gBAAA,CACES,QACE7C,KAAKG,YAAcS,EAAgBQ,EAC/B,oBACA,mBAAiB","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n\n  --footer-compliance-padding: 1rem 0;\n}\n\n:host(.footer-sparse) {\n  --footer-links-padding: 1.5rem 0;\n  --footer-logo-margin-bottom: var(--ic-space-lg);\n  --footer-link-inner-flex-direction: row;\n}\n\n:host(.footer-small) {\n  --footer-links-padding: 0 0;\n  --footer-logo-margin-bottom: var(--ic-space-md);\n  --footer-link-inner-flex-direction: column;\n}\n\n:host(.footer-light) {\n  --footer-theme-secondary: var(--ic-theme-secondary);\n  --footer-theme-tertiary: var(--ic-theme-tertiary);\n  --footer-keyline: var(--ic-keyline-lighten);\n}\n\n:host(.footer-dark) {\n  --footer-theme-secondary: var(--ic-theme-secondary-light);\n  --footer-theme-tertiary: var(--ic-theme-tertiary-light);\n  --footer-keyline: var(--ic-keyline-darken);\n}\n\n:host(.footer-small.footer-ungrouped) {\n  --footer-links-padding: var(--ic-space-md) 0 0 0;\n}\n\n/* Main inner footer element */\nfooter {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Description */\n\n.footer-description {\n  background-color: var(--footer-theme-secondary);\n  color: var(--ic-theme-text);\n  border-bottom: var(--footer-keyline);\n}\n\n.footer-description-inner {\n  padding: 1rem 0;\n}\n\n/* Links */\n\n.footer-links {\n  padding: var(--footer-links-padding);\n  background-color: var(--footer-theme-secondary);\n  color: var(--ic-theme-text);\n}\n\n.footer-links-inner {\n  display: flex;\n  flex-direction: var(--footer-link-inner-flex-direction);\n}\n\n/* Compliance */\n\n.footer-compliance {\n  background-color: var(--footer-theme-tertiary);\n  color: var(--ic-theme-text);\n}\n\n.footer-compliance-inner {\n  padding: var(--footer-compliance-padding);\n}\n\n.footer-logo {\n  margin-bottom: var(--footer-logo-margin-bottom);\n  display: flex;\n  gap: var(--ic-space-xxl);\n}\n\n.footer-logo > ::slotted() {\n  margin-right: var(--ic-space-md);\n}\n\n.footer-caption {\n  margin-bottom: var(--ic-space-md);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n\n@media (forced-colors: active) {\n  footer {\n    border-top: var(--ic-hc-border);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  h,\n  Host,\n  Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  checkResizeObserver,\n  hasClassificationBanner,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n */\n\n@Component({\n  tag: \"ic-footer\",\n  styleUrl: \"ic-footer.css\",\n  shadow: true,\n})\nexport class Footer {\n  @Element() el: HTMLIcFooterElement;\n\n  /**\n   *  @internal Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() footerResized: EventEmitter<void>;\n\n  /**\n   * The description displayed at the top of the footer.\n   */\n  @Prop() description: string;\n\n  /**\n   * The alignment of the section containers used within the footer.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The screen size breakpoint at which to switch to the small layout.\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * If `true`, the footer will be set up to handle link groups instead of standalone links.\n   */\n  @Prop() groupLinks?: boolean = false;\n\n  /**\n   * The caption displayed at the bottom of the footer.\n   */\n  @Prop() caption: string;\n\n  /**\n   * If `true`, the footer will display the crown copyright at the bottom.\n   */\n  @Prop() copyright: boolean = true;\n\n  @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  private isSmall() {\n    const bp = this.breakpoint;\n\n    return bp === \"extra small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"medium\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"extra large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private resizeObserver: ResizeObserver;\n  private footerEl: HTMLElement;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n    this.footerResized.emit();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.footerEl);\n  };\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    const {\n      aligned,\n      caption,\n      copyright,\n      description,\n      groupLinks,\n      foregroundColor,\n    } = this;\n    const small = this.isSmall();\n\n    return (\n      <Host\n        class={{\n          footer: true,\n          [`footer-${small ? \"small\" : \"sparse\"}`]: true,\n          [`footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n          [`footer-${foregroundColor}`]: true,\n          // Slots will be able to infer their own color\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [IcThemeForegroundEnum.Light]:\n            foregroundColor === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n          {/* Description */}\n          <div class=\"footer-description\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-description-inner\">\n                <ic-typography variant=\"body\">\n                  <slot name=\"description\">{description}</slot>\n                </ic-typography>\n              </div>\n            </ic-section-container>\n          </div>\n\n          {/* Links */}\n          <div class=\"footer-links\">\n            {groupLinks && small ? (\n              <div class=\"footer-links-inner\">\n                <slot name=\"link\" />\n              </div>\n            ) : (\n              <ic-section-container fullHeight aligned={aligned}>\n                <div class=\"footer-links-inner\">\n                  <slot name=\"link\" />\n                </div>\n              </ic-section-container>\n            )}\n          </div>\n\n          {/* Compliance (logo, caption, copyright) */}\n          <div class=\"footer-compliance\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-compliance-inner\">\n                {isSlotUsed(this.el, \"logo\") && (\n                  <div class=\"footer-logo\">\n                    {/* Logo */}\n                    <slot name=\"logo\" />\n                  </div>\n                )}\n                {(isSlotUsed(this.el, \"caption\") || caption) && (\n                  <div class=\"footer-caption\">\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption\"\n                          : \"body\"\n                      }\n                    >\n                      <slot name=\"caption\">{caption}</slot>\n                    </ic-typography>\n                  </div>\n                )}\n                {copyright && (\n                  <div\n                    class={{\n                      [\"footer-copyright\"]: true,\n                      [\"classification-spacing\"]: hasClassificationBanner(),\n                    }}\n                  >\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption-uppercase\"\n                          : \"label-uppercase\"\n                      }\n                    >\n                      &copy; Crown Copyright\n                    </ic-typography>\n                  </div>\n                )}\n              </div>\n            </ic-section-container>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-559b3d17.entry.js

@@ -1,2 +0,0 @@
-import{r as i,h as e,H as t,g as s,c as n,F as c}from"./p-589f6dd3.js";import{a as o}from"./p-6f57b13c.js";import{i as a,L as r,a as u}from"./p-471820e6.js";import{C as h}from"./p-8c7f4343.js";import{c as l}from"./p-ec26fc38.js";const d="ic-input-component-container{display:flex;border:var(--ic-space-1px) solid\n    var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--ic-architectural-white);box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.fullwidth{width:100%}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-space-1px) dashed var(--ic-architectural-200)}ic-input-component-container.readonly,ic-input-component-container.readonly:hover{border:none;padding:0}ic-input-component-container.error{border:var(--ic-space-xxxs) solid var(--ic-status-error);padding:0}ic-input-component-container.warning{border:var(--ic-space-xxxs) solid var(--ic-status-warning-mid);padding:0}ic-input-component-container.success{border:var(--ic-space-xxxs) solid var(--ic-status-success);padding:0}ic-input-component-container.small{height:var(--ic-space-xl)}ic-input-component-container.multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:0.438rem;display:flex;align-items:center}ic-input-component-container.multiline .icon-container,ic-input-component-container.multiline.small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.readonly .icon-container{margin-left:-0.313rem}ic-input-component-container.disabled ::-moz-placeholder{display:none}ic-input-component-container.disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 0.375rem;display:flex;align-items:center}ic-input-component-container.dark:hover{--border-color:var(--ic-architectural-400)}ic-input-component-container .inline-success>svg{fill:var(--ic-status-success);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border-color:var(--ic-action-dark-hover);color:var(--ic-action-dark-hover)}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.dark:focus-within{box-shadow:var(--ic-border-focus)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:var(--ic-space-1px) solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-space-1px) dashed GrayText}}";const m=class{constructor(e){i(this,e);this.disabled=false;this.readonly=false;this.validationStatus="";this.small=false;this.multiLine=false;this.validationInline=false;this.dark=false;this.fullWidth=false}render(){const{small:i,validationStatus:s,disabled:n,readonly:c,multiLine:u,fullWidth:h,dark:l,validationInline:d}=this;const m=this.validationStatus!==""&&!this.disabled&&!this.readonly?true:false;return e(t,{class:{["small"]:i,[s]:m,["disabled"]:n,["readonly"]:c,["multiline"]:u,["fullwidth"]:h,["dark"]:l}},e("div",{class:{"focus-indicator":true,dark:l}},a(this.host,"left-icon")&&e("div",{class:{["icon-container"]:true}},e("slot",{name:"left-icon"})),e("slot",null),d&&s===o.Success&&e("span",{class:{["inline-success"]:true},innerHTML:r})))}get host(){return s(this)}};m.style=d;const p="ic-input-container .component-container{display:flex;flex-direction:column}";const f=class{constructor(e){i(this,e);this.disabled=false;this.readonly=false}render(){return e(t,null,e("div",{class:{["component-container"]:true,["disabled"]:this.disabled,["readonly"]:this.readonly}},e("slot",null)))}};f.style=p;const b='html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type="button"].sc-ic-menu,[type="reset"].sc-ic-menu,[type="submit"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type="button"].sc-ic-menu::-moz-focus-inner,[type="reset"].sc-ic-menu::-moz-focus-inner,[type="submit"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type="button"].sc-ic-menu:-moz-focusring,[type="reset"].sc-ic-menu:-moz-focusring,[type="submit"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type="checkbox"].sc-ic-menu,[type="radio"].sc-ic-menu{box-sizing:border-box;padding:0}[type="number"].sc-ic-menu::-webkit-inner-spin-button,[type="number"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type="search"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type="search"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.open.sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{border-radius:var(--ic-border-radius);max-height:0;width:var(--input-width, 20rem);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay)}.sc-ic-menu-h:not(.no-focus):focus-within{box-shadow:var(--ic-border-focus)}#retry-button.sc-ic-menu::part(button){height:var(--ic-space-lg)}.small.sc-ic-menu #retry-button.sc-ic-menu::part(button){height:var(--ic-space-md)}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border:var(--ic-space-1px) solid var(--ic-architectural-400);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;max-height:0;overflow-y:hidden}.menu-scroll.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}.open.sc-ic-menu-h{max-height:none;display:block}.open.sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:20.125rem}.full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:0.5rem 0.438rem;cursor:pointer;display:flex;align-items:center}.option.sc-ic-menu:not(.loading-option){justify-content:space-between}.small.sc-ic-menu-h .option.sc-ic-menu{padding:0.25rem 0.438rem}.option.sc-ic-menu:last-child{border-radius:0 0 var(--ic-space-1px) var(--ic-space-1px)}.option.sc-ic-menu:first-child{border-radius:var(--ic-space-1px) var(--ic-space-1px) 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-active)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{color:var(--ic-color-secondary-text)}.option-text-container.sc-ic-menu{pointer-events:none}.option.loading-option.sc-ic-menu .option-text-container.sc-ic-menu{margin-left:0.625rem;color:var(--ic-color-secondary-text)}.error-icon-svg.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);fill:var(--ic-status-error);align-self:center;display:flex;margin-right:calc(var(--ic-space-xxs) * 1.2)}.loading-error-info.sc-ic-menu{display:flex}.check-icon.sc-ic-menu{height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:0.5rem;pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:1.5rem 0.438rem 0.5rem;color:var(--ic-color-tertiary-text)}.small.sc-ic-menu-h .option-group-title.sc-ic-menu{padding:0.75rem 0.438rem 0.25rem}.last-recommended-option.sc-ic-menu{border-bottom:var(--ic-space-1px) solid var(--ic-architectural-400)}.disabled-option.sc-ic-menu{color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-focus-blue) !important;color:var(--ic-color-white-text) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}}';const v=class{constructor(t){i(this,t);this.menuOptionSelect=n(this,"menuOptionSelect",7);this.menuStateChange=n(this,"menuStateChange",7);this.menuOptionId=n(this,"menuOptionId",7);this.menuKeyPress=n(this,"menuKeyPress",7);this.ungroupedOptionsSet=n(this,"ungroupedOptionsSet",7);this.retryButtonClicked=n(this,"retryButtonClicked",7);this.timeoutBlur=n(this,"timeoutBlur",7);this.ungroupedOptions=[];this.isSearchBar=false;this.isSearchableSelect=false;this.preventClickOpen=false;this.hasTimedOut=false;this.isLoading=false;this.hasPreviouslyBlurred=false;this.handleClearListener=()=>{this.optionHighlighted=""};this.handleSubmitSearch=()=>{const i=this.options.findIndex((i=>i.value===this.optionHighlighted));this.setInputValue(i)};this.handleMenuChange=(i,e)=>{if(!i)this.popperInstance.destroy();this.menuStateChange.emit({open:i,focusInput:e});if(!i&&e!==false){this.inputEl.focus();this.preventClickOpen=false}};this.setNextOptionValue=i=>{if(this.ungroupedOptions[i+1]){this.menuOptionSelect.emit({value:this.ungroupedOptions[i+1].value,optionId:this.getOptionId(this.ungroupedOptions[i+1].value)})}else{this.menuOptionSelect.emit({value:this.ungroupedOptions[0].value,optionId:this.getOptionId(this.ungroupedOptions[0].value)})}};this.setPreviousOptionValue=i=>{if(this.ungroupedOptions[i-1]){this.menuOptionSelect.emit({value:this.ungroupedOptions[i-1].value,optionId:this.getOptionId(this.ungroupedOptions[i-1].value)})}else{this.menuOptionSelect.emit({value:this.ungroupedOptions[this.ungroupedOptions.length-1].value,optionId:this.getOptionId(this.ungroupedOptions[this.ungroupedOptions.length-1].value)})}};this.getParentEl=i=>{if(i.tagName==="IC-SEARCH-BAR"){this.isSearchBar=true}else if(i.tagName==="IC-SELECT"&&i.getAttribute("searchable")!==null&&i.getAttribute("searchable")!==undefined){this.isSearchableSelect=true}};this.arrowBehaviour=i=>{i.preventDefault();this.handleMenuChange(true)};this.setMenuOptions=()=>this.isSearchBar?this.options:this.ungroupedOptions;this.setHighlightedOption=i=>{const e=this.setMenuOptions();e[i]&&!e[i].timedOut&&(this.optionHighlighted=e[i].value||undefined)};this.autoSetInputValueKeyboardOpen=i=>{const e=this.ungroupedOptions.findIndex((i=>i.value===this.value));this.keyboardNav=false;switch(i.key){case"ArrowDown":this.keyboardNav=true;this.arrowBehaviour(i);this.setNextOptionValue(e);break;case"ArrowUp":this.keyboardNav=true;this.arrowBehaviour(i);this.setPreviousOptionValue(e);break;case" ":case"Enter":if(i.target.id!=="clear-button"){this.handleMenuChange(true)}break}};this.manSetInputValueKeyboardOpen=i=>{var e;const t=this.setMenuOptions();this.keyboardNav=false;const s=t.findIndex((i=>i.value===this.optionHighlighted));const n=i=>{var e;return(e=Array.from(this.host.querySelectorAll("li"))[i])===null||e===void 0?void 0:e.id};switch(i.key){case"ArrowDown":this.keyboardNav=true;this.arrowBehaviour(i);if(s<t.length-1){this.setHighlightedOption(s+1);this.menuOptionId.emit({optionId:n(s+1)})}else{this.setHighlightedOption(0);this.menuOptionId.emit({optionId:n(0)})}this.preventIncorrectTabOrder=false;this.focusFromSearchKeypress=false;break;case"ArrowUp":this.keyboardNav=true;this.arrowBehaviour(i);if(s<=0||s>t.length+1){this.setHighlightedOption(t.length-1);this.menuOptionId.emit({optionId:n(t.length-1)})}else{this.setHighlightedOption(s-1);this.menuOptionId.emit({optionId:n(s-1)})}this.preventIncorrectTabOrder=false;this.focusFromSearchKeypress=false;break;case"Home":this.keyboardNav=true;i.preventDefault();this.arrowBehaviour(i);this.setHighlightedOption(0);this.menuOptionId.emit({optionId:n(0)});break;case"End":this.keyboardNav=true;i.preventDefault();this.arrowBehaviour(i);this.setHighlightedOption(t.length-1);this.menuOptionId.emit({optionId:n(t.length-1)});break;case"Enter":i.preventDefault();this.setInputValue(s);this.value=(e=t[s])===null||e===void 0?void 0:e.value;break;case"Escape":this.handleMenuChange(false);this.menuOptionId.emit({optionId:undefined});break;case"Shift":case"Tab":if(this.isSearchBar){this.keyboardNav=true}this.preventIncorrectTabOrder=true;break;case"Backspace":if(this.isSearchBar){this.parentEl.setFocus();this.setHighlightedOption(0)}else if(this.isSearchableSelect){this.parentEl.setFocus();this.value=null}this.focusFromSearchKeypress=true;break;default:if(i.key!=="Tab"){if(this.isSearchBar){this.parentEl.setFocus();this.setHighlightedOption(0)}else if(this.isSearchableSelect){this.parentEl.setFocus();this.value=null}this.focusFromSearchKeypress=true}break}};this.setInputValue=i=>{var e;const t=this.setMenuOptions();if(t[i]){this.menuOptionSelect.emit({value:(e=t[i])===null||e===void 0?void 0:e.value});this.optionHighlighted=undefined;this.menuOptionId.emit({optionId:undefined})}if(!this.hasTimedOut)this.handleMenuChange(false);else this.parentEl.setFocus()};this.handleOptionClick=i=>{const{value:e,label:t}=i.target.dataset;this.menuOptionSelect.emit({value:e,label:t});this.handleMenuChange(false)};this.handleRetry=()=>{this.retryButtonClicked.emit({value:this.value})};this.handleRetryKeyDown=i=>{if(i.key==="Enter"||i.key===" "){i.preventDefault();this.retryButtonClicked.emit({value:this.value,keyPressed:i.key})}};this.handleBlur=i=>{if(i.relatedTarget!==this.inputEl){if(!this.menu.contains(i.relatedTarget)){this.handleMenuChange(false,this.hasPreviouslyBlurred)}}else{this.handleMenuChange(false);this.preventClickOpen=true}if(!this.isSearchBar)this.hasPreviouslyBlurred=!!i.relatedTarget};this.handleMouseDown=i=>{i.preventDefault()};this.handleMenuKeyDown=i=>{if(this.activationType==="automatic"){this.autoSetValueOnMenuKeyDown(i)}else if(this.activationType==="manual"&&this.isSearchableSelect){this.manSetInputValueKeyboardOpen(i)}};this.emitMenuKeyPress=(i,e)=>{this.menuKeyPress.emit({isNavKey:i,key:e})};this.autoSetValueOnMenuKeyDown=i=>{i.cancelBubble=true;const e=this.ungroupedOptions.findIndex((i=>i.value===this.value));const t=this.inputEl.tagName==="INPUT";this.keyboardNav=false;switch(i.key){case" ":i.preventDefault();break;case"ArrowUp":if(!this.hasTimedOut){i.preventDefault();this.setPreviousOptionValue(e);this.keyboardNav=true}break;case"ArrowDown":if(!this.hasTimedOut){i.preventDefault();this.setNextOptionValue(e);this.keyboardNav=true}break;case"Home":this.menuOptionSelect.emit({value:this.ungroupedOptions[0].value});this.keyboardNav=true;break;case"End":this.menuOptionSelect.emit({value:this.ungroupedOptions[this.ungroupedOptions.length-1].value});this.keyboardNav=true;break;case"Enter":!this.hasTimedOut&&this.handleMenuChange(false);break;case"Escape":this.handleMenuChange(false);break;case"Backspace":if(t){this.inputEl.focus()}break;case"Shift":break;default:if(t&&i.key!=="Tab"&&!this.hasTimedOut){this.inputEl.focus()}if(i.key.length===1){this.keyboardNav=true}break}this.emitMenuKeyPress(this.keyboardNav,i.key)};this.handleMenuKeyUp=i=>{if(i.key==="Tab"&&i.shiftKey){this.preventClickOpen=false}};this.getOptionId=i=>`${this.menuId}-${i}`;this.getOptionAriaLabel=(i,e)=>{let t=i.label;if(i.description){t=`${t}, ${i.description}`}if(e){return`${t}, ${e.label} group`}else{return t}};this.getSortedOptions=i=>{let e=[];if(i.sort){e=i.sort(((i,e)=>i.recommended&&!e.recommended?-1:0))}return e};this.isManualMode=this.activationType==="manual";this.scrollToSelected=i=>{const e=i.querySelector(".option[aria-selected]");if(e){const t=e.offsetTop+e.offsetHeight;if(t>i.scrollTop+i.offsetHeight||t<i.scrollTop+i.offsetHeight){i.scrollTop=e.offsetTop}e.focus()}};this.loadUngroupedOptions=()=>{if(this.options.length>0&&this.options.map){this.options.map((i=>{if(i.children){i.children.map((i=>!i.disabled&&this.ungroupedOptions.push(i)))}else if(!i.disabled){this.ungroupedOptions.push(i)}}))}this.ungroupedOptions=this.getSortedOptions(this.ungroupedOptions);this.ungroupedOptionsSet.emit({options:this.ungroupedOptions})};this.setMenuScrollbar=()=>{let i=0;this.host.querySelectorAll(".option").forEach((e=>i+=e.clientHeight));if(i>=320){this.menu.classList.add("menu-scroll")}};this.handleTimeoutBlur=i=>{this.timeoutBlur.emit({ev:i})};this.optionContent=i=>{var t;return e(c,null,i.loading&&e("ic-loading-indicator",{size:"icon"}),e("div",{class:"option-text-container"},e("ic-typography",{variant:"body","aria-hidden":"true"},e("p",null,i.label)),i.description&&e("ic-typography",{id:`${this.getOptionId(i===null||i===void 0?void 0:i.value)}-description`,class:"option-description",variant:"caption","aria-hidden":"true"},e("p",null,i.description))),!!i.value&&!!this.value&&(i===null||i===void 0?void 0:i.value.toLowerCase())===((t=this.value)===null||t===void 0?void 0:t.toLowerCase())&&this.parentEl.tagName!=="IC-SEARCH-BAR"&&e("span",{class:"check-icon",innerHTML:h}))};this.displayOption=(i,t,s)=>{const{open:n,value:o,keyboardNav:a,isManualMode:r,initialOptionsListRender:u,optionHighlighted:h,options:l}=this;return e("li",{id:this.getOptionId(i.value),class:{option:true,"focused-option":r?(a||u)&&i.value===h:a&&i.value===o,"last-recommended-option":i.recommended&&l[t+1]&&!l[t+1].recommended,"disabled-option":i.disabled,"loading-option":i.loading,timeout:i.timedOut},role:"option",tabindex:n&&(i.value===o||i.value===h)&&a?"0":"-1","aria-label":this.getOptionAriaLabel(i,s),"aria-selected":i.value===o,"aria-disabled":i.disabled?"true":"false",onClick:!i.timedOut&&!i.loading&&this.handleOptionClick,onBlur:this.handleBlur,onMouseDown:this.handleMouseDown,"data-value":i.value,"data-label":i.label},i.timedOut?e(c,null,e("div",{class:"loading-error-info"},e("svg",{class:"error-icon-svg","aria-labelledby":"error-title",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"#000000"},e("title",{id:"error-title"},"Error"),e("path",{d:"M0 0h24v24H0z",fill:"none"}),e("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"})),e("ic-typography",{variant:"label"},i.label)),e("ic-button",{size:"small",variant:"tertiary",onClick:this.handleRetry,onKeyDown:this.handleRetryKeyDown,onBlur:this.handleTimeoutBlur,id:"retry-button"},"Retry")):this.optionContent(i))};this.open=undefined;this.options=undefined;this.small=false;this.menuId=undefined;this.value=undefined;this.activationType="automatic";this.inputEl=undefined;this.parentEl=undefined;this.inputLabel=undefined;this.anchorEl=undefined;this.fullWidth=false;this.autoFocusOnSelected=true;this.keyboardNav=false;this.optionHighlighted=undefined;this.focusFromSearchKeypress=false;this.initialOptionsListRender=false;this.preventIncorrectTabOrder=false}watchOptionsHandler(i){this.hasTimedOut=i.some((i=>i.timedOut));this.isLoading=i.some((i=>i.loading));this.ungroupedOptions=[];this.loadUngroupedOptions()}async handleClickOpen(){if(!this.preventClickOpen){this.menuStateChange.emit({open:!this.open});this.keyboardNav=false}this.preventClickOpen=false}async handleKeyboardOpen(i){this.keyboardNav=false;if(this.activationType==="automatic"){this.autoSetInputValueKeyboardOpen(i)}else{this.manSetInputValueKeyboardOpen(i)}}async handleSetFirstOption(){this.setHighlightedOption(0)}connectedCallback(){this.getParentEl(this.parentEl);if(this.isSearchBar){this.setHighlightedOption(0);this.initialOptionsListRender=true}}componentWillLoad(){this.loadUngroupedOptions();this.parentEl.addEventListener("icClear",this.handleClearListener);this.parentEl.addEventListener("icSubmitSearch",this.handleSubmitSearch);this.hasTimedOut=this.options.some((i=>i.timedOut));this.isLoading=this.options.some((i=>i.loading))}componentDidLoad(){if(this.isSearchBar&&this.parentEl.disableFilter){this.focusFromSearchKeypress=true}u([{prop:this.open,propName:"open"},{prop:this.options,propName:"options"},{prop:this.menuId,propName:"menu-id"},{prop:this.inputLabel,propName:"input-label"}],"Menu")}componentDidRender(){if(this.open){this.popperInstance=l(this.anchorEl,this.host,{placement:"bottom",modifiers:[{name:"offset",options:{offset:[0,7]}},{name:"flip",options:{fallbackPlacements:["top"],rootBoundary:"viewport"}}]})}if(this.open&&!!this.options.length){this.setMenuScrollbar()}}componentDidUpdate(){const i=this.options.some((i=>i.value===this.value));const e=this.optionHighlighted!==null&&this.optionHighlighted!==undefined&&this.optionHighlighted!=="";if(this.open&&this.options.length!==0){if(this.value&&this.keyboardNav&&i&&this.autoFocusOnSelected&&!this.isSearchableSelect){this.scrollToSelected(this.menu)}else if(this.inputEl.tagName!=="IC-TEXT-FIELD"&&this.inputEl.tagName!=="INPUT"){this.menu.focus()}else if(e&&!this.focusFromSearchKeypress&&!this.preventIncorrectTabOrder){const i=this.host.querySelector(`li[data-value="${this.optionHighlighted}"]`);if(i){i.focus()}}}}disconnectedCallback(){this.parentEl.removeEventListener("icClear",this.handleClearListener);this.parentEl.removeEventListener("icSubmitSearch",this.handleSubmitSearch)}render(){const{inputLabel:i,options:s,menuId:n,value:c,fullWidth:o,hasTimedOut:a,isLoading:r,small:u,open:h,inputEl:l,keyboardNav:d}=this;return e(t,{class:{"full-width":o,"no-focus":(l===null||l===void 0?void 0:l.tagName)==="INPUT"||a||r,small:u,open:h}},s.length!==0&&e("ul",{id:n,class:"menu",role:"listbox","aria-label":i,"aria-activedescendant":c!=null&&c!==""?this.getOptionId(c):"",tabindex:h&&!d&&(l===null||l===void 0?void 0:l.tagName)!=="INPUT"?"0":"-1",ref:i=>this.menu=i,onKeyDown:this.handleMenuKeyDown,onKeyUp:this.handleMenuKeyUp,onBlur:this.handleBlur},this.getSortedOptions(s).map(((i,t)=>{if(i.children){if(i.children.length>0){return e("div",null,e("ic-typography",{class:"option-group-title",role:"presentation",variant:"subtitle-small"},e("p",null,i.label)),i.children.map((e=>this.displayOption(e,t,i))))}else{return null}}else{return this.displayOption(i,t)}}))))}get host(){return s(this)}static get watchers(){return{options:["watchOptionsHandler"]}}};v.style=b;export{m as ic_input_component_container,f as ic_input_container,v as ic_menu};
-//# sourceMappingURL=p-559b3d17.entry.js.map