@ukic/web-components 2.0.0-alpha.121

package/dist/core/p-44512ebe.js

@@ -0,0 +1,2 @@
+const t=`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>\n    <title>close icon</title>\n</svg>\n`;export{t as c};
+//# sourceMappingURL=p-44512ebe.js.map

package/dist/core/p-44512ebe.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/core/p-44af91df.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as e,h as t,H as c,g as a}from"./p-f9370be6.js";import{a as s,r as o,d as r}from"./p-e5a09372.js";const n='/*! 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-dense{margin-bottom:10px}.ic-switch-toggle{display:flex;align-items:center;justify-content:space-around;width:64px;height:var(--ic-space-xl);position:relative;border-radius:100vw;background-color:var(--ic-architectural-200);border: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:21.33px;height:21.33px;border-radius:50%;position:absolute;z-index:2;top:50%;left:5.33px;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:10px;height:10px}.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 12px var(--ic-action-dark-bg-hover)}.ic-switch-input:not([disabled])+.ic-switch-toggle:active::before{box-shadow:0 0 0 12px var(--ic-action-dark-bg-active)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:hover::before{box-shadow:0 0 0 12px var(--ic-action-default-bg-hover)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:active::before{box-shadow:0 0 0 12px 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 1px var(--ic-architectural-white),\n    0 0 0 3px var(--ic-action-default),\n    0 0 0 8px 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: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:1px dashed #98c9f5}.ic-switch-input:disabled:checked+.ic-switch-toggle::before{background-color:var(--ic-architectural-white)}.ic-switch-dense{gap:var(--ic-space-xxxs)}.ic-switch-dense .ic-switch-checked-status{padding-left:6px}.ic-switch-dense .ic-switch-toggle{width:var(--ic-space-xxl);height:var(--ic-space-lg)}.ic-switch-dense .ic-switch-toggle::before{width:var(--ic-space-md);height:var(--ic-space-md);left:var(--ic-space-xxs)}.ic-switch-dense .ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-lg), -50%)}::slotted(*){margin-left:var(--ic-space-sm)}';let l=0;const h=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-${l++}`;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.label=undefined;this.hideLabel=false;this.helperText="";this.checked=null;this.dense=false;this.disabled=false;this.name=this.inputId;this.showState=false;this.value="on";this.checkedState=false}componentDidLoad(){s([{prop:this.label,propName:"label"}],"Switch")}render(){const{label:i,checked:e,checkedState:a,dense:s,disabled:n,name:l,showState:h,value:d,hideLabel:p,helperText:b,inputId:u}=this;const g=e==null?a:e;o(true,this.el,l,g?d:"",n);const w=r(u,b!=="",false);return t(c,null,t("label",{class:{["ic-switch-container"]:true,["ic-switch-disabled"]:n,["ic-switch-dense"]:s},htmlFor:u},!p&&t("ic-input-label",{for:u,label:i,helperText:b,readonly:true,disabled:n,class:{["ic-switch-label"]:true,["ic-switch-label-dense"]:s}}),!p&&t("span",{class:"ic-switch-line-break"}),t("input",{checked:g,disabled:n,"aria-label":i,"aria-checked":g?"true":"false","aria-describedby":w,role:"switch",class:"ic-switch-input",type:"checkbox",name:"toggle",id:u,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"}),h&&t("ic-typography",{"aria-hidden":"true",variant:"label",class:"ic-switch-checked-status"},g?"On":"Off")))}get el(){return a(this)}};h.style=n;export{h as ic_switch};
+//# sourceMappingURL=p-44af91df.entry.js.map

package/dist/core/p-44af91df.entry.js.map

@@ -0,0 +1 @@
+{"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","[object Object]","onComponentRequiredPropUndefined","prop","label","propName","dense","disabled","name","showState","hideLabel","helperText","internalChecked","renderHiddenInput","el","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":"kHAAA,MAAMA,EAAc,q1LCiBpB,IAAIC,EAAW,QAUFC,EAAM,kIACTC,KAAAC,QAAU,mBAAmBH,MAgE7BE,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,4CAjEgB,sBAIA,gBAIK,gBAIT,oBAIG,gBAILL,KAAKC,uBAIC,iBASE,uBAiBC,MAkBjCW,mBACEC,EACE,CAAC,CAAEC,KAAMd,KAAKe,MAAOC,SAAU,UAC/B,UAIJJ,SACE,MAAMG,MACJA,EAAKT,QACLA,EAAOH,aACPA,EAAYc,MACZA,EAAKC,SACLA,EAAQC,KACRA,EAAIC,UACJA,EAASb,MACTA,EAAKc,UACLA,EAASC,WACTA,EAAUrB,QACVA,GACED,KAEJ,MAAMuB,EAAkBjB,GAAW,KAAOH,EAAeG,EAEzDkB,EACE,KACAxB,KAAKyB,GACLN,EACAI,EAAkBhB,EAAQ,GAC1BW,GAGF,MAAMQ,EAAcC,EAClB1B,EACAqB,IAAe,GACf,OAGF,OACEM,EAACC,EAAI,KACHD,EAAA,QAAA,CACEE,MAAO,CACLlB,CAAC,uBAAwB,KACzBA,CAAC,sBAAuBM,EACxBN,CAAC,mBAAoBK,GAEvBc,QAAS9B,IAEPoB,GACAO,EAAA,iBAAA,CACEI,IAAK/B,EACLc,MAAOA,EACPO,WAAYA,EACZW,SAAU,KACVf,SAAUA,EACVY,MAAO,CACLlB,CAAC,mBAAoB,KACrBA,CAAC,yBAA0BK,MAI/BI,GAAaO,EAAA,OAAA,CAAME,MAAM,yBAC3BF,EAAA,QAAA,CACEtB,QAASiB,EACTL,SAAUA,EAAQgB,aACNnB,EAAKoB,eACHZ,EAAkB,OAAS,QAAOa,mBAC9BV,EAClBW,KAAK,SACLP,MAAM,kBACNQ,KAAK,WACLnB,KAAK,SACLoB,GAAItC,EACJO,QAASR,KAAKQ,QACdE,OAAQV,KAAKU,OACb8B,SAAUxC,KAAKE,eAEjB0B,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,GAAI7B,EAAQ,IAAM,IAClB8B,GAAG,IACHC,GAAI/B,EAAQ,IAAM,OAGtBW,EAAA,MAAA,CACEE,MAAM,iBAAgBW,cACV,OACZC,UAAU,QACVC,QAAQ,YACRC,MAAM,8BAENhB,EAAA,SAAA,CACEE,MAAM,wBACNmB,KAAK,OACLC,GAAG,IACHC,GAAG,IACHC,EAAGnC,EAAQ,QAAU,YAI3BW,EAAA,OAAA,CAAMT,KAAK,oBACVC,GACCQ,EAAA,gBAAA,CAAAa,cACc,OACZY,QAAQ,QACRvB,MAAM,4BAELP,EAAkB,KAAO","sourcesContent":["@import \"../../global/normalise.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-dense {\n  margin-bottom: 10px;\n}\n\n.ic-switch-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 64px;\n  height: var(--ic-space-xl);\n  position: relative;\n  border-radius: 100vw;\n  background-color: var(--ic-architectural-200);\n  border: 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: 21.33px;\n  height: 21.33px;\n  border-radius: 50%;\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 5.33px;\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: 10px;\n  height: 10px;\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 12px 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 12px 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 12px 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 12px 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 1px var(--ic-architectural-white),\n    0 0 0 3px var(--ic-action-default),\n    0 0 0 8px 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: 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: 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-dense {\n  gap: var(--ic-space-xxxs);\n}\n\n.ic-switch-dense .ic-switch-checked-status {\n  padding-left: 6px;\n}\n\n.ic-switch-dense .ic-switch-toggle {\n  width: var(--ic-space-xxl);\n  height: var(--ic-space-lg);\n}\n\n.ic-switch-dense .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-dense .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","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\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: true,\n})\nexport class Switch {\n  private inputId = `ic-switch-input-${inputIds++}`;\n\n  @Element() el: HTMLIcSwitchElement;\n\n  /**\n   * Applies an aria-label to the component, for when no visual 'name' is provided.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n  /**\n   * If true, the component is checked, if null the components state will be uncontrolled.\n   */\n  @Prop() checked?: boolean | null = null;\n  /**\n   * If true, the component reduces in size to the dense state.\n   */\n  @Prop() dense?: boolean = false;\n  /**\n   * If true, the component is not interactive.\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 component 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\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  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Switch\"\n    );\n  }\n\n  render() {\n    const {\n      label,\n      checked,\n      checkedState,\n      dense,\n      disabled,\n      name,\n      showState,\n      value,\n      hideLabel,\n      helperText,\n      inputId,\n    } = this;\n\n    const internalChecked = checked == null ? checkedState : checked;\n\n    renderHiddenInput(\n      true,\n      this.el,\n      name,\n      internalChecked ? value : \"\",\n      disabled\n    );\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-dense\"]: dense,\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-dense\"]: dense,\n              }}\n            ></ic-input-label>\n          )}\n          {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n          <input\n            checked={internalChecked}\n            disabled={disabled}\n            aria-label={label}\n            aria-checked={internalChecked ? \"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={dense ? \"2\" : \"1\"}\n                x2=\"9\"\n                y2={dense ? \"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={dense ? \"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              {internalChecked ? \"On\" : \"Off\"}\n            </ic-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-4b1b46f5.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as o,g as i}from"./p-f9370be6.js";const a='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(.ic-typography-spacing-h2){margin:var(--ic-space-xxl) 0 var(--ic-space-lg)}:host(.ic-typography-spacing-h3){margin:var(--ic-space-xl) 0 var(--ic-space-md)}:host(.ic-typography-spacing-h4){margin:var(--ic-space-lg) 0 var(--ic-space-md)}:host(.ic-typography-spacing-subtitle-large){margin:0 0 var(--ic-space-lg)}:host(.ic-typography-spacing-body){margin:0 0 var(--ic-space-md)}:host(.ic-typography-spacing-h2:first-child),:host(.ic-typography-spacing-h3:first-child),:host(.ic-typography-spacing-h4:first-child){margin-top:0}:host(.ic-typography-h1){font:var(--ic-font-h1)}:host(.ic-typography-h2){font:var(--ic-font-h2);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-h3){font:var(--ic-font-h3)}:host(.ic-typography-h4){font:var(--ic-font-h4);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-subtitle-large){font:var(--ic-font-subtitle-large);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-subtitle-small){font:var(--ic-font-subtitle-small);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-body){font:var(--ic-font-body);letter-spacing:var(--ic-font-letter-spacing-0pt005)}:host(.ic-typography-caption){font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-caption-uppercase){font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025);text-transform:uppercase}:host(.ic-typography-label){font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025)}:host(.ic-typography-label-uppercase){font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025);text-transform:uppercase}:host(.ic-typography-no-wrap){white-space:nowrap}:host ::slotted(h1),:host ::slotted(h2),:host ::slotted(h3),:host ::slotted(h4),:host ::slotted(h5),:host ::slotted(h6),:host ::slotted(p),:host ::slotted(label){font:inherit;letter-spacing:inherit}';const n=class{constructor(e){t(this,e);this.variant="body";this.spacing=false}render(){const{variant:t,spacing:i}=this;return e(o,{class:{[`ic-typography-${t}`]:true,[`ic-typography-spacing-${t}`]:i}},e("slot",null))}get el(){return i(this)}};n.style=a;export{n as ic_typography};
+//# sourceMappingURL=p-4b1b46f5.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-typography/ic-typography.css?tag=ic-typography&encapsulation=shadow","src/components/ic-typography/ic-typography.tsx"],"names":["icTypographyCss","Typography","[object Object]","variant","spacing","this","h","Host","class"],"mappings":"yDAAA,MAAMA,EAAkB,0wICSXC,EAAU,4CAMoB,oBAKb,MAE5BC,SACE,MAAMC,QAAEA,EAAOC,QAAEA,GAAYC,KAE7B,OACEC,EAACC,EAAI,CACHC,MAAO,CACLN,CAAC,iBAAiBC,KAAY,KAC9BD,CAAC,yBAAyBC,KAAYC,IAGxCE,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\n:host(.ic-typography-spacing-h2) {\n  margin: var(--ic-space-xxl) 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-spacing-h3) {\n  margin: var(--ic-space-xl) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-spacing-h4) {\n  margin: var(--ic-space-lg) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-spacing-subtitle-large) {\n  margin: 0 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-spacing-body) {\n  margin: 0 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-spacing-h2:first-child),\n:host(.ic-typography-spacing-h3:first-child),\n:host(.ic-typography-spacing-h4:first-child) {\n  margin-top: 0;\n}\n\n:host(.ic-typography-h1) {\n  font: var(--ic-font-h1);\n}\n\n:host(.ic-typography-h2) {\n  font: var(--ic-font-h2);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-h3) {\n  font: var(--ic-font-h3);\n}\n\n:host(.ic-typography-h4) {\n  font: var(--ic-font-h4);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-large) {\n  font: var(--ic-font-subtitle-large);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-small) {\n  font: var(--ic-font-subtitle-small);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-body) {\n  font: var(--ic-font-body);\n  letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-caption) {\n  font: var(--ic-font-caption);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-caption-uppercase) {\n  font: var(--ic-font-caption);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n  text-transform: uppercase;\n}\n\n:host(.ic-typography-label) {\n  font: var(--ic-font-label);\n  letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-label-uppercase) {\n  font: var(--ic-font-label);\n  letter-spacing: var(--ic-font-letter-spacing-0pt025);\n  text-transform: uppercase;\n}\n\n:host(.ic-typography-no-wrap) {\n  white-space: nowrap;\n}\n\n:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label) {\n  font: inherit;\n  letter-spacing: inherit;\n}\n","import { Component, Prop, h, Element, Host } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\n\n@Component({\n  styleUrl: \"ic-typography.css\",\n  tag: \"ic-typography\",\n  shadow: true,\n})\nexport class Typography {\n  @Element() el: HTMLIcTypographyElement;\n\n  /**\n   * The ICDS typography style to use.\n   */\n  @Prop() variant?: IcTypographyVariants = \"body\";\n\n  /**\n   * Adds margin to the bottom of the typography relative to the font-size.\n   */\n  @Prop() spacing?: boolean = false;\n\n  render() {\n    const { variant, spacing } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-typography-${variant}`]: true,\n          [`ic-typography-spacing-${variant}`]: spacing,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-4b692529.entry.js

@@ -0,0 +1,2 @@
+import{r as i,h as t,H as a,g as e}from"./p-f9370be6.js";import{c as o}from"./p-44512ebe.js";import{c as n}from"./p-e28af65b.js";import{x as s,i as l,D as r,g as p,f as d,c,a as h,j as v,I as g}from"./p-e5a09372.js";const m=`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">\n  <path d="M0 0h24v24H0V0z" fill="none" />\n  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />\n  <title>menu icon</title>\n</svg>\n`;const b=":host{display:block;--side-navigation-position:fixed;--side-navigation-position-left:0;--side-navigation-position-top:var(--ic-space-xxl);--side-navigation-height:var(--ic-space-xxl);--sm-side-navigation-top-bar-height:56px;--sm-side-navigation-collapsed-labels-width:96px;--sm-side-navigation-expand-transition-duration:var(\n    --ic-transition-duration-slow\n  );--side-navigation-width:320px}:host>*{box-sizing:border-box}.side-navigation{display:flex;flex-direction:column;width:var(--side-navigation-width);color:var(--ic-theme-text);position:var(--side-navigation-position);top:var(--side-navigation-position-top);left:calc(var(--side-navigation-width) * -1);bottom:0;background-color:var(--ic-theme-primary)}:host(.inline) .side-navigation{position:absolute;height:100%}:host(.anchor-right) .side-navigation{right:calc(var(--side-navigation-width) * -1)}.classification-spacing{margin-bottom:var(--ic-space-lg)}.navigation-list{padding:0;margin:0;list-style:none}.side-navigation-inner{background-color:var(--ic-theme-primary);display:flex;flex-direction:column;flex:1 1 0;overflow:auto;visibility:hidden}:host(.inline) .side-navigation-inner{flex:1}:host(.xs-menu-open) .side-navigation{transition:left var(--ic-easing-transition-slow);left:0}:host(.xs-menu-close) .side-navigation{left:calc(var(--side-navigation-width) * -1);transition:left var(--ic-easing-transition-slow)}:host(.anchor-right.xs-menu-open) .side-navigation{right:0;left:auto}:host(.anchor-right.xs-menu-close) .side-navigation{right:calc(var(--side-navigation-width) * -1);left:auto;transition:right var(--ic-easing-transition-slow)}.bottom-wrapper{border-top:var(--ic-keyline-lighten);position:sticky;bottom:0;left:0;z-index:2;box-shadow:-3px -3px 8px rgb(0 0 0 / 20%);background-color:var(--ic-theme-primary);display:flex;flex-direction:column;visibility:hidden}:host(.dark) .bottom-wrapper{border-top:var(--ic-keyline-darken)}.top-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--side-navigation-height);padding:var(--ic-space-xs);box-sizing:border-box;background-color:var(--ic-theme-primary);position:fixed;top:0;left:0;right:0;border-bottom:var(--ic-keyline-darken);box-shadow:var(--ic-elevation-overlay);z-index:2;overflow:hidden;visibility:visible}:host(.inline) .top-bar{position:absolute}.top-bar.dark a:focus{box-shadow:var(--ic-border-focus)}.top-bar.light{border-bottom:var(--ic-keyline-lighten)}.app-title-wrapper{display:flex;margin-left:var(--ic-space-xs);border-left:var(--ic-keyline-darken);padding-left:var(--ic-space-xxs);color:var(--ic-theme-text);align-items:center}@media screen and (min-width: 340px){.app-title-wrapper ic-typography{margin-left:var(--ic-space-xs)}}:host .title-link:link{display:flex;align-items:center;transition:box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);text-decoration:none;padding:var(--ic-space-xxs);color:var(--ic-theme-text)}:host .title-link:visited,:host .title-link:active{color:var(--ic-theme-text)}:host .title-link:hover{border-radius:var(--ic-border-radius);background-color:var(--ic-theme-hover)}:host .title-link:active{background-color:var(--ic-theme-active)}:host .title-link:focus{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:none;background-color:transparent}:host .title-link ic-typography{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.app-title-wrapper ::slotted(svg){fill:var(--ic-theme-text)}.app-icon-container{display:none}.button-label{display:flex;align-items:center}.mobile-top-bar-menu-icon{display:flex}.menu-button{width:104px}.app-status-wrapper{position:absolute;right:var(--ic-space-md);top:0;bottom:0;width:auto;display:flex;align-items:center;pointer-events:none}.app-status-wrapper .app-version{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-status-wrapper .app-status{border-radius:80px;background-color:var(--ic-theme-text);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-right:var(--ic-space-xs);max-width:100px}.app-status-wrapper .app-status-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}:host(.dark) .app-status-wrapper .app-status{color:var(--ic-color-white-text)}.navigation-landmark-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}::slotted(ic-navigation-group){--navigation-group-height:44px;--navigation-group-width:100%;--navigation-group-justify-content:space-between;--navigation-group-hover:var(--ic-theme-hover);--navigation-group-text-hover:var(--ic-theme-text);--navigation-item-child-height:56px;--navigation-item-child-active:var(--ic-action-dark-bg-active);--navigation-item-child-color:var(--ic-theme-text);--navigation-group-expand-toggle-padding:4px}::slotted(ic-navigation-item),::slotted(ic-navigation-group){--navigation-item-height:56px;--navigation-item-width:auto;--navigation-item-justify-content:flex-start}.bottom-side-nav{position:relative;align-content:flex-end;height:var(--sm-side-navigation-top-bar-height)}.primary-navigation{flex:1;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}.primary-navigation::-webkit-scrollbar{display:none}.primary-navigation,.secondary-navigation{overflow-x:hidden}.bottom-side-nav .menu-expand-button{display:none}.menu-visibility-visible{visibility:visible}.menu-visibility-hidden{visibility:hidden}@media screen and (min-width: 340px){.app-icon-container{display:flex}}@media screen and (min-width: 577px){:host{display:flex;flex-direction:column;height:100vh;position:var(--side-navigation-position);left:0;top:0;bottom:0}:host(.inline){position:absolute}:host(.static){position:relative;left:auto;top:auto;bottom:auto}.app-icon-container{padding:var(--ic-space-xxs) 0}.top-bar{--side-navigation-height:var(--sm-side-navigation-top-bar-height);position:relative;padding:0;box-shadow:-3px 3px 8px rgb(0 0 0 / 20%)}:host(.inline) .top-bar{position:relative}:host(.anchor-right) .top-bar{box-shadow:3px 3px 8px rgb(0 0 0 / 20%)}:host(.anchor-right) .bottom-wrapper{box-shadow:3px -3px 8px rgb(0 0 0 / 20%)}.side-navigation,.top-bar{width:var(--sm-side-navigation-top-bar-height)}:host(.sm-collapsed){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed.collapsed-labels){width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-expanded){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow);box-shadow:var(--ic-elevation-overlay)}.side-navigation{--side-navigation-position-top:0;flex:1;position:relative;top:auto;left:auto;bottom:auto}:host(.inline) .side-navigation{position:relative}:host(.anchor-right) .side-navigation{left:auto;right:0}.side-navigation-inner{width:100%;visibility:visible}.bottom-wrapper{visibility:visible}.app-title-wrapper{margin-left:0;border-left:none;padding:var(--ic-space-sm)}.app-title-wrapper ::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg)}.app-title-wrapper ic-typography{margin-left:var(--ic-space-md);font-weight:var(--ic-font-weight-semibold)}:host(.sm-collapsed) .app-title-wrapper ic-typography{position:absolute;left:-9999px;opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.sm-expanded) ic-typography{position:relative;left:0}:host(.sm-expanded) :is(.side-navigation,.top-bar){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed) :is(.side-navigation,.top-bar){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.anchor-right.sm-expanded) :is(.side-navigation,.top-bar){left:auto;right:0}.app-status-wrapper,:host(.sm-collapsed) .app-status-wrapper{display:none}:host(.sm-expanded) .app-status-wrapper{display:flex}.bottom-side-nav{justify-items:flex-end;display:flex;flex-direction:column}.bottom-side-nav .menu-expand-button{padding-left:var(--ic-space-md);height:var(--sm-side-navigation-top-bar-height);width:100%;color:var(--ic-theme-text);background-color:transparent;outline:none;border:none;cursor:pointer;display:flex;transition:var(--ic-easing-transition-fast)}.bottom-side-nav .menu-expand-button svg{justify-items:flex-start;align-self:center}.bottom-side-nav .menu-expand-button:hover{background-color:var(--ic-theme-hover)}:host .bottom-side-nav{outline:none}:host .bottom-side-nav .menu-expand-button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1);transition:transform var(--ic-easing-transition-slow)}:host(.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1);transition:transform var(--ic-easing-transition-slow)}:host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1)}:host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1)}:host(.sm-collapsed) ::slotted(ic-navigation-item){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-item),:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-item-label-opacity:0}:host(.sm-expanded) ::slotted(ic-navigation-item),:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-group-title-position:absolute;--navigation-group-title-position-left:-9999px;--navigation-group-title-opacity:none}:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-group-title-position:relative;--navigation-group-title-position-left:0;--navigation-group-expand-toggle-padding:4px;--navigation-group-title-opacity:flex}:host(.sm-collapsed.collapsed-labels) .side-navigation,:host(.sm-collapsed.collapsed-labels) .top-bar{width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-collapsed.collapsed-labels) .menu-expand-button{padding:0}:host(.sm-collapsed.collapsed-labels) .app-title-wrapper{width:100%;justify-content:center}:host(.sm-collapsed.collapsed-labels) ::slotted(ic-navigation-group){--navigation-group-justify-content:center;--navigation-item-label-opacity:1;--navigation-group-item-min-width:100%;--navigation-group-expand-toggle-padding:16px}:host(.collapsed-labels) .bottom-side-nav .menu-expand-button{justify-content:center}:host .collapsed-icon-labels-start{visibility:hidden;opacity:0}:host .collapsed-icon-labels-end{visibility:visible;opacity:1;transition:visibility 0s, opacity var(--ic-easing-transition-slow)}}@media screen and (min-width: 993px){:host{position:relative;left:auto;top:auto;bottom:auto}:host(.inline){position:relative}:host(.sm-expanded){box-shadow:none}}";const u=class{constructor(a){i(this,a);this.ANIMATION_DURATION=parseInt(s("--ic-transition-duration"))||0;this.emitSideNavigationExpanded=i=>{const t=new CustomEvent("sideNavExpanded",{detail:{sideNavExpanded:i.sideNavExpanded,sideNavMobile:i.sideNavMobile}});this.el.dispatchEvent(t)};this.toggleMenu=()=>{this.menuOpen=!this.menuOpen;this.setMobileMenuAriaAttributes(this.menuOpen);this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);this.emitSideNavigationExpanded({sideNavExpanded:this.menuOpen,sideNavMobile:true})};this.setToggleMenuFlyoutMenuVisibility=i=>{const t=this.el.shadowRoot.querySelector("#side-navigation");const a=t.querySelector(".side-navigation-inner");const e=t.querySelector(".bottom-wrapper");if(i){e.classList.add("menu-visibility-visible");a.classList.add("menu-visibility-visible")}else{setTimeout((()=>{a.classList.remove("menu-visibility-visible");e.classList.remove("menu-visibility-visible")}),this.ANIMATION_DURATION)}};this.setMobileMenuAriaAttributes=i=>{const t=this.el.shadowRoot.querySelector("#menu-button").shadowRoot.querySelector("button");if(i){t.setAttribute("aria-expanded","true");t.setAttribute("aria-label","Close navigation menu")}else{t.setAttribute("aria-expanded","false");t.setAttribute("aria-label","Open navigation menu")}};this.setAndRemoveNoWrapAfterMenuExpanded=()=>{const i=this.el.shadowRoot.querySelector(".title-link ic-typography");i.classList.add("ic-typography-no-wrap");setTimeout((()=>{i.classList.remove("ic-typography-no-wrap")}),this.ANIMATION_DURATION)};this.toggleMenuExpanded=()=>{this.menuExpanded=!this.menuExpanded;if(this.menuExpanded){this.setAndRemoveNoWrapAfterMenuExpanded()}this.arrangeSlottedNavigationItem(this.menuExpanded);this.displayTooltipWithExpandedLongLabel(this.menuExpanded);if(this.collapsedIconLabels){this.animateCollapsedIconLabels()}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded})};this.arrangeSlottedNavigationItem=i=>{const t=this.el.querySelectorAll("ic-navigation-item");t.forEach((t=>{const a=l(t,"navigation-item");if(a){const a=t.querySelector("[slot='navigation-item']");const e=document.createElement("div");const o=a.querySelector("svg");const n=t.textContent.trim();const s=document.createElement("ic-typography");s.classList.add("ic-typography-label","hydrated","navigation-item-side-nav-slotted-text");e.className="icon-container";e.append(o);a.textContent="";s.textContent=n;a.append(e);a.append(s);if(this.collapsedIconLabels){this.styleSlottedCollapsedIconLabels(i,s)}else{this.styleSlottedIconLabels(i,s)}}}))};this.styleSlottedCollapsedIconLabels=(i,t)=>{if(i){t.style.marginTop="0";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}else{t.style.marginTop="10px";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}};this.styleSlottedIconLabels=(i,t)=>{if(i){t.style.opacity="1";t.style.visibility="visible";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}else{t.style.opacity="0";t.style.visibility="hidden";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}};this.animateCollapsedIconLabels=()=>{const i=this.el.shadowRoot.querySelector(".primary-navigation");const t=this.el.shadowRoot.querySelector(".bottom-wrapper > .secondary-navigation");if(i){i.classList.remove("collapsed-icon-labels-end");i.classList.add("collapsed-icon-labels-start")}if(t){t.classList.remove("collapsed-icon-labels-end");t.classList.add("collapsed-icon-labels-start")}this.el.addEventListener("transitionend",(()=>{if(i){i.classList.remove("collapsed-icon-labels-start");i.classList.add("collapsed-icon-labels-end")}if(t){t.classList.remove("collapsed-icon-labels-start");t.classList.add("collapsed-icon-labels-end")}}))};this.paddingIconWidth=i=>{const t=i[0].shadowRoot&&i[0].shadowRoot.querySelector("ic-tooltip a")||i[0].querySelector("a");const a=i[0].querySelector("svg");const e={gap:window.getComputedStyle(t).gap,iconWidth:window.getComputedStyle(a).width,paddingLeft:window.getComputedStyle(t).paddingLeft};return Object.values(e).reduce(((i,t)=>i+=parseInt(t)),0)};this.displayTooltipWithExpandedLongLabel=i=>{let t;if(i){t=setTimeout((()=>{const i=this.el.clientWidth;const t=Array.from(this.el.querySelectorAll("ic-navigation-item"));const a=t.length?this.paddingIconWidth(t):0;t.forEach((t=>{var e,o;const n=((e=t.shadowRoot&&t.shadowRoot.querySelector("ic-tooltip .link ic-typography.ic-typography-label"))===null||e===void 0?void 0:e.scrollWidth)||((o=t.querySelector("ic-typography.ic-typography-label"))===null||o===void 0?void 0:o.scrollWidth);if(n>i-a){t.setAttribute("display-navigation-tooltip","true")}}))}),this.ANIMATION_DURATION)}else{clearTimeout(t);const i=Array.from(this.el.querySelectorAll("ic-navigation-item"));i.forEach((i=>{i.setAttribute("display-navigation-tooltip","false")}))}};this.setMenuExpanded=i=>{this.menuExpanded=i};this.setParentPaddingTop=i=>{this.el.parentElement.style.paddingTop=i};this.setParentPaddingLeft=i=>{this.el.parentElement.style.paddingLeft=i};this.resizeObserver=null;this.resizeObserverCallback=i=>{if(i!==this.deviceSize){this.deviceSize=i;if(i===r.S){if(!this.disableAutoParentStyling){const i=this.el.shadowRoot.querySelector(".top-bar").scrollHeight;this.setParentPaddingTop(`${i}px`);this.setParentPaddingLeft("0")}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:true})}else{if(!this.disableAutoParentStyling){this.setParentPaddingTop("0")}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:false})}if(i>r.L){if(!this.disableAutoParentStyling){this.setParentPaddingTop("0");this.setParentPaddingLeft("0")}}else if(i>r.S&&i<=r.L&&!this.static&&!this.disableAutoParentStyling){if(this.collapsedIconLabels){this.setParentPaddingLeft("calc(var(--ic-space-xxl) * 2)")}else{this.setParentPaddingLeft("calc(var(--ic-space-xxl) + var(--ic-space-xs))")}}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const i=p();this.deviceSizeAppTitle=i;this.resizeObserverCallback(i)}));this.resizeObserver.observe(document.body,{box:"content-box"})};this.setCollapsedIconLabels=()=>{const i=Array.from(this.el.querySelectorAll("ic-navigation-item"));i.forEach((i=>{i.setAttribute("collapsed-icon-label","true")}))};this.styleSlottedCollapsedIconLabel=()=>{const i=Array.from(this.el.querySelectorAll(".navigation-item-side-nav-slotted-text"));i.forEach((i=>{var t,a;if((a=(t=i===null||i===void 0?void 0:i.parentElement)===null||t===void 0?void 0:t.parentElement)===null||a===void 0?void 0:a.classList.contains("navigation-item-side-nav-collapsed-with-label")){i.style.whiteSpace="nowrap";i.style.overflow="hidden";i.style.textOverflow="ellipsis";i.style.marginTop="10px"}}))};this.renderTopBar=({isSDevice:i,foregroundColor:a,menuOpen:e,href:n,isAppNameSubtitleVariant:s,appTitle:l})=>t("div",{class:{"top-bar":true,[this.foregroundColor]:true}},i&&t("nav",{"aria-labelledby":"menu-navigation-toggle-button-landmark","aria-hidden":"false"},t("ic-button",{"aria-label":"Open navigation menu",class:"menu-button",id:"menu-button",variant:"secondary",size:"dense","full-width":"true",buttonStyle:a,onClick:this.toggleMenu,"aria-owns":"side-navigation","aria-haspopup":"true","aria-expanded":"false"},t("span",{class:"mobile-top-bar-menu-icon",slot:"icon",innerHTML:e?o:m}),e?"Close":"Menu"),t("span",{id:"menu-navigation-toggle-button-landmark",class:"navigation-landmark-title","aria-hidden":"true"},"Navigation menu toggle button")),t("div",{class:"app-title-wrapper"},t("a",{href:n,class:"title-link"},t("div",{class:"app-icon-container","aria-hidden":"true"},t("slot",{name:"app-icon"})),t("ic-typography",{variant:s?"subtitle-small":"h3"},l))));this.appTitle=undefined;this.status=undefined;this.version=undefined;this.expanded=false;this.href="/";this.static=false;this.collapsedIconLabels=false;this.inline=false;this.disableAutoParentStyling=false;this.foregroundColor=d();this.menuOpen=false;this.menuExpanded=false;this.deviceSize=r.XL;this.deviceSizeAppTitle=r.S;this.hasSecondaryNavigation=false}themeChangeHandler(i){const t=i.detail;this.foregroundColor=t.mode}componentWillLoad(){if(this.expanded){this.setMenuExpanded(true)}else{this.setMenuExpanded(false)}if(this.collapsedIconLabels){this.setCollapsedIconLabels()}this.hasSecondaryNavigation=l(this.el,"secondary-navigation")}componentDidLoad(){this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:this.deviceSize===r.S});c(this.runResizeObserver);this.arrangeSlottedNavigationItem();this.styleSlottedCollapsedIconLabel();this.displayTooltipWithExpandedLongLabel(this.menuExpanded);h([{prop:this.appTitle,propName:"app-title"}],"Side Navigation")}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){const{appTitle:i,menuOpen:e,foregroundColor:o,menuExpanded:s,href:p,status:d,version:c,collapsedIconLabels:h,inline:m}=this;const b=this.deviceSize===r.S;const u=this.deviceSize===r.M;const x=this.deviceSize>=r.L;const f=this.deviceSizeAppTitle===r.S;const y=u||x&&!this.static;const w={isSDevice:b,foregroundColor:o,menuOpen:e,href:p,isAppNameSubtitleVariant:f,appTitle:i};return t(a,{class:{"xs-menu-open":e&&b,"xs-menu-close":!e&&b,"sm-collapsed":!b&&!s,"sm-expanded":!b&&s,[g.Dark]:o===g.Dark,["collapsed-labels"]:!b&&!s&&h,["static"]:this.static,["inline"]:m}},b&&this.renderTopBar(Object.assign({},w)),t("div",{class:"side-navigation",id:"side-navigation"},!b&&this.renderTopBar(Object.assign({},w)),t("div",{class:"side-navigation-inner"},l(this.el,"primary-navigation")&&t("nav",{class:"primary-navigation","aria-labelledby":"primary-navigation-landmark"},t("span",{"aria-hidden":"true",class:"navigation-landmark-title",id:"primary-navigation-landmark"},"Primary"),t("ul",{class:"navigation-list"},t("slot",{name:"primary-navigation"})))),t("div",{class:{["bottom-wrapper"]:true,["classification-spacing"]:v()}},l(this.el,"secondary-navigation")&&t("nav",{class:"secondary-navigation","aria-labelledby":"secondary-navigation-landmark"},t("span",{"aria-hidden":"true",class:"navigation-landmark-title",id:"secondary-navigation-landmark"},"Secondary"),t("ul",{class:"navigation-list"},t("slot",{name:"secondary-navigation"}))),t("div",{class:"bottom-side-nav"},this.hasSecondaryNavigation&&t("ic-divider",null),y&&t("button",{class:"menu-expand-button",innerHTML:n,onClick:this.toggleMenuExpanded,"aria-label":`${s?"Collapse":"Expand"} side navigation`}),t("div",{class:"app-status-wrapper"},d!==""&&t("div",{class:{["app-status"]:true}},t("ic-typography",{"aria-label":"app tag",variant:"label-uppercase",class:"app-status-text"},d)),c!==""&&t("ic-typography",{variant:"label",class:"app-version","aria-label":"app version"},c))))))}get el(){return e(this)}};u.style=b;export{u as ic_side_navigation};
+//# sourceMappingURL=p-4b692529.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-side-navigation/ic-side-navigation.css?tag=ic-side-navigation&encapsulation=shadow","src/components/ic-side-navigation/ic-side-navigation.tsx"],"names":["icSideNavigationCss","SideNavigation","this","ANIMATION_DURATION","parseInt","getCssProperty","emitSideNavigationExpanded","objDetails","event","CustomEvent","detail","sideNavExpanded","sideNavMobile","el","dispatchEvent","toggleMenu","menuOpen","setMobileMenuAriaAttributes","setToggleMenuFlyoutMenuVisibility","sideNav","shadowRoot","querySelector","sideNavInner","bottomWrapper","classList","add","setTimeout","remove","nativeButton","setAttribute","setAndRemoveNoWrapAfterMenuExpanded","appTitle","toggleMenuExpanded","menuExpanded","arrangeSlottedNavigationItem","displayTooltipWithExpandedLongLabel","collapsedIconLabels","animateCollapsedIconLabels","navItems","querySelectorAll","forEach","navItem","hasUsedSlot","isSlotUsed","navItemSlot","iconWrapper","document","createElement","icon","label","textContent","trim","icTypography","className","append","styleSlottedCollapsedIconLabels","styleSlottedIconLabels","style","marginTop","whiteSpace","overflow","textOverflow","opacity","visibility","transition","primaryNavigationWrapper","secondaryNavigationWrapper","addEventListener","paddingIconWidth","navItemLink","navItemSVG","navStyles","gap","window","getComputedStyle","iconWidth","width","paddingLeft","Object","values","reduce","prev","curr","timer","sideNavWidth","clientWidth","navigationItems","Array","from","paddingIconDelta","length","navigationItem","icTypographyScrollWidth","_a","scrollWidth","_b","clearTimeout","setMenuExpanded","expanded","setParentPaddingTop","value","parentElement","paddingTop","setParentPaddingLeft","resizeObserver","resizeObserverCallback","currSize","deviceSize","DEVICE_SIZES","S","disableAutoParentStyling","topBarHeight","scrollHeight","L","static","runResizeObserver","ResizeObserver","getCurrentDeviceSize","deviceSizeAppTitle","observe","body","box","setCollapsedIconLabels","styleSlottedCollapsedIconLabel","dynamicSlottedIcTypographyComps","contains","renderTopBar","isSDevice","foregroundColor","href","isAppNameSubtitleVariant","h","class","top-bar","[object Object]","aria-labelledby","aria-hidden","aria-label","id","variant","size","full-width","buttonStyle","onClick","aria-owns","aria-haspopup","aria-expanded","slot","innerHTML","closeIcon","menuIcon","name","getThemeForegroundColor","XL","ev","theme","mode","hasSecondaryNavigation","checkResizeObserver","onComponentRequiredPropUndefined","prop","propName","disconnect","status","version","inline","isMdDevice","M","isLgDevice","displayExpandBtn","topBarProps","Host","xs-menu-open","xs-menu-close","sm-collapsed","sm-expanded","IcThemeForegroundEnum","Dark","assign","hasClassificationBanner","chevronIcon"],"mappings":"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","sourcesContent":[":host {\n  display: block;\n\n  --side-navigation-position: fixed;\n  --side-navigation-position-left: 0;\n  --side-navigation-position-top: var(--ic-space-xxl);\n  --side-navigation-height: var(--ic-space-xxl);\n  --sm-side-navigation-top-bar-height: 56px;\n  --sm-side-navigation-collapsed-labels-width: 96px;\n  --sm-side-navigation-expand-transition-duration: var(\n    --ic-transition-duration-slow\n  );\n  --side-navigation-width: 320px;\n}\n\n:host > * {\n  box-sizing: border-box;\n}\n\n.side-navigation {\n  display: flex;\n  flex-direction: column;\n  width: var(--side-navigation-width);\n  color: var(--ic-theme-text);\n  position: var(--side-navigation-position);\n  top: var(--side-navigation-position-top);\n  left: calc(var(--side-navigation-width) * -1);\n  bottom: 0;\n  background-color: var(--ic-theme-primary);\n}\n\n:host(.inline) .side-navigation {\n  position: absolute;\n  height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.side-navigation-inner {\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0;\n  overflow: auto;\n  visibility: hidden;\n}\n\n:host(.inline) .side-navigation-inner {\n  flex: 1;\n}\n\n:host(.xs-menu-open) .side-navigation {\n  transition: left var(--ic-easing-transition-slow);\n  left: 0;\n}\n\n:host(.xs-menu-close) .side-navigation {\n  left: calc(var(--side-navigation-width) * -1);\n  transition: left var(--ic-easing-transition-slow);\n}\n\n:host(.anchor-right.xs-menu-open) .side-navigation {\n  right: 0;\n  left: auto;\n}\n\n:host(.anchor-right.xs-menu-close) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n  left: auto;\n  transition: right var(--ic-easing-transition-slow);\n}\n\n.bottom-wrapper {\n  border-top: var(--ic-keyline-lighten);\n  position: sticky;\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: -3px -3px 8px rgb(0 0 0 / 20%);\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n  visibility: hidden;\n}\n\n:host(.dark) .bottom-wrapper {\n  border-top: var(--ic-keyline-darken);\n}\n\n/* Mobile Top Bar */\n\n.top-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: var(--side-navigation-height);\n  padding: var(--ic-space-xs);\n  box-sizing: border-box;\n  background-color: var(--ic-theme-primary);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: var(--ic-keyline-darken);\n  box-shadow: var(--ic-elevation-overlay);\n  z-index: 2;\n  overflow: hidden;\n  visibility: visible;\n}\n\n:host(.inline) .top-bar {\n  position: absolute;\n}\n\n.top-bar.dark a:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.top-bar.light {\n  border-bottom: var(--ic-keyline-lighten);\n}\n\n.app-title-wrapper {\n  display: flex;\n  margin-left: var(--ic-space-xs);\n  border-left: var(--ic-keyline-darken);\n  padding-left: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n  align-items: center;\n}\n\n@media screen and (min-width: 340px) {\n  .app-title-wrapper ic-typography {\n    margin-left: var(--ic-space-xs);\n  }\n}\n\n:host .title-link:link {\n  display: flex;\n  align-items: center;\n  transition: box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n  color: var(--ic-theme-text);\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active {\n  background-color: var(--ic-theme-active);\n}\n\n:host .title-link:focus {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: none;\n  background-color: transparent;\n}\n\n:host .title-link ic-typography {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n  fill: var(--ic-theme-text);\n}\n\n.app-icon-container {\n  display: none;\n}\n\n.button-label {\n  display: flex;\n  align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n  display: flex;\n}\n\n.menu-button {\n  width: 104px;\n}\n\n.app-status-wrapper {\n  position: absolute;\n  right: var(--ic-space-md);\n  top: 0;\n  bottom: 0;\n  width: auto;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n.app-status-wrapper .app-version {\n  max-width: 100px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.app-status-wrapper .app-status {\n  border-radius: 80px;\n  background-color: var(--ic-theme-text);\n  color: var(--ic-color-primary-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  margin-right: var(--ic-space-xs);\n  max-width: 100px;\n}\n\n.app-status-wrapper .app-status-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 96px;\n}\n\n:host(.dark) .app-status-wrapper .app-status {\n  color: var(--ic-color-white-text);\n}\n\n.navigation-landmark-title {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n  --navigation-group-height: 44px;\n  --navigation-group-width: 100%;\n  --navigation-group-justify-content: space-between;\n  --navigation-group-hover: var(--ic-theme-hover);\n  --navigation-group-text-hover: var(--ic-theme-text);\n  --navigation-item-child-height: 56px;\n  --navigation-item-child-active: var(--ic-action-dark-bg-active);\n  --navigation-item-child-color: var(--ic-theme-text);\n  --navigation-group-expand-toggle-padding: 4px;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n  --navigation-item-height: 56px;\n  --navigation-item-width: auto;\n  --navigation-item-justify-content: flex-start;\n}\n\n/* Toggle Chevron */\n\n.bottom-side-nav {\n  position: relative;\n  align-content: flex-end;\n  height: var(--sm-side-navigation-top-bar-height);\n}\n\n.primary-navigation {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n\n  /* Hide scrollbar when required but keep functionality */\n  scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n  display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n  overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n  display: none;\n}\n\n.menu-visibility-visible {\n  visibility: visible;\n}\n\n.menu-visibility-hidden {\n  visibility: hidden;\n}\n\n/* Media Queries */\n\n@media screen and (min-width: 340px) {\n  .app-icon-container {\n    display: flex;\n  }\n}\n\n@media screen and (min-width: 577px) {\n  :host {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n    position: var(--side-navigation-position);\n    left: 0;\n    top: 0;\n    bottom: 0;\n  }\n\n  :host(.inline) {\n    position: absolute;\n  }\n\n  :host(.static) {\n    position: relative;\n    left: auto;\n    top: auto;\n    bottom: auto;\n  }\n\n  .app-icon-container {\n    padding: var(--ic-space-xxs) 0;\n  }\n\n  .top-bar {\n    --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n    position: relative;\n    padding: 0;\n    box-shadow: -3px 3px 8px rgb(0 0 0 / 20%);\n  }\n\n  :host(.inline) .top-bar {\n    position: relative;\n  }\n\n  :host(.anchor-right) .top-bar {\n    box-shadow: 3px 3px 8px rgb(0 0 0 / 20%);\n  }\n\n  :host(.anchor-right) .bottom-wrapper {\n    box-shadow: 3px -3px 8px rgb(0 0 0 / 20%);\n  }\n\n  .side-navigation,\n  .top-bar {\n    width: var(--sm-side-navigation-top-bar-height);\n  }\n\n  :host(.sm-collapsed) {\n    width: var(--sm-side-navigation-top-bar-height);\n    transition: width var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-collapsed.collapsed-labels) {\n    width: var(--sm-side-navigation-collapsed-labels-width);\n  }\n\n  :host(.sm-expanded) {\n    width: var(--side-navigation-width);\n    transition: width var(--ic-easing-transition-slow);\n    box-shadow: var(--ic-elevation-overlay);\n  }\n\n  .side-navigation {\n    --side-navigation-position-top: 0;\n\n    flex: 1;\n    position: relative;\n    top: auto;\n    left: auto;\n    bottom: auto;\n  }\n\n  :host(.inline) .side-navigation {\n    position: relative;\n  }\n\n  :host(.anchor-right) .side-navigation {\n    left: auto;\n    right: 0;\n  }\n\n  .side-navigation-inner {\n    width: 100%;\n    visibility: visible;\n  }\n\n  .bottom-wrapper {\n    visibility: visible;\n  }\n\n  .app-title-wrapper {\n    margin-left: 0;\n    border-left: none;\n    padding: var(--ic-space-sm);\n  }\n\n  .app-title-wrapper ::slotted(svg) {\n    height: var(--ic-space-lg);\n    width: var(--ic-space-lg);\n  }\n\n  .app-title-wrapper ic-typography {\n    margin-left: var(--ic-space-md);\n    font-weight: var(--ic-font-weight-semibold);\n  }\n\n  :host(.sm-collapsed) .app-title-wrapper ic-typography {\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n    transition: opacity var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-expanded) ic-typography {\n    position: relative;\n    left: 0;\n  }\n\n  :host(.sm-expanded) :is(.side-navigation, .top-bar) {\n    width: var(--side-navigation-width);\n    transition: width var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-collapsed) :is(.side-navigation, .top-bar) {\n    width: var(--sm-side-navigation-top-bar-height);\n    transition: width var(--ic-easing-transition-slow);\n  }\n\n  :host(.anchor-right.sm-expanded) :is(.side-navigation, .top-bar) {\n    left: auto;\n    right: 0;\n  }\n\n  .app-status-wrapper,\n  :host(.sm-collapsed) .app-status-wrapper {\n    display: none;\n  }\n\n  :host(.sm-expanded) .app-status-wrapper {\n    display: flex;\n  }\n\n  .bottom-side-nav {\n    justify-items: flex-end;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .bottom-side-nav .menu-expand-button {\n    padding-left: var(--ic-space-md);\n    height: var(--sm-side-navigation-top-bar-height);\n    width: 100%;\n    color: var(--ic-theme-text);\n    background-color: transparent;\n    outline: none;\n    border: none;\n    cursor: pointer;\n    display: flex;\n    transition: var(--ic-easing-transition-fast);\n  }\n\n  .bottom-side-nav .menu-expand-button svg {\n    justify-items: flex-start;\n    align-self: center;\n  }\n\n  .bottom-side-nav .menu-expand-button:hover {\n    background-color: var(--ic-theme-hover);\n  }\n\n  :host .bottom-side-nav {\n    outline: none;\n  }\n\n  :host .bottom-side-nav .menu-expand-button:focus {\n    box-shadow: var(--ic-border-focus-inset);\n    border-radius: var(--ic-border-radius-inset);\n    background-color: transparent;\n  }\n\n  :host(.sm-collapsed) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(1);\n    transition: transform var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-expanded) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(-1);\n    transition: transform var(--ic-easing-transition-slow);\n  }\n\n  :host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(-1);\n  }\n\n  :host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(1);\n  }\n\n  :host(.sm-collapsed) ::slotted(ic-navigation-item) {\n    --navigation-item-label-opacity: 1;\n  }\n\n  :host(.sm-collapsed) ::slotted(ic-navigation-item),\n  :host(.sm-collapsed) ::slotted(ic-navigation-group) {\n    --navigation-item-label-opacity: 0;\n  }\n\n  :host(.sm-expanded) ::slotted(ic-navigation-item),\n  :host(.sm-expanded) ::slotted(ic-navigation-group) {\n    --navigation-item-label-opacity: 1;\n  }\n\n  :host(.sm-collapsed) ::slotted(ic-navigation-group) {\n    --navigation-group-title-position: absolute;\n    --navigation-group-title-position-left: -9999px;\n    --navigation-group-title-opacity: none;\n  }\n\n  :host(.sm-expanded) ::slotted(ic-navigation-group) {\n    --navigation-group-title-position: relative;\n    --navigation-group-title-position-left: 0;\n    --navigation-group-expand-toggle-padding: 4px;\n    --navigation-group-title-opacity: flex;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .side-navigation,\n  :host(.sm-collapsed.collapsed-labels) .top-bar {\n    width: var(--sm-side-navigation-collapsed-labels-width);\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .menu-expand-button {\n    padding: 0;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .app-title-wrapper {\n    width: 100%;\n    justify-content: center;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) ::slotted(ic-navigation-group) {\n    --navigation-group-justify-content: center;\n    --navigation-item-label-opacity: 1;\n    --navigation-group-item-min-width: 100%;\n    --navigation-group-expand-toggle-padding: 16px;\n  }\n\n  :host(.collapsed-labels) .bottom-side-nav .menu-expand-button {\n    justify-content: center;\n  }\n\n  :host .collapsed-icon-labels-start {\n    visibility: hidden;\n    opacity: 0;\n  }\n\n  :host .collapsed-icon-labels-end {\n    visibility: visible;\n    opacity: 1;\n    transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n  }\n}\n\n@media screen and (min-width: 993px) {\n  :host {\n    position: relative;\n    left: auto;\n    top: auto;\n    bottom: auto;\n  }\n\n  :host(.inline) {\n    position: relative;\n  }\n\n  :host(.sm-expanded) {\n    box-shadow: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Listen,\n} from \"@stencil/core\";\n\nimport menuIcon from \"../../assets/hamburger-menu-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n  getCurrentDeviceSize,\n  DEVICE_SIZES,\n  checkResizeObserver,\n  isSlotUsed,\n  getThemeForegroundColor,\n  getCssProperty,\n  hasClassificationBanner,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar } from \"./ic-side-navigation.types\";\n\n/**\n * @slot app-icon - Content will be rendered adjacent to the application title at the very top of the side navigation\n * @slot primary-navigation - Content will be rendered at the top of the side navigation\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation\n */\n\n@Component({\n  tag: \"ic-side-navigation\",\n  styleUrl: \"ic-side-navigation.css\",\n  shadow: true,\n})\nexport class SideNavigation {\n  @Element() el: HTMLIcSideNavigationElement;\n  /**\n   * Title to display.\n   */\n  @Prop() appTitle!: string;\n  /**\n   * Status of application\n   */\n  @Prop() status: string;\n  /**\n   * Version of application\n   */\n  @Prop() version: string;\n  /**\n   * If true, the ic-side-navigation will load in an expanded state\n   */\n  @Prop() expanded: boolean = false;\n  /**\n   * Set application title link\n   */\n  @Prop() href: string = \"/\";\n  /**\n   * If true, the menu expand button is removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)\n   */\n  @Prop() static: boolean = false;\n  /**\n   * If true, the icon and label will appear when side navigation is collapsed\n   */\n\n  @Prop() collapsedIconLabels: boolean = false;\n  /**\n   * If true, side navigation will be contained by parent element\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * If true, disable automatic parent wrapper styling\n   */\n  @Prop() disableAutoParentStyling: boolean = false;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() menuOpen: boolean = false;\n  @State() menuExpanded: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() deviceSizeAppTitle = DEVICE_SIZES.S;\n  @State() hasSecondaryNavigation: boolean = false;\n\n  private ANIMATION_DURATION =\n    parseInt(getCssProperty(\"--ic-transition-duration\")) || 0;\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private emitSideNavigationExpanded = (objDetails: {\n    sideNavExpanded: boolean;\n    sideNavMobile?: boolean;\n  }): void => {\n    const event = new CustomEvent(\"sideNavExpanded\", {\n      detail: {\n        sideNavExpanded: objDetails.sideNavExpanded,\n        sideNavMobile: objDetails.sideNavMobile,\n      },\n    });\n    this.el.dispatchEvent(event);\n  };\n\n  private toggleMenu = (): void => {\n    this.menuOpen = !this.menuOpen;\n    this.setMobileMenuAriaAttributes(this.menuOpen);\n\n    this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuOpen,\n      sideNavMobile: true,\n    });\n  };\n\n  private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n    const sideNav = this.el.shadowRoot.querySelector(\n      \"#side-navigation\"\n    ) as HTMLDivElement;\n    const sideNavInner = sideNav.querySelector(\n      \".side-navigation-inner\"\n    ) as HTMLElement;\n    const bottomWrapper = sideNav.querySelector(\n      \".bottom-wrapper\"\n    ) as HTMLElement;\n\n    if (menuOpen) {\n      bottomWrapper.classList.add(\"menu-visibility-visible\");\n      sideNavInner.classList.add(\"menu-visibility-visible\");\n    } else {\n      setTimeout(() => {\n        sideNavInner.classList.remove(\"menu-visibility-visible\");\n        bottomWrapper.classList.remove(\"menu-visibility-visible\");\n      }, this.ANIMATION_DURATION);\n    }\n  };\n\n  private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n    const nativeButton = this.el.shadowRoot\n      .querySelector(\"#menu-button\")\n      .shadowRoot.querySelector(\"button\");\n\n    if (menuOpen) {\n      nativeButton.setAttribute(\"aria-expanded\", \"true\");\n      nativeButton.setAttribute(\"aria-label\", \"Close navigation menu\");\n    } else {\n      nativeButton.setAttribute(\"aria-expanded\", \"false\");\n      nativeButton.setAttribute(\"aria-label\", \"Open navigation menu\");\n    }\n  };\n\n  private setAndRemoveNoWrapAfterMenuExpanded = () => {\n    const appTitle = this.el.shadowRoot.querySelector(\n      \".title-link ic-typography\"\n    );\n\n    appTitle.classList.add(\"ic-typography-no-wrap\");\n\n    setTimeout(() => {\n      appTitle.classList.remove(\"ic-typography-no-wrap\");\n    }, this.ANIMATION_DURATION);\n  };\n\n  private toggleMenuExpanded = (): void => {\n    this.menuExpanded = !this.menuExpanded;\n\n    if (this.menuExpanded) {\n      this.setAndRemoveNoWrapAfterMenuExpanded();\n    }\n\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    if (this.collapsedIconLabels) {\n      this.animateCollapsedIconLabels();\n    }\n\n    this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n  };\n\n  /**\n   * In order to style nested slotted elements (e.g. using React Router components), this method\n   * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not\n   * do not take affect.\n   * @param menuExpanded boolean - true or false depending on seide navigation state\n   */\n  private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n    const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n\n    navItems.forEach((navItem) => {\n      const hasUsedSlot = isSlotUsed(navItem, \"navigation-item\");\n\n      if (hasUsedSlot) {\n        const navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\n        const iconWrapper = document.createElement(\"div\");\n        const icon = navItemSlot.querySelector(\"svg\");\n        const label = navItem.textContent.trim();\n        const icTypography = document.createElement(\"ic-typography\");\n        icTypography.classList.add(\n          \"ic-typography-label\",\n          \"hydrated\",\n          \"navigation-item-side-nav-slotted-text\"\n        );\n\n        iconWrapper.className = \"icon-container\";\n        iconWrapper.append(icon);\n\n        navItemSlot.textContent = \"\";\n\n        icTypography.textContent = label;\n\n        navItemSlot.append(iconWrapper);\n        navItemSlot.append(icTypography);\n\n        if (this.collapsedIconLabels) {\n          this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);\n        } else {\n          this.styleSlottedIconLabels(menuExpanded, icTypography);\n        }\n      }\n    });\n  };\n\n  private styleSlottedCollapsedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLIcTypographyElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.marginTop = \"0\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    } else {\n      icTypography.style.marginTop = \"10px\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    }\n  };\n\n  private styleSlottedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLSpanElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.opacity = \"1\";\n      icTypography.style.visibility = \"visible\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    } else {\n      icTypography.style.opacity = \"0\";\n      icTypography.style.visibility = \"hidden\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    }\n  };\n\n  private animateCollapsedIconLabels = () => {\n    const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".primary-navigation\"\n    );\n    const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".bottom-wrapper > .secondary-navigation\"\n    );\n\n    if (primaryNavigationWrapper) {\n      primaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n      primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n    }\n\n    if (secondaryNavigationWrapper) {\n      secondaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n      secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n    }\n\n    this.el.addEventListener(\"transitionend\", () => {\n      if (primaryNavigationWrapper) {\n        primaryNavigationWrapper.classList.remove(\n          \"collapsed-icon-labels-start\"\n        );\n        primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n      }\n\n      if (secondaryNavigationWrapper) {\n        secondaryNavigationWrapper.classList.remove(\n          \"collapsed-icon-labels-start\"\n        );\n        secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n      }\n    });\n  };\n\n  private paddingIconWidth = (\n    navItems: HTMLIcNavigationItemElement[]\n  ): number => {\n    const navItemLink =\n      (navItems[0].shadowRoot &&\n        navItems[0].shadowRoot.querySelector(\"ic-tooltip a\")) ||\n      navItems[0].querySelector(\"a\");\n    const navItemSVG = navItems[0].querySelector(\"svg\");\n\n    const navStyles = {\n      gap: window.getComputedStyle(navItemLink).gap,\n      iconWidth: window.getComputedStyle(navItemSVG).width,\n      paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,\n    };\n\n    return Object.values(navStyles).reduce((prev, curr) => {\n      return (prev += parseInt(curr));\n    }, 0);\n  };\n\n  private displayTooltipWithExpandedLongLabel = (menuExpanded: boolean) => {\n    let timer;\n\n    if (menuExpanded) {\n      timer = setTimeout(() => {\n        const sideNavWidth = this.el.clientWidth;\n\n        const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n          this.el.querySelectorAll(\"ic-navigation-item\")\n        );\n\n        const paddingIconDelta = navigationItems.length\n          ? this.paddingIconWidth(navigationItems)\n          : 0;\n\n        navigationItems.forEach(\n          (navigationItem: HTMLIcNavigationItemElement) => {\n            const icTypographyScrollWidth =\n              (\n                navigationItem.shadowRoot &&\n                navigationItem.shadowRoot.querySelector(\n                  \"ic-tooltip .link ic-typography.ic-typography-label\"\n                )\n              )?.scrollWidth ||\n              navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n                ?.scrollWidth;\n\n            if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {\n              navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n            }\n          }\n        );\n      }, this.ANIMATION_DURATION);\n    } else {\n      clearTimeout(timer);\n\n      const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n        this.el.querySelectorAll(\"ic-navigation-item\")\n      );\n      navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n        navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n      });\n    }\n  };\n\n  private setMenuExpanded = (expanded: boolean): void => {\n    this.menuExpanded = expanded;\n  };\n\n  /**\n   * As the mobile top bar is fixed, a padding top is required\n   * to push main content down the height of the mobile top bar\n   * @param value - padding-top css value\n   */\n  private setParentPaddingTop = (value: string) => {\n    this.el.parentElement.style.paddingTop = value;\n  };\n\n  private setParentPaddingLeft = (value: string) => {\n    this.el.parentElement.style.paddingLeft = value;\n  };\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (currSize === DEVICE_SIZES.S) {\n        if (!this.disableAutoParentStyling) {\n          const topBarHeight =\n            this.el.shadowRoot.querySelector(\".top-bar\").scrollHeight;\n          this.setParentPaddingTop(`${topBarHeight}px`);\n          this.setParentPaddingLeft(\"0\");\n        }\n        this.emitSideNavigationExpanded({\n          sideNavExpanded: this.menuExpanded,\n          sideNavMobile: true,\n        });\n      } else {\n        if (!this.disableAutoParentStyling) {\n          this.setParentPaddingTop(\"0\");\n        }\n        this.emitSideNavigationExpanded({\n          sideNavExpanded: this.menuExpanded,\n          sideNavMobile: false,\n        });\n      }\n\n      if (currSize > DEVICE_SIZES.L) {\n        if (!this.disableAutoParentStyling) {\n          this.setParentPaddingTop(\"0\");\n          this.setParentPaddingLeft(\"0\");\n        }\n      } else if (\n        currSize > DEVICE_SIZES.S &&\n        currSize <= DEVICE_SIZES.L &&\n        !this.static &&\n        !this.disableAutoParentStyling\n      ) {\n        if (this.collapsedIconLabels) {\n          this.setParentPaddingLeft(\"calc(var(--ic-space-xxl) * 2)\");\n        } else {\n          this.setParentPaddingLeft(\n            \"calc(var(--ic-space-xxl) + var(--ic-space-xs))\"\n          );\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.deviceSizeAppTitle = currSize;\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(document.body, { box: \"content-box\" });\n  };\n\n  private setCollapsedIconLabels = () => {\n    const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n      this.el.querySelectorAll(\"ic-navigation-item\")\n    );\n    navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n      navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n    });\n  };\n\n  private styleSlottedCollapsedIconLabel = () => {\n    const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n      Array.from(\n        this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n      );\n\n    dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n      if (\n        icTypography?.parentElement?.parentElement?.classList.contains(\n          \"navigation-item-side-nav-collapsed-with-label\"\n        )\n      ) {\n        icTypography.style.whiteSpace = \"nowrap\";\n        icTypography.style.overflow = \"hidden\";\n        icTypography.style.textOverflow = \"ellipsis\";\n        icTypography.style.marginTop = \"10px\";\n      }\n    });\n  };\n\n  private renderTopBar = ({\n    isSDevice,\n    foregroundColor,\n    menuOpen,\n    href,\n    isAppNameSubtitleVariant,\n    appTitle,\n  }: IcTopBar) => (\n    <div\n      class={{\n        \"top-bar\": true,\n        [this.foregroundColor]: true,\n      }}\n    >\n      {isSDevice && (\n        <nav\n          aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n          aria-hidden=\"false\"\n        >\n          <ic-button\n            aria-label=\"Open navigation menu\"\n            class=\"menu-button\"\n            id=\"menu-button\"\n            variant=\"secondary\"\n            size=\"dense\"\n            full-width=\"true\"\n            buttonStyle={foregroundColor}\n            onClick={this.toggleMenu}\n            aria-owns=\"side-navigation\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"false\"\n          >\n            <span\n              class=\"mobile-top-bar-menu-icon\"\n              slot=\"icon\"\n              innerHTML={menuOpen ? closeIcon : menuIcon}\n            ></span>\n            {menuOpen ? \"Close\" : \"Menu\"}\n          </ic-button>\n          <span\n            id=\"menu-navigation-toggle-button-landmark\"\n            class=\"navigation-landmark-title\"\n            aria-hidden=\"true\"\n          >\n            Navigation menu toggle button\n          </span>\n        </nav>\n      )}\n      <div class=\"app-title-wrapper\">\n        <a href={href} class=\"title-link\">\n          <div class=\"app-icon-container\" aria-hidden=\"true\">\n            <slot name=\"app-icon\"></slot>\n          </div>\n          <ic-typography\n            variant={isAppNameSubtitleVariant ? \"subtitle-small\" : \"h3\"}\n          >\n            {appTitle}\n          </ic-typography>\n        </a>\n      </div>\n    </div>\n  );\n\n  componentWillLoad(): void {\n    if (this.expanded) {\n      this.setMenuExpanded(true);\n    } else {\n      this.setMenuExpanded(false);\n    }\n\n    if (this.collapsedIconLabels) {\n      this.setCollapsedIconLabels();\n    }\n\n    this.hasSecondaryNavigation = isSlotUsed(this.el, \"secondary-navigation\");\n  }\n\n  componentDidLoad(): void {\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuExpanded,\n      sideNavMobile: this.deviceSize === DEVICE_SIZES.S,\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n    this.arrangeSlottedNavigationItem();\n    this.styleSlottedCollapsedIconLabel();\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.appTitle, propName: \"app-title\" }],\n      \"Side Navigation\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const {\n      appTitle,\n      menuOpen,\n      foregroundColor,\n      menuExpanded,\n      href,\n      status,\n      version,\n      collapsedIconLabels,\n      inline,\n    } = this;\n\n    const isSDevice = this.deviceSize === DEVICE_SIZES.S;\n    const isMdDevice = this.deviceSize === DEVICE_SIZES.M;\n    const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;\n    const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;\n    const displayExpandBtn = isMdDevice || (isLgDevice && !this.static);\n\n    const topBarProps: IcTopBar = {\n      isSDevice,\n      foregroundColor,\n      menuOpen,\n      href,\n      isAppNameSubtitleVariant,\n      appTitle,\n    };\n\n    return (\n      <Host\n        class={{\n          \"xs-menu-open\": menuOpen && isSDevice,\n          \"xs-menu-close\": !menuOpen && isSDevice,\n          \"sm-collapsed\": !isSDevice && !menuExpanded,\n          \"sm-expanded\": !isSDevice && menuExpanded,\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"collapsed-labels\"]:\n            !isSDevice && !menuExpanded && collapsedIconLabels,\n          [\"static\"]: this.static,\n          [\"inline\"]: inline,\n        }}\n      >\n        {isSDevice && this.renderTopBar({ ...topBarProps })}\n        <div class=\"side-navigation\" id=\"side-navigation\">\n          {!isSDevice && this.renderTopBar({ ...topBarProps })}\n          <div class=\"side-navigation-inner\">\n            {isSlotUsed(this.el, \"primary-navigation\") && (\n              <nav\n                class=\"primary-navigation\"\n                aria-labelledby=\"primary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"primary-navigation-landmark\"\n                >\n                  Primary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"primary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n          </div>\n          <div\n            class={{\n              [\"bottom-wrapper\"]: true,\n              [\"classification-spacing\"]: hasClassificationBanner(),\n            }}\n          >\n            {isSlotUsed(this.el, \"secondary-navigation\") && (\n              <nav\n                class=\"secondary-navigation\"\n                aria-labelledby=\"secondary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"secondary-navigation-landmark\"\n                >\n                  Secondary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"secondary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n            <div class=\"bottom-side-nav\">\n              {this.hasSecondaryNavigation && <ic-divider></ic-divider>}\n              {displayExpandBtn && (\n                <button\n                  class=\"menu-expand-button\"\n                  innerHTML={chevronIcon}\n                  onClick={this.toggleMenuExpanded}\n                  aria-label={`${\n                    menuExpanded ? \"Collapse\" : \"Expand\"\n                  } side navigation`}\n                ></button>\n              )}\n              <div class=\"app-status-wrapper\">\n                {status !== \"\" && (\n                  <div\n                    class={{\n                      [\"app-status\"]: true,\n                    }}\n                  >\n                    <ic-typography\n                      aria-label=\"app tag\"\n                      variant=\"label-uppercase\"\n                      class=\"app-status-text\"\n                    >\n                      {status}\n                    </ic-typography>\n                  </div>\n                )}\n                {version !== \"\" && (\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"app-version\"\n                    aria-label=\"app version\"\n                  >\n                    {version}\n                  </ic-typography>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-4cf60a22.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as o,H as i,g as r}from"./p-f9370be6.js";import{g as n,e as a,f as s,c as l,j as c,I as d}from"./p-e5a09372.js";const p='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(.footer-sparse){--footer-links-padding:24px 0;--footer-compliance-padding:24px 0 8px 0;--footer-logo-margin-bottom:var(--ic-space-lg);--footer-link-inner-flex-direction:row}:host(.footer-dense){--footer-links-padding:0 0;--footer-compliance-padding:16px 0 8px;--footer-logo-margin-bottom:var(--ic-space-md);--footer-link-inner-flex-direction:column}:host(.footer-light){--footer-theme-secondary:var(--ic-theme-secondary);--footer-theme-tertiary:var(--ic-theme-tertiary);--footer-keyline:var(--ic-keyline-lighten)}:host(.footer-dark){--footer-theme-secondary:var(--ic-theme-secondary-light);--footer-theme-tertiary:var(--ic-theme-tertiary-light);--footer-keyline:var(--ic-keyline-darken)}:host(.footer-dense.footer-ungrouped){--footer-links-padding:var(--ic-space-md) 0 0 0}footer{display:flex;flex-direction:column;width:100%}.footer-description{background-color:var(--footer-theme-secondary);color:var(--ic-theme-text);border-bottom:var(--footer-keyline)}.footer-description-inner{padding:16px 0}.footer-links{padding:var(--footer-links-padding);background-color:var(--footer-theme-secondary);color:var(--ic-theme-text)}.footer-links-inner{display:flex;flex-direction:var(--footer-link-inner-flex-direction)}.footer-compliance{background-color:var(--footer-theme-tertiary);color:var(--ic-theme-text)}.footer-compliance-inner{padding:var(--footer-compliance-padding)}.footer-logo{margin-bottom:var(--footer-logo-margin-bottom);display:flex;gap:var(--ic-space-xxl)}.footer-logo>::slotted(){margin-right:var(--ic-space-md)}.footer-caption{margin-bottom:var(--ic-space-md)}.classification-spacing{margin-bottom:var(--ic-space-lg)}';const f=class{constructor(o){e(this,o);this.icFooterResized=t(this,"icFooterResized",7);this.resizeObserverCallback=e=>{if(e!==this.deviceSize){this.deviceSize=e}this.icFooterResized.emit()};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const e=n();this.resizeObserverCallback(e)}));this.resizeObserver.observe(this.footerEl)};this.description=undefined;this.aligned="left";this.breakpoint="M";this.groupLinks=false;this.caption=undefined;this.copyright=true;this.deviceSize=a.XL;this.foregroundColor=s()}isDense(){const e=this.breakpoint.toUpperCase();return e==="XS"?this.deviceSize<a.XS:e==="S"?this.deviceSize<a.S:e==="M"?this.deviceSize<a.M:e==="L"?this.deviceSize<a.L:e==="XL"?this.deviceSize<a.XL:false}themeChangeHandler(e){const t=e.detail;this.foregroundColor=t.mode}componentWillLoad(){this.deviceSize=n()}componentDidLoad(){l(this.runResizeObserver)}disconnectedCallback(){this.resizeObserver.disconnect()}render(){const{aligned:e,caption:t,copyright:r,description:n,groupLinks:s,foregroundColor:l}=this;const p=this.isDense();return o(i,{class:{footer:true,[`footer-${p?"dense":"sparse"}`]:true,[`footer-${s?"grouped":"ungrouped"}`]:true,[`footer-${l}`]:true,[d.Dark]:l===d.Dark,[d.Light]:l===d.Light}},o("footer",{ref:e=>this.footerEl=e},o("div",{class:"footer-description"},o("ic-section-container",{aligned:e,fullHeight:true},o("div",{class:"footer-description-inner"},o("ic-typography",{variant:"body"},o("slot",{name:"description"},n))))),o("div",{class:"footer-links"},s&&p?o("div",{class:"footer-links-inner"},o("slot",{name:"link"})):o("ic-section-container",{fullHeight:true,aligned:e},o("div",{class:"footer-links-inner"},o("slot",{name:"link"})))),o("div",{class:"footer-compliance"},o("ic-section-container",{aligned:e,fullHeight:true},o("div",{class:"footer-compliance-inner"},o("div",{class:"footer-logo"},o("slot",{name:"logo"})),o("div",{class:"footer-caption"},o("ic-typography",{variant:this.deviceSize<=a.M?"caption":"body"},o("slot",{name:"caption"},t))),r&&o("div",{class:{["footer-copyright"]:true,["classification-spacing"]:c()}},o("ic-typography",{variant:this.deviceSize<=a.M?"caption-uppercase":"label-uppercase"},"© Crown Copyright")))))))}get el(){return r(this)}};f.style=p;export{f as ic_footer};
+//# sourceMappingURL=p-4cf60a22.entry.js.map

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

@@ -0,0 +1 @@
+{"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","icFooterResized","emit","runResizeObserver","resizeObserver","ResizeObserver","getCurrentDeviceSize","observe","footerEl","IC_DEVICE_SIZES","XL","getThemeForegroundColor","[object Object]","bp","breakpoint","toUpperCase","XS","S","M","L","ev","theme","detail","foregroundColor","mode","checkResizeObserver","disconnect","aligned","caption","copyright","description","groupLinks","dense","isDense","h","Host","class","footer","IcThemeForegroundEnum","Dark","Light","ref","fullHeight","variant","name","hasClassificationBanner"],"mappings":"uIAAA,MAAMA,EAAc,+9HCsCPC,EAAM,gFAmETC,KAAAC,uBAA0BC,IAChC,GAAIA,IAAaF,KAAKG,WAAY,CAChCH,KAAKG,WAAaD,EAEpBF,KAAKI,gBAAgBC,QAGfL,KAAAM,kBAAoB,KAC1BN,KAAKO,eAAiB,IAAIC,gBAAe,KACvC,MAAMN,EAAWO,IACjBT,KAAKC,uBAAuBC,MAG9BF,KAAKO,eAAeG,QAAQV,KAAKW,mDAhEH,uBAKW,oBAKZ,4CAUF,qBAECC,EAAgBC,wBAEAC,IAEtCC,UACN,MAAMC,EAAKhB,KAAKiB,WAAWC,cAE3B,OAAOF,IAAO,KACVhB,KAAKG,WAAaS,EAAgBO,GAClCH,IAAO,IACPhB,KAAKG,WAAaS,EAAgBQ,EAClCJ,IAAO,IACPhB,KAAKG,WAAaS,EAAgBS,EAClCL,IAAO,IACPhB,KAAKG,WAAaS,EAAgBU,EAClCN,IAAO,KACPhB,KAAKG,WAAaS,EAAgBC,GAClC,MAINE,mBAAmBQ,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BzB,KAAK0B,gBAAkBF,EAAMG,KAsB/BZ,oBACEf,KAAKG,WAAaM,IAGpBM,mBACEa,EAAoB5B,KAAKM,mBAG3BS,uBACEf,KAAKO,eAAesB,aAGtBd,SACE,MAAMe,QACJA,EAAOC,QACPA,EAAOC,UACPA,EAASC,YACTA,EAAWC,WACXA,EAAUR,gBACVA,GACE1B,KACJ,MAAMmC,EAAQnC,KAAKoC,UAEnB,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,OAAQ,KACRzB,CAAC,UAAUoB,EAAQ,QAAU,YAAa,KAC1CpB,CAAC,UAAUmB,EAAa,UAAY,eAAgB,KACpDnB,CAAC,UAAUW,KAAoB,KAE/BX,CAAC0B,EAAsBC,MACrBhB,IAAoBe,EAAsBC,KAC5C3B,CAAC0B,EAAsBE,OACrBjB,IAAoBe,EAAsBE,QAG9CN,EAAA,SAAA,CAAQO,IAAMjC,GAAcX,KAAKW,SAAWA,GAE1C0B,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,2BACTF,EAAA,MAAA,CAAKE,MAAM,eAETF,EAAA,OAAA,CAAMU,KAAK,UAEbV,EAAA,MAAA,CAAKE,MAAM,kBACTF,EAAA,gBAAA,CACES,QACE9C,KAAKG,YAAcS,EAAgBS,EAAI,UAAY,QAGrDgB,EAAA,OAAA,CAAMU,KAAK,WAAWhB,KAGzBC,GACCK,EAAA,MAAA,CACEE,MAAO,CACLxB,CAAC,oBAAqB,KACtBA,CAAC,0BAA2BiC,MAG9BX,EAAA,gBAAA,CACES,QACE9C,KAAKG,YAAcS,EAAgBS,EAC/B,oBACA,mBAAiB","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\n:host(.footer-sparse) {\n  --footer-links-padding: 24px 0;\n  --footer-compliance-padding: 24px 0 8px 0;\n  --footer-logo-margin-bottom: var(--ic-space-lg);\n  --footer-link-inner-flex-direction: row;\n}\n\n:host(.footer-dense) {\n  --footer-links-padding: 0 0;\n  --footer-compliance-padding: 16px 0 8px;\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-dense.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: 16px 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","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} 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   * Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() icFooterResized: EventEmitter<void>;\n\n  /**\n   * The description displayed at the top of the footer\n   */\n  @Prop() description: string;\n\n  /**\n   * Sets the aligned parameter for the section containers used within the footer\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * Sets the screen size breakpoint at which to switch to the dense layout\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"M\";\n\n  /**\n   * Sets the footer 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   * Whether the footer displays 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 isDense() {\n    const bp = this.breakpoint.toUpperCase();\n\n    return bp === \"XS\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"S\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"M\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"L\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"XL\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  @Listen(\"icThemeChange\", { 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.icFooterResized.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 dense = this.isDense();\n\n    return (\n      <Host\n        class={{\n          footer: true,\n          [`footer-${dense ? \"dense\" : \"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 && dense ? (\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                <div class=\"footer-logo\">\n                  {/* Logo */}\n                  <slot name=\"logo\" />\n                </div>\n                <div class=\"footer-caption\">\n                  <ic-typography\n                    variant={\n                      this.deviceSize <= IC_DEVICE_SIZES.M ? \"caption\" : \"body\"\n                    }\n                  >\n                    <slot name=\"caption\">{caption}</slot>\n                  </ic-typography>\n                </div>\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-4fba6cae.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as a,g as s}from"./p-f9370be6.js";import{w as n,t as o,k as r,a as l,d as c,r as d,C as h,l as u}from"./p-e5a09372.js";const p='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}::-moz-placeholder{color:var(--ic-color-tertiary-text);opacity:1}::placeholder{color:var(--ic-color-tertiary-text);opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs)}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:6px}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(--ic-architectural-200)}input.readonly,textarea.readonly{color:var(--ic-color-primary-text)}.fullwidth{position:relative;width:100%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type="number"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.maxlengthtext{color:var(--ic-color-secondary-text)}.exceeded{color:var(--ic-status-error)}.disabled{color:var(--ic-architectural-200)}.no-left-pad{padding-left:0}::slotted([slot="icon"]){fill:var(--ic-color-tertiary-text)}.has-value ::slotted([slot="icon"]){fill:var(--ic-color-primary-text)}.charcount{margin-right:calc(-1 * var(--ic-space-xxxs))}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}input[type="search"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}';let b=0;const f=class{constructor(i){t(this,i);this.icKeydown=e(this,"icKeydown",7);this.icInput=e(this,"icInput",7);this.icBlur=e(this,"icBlur",7);this.icFocus=e(this,"icFocus",7);this.icChange=e(this,"icChange",7);this.inheritedAttributes={};this.showLeftIcon=this.hasLeftIconSlot();this.onInput=t=>{this.value=t.target.value;this.icInput.emit({value:this.value})};this.onBlur=t=>{const e=t.target.value;this.icBlur.emit({value:e})};this.onFocus=t=>{const e=t.target.value;this.icFocus.emit({value:e})};this.isTextArea=()=>this.rows>1;this.hasStatus=t=>t!==""&&!this.disabled;this.showStatusText=t=>{if(this.hasStatus(t)&&!(t==n.Success&&this.validationInline)){return true}return false};this.inputId=`ic-text-field-input-${b++}`;this.label=undefined;this.required=false;this.disabled=false;this.readonly=false;this.placeholder="";this.fullWidth=false;this.hideLabel=false;this.helperText="";this.rows=1;this.resize=false;this.dense=false;this.value="";this.maxLength=0;this.validationStatus="";this.validationText="";this.validationInline=false;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autoFocus=false;this.debounce=0;this.dark=false;this.type="text";this.inputmode="text";this.name=this.inputId;this.spellcheck=false;this.ariaActiveDescendant=undefined;this.truncateValue=undefined;this.ariaExpanded=undefined;this.ariaOwns=undefined;this.ariaAutocomplete=undefined;this.role=undefined;this.hiddenInput=true;this.numChars=0;this.maxLengthExceeded=false}debounceChanged(){this.icChange=o(this.icChange,this.debounce)}watchValueHandler(t){if(this.inputEl&&this.inputEl.value!==t){this.inputEl.value=t}if(this.maxLength>0){this.numChars=t.length;if(t.length>this.maxLength){this.maxLengthExceeded=true}else{this.maxLengthExceeded=false}}this.icChange.emit({value:t})}async setFocus(){if(this.inputEl){this.inputEl.focus()}}handleKeyDown(t){this.icKeydown.emit({event:t});t.cancelBubble=true}hasLeftIconSlot(){const t=this.el.querySelector(`[slot="icon"]`);if(t!=null){return true}return false}connectedCallback(){this.debounceChanged()}componentWillLoad(){this.watchValueHandler(this.value);this.inheritedAttributes=r(this.el,[...u,"title","aria-autocomplete","aria-haspopup"]);if(this.readonly){this.maxLengthExceeded=false}}componentDidLoad(){l([{prop:this.label,propName:"label"}],"Text Field")}render(){const{dark:t,inputId:e,name:s,label:o,required:r,dense:l,placeholder:u,helperText:p,rows:b,resize:f,disabled:m,value:y,maxLength:g,numChars:v,readonly:x,maxLengthExceeded:w,validationStatus:k,validationText:z,validationInline:I,spellcheck:F,inputmode:L,fullWidth:j,truncateValue:q,hiddenInput:C}=this;const T=x?true:m;const B=m?"":u;const W=w?n.Error:k;const H=w?"Maximum length exceeded":z;const M=x?0:g;const S=w||g===0&&W===n.Error?"assertive":"polite";const V=this.showStatusText(W);const D=this.isTextArea();const K=g>0?e+"-charcount-desc":"";const O=(K+" "+c(e,p!=="",V)).trim();if(this.showLeftIcon){if(!x&&T){this.showLeftIcon=false}}const $=W===n.Error?"true":"false";const _=T&&!x;if(C){d(true,this.el,s,y,T)}return i(a,{class:{["fullwidth"]:j}},i("ic-input-container",{readonly:x,disabled:T},!this.hideLabel&&i("ic-input-label",{for:e,label:o,helperText:p,required:r,disabled:_,readonly:x,dark:t}),i("ic-input-component-container",{dark:t,dense:l,validationStatus:W,multiLine:D,disabled:T,readonly:x,validationInline:I,fullWidth:j},this.showLeftIcon&&i("span",{class:{["readonly"]:x,["has-value"]:y.length>0},slot:"left-icon"},i("slot",{name:"icon"})),!D&&i("input",Object.assign({id:e,name:s,ref:t=>this.inputEl=t,type:this.type,value:y,class:{["no-left-pad"]:!this.showLeftIcon&&x,["readonly"]:x,["truncate-value"]:q},placeholder:B,required:r,disabled:T,readonly:x,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":o,"aria-describedby":O,"aria-invalid":$,"aria-activedescendant":this.ariaActiveDescendant,"aria-expanded":this.ariaExpanded,"aria-owns":this.ariaOwns,autocomplete:this.autocomplete,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:F,inputmode:L,role:this.role},this.inheritedAttributes)),D&&i("textarea",Object.assign({id:e,class:{["no-resize"]:f===false||x,["no-left-pad"]:!this.showLeftIcon&&x,["readonly"]:x},name:s,ref:t=>this.inputEl=t,value:y,rows:b,required:r,disabled:T,placeholder:B,readonly:x,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":o,"aria-describedby":O,"aria-invalid":$,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:F,inputmode:L},this.inheritedAttributes)),i("slot",{name:"clear-button"}),i("slot",{name:"search-submit-button"})),i("slot",{name:"menu"}),(!h(k)||!h(z)||M>0)&&i("ic-input-validation",{status:this.hasStatus(W)===false||W===n.Success&&I?"":W,message:V?H:"",ariaLiveMode:S,for:e,fullWidth:j},!x&&M>0&&i("div",{slot:"validation-message-adornment"},i("ic-typography",{variant:"caption",class:{["maxlengthtext"]:true,["exceeded"]:w,["disabled"]:_}},i("span",{"aria-live":"polite",id:`${e}-charcount`,class:"charcount"},v,"/",M),i("span",{hidden:true,id:K},"Field can contain a maximum of ",M," characters."))))))}get el(){return s(this)}static get watchers(){return{debounce:["debounceChanged"],value:["watchValueHandler"]}}};f.style=p;export{f as ic_text_field};
+//# sourceMappingURL=p-4fba6cae.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-text-field/ic-text-field.css?tag=ic-text-field&encapsulation=shadow","src/components/ic-text-field/ic-text-field.tsx"],"names":["icTextFieldCss","inputIds","TextField","this","inheritedAttributes","showLeftIcon","hasLeftIconSlot","onInput","ev","value","target","icInput","emit","onBlur","icBlur","onFocus","icFocus","isTextArea","rows","hasStatus","status","disabled","showStatusText","IcInformationStatus","Success","validationInline","inputId","undefined","[object Object]","icChange","debounceEvent","debounce","newValue","inputEl","maxLength","numChars","length","maxLengthExceeded","focus","icKeydown","event","cancelBubble","iconEl","el","querySelector","debounceChanged","watchValueHandler","inheritAttributes","IC_INHERITED_ARIA","readonly","onComponentRequiredPropUndefined","prop","label","propName","dark","name","required","dense","placeholder","helperText","resize","validationStatus","validationText","spellcheck","inputmode","fullWidth","truncateValue","hiddenInput","disabledMode","placeholderText","currentStatus","Error","currentValidationText","maxNumChars","messageAriaLive","multiline","hiddenCharCountDescId","describedBy","getInputDescribedByText","trim","invalid","disabledText","renderHiddenInput","h","Host","class","hideLabel","for","multiLine","slot","Object","assign","id","ref","type","aria-label","aria-describedby","aria-invalid","aria-activedescendant","ariaActiveDescendant","aria-expanded","ariaExpanded","aria-owns","ariaOwns","autocomplete","autocapitalize","autoFocus","role","isEmptyString","message","ariaLiveMode","variant","aria-live","hidden"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  /**\n   * @prop --input-width: Width of the input field \n   */\n  display: block;\n}\n\n::placeholder {\n  color: var(--ic-color-tertiary-text);\n  opacity: 1;\n}\n\ninput,\ntextarea {\n  border: 0;\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-architectural-white);\n  line-height: 1.5rem;\n  letter-spacing: 0.005rem;\n  width: 100%;\n  padding-right: var(--ic-space-xs);\n  padding-left: var(--ic-space-xs);\n}\n\ntextarea {\n  min-height: var(--ic-space-lg);\n  resize: vertical;\n  padding-top: 6px;\n}\n\ninput:focus,\ntextarea:focus {\n  border: 0;\n  outline: 0;\n}\n\ninput:disabled,\ntextarea:disabled {\n  color: var(--ic-architectural-200);\n}\n\ninput.readonly,\ntextarea.readonly {\n  color: var(--ic-color-primary-text);\n}\n\n.fullwidth {\n  position: relative;\n  width: 100%;\n}\n\n/* Chrome, Safari, Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\ninput[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\ntextarea.no-resize {\n  resize: none;\n}\n\n.maxlengthtext {\n  color: var(--ic-color-secondary-text);\n}\n\n.exceeded {\n  color: var(--ic-status-error);\n}\n\n.disabled {\n  color: var(--ic-architectural-200);\n}\n\n.no-left-pad {\n  padding-left: 0;\n}\n\n::slotted([slot=\"icon\"]) {\n  fill: var(--ic-color-tertiary-text);\n}\n\n.has-value ::slotted([slot=\"icon\"]) {\n  fill: var(--ic-color-primary-text);\n}\n\n.charcount {\n  margin-right: calc(-1 * var(--ic-space-xxxs));\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n  display: none;\n}\n\ninput[type=\"search\"].truncate-value {\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  Method,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  IcAutocompleteTypes,\n  IcAutocorrectStates,\n  IcInformationStatusOrEmpty,\n  IcValueEventDetail,\n} from \"../../interface\";\nimport { IcInformationStatus } from \"../../utils/types\";\nimport {\n  inheritAttributes,\n  debounceEvent,\n  getInputDescribedByText,\n  renderHiddenInput,\n  isEmptyString,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcAriaAutocompleteTypes,\n  IcTextFieldInputModes,\n  IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n  tag: \"ic-text-field\",\n  styleUrl: \"ic-text-field.css\",\n  shadow: true,\n})\nexport class TextField {\n  @Element() el: HTMLIcTextFieldElement;\n\n  private inputEl: HTMLInputElement | HTMLTextAreaElement;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  /**\n   * @slot clear-button - an ic-button clear component will render as an end adornment to the input\n   * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input\n   * @slot menu - an ic-menu component will appear below the input\n   */\n\n  /**\n   * Provide an id for the input\n   */\n  @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Specify if the input requires a value.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * Specify whether the input is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Specify whether the input is read only.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Provide a placeholder value to display.\n   */\n  @Prop() placeholder: string = \"\";\n\n  /**\n   * Specify whether the component fills the full width of the container.\n   * If true, this overrides the --input-width css prop.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * Specify the number of rows to transform the text field into a text area with a specific height.\n   */\n  @Prop() rows: number = 1;\n\n  /**\n   * Allow resizing of a multiline text area\n   */\n  @Prop() resize: boolean = false;\n\n  /**\n   * Specify whether dense styling is to be applied to the element.\n   */\n  @Prop() dense: boolean = false;\n\n  /**\n   * Value of TextField.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n  /**\n   * Maximum number of characters that can be entered in the field.\n   */\n  @Prop() maxLength: number = 0;\n\n  /**\n   * Provide validation state - 'error' | 'warning' | 'success'\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * Provide validation state - 'error' | 'warning' | 'success'\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Show icon in input control - only applies when validationStatus ='success'\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n   */\n  @Prop() autocapitalize = \"off\";\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n  /**\n   * Whether auto correction should be enabled when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autoFocus = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n   */\n  @Prop() debounce: number = 0;\n\n  /**\n   * Determines whether the dark variant of the text field should be displayed.\n   */\n  @Prop() dark?: boolean = false;\n\n  private showLeftIcon: boolean = this.hasLeftIconSlot();\n\n  @Watch(\"debounce\")\n  private debounceChanged() {\n    this.icChange = debounceEvent(this.icChange, this.debounce);\n  }\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop() type: IcTextFieldTypes = \"text\";\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n   * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n   */\n  @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n  /**\n   * @internal Used to identify the active element when focus is on the ic-menu items\n   */\n  @Prop() ariaActiveDescendant?: string;\n  /**\n   * @internal This boolean sets an ellipsis at the end of the value if the value is longer than the container\n   */\n  @Prop() truncateValue?: boolean;\n\n  /**\n   * @internal Used to identify if the slotted menu is rendered\n   */\n  @Prop() ariaExpanded: string;\n\n  /**\n   * @internal Used to identify any related child component\n   */\n  @Prop() ariaOwns: string;\n\n  /**\n   * @internal Used to identify whether inputting any text triggers more predictions\n   */\n  @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n  /**\n   * @internal Used to set the role if not default textbox;\n   */\n  @Prop() role: string;\n\n  /**\n   * @internal Used to stop rendering of hidden form input for form submission;\n   */\n  @Prop() hiddenInput: boolean = true;\n\n  @State() numChars: number = 0;\n  @State() maxLengthExceeded: boolean = false;\n\n  @Watch(\"value\")\n  watchValueHandler(newValue: string): void {\n    if (this.inputEl && this.inputEl.value !== newValue) {\n      this.inputEl.value = newValue;\n    }\n\n    if (this.maxLength > 0) {\n      this.numChars = newValue.length;\n      if (newValue.length > this.maxLength) {\n        this.maxLengthExceeded = true;\n      } else {\n        this.maxLengthExceeded = false;\n      }\n    }\n    this.icChange.emit({ value: newValue });\n  }\n\n  /**\n   * Sets focus on the native `input`\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.inputEl) {\n      this.inputEl.focus();\n    }\n  }\n\n  //stop keydown event bubbling up to storybook\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    this.icKeydown.emit({ event: ev });\n    ev.cancelBubble = true;\n  }\n\n  /**\n   * Emitted when a keydown event occurred.\n   */\n  @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() icInput: EventEmitter<IcValueEventDetail>;\n  private onInput = (ev: Event) => {\n    this.value = (ev.target as HTMLInputElement).value;\n    this.icInput.emit({ value: this.value });\n  };\n\n  /**\n   * Emitted when input loses focus.\n   */\n  @Event() icBlur: EventEmitter<IcValueEventDetail>;\n  private onBlur = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icBlur.emit({ value: value });\n  };\n\n  /**\n   * Emitted when input gains focus.\n   */\n  @Event() icFocus: EventEmitter<IcValueEventDetail>;\n  private onFocus = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icFocus.emit({ value: value });\n  };\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n  private isTextArea = (): boolean => {\n    return this.rows > 1;\n  };\n\n  private hasLeftIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    if (iconEl != null) {\n      return true;\n    }\n    return false;\n  }\n\n  private hasStatus = (status: IcInformationStatusOrEmpty): boolean => {\n    return status !== \"\" && !this.disabled;\n  };\n\n  private showStatusText = (status: IcInformationStatusOrEmpty): boolean => {\n    if (\n      this.hasStatus(status) &&\n      !(status == IcInformationStatus.Success && this.validationInline)\n    ) {\n      return true;\n    }\n    return false;\n  };\n\n  connectedCallback(): void {\n    this.debounceChanged();\n  }\n\n  componentWillLoad(): void {\n    this.watchValueHandler(this.value);\n\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"title\",\n      \"aria-autocomplete\",\n      \"aria-haspopup\",\n    ]);\n\n    if (this.readonly) {\n      this.maxLengthExceeded = false;\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Text Field\"\n    );\n  }\n\n  render() {\n    const {\n      dark,\n      inputId,\n      name,\n      label,\n      required,\n      dense,\n      placeholder,\n      helperText,\n      rows,\n      resize,\n      disabled,\n      value,\n      maxLength,\n      numChars,\n      readonly,\n      maxLengthExceeded,\n      validationStatus,\n      validationText,\n      validationInline,\n      spellcheck,\n      inputmode,\n      fullWidth,\n      truncateValue,\n      hiddenInput,\n    } = this;\n\n    const disabledMode = readonly ? true : disabled;\n\n    const placeholderText = disabled ? \"\" : placeholder;\n\n    const currentStatus = maxLengthExceeded\n      ? IcInformationStatus.Error\n      : validationStatus;\n\n    const currentValidationText = maxLengthExceeded\n      ? \"Maximum length exceeded\"\n      : validationText;\n\n    const maxNumChars = readonly ? 0 : maxLength;\n\n    const messageAriaLive =\n      maxLengthExceeded ||\n      (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n        ? \"assertive\"\n        : \"polite\";\n\n    const showStatusText = this.showStatusText(currentStatus);\n    const multiline = this.isTextArea();\n    const hiddenCharCountDescId =\n      maxLength > 0 ? inputId + \"-charcount-desc\" : \"\";\n    const describedBy = (\n      hiddenCharCountDescId +\n      \" \" +\n      getInputDescribedByText(inputId, helperText !== \"\", showStatusText)\n    ).trim();\n\n    if (this.showLeftIcon) {\n      if (!readonly && disabledMode) {\n        this.showLeftIcon = false;\n      }\n    }\n\n    const invalid =\n      currentStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n    const disabledText = disabledMode && !readonly;\n\n    if (hiddenInput) {\n      renderHiddenInput(true, this.el, name, value, disabledMode);\n    }\n\n    return (\n      <Host class={{ [\"fullwidth\"]: fullWidth }}>\n        <ic-input-container readonly={readonly} disabled={disabledMode}>\n          {!this.hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabledText}\n              readonly={readonly}\n              dark={dark}\n            ></ic-input-label>\n          )}\n\n          <ic-input-component-container\n            dark={dark}\n            dense={dense}\n            validationStatus={currentStatus}\n            multiLine={multiline}\n            disabled={disabledMode}\n            readonly={readonly}\n            validationInline={validationInline}\n            fullWidth={fullWidth}\n          >\n            {this.showLeftIcon && (\n              <span\n                class={{\n                  [\"readonly\"]: readonly,\n                  [\"has-value\"]: value.length > 0,\n                }}\n                slot=\"left-icon\"\n              >\n                <slot name=\"icon\" />\n              </span>\n            )}\n\n            {!multiline && (\n              <input\n                id={inputId}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLInputElement)}\n                type={this.type}\n                value={value}\n                class={{\n                  [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n                  [\"readonly\"]: readonly,\n                  [\"truncate-value\"]: truncateValue,\n                }}\n                placeholder={placeholderText}\n                required={required}\n                disabled={disabledMode}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                aria-activedescendant={this.ariaActiveDescendant}\n                aria-expanded={this.ariaExpanded}\n                aria-owns={this.ariaOwns}\n                autocomplete={this.autocomplete}\n                autocapitalize={this.autocapitalize}\n                autoFocus={this.autoFocus}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                role={this.role}\n                {...this.inheritedAttributes}\n              ></input>\n            )}\n            {multiline && (\n              <textarea\n                id={inputId}\n                class={{\n                  [\"no-resize\"]: resize === false || readonly,\n                  [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n                  [\"readonly\"]: readonly,\n                }}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n                value={value}\n                rows={rows}\n                required={required}\n                disabled={disabledMode}\n                placeholder={placeholderText}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                autocapitalize={this.autocapitalize}\n                autoFocus={this.autoFocus}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                {...this.inheritedAttributes}\n              ></textarea>\n            )}\n            <slot name=\"clear-button\"></slot>\n            <slot name=\"search-submit-button\"></slot>\n          </ic-input-component-container>\n          <slot name=\"menu\"></slot>\n          {(!isEmptyString(validationStatus) ||\n            !isEmptyString(validationText) ||\n            maxNumChars > 0) && (\n            <ic-input-validation\n              status={\n                this.hasStatus(currentStatus) === false ||\n                (currentStatus === IcInformationStatus.Success &&\n                  validationInline)\n                  ? \"\"\n                  : currentStatus\n              }\n              message={showStatusText ? currentValidationText : \"\"}\n              ariaLiveMode={messageAriaLive}\n              for={inputId}\n              fullWidth={fullWidth}\n            >\n              {!readonly && maxNumChars > 0 && (\n                <div slot=\"validation-message-adornment\">\n                  <ic-typography\n                    variant=\"caption\"\n                    class={{\n                      [\"maxlengthtext\"]: true,\n                      [\"exceeded\"]: maxLengthExceeded,\n                      [\"disabled\"]: disabledText,\n                    }}\n                  >\n                    <span\n                      aria-live=\"polite\"\n                      id={`${inputId}-charcount`}\n                      class=\"charcount\"\n                    >\n                      {numChars}/{maxNumChars}\n                    </span>\n                    <span hidden={true} id={hiddenCharCountDescId}>\n                      Field can contain a maximum of {maxNumChars} characters.\n                    </span>\n                  </ic-typography>\n                </div>\n              )}\n            </ic-input-validation>\n          )}\n        </ic-input-container>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-5316e421.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as i,g as o}from"./p-f9370be6.js";const n='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}.rows{display:flex;flex-direction:column;gap:var(--ic-space-md)}:host(.dense) .rows{gap:var(--ic-space-xs)}.divider{margin-top:var(--ic-space-lg);margin-bottom:var(--ic-space-md);height:1px;background-color:var(--ic-architectural-300)}:host(.dense) .divider{margin-top:var(--ic-space-sm);margin-bottom:var(--ic-space-xs)}';const a=class{constructor(t){e(this,t);this.heading=undefined;this.dense=false}render(){const{heading:e,dense:o}=this;const n=this.el.children;if(o){for(let e=0;e<n.length;e++){n[e].setAttribute("dense","true")}}return t(i,{class:{["dense"]:o}},t("div",{class:"heading",id:"data-entity-heading"},t("slot",{name:"heading"},t("ic-typography",{variant:"h3"},e))),t("div",{class:"divider"}),t("ul",{"aria-labelledby":"data-entity-heading",class:"rows"},t("slot",null)))}get el(){return o(this)}};a.style=n;export{a as ic_data_entity};
+//# sourceMappingURL=p-5316e421.entry.js.map

package/dist/core/p-5316e421.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-data-entity/ic-data-entity.css?tag=ic-data-entity&encapsulation=shadow","src/components/ic-data-entity/ic-data-entity.tsx"],"names":["icDataEntityCss","DataEntity","[object Object]","heading","dense","this","children","el","i","length","setAttribute","h","Host","class","id","name","variant","aria-labelledby"],"mappings":"yDAAA,MAAMA,EAAkB,+rFCOXC,EAAU,iEAWI,MAEzBC,SACE,MAAMC,QAAEA,EAAOC,MAAEA,GAAUC,KAE3B,MAAMC,EAAWD,KAAKE,GAAGD,SAEzB,GAAIF,EAAO,CACT,IAAK,IAAII,EAAI,EAAGA,EAAIF,EAASG,OAAQD,IAAK,CACxCF,EAASE,GAAGE,aAAa,QAAS,SAItC,OACEC,EAACC,EAAI,CAACC,MAAO,CAAEX,CAAC,SAAUE,IACxBO,EAAA,MAAA,CAAKE,MAAM,UAAUC,GAAG,uBACtBH,EAAA,OAAA,CAAMI,KAAK,WACTJ,EAAA,gBAAA,CAAeK,QAAQ,MAAMb,KAGjCQ,EAAA,MAAA,CAAKE,MAAM,YACXF,EAAA,KAAA,CAAAM,kBAAoB,sBAAsBJ,MAAM,QAC9CF,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ic-space-md);\n}\n\n:host(.dense) .rows {\n  gap: var(--ic-space-xs);\n}\n\n.divider {\n  margin-top: var(--ic-space-lg);\n  margin-bottom: var(--ic-space-md);\n  height: 1px;\n  background-color: var(--ic-architectural-300);\n}\n\n:host(.dense) .divider {\n  margin-top: var(--ic-space-sm);\n  margin-bottom: var(--ic-space-xs);\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-data-entity\",\n  styleUrl: \"ic-data-entity.css\",\n  shadow: true,\n})\nexport class DataEntity {\n  @Element() el: HTMLIcDataEntityElement;\n\n  /**\n   * Title for the data entity\n   */\n  @Prop() heading: string;\n\n  /**\n   * Set the data heading and all child data rows to dense styling\n   */\n  @Prop() dense: boolean = false;\n\n  render() {\n    const { heading, dense } = this;\n\n    const children = this.el.children;\n\n    if (dense) {\n      for (let i = 0; i < children.length; i++) {\n        children[i].setAttribute(\"dense\", \"true\");\n      }\n    }\n\n    return (\n      <Host class={{ [\"dense\"]: dense }}>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\">{heading}</ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\" />\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-5d3dd182.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as i,H as s,g as h}from"./p-f9370be6.js";import{c as e}from"./p-e5a09372.js";const l=":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.aligned-full-width) .step-item-list{flex:auto}";const n=class{constructor(i){t(this,i);this.resizeObserver=null;this.getChildren=()=>{this.steps=Array.from(this.el.querySelectorAll("ic-step"))};this.initialiseStepStates=()=>{this.steps.forEach(((t,i)=>{t.stepNum=i+1;t.lastStep=i===this.steps.length-1;if(t.lastStep){t.classList.add("last-step");if(this.el.classList.contains("aligned-full-width")){t.style.maxWidth=`${this.lastStepWidth}px`}if(this.el.classList.contains("aligned-left")){t.style.maxWidth=`${this.connectorWidth+48}px`}}}));for(let t=0;t<this.steps.length-1;t++){if(this.el.classList.contains("aligned-full-width")){this.steps[t].style.width=`${(this.stepperWidth-this.lastStepWidth)/(this.steps.length-1)}px`;this.steps[t].style.minWidth="148px"}if(this.el.classList.contains("aligned-left")){this.steps[t].style.width=`${this.connectorWidth+48}px`;const i=this.steps[t].shadowRoot.querySelector("div > .step-top > .step-connect");i.style.width=this.connectorWidth>100?`${this.connectorWidth}px`:"100px"}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.setStepperWidth();this.getChildren();this.initialiseStepStates()}));this.resizeObserver.observe(this.el)};this.setStepperWidth=()=>{this.stepperWidth=this.el.offsetWidth;const t=document.querySelectorAll("ic-step");const i=t[t.length-1];i.style.maxWidth="none";if(i.classList.contains("aligned-full-width")){i.style.maxWidth=`${this.stepperWidth/t.length}px`}this.lastStepWidth=i.offsetWidth;this.getChildren();this.initialiseStepStates()};this.aligned="full-width";this.connectorWidth=100;this.stepperWidth=document.querySelector("ic-stepper").getBoundingClientRect().width;this.lastStepWidth=0}componentDidLoad(){e(this.runResizeObserver)}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){return i(s,{class:{["aligned-left"]:this.aligned==="left",["aligned-full-width"]:this.aligned==="full-width"}},i("ul",{class:"step-item-list"},i("slot",null)))}get el(){return h(this)}};n.style=l;export{n as ic_stepper};
+//# sourceMappingURL=p-5d3dd182.entry.js.map

package/dist/core/p-5d3dd182.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-stepper/ic-stepper.css?tag=ic-stepper&encapsulation=shadow","src/components/ic-stepper/ic-stepper.tsx"],"names":["icStepperCss","IcStepper","this","resizeObserver","getChildren","steps","Array","from","el","querySelectorAll","initialiseStepStates","forEach","step","index","stepNum","lastStep","length","classList","add","contains","style","maxWidth","lastStepWidth","connectorWidth","i","width","stepperWidth","minWidth","stepConnect","shadowRoot","querySelector","runResizeObserver","ResizeObserver","setStepperWidth","observe","offsetWidth","allSteps","document","getBoundingClientRect","[object Object]","checkResizeObserver","disconnect","h","Host","class","aligned"],"mappings":"6FAAA,MAAMA,EAAe,4ICSRC,EAAS,+BAqBZC,KAAAC,eAAiC,KAKjCD,KAAAE,YAAc,KACpBF,KAAKG,MAAQC,MAAMC,KAAKL,KAAKM,GAAGC,iBAAiB,aAG3CP,KAAAQ,qBAAuB,KAC7BR,KAAKG,MAAMM,SAAQ,CAACC,EAAMC,KAExBD,EAAKE,QAAUD,EAAQ,EAEvBD,EAAKG,SAAWF,IAAUX,KAAKG,MAAMW,OAAS,EAE9C,GAAIJ,EAAKG,SAAU,CACjBH,EAAKK,UAAUC,IAAI,aACnB,GAAIhB,KAAKM,GAAGS,UAAUE,SAAS,sBAAuB,CACpDP,EAAKQ,MAAMC,SAAW,GAAGnB,KAAKoB,kBAEhC,GAAIpB,KAAKM,GAAGS,UAAUE,SAAS,gBAAiB,CAC9CP,EAAKQ,MAAMC,SAAW,GAAGnB,KAAKqB,eAAiB,YAKrD,IAAK,IAAIC,EAAI,EAAGA,EAAItB,KAAKG,MAAMW,OAAS,EAAGQ,IAAK,CAC9C,GAAItB,KAAKM,GAAGS,UAAUE,SAAS,sBAAuB,CACpDjB,KAAKG,MAAMmB,GAAGJ,MAAMK,MAAQ,IACzBvB,KAAKwB,aAAexB,KAAKoB,gBAAkBpB,KAAKG,MAAMW,OAAS,OAElEd,KAAKG,MAAMmB,GAAGJ,MAAMO,SAAW,QAGjC,GAAIzB,KAAKM,GAAGS,UAAUE,SAAS,gBAAiB,CAC9CjB,KAAKG,MAAMmB,GAAGJ,MAAMK,MAAQ,GAAGvB,KAAKqB,eAAiB,OACrD,MAAMK,EAAc1B,KAAKG,MAAMmB,GAAGK,WAAWC,cAC3C,mCAEFF,EAAYR,MAAMK,MAChBvB,KAAKqB,eAAiB,IAAM,GAAGrB,KAAKqB,mBAAqB,WAKzDrB,KAAA6B,kBAAoB,KAC1B7B,KAAKC,eAAiB,IAAI6B,gBAAe,KACvC9B,KAAK+B,kBACL/B,KAAKE,cACLF,KAAKQ,0BAEPR,KAAKC,eAAe+B,QAAQhC,KAAKM,KAG3BN,KAAA+B,gBAAkB,KACxB/B,KAAKwB,aAAexB,KAAKM,GAAG2B,YAC5B,MAAMC,EAAWC,SAAS5B,iBAAiB,WAC3C,MAAMM,EAAWqB,EAASA,EAASpB,OAAS,GAC5CD,EAASK,MAAMC,SAAW,OAC1B,GAAIN,EAASE,UAAUE,SAAS,sBAAuB,CACrDJ,EAASK,MAAMC,SAAW,GAAGnB,KAAKwB,aAAeU,EAASpB,WAE5Dd,KAAKoB,cAAgBP,EAASoB,YAC9BjC,KAAKE,cACLF,KAAKQ,qCAhFgC,iCAKL,sBAEF2B,SAC7BP,cAAc,cACdQ,wBAAwBb,yBAEM,EAwEjCc,mBACEC,EAAoBtC,KAAK6B,mBAG3BQ,uBACE,GAAIrC,KAAKC,iBAAmB,KAAM,CAChCD,KAAKC,eAAesC,cAIxBF,SACE,OACEG,EAACC,EAAI,CACHC,MAAO,CACLL,CAAC,gBAAiBrC,KAAK2C,UAAY,OACnCN,CAAC,sBAAuBrC,KAAK2C,UAAY,eAG3CH,EAAA,KAAA,CAAIE,MAAM,kBACRF,EAAA,OAAA","sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n}\n\n.step-item-list {\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n:host(.aligned-full-width) .step-item-list {\n  flex: auto;\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { checkResizeObserver } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\n\n@Component({\n  tag: \"ic-stepper\",\n  styleUrl: \"ic-stepper.css\",\n  shadow: true,\n})\nexport class IcStepper {\n  @Element() el: HTMLIcStepperElement;\n\n  /**\n   * How the stepper should be aligned in its container.\n   */\n  @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n  /**\n   * The length of the connnector between each step in pixels. Minimum length is 100px.\n   */\n  @Prop() connectorWidth?: number = 100;\n\n  @State() stepperWidth: number = document\n    .querySelector(\"ic-stepper\")\n    .getBoundingClientRect().width;\n\n  @State() lastStepWidth: number = 0;\n\n  private steps: HTMLIcStepElement[];\n\n  private resizeObserver: ResizeObserver = null;\n\n  /**\n   * Get all steps currently within this stepper\n   */\n  private getChildren = (): void => {\n    this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n  };\n\n  private initialiseStepStates = (): void => {\n    this.steps.forEach((step, index) => {\n      // Assign stepNum to each step\n      step.stepNum = index + 1;\n      //Assign lastStep to final step\n      step.lastStep = index === this.steps.length - 1;\n\n      if (step.lastStep) {\n        step.classList.add(\"last-step\");\n        if (this.el.classList.contains(\"aligned-full-width\")) {\n          step.style.maxWidth = `${this.lastStepWidth}px`;\n        }\n        if (this.el.classList.contains(\"aligned-left\")) {\n          step.style.maxWidth = `${this.connectorWidth + 48}px`;\n        }\n      }\n    });\n\n    for (let i = 0; i < this.steps.length - 1; i++) {\n      if (this.el.classList.contains(\"aligned-full-width\")) {\n        this.steps[i].style.width = `${\n          (this.stepperWidth - this.lastStepWidth) / (this.steps.length - 1)\n        }px`;\n        this.steps[i].style.minWidth = \"148px\";\n      }\n\n      if (this.el.classList.contains(\"aligned-left\")) {\n        this.steps[i].style.width = `${this.connectorWidth + 48}px`;\n        const stepConnect = this.steps[i].shadowRoot.querySelector(\n          \"div > .step-top > .step-connect\"\n        ) as HTMLElement;\n        stepConnect.style.width =\n          this.connectorWidth > 100 ? `${this.connectorWidth}px` : \"100px\";\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.setStepperWidth();\n      this.getChildren();\n      this.initialiseStepStates();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  private setStepperWidth = (): void => {\n    this.stepperWidth = this.el.offsetWidth;\n    const allSteps = document.querySelectorAll(\"ic-step\");\n    const lastStep = allSteps[allSteps.length - 1];\n    lastStep.style.maxWidth = \"none\";\n    if (lastStep.classList.contains(\"aligned-full-width\")) {\n      lastStep.style.maxWidth = `${this.stepperWidth / allSteps.length}px`;\n    }\n    this.lastStepWidth = lastStep.offsetWidth;\n    this.getChildren();\n    this.initialiseStepStates();\n  };\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"aligned-left\"]: this.aligned === \"left\",\n          [\"aligned-full-width\"]: this.aligned === \"full-width\",\n        }}\n      >\n        <ul class=\"step-item-list\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-5e0b88fa.entry.js

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

package/dist/core/p-5e0b88fa.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","src/components/ic-radio-option/ic-radio-option.tsx"],"names":["icRadioOptionCss","RadioOption","this","defaultRadioValue","handleClick","disabled","radioElement","focus","hasAdditionalField","textfield","host","querySelector","value","radioOptionSelect","emit","swallowClick","event","stopPropagation","[object Object]","selected","additonalFieldContent","getSlotContent","Element","tagName","textField","hiddenInput","textFieldValue","detail","onComponentRequiredPropUndefined","prop","propName","additionalFieldDisplay","setAttribute","removeAttribute","id","label","undefined","groupLabel","h","Host","onClick","class","role","tabindex","type","name","checked","ref","el","variant","htmlFor","dynamic-container","hidden","dynamicText","addition-field-wrapper"],"mappings":"2GAAA,MAAMA,EAAmB,igLCsBZC,EAAW,qHAuDdC,KAAAC,kBAA4B,GAE5BD,KAAAE,YAAc,KACpB,IAAKF,KAAKG,SAAU,CAClBH,KAAKI,aAAaC,QAElB,GAAIL,KAAKM,mBAAoB,CAC3B,MAAMC,EAAYP,KAAKQ,KAAKC,cAAc,iBAC1CT,KAAKU,MACHH,EAAUG,QAAU,GAAKH,EAAUG,MAAQV,KAAKC,kBAGpDD,KAAKW,kBAAkBC,KAAK,CAC1BF,MAAOV,KAAKU,UAKVV,KAAAa,aAAgBC,IACtBA,EAAMC,mBAGAf,KAAAM,mBAA8B,oBAxEQ,oBAIjB,+GAoBC,yEAK5B,SAeFU,sBAAsBC,GACpB,GAAIA,EAAU,CACZjB,KAAKE,eA2BTc,oBACE,MAAME,EAAwBC,EAAenB,KAAKQ,KAAM,oBAExD,GAAIU,IAA0B,KAAM,CAClClB,KAAKM,mBAAqB,KAC1B,MAAMc,EAAUF,EAAsB,GACtC,GAAIE,EAAQC,UAAY,gBAAiB,CACvC,MAAMC,EAAYF,EAClBE,EAAUC,YAAc,OAI5BvB,KAAKC,kBAAoBD,KAAKU,MAIhCM,sBAAsBF,GACpB,MAAMU,EAAiBV,EAAMW,OAAOf,MAEpC,GAAIV,KAAKiB,SAAU,CACjB,GAAIO,IAAmB,GAAI,CACzBxB,KAAKU,MAAQI,EAAMW,OAAOf,MAC1BV,KAAKW,kBAAkBC,KAAK,CAC1BF,MAAOV,KAAKU,YAET,CACLV,KAAKU,MAAQV,KAAKC,kBAClBD,KAAKW,kBAAkBC,KAAK,CAC1BF,MAAOV,KAAKC,sBAMpBe,mBACEU,EACE,CAAC,CAAEC,KAAM3B,KAAKU,MAAOkB,SAAU,UAC/B,gBAIJZ,qBACE,GAAIhB,KAAK6B,yBAA2B,SAAU,CAC5C,MAAMtB,EAAYP,KAAKQ,KAAKC,cAAc,iBAC1C,IAAKT,KAAKiB,SAAU,CAClBV,GAAaA,EAAUuB,aAAa,WAAY,QAC3C,CACLvB,GAAaA,EAAUwB,gBAAgB,cAK7Cf,SACE,MAAMgB,EAAK,mBACThC,KAAKiC,QAAUC,UAAYlC,KAAKiC,MAAQjC,KAAKU,SAC3CV,KAAKmC,aAET,OACEC,EAACC,EAAI,CAACC,QAAStC,KAAKE,aAClBkC,EAAA,MAAA,CAAKG,MAAO,CAAEvB,CAAC,aAAc,KAAMA,CAAC,YAAahB,KAAKG,WACpDiC,EAAA,QAAA,CACEI,KAAK,QACLC,SAAUzC,KAAKiB,SAAW,IAAM,KAChCyB,KAAK,QACLC,KAAM3C,KAAK2C,KACXX,GAAIA,EACJtB,MAAOV,KAAKU,MACZP,SAAUH,KAAKG,SAAW,KAAO,KACjCyC,QAAS5C,KAAKiB,SACd4B,IAAMC,GAAQ9C,KAAKI,aAAe0C,IAEpCV,EAAA,OAAA,CAAMG,MAAM,cACZH,EAAA,gBAAA,CAAeG,MAAM,cAAcQ,QAAQ,QACzCX,EAAA,QAAA,CAAOY,QAAShB,GAAKhC,KAAKiC,SAI7BjC,KAAKM,oBACJ8B,EAAA,MAAA,CACEE,QAAStC,KAAKa,aACd0B,MAAO,CACLU,oBAAqB,KACrBC,OACElD,KAAK6B,yBAA2B,YAAc7B,KAAKiB,WAGtDjB,KAAK6B,yBAA2B,WAC/BO,EAAA,MAAA,CAAKG,MAAM,kBAEbH,EAAA,MAAA,KACGpC,KAAK6B,yBAA2B,WAC/BO,EAAA,gBAAA,CAAeW,QAAQ,WACrBX,EAAA,IAAA,CAAGG,MAAM,gBAAgBvC,KAAKmD,cAGlCf,EAAA,MAAA,CACEG,MAAO,CACLa,yBACEpD,KAAK6B,yBAA2B,WAGpCO,EAAA,OAAA,CAAMO,KAAK","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n  margin-bottom: var(--ic-space-sm);\n  width: fit-content;\n}\n\n:host([dense]) {\n  margin-bottom: 10px;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-textfield) {\n  margin-top: var(--ic-space-xs);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\n:host([inactive]) {\n  color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n  outline: none;\n}\n\n.container input:focus-visible {\n  outline: none;\n}\n\n/* The container */\n.container {\n  display: inline-flex;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  gap: var(--ic-space-xs);\n  margin-left: 5px;\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: inline-block;\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  border-radius: 50%;\n  border: none;\n}\n\n/* Create a custom radio button */\n.checkmark {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: 20px;\n  width: 20px;\n  background-color: transparent;\n  border: 1px solid #a7acb3;\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\n}\n\n/* Show the indicator (dot/circle) when checked */\n.container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n.container:hover input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-hover);\n  border: 1px solid var(--ic-action-default);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 1px solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-active);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 2px solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-active);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-action-default-active);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 2px solid var(--ic-action-default);\n  margin: -1px;\n  margin-bottom: 1px;\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  background-color: transparent;\n  border: 2px solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: 1px dashed var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n  background: var(--ic-architectural-200);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n  background-color: transparent;\n  box-shadow: none;\n  border: 2px solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-architectural-200);\n}\n\n/* Style the indicator (dot/circle) */\n.container .checkmark::after {\n  content: \"\";\n  position: absolute;\n  display: none;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--ic-action-default);\n}\n\n.radio-label {\n  font-size: 16px;\n  font-weight: 400;\n  margin-left: var(--ic-space-sm);\n}\n\n.addition-field-wrapper {\n  margin-left: 44px;\n}\n\n/* The line */\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 3px;\n  border-bottom: 2px solid var(--ic-action-default);\n  border-left: 2px solid var(--ic-action-default);\n  margin-left: -1px;\n}\n\n/* The dynamic container */\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin-left: var(--ic-space-md);\n  margin-top: 6px;\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n  display: none;\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\n  margin-top: 5px;\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcValueEventDetail } from \"../../interface\";\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: true,\n})\nexport class RadioOption {\n  private radioElement: HTMLInputElement;\n  /**\n   * Determines whether the radio should be in selected state.\n   */\n  @Prop({ reflect: true }) selected?: boolean = false;\n  /**\n   * Determines whether the radio should be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label?: string;\n  /**\n   * Provide a value for the input.\n   */\n  @Prop() value!: string;\n  /**\n   * Provide a name for the input.\n   */\n  @Prop() name: string;\n  /**\n   * Provide a group label for the input.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * Provide a text prop for the dynamic text.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /** Determines type of additional text field in relation to radio option */\n\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  @Element() host: HTMLIcRadioOptionElement;\n\n  /**\n   * Emitted when radio is checked\n   */\n  @Event() icCheck!: EventEmitter<void>;\n\n  /**\n   * Emitted when a radio is selected.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n  @Watch(\"selected\")\n  selectedChangeHandler(selected: boolean): void {\n    if (selected) {\n      this.handleClick();\n    }\n  }\n\n  private defaultRadioValue: string = \"\";\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.radioElement.focus();\n\n      if (this.hasAdditionalField) {\n        const textfield = this.host.querySelector(\"ic-text-field\");\n        this.value =\n          textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n      }\n\n      this.radioOptionSelect.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private swallowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  private hasAdditionalField: boolean = false;\n  componentWillLoad(): void {\n    const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n    if (additonalFieldContent !== null) {\n      this.hasAdditionalField = true;\n      const Element = additonalFieldContent[0] as HTMLElement;\n      if (Element.tagName === \"IC-TEXT-FIELD\") {\n        const textField = Element as HTMLIcTextFieldElement;\n        textField.hiddenInput = false;\n      }\n    }\n\n    this.defaultRadioValue = this.value;\n  }\n\n  @Listen(\"icChange\")\n  textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    const textFieldValue = event.detail.value;\n\n    if (this.selected) {\n      if (textFieldValue !== \"\") {\n        this.value = event.detail.value;\n        this.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\n        this.radioOptionSelect.emit({\n          value: this.defaultRadioValue,\n        });\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.selected) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    const id = `ic-radio-option-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    return (\n      <Host onClick={this.handleClick}>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          <input\n            role=\"radio\"\n            tabindex={this.selected ? \"0\" : \"-1\"}\n            type=\"radio\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.selected}\n            ref={(el) => (this.radioElement = el)}\n          ></input>\n          <span class=\"checkmark\"></span>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n\n        {this.hasAdditionalField && (\n          <div\n            onClick={this.swallowClick}\n            class={{\n              \"dynamic-container\": true,\n              hidden:\n                this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n            }}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{this.dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"addition-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-6be5e06b.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as i}from"./p-f9370be6.js";const n='/*! 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}@media only screen and (max-width: 576px){:host{--section-container-margin:var(--ic-space-xs);--section-container-max-width:var(--ic-breakpoint-sm)}}@media only screen and (min-width: 577px){:host{--section-container-margin:var(--ic-space-md);--section-container-max-width:var(--ic-breakpoint-md)}}@media only screen and (min-width: 769px){:host{--section-container-margin:var(--ic-space-md);--section-container-max-width:var(--ic-breakpoint-lg)}}@media only screen and (min-width: 993px){:host{--section-container-margin:var(--ic-space-md);--section-container-max-width:var(--ic-breakpoint-xl)}}@media only screen and (min-width: 1201px){:host{--section-container-margin:var(--ic-space-lg);--section-container-max-width:var(--ic-breakpoint-xl)}}:host{display:block;padding-top:var(--ic-space-md);padding-bottom:var(--ic-space-md)}:host(.aligned-center){max-width:var(--section-container-max-width);margin-left:auto;margin-right:auto;padding-left:var(--section-container-margin);padding-right:var(--section-container-margin)}:host(.aligned-left){max-width:var(--section-container-max-width);margin-left:var(--section-container-margin);margin-right:auto;padding-right:var(--section-container-margin)}:host(.aligned-full-width){margin-left:var(--section-container-margin);margin-right:var(--section-container-margin)}:host(.vertical-padding){padding-top:var(--ic-space-md);padding-bottom:var(--ic-space-md)}:host(.no-vertical-padding){padding-top:0;padding-bottom:0}';const o=class{constructor(t){e(this,t);this.aligned="left";this.fullHeight=false}render(){const{aligned:e,fullHeight:n}=this;return t(i,{class:{["aligned-left"]:e==="left",["aligned-center"]:e==="center",["aligned-full-width"]:e==="full-width",["no-vertical-padding"]:n}},t("slot",null))}};o.style=n;export{o as ic_section_container};
+//# sourceMappingURL=p-6be5e06b.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-section-container/ic-section-container.css?tag=ic-section-container&encapsulation=shadow","src/components/ic-section-container/ic-section-container.tsx"],"names":["icSectionContainerCss","SectionContainer","[object Object]","aligned","fullHeight","this","h","Host","class"],"mappings":"kDAAA,MAAMA,EAAwB,kyHCQjBC,EAAgB,4CAIK,uBAKD,MAE/BC,SACE,MAAMC,QAAEA,EAAOC,WAAEA,GAAeC,KAChC,OACEC,EAACC,EAAI,CACHC,MAAO,CACLN,CAAC,gBAAiBC,IAAY,OAC9BD,CAAC,kBAAmBC,IAAY,SAChCD,CAAC,sBAAuBC,IAAY,aACpCD,CAAC,uBAAwBE,IAG3BE,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n@media only screen and (max-width: 576px) {\n  :host {\n    --section-container-margin: var(--ic-space-xs);\n    --section-container-max-width: var(--ic-breakpoint-sm);\n  }\n}\n\n@media only screen and (min-width: 577px) {\n  :host {\n    --section-container-margin: var(--ic-space-md);\n    --section-container-max-width: var(--ic-breakpoint-md);\n  }\n}\n\n@media only screen and (min-width: 769px) {\n  :host {\n    --section-container-margin: var(--ic-space-md);\n    --section-container-max-width: var(--ic-breakpoint-lg);\n  }\n}\n\n@media only screen and (min-width: 993px) {\n  :host {\n    --section-container-margin: var(--ic-space-md);\n    --section-container-max-width: var(--ic-breakpoint-xl);\n  }\n}\n\n@media only screen and (min-width: 1201px) {\n  :host {\n    --section-container-margin: var(--ic-space-lg);\n    --section-container-max-width: var(--ic-breakpoint-xl);\n  }\n}\n\n:host {\n  display: block;\n  padding-top: var(--ic-space-md);\n  padding-bottom: var(--ic-space-md);\n}\n\n:host(.aligned-center) {\n  max-width: var(--section-container-max-width);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--section-container-margin);\n  padding-right: var(--section-container-margin);\n}\n\n:host(.aligned-left) {\n  max-width: var(--section-container-max-width);\n  margin-left: var(--section-container-margin);\n  margin-right: auto;\n  padding-right: var(--section-container-margin);\n}\n\n:host(.aligned-full-width) {\n  margin-left: var(--section-container-margin);\n  margin-right: var(--section-container-margin);\n}\n\n:host(.vertical-padding) {\n  padding-top: var(--ic-space-md);\n  padding-bottom: var(--ic-space-md);\n}\n\n:host(.no-vertical-padding) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n","import { Component, Prop, Host, h } from \"@stencil/core\";\nimport { IcAlignment } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-section-container\",\n  styleUrl: \"ic-section-container.css\",\n  shadow: true,\n})\nexport class SectionContainer {\n  /**\n   * How the container should be aligned.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * Removes the standard vertical padding from the container.\n   */\n  @Prop() fullHeight?: boolean = false;\n\n  render() {\n    const { aligned, fullHeight } = this;\n    return (\n      <Host\n        class={{\n          [\"aligned-left\"]: aligned === \"left\",\n          [\"aligned-center\"]: aligned === \"center\",\n          [\"aligned-full-width\"]: aligned === \"full-width\",\n          [\"no-vertical-padding\"]: fullHeight,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-7152788d.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as i,H as a,g as s}from"./p-f9370be6.js";import{a as r,F as e,G as l,w as o}from"./p-e5a09372.js";import{w as n,e as c}from"./p-bf5717ca.js";import{s as p}from"./p-ae6aa67f.js";const d="ic-input-label{margin-bottom:var(--ic-space-xs)}ic-input-label.with-helper{margin-bottom:var(--ic-space-xxxs)}ic-input-label.disabled{color:var(--ic-color-tertiary-text)}ic-input-label.readonly{color:var(--ic-color-tertiary-text)}ic-input-label .helpertext{margin-top:var(--ic-space-xxxs)}ic-input-label .helpertext-normal{color:var(--ic-color-secondary-text)}ic-input-label .helpertext-readonly{color:var(--ic-color-tertiary-text)}ic-input-label .readonly-label{color:var(--ic-color-secondary-text)}ic-input-label .error-label{color:var(--ic-status-error)}ic-input-label .dark{color:var(--ic-architectural-white)}";const h=class{constructor(i){t(this,i);this.for=undefined;this.required=false;this.helperText="";this.label=undefined;this.disabled=false;this.readonly=false;this.error=false;this.dark=false}componentDidLoad(){r([{prop:this.label,propName:"label"}],"Input Label")}render(){const{disabled:t,readonly:s,label:r,required:l,helperText:o,error:n,dark:c}=this;const p=l?r+" *":r;const d=s?`${p}`:i("label",{htmlFor:this.for},p);const h=e(this.for);return i(a,{class:{["disabled"]:t,["readonly"]:s,["with-helper"]:o!==""}},i("ic-typography",{variant:"label",class:{["readonly-label"]:s,["error-label"]:n&&!(s||t),["dark"]:c}},d),o!==""&&i("ic-typography",{variant:"caption",class:{["helpertext"]:true,["helpertext-normal"]:!t&&!s,["helpertext-readonly"]:s}},i("span",{id:h},o)))}};h.style=d;const u="ic-input-validation{min-height:28px;width:var(--input-width, 320px);margin-top:var(--ic-space-xxxs);display:flex}ic-input-validation.fullwidth{width:100%}ic-input-validation.error{color:var(--ic-status-error)}ic-input-validation.success{color:var(--ic-status-success)}ic-input-validation span.status-icon{padding-right:var(--ic-space-xxs)}ic-input-validation span.status-icon>svg{height:20px;width:20px}ic-input-validation span.icon-success>svg{fill:var(--ic-status-success)}ic-input-validation span.icon-error>svg{fill:var(--ic-status-error)}ic-input-validation span.icon-warning>svg{fill:var(--ic-status-warning-mid)}ic-input-validation .statustext{flex-grow:1}";const v={[o.Warning]:n,[o.Error]:c,[o.Success]:p};const x=class{constructor(i){t(this,i);this.message=undefined;this.for=undefined;this.status="";this.fullWidth=false;this.ariaLiveMode="polite"}componentDidLoad(){r([{prop:this.message,propName:"message"}],"Input Validation")}render(){const t=this.status!==""?v[this.status]:"";const s=l(this.for);return i(a,{class:{[this.status]:this.status!=="",["fullwidth"]:this.fullWidth}},t!==""&&i("span",{class:{["status-icon"]:true,[`icon-${this.status}`]:true},innerHTML:t}),i("ic-typography",{variant:"caption",class:"statustext"},i("span",{"aria-live":this.ariaLiveMode,id:s},this.message)),i("slot",{name:"validation-message-adornment"}))}get el(){return s(this)}};x.style=u;export{h as ic_input_label,x as ic_input_validation};
+//# sourceMappingURL=p-7152788d.entry.js.map