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

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

package/dist/core/p-e4551421.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","src/components/ic-radio-option/ic-radio-option.tsx"],"names":["icRadioOptionCss","RadioOption","this","defaultRadioValue","skipFocus","handleClick","disabled","radioElement","focus","hasAdditionalField","textfield","host","querySelector","value","radioOptionSelect","emit","swallowClick","event","stopPropagation","handleFormReset","selected","initiallySelected","[object Object]","additonalFieldContent","getSlotContent","Element","tagName","textField","hiddenInput","addFormResetListener","textFieldValue","detail","onComponentRequiredPropUndefined","prop","propName","additionalFieldDisplay","setAttribute","removeAttribute","removeFormResetListener","id","label","undefined","groupLabel","h","Host","onClick","class","role","tabindex","type","name","checked","ref","el","variant","htmlFor","dynamic-container","hidden","dynamicText","addition-field-wrapper"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: var(--ic-space-sm);\n  width: fit-content;\n}\n\n:host([small]) {\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([disabled]) {\n  color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n.container {\n  display: inline-flex;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  margin-left: var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: inline-block;\n  position: absolute;\n  cursor: pointer;\n  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  margin: 0 1px;\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: 0;\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\n@media (max-width: 576px) {\n  ::slotted(ic-text-field) {\n    --input-width: 100%;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n\n  .container input:checked ~ .checkmark,\n  .container:active input:checked ~ .checkmark {\n    border-color: Highlight;\n  }\n\n  .container input:checked ~ .checkmark::after,\n  .container:active input:checked ~ .checkmark::after {\n    background-color: Highlight;\n  }\n\n  .container input:disabled ~ .checkmark,\n  .container input:checked:disabled ~ .checkmark {\n    border-color: GrayText;\n  }\n\n  .container input:disabled ~ .checkmark::after,\n  .container:active input:disabled ~ .checkmark::after {\n    background-color: GrayText;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  State,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcValueEventDetail } from \"../../interface\";\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: true,\n})\nexport class RadioOption {\n  private radioElement: HTMLInputElement;\n  /**\n   * If `true`, the radio option will be displayed in a selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The label for the radio option.\n   */\n  @Prop() label?: string;\n  /**\n   * The value for the radio option.\n   */\n  @Prop({ mutable: true }) value!: string;\n  /**\n   * The name for the radio option.\n   */\n  @Prop() name: string;\n  /**\n   * The group label for the radio option.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  @State() initiallySelected = this.selected;\n\n  @Element() host: HTMLIcRadioOptionElement;\n\n  /**\n   * 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  private skipFocus = false;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      if (this.skipFocus === false) {\n        this.radioElement.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        const textfield = this.host.querySelector(\"ic-text-field\");\n        this.value =\n          textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n      }\n\n      this.radioOptionSelect.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private swallowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  private hasAdditionalField: boolean = false;\n  componentWillLoad(): void {\n    const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n    if (additonalFieldContent !== null) {\n      this.hasAdditionalField = true;\n      const Element = additonalFieldContent[0] as HTMLElement;\n      if (Element.tagName === \"IC-TEXT-FIELD\") {\n        const textField = Element as HTMLIcTextFieldElement;\n        textField.hiddenInput = false;\n      }\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  @Listen(\"icChange\")\n  textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    const textFieldValue = event.detail.value;\n\n    if (this.selected) {\n      if (textFieldValue !== \"\") {\n        this.value = event.detail.value;\n        this.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  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    const id = `ic-radio-option-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    return (\n      <Host onClick={this.handleClick}>\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-eb33ece2.entry.js → p-e93e9aa3.entry.js}

@@ -1,2 +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(.small) .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(.small) .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.small=false}render(){const{heading:e,small:o}=this;const n=this.el.children;if(o){for(let e=0;e<n.length;e++){n[e].setAttribute("small","true")}}return t(i,{class:{["small"]: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-eb33ece2.entry.js.map
+import{r as e,h as t,H as i,g as o}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}.rows{display:flex;flex-direction:column;gap:var(--ic-space-md)}:host(.small) .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(.small) .divider{margin-top:var(--ic-space-sm);margin-bottom:var(--ic-space-xs)}@media (forced-colors: active){.divider{background-color:canvastext}}';const n=class{constructor(t){e(this,t);this.heading=undefined;this.small=false}render(){const{heading:e,small:o}=this;const a=this.el.children;if(o){for(let e=0;e<a.length;e++){a[e].setAttribute("small","true")}}return t(i,{class:{["small"]: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)}};n.style=a;export{n as ic_data_entity};
+//# sourceMappingURL=p-e93e9aa3.entry.js.map

package/dist/core/p-e93e9aa3.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","small","this","children","el","i","length","setAttribute","h","Host","class","id","name","variant","aria-labelledby"],"mappings":"yDAAA,MAAMA,EAAkB,owFCOXC,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(.small) .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(.small) .divider {\n  margin-top: var(--ic-space-sm);\n  margin-bottom: var(--ic-space-xs);\n}\n\n@media (forced-colors: active) {\n  .divider {\n    background-color: canvastext;\n  }\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   * The title for the data entity.\n   */\n  @Prop() heading: string;\n\n  /**\n   * If `true`, the small styling will be applied to the data heading and all child data rows.\n   */\n  @Prop() small: boolean = false;\n\n  render() {\n    const { heading, small } = this;\n\n    const children = this.el.children;\n\n    if (small) {\n      for (let i = 0; i < children.length; i++) {\n        children[i].setAttribute(\"small\", \"true\");\n      }\n    }\n\n    return (\n      <Host class={{ [\"small\"]: small }}>\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-378a7270.entry.js → p-ecfb2e6b.entry.js}

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

package/dist/core/{p-378a7270.entry.js.map → p-ecfb2e6b.entry.js.map}

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