@ukic/web-components 2.2.0 → 2.4.0

package/dist/core/p-8ca80000.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icMenuGroupCss","MenuGroup","render","parentMenu","this","el","closest","h","Host","label","undefined","variant","role","querySelector"],"sources":["./src/components/ic-menu-group/ic-menu-group.css?tag=ic-menu-group&encapsulation=shadow","./src/components/ic-menu-group/ic-menu-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n}\n\nic-typography {\n  color: var(--ic-color-tertiary-text);\n  margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\nul {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\nhr {\n  display: flex;\n  align-self: stretch;\n  border: calc(var(--ic-space-xxxs) / 2) solid var(--ic-architectural-300);\n  margin: var(--ic-space-xxs) 0 calc(var(--ic-space-sm) / 4);\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-menu-group\",\n  styleUrl: \"ic-menu-group.css\",\n  shadow: true,\n})\nexport class MenuGroup {\n  @Element() el: HTMLIcMenuGroupElement;\n  /**\n   * The label to display as the title of the menu group.\n   */\n  @Prop() label?: string;\n\n  render() {\n    const parentMenu = this.el.closest(\"ic-popover-menu\");\n\n    return (\n      <Host aria-label={this.label !== null ? this.label : \"\"}>\n        {this.label !== undefined && (\n          <ic-typography variant=\"subtitle-small\">{this.label}</ic-typography>\n        )}\n        <ul role=\"group\">\n          <slot></slot>\n        </ul>\n        {/* The line under the menu group is added on all menu groups except in the case that the menu group is the last item in the popover menu */}\n        {this.el !== parentMenu?.querySelector(\"ic-menu-group:last-child\") && (\n          <hr />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,8rF,MCOVC,EAAS,M,8CAOpBC,SACE,MAAMC,EAAaC,KAAKC,GAAGC,QAAQ,mBAEnC,OACEC,EAACC,EAAI,cAAaJ,KAAKK,QAAU,KAAOL,KAAKK,MAAQ,IAClDL,KAAKK,QAAUC,WACdH,EAAA,iBAAeI,QAAQ,kBAAkBP,KAAKK,OAEhDF,EAAA,MAAIK,KAAK,SACPL,EAAA,cAGDH,KAAKC,MAAOF,IAAU,MAAVA,SAAU,SAAVA,EAAYU,cAAc,8BACrCN,EAAA,W"}

package/dist/core/p-90d3a41b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icRadioGroupCss","RadioGroup","this","handleKeyDown","event","key","radioOptions","getNextItemToSelect","selectedChild","click","preventDefault","currentItem","movingDown","numRadios","length","nextItem","disabled","componentWillLoad","removeDisabledFalse","host","componentDidLoad","Array","from","querySelectorAll","forEach","radioOption","index","selected","checkedValue","value","name","groupLabel","label","shadowRoot","querySelector","tabIndex","orientation","undefined","isSlotUsed","onComponentRequiredPropUndefined","prop","propName","selectHandler","detail","selectedOption","target","icChange","emit","radio","textFieldValue","_a","changeHandler","findIndex","render","renderHiddenInput","h","Host","onKeyDown","class","small","role","required","hideLabel","validationStatus","helperText","hasValidationStatus","ariaLiveMode","status","message","validationText"],"sources":["./src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","./src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n}\n\nic-input-label.error {\n  color: var(--ic-status-error);\n}\n\nic-input-validation {\n  margin-top: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-validation {\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-label ic-typography {\n  margin-bottom: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-label ic-typography {\n  margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n.radio-buttons-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ic-space-xxs);\n}\n\n:host(.small) .radio-buttons-container {\n  gap: var(--ic-space-xxxs);\n}\n\n:host([orientation=\"horizontal\"]) .radio-buttons-container {\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.small[orientation=\"horizontal\"]) .radio-buttons-container {\n  gap: var(--ic-space-xl);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  hasValidationStatus,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderHiddenInput,\n} from \"../../utils/helpers\";\nimport {\n  IcInformationStatusOrEmpty,\n  IcOrientation,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n  tag: \"ic-radio-group\",\n  styleUrl: \"ic-radio-group.css\",\n  shadow: true,\n})\nexport class RadioGroup {\n  private radioOptions: HTMLIcRadioOptionElement[];\n\n  @Element() host: HTMLIcRadioGroupElement;\n\n  @State() checkedValue: string = \"\";\n  @State() selectedChild: number = -1;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The label for the radio group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the radio group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n   */\n  @Prop({ reflect: true, mutable: true }) orientation: IcOrientation =\n    \"vertical\";\n\n  /**\n   * If `true`, the radio group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the small styling will be applied to the radio group.\n   */\n  @Prop() small: boolean = false;\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a user selects a radio.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.host);\n  }\n\n  componentDidLoad(): void {\n    this.radioOptions = Array.from(\n      this.host.querySelectorAll(\"ic-radio-option\")\n    );\n\n    this.radioOptions.forEach((radioOption, index) => {\n      if (!radioOption.selected) {\n        radioOption.selected = this.checkedValue === radioOption.value;\n      }\n      radioOption.name = this.name;\n      radioOption.groupLabel = this.label;\n      if (radioOption.selected) {\n        this.selectedChild = index;\n        this.checkedValue = radioOption.value;\n      }\n    });\n    this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n      this.selectedChild > 0 ? -1 : 0;\n\n    if (\n      this.orientation === \"horizontal\" &&\n      this.radioOptions !== undefined &&\n      (this.radioOptions.length > 2 ||\n        (this.radioOptions.length === 2 &&\n          (isSlotUsed(this.radioOptions[0], \"additional-field\") ||\n            isSlotUsed(this.radioOptions[1], \"additional-field\"))))\n    ) {\n      this.orientation = \"vertical\";\n    }\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n    this.checkedValue = event.detail.value;\n    const selectedOption = event.target as HTMLIcRadioOptionElement;\n    this.icChange.emit({\n      value: this.checkedValue,\n      selectedOption: {\n        radio: selectedOption,\n        textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n      },\n    });\n\n    if (this.radioOptions !== undefined) {\n      this.radioOptions.forEach((radioOption, index) => {\n        radioOption.selected = this.checkedValue === radioOption.value;\n        if (radioOption.selected) {\n          this.selectedChild = index;\n        }\n      });\n      this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n        this.selectedChild > 0 ? -1 : 0;\n    }\n  }\n\n  @Listen(\"icSelectedChange\")\n  changeHandler(): void {\n    const selectedOption = this.radioOptions.findIndex(\n      (radioOption) => radioOption.selected\n    );\n    if (selectedOption < 0) {\n      this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex = 0;\n      this.selectedChild = selectedOption;\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, true)\n        ].click();\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, false)\n        ].click();\n        event.preventDefault();\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numRadios = this.radioOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    //check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numRadios;\n    } else if (nextItem > numRadios) {\n      nextItem = 0;\n    }\n\n    //if next item is disabled then find next\n    if (this.radioOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  render() {\n    renderHiddenInput(\n      true,\n      this.host,\n      this.name,\n      this.checkedValue,\n      this.disabled\n    );\n\n    return (\n      <Host onKeyDown={this.handleKeyDown} class={{ small: this.small }}>\n        <div\n          role=\"radiogroup\"\n          aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n        >\n          {!this.hideLabel && (\n            <ic-input-label\n              class={{ [`${this.validationStatus}`]: true }}\n              label={this.label}\n              helperText={this.helperText}\n              required={this.required}\n              disabled={this.disabled}\n            ></ic-input-label>\n          )}\n          <div class=\"radio-buttons-container\">\n            <slot></slot>\n          </div>\n        </div>\n        {hasValidationStatus(this.validationStatus, this.disabled) && (\n          <ic-input-validation\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"wJAAA,MAAMA,EAAkB,mjG,MC8BXC,EAAU,M,4DA4IbC,KAAAC,cAAiBC,IACvB,OAAQA,EAAMC,KACZ,IAAK,YACL,IAAK,aACHH,KAAKI,aACHJ,KAAKK,oBAAoBL,KAAKM,cAAe,OAC7CC,QACFL,EAAMM,iBACN,MACF,IAAK,UACL,IAAK,YACHR,KAAKI,aACHJ,KAAKK,oBAAoBL,KAAKM,cAAe,QAC7CC,QACFL,EAAMM,iB,EAIJR,KAAAK,oBAAsB,CAC5BI,EACAC,KAEA,MAAMC,EAAYX,KAAKI,aAAaQ,OAAS,EAE7C,GAAIH,EAAc,EAAG,CACnBA,EAAc,C,CAGhB,IAAII,EAAWH,EAAaD,EAAc,EAAIA,EAAc,EAG5D,GAAII,EAAW,EAAG,CAChBA,EAAWF,C,MACN,GAAIE,EAAWF,EAAW,CAC/BE,EAAW,C,CAIb,GAAIb,KAAKI,aAAaS,GAAUC,SAAU,CACxCD,EAAWb,KAAKK,oBAAoBQ,EAAUH,E,CAGhD,OAAOG,CAAQ,E,kBAjLe,G,oBACE,E,cAKN,M,yCAUC,M,0DAgB3B,W,cAK0B,M,WAKH,M,sBAI8B,G,oBAItB,E,CAOjCE,oBACEC,EAAoBhB,KAAKc,SAAUd,KAAKiB,K,CAG1CC,mBACElB,KAAKI,aAAee,MAAMC,KACxBpB,KAAKiB,KAAKI,iBAAiB,oBAG7BrB,KAAKI,aAAakB,SAAQ,CAACC,EAAaC,KACtC,IAAKD,EAAYE,SAAU,CACzBF,EAAYE,SAAWzB,KAAK0B,eAAiBH,EAAYI,K,CAE3DJ,EAAYK,KAAO5B,KAAK4B,KACxBL,EAAYM,WAAa7B,KAAK8B,MAC9B,GAAIP,EAAYE,SAAU,CACxBzB,KAAKM,cAAgBkB,EACrBxB,KAAK0B,aAAeH,EAAYI,K,KAGpC3B,KAAKI,aAAa,GAAG2B,WAAWC,cAAc,SAASC,SACrDjC,KAAKM,cAAgB,GAAK,EAAI,EAEhC,GACEN,KAAKkC,cAAgB,cACrBlC,KAAKI,eAAiB+B,YACrBnC,KAAKI,aAAaQ,OAAS,GACzBZ,KAAKI,aAAaQ,SAAW,IAC3BwB,EAAWpC,KAAKI,aAAa,GAAI,qBAChCgC,EAAWpC,KAAKI,aAAa,GAAI,sBACvC,CACAJ,KAAKkC,YAAc,U,CAGrBG,EACE,CACE,CAAEC,KAAMtC,KAAK8B,MAAOS,SAAU,SAC9B,CAAED,KAAMtC,KAAK4B,KAAMW,SAAU,SAE/B,c,CAKJC,cAActC,G,MACZF,KAAK0B,aAAexB,EAAMuC,OAAOd,MACjC,MAAMe,EAAiBxC,EAAMyC,OAC7B3C,KAAK4C,SAASC,KAAK,CACjBlB,MAAO3B,KAAK0B,aACZgB,eAAgB,CACdI,MAAOJ,EACPK,gBAAgBC,EAAAN,IAAc,MAAdA,SAAc,SAAdA,EAAgBV,cAAc,oBAAgB,MAAAgB,SAAA,SAAAA,EAAErB,SAIpE,GAAI3B,KAAKI,eAAiB+B,UAAW,CACnCnC,KAAKI,aAAakB,SAAQ,CAACC,EAAaC,KACtCD,EAAYE,SAAWzB,KAAK0B,eAAiBH,EAAYI,MACzD,GAAIJ,EAAYE,SAAU,CACxBzB,KAAKM,cAAgBkB,C,KAGzBxB,KAAKI,aAAa,GAAG2B,WAAWC,cAAc,SAASC,SACrDjC,KAAKM,cAAgB,GAAK,EAAI,C,EAKpC2C,gBACE,MAAMP,EAAiB1C,KAAKI,aAAa8C,WACtC3B,GAAgBA,EAAYE,WAE/B,GAAIiB,EAAiB,EAAG,CACtB1C,KAAKI,aAAa,GAAG2B,WAAWC,cAAc,SAASC,SAAW,EAClEjC,KAAKM,cAAgBoC,C,EAiDzBS,SACEC,EACE,KACApD,KAAKiB,KACLjB,KAAK4B,KACL5B,KAAK0B,aACL1B,KAAKc,UAGP,OACEuC,EAACC,EAAI,CAACC,UAAWvD,KAAKC,cAAeuD,MAAO,CAAEC,MAAOzD,KAAKyD,QACxDJ,EAAA,OACEK,KAAK,aAAY,aACL,GAAG1D,KAAK8B,QAAQ9B,KAAK2D,SAAW,aAAe,OAEzD3D,KAAK4D,WACLP,EAAA,kBACEG,MAAO,CAAE,CAAC,GAAGxD,KAAK6D,oBAAqB,MACvC/B,MAAO9B,KAAK8B,MACZgC,WAAY9D,KAAK8D,WACjBH,SAAU3D,KAAK2D,SACf7C,SAAUd,KAAKc,WAGnBuC,EAAA,OAAKG,MAAM,2BACTH,EAAA,eAGHU,EAAoB/D,KAAK6D,iBAAkB7D,KAAKc,WAC/CuC,EAAA,uBACEW,aAAa,SACbC,OAAQjE,KAAK6D,iBACbK,QAASlE,KAAKmE,iB"}

package/dist/core/p-95992c98.entry.js.map

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

package/dist/core/p-96b71172.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,H as a,g as r}from"./p-69920d86.js";import{c as s}from"./p-44512ebe.js";import{V as n,i as o}from"./p-5dd0b02e.js";import{I as c}from"./p-6f57b13c.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}.container{min-height:3.5rem;border-radius:var(--ic-border-radius);position:relative;display:flex;align-items:center}.container-neutral{background-color:var(--ic-architectural-40)}.container-info{background-color:var(--ic-status-info-background)}.container-warning{background-color:var(--ic-status-warning-background)}.container-error{background-color:var(--ic-status-error-background)}.container-success{background-color:var(--ic-status-success-background)}.alert-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);position:absolute}.divider-neutral{background-color:var(--ic-architectural-500)}.divider-info{background-color:var(--ic-status-info)}.divider-warning{background-color:var(--ic-status-warning-mid)}.divider-error{background-color:var(--ic-status-error)}.divider-success{background-color:var(--ic-status-success)}.alert-icon{height:var(--ic-space-lg);width:1.375rem;margin-left:1.125rem}.alert-icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}.icon-neutral>svg{fill:var(--ic-architectural-500)}:host([variant="info"]) .alert-icon svg{fill:var(--ic-status-info)}:host([variant="warning"]) .alert-icon svg{fill:var(--ic-status-warning-mid)}:host([variant="error"]) .alert-icon svg{fill:var(--ic-status-error)}:host([variant="success"]) .alert-icon svg{fill:var(--ic-status-success)}.alert-content{display:flex;align-items:center;margin-left:0.625rem;width:100%}.alert-message{display:flex;align-items:center;padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;flex:1}.alert-message-title-above{display:inline;font-size:0}.alert-title{margin-right:var(--ic-space-xs)}.alert-title-above{white-space:normal}.alert-action-container{margin-right:var(--ic-space-xs);display:flex;align-items:center}.dismiss-icon{margin-right:var(--ic-space-xxxs);margin-left:-0.375rem;padding:0.375rem;border:none;border-radius:50%;background-color:inherit;display:flex;align-items:center;justify-content:center}.dismiss-icon:hover{cursor:pointer}@media (max-width: 628px){.alert-content{display:flex;flex-direction:column;align-items:flex-start}.alert-message{display:flex;flex-direction:column;align-items:flex-start}.alert-title{white-space:normal}.alert-action-container{margin-bottom:var(--ic-space-xs)}}@media (forced-colors: active){.container{border:var(--ic-hc-border)}}';const d=class{constructor(i){e(this,i);this.dismiss=t(this,"dismiss",7);this.icDismiss=t(this,"icDismiss",7);this.dismissAction=()=>{this.dismiss.emit();this.icDismiss.emit()};this.alertTitleWrap=false;this.visible=true;this.announced=true;this.dismissible=false;this.heading="";this.message=undefined;this.titleAbove=false;this.variant="neutral"}componentDidLoad(){this.alertTitleShouldWrap()}handleClick(){this.visible=!this.visible}alertTitleShouldWrap(){var e;const t=(e=this.el.shadowRoot.querySelector(".alert-title"))===null||e===void 0?void 0:e.clientHeight;if(t>24)this.alertTitleWrap=true}render(){const{variant:e,heading:t,message:r,titleAbove:l,dismissible:d,announced:u,visible:m}=this;return m&&i(a,{role:u&&"alert",class:{[c.Dark]:true}},i("div",{class:{["container"]:true,[`container-${e}`]:true}},i("div",{class:"alert-icon-container"},i("div",{class:{["divider"]:true,[`divider-${e}`]:true}}),i("span",{class:{["alert-icon"]:true,["svg-container"]:true,[`icon-${e}`]:true},innerHTML:n[e].icon})),i("div",{class:"alert-content"},i("div",{class:{["alert-message"]:true,["alert-message-title-above"]:l||this.alertTitleWrap}},t&&i("ic-typography",{class:{["alert-title"]:true,["alert-title-above"]:l||this.alertTitleWrap},variant:"subtitle-large"},i("p",null,t)),i("slot",{name:"message"},i("ic-typography",{variant:"body"},r))),o(this.el,"action")&&i("div",{class:"alert-action-container"},i("slot",{name:"action"}))),i("div",{class:"dismiss-icon-container"},d&&i("ic-button",{class:{["svg-container"]:true,["dismiss-icon"]:true},innerHTML:s,onClick:this.dismissAction,variant:"icon",appearance:c.Dark,title:"dismiss"}))))}get el(){return r(this)}};d.style=l;export{d as ic_alert};
-//# sourceMappingURL=p-96b71172.entry.js.map

package/dist/core/p-96b71172.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icAlertCss","Alert","this","dismissAction","dismiss","emit","icDismiss","componentDidLoad","alertTitleShouldWrap","handleClick","visible","titleHeight","_a","el","shadowRoot","querySelector","clientHeight","alertTitleWrap","render","variant","heading","message","titleAbove","dismissible","announced","h","Host","role","class","IcThemeForegroundEnum","Dark","innerHTML","VARIANT_ICONS","icon","name","isSlotUsed","closeIcon","onClick","appearance","title"],"sources":["./src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","./src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n}\n\n.container {\n  min-height: 3.5rem;\n  border-radius: var(--ic-border-radius);\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.container-neutral {\n  background-color: var(--ic-architectural-40);\n}\n\n.container-info {\n  background-color: var(--ic-status-info-background);\n}\n\n.container-warning {\n  background-color: var(--ic-status-warning-background);\n}\n\n.container-error {\n  background-color: var(--ic-status-error-background);\n}\n\n.container-success {\n  background-color: var(--ic-status-success-background);\n}\n\n.alert-icon-container {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.divider {\n  height: 100%;\n  width: var(--ic-space-xs);\n  border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n  position: absolute;\n}\n\n.divider-neutral {\n  background-color: var(--ic-architectural-500);\n}\n\n.divider-info {\n  background-color: var(--ic-status-info);\n}\n\n.divider-warning {\n  background-color: var(--ic-status-warning-mid);\n}\n\n.divider-error {\n  background-color: var(--ic-status-error);\n}\n\n.divider-success {\n  background-color: var(--ic-status-success);\n}\n\n.alert-icon {\n  height: var(--ic-space-lg);\n  width: 1.375rem;\n  margin-left: 1.125rem;\n}\n\n.alert-icon > svg {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  display: inline-block;\n}\n\n.icon-neutral > svg {\n  fill: var(--ic-architectural-500);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n  fill: var(--ic-status-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n  fill: var(--ic-status-warning-mid);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n  fill: var(--ic-status-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n  fill: var(--ic-status-success);\n}\n\n.alert-content {\n  display: flex;\n  align-items: center;\n  margin-left: 0.625rem;\n  width: 100%;\n}\n\n.alert-message {\n  display: flex;\n  align-items: center;\n  padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n  flex: 1;\n}\n\n.alert-message-title-above {\n  display: inline;\n  font-size: 0;\n}\n\n.alert-title {\n  margin-right: var(--ic-space-xs);\n}\n\n.alert-title-above {\n  white-space: normal;\n}\n\n.alert-action-container {\n  margin-right: var(--ic-space-xs);\n  display: flex;\n  align-items: center;\n}\n\n.dismiss-icon {\n  margin-right: var(--ic-space-xxxs);\n  margin-left: -0.375rem;\n  padding: 0.375rem;\n  border: none;\n  border-radius: 50%;\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dismiss-icon:hover {\n  cursor: pointer;\n}\n\n@media (max-width: 628px) {\n  .alert-content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .alert-message {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .alert-title {\n    white-space: normal;\n  }\n\n  .alert-action-container {\n    margin-bottom: var(--ic-space-xs);\n  }\n}\n\n@media (forced-colors: active) {\n  .container {\n    border: var(--ic-hc-border);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  State,\n  Listen,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum, IcStatusVariants } from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/**\n * @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n */\n@Component({\n  tag: \"ic-alert\",\n  styleUrl: \"ic-alert.css\",\n  shadow: true,\n})\nexport class Alert {\n  @Element() el: HTMLIcAlertElement;\n\n  @State() alertTitleWrap: boolean = false;\n  @State() visible: boolean = true;\n\n  /**\n   * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n   */\n  @Prop() announced?: boolean = true;\n\n  /**\n   * If `true`, the alert will have a close icon at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n\n  /**\n   * The optional title to display at the start of the alert.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the alert.\n   */\n  @Prop() message?: string;\n\n  /**\n   * If `true`, the title and message will appear inline instead of above and below.\n   */\n  @Prop() titleAbove?: boolean = false;\n\n  /**\n   * The variant of the alert which will be rendered.\n   */\n  @Prop() variant?: IcStatusVariants = \"neutral\";\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the alert.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  componentDidLoad(): void {\n    this.alertTitleShouldWrap();\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private alertTitleShouldWrap() {\n    const titleHeight =\n      this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n    if (titleHeight > 24) this.alertTitleWrap = true;\n  }\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      titleAbove,\n      dismissible,\n      announced,\n      visible,\n    } = this;\n\n    return (\n      visible && (\n        <Host\n          role={announced && \"alert\"}\n          class={{\n            [IcThemeForegroundEnum.Dark]: true,\n          }}\n        >\n          <div\n            class={{\n              [\"container\"]: true,\n              [`container-${variant}`]: true,\n            }}\n          >\n            <div class=\"alert-icon-container\">\n              <div\n                class={{\n                  [\"divider\"]: true,\n                  [`divider-${variant}`]: true,\n                }}\n              ></div>\n              <span\n                class={{\n                  [\"alert-icon\"]: true,\n                  [\"svg-container\"]: true,\n                  [`icon-${variant}`]: true,\n                }}\n                innerHTML={VARIANT_ICONS[variant].icon}\n              ></span>\n            </div>\n            <div class=\"alert-content\">\n              <div\n                class={{\n                  [\"alert-message\"]: true,\n                  [\"alert-message-title-above\"]:\n                    titleAbove || this.alertTitleWrap,\n                }}\n              >\n                {heading && (\n                  <ic-typography\n                    class={{\n                      [\"alert-title\"]: true,\n                      [\"alert-title-above\"]: titleAbove || this.alertTitleWrap,\n                    }}\n                    variant=\"subtitle-large\"\n                  >\n                    <p>{heading}</p>\n                  </ic-typography>\n                )}\n                <slot name=\"message\">\n                  <ic-typography variant=\"body\">{message}</ic-typography>\n                </slot>\n              </div>\n              {isSlotUsed(this.el, \"action\") && (\n                <div class=\"alert-action-container\">\n                  <slot name=\"action\" />\n                </div>\n              )}\n            </div>\n            <div class=\"dismiss-icon-container\">\n              {dismissible && (\n                <ic-button\n                  class={{\n                    [\"svg-container\"]: true,\n                    [\"dismiss-icon\"]: true,\n                  }}\n                  innerHTML={closeIcon}\n                  onClick={this.dismissAction}\n                  variant=\"icon\"\n                  appearance={IcThemeForegroundEnum.Dark}\n                  title=\"dismiss\"\n                ></ic-button>\n              )}\n            </div>\n          </div>\n        </Host>\n      )\n    );\n  }\n}\n"],"mappings":"mLAAA,MAAMA,EAAa,ovJ,MCyBNC,EAAK,M,+FAuDRC,KAAAC,cAAgB,KACtBD,KAAKE,QAAQC,OACbH,KAAKI,UAAUD,MAAM,E,oBAtDY,M,aACP,K,eAKE,K,iBAKE,M,aAKL,G,uCAUI,M,aAKM,S,CAYrCE,mBACEL,KAAKM,sB,CAIPC,cACEP,KAAKQ,SAAWR,KAAKQ,O,CAQfF,uB,MACN,MAAMG,GACJC,EAAAV,KAAKW,GAAGC,WAAWC,cAAc,mBAAe,MAAAH,SAAA,SAAAA,EAAEI,aACpD,GAAIL,EAAc,GAAIT,KAAKe,eAAiB,I,CAG9CC,SACE,MAAMC,QACJA,EAAOC,QACPA,EAAOC,QACPA,EAAOC,WACPA,EAAUC,YACVA,EAAWC,UACXA,EAASd,QACTA,GACER,KAEJ,OACEQ,GACEe,EAACC,EAAI,CACHC,KAAMH,GAAa,QACnBI,MAAO,CACL,CAACC,EAAsBC,MAAO,OAGhCL,EAAA,OACEG,MAAO,CACL,CAAC,aAAc,KACf,CAAC,aAAaT,KAAY,OAG5BM,EAAA,OAAKG,MAAM,wBACTH,EAAA,OACEG,MAAO,CACL,CAAC,WAAY,KACb,CAAC,WAAWT,KAAY,QAG5BM,EAAA,QACEG,MAAO,CACL,CAAC,cAAe,KAChB,CAAC,iBAAkB,KACnB,CAAC,QAAQT,KAAY,MAEvBY,UAAWC,EAAcb,GAASc,QAGtCR,EAAA,OAAKG,MAAM,iBACTH,EAAA,OACEG,MAAO,CACL,CAAC,iBAAkB,KACnB,CAAC,6BACCN,GAAcpB,KAAKe,iBAGtBG,GACCK,EAAA,iBACEG,MAAO,CACL,CAAC,eAAgB,KACjB,CAAC,qBAAsBN,GAAcpB,KAAKe,gBAE5CE,QAAQ,kBAERM,EAAA,SAAIL,IAGRK,EAAA,QAAMS,KAAK,WACTT,EAAA,iBAAeN,QAAQ,QAAQE,KAGlCc,EAAWjC,KAAKW,GAAI,WACnBY,EAAA,OAAKG,MAAM,0BACTH,EAAA,QAAMS,KAAK,aAIjBT,EAAA,OAAKG,MAAM,0BACRL,GACCE,EAAA,aACEG,MAAO,CACL,CAAC,iBAAkB,KACnB,CAAC,gBAAiB,MAEpBG,UAAWK,EACXC,QAASnC,KAAKC,cACdgB,QAAQ,OACRmB,WAAYT,EAAsBC,KAClCS,MAAM,c"}

package/dist/core/p-96bcd466.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icSkeletonCss","Skeleton","componentWillLoad","this","el","style","height","width","default","heightOnly","widthOnly","render","variant","light","hasChild","firstElementChild","defaultSkeletonStyle","heightSetStyle","widthSetStyle","h","Host","class"],"sources":["./src/components/ic-skeleton/ic-skeleton.css?tag=ic-skeleton&encapsulation=shadow","./src/components/ic-skeleton/ic-skeleton.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n@keyframes loading {\n  0% {\n    background-color: var(--ic-architectural-100);\n  }\n\n  50% {\n    background-color: var(--ic-architectural-200);\n  }\n\n  100% {\n    background-color: var(--ic-architectural-100);\n  }\n}\n\n@keyframes loading-light {\n  0% {\n    background-color: var(--ic-architectural-600);\n  }\n\n  50% {\n    background-color: var(--ic-architectural-400);\n  }\n\n  100% {\n    background-color: var(--ic-architectural-600);\n  }\n}\n\n:host {\n  display: inline-block;\n}\n\n:host(.skeleton) {\n  background-color: var(--ic-architectural-100);\n  border-radius: var(--ic-border-radius);\n  animation: loading 1200ms infinite;\n  display: inline-block;\n}\n\n:host(.skeleton) > * {\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.circle) {\n  border-radius: 50%;\n}\n\n:host(.light) {\n  background-color: var(--ic-architectural-600);\n  animation: loading-light 1200ms infinite;\n}\n\n@media (forced-colors: active) {\n  :host(.skeleton) {\n    -ms-high-contrast-adjust: none;\n    forced-color-adjust: none;\n    background: currentcolor;\n  }\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\n\n@Component({\n  tag: \"ic-skeleton\",\n  styleUrl: \"ic-skeleton.css\",\n  shadow: true,\n})\nexport class Skeleton {\n  @Element() el: HTMLIcSkeletonElement;\n\n  @State() default: boolean;\n  @State() hasChild: boolean;\n  @State() heightOnly: boolean;\n  @State() widthOnly: boolean;\n\n  /**\n   * If `true`, the skeleton will be set to the light variant.\n   */\n  @Prop() light?: boolean = false;\n\n  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n  componentWillLoad(): void {\n    if (this.el.style.height === \"\" && this.el.style.width === \"\") {\n      this.default = true;\n    } else if (!(this.el.style.height === \"\") && this.el.style.width === \"\") {\n      this.heightOnly = true;\n    } else if (!(this.el.style.width === \"\") && this.el.style.height === \"\") {\n      this.widthOnly = true;\n    }\n  }\n\n  render() {\n    const { variant, light } = this;\n\n    this.hasChild = !!this.el.firstElementChild;\n\n    const defaultSkeletonStyle = {\n      height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n      width: variant == \"circle\" ? \"25px\" : \"260px\",\n    };\n\n    const heightSetStyle = {\n      height: this.el.style.height,\n      width: variant == \"circle\" ? \"25px\" : \"260px\",\n    };\n\n    const widthSetStyle = {\n      height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n      width: this.el.style.width,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"skeleton\"]: true,\n          [\"circle\"]: variant == \"circle\",\n          [\"light\"]: light,\n        }}\n        style={\n          (!this.hasChild && this.default && defaultSkeletonStyle) ||\n          (this.heightOnly && heightSetStyle) ||\n          (this.widthOnly && widthSetStyle)\n        }\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,iqG,MCQTC,EAAQ,M,sIAWO,M,aAKa,W,CAEvCC,oBACE,GAAIC,KAAKC,GAAGC,MAAMC,SAAW,IAAMH,KAAKC,GAAGC,MAAME,QAAU,GAAI,CAC7DJ,KAAKK,QAAU,I,MACV,KAAML,KAAKC,GAAGC,MAAMC,SAAW,KAAOH,KAAKC,GAAGC,MAAME,QAAU,GAAI,CACvEJ,KAAKM,WAAa,I,MACb,KAAMN,KAAKC,GAAGC,MAAME,QAAU,KAAOJ,KAAKC,GAAGC,MAAMC,SAAW,GAAI,CACvEH,KAAKO,UAAY,I,EAIrBC,SACE,MAAMC,QAAEA,EAAOC,MAAEA,GAAUV,KAE3BA,KAAKW,WAAaX,KAAKC,GAAGW,kBAE1B,MAAMC,EAAuB,CAC3BV,OAAQM,GAAW,OAAS,MAAQA,GAAW,SAAW,OAAS,OACnEL,MAAOK,GAAW,SAAW,OAAS,SAGxC,MAAMK,EAAiB,CACrBX,OAAQH,KAAKC,GAAGC,MAAMC,OACtBC,MAAOK,GAAW,SAAW,OAAS,SAGxC,MAAMM,EAAgB,CACpBZ,OAAQM,GAAW,OAAS,MAAQA,GAAW,SAAW,OAAS,OACnEL,MAAOJ,KAAKC,GAAGC,MAAME,OAGvB,OACEY,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,YAAa,KACd,CAAC,UAAWT,GAAW,SACvB,CAAC,SAAUC,GAEbR,OACIF,KAAKW,UAAYX,KAAKK,SAAWQ,GAClCb,KAAKM,YAAcQ,GACnBd,KAAKO,WAAaQ,EAAc,gBAErB,QAEdC,EAAA,a"}

package/dist/core/p-9e551fe9.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icInputLabelCss","InputLabel","componentDidLoad","onComponentRequiredPropUndefined","prop","this","label","propName","render","disabled","readonly","required","helperText","error","dark","labelText","labelContent","h","htmlFor","for","id","getInputHelperTextID","Host","class","variant","icInputValidationCss","icon","IcInformationStatus","Warning","warningIcon","Error","errorIcon","Success","successIcon","InputValidation","message","displayIcon","status","getInputValidationTextID","fullWidth","innerHTML","ariaLiveMode","name"],"sources":["./src/components/ic-input-label/ic-input-label.css?tag=ic-input-label","./src/components/ic-input-label/ic-input-label.tsx","./src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","./src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-label {\n  margin-bottom: var(--ic-space-xs);\n}\n\nic-input-label.with-helper {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\nic-input-label.readonly {\n  color: var(--ic-color-tertiary-text);\n}\n\nic-input-label .helpertext {\n  margin-top: var(--ic-space-xxxs);\n}\n\nic-input-label .helpertext-normal {\n  color: var(--ic-color-secondary-text);\n}\n\nic-input-label .helpertext-readonly {\n  color: var(--ic-color-tertiary-text);\n}\n\nic-input-label .readonly-label {\n  color: var(--ic-color-secondary-text);\n}\n\nic-input-label .error-label {\n  color: var(--ic-status-error);\n}\n\nic-input-label .dark {\n  color: var(--ic-architectural-white);\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  /**\n   * If `true`, the dark variant of the input label will be displayed.\n   */\n  @Prop() dark?: boolean = false;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * If `true`, the input label will display with error styling.\n   */\n  @Prop() error?: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  render() {\n    const { disabled, readonly, label, required, helperText, error, dark } =\n      this;\n    const labelText = required ? label + \" *\" : label;\n    const labelContent = readonly ? (\n      `${labelText}`\n    ) : (\n      <label htmlFor={this.for}>{labelText}</label>\n    );\n\n    const id = getInputHelperTextID(this.for);\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: disabled,\n          [\"readonly\"]: readonly,\n          [\"with-helper\"]: helperText !== \"\",\n        }}\n      >\n        <ic-typography\n          variant=\"label\"\n          class={{\n            [\"readonly-label\"]: readonly,\n            [\"error-label\"]: error && !(readonly || disabled),\n            [\"dark\"]: dark,\n          }}\n        >\n          {labelContent}\n        </ic-typography>\n\n        {helperText !== \"\" && (\n          <ic-typography\n            variant=\"caption\"\n            class={{\n              [\"helpertext\"]: true,\n              [\"helpertext-normal\"]: !disabled && !readonly,\n              [\"helpertext-readonly\"]: readonly,\n            }}\n          >\n            <span id={id}>{helperText}</span>\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n","ic-input-validation {\n  width: var(--input-width, 20rem);\n  margin-top: var(--ic-space-xs);\n  display: flex;\n}\n\nic-input-validation.fullwidth {\n  width: 100%;\n}\n\nic-input-validation span.status-icon {\n  padding-right: var(--ic-space-xxs);\n}\n\nic-input-validation span.status-icon > svg {\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\nic-input-validation span.icon-success > svg {\n  fill: var(--ic-status-success);\n}\n\nic-input-validation span.icon-error > svg {\n  fill: var(--ic-status-error);\n}\n\nic-input-validation span.icon-warning > svg {\n  fill: var(--ic-status-warning-mid);\n}\n\nic-input-validation .statustext {\n  flex-grow: 1;\n}\n","import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The validation message to display.\n   */\n  @Prop() message!: string;\n\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n  }\n\n  render() {\n    const displayIcon = this.status !== \"\" ? icon[this.status] : \"\";\n    const id = getInputValidationTextID(this.for);\n    return (\n      <Host\n        class={{\n          [this.status]: this.status !== \"\",\n          [\"fullwidth\"]: this.fullWidth,\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              [\"status-icon\"]: true,\n              [`icon-${this.status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span aria-live={this.ariaLiveMode} id={id}>\n            {this.message}\n          </span>\n        </ic-typography>\n\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oKAAA,MAAMA,EAAkB,6iB,MCWXC,EAAU,M,mCAII,M,cAKG,M,WAKF,M,mCAUG,G,mCAUD,M,cAKA,K,CAE5BC,mBACEC,EACE,CAAC,CAAEC,KAAMC,KAAKC,MAAOC,SAAU,UAC/B,c,CAIJC,SACE,MAAMC,SAAEA,EAAQC,SAAEA,EAAQJ,MAAEA,EAAKK,SAAEA,EAAQC,WAAEA,EAAUC,MAAEA,EAAKC,KAAEA,GAC9DT,KACF,MAAMU,EAAYJ,EAAWL,EAAQ,KAAOA,EAC5C,MAAMU,EAAeN,EAAQ,GACxBK,IAEHE,EAAA,SAAOC,QAASb,KAAKc,KAAMJ,GAG7B,MAAMK,EAAKC,EAAqBhB,KAAKc,KAErC,OACEF,EAACK,EAAI,CACHC,MAAO,CACL,CAAC,YAAad,EACd,CAAC,YAAaC,EACd,CAAC,eAAgBE,IAAe,KAGlCK,EAAA,iBACEO,QAAQ,QACRD,MAAO,CACL,CAAC,kBAAmBb,EACpB,CAAC,eAAgBG,KAAWH,GAAYD,GACxC,CAAC,QAASK,IAGXE,GAGFJ,IAAe,IACdK,EAAA,iBACEO,QAAQ,UACRD,MAAO,CACL,CAAC,cAAe,KAChB,CAAC,sBAAuBd,IAAaC,EACrC,CAAC,uBAAwBA,IAG3BO,EAAA,QAAMG,GAAIA,GAAKR,I,aCnG3B,MAAMa,EAAuB,4hBCgB7B,MAAMC,EAAO,CACX,CAACC,EAAoBC,SAAUC,EAC/B,CAACF,EAAoBG,OAAQC,EAC7B,CAACJ,EAAoBK,SAAUC,G,MAUpBC,EAAe,M,2CAMqB,S,kCAUlB,M,mCAUgB,E,CAE7ChC,mBACEC,EACE,CAAC,CAAEC,KAAMC,KAAK8B,QAAS5B,SAAU,YACjC,mB,CAIJC,SACE,MAAM4B,EAAc/B,KAAKgC,SAAW,GAAKX,EAAKrB,KAAKgC,QAAU,GAC7D,MAAMjB,EAAKkB,EAAyBjC,KAAKc,KACzC,OACEF,EAACK,EAAI,CACHC,MAAO,CACL,CAAClB,KAAKgC,QAAShC,KAAKgC,SAAW,GAC/B,CAAC,aAAchC,KAAKkC,YAGrBH,IAAgB,IACfnB,EAAA,QACEM,MAAO,CACL,CAAC,eAAgB,KACjB,CAAC,QAAQlB,KAAKgC,UAAW,MAE3BG,UAAWJ,IAIfnB,EAAA,iBAAeO,QAAQ,UAAUD,MAAM,cACrCN,EAAA,oBAAiBZ,KAAKoC,aAAcrB,GAAIA,GACrCf,KAAK8B,UAIVlB,EAAA,QAAMyB,KAAK,iC"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["icDataEntityCss","DataEntity","render","heading","small","this","children","el","i","length","setAttribute","h","Host","class","id","name","variant"],"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"],"sourcesContent":["@import \"../../global/normalize.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: var(--ic-space-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"],"mappings":"yDAAA,MAAMA,EAAkB,8wF,MCOXC,EAAU,M,2DAWI,K,CAEzBC,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,O,EAItC,OACEC,EAACC,EAAI,CAACC,MAAO,CAAE,CAAC,SAAUT,IACxBO,EAAA,OAAKE,MAAM,UAAUC,GAAG,uBACtBH,EAAA,QAAMI,KAAK,WACTJ,EAAA,iBAAeK,QAAQ,MAAMb,KAGjCQ,EAAA,OAAKE,MAAM,YACXF,EAAA,wBAAoB,sBAAsBE,MAAM,QAC9CF,EAAA,c"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["icStepperCss","Stepper","this","resizeObserver","getChildren","steps","Array","from","el","querySelectorAll","stepsWithStepTitles","checkStepTitles","length","variantOverride","variant","noOfResizes","console","error","setStepTypes","stepTypes","i","push","setStepperWidth","alignedFullWidth","aligned","lastStep","style","maxWidth","stepperWidth","offsetWidth","pxToRem","lastStepWidth","initialiseStepStates","forEach","step","index","stepNum","lastStepNum","stepType","current","stepTitleArea","shadowRoot","querySelector","autoSetStepTitles","stepTitle","setAttribute","undefined","removeAttribute","classList","remove","add","contains","nextStepTitle","progress","hideStepInfo","compactStepStyling","width","minWidth","connectorWidth","stepConnect","overrideVariant","minDefaultStepperWidth","clientWidth","resizeObserverCallback","runResizeObserver","ResizeObserver","observe","document","getBoundingClientRect","disconnectedCallback","disconnect","componentWillLoad","componentDidLoad","checkResizeObserver","render","h","Host","class"],"sources":["./src/components/ic-stepper/ic-stepper.css?tag=ic-stepper&encapsulation=shadow","./src/components/ic-stepper/ic-stepper.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n}\n\n.step-item-list {\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n:host(.default:not(.aligned-left)) .step-item-list {\n  flex: auto;\n}\n\n:host(.compact) ul ::slotted(ic-step) {\n  display: none;\n}\n\n:host(.compact) ul ::slotted(ic-step.show) {\n  display: flex;\n}\n\n:host(.compact) ul ::slotted(ic-step.hide) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport { IcStepTypes, IcStepVariants } from \"../ic-step/ic-step.types\";\n\n@Component({\n  tag: \"ic-stepper\",\n  styleUrl: \"ic-stepper.css\",\n  shadow: true,\n})\nexport class Stepper {\n  private resizeObserver: ResizeObserver = null;\n  private steps: HTMLIcStepElement[];\n  private stepsWithStepTitles: HTMLIcStepElement[];\n\n  @Element() el: HTMLIcStepperElement;\n\n  @State() alignedFullWidth: boolean = true;\n  @State() autoSetStepTitles: boolean = true;\n  @State() lastStepWidth: number = 0;\n  @State() noOfResizes?: number = 0;\n  @State() stepperWidth: number = document\n    .querySelector(\"ic-stepper\")\n    .getBoundingClientRect().width;\n  @State() stepTypes: IcStepTypes[] = [];\n  @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n  /**\n   * The alignment of the default stepper within its container.\n   */\n  @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n  /**\n   * The length of the connnector between each step in pixels. Minimum length is 100px.\n   */\n  @Prop() connectorWidth?: number = 100;\n\n  /**\n   * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n   */\n  @Prop() hideStepInfo?: boolean = false;\n\n  /**\n   * The variant of the stepper.\n   */\n  @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.setStepTypes();\n    if (this.variant === \"compact\") {\n      this.variantOverride = false;\n    }\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  // Get all steps currently within this stepper\n  private getChildren = (): void => {\n    this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n    this.stepsWithStepTitles = Array.from(\n      this.el.querySelectorAll(\"ic-step[step-title]\")\n    );\n  };\n\n  // Inform the user that stepTitles are required on all steps in a compact stepper\n  private checkStepTitles = (): void => {\n    if (\n      this.stepsWithStepTitles.length < this.steps.length &&\n      this.variantOverride &&\n      this.variant === \"compact\"\n    ) {\n      this.noOfResizes = this.noOfResizes + 1;\n      if (this.noOfResizes === 1) {\n        console.error(\n          `The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`\n        );\n      }\n    }\n  };\n\n  private setStepTypes = (): void => {\n    this.getChildren();\n    this.stepTypes = [];\n    for (let i = 0; i < this.steps.length; i++) {\n      this.stepTypes.push(\"active\");\n    }\n  };\n\n  private setStepperWidth = (): void => {\n    this.alignedFullWidth =\n      this.variant === \"default\" && this.aligned === \"full-width\";\n\n    const lastStep = this.steps[this.steps.length - 1];\n    lastStep.style.maxWidth = \"none\";\n\n    if (this.alignedFullWidth) {\n      this.stepperWidth = this.el.offsetWidth;\n      lastStep.style.maxWidth = pxToRem(\n        `${this.stepperWidth / this.steps.length}px`\n      );\n      this.lastStepWidth = lastStep.offsetWidth;\n    }\n  };\n\n  private initialiseStepStates = (): void => {\n    this.steps.forEach((step, index) => {\n      // Set variant\n      step.variant = this.variant;\n      // Assign stepNum to each step\n      step.stepNum = index + 1;\n      // Assign lastStep to final step\n      step.lastStep = index === this.steps.length - 1;\n      step.lastStepNum = this.steps.length;\n\n      if (step.stepType !== \"current\") {\n        step.current = false;\n        this.stepTypes[index] = step.stepType;\n      } else {\n        step.current = true;\n      }\n\n      const stepTitleArea =\n        step.shadowRoot &&\n        step.shadowRoot.querySelector(\".step > .step-title-area\");\n\n      if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n        if (this.variant === \"compact\") {\n          this.autoSetStepTitles = true;\n          if (this.autoSetStepTitles) {\n            step.stepTitle = \"Step \" + step.stepNum;\n            stepTitleArea &&\n              stepTitleArea\n                .querySelector(\".step-title\")\n                .setAttribute(\"aria-hidden\", \"true\");\n          }\n        }\n        if (this.variant === \"default\") {\n          this.autoSetStepTitles = false;\n          if (!this.autoSetStepTitles) {\n            step.stepTitle = undefined;\n            stepTitleArea &&\n              stepTitleArea\n                .querySelector(\".step-title\")\n                .removeAttribute(\"aria-hidden\");\n          }\n        }\n      }\n\n      if (this.variant === \"compact\") {\n        if (step.current === true || step.stepType === \"current\") {\n          step.classList.remove(\"hide\");\n          step.classList.add(\"show\");\n        } else if (step.classList.contains(\"show\")) {\n          step.classList.remove(\"show\");\n          step.classList.add(\"hide\");\n        }\n\n        if (!step.lastStep) {\n          step.nextStepTitle = this.steps[index + 1].stepTitle;\n          step.progress = (step.stepNum / this.steps.length) * 100;\n        } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n          step.progress = 95;\n        } else {\n          step.progress = 100;\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.remove(\"visually-hidden\");\n        }\n\n        step.compactStepStyling = this.stepTypes[index];\n      }\n\n      if (this.variant === \"default\") {\n        if (!step.lastStep) {\n          if (this.alignedFullWidth) {\n            step.style.width = pxToRem(\n              `${\n                (this.stepperWidth - this.lastStepWidth) /\n                (this.steps.length - 1)\n              }px`\n            );\n            step.style.minWidth = pxToRem(\"148px\");\n          }\n        } else if (step.lastStep) {\n          step.classList.add(\"last-step\");\n          if (this.alignedFullWidth) {\n            step.style.maxWidth = `${this.lastStepWidth}px`;\n          } else {\n            step.style.maxWidth =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth + 48}px`)\n                : pxToRem(\"148px\");\n          }\n        }\n\n        if (this.aligned === \"left\") {\n          step.style.width =\n            this.connectorWidth > 100\n              ? pxToRem(`${this.connectorWidth + 48}px`)\n              : pxToRem(\"148px\");\n          const stepConnect = step.shadowRoot.querySelector(\n            \".step > .step-top > .step-connect\"\n          ) as HTMLElement;\n\n          if (stepConnect) {\n            stepConnect.style.width =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth}px`)\n                : pxToRem(\"100px\");\n          }\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.add(\"visually-hidden\");\n        }\n      }\n    });\n  };\n\n  private overrideVariant = () => {\n    let minDefaultStepperWidth = 148 * this.steps.length;\n\n    if (this.aligned === \"left\" && this.connectorWidth > 100) {\n      minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n    }\n\n    if (this.variantOverride) {\n      if (this.el.clientWidth < minDefaultStepperWidth) {\n        this.variant = \"compact\";\n        this.getChildren();\n      } else {\n        this.variant = \"default\";\n        this.getChildren();\n      }\n    }\n  };\n\n  private resizeObserverCallback = () => {\n    this.getChildren();\n    this.checkStepTitles();\n    this.overrideVariant();\n    this.setStepperWidth();\n    this.initialiseStepStates();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`${this.variant}`]: true,\n          [\"aligned-left\"]:\n            this.variant === \"default\" && this.aligned === \"left\",\n        }}\n      >\n        <ul class=\"step-item-list\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["icCheckboxGroupCss","CheckboxGroup","componentWillLoad","removeDisabledFalse","this","disabled","host","componentDidLoad","Array","from","querySelectorAll","forEach","checkbox","name","groupLabel","label","onComponentRequiredPropUndefined","prop","propName","selectHandler","ev","checkedOptions","filter","checked","icChange","emit","value","map","opt","textFieldValue","_a","querySelector","selectedOption","target","render","describedBy","getInputDescribedByText","helperText","validationStatus","hadValidationStatus","hasValidationStatus","h","Host","class","small","required","hideLabel","id","trim","for","ariaLiveMode","status","message","validationText"],"sources":["./src/components/ic-checkbox-group/ic-checkbox-group.css?tag=ic-checkbox-group&encapsulation=shadow","./src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n}\n\nic-input-label.error {\n  color: var(--ic-status-error);\n}\n\nic-input-label ic-typography {\n  margin-bottom: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-label ic-typography {\n  margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-validation {\n  margin-top: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-validation {\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.small) .checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxxs));\n}\n\n.screen-reader-only-text {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n  tag: \"ic-checkbox-group\",\n  styleUrl: \"ic-checkbox-group.css\",\n  shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n  @Element() host: HTMLIcCheckboxGroupElement;\n\n  /**\n   * If `true`, the checkbox group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The label for the checkbox group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * If `true`, the checkbox group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the small styling will be applied to the checkbox group.\n   */\n  @Prop() small: boolean = false;\n\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.host);\n  }\n\n  componentDidLoad(): void {\n    Array.from(this.host.querySelectorAll(\"ic-checkbox\")).forEach(\n      (checkbox) => {\n        if (!checkbox.name) checkbox.name = this.name;\n        checkbox.groupLabel = this.label;\n      }\n    );\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Checkbox Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler(ev: CustomEvent): void {\n    const checkedOptions = Array.from(\n      this.host.querySelectorAll(\"ic-checkbox\")\n    ).filter((checkbox) => checkbox.checked && !checkbox.disabled);\n    this.icChange.emit({\n      value: checkedOptions.map((opt) => opt.value),\n      checkedOptions: checkedOptions.map((opt) => ({\n        checkbox: opt,\n        textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n      })),\n      selectedOption: ev.target as HTMLIcCheckboxElement,\n    });\n  }\n\n  render() {\n    const describedBy = getInputDescribedByText(\n      this.name,\n      this.helperText !== \"\",\n      this.validationStatus !== \"\"\n    );\n    const hadValidationStatus = hasValidationStatus(\n      this.validationStatus,\n      this.disabled\n    );\n\n    return (\n      <Host class={{ [\"small\"]: this.small }}>\n        {(this.validationStatus === \"error\" ||\n          this.required ||\n          this.hideLabel) && (\n          <span\n            id=\"screenReaderOnlyText\"\n            class=\"screen-reader-only-text\"\n            aria-hidden=\"true\"\n          >\n            {this.label}{\" \"}\n            {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n            {this.required ? \"required\" : null}\n          </span>\n        )}\n        <fieldset\n          id={this.name}\n          aria-labelledby={`${\n            this.validationStatus === \"error\" || this.required || this.hideLabel\n              ? \"screenReaderOnlyText\"\n              : \"\"\n          } ${describedBy}`.trim()}\n          disabled={this.disabled}\n        >\n          {!this.hideLabel && (\n            <legend>\n              <ic-input-label\n                class={{ [`${this.validationStatus}`]: true }}\n                label={this.label}\n                helperText={this.helperText}\n                required={this.required}\n                disabled={this.disabled}\n                for={this.name}\n              ></ic-input-label>\n            </legend>\n          )}\n          <div class=\"checkboxes-container\">\n            <slot></slot>\n          </div>\n        </fieldset>\n        {hadValidationStatus && (\n          <ic-input-validation\n            for={this.name}\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"iJAAA,MAAMA,EAAqB,47F,MCyBdC,EAAa,M,0EAMI,M,gBAKC,G,eAKA,M,uDAeD,M,WAKH,M,sBAK8B,G,oBAKtB,E,CAOjCC,oBACEC,EAAoBC,KAAKC,SAAUD,KAAKE,K,CAG1CC,mBACEC,MAAMC,KAAKL,KAAKE,KAAKI,iBAAiB,gBAAgBC,SACnDC,IACC,IAAKA,EAASC,KAAMD,EAASC,KAAOT,KAAKS,KACzCD,EAASE,WAAaV,KAAKW,KAAK,IAIpCC,EACE,CACE,CAAEC,KAAMb,KAAKW,MAAOG,SAAU,SAC9B,CAAED,KAAMb,KAAKS,KAAMK,SAAU,SAE/B,iB,CAKJC,cAAcC,GACZ,MAAMC,EAAiBb,MAAMC,KAC3BL,KAAKE,KAAKI,iBAAiB,gBAC3BY,QAAQV,GAAaA,EAASW,UAAYX,EAASP,WACrDD,KAAKoB,SAASC,KAAK,CACjBC,MAAOL,EAAeM,KAAKC,GAAQA,EAAIF,QACvCL,eAAgBA,EAAeM,KAAKC,I,MAAQ,OAC1ChB,SAAUgB,EACVC,gBAAgBC,EAAAF,EAAIG,cAAc,oBAAgB,MAAAD,SAAA,SAAAA,EAAEJ,MACrD,IACDM,eAAgBZ,EAAGa,Q,CAIvBC,SACE,MAAMC,EAAcC,EAClBhC,KAAKS,KACLT,KAAKiC,aAAe,GACpBjC,KAAKkC,mBAAqB,IAE5B,MAAMC,EAAsBC,EAC1BpC,KAAKkC,iBACLlC,KAAKC,UAGP,OACEoC,EAACC,EAAI,CAACC,MAAO,CAAE,CAAC,SAAUvC,KAAKwC,SAC3BxC,KAAKkC,mBAAqB,SAC1BlC,KAAKyC,UACLzC,KAAK0C,YACLL,EAAA,QACEM,GAAG,uBACHJ,MAAM,0BAAyB,cACnB,QAEXvC,KAAKW,MAAO,IACZX,KAAKkC,mBAAqB,QAAU,gBAAkB,KAAM,IAC5DlC,KAAKyC,SAAW,WAAa,MAGlCJ,EAAA,YACEM,GAAI3C,KAAKS,KAAI,kBACI,GACfT,KAAKkC,mBAAqB,SAAWlC,KAAKyC,UAAYzC,KAAK0C,UACvD,uBACA,MACFX,IAAca,OAClB3C,SAAUD,KAAKC,WAEbD,KAAK0C,WACLL,EAAA,cACEA,EAAA,kBACEE,MAAO,CAAE,CAAC,GAAGvC,KAAKkC,oBAAqB,MACvCvB,MAAOX,KAAKW,MACZsB,WAAYjC,KAAKiC,WACjBQ,SAAUzC,KAAKyC,SACfxC,SAAUD,KAAKC,SACf4C,IAAK7C,KAAKS,QAIhB4B,EAAA,OAAKE,MAAM,wBACTF,EAAA,eAGHF,GACCE,EAAA,uBACEQ,IAAK7C,KAAKS,KACVqC,aAAa,SACbC,OAAQ/C,KAAKkC,iBACbc,QAAShD,KAAKiD,iB"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["icHeroCss","Hero","getThemeForegroundColor","this","rightContent","secondaryHeading","undefined","componentWillLoad","slotHasContent","el","componentDidLoad","onComponentRequiredPropUndefined","prop","heading","propName","componentWillRender","themeChangeHandler","ev","theme","detail","foregroundColor","mode","doScroll","disableBackgroundParallax","scrolltotop","document","scrollingElement","scrollTop","factor","y","scrollFactor","render","aligned","small","subheading","secondarySubheading","backgroundImage","style","h","Host","class","IcThemeForegroundEnum","Dark","fullHeight","leftContentFullWidth","name","variant"],"sources":["./src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","./src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  background-color: var(--ic-theme-tertiary);\n  color: var(--ic-theme-text);\n\n  --hero-heading-bottom-margin: var(--ic-space-md);\n}\n\n:host(.dark) {\n  background-color: var(--ic-theme-secondary);\n}\n\n:host(.has-background-image) {\n  background-repeat: no-repeat;\n  background-position: right -6.25rem;\n  background-size: auto calc(100% + 6.25rem);\n  box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n  :host(.has-background-image) {\n    background-position: right -6.25rem !important;\n  }\n}\n\nic-typography.heading-bottom-spacing {\n  margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.left-container {\n  padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n  flex-basis: 50%;\n}\n\n.left-container-full-width {\n  width: 100%;\n}\n\n.right-container {\n  flex-basis: 50%;\n}\n\n.interaction-container {\n  display: flex;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-lg);\n  flex-wrap: wrap;\n}\n\n.secondary-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-left: var(--ic-space-xxxs) solid var(--ic-theme-text);\n}\n\n.secondary-subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n  justify-content: flex-start;\n  text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n  justify-content: center;\n  text-align: center;\n}\n\n@media (min-width: 992px) {\n  .left-container-full-width {\n    width: 66.6%;\n  }\n}\n\n@media (min-width: 1044px) {\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  .left-container:not(.left-container-full-width) {\n    flex-basis: 66.6%;\n  }\n\n  .left-container {\n    min-height: 9rem;\n  }\n\n  .right-container {\n    flex-basis: 33.3%;\n    margin-left: 3.125rem;\n  }\n\n  .secondary-container {\n    min-height: 9rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 3.938rem;\n  }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 15rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 5.922rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 15rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 2.125rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 17.5rem;\n  }\n\n  :host(.secondary-heading) .section-container,\n  :host(.small) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n\n  .right-container {\n    margin-bottom: 2.5rem;\n  }\n}\n\n@media (max-width: 480px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 12rem;\n  }\n\n  :host,\n  .right-container {\n    margin-bottom: var(--ic-space-md);\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 16.5rem;\n  }\n\n  :host(.secondary-heading) .section-container,\n  :host(.small) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() rightContent: boolean = false;\n  // set by above state\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n  @State() scrollFactor: string = \"right -100px\";\n\n  /**\n   * The alignment of the hero.\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The optional background image.\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * The alignment of the hero content.\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * If `true`, the background image (if set) will not scroll using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The heading of the hero.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The optional secondary heading, replaced by slotted right content.\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * The optional secondary subheading, replaced by slotted right content.\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * If `true`, the small styling will be applied to the hero.\n   */\n  @Prop() small: boolean = false;\n\n  /**\n   * The description for the hero.\n   */\n  @Prop() subheading?: string;\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  render() {\n    const {\n      aligned,\n      small,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (backgroundImage !== undefined) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n          [\"small\"]: small,\n          [\"secondary-heading\"]: !!secondaryHeading,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={small ? \"h2\" : \"h1\"}\n                  class={{ [\"heading-bottom-spacing\"]: !small }}\n                >\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(secondaryHeading !== undefined || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+IAAA,MAAMA,EAAY,mzM,MCkCLC,EAAI,M,8CAG+BC,I,kBACb,M,2BAG9BC,KAAKC,cAAgBD,KAAKE,mBAAqBC,U,kBAClB,e,aAKD,O,mDAUmB,O,+BAKJ,M,qGAoBrB,M,0BAOzBC,oBACEJ,KAAKC,aAAeI,EAAeL,KAAKM,GAAI,Y,CAG9CC,mBACEC,EACE,CAAC,CAAEC,KAAMT,KAAKU,QAASC,SAAU,YACjC,O,CAIJC,sBACEZ,KAAKC,aAAeI,EAAeL,KAAKM,GAAI,Y,CAI9CO,mBAAmBC,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BhB,KAAKiB,gBAAkBF,EAAMG,I,CAI/BC,WACE,GAAInB,KAAKoB,0BAA2B,CAClC,M,CAGF,MAAMC,EAAcC,SAASC,iBAAiBC,UAC9C,MAAMC,EAAS,GACf,MAAMC,GAAK,IAAML,EAAcI,EAC/BzB,KAAK2B,aAAe,SAAWD,EAAI,I,CAGrCE,SACE,MAAMC,QACJA,EAAOC,MACPA,EAAKpB,QACLA,EAAOqB,WACPA,EAAU7B,iBACVA,EAAgB8B,oBAChBA,EAAmBf,gBACnBA,EAAegB,gBACfA,EAAeN,aACfA,GACE3B,KAEJ,IAAIkC,EAAQ,GAEZ,GAAID,IAAoB9B,UAAW,CACjC+B,EAAQ,CACN,mBAAoB,OAASD,EAAkB,IAC/C,sBAAuBN,E,CAI3B,OACEQ,EAACC,EAAI,CACHC,MAAO,CACL,CAACC,EAAsBC,MACrBtB,IAAoBqB,EAAsBC,KAC5C,CAAC,wBAAyBN,IAAoB9B,UAC9C,CAAC,SAAU2B,EACX,CAAC,uBAAwB5B,GAE3BgC,MAAOA,GAEPC,EAAA,wBACEN,QAASA,EACTW,WAAU,KACVH,MAAM,qBAENF,EAAA,OACEE,MAAO,CACL,CAAC,kBAAmB,KACpB,CAAC,6BAA8BrC,KAAKyC,uBAGtCN,EAAA,OAAKE,MAAM,WACTF,EAAA,QAAMO,KAAK,WACTP,EAAA,iBACEQ,QAASb,EAAQ,KAAO,KACxBO,MAAO,CAAE,CAAC,2BAA4BP,IAErCpB,KAIPyB,EAAA,OAAKE,MAAM,cACTF,EAAA,QAAMO,KAAK,cACTP,EAAA,iBAAeQ,QAAQ,QAAQZ,KAGnCI,EAAA,OAAKE,MAAM,yBACTF,EAAA,QAAMO,KAAK,mBAGbxC,IAAqBC,WAAaH,KAAKC,eACvCkC,EAAA,OAAKE,MAAM,mBACTF,EAAA,QAAMO,KAAK,aACRxC,GACCiC,EAAA,OAAKE,MAAM,uBACTF,EAAA,OAAKE,MAAM,qBACTF,EAAA,iBAAeQ,QAAQ,MACpBzC,IAGLiC,EAAA,OAAKE,MAAM,wBACTF,EAAA,iBAAeQ,QAAQ,kBACpBX,Q"}

package/dist/core/p-b6c538ea.entry.js

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["icBreadcrumbCss","Breadcrumb","this","renderDefaultBreadcrumb","current","pageTitle","describedById","href","hasPageTitle","undefined","h","class","isSlotUsed","el","name","showBackIcon","innerHTML","backIcon","setSlottedCurrentPageClass","icLink","querySelector","currentPage","classList","remove","hasCurrentPageClass","contains","add","componentWillRender","async","shadowRoot","focus","render","toLowerCase","replace","hasHref","Host","back","role","chevronIcon","id"],"sources":["./src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","./src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"sourcesContent":[":host {\n  display: block;\n  margin: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n:host .breadcrumb {\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  gap: var(--ic-space-xs);\n  min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n:host .chevron svg {\n  color: var(--ic-architectural-400);\n}\n\n:host(:first-child) .chevron {\n  display: none;\n}\n\n.back-icon svg {\n  color: var(--ic-hyperlink);\n}\n\n:host(.back) {\n  display: flex;\n  align-items: center;\n}\n\n:host(.back) .chevron {\n  display: none;\n}\n\nic-link {\n  --breadcrumb-link-display: inline-flex;\n  --breadcrumb-link-align-items: center;\n  --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container {\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) {\n  margin-right: var(--ic-space-xs) !important;\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb) {\n  border: none;\n  background-color: transparent;\n  color: var(--ic-hyperlink);\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n  cursor: pointer;\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n  outline: var(--ic-hc-focus-outline);\n  border-bottom: 0.25rem solid !important;\n  margin-bottom: -0.25rem !important;\n  text-decoration: none;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n  display: none;\n}\n\n@media (forced-colors: active) {\n  .back-icon svg {\n    color: currentcolor;\n  }\n}\n\n@supports (text-decoration-thickness: 25%) {\n  ic-link {\n    --breadcrumb-link-display: flex;\n  }\n\n  :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n  :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n    text-decoration-line: underline;\n    text-decoration-thickness: 25%;\n    text-underline-offset: 25%;\n    border-bottom: 0 !important;\n    margin-bottom: 0 !important;\n  }\n}\n","import { Component, Host, Prop, h, Element, Method } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-breadcrumb\",\n  styleUrl: \"ic-breadcrumb.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Breadcrumb {\n  @Element() el: HTMLIcBreadcrumbElement;\n\n  /**\n   * @slot icon - Content will be rendered to the left of the breadcrumb page title.\n   */\n\n  /**\n   * If `true`, aria-current will be set on the breadcrumb.\n   */\n  @Prop() current?: boolean = false;\n\n  /**\n   * The URL that the breadcrumb link points to.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The title of the breadcrumb.\n   */\n  @Prop() pageTitle!: string;\n\n  /**\n   * @internal If `true`, back icon will be displayed.\n   */\n  @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n  componentWillRender(): void {\n    this.setSlottedCurrentPageClass();\n  }\n\n  /**\n   * Sets focus on the breadcrumb.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"ic-link\")) {\n      this.el.shadowRoot.querySelector(\"ic-link\").focus();\n    }\n  }\n\n  private renderDefaultBreadcrumb = (\n    current: boolean,\n    pageTitle: string,\n    describedById: string,\n    href: string\n  ): IcBreadcrumbDefault => {\n    const hasPageTitle =\n      pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n\n    if (current && hasPageTitle) {\n      return (\n        <span\n          class={{\n            \"current-page-container\": current,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n          {pageTitle}\n        </span>\n      );\n    }\n\n    return (\n      <ic-link\n        href={href}\n        class=\"breadcrumb-link\"\n        aria-describedby={this.showBackIcon && describedById && describedById}\n      >\n        {this.showBackIcon && (\n          <div class=\"back-icon\" innerHTML={backIcon}></div>\n        )}\n        {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n        {pageTitle}\n      </ic-link>\n    );\n  };\n\n  private setSlottedCurrentPageClass = () => {\n    const icLink = this.el.querySelector(\"ic-link\");\n    const currentPage = \"current-page\";\n    if (icLink) {\n      icLink.classList.remove(currentPage);\n      if (this.current) {\n        const hasCurrentPageClass = icLink.classList.contains(currentPage);\n        if (!hasCurrentPageClass) {\n          icLink.classList.add(\"breadcrumb-link\", currentPage);\n        }\n      }\n    }\n  };\n\n  render() {\n    const { current, href, pageTitle } = this;\n    const describedById = `${\n      pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n    }-describedby`;\n\n    const hasPageTitle =\n      pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n    const hasHref = href !== null && href !== undefined && href !== \"\";\n\n    return (\n      <Host\n        class={{\n          back: this.showBackIcon,\n        }}\n        aria-current={current && \"page\"}\n        role=\"listitem\"\n      >\n        <div class=\"breadcrumb\">\n          <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n          {this.showBackIcon && describedById && (\n            <span\n              id={describedById}\n              class=\"hide\"\n            >{`Back to ${pageTitle}`}</span>\n          )}\n          {hasPageTitle && hasHref ? (\n            this.renderDefaultBreadcrumb(\n              current,\n              pageTitle,\n              describedById,\n              href\n            )\n          ) : (\n            <slot />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yVAAA,MAAMA,EAAkB,i1D,MCcXC,EAAU,M,yBAyCbC,KAAAC,wBAA0B,CAChCC,EACAC,EACAC,EACAC,KAEA,MAAMC,EACJH,IAAc,MAAQA,IAAcI,WAAaJ,IAAc,GAEjE,GAAID,GAAWI,EAAc,CAC3B,OACEE,EAAA,QACEC,MAAO,CACL,yBAA0BP,IAG3BQ,EAAWV,KAAKW,GAAI,SAAWH,EAAA,QAAMI,KAAK,SAC1CT,E,CAKP,OACEK,EAAA,WACEH,KAAMA,EACNI,MAAM,kBAAiB,mBACLT,KAAKa,cAAgBT,GAAiBA,GAEvDJ,KAAKa,cACJL,EAAA,OAAKC,MAAM,YAAYK,UAAWC,IAEnCL,EAAWV,KAAKW,GAAI,SAAWH,EAAA,QAAMI,KAAK,SAC1CT,EACO,EAINH,KAAAgB,2BAA6B,KACnC,MAAMC,EAASjB,KAAKW,GAAGO,cAAc,WACrC,MAAMC,EAAc,eACpB,GAAIF,EAAQ,CACVA,EAAOG,UAAUC,OAAOF,GACxB,GAAInB,KAAKE,QAAS,CAChB,MAAMoB,EAAsBL,EAAOG,UAAUG,SAASJ,GACtD,IAAKG,EAAqB,CACxBL,EAAOG,UAAUI,IAAI,kBAAmBL,E,kBA5EpB,M,+DAeqB,K,CAEjDM,sBACEzB,KAAKgB,4B,CAOPU,iBACE,GAAI1B,KAAKW,GAAGgB,WAAWT,cAAc,WAAY,CAC/ClB,KAAKW,GAAGgB,WAAWT,cAAc,WAAWU,O,EAuDhDC,SACE,MAAM3B,QAAEA,EAAOG,KAAEA,EAAIF,UAAEA,GAAcH,KACrC,MAAMI,EAAgB,GACpBD,GAAaA,EAAU2B,cAAcC,QAAQ,IAAK,mBAGpD,MAAMzB,EACJH,IAAc,MAAQA,IAAcI,WAAaJ,IAAc,GACjE,MAAM6B,EAAU3B,IAAS,MAAQA,IAASE,WAAaF,IAAS,GAEhE,OACEG,EAACyB,EAAI,CACHxB,MAAO,CACLyB,KAAMlC,KAAKa,cACZ,eACaX,GAAW,OACzBiC,KAAK,YAEL3B,EAAA,OAAKC,MAAM,cACTD,EAAA,QAAMM,UAAWsB,EAAa3B,MAAM,UAAS,cAAa,SACzDT,KAAKa,cAAgBT,GACpBI,EAAA,QACE6B,GAAIjC,EACJK,MAAM,QACN,WAAWN,KAEdG,GAAgB0B,EACfhC,KAAKC,wBACHC,EACAC,EACAC,EACAC,GAGFG,EAAA,c"}