@ukic/web-components 3.0.0-alpha.5 → 3.0.0-alpha.6

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

@@ -1 +0,0 @@
-{"version":3,"names":["icToggleButtonCss","ToggleButton","this","handleFocus","ev","stopImmediatePropagation","handleClick","loading","disabled","icToggleChecked","emit","checked","componentWillLoad","removeDisabledFalse","el","parentIconPlacement","parentElement","iconPlacement","iconPosition","componentDidLoad","onComponentRequiredPropUndefined","prop","variant","accessibleLabel","label","propName","handleHostClick","e","render","h","Host","class","theme","size","monochrome","onFocus","toString","onClick","title","fullWidth","isSlotUsed","name","slot"],"sources":["src/components/ic-toggle-button/ic-toggle-button.css?tag=ic-toggle-button&encapsulation=shadow","src/components/ic-toggle-button/ic-toggle-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP */\n:host {\n  --toggle-button-border: var(--ic-toggle-button-unselected-border);\n  --toggle-button-text-colour: var(--ic-toggle-button-unselected-text);\n  --toggle-button-border-hover: var(--ic-toggle-button-unselected-border-hover);\n  --toggle-button-text-colour-hover: var(\n    --ic-toggle-button-unselected-text-hover\n  );\n  --toggle-button-border-active: var(\n    --ic-toggle-button-unselected-border-pressed\n  );\n  --toggle-button-text-colour-active: var(\n    --ic-toggle-button-unselected-text-pressed\n  );\n}\n\n:host(.ic-toggle-button-checked) {\n  --toggle-button-border: var(--ic-toggle-button-selected-border);\n  --toggle-button-text-colour: var(--ic-toggle-button-selected-text);\n  --toggle-button-border-hover: var(--ic-toggle-button-selected-border-hover);\n  --toggle-button-text-colour-hover: var(--ic-toggle-button-selected-text);\n  --toggle-button-border-active: var(\n    --ic-toggle-button-selected-border-pressed\n  );\n  --toggle-button-text-colour-active: var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-monochrome) {\n  --toggle-button-border: var(--ic-toggle-button-unselected-border-monochrome);\n  --toggle-button-text-colour: var(\n    --ic-toggle-button-unselected-text-monochrome\n  );\n  --toggle-button-border-hover: var(\n    --ic-toggle-button-unselected-border-hover-monochrome\n  );\n  --toggle-button-text-colour-hover: var(\n    --ic-toggle-button-unselected-text-monochrome\n  );\n  --toggle-button-border-active: var(\n    --ic-toggle-button-unselected-border-pressed-monochrome\n  );\n  --toggle-button-text-colour-active: var(\n    --ic-toggle-button-unselected-text-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) {\n  --toggle-button-border: var(--ic-toggle-button-selected-border-monochrome);\n  --toggle-button-text-colour: var(--ic-toggle-button-selected-text-monochrome);\n  --toggle-button-border-hover: var(\n    --ic-toggle-button-selected-border-hover-monochrome\n  );\n  --toggle-button-text-colour-hover: var(\n    --ic-toggle-button-selected-text-monochrome\n  );\n  --toggle-button-border-active: var(\n    --ic-toggle-button-selected-border-pressed-monochrome\n  );\n  --toggle-button-text-colour-active: var(\n    --ic-toggle-button-selected-text-monochrome\n  );\n}\n\n:host(.ic-toggle-button-disabled) {\n  --toggle-button-border: var(--ic-toggle-button-unselected-border-disabled);\n  --toggle-button-text-colour: var(--ic-toggle-button-unselected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome) {\n  --toggle-button-border: var(\n    --ic-toggle-button-unselected-border-disabled-monochrome\n  );\n  --toggle-button-text-colour: var(\n    --ic-toggle-button-unselected-text-disabled-monochrome\n  );\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) {\n  --toggle-button-border: var(--ic-toggle-button-selected-border-disabled);\n  --toggle-button-text-colour: var(--ic-toggle-button-selected-text-disabled);\n}\n\n:host(\n    .ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome\n  ) {\n  --toggle-button-border: var(\n    --ic-toggle-button-selected-border-disabled-monochrome\n  );\n  --toggle-button-text-colour: var(\n    --ic-toggle-button-selected-text-disabled-monochrome\n  );\n}\n\n:host(.expand-toggle-group-child) ::part(button) {\n  width: 100%;\n  min-height: inherit;\n  white-space: inherit;\n  height: inherit;\n}\n\n:host ic-button {\n  --icon-width: var(--ic-space-lg);\n  --icon-height: var(--ic-space-lg);\n}\n\n:host(.expand-toggle-group-child) ic-button {\n  min-width: 100%;\n  min-height: 100%;\n  white-space: normal;\n  height: 100%;\n}\n\n:host(.expand-toggle-group-child) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-checked)\n  ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n    var(--ic-border-focus);\n}\n\n:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-dark),\n    var(--ic-border-focus);\n}\n\n:host(:focus) {\n  z-index: 1;\n}\n\n:host ::part(button) {\n  border: var(--ic-border-width) solid var(--toggle-button-border);\n  color: var(--toggle-button-text-colour);\n}\n\n:host ::part(button):hover {\n  border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n  color: var(--toggle-button-text-colour-hover);\n}\n\n:host ::part(button):active {\n  border: var(--ic-border-width) solid var(--toggle-button-border-active);\n  color: var(--toggle-button-text-colour-active);\n}\n\n:host(.ic-toggle-button-disabled) ::part(button) {\n  border: var(--ic-space-1px) dashed var(--toggle-button-border);\n  color: var(--toggle-button-text-colour);\n}\n\n:host(.ic-toggle-button-checked) ::part(button) {\n  background-color: var(--ic-toggle-button-selected-background);\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n    var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),\n    var(--ic-border-focus);\n}\n\n:host ::part(button):hover {\n  background-color: var(--ic-toggle-button-unselected-background-hover);\n}\n\n:host ::part(button):active {\n  background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):hover {\n  background-color: var(--ic-toggle-button-selected-background-hover);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {\n  background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):hover {\n  background-color: var(\n    --ic-toggle-button-unselected-background-hover-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):active {\n  background-color: var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button) {\n  background-color: var(--ic-toggle-button-selected-background-monochrome);\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):hover {\n  background-color: var(\n    --ic-toggle-button-selected-background-hover-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):active,\n:host(\n    .ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked\n  )\n  ::part(button):active {\n  background-color: var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n      var(--ic-toggle-button-selected-text),\n    var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n  ::part(button) {\n  background-color: transparent;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n  ::part(button)::before {\n  background-image: radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled) 95%,\n    white 20%\n  );\n  background-repeat: no-repeat;\n}\n\n:host(\n    .ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome\n  )\n  ::part(button),\n:host(\n    .ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome\n  )\n  ::part(button)::before {\n  background-image: radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,\n    white 20%\n  );\n  background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-icon) ::part(button) {\n  height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  width: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-toggle-button-icon) ::part(button):active {\n  background-color: var(--ic-action-default-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {\n  background-color: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active {\n  background-color: var(--ic-action-light-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button) {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button) {\n  height: var(--ic-space-xxl);\n  width: var(--ic-space-xxl);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-selected-background-pressed\n  );\n  background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-loading) ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-unselected-background-pressed\n  );\n  background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading)\n  ::part(ic-loading-container) {\n  --inner-color: var(--ic-toggle-button-loading-bar);\n}\n\n:host(.ic-toggle-button-loading) ::part(ic-loading-container) {\n  --inner-color: var(--ic-toggle-button-selected-loading-bar);\n}\n\n:host(\n    .ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome\n  )\n  ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );\n  background-color: var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );\n}\n\n:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );\n  background-color: var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );\n}\n\n@media (forced-colors: active) {\n  :host(.ic-toggle-button-checked) ::part(button),\n  :host(.ic-toggle-button-checked) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),\n  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),\n  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button) {\n    background-color: GrayText;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  h,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n  tag: \"ic-toggle-button\",\n  styleUrl: \"ic-toggle-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ToggleButton {\n  private iconPosition: \"left\" | \"right\" | \"top\";\n\n  @Element() el: HTMLIcToggleButtonElement;\n\n  /**\n   * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n   */\n  @Prop() accessibleLabel?: string;\n\n  /**\n   * If `true`, the toggle button will be in a checked state.\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * If `true`, the toggle button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the toggle button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icon in relation to the toggle button label.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the toggle button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * If `true`, the toggle button will display as black in the light theme, and white in dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The size of the toggle button to be displayed.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when the user clicks a toggle button.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    const parentIconPlacement = (\n      this.el.parentElement as HTMLIcToggleButtonGroupElement\n    ).iconPlacement;\n    this.iconPosition = this.iconPlacement || parentIconPlacement || \"left\";\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        {\n          prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n          propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n        },\n      ],\n      \"Toggle button\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    } else if (!this.loading) {\n      this.checked = !this.checked;\n    }\n  }\n\n  private handleFocus = (ev: FocusEvent) => {\n    ev.stopImmediatePropagation();\n  };\n\n  private handleClick = (): void => {\n    !this.loading &&\n      !this.disabled &&\n      this.icToggleChecked.emit({\n        checked: this.checked,\n      });\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n          [\"ic-toggle-button-disabled\"]: this.disabled,\n          [\"ic-toggle-button-checked\"]: this.checked,\n          [\"ic-toggle-button-icon\"]: this.variant === \"icon\",\n          [`ic-toggle-button-${this.size}`]: true,\n          [\"ic-toggle-button-loading\"]: this.loading,\n          [\"ic-toggle-button-monochrome\"]: this.monochrome,\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n        onFocus={this.handleFocus}\n      >\n        <ic-button\n          aria-pressed={this.checked.toString()}\n          variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n          onClick={this.handleClick}\n          title={this.accessibleLabel}\n          aria-label={`${\n            this.accessibleLabel ? this.accessibleLabel : this.label\n          }, ${this.checked ? \"ticked\" : \"unticked\"}`}\n          disabled={this.disabled}\n          size={this.size}\n          fullWidth={this.fullWidth}\n          loading={this.loading}\n          aria-disabled={`${this.disabled}`}\n        >\n          {this.variant !== \"icon\" && this.label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot name=\"icon\" slot={`${this.iconPosition}-icon`}></slot>\n          )}\n          {isSlotUsed(this.el, \"badge\") && (\n            <slot name=\"badge\" slot=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6GAAA,MAAMA,EAAoB,4iY,MC6BbC,EAAY,M,0EAiGfC,KAAAC,YAAeC,IACrBA,EAAGC,0BAA0B,EAGvBH,KAAAI,YAAc,MACnBJ,KAAKK,UACHL,KAAKM,UACNN,KAAKO,gBAAgBC,KAAK,CACxBC,QAAST,KAAKS,SACd,E,4CA7FqD,M,cAK9B,M,eAKC,M,+DAeF,M,gBAKG,M,UAKN,S,WAKK,U,aAKyB,S,CASvD,iBAAAC,GACEC,EAAoBX,KAAKM,SAAUN,KAAKY,IAExC,MAAMC,EACJb,KAAKY,GAAGE,cACRC,cACFf,KAAKgB,aAAehB,KAAKe,eAAiBF,GAAuB,M,CAGnE,gBAAAI,GACEC,EACE,CACE,CACEC,KAAMnB,KAAKoB,UAAY,OAASpB,KAAKqB,gBAAkBrB,KAAKsB,MAC5DC,SAAUvB,KAAKoB,UAAY,OAAS,mBAAqB,UAG7D,gB,CAKJ,eAAAI,CAAgBC,GACd,GAAIzB,KAAKM,SAAU,CACjBmB,EAAEtB,0B,MACG,IAAKH,KAAKK,QAAS,CACxBL,KAAKS,SAAWT,KAAKS,O,EAgBzB,MAAAiB,GACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,YAAY7B,KAAK8B,SAAU9B,KAAK8B,QAAU,UAC3C,CAAC,6BAA8B9B,KAAKM,SACpC,CAAC,4BAA6BN,KAAKS,QACnC,CAAC,yBAA0BT,KAAKoB,UAAY,OAC5C,CAAC,oBAAoBpB,KAAK+B,QAAS,KACnC,CAAC,4BAA6B/B,KAAKK,QACnC,CAAC,+BAAgCL,KAAKgC,WACtC,CAAC,YAAYhC,KAAK8B,SAAU9B,KAAK8B,QAAU,WAE7CG,QAASjC,KAAKC,aAEd0B,EAAA,4BACgB3B,KAAKS,QAAQyB,WAC3Bd,QAASpB,KAAKoB,UAAY,OAAS,OAAS,YAC5Ce,QAASnC,KAAKI,YACdgC,MAAOpC,KAAKqB,gBAAe,aACf,GACVrB,KAAKqB,gBAAkBrB,KAAKqB,gBAAkBrB,KAAKsB,UAChDtB,KAAKS,QAAU,SAAW,aAC/BH,SAAUN,KAAKM,SACfyB,KAAM/B,KAAK+B,KACXM,UAAWrC,KAAKqC,UAChBhC,QAASL,KAAKK,QAAO,gBACN,GAAGL,KAAKM,YAEtBN,KAAKoB,UAAY,QAAUpB,KAAKsB,MACjCK,EAAA,aACCW,EAAWtC,KAAKY,GAAI,SACnBe,EAAA,QAAMY,KAAK,OAAOC,KAAM,GAAGxC,KAAKgB,sBAEjCsB,EAAWtC,KAAKY,GAAI,UACnBe,EAAA,QAAMY,KAAK,QAAQC,KAAK,W"}

package/dist/core/p-6cb1f1da.entry.js

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["icFooterCss","Footer","this","resizeObserver","resizeObserverCallback","currSize","deviceSize","footerResized","emit","runResizeObserver","ResizeObserver","getCurrentDeviceSize","observe","footerEl","IC_DEVICE_SIZES","XL","getThemeForegroundColor","disconnectedCallback","disconnect","componentWillLoad","componentDidLoad","checkResizeObserver","themeChangeHandler","ev","theme","detail","foregroundColor","mode","isSmall","bp","breakpoint","XS","S","M","L","render","aligned","caption","copyright","description","groupLinks","small","h","Host","class","IcThemeForegroundEnum","Dark","Light","ref","isSlotUsed","el","fullHeight","variant","name","role","hasClassificationBanner"],"sources":["src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","src/components/ic-footer/ic-footer.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n\n  --footer-compliance-padding: 1rem 0;\n}\n\n:host(.ic-footer-sparse) {\n  --footer-links-padding: 1.5rem 0;\n  --footer-logo-margin-bottom: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  --footer-link-inner-flex-direction: row;\n}\n\n:host(.ic-footer-small) {\n  --footer-links-padding: 0 0;\n  --footer-logo-margin-bottom: var(--ic-space-md);\n  --footer-link-inner-flex-direction: column;\n}\n\n:host(.ic-footer-foreground-dark) {\n  --ic-footer-background: var(--ic-theme-secondary-light);\n  --ic-footer-bottom-background: var(--ic-theme-tertiary-light);\n  --ic-footer-keyline: var(--ic-state-layer-darken-20);\n  --ic-footer-text: var(--ic-color-text-primary-light);\n  --ic-footer-link: var(--ic-color-text-primary-light);\n  --ic-footer-icon: var(--ic-color-icon-neutral);\n  --ic-footer-chevron-icon: var(--ic-color-icon-neutral);\n  --ic-footer-logo: var(--ic-color-icon-neutral);\n  --ic-footer-hover: var(--ic-architectural-700-state-layer-10);\n  --ic-footer-pressed: var(--ic-architectural-700-state-layer-20);\n}\n\n:host(.ic-footer-small.ic-footer-ungrouped) {\n  --footer-links-padding: var(--ic-space-md) 0 0 0;\n}\n\n/* Main inner footer element */\nfooter {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Description */\n\n.footer-description {\n  background-color: var(--ic-footer-background);\n  color: var(--ic-footer-text);\n\n  --ic-typography-color: var(--ic-footer-text);\n\n  border-bottom: var(--ic-space-1px) solid var(--ic-footer-keyline);\n}\n\n.footer-description-inner {\n  padding: 1rem 0;\n}\n\n/* Links */\n\n.footer-links {\n  padding: var(--footer-links-padding);\n  background-color: var(--ic-footer-background);\n  color: var(--ic-footer-link);\n\n  --ic-typography-color: var(--ic-footer-link);\n}\n\n.footer-links-inner {\n  display: flex;\n  flex-direction: var(--footer-link-inner-flex-direction);\n}\n\n/* Compliance */\n\n.footer-compliance {\n  background-color: var(--ic-footer-bottom-background);\n  color: var(--ic-footer-text);\n\n  --ic-typography-color: var(--ic-footer-text);\n}\n\n.footer-compliance-inner {\n  padding: var(--footer-compliance-padding);\n}\n\n.footer-logo {\n  margin-bottom: var(--footer-logo-margin-bottom);\n  display: flex;\n  gap: var(--ic-space-xxl);\n}\n\n.footer-logo > ::slotted() {\n  margin-right: var(--ic-space-md);\n}\n\n.footer-caption {\n  margin-bottom: var(--ic-space-md);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n\n@media (forced-colors: active) {\n  footer {\n    border-top: var(--ic-border-hc);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  h,\n  Host,\n  Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  checkResizeObserver,\n  hasClassificationBanner,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n */\n\n@Component({\n  tag: \"ic-footer\",\n  styleUrl: \"ic-footer.css\",\n  shadow: true,\n})\nexport class Footer {\n  private footerEl: HTMLElement;\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcFooterElement;\n\n  @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * The alignment of the section containers used within the footer.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The screen size breakpoint at which to switch to the small layout.\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * The caption displayed at the bottom of the footer.\n   */\n  @Prop() caption: string;\n\n  /**\n   * If `true`, the footer will display the crown copyright at the bottom.\n   */\n  @Prop() copyright: boolean = true;\n\n  /**\n   * The description displayed at the top of the footer.\n   */\n  @Prop() description: string;\n\n  /**\n   * If `true`, the footer will be set up to handle link groups instead of standalone links.\n   */\n  @Prop() groupLinks?: boolean = false;\n\n  /**\n   *  @internal Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() footerResized: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\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 isSmall() {\n    const bp = this.breakpoint;\n\n    return bp === \"extra small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"medium\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"extra large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n    this.footerResized.emit();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.footerEl);\n  };\n\n  render() {\n    const {\n      aligned,\n      caption,\n      copyright,\n      description,\n      groupLinks,\n      foregroundColor,\n    } = this;\n    const small = this.isSmall();\n\n    return (\n      <Host\n        class={{\n          [\"ic-footer\"]: true,\n          [`ic-footer-${small ? \"small\" : \"sparse\"}`]: true,\n          [`ic-footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n          [`ic-footer-foreground-${foregroundColor}`]: true,\n          // Slots will be able to infer their own color\n          [`ic-footer-${IcThemeForegroundEnum.Dark}`]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [`ic-footer-${IcThemeForegroundEnum.Light}`]:\n            foregroundColor === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n          {/* Description */}\n          {(isSlotUsed(this.el, \"description\") || description) && (\n            <div class=\"footer-description\">\n              <ic-section-container aligned={aligned} fullHeight={true}>\n                <div class=\"footer-description-inner\">\n                  <ic-typography variant=\"body\">\n                    <slot name=\"description\">{description}</slot>\n                  </ic-typography>\n                </div>\n              </ic-section-container>\n            </div>\n          )}\n\n          {/* Links */}\n          {isSlotUsed(this.el, \"link\") && (\n            <div class=\"footer-links\">\n              {groupLinks && small ? (\n                <div class=\"footer-links-inner\" role=\"list\">\n                  <slot name=\"link\" />\n                </div>\n              ) : (\n                <ic-section-container fullHeight aligned={aligned}>\n                  <div class=\"footer-links-inner\" role=\"list\">\n                    <slot name=\"link\" />\n                  </div>\n                </ic-section-container>\n              )}\n            </div>\n          )}\n\n          {/* Compliance (logo, caption, copyright) */}\n          <div class=\"footer-compliance\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-compliance-inner\">\n                {isSlotUsed(this.el, \"logo\") && (\n                  <div class=\"footer-logo\">\n                    {/* Logo */}\n                    <slot name=\"logo\" />\n                  </div>\n                )}\n                {(isSlotUsed(this.el, \"caption\") || caption) && (\n                  <div class=\"footer-caption\">\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption\"\n                          : \"body\"\n                      }\n                    >\n                      <slot name=\"caption\">{caption}</slot>\n                    </ic-typography>\n                  </div>\n                )}\n                {copyright && (\n                  <div\n                    class={{\n                      [\"footer-copyright\"]: true,\n                      [\"classification-spacing\"]: hasClassificationBanner(),\n                    }}\n                  >\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption-uppercase\"\n                          : \"label-uppercase\"\n                      }\n                    >\n                      &copy; Crown Copyright\n                    </ic-typography>\n                  </div>\n                )}\n              </div>\n            </ic-section-container>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-79c132e3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icSearchBarCss","inputIds","SearchBar","this","assistiveHintEl","hasTimedOut","inputId","menuCloseFromMenuChangeEvent","menuId","preLoad","preventSubmit","prevNoOption","retryButtonClick","truncateValue","handleClear","ev","keyboardEvent","mouseEvent","type","code","value","inputEl","loading","clearTimeout","timeoutTimer","filteredOptions","options","el","setFocus","icClear","emit","preventDefault","onInput","target","noOptions","labelField","emptyOptionListText","valueField","length","setMenuChange","disableAutoFiltering","rawFilteredOptions","getFilteredMenuOptions","showClearButton","handleShowClearButton","debounceAriaLiveUpdate","onInputBlur","nextFocus","relatedTarget","icSearchBarBlur","onInputFocus","icSearchBarFocus","handleClearBlur","icClearBlur","clearButtonFocused","handleSubmitSearchBlur","icSubmitSearchBlur","searchSubmitFocused","handleMouseDown","handleSubmitSearchFocus","handleSubmitSearch","highlightedValue","undefined","icSubmitSearch","form","closest","searchSubmitButton","handleHiddenFormButtonClick","handleSubmitSearchKeyDown","key","handleRetry","retryViaKeyPress","detail","keyPressed","icRetryLoad","triggerLoading","loadingOption","loadingLabel","timeout","window","setTimeout","loadingErrorLabel","timedOut","handleOptionSelect","label","icOptionSelect","handleMenuOptionHighlight","optionValue","_a","optionId","replace","ariaActiveDescendant","handleMenuChange","open","handleMenuCloseFromMenuChange","focusInput","icMenuChange","handleHostFocus","handleTruncateValue","handleHostBlur","menu","visible","handleFocusClearButton","fromEvent","truncate","renderAssistiveHintEl","input","_b","shadowRoot","querySelector","Object","keys","hasOptionsOrFilterDisabled","document","createElement","innerText","assistiveHintText","id","style","display","after","updateSearchResultAriaLive","searchResultsStatusEl","charactersUntilSuggestion","hadNoOptions","searchMode","isSubmitDisabled","valueNotSet","valueLengthLess","disabled","highlightFirstOptionAfterNoResults","handleSetFirstOption","prevNoOptionsList","find","filteredOption","loadingHandler","newValue","filteredOptionsHandler","newOptions","some","opt","watchOptionsHandler","watchValueHandler","getLabelFromValue","disconnectedCallback","remove","componentWillLoad","removeDisabledFalse","componentDidLoad","focusOnLoad","onComponentRequiredPropUndefined","prop","propName","anchorEl","componentWillRender","handleKeyDown","keyEv","event","handleKeyboardOpen","handleKeyUp","debounceAriaLive","render","name","required","size","placeholder","helperText","readonly","spellcheck","fullWidth","hideLabel","autofocus","autocapitalize","autocomplete","theme","disabledMode","describedBy","getInputDescribedByText","trim","describedById","hasSuggestedSearch","menuOpen","menuRendered","labelValue","renderHiddenInput","h","Host","class","onFocus","onBlur","ref","ariaExpanded","role","autoFocus","inputmode","debounce","slot","innerHTML","clearIcon","onClick","onMouseDown","onKeyDown","variant","searchIcon","fullwidth","activationType","autoFocusOnSelected","inputLabel","onMenuOptionSelect","onMenuStateChange","onMenuOptionId","onRetryButtonClicked","parentEl"],"sources":["src/components/ic-search-bar/ic-search-bar.css?tag=ic-search-bar&encapsulation=shadow","src/components/ic-search-bar/ic-search-bar.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-menu: z-index of search bar menu\n */\n\n:host(.ic-search-bar-search) {\n  --divider-height: 1.5rem;\n  --ic-input-label-helpertext-padding: var(--ic-space-xxs);\n  --border-color: var(--ic-search-bar-outline);\n  --input-bg-color: var(--ic-search-bar-background);\n  --border-color-disabled: var(--ic-search-bar-outline-disabled);\n  --text-field-placeholder-color: var(--ic-search-bar-placeholder-text);\n  --text-field-disabled-text-color: var(--ic-search-bar-disabled-text);\n  --text-field-text-color: var(--ic-search-bar-filled-text);\n  --menu-item-text-color: var(--ic-search-bar-dropdown-option-text);\n  --menu-item-desc-text-color: var(--ic-search-bar-dropdown-option-description);\n  --menu-bg-color: var(--ic-search-bar-dropdown-background);\n  --menu-border-color: var(--ic-search-bar-dropdown-outline);\n  --text-field-typing-cursor: var(--ic-search-bar-filled-text-cursor);\n}\n\n:host(.ic-search-bar-search:hover) {\n  --border-color: var(--ic-search-bar-outline-hover);\n}\n\n:host(.ic-search-bar-search:active) {\n  --border-color: var(--ic-search-bar-outline-pressed);\n}\n\n:host(.ic-search-bar-search.ic-search-bar-small) {\n  --divider-height: 1rem;\n}\n\n:host(.ic-search-bar-full-width) {\n  width: 100%;\n}\n\n:host(.ic-search-bar-search) .ic-button-disabled:hover {\n  border-color: var(--ic-architectural-200);\n}\n\n:host(.ic-search-bar-search.ic-search-bar-disabled) .ic-button-disabled svg {\n  color: var(--ic-architectural-200);\n}\n\n:host(.ic-search-bar-search) .ic-button-disabled svg {\n  color: var(--ic-architectural-400);\n}\n\n/* CLEAR */\n\n.clear-button-container {\n  align-items: center;\n  margin-right: var(--ic-space-1px);\n  display: none;\n  visibility: hidden;\n}\n\n.clear-button {\n  border-radius: var(--ic-border-radius);\n  transition: box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition);\n}\n\n.clear-button:focus,\n.clear-button:active {\n  background-color: var(--ic-color-focus-inner);\n  box-shadow: inset 0 0 0 0.125rem var(--ic-color-focus-outer);\n  border-radius: 0.25rem;\n}\n\n.clear-button-unfocused * {\n  fill: var(--ic-search-bar-clear-button);\n}\n\n.clear-button:focus,\n.clear-button:active * {\n  fill: white;\n}\n\n.clear-button-visible {\n  visibility: visible;\n  display: flex;\n}\n\n.search-submit-button-container {\n  display: flex;\n  align-items: center;\n}\n\n.search-submit-button-unfocused * {\n  fill: var(--ic-search-bar-filled-icon);\n}\n\n.search-submit-button-disabled * {\n  fill: var(--ic-search-bar-icon-disabled);\n}\n\n.search-submit-button-disabled .ic-tooltip-container {\n  display: none !important;\n}\n\n.search-submit-button:focus,\n.search-submit-button:active {\n  background-color: var(--ic-color-focus-inner) !important;\n  box-shadow: inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;\n  border-radius: var(--ic-space-xxs);\n}\n\n.search-submit-button:focus,\n.search-submit-button:active * {\n  fill: white;\n}\n\n.divider {\n  width: var(--ic-border-width);\n  background-color: var(--ic-search-bar-dropdown-divider);\n  height: var(--divider-height);\n}\n\n.menu-container {\n  width: var(--input-width, 20rem);\n  position: relative;\n  top: var(--ic-space-xxxs);\n}\n\n.menu-container.fullwidth {\n  width: 100%;\n}\n\n.no-results {\n  cursor: not-allowed;\n}\n\n.search-results-status {\n  border: 0;\n  clip: rect(0, 0, 0, 0, 0);\n  height: var(--ic-space-1px);\n  margin-bottom: calc(-1 * var(--ic-space-1px));\n  margin-right: calc(-1 * var(--ic-space-1px));\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: var(--ic-space-1px);\n}\n\n@media (forced-colors: active) {\n  .search-submit-button-unfocused * {\n    fill: canvastext;\n  }\n\n  .search-submit-button-disabled * {\n    fill: GrayText;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  Method,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  IcAutocompleteTypes,\n  IcAutocorrectStates,\n  IcMenuOption,\n  IcSizesNoLarge,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  getInputDescribedByText,\n  renderHiddenInput,\n  handleHiddenFormButtonClick,\n  getLabelFromValue,\n  onComponentRequiredPropUndefined,\n  getFilteredMenuOptions,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n  IcSearchBarBlurEventDetail,\n  IcSearchBarSearchModes,\n} from \"./ic-search-bar.types\";\nimport { IcValueEventDetail, IcBlurEventDetail } from \"../../utils/types\";\nimport {\n  IcMenuChangeEventDetail,\n  IcOptionSelectEventDetail,\n} from \"../ic-menu/ic-menu.types\";\n\nimport clearIcon from \"../../assets/clear-icon.svg\";\nimport searchIcon from \"../../assets/search-icon.svg\";\n\nlet inputIds = 0;\n\n@Component({\n  tag: \"ic-search-bar\",\n  styleUrl: \"ic-search-bar.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class SearchBar {\n  private anchorEl: HTMLElement;\n  private assistiveHintEl: HTMLSpanElement = null;\n  private debounceAriaLive: number;\n  private hasTimedOut = false;\n  private inputEl: HTMLIcTextFieldElement;\n  private inputId = `ic-search-bar-input-${inputIds++}`;\n  private menu: HTMLIcMenuElement;\n  private menuCloseFromMenuChangeEvent: boolean = false;\n  private menuId = `${this.inputId}-menu`;\n  private preLoad = true;\n  private preventSubmit: boolean = false;\n  private prevNoOption: boolean = false;\n  private retryButtonClick: boolean = false;\n  private retryViaKeyPress: boolean;\n  private timeoutTimer: number;\n  private truncateValue = false;\n  private searchSubmitButton: HTMLIcButtonElement;\n\n  @Element() el: HTMLIcSearchBarElement;\n\n  @State() ariaActiveDescendant: string;\n  @State() clearButtonFocused: boolean = false;\n  @State() highlightedValue: string;\n  @State() open: boolean = false;\n  @State() searchSubmitFocused: boolean = false;\n  @State() showClearButton: boolean = false;\n\n  /**\n   * The automatic capitalisation of the text value as it is entered/edited by the user.\n   * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n   */\n  @Prop() autocapitalize = \"off\";\n\n  /**\n   * The state of autocompletion the browser can apply on the text value.\n   */\n  @Prop() autocomplete?: IcAutocompleteTypes = \"off\";\n\n  /**\n   * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect?: IcAutocorrectStates = \"off\";\n\n  /**\n   * If `true`, the form control will have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.\n   */\n  @Prop() charactersUntilSuggestion: number = 2;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\n   * If `true`, all options provided will be displayed.\n   */\n  @Prop() disableAutoFiltering?: boolean = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n   */\n  @Prop() debounce?: number = 0;\n\n  /**\n   * The text displayed when there are no options in the option list.\n   */\n  @Prop() emptyOptionListText = \"No results found\";\n\n  /**\n   * If `true`, the search bar will be focused when component loaded.\n   */\n  @Prop() focusOnLoad?: boolean = false;\n\n  /**\n   * Specify whether the search bar fills the full width of the container.\n   * If `true`, this overrides the --input-width CSS variable.\n   */\n  @Prop() fullWidth?: 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 hint text for the hidden assistive description element.\n   */\n  @Prop() assistiveHintText?: string =\n    \"When autocomplete results are available use the up and down arrows to choose and press enter to select\";\n\n  /**\n   * The label for the search bar.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The custom name for the label field to correspond with the IcMenuOption type.\n   */\n  @Prop() labelField?: string = \"label\";\n\n  /**\n   * Trigger loading state when fetching options asynchronously\n   */\n  @Prop({ mutable: true }) loading?: boolean = false;\n\n  /**\n   * Change the message displayed when external loading times out.\n   */\n  @Prop() loadingErrorLabel?: string = \"Loading Error\";\n\n  /**\n   * Change the message displayed whilst the options are being loaded externally.\n   */\n  @Prop() loadingLabel?: string = \"Loading...\";\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * The placeholder value to display.\n   */\n  @Prop() placeholder?: string = \"Search\";\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly?: boolean = false;\n\n  /**\n   * If `true`, the search bar will require a value.\n   */\n  @Prop() required?: boolean = false;\n\n  /**\n   * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.\n   */\n  @Prop() searchMode?: IcSearchBarSearchModes = \"navigation\";\n\n  /**\n   * The size of the search bar component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * If `true`, the value of the search will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * If using external filtering, set a timeout for when loading takes too long.\n   */\n  @Prop() timeout?: number;\n\n  /**\n   * The custom name for the value field to correspond with the IcMenuOption type.\n   */\n  @Prop() valueField?: string = \"value\";\n\n  @Watch(\"loading\")\n  loadingHandler(newValue: boolean): void {\n    if (newValue && !this.hasTimedOut) {\n      this.preLoad = false;\n      this.triggerLoading();\n    }\n  }\n\n  @State() filteredOptions: IcMenuOption[] = [];\n\n  @Watch(\"filteredOptions\")\n  filteredOptionsHandler(newOptions: IcMenuOption[]): void {\n    this.hasTimedOut = newOptions.some((opt) => opt.timedOut);\n  }\n\n  /**\n   * The suggested search options.\n   */\n  @Prop() options?: IcMenuOption[] = [];\n\n  @Watch(\"options\")\n  watchOptionsHandler(newOptions: IcMenuOption[]): void {\n    if (this.disableAutoFiltering && !this.hasTimedOut) {\n      this.loading = false;\n      clearTimeout(this.timeoutTimer);\n      if (newOptions.length > 0) {\n        this.filteredOptions = newOptions;\n      } else {\n        if (this.hadNoOptions()) {\n          return;\n        }\n        this.setMenuChange(true);\n        !this.preLoad &&\n          (this.filteredOptions = [\n            {\n              [this.labelField]: this.emptyOptionListText,\n              [this.valueField]: \"\",\n            },\n          ]);\n        this.preLoad = true;\n      }\n    }\n    this.debounceAriaLiveUpdate();\n  }\n\n  /**\n   * The value of the search input.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n  @Watch(\"value\")\n  watchValueHandler(newValue: string): void {\n    if (\n      this.inputEl &&\n      this.options &&\n      !!getLabelFromValue(\n        newValue,\n        this.options,\n        this.valueField,\n        this.labelField\n      )\n    ) {\n      this.inputEl.value = getLabelFromValue(\n        newValue,\n        this.options,\n        this.valueField,\n        this.labelField\n      );\n    } else if (this.inputEl && this.inputEl.value !== newValue) {\n      this.inputEl.value = newValue;\n    }\n  }\n\n  // The icChange event is defined here so that it appears as an event for search bar\n  // The actual event is emitted from the child ic-text-field\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when value is cleared with clear button\n   */\n  @Event() icClear: EventEmitter<void>;\n  private handleClear = (ev: Event) => {\n    const keyboardEvent = ev as KeyboardEvent;\n    const mouseEvent = ev as MouseEvent;\n\n    if (\n      mouseEvent.type === \"click\" ||\n      keyboardEvent.code === \"Enter\" ||\n      keyboardEvent.code === \"Space\"\n    ) {\n      this.value = \"\";\n      this.inputEl.value = \"\";\n      this.loading = false;\n      clearTimeout(this.timeoutTimer);\n      this.filteredOptions = this.options;\n      this.el.setFocus();\n\n      this.icClear.emit();\n      ev.preventDefault();\n\n      this.preventSubmit = true;\n    }\n  };\n\n  // The icInput event is defined here so that it appears as an event for search bar\n  // The actual event is emitted from the child ic-text-field\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() icInput: EventEmitter<IcValueEventDetail>;\n  private onInput = (ev: Event) => {\n    this.value = (ev.target as HTMLInputElement).value;\n\n    const noOptions = [\n      { [this.labelField]: this.emptyOptionListText, [this.valueField]: \"\" },\n    ];\n\n    if (this.options.length > 0) {\n      this.setMenuChange(true);\n\n      this.preLoad = false;\n\n      if (this.disableAutoFiltering === false) {\n        const rawFilteredOptions = getFilteredMenuOptions(\n          this.options,\n          false,\n          this.value,\n          \"anywhere\",\n          this.labelField\n        );\n\n        this.filteredOptions =\n          rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;\n      }\n    }\n\n    if (!this.showClearButton) {\n      this.handleShowClearButton(true);\n    }\n\n    this.debounceAriaLiveUpdate();\n  };\n\n  private onInputBlur = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    const nextFocus = (ev as FocusEvent).relatedTarget;\n\n    this.icSearchBarBlur.emit({ value: value, relatedTarget: nextFocus });\n  };\n\n  private onInputFocus = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icSearchBarFocus.emit({ value: value });\n\n    this.handleShowClearButton(true);\n  };\n\n  /**\n   * Emitted when option is highlighted within the menu\n   */\n  @Event() icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;\n\n  /**\n   * Emitted when the state of the menu changes (i.e. open or close)\n   */\n  @Event() icMenuChange: EventEmitter<IcMenuChangeEventDetail>;\n  /**\n   * @internal - Emitted when blur is invoked from clear button\n   */\n  @Event() icClearBlur: EventEmitter<IcBlurEventDetail>;\n  private handleClearBlur = (ev: Event) => {\n    const nextFocus = (ev as FocusEvent).relatedTarget;\n\n    this.icClearBlur.emit({ relatedTarget: nextFocus });\n\n    this.clearButtonFocused = false;\n  };\n\n  /**\n   * Emitted when the 'retry loading' button is clicked\n   */\n  @Event() icRetryLoad: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when the search value has been submitted\n   */\n  @Event() icSubmitSearch: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * @internal - Emitted when blur is invoked from search submit button\n   */\n  @Event() icSubmitSearchBlur: EventEmitter<IcBlurEventDetail>;\n  private handleSubmitSearchBlur = (ev: Event) => {\n    const nextFocus = (ev as FocusEvent).relatedTarget;\n\n    this.icSubmitSearchBlur.emit({ relatedTarget: nextFocus });\n\n    this.searchSubmitFocused = false;\n  };\n\n  /**\n   * Emitted when blur is invoked from ic-search-bar\n   */\n  @Event() icSearchBarBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n\n  /**\n   * Emitted when focus is invoked from ic-search-bar\n   */\n  @Event() icSearchBarFocus: EventEmitter<IcValueEventDetail>;\n\n  disconnectedCallback(): void {\n    if (this.assistiveHintEl) {\n      this.assistiveHintEl.remove();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.watchValueHandler(this.value);\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    if (this.focusOnLoad) {\n      this.el.setFocus();\n    }\n\n    if (this.hasOptionsOrFilterDisabled()) {\n      this.renderAssistiveHintEl();\n      if (this.disableAutoFiltering) {\n        this.filteredOptions = this.options;\n      }\n    }\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Search Bar\"\n    );\n\n    if (this.inputEl !== undefined) {\n      this.anchorEl = this.inputEl.shadowRoot.querySelector(\n        \"ic-input-component-container\"\n      );\n    }\n  }\n\n  componentWillRender(): void {\n    this.highlightFirstOptionAfterNoResults();\n  }\n\n  @Listen(\"icKeydown\", {})\n  handleKeyDown(ev: CustomEvent): void {\n    const keyEv: KeyboardEvent = ev.detail.event;\n    if (this.menu && this.open) {\n      this.menu.handleKeyboardOpen(keyEv);\n    }\n  }\n\n  @Listen(\"keyup\", {})\n  handleKeyUp(ev: KeyboardEvent): void {\n    if (ev.key === \"Enter\") {\n      if (this.preventSubmit || this.isSubmitDisabled()) {\n        return;\n      }\n\n      this.handleSubmitSearch();\n      this.setMenuChange(false);\n    }\n\n    if (ev.key === \"Escape\") {\n      this.setMenuChange(false);\n    }\n\n    if (this.preventSubmit) {\n      this.preventSubmit = false;\n    }\n  }\n\n  /**\n   * Sets focus on the native `input`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.retryViaKeyPress = false;\n    this.retryButtonClick = false;\n    if (this.inputEl) {\n      this.inputEl.setFocus();\n    }\n  }\n\n  private handleMouseDown = (ev: Event) => {\n    ev.preventDefault();\n  };\n\n  private handleSubmitSearchFocus = () => {\n    this.searchSubmitFocused = true;\n  };\n\n  private handleSubmitSearch = () => {\n    this.highlightedValue && (this.value = this.highlightedValue);\n    this.highlightedValue = undefined;\n    this.icSubmitSearch.emit({ value: this.value });\n\n    const form: HTMLFormElement = this.el.closest(\"FORM\");\n\n    if (this.searchSubmitButton && !!form && !this.preventSubmit) {\n      handleHiddenFormButtonClick(form, this.searchSubmitButton);\n    }\n  };\n\n  private debounceAriaLiveUpdate() {\n    clearTimeout(this.debounceAriaLive);\n\n    this.debounceAriaLive = window.setTimeout(() => {\n      this.updateSearchResultAriaLive();\n    }, 500);\n  }\n\n  private handleSubmitSearchKeyDown = (ev: KeyboardEvent) => {\n    if (ev.key === \" \") {\n      ev.preventDefault();\n      this.handleSubmitSearch();\n    }\n  };\n\n  private handleRetry = (ev: CustomEvent<IcValueEventDetail>) => {\n    this.retryViaKeyPress = ev.detail.keyPressed === \"Enter\";\n    this.icRetryLoad.emit({ value: ev.detail.value });\n    this.triggerLoading();\n    this.retryButtonClick = true;\n  };\n\n  private triggerLoading = () => {\n    const loadingOption: IcMenuOption[] = [\n      {\n        [this.labelField]: this.loadingLabel,\n        [this.valueField]: \"\",\n        loading: true,\n      },\n    ];\n    if (this.filteredOptions !== loadingOption)\n      this.filteredOptions = loadingOption;\n    if (this.timeout) {\n      this.timeoutTimer = window.setTimeout(() => {\n        this.filteredOptions = [\n          {\n            [this.labelField]: this.loadingErrorLabel,\n            [this.valueField]: \"\",\n            timedOut: true,\n          },\n        ];\n      }, this.timeout);\n    }\n  };\n\n  private handleOptionSelect = (ev: CustomEvent) => {\n    if (ev.detail.label === this.emptyOptionListText) {\n      this.el.setFocus();\n      return;\n    }\n\n    this.value = ev.detail.value;\n    this.icOptionSelect.emit({ value: this.value });\n  };\n\n  private handleMenuOptionHighlight = (ev: CustomEvent) => {\n    const optionValue = ev.detail.optionId?.replace(`${this.menuId}-`, \"\");\n    optionValue && (this.highlightedValue = optionValue);\n    if (ev.detail.optionId) {\n      this.ariaActiveDescendant = ev.detail.optionId;\n    } else {\n      this.ariaActiveDescendant = undefined;\n    }\n  };\n\n  private handleMenuChange = (ev: CustomEvent<IcMenuChangeEventDetail>) => {\n    this.setMenuChange(ev.detail.open);\n    if (!ev.detail.open) {\n      this.handleMenuCloseFromMenuChange(true);\n      if (ev.detail.focusInput === undefined || ev.detail.focusInput) {\n        this.el.setFocus();\n      }\n    }\n  };\n\n  private setMenuChange = (open: boolean) => {\n    if (this.open !== open) {\n      this.open = open;\n      this.icMenuChange.emit({ open });\n    }\n  };\n\n  private handleHostFocus = () => {\n    if (this.options && this.value && !this.menuCloseFromMenuChangeEvent) {\n      this.setMenuChange(true);\n    }\n    this.handleTruncateValue(false);\n\n    this.icSearchBarFocus.emit();\n  };\n\n  private handleHostBlur = (ev: Event) => {\n    const nextFocus = (ev as FocusEvent).relatedTarget;\n    if (\n      this.open &&\n      this.options &&\n      nextFocus !== this.menu &&\n      !this.retryViaKeyPress &&\n      !this.retryButtonClick\n    ) {\n      this.setMenuChange(false);\n    }\n\n    if (this.retryButtonClick || this.retryViaKeyPress) {\n      this.inputEl.setFocus();\n    }\n\n    this.handleShowClearButton(false);\n    this.handleMenuCloseFromMenuChange(false);\n    this.handleTruncateValue(true);\n    this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });\n    this.retryViaKeyPress = false;\n    this.retryButtonClick = false;\n  };\n\n  private handleShowClearButton = (visible: boolean): void => {\n    this.showClearButton = visible;\n  };\n\n  private handleFocusClearButton = (): void => {\n    this.clearButtonFocused = true;\n  };\n\n  private handleMenuCloseFromMenuChange = (fromEvent: boolean): void => {\n    this.menuCloseFromMenuChangeEvent = fromEvent;\n  };\n\n  private handleTruncateValue = (truncate: boolean): void => {\n    this.truncateValue = truncate;\n  };\n\n  private renderAssistiveHintEl = (): void => {\n    const input = this.el.shadowRoot\n      .querySelector(\"ic-text-field\")\n      ?.shadowRoot?.querySelector(`#${this.inputId}`);\n\n    if (\n      input &&\n      Object.keys(input).length > 0 &&\n      this.hasOptionsOrFilterDisabled()\n    ) {\n      this.assistiveHintEl = document.createElement(\"span\");\n      this.assistiveHintEl.innerText = this.assistiveHintText;\n      this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;\n      this.assistiveHintEl.style.display = \"none\";\n      if (input.after !== undefined) {\n        input.after(this.assistiveHintEl);\n      }\n    }\n  };\n\n  private updateSearchResultAriaLive = (): void => {\n    const searchResultsStatusEl = this.el.shadowRoot.querySelector(\n      \".search-results-status\"\n    ) as HTMLParagraphElement;\n\n    if (searchResultsStatusEl) {\n      if (\n        !this.open ||\n        this.value === \"\" ||\n        this.value.length < this.charactersUntilSuggestion\n      ) {\n        searchResultsStatusEl.innerText = \"\";\n      } else if (\n        this.hasOptionsOrFilterDisabled() &&\n        this.filteredOptions.length > 0 &&\n        this.open &&\n        !this.filteredOptions[0].loading\n      ) {\n        if (this.hadNoOptions()) {\n          searchResultsStatusEl.innerText = this.emptyOptionListText;\n        } else {\n          searchResultsStatusEl.innerText = `${\n            this.filteredOptions.length\n          } result${this.filteredOptions.length > 1 ? \"s\" : \"\"} available`;\n        }\n      }\n    }\n  };\n\n  private hasOptionsOrFilterDisabled = (): boolean =>\n    this.options.length > 0 || this.disableAutoFiltering;\n\n  private hadNoOptions = (): boolean =>\n    this.filteredOptions.length === 1 &&\n    this.filteredOptions[0][this.labelField] === this.emptyOptionListText &&\n    this.searchMode === \"navigation\";\n\n  private isSubmitDisabled = (): boolean => {\n    const valueNotSet =\n      this.value === undefined || this.value === null || this.value === \"\";\n    const valueLengthLess = this.value.length < this.charactersUntilSuggestion;\n    return (\n      valueNotSet ||\n      valueLengthLess ||\n      this.disabled ||\n      this.hadNoOptions() ||\n      this.hasTimedOut ||\n      this.loading\n    );\n  };\n\n  private highlightFirstOptionAfterNoResults = () => {\n    if (this.prevNoOption && this.menu && !this.hasTimedOut) {\n      this.menu.handleSetFirstOption();\n      this.prevNoOption = false;\n    }\n    const prevNoOptionsList = this.filteredOptions.find(\n      (filteredOption) =>\n        filteredOption[this.labelField] === this.emptyOptionListText ||\n        filteredOption[this.labelField] === this.loadingErrorLabel ||\n        filteredOption[this.labelField] === this.loadingLabel\n    );\n    if (prevNoOptionsList) {\n      this.prevNoOption = true;\n    }\n  };\n\n  render() {\n    const {\n      inputId,\n      name,\n      label,\n      required,\n      size,\n      placeholder,\n      helperText,\n      disabled,\n      value,\n      readonly,\n      spellcheck,\n      fullWidth,\n      options,\n      open,\n      hideLabel,\n      menuId,\n      ariaActiveDescendant,\n      truncateValue,\n      autofocus,\n      autocapitalize,\n      autocomplete,\n      filteredOptions,\n      theme,\n    } = this;\n\n    const disabledMode = readonly || disabled;\n\n    const describedBy = getInputDescribedByText(\n      inputId,\n      helperText !== \"\",\n      false\n    ).trim();\n\n    let describedById;\n\n    if (describedBy !== \"\" && this.hasOptionsOrFilterDisabled()) {\n      describedById = `${describedBy} ${this.inputId}-assistive-hint`;\n    } else if (this.hasOptionsOrFilterDisabled()) {\n      describedById = `${this.inputId}-assistive-hint`;\n    } else if (describedBy !== \"\") {\n      describedById = describedBy;\n    } else {\n      describedById = undefined;\n    }\n\n    const hasSuggestedSearch = !!value && this.hasOptionsOrFilterDisabled();\n    const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;\n    const menuRendered =\n      menuOpen && value.length >= this.charactersUntilSuggestion;\n\n    const labelValue = getLabelFromValue(\n      value,\n      options,\n      this.valueField,\n      this.labelField\n    );\n\n    renderHiddenInput(true, this.el, name, value, disabledMode);\n\n    return (\n      <Host\n        class={{\n          [\"ic-search-bar-search\"]: true,\n          [\"ic-search-bar-full-width\"]: fullWidth,\n          [\"ic-search-bar-disabled\"]: disabled,\n          [\"ic-search-bar-small\"]: size === \"small\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        onFocus={this.handleHostFocus}\n        onBlur={this.handleHostBlur}\n      >\n        <ic-text-field\n          ref={(el) => (this.inputEl = el)}\n          inputId={inputId}\n          label={label}\n          helperText={helperText}\n          required={required}\n          disabled={disabledMode && !readonly}\n          readonly={readonly}\n          size={size}\n          hideLabel={hideLabel}\n          fullWidth={fullWidth}\n          name={name}\n          truncateValue={truncateValue}\n          value={options && !!labelValue ? labelValue : value}\n          placeholder={placeholder}\n          onInput={this.onInput}\n          onBlur={this.onInputBlur}\n          onFocus={this.onInputFocus}\n          aria-label={hideLabel ? label : \"\"}\n          aria-describedby={describedById}\n          aria-owns={menuRendered ? menuId : undefined}\n          aria-controls={menuRendered ? menuId : undefined}\n          aria-haspopup={options.length > 0 ? \"listbox\" : undefined}\n          ariaExpanded={options.length > 0 ? `${menuOpen}` : undefined}\n          ariaActiveDescendant={ariaActiveDescendant}\n          aria-autocomplete={hasSuggestedSearch ? \"list\" : undefined}\n          role={options.length > 0 ? \"combobox\" : undefined}\n          autocomplete={autocomplete}\n          autocapitalize={autocapitalize}\n          autoFocus={autofocus}\n          spellcheck={spellcheck}\n          inputmode=\"search\"\n          debounce={this.debounce}\n        >\n          <div\n            class={{\n              \"clear-button-container\": true,\n              \"clear-button-visible\":\n                value && !disabledMode && this.showClearButton,\n            }}\n            slot=\"clear-button\"\n          >\n            <ic-button\n              id=\"clear-button\"\n              class={{\n                \"clear-button\": true,\n                \"clear-button-unfocused\": !this.clearButtonFocused,\n              }}\n              aria-label=\"Clear\"\n              innerHTML={clearIcon}\n              onClick={this.handleClear}\n              onMouseDown={this.handleMouseDown}\n              size={size}\n              onFocus={this.handleFocusClearButton}\n              onBlur={this.handleClearBlur}\n              onKeyDown={this.handleClear}\n              type=\"submit\"\n              variant=\"icon\"\n              theme={this.clearButtonFocused ? \"light\" : \"dark\"}\n            ></ic-button>\n            <div class=\"divider\"></div>\n          </div>\n          <div\n            class={{\n              \"search-submit-button-container\": true,\n              \"search-submit-button-disabled\": this.isSubmitDisabled(),\n            }}\n            slot=\"search-submit-button\"\n          >\n            <ic-button\n              id=\"search-submit-button\"\n              aria-label=\"Search\"\n              ref={(el) => (this.searchSubmitButton = el)}\n              class={{\n                [\"search-submit-button\"]: true,\n                [\"search-submit-button-small\"]: size === \"small\",\n                [\"search-submit-button-unfocused\"]: !this.searchSubmitFocused,\n                [\"search-submit-button-disabled\"]: this.isSubmitDisabled(),\n              }}\n              disabled={this.isSubmitDisabled()}\n              innerHTML={searchIcon}\n              size={size}\n              onClick={this.handleSubmitSearch}\n              onMouseDown={this.handleMouseDown}\n              onBlur={this.handleSubmitSearchBlur}\n              onFocus={this.handleSubmitSearchFocus}\n              onKeyDown={this.handleSubmitSearchKeyDown}\n              type=\"submit\"\n              variant=\"icon\"\n              theme={this.searchSubmitFocused ? \"light\" : \"dark\"}\n            ></ic-button>\n          </div>\n          <div\n            class={{\n              \"menu-container\": true,\n              fullwidth: fullWidth,\n            }}\n            slot=\"menu\"\n          >\n            {menuRendered && (\n              <ic-menu\n                class={{\n                  \"no-results\":\n                    this.hadNoOptions() ||\n                    (filteredOptions.length === 1 &&\n                      (filteredOptions[0][this.labelField] ===\n                        this.loadingLabel ||\n                        filteredOptions[0][this.labelField] ===\n                          this.loadingErrorLabel)),\n                }}\n                activationType=\"manual\"\n                anchorEl={this.anchorEl}\n                autoFocusOnSelected={false}\n                searchMode={this.searchMode}\n                inputEl={this.inputEl}\n                inputLabel={label}\n                ref={(el) => (this.menu = el)}\n                fullWidth={fullWidth}\n                menuId={menuId}\n                open={!!menuRendered}\n                options={filteredOptions}\n                onMenuOptionSelect={this.handleOptionSelect}\n                onMenuStateChange={this.handleMenuChange}\n                onMenuOptionId={this.handleMenuOptionHighlight}\n                onRetryButtonClicked={this.handleRetry}\n                parentEl={this.el}\n                value={value}\n                labelField={this.labelField}\n                valueField={this.valueField}\n              ></ic-menu>\n            )}\n          </div>\n        </ic-text-field>\n        <div\n          aria-live=\"polite\"\n          role=\"status\"\n          class=\"search-results-status\"\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-7cba80ac.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icPaginationCss","Pagination","this","handleClickFirst","currentPage","icPageChange","emit","value","handleClickPrevious","handleClickNext","handleClickLast","pages","firstButton","h","id","theme","onClick","class","disabled","variant","monochrome","innerHTML","paginationFirstLast","previousButton","paginationNextPrevious","nextButton","lastButton","renderStartEllipsis","type","renderEndEllipsis","renderStartItems","startItems","map","page","selected","renderEndItems","endItems","renderMiddleItems","midItems","defaultPage","watchAdjacentPageCountHandler","adjacentPageCount","watchBoundaryPageCountHandler","boundaryPageCount","watchNumberPagesHandler","watchPageChangeHandler","watchTypeHandler","startEllipsis","endEllipsis","startItemCount","endStart","midStart","midEnd","i","push","numItems","componentWillLoad","removeDisabledFalse","el","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","paginationItemClickHandler","ev","detail","setCurrentPage","console","error","render","hideCurrentPage","hideFirstAndLastPageButton","label","Host","role"],"sources":["src/components/ic-pagination/ic-pagination.css?tag=ic-pagination&encapsulation=shadow","src/components/ic-pagination/ic-pagination.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  box-sizing: border-box;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\nnav {\n  width: 100%;\n  display: flex;\n  flex-flow: row wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\nic-button {\n  cursor: pointer;\n}\n\nic-button.next-previous {\n  --icon-width: var(--ic-space-xs);\n  --icon-height: calc(var(--ic-space-xs) + var(--ic-space-xxxs));\n\n  padding: 0 var(--ic-space-xxs) 0 var(--ic-space-xxxs);\n}\n\nic-button.first-last {\n  --icon-width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  --icon-height: calc(var(--ic-space-xs) + var(--ic-space-xxxs));\n}\n\nic-button.first-last::part(button),\nic-button.next-previous::part(button) {\n  color: var(--ic-pagination-chevron);\n}\n\n:host(.ic-pagination-monochrome) ic-button.first-last::part(button),\n:host(.ic-pagination-monochrome) ic-button.next-previous::part(button) {\n  color: var(--ic-pagination-chevron-monochrome);\n}\n\nic-button.ic-button-disabled.first-last::part(button),\nic-button.ic-button-disabled.next-previous::part(button) {\n  color: var(--ic-pagination-chevron-disabled);\n}\n\n.disabled {\n  color: var(--ic-architectural-200);\n  pointer-events: none;\n  cursor: none;\n  user-select: none;\n}\n\n.hide-current-page {\n  display: none;\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Listen,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n  Method,\n} from \"@stencil/core\";\nimport paginationNextPrevious from \"../../assets/pagination-next-previous.svg\";\nimport paginationFirstLast from \"../../assets/pagination-first-last.svg\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { IcPaginationTypes, IcChangeEventDetail } from \"./ic-pagination.types\";\nimport {\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-pagination\",\n  styleUrl: \"ic-pagination.css\",\n  shadow: true,\n})\nexport class Pagination {\n  @Element() el: HTMLIcPaginationElement;\n\n  @State() endEllipsis: boolean = false;\n  @State() endItems: number[] = [];\n  @State() midItems: number[] = [];\n  @State() startEllipsis: boolean = false;\n  @State() startItems: number[] = [];\n\n  /**\n   * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.\n   */\n  @Prop({ mutable: true }) adjacentPageCount: number = 1;\n\n  @Watch(\"adjacentPageCount\")\n  watchAdjacentPageCountHandler(): void {\n    if (this.adjacentPageCount > 2) {\n      this.adjacentPageCount = 2;\n    }\n  }\n\n  /**\n   * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.\n   */\n  @Prop({ mutable: true }) boundaryPageCount: number = 1;\n\n  @Watch(\"boundaryPageCount\")\n  watchBoundaryPageCountHandler(): void {\n    if (this.boundaryPageCount > 2) {\n      this.boundaryPageCount = 2;\n    }\n  }\n\n  /**\n   * The default page to display.\n   */\n  @Prop() defaultPage: number = 1;\n\n  /**\n   * If `true`, the pagination will not allow interaction.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * If `true`, the current page of the simple pagination will not be displayed.\n   */\n  @Prop() hideCurrentPage: boolean = false;\n\n  /**\n   * If `true`, the first and last page buttons will not be displayed.\n   */\n  @Prop() hideFirstAndLastPageButton: boolean = false;\n\n  /**\n   * The label for the pagination item (applicable when simple pagination is being used).\n   */\n  @Prop() label: string = \"Page\";\n\n  /**\n   * If `true`, the pagination will display as black in the light theme, and white in dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() pages!: number;\n\n  @Watch(\"pages\")\n  watchNumberPagesHandler(): void {\n    this.watchPageChangeHandler();\n  }\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The type of pagination to be used.\n   */\n  @Prop() type: IcPaginationTypes = \"simple\";\n\n  @Watch(\"type\")\n  watchTypeHandler(): void {\n    this.watchPageChangeHandler();\n  }\n\n  /**\n   * The current page displayed by the pagination.\n   */\n  @Prop({ mutable: true }) currentPage: number = this.defaultPage;\n\n  @Watch(\"currentPage\")\n  watchPageChangeHandler(): void {\n    if (this.type === \"simple\") {\n      return;\n    }\n\n    this.startEllipsis = false;\n    this.endEllipsis = false;\n    this.startItems = [];\n    this.endItems = [];\n    this.midItems = [];\n\n    const startItems = [];\n    let startItemCount = 0;\n    const endItems = [];\n    let endStart = this.pages;\n    const midItems = [];\n    let midStart;\n    let midEnd;\n    let startEllipsis = false;\n    let endEllipsis = false;\n\n    if (\n      this.pages <=\n      this.boundaryPageCount * 2 + this.adjacentPageCount * 2 + 3\n    ) {\n      this.startEllipsis = false;\n      this.endEllipsis = false;\n      for (let i = 1; i <= this.pages; i++) {\n        startItems.push(i);\n      }\n      this.startItems = startItems;\n      return;\n    }\n\n    startItemCount = this.boundaryPageCount === 0 ? 1 : this.boundaryPageCount;\n    endStart =\n      this.boundaryPageCount === 0\n        ? this.pages\n        : this.pages - this.boundaryPageCount + 1;\n\n    if (\n      this.currentPage <=\n      this.adjacentPageCount + this.boundaryPageCount + 2\n    ) {\n      startEllipsis = false;\n      endEllipsis = true;\n\n      let numItems = 2 * this.adjacentPageCount + 1;\n      if (this.boundaryPageCount === 0) {\n        numItems--;\n      }\n      midStart = startItemCount + 1;\n      midEnd = midStart + numItems;\n    } else {\n      startEllipsis = true;\n      if (\n        this.currentPage >\n        this.pages - (this.adjacentPageCount + this.boundaryPageCount + 2)\n      ) {\n        let numItems = 2 * this.adjacentPageCount + 1;\n        if (this.boundaryPageCount === 0) {\n          numItems--;\n        }\n        midEnd =\n          this.boundaryPageCount === 0\n            ? this.pages - 1\n            : this.pages - this.boundaryPageCount;\n        midStart = midEnd - numItems;\n      } else {\n        endEllipsis = true;\n        midStart = this.currentPage - this.adjacentPageCount;\n        midEnd = this.currentPage + this.adjacentPageCount;\n      }\n    }\n\n    //create array of start items\n    if (\n      this.boundaryPageCount > 0 ||\n      (this.boundaryPageCount === 0 && startEllipsis === false)\n    ) {\n      for (let i = 1; i <= startItemCount; i++) {\n        startItems.push(i);\n      }\n    }\n\n    //create array of end items\n    if (\n      this.boundaryPageCount > 0 ||\n      (this.boundaryPageCount === 0 && endEllipsis === false)\n    ) {\n      for (let i = endStart; i <= this.pages; i++) {\n        endItems.push(i);\n      }\n    }\n\n    //create array of mid items\n    for (let i = midStart; i <= midEnd; i++) {\n      midItems.push(i);\n    }\n\n    this.startEllipsis = startEllipsis;\n    this.endEllipsis = endEllipsis;\n    this.startItems = startItems;\n    this.endItems = endItems;\n    this.midItems = midItems;\n  }\n\n  /**\n   * Emitted when a page is selected.\n   */\n  @Event() icPageChange: EventEmitter<IcChangeEventDetail>;\n\n  componentWillLoad(): void {\n    this.watchPageChangeHandler();\n    this.watchBoundaryPageCountHandler();\n    this.watchAdjacentPageCountHandler();\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.pages, propName: \"pages\" }],\n      \"Pagination\"\n    );\n  }\n\n  @Listen(\"paginationItemClick\")\n  paginationItemClickHandler(ev: CustomEvent): void {\n    const page = ev.detail.page;\n    this.currentPage = page;\n    this.icPageChange.emit({ value: this.currentPage });\n  }\n\n  /**\n   * Sets the currently displayed page.\n   * @param {number} page The page number to set as the current page\n   */\n  @Method()\n  async setCurrentPage(page: number): Promise<void> {\n    if (typeof page === \"number\" && page > 0 && page <= this.pages) {\n      this.currentPage = page;\n    } else {\n      console.error(\n        \"Current page must be a number greater than zero but less than or equal to the total number of pages\"\n      );\n    }\n  }\n\n  private handleClickFirst = () => {\n    this.currentPage = 1;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  private handleClickPrevious = (): void => {\n    this.currentPage--;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  private handleClickNext = (): void => {\n    this.currentPage++;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  private handleClickLast = (): void => {\n    this.currentPage = this.pages;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  // button rendering abstracted from component render methods for clarity\n  private firstButton = () => {\n    return (\n      <ic-button\n        id=\"first-page-button\"\n        aria-label=\"Go to first page\"\n        theme={this.theme}\n        onClick={this.handleClickFirst}\n        class=\"page-button first-last\"\n        disabled={this.currentPage === 1 || this.disabled}\n        variant=\"icon-tertiary\"\n        monochrome={this.theme == \"light\" || this.theme == \"dark\"}\n        innerHTML={paginationFirstLast}\n      />\n    );\n  };\n\n  private previousButton = () => {\n    return (\n      <ic-button\n        id=\"previous-page-button\"\n        aria-label=\"Go to previous page\"\n        theme={this.theme}\n        onClick={this.handleClickPrevious}\n        class=\"page-button next-previous flip\"\n        disabled={this.currentPage === 1 || this.disabled}\n        variant=\"icon-tertiary\"\n        monochrome={this.theme == \"light\" || this.theme == \"dark\"}\n        innerHTML={paginationNextPrevious}\n      />\n    );\n  };\n\n  private nextButton = () => {\n    return (\n      <ic-button\n        id=\"next-page-button\"\n        aria-label=\"Go to next page\"\n        theme={this.theme}\n        onClick={this.handleClickNext}\n        class=\"page-button next-previous\"\n        disabled={this.currentPage === this.pages || this.disabled}\n        variant=\"icon-tertiary\"\n        monochrome={this.theme == \"light\" || this.theme == \"dark\"}\n        innerHTML={paginationNextPrevious}\n      />\n    );\n  };\n\n  private lastButton = () => {\n    return (\n      <ic-button\n        id=\"last-page-button\"\n        aria-label=\"Go to last page\"\n        theme={this.theme}\n        onClick={this.handleClickLast}\n        class=\"page-button first-last flip\"\n        disabled={this.currentPage === this.pages || this.disabled}\n        variant=\"icon-tertiary\"\n        monochrome={this.theme == \"light\" || this.theme == \"dark\"}\n        innerHTML={paginationFirstLast}\n      />\n    );\n  };\n\n  private renderStartEllipsis = () => {\n    return (\n      <ic-pagination-item\n        theme={this.theme}\n        monochrome={this.monochrome}\n        type=\"ellipsis\"\n        id=\"start-ellipsis\"\n        disabled={this.disabled}\n      />\n    );\n  };\n\n  private renderEndEllipsis = () => {\n    return (\n      <ic-pagination-item\n        theme={this.theme}\n        monochrome={this.monochrome}\n        type=\"ellipsis\"\n        id=\"end-ellipsis\"\n        disabled={this.disabled}\n      />\n    );\n  };\n\n  private renderStartItems = () => {\n    return this.startItems.map((page: number) => {\n      return (\n        <ic-pagination-item\n          theme={this.theme}\n          monochrome={this.monochrome}\n          selected={page === this.currentPage}\n          id={`pagination-item-${page}`}\n          type=\"page\"\n          page={page}\n          disabled={this.disabled}\n        />\n      );\n    });\n  };\n\n  private renderEndItems = () => {\n    return this.endItems.map((page: number) => {\n      return (\n        <ic-pagination-item\n          theme={this.theme}\n          monochrome={this.monochrome}\n          selected={page === this.currentPage}\n          id={`pagination-item-${page}`}\n          type=\"page\"\n          page={page}\n          disabled={this.disabled}\n        />\n      );\n    });\n  };\n\n  private renderMiddleItems = () => {\n    return this.midItems.map((page: number) => {\n      return (\n        <ic-pagination-item\n          theme={this.theme}\n          monochrome={this.monochrome}\n          selected={page === this.currentPage}\n          id={`pagination-item-${page}`}\n          type=\"page\"\n          page={page}\n          disabled={this.disabled}\n        />\n      );\n    });\n  };\n\n  render() {\n    const {\n      type,\n      currentPage,\n      hideCurrentPage,\n      disabled,\n      hideFirstAndLastPageButton,\n      label,\n      theme,\n      monochrome,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-pagination-monochrome\"]: monochrome,\n        }}\n      >\n        {type === \"simple\" && (\n          <nav\n            class={{\n              [\"disabled\"]: disabled,\n            }}\n            role=\"navigation\"\n            aria-label=\"Pagination Navigation\"\n          >\n            {hideFirstAndLastPageButton ? null : this.firstButton()}\n            {this.previousButton()}\n            <ic-pagination-item\n              theme={this.theme}\n              monochrome={this.monochrome}\n              type=\"simple-current\"\n              page={currentPage}\n              label={label}\n              class={{ [\"hide-current-page\"]: hideCurrentPage }}\n              disabled={disabled}\n            />\n            {this.nextButton()}\n            {hideFirstAndLastPageButton ? null : this.lastButton()}\n          </nav>\n        )}\n        {type === \"complex\" && (\n          <nav\n            class={{\n              [\"disabled\"]: disabled,\n            }}\n            role=\"navigation\"\n            aria-label=\"Pagination Navigation\"\n          >\n            {hideFirstAndLastPageButton ? null : this.firstButton()}\n            {this.previousButton()}\n            {this.renderStartItems()}\n            {this.startEllipsis && this.renderStartEllipsis()}\n            {this.renderMiddleItems()}\n            {this.endEllipsis && this.renderEndEllipsis()}\n            {this.renderEndItems()}\n            {this.nextButton()}\n            {hideFirstAndLastPageButton ? null : this.lastButton()}\n          </nav>\n        )}\n        {type === \"complex\" && (\n          <span class=\"sr-only\" aria-live=\"polite\">\n            Page {this.currentPage}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-81f80487.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icBadgeCss","Badge","this","ariaLabel","setBadgeColour","colorRGBA","convertToRGBA","customColor","r","g","b","a","el","style","backgroundColor","foregroundColour","getThemeForegroundColor","getLabel","maxNumber","Number","label","setAccessibleLabel","parentEl","parentElement","defaultAriaLabel","isAccessibleLabelDefined","accessibleLabel","tagName","parentAriaLabel","ariaLabelPrefix","visible","undefined","isPropDefined","accessibleLabelHandler","customColorHandler","variant","variantHandler","visibleHandler","componentWillLoad","_a","componentDidLoad","type","onComponentRequiredPropUndefined","prop","propName","render","position","size","theme","h","Host","class","id","role","name"],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n  :host(.ic-badge-show) {\n    animation: expand var(--ic-transition-duration-slow);\n  }\n\n  :host(.ic-badge-hide) {\n    animation: shrink var(--ic-transition-duration-slow);\n  }\n}\n\n:host {\n  display: flex;\n  height: var(--ic-space-md);\n  min-width: var(--ic-space-md);\n  width: fit-content;\n  border-radius: calc(2 * var(--ic-space-xxl));\n  position: absolute;\n}\n\n:host ic-typography {\n  --ic-typography-color: var(--ic-badge-text);\n}\n\n:host(.ic-badge-neutral) {\n  background-color: var(--ic-badge-dark) !important;\n}\n\n:host(.ic-badge-light) ic-typography {\n  --ic-typography-color: var(--ic-badge-text-monochrome);\n}\n\n:host(.ic-badge-light) ::slotted(*) {\n  fill: var(--ic-badge-icon-monochrome);\n}\n\n:host(.ic-badge-info) {\n  background-color: var(--ic-badge-info) !important;\n}\n\n:host(.ic-badge-light) {\n  background-color: var(--ic-badge-light) !important;\n}\n\n:host(.ic-badge-warning) {\n  background-color: var(--ic-badge-warning) !important;\n}\n\n:host(.ic-badge-warning) ic-typography {\n  --ic-typography-color: var(--ic-badge-warning-text);\n}\n\n:host(.ic-badge-warning) ::slotted(*) {\n  fill: var(--ic-badge-warning-icon);\n}\n\n:host(.ic-badge-error) {\n  background-color: var(--ic-badge-error) !important;\n}\n\n:host(.ic-badge-success) {\n  background-color: var(--ic-badge-success) !important;\n}\n\n:host(.ic-badge-small) {\n  height: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host(.ic-badge-large) {\n  height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-medium) {\n  height: var(--ic-space-xs);\n  width: var(--ic-space-xs);\n  min-width: var(--ic-space-xs);\n}\n\n:host(.ic-badge-dot.ic-badge-small) {\n  height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-dot.ic-badge-large) {\n  height: var(--ic-space-sm);\n  width: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host ::slotted(*) {\n  fill: var(--ic-badge-icon);\n}\n\n:host(.ic-badge-foreground-dark) ::slotted(*) {\n  fill: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ::slotted(*) {\n  fill: white;\n}\n\n:host(.ic-badge-foreground-dark) ic-typography {\n  --ic-typography-color: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ic-typography {\n  --ic-typography-color: var(--ic-color-primary-text-dark);\n}\n\n:host(.ic-badge-text) ic-typography {\n  align-self: center;\n  padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.ic-badge-text.ic-badge-small) ic-typography {\n  padding: 0 0.2132rem;\n}\n\n:host(.ic-badge-text.ic-badge-large) ic-typography {\n  padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.ic-badge-icon) ::slotted(svg) {\n  width: var(--ic-space-sm);\n  height: var(--ic-space-sm);\n  padding: var(--ic-space-xxxs);\n}\n\n:host(.ic-badge-icon.ic-badge-small) ::slotted(svg) {\n  width: var(--ic-space-xs);\n  height: var(--ic-space-xs);\n}\n\n:host(.ic-badge-icon.ic-badge-large) ::slotted(svg) {\n  width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.ic-badge-far) {\n  top: calc(-1 * var(--ic-space-xs));\n  right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.ic-badge-far.ic-badge-small),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-large) {\n  top: calc(-1 * var(--ic-space-xxs));\n  right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-far),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-small) {\n  top: calc(-1 * var(--ic-space-xxxs));\n  right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-near) {\n  top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n  right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.ic-badge-dot.ic-badge-near) {\n  top: calc(-1 * var(--ic-space-1px));\n  right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-badge-inline) {\n  position: static;\n}\n\n:host(.ic-badge-hide) {\n  visibility: hidden !important;\n  transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n\n@keyframes expand {\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes shrink {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0);\n  }\n}\n","import { Component, Element, Host, Prop, Watch, h } from \"@stencil/core\";\nimport {\n  IcBadgePositions,\n  IcBadgeTypes,\n  IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n  IcSizes,\n  IcThemeForeground,\n  IcColor,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  convertToRGBA,\n  getThemeForegroundColor,\n  isPropDefined,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n */\n@Component({\n  tag: \"ic-badge\",\n  styleUrl: \"ic-badge.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Badge {\n  private ariaLabel: string = null;\n  private foregroundColour: IcThemeForeground;\n  private parentAriaLabel: string;\n\n  @Element() el: HTMLIcBadgeElement;\n\n  /**\n   * The accessible label of the badge component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string;\n\n  @Watch(\"accessibleLabel\")\n  accessibleLabelHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  /**\n   * The custom badge colour. This will only style the badge component if variant=\"custom\".\n   * 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() customColor?: IcColor = null;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n  }\n\n  /**\n   * The maximum number shown on the badge appended with a +.\n   * This will only be displayed if type=\"text\" and label is not empty.\n   */\n  @Prop() maxNumber?: number;\n\n  /**\n   * The positioning of the badge in reference to the parent element.\n   */\n  @Prop() position?: IcBadgePositions = \"far\";\n\n  /**\n   * The size of the badge to be displayed.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * The text displayed in the badge. This will only be displayed if type=\"text\".\n   */\n  @Prop() label?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The type of badge to be displayed.\n   */\n  @Prop() type?: IcBadgeTypes = \"text\";\n\n  /**\n   * The variant of the badge to be displayed.\n   */\n  @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n  @Watch(\"variant\")\n  variantHandler(): void {\n    if (this.variant === \"custom\") {\n      this.setBadgeColour();\n    }\n  }\n\n  /**\n   * If `true`, the badge will be displayed.\n   */\n  @Prop() visible: boolean = true;\n\n  @Watch(\"visible\")\n  visibleHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  componentWillLoad(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n\n    const ariaLabel = this.el.parentElement?.ariaLabel;\n    if (ariaLabel) this.parentAriaLabel = ariaLabel;\n    this.setAccessibleLabel();\n  }\n\n  componentDidLoad(): void {\n    this.type === \"text\" &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.label, propName: \"label\" }],\n        \"Badge\"\n      );\n  }\n\n  private setBadgeColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n      this.foregroundColour = getThemeForegroundColor(\n        (r * 299 + g * 587 + b * 114) / 1000\n      );\n    }\n  };\n\n  private getLabel = () =>\n    this.maxNumber && Number(this.label) > this.maxNumber\n      ? `${this.maxNumber}+`\n      : this.label;\n\n  // Set aria-label on badge and / or parent element\n  // Aria-describedby seems to not work, probably due to shadow DOM\n  private setAccessibleLabel = () => {\n    const parentEl = this.el.parentElement;\n    const defaultAriaLabel = this.isAccessibleLabelDefined()\n      ? this.accessibleLabel\n      : this.label || \"with badge being displayed\";\n\n    if (parentEl) {\n      const { tagName } = parentEl;\n      if (\n        tagName !== \"IC-CARD\" &&\n        (tagName !== \"IC-TAB\" || (tagName === \"IC-TAB\" && this.parentAriaLabel))\n      ) {\n        const ariaLabelPrefix = this.parentAriaLabel\n          ? `${this.parentAriaLabel} ,`\n          : \"\";\n        parentEl.ariaLabel = this.visible\n          ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n          : undefined;\n      } else {\n        this.ariaLabel = `, ${defaultAriaLabel}`;\n      }\n    }\n  };\n\n  private isAccessibleLabelDefined = () =>\n    isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n  render() {\n    const {\n      ariaLabel,\n      el,\n      foregroundColour,\n      getLabel,\n      position,\n      size,\n      label,\n      type,\n      variant,\n      visible,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-badge-${position}`]: true,\n          [`ic-badge-${size}`]: true,\n          [`ic-badge-${variant}`]: true,\n          [`ic-badge-${type}`]: true,\n          [`ic-badge-foreground-${foregroundColour}`]:\n            foregroundColour !== null && variant === \"custom\",\n          [`${visible ? \"ic-badge-show\" : \"ic-badge-hide\"}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        id={el.id || null}\n        aria-label={ariaLabel}\n        role=\"status\"\n      >\n        {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n        {type === \"text\" && label && (\n          <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n            {getLabel()}\n          </ic-typography>\n        )}\n        {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kHAAA,MAAMA,EAAa,o+H,MC6BNC,EAAK,M,yBACRC,KAAAC,UAAoB,KAgGpBD,KAAAE,eAAiB,KACvB,MAAMC,EAAYC,EAAcJ,KAAKK,aAErC,GAAIF,EAAW,CACb,MAAMG,EAAEA,EAACC,EAAEA,EAACC,EAAEA,EAACC,EAAEA,GAAMN,EACvBH,KAAKU,GAAGC,MAAMC,gBAAkB,QAAQN,MAAMC,MAAMC,MAAMC,KAC1DT,KAAKa,iBAAmBC,GACrBR,EAAI,IAAMC,EAAI,IAAMC,EAAI,KAAO,I,GAK9BR,KAAAe,SAAW,IACjBf,KAAKgB,WAAaC,OAAOjB,KAAKkB,OAASlB,KAAKgB,UACxC,GAAGhB,KAAKgB,aACRhB,KAAKkB,MAIHlB,KAAAmB,mBAAqB,KAC3B,MAAMC,EAAWpB,KAAKU,GAAGW,cACzB,MAAMC,EAAmBtB,KAAKuB,2BAC1BvB,KAAKwB,gBACLxB,KAAKkB,OAAS,6BAElB,GAAIE,EAAU,CACZ,MAAMK,QAAEA,GAAYL,EACpB,GACEK,IAAY,YACXA,IAAY,UAAaA,IAAY,UAAYzB,KAAK0B,iBACvD,CACA,MAAMC,EAAkB3B,KAAK0B,gBACzB,GAAG1B,KAAK0B,oBACR,GACJN,EAASnB,UAAYD,KAAK4B,QACtB,GAAGD,KAAmBL,IACtBO,S,KACC,CACL7B,KAAKC,UAAY,KAAKqB,G,IAKpBtB,KAAAuB,yBAA2B,IACjCO,EAAc9B,KAAKwB,kBAAoBxB,KAAKwB,kBAAoB,K,gDAxHlC,K,uCAgBM,M,UAKb,S,gCAUK,U,UAKA,O,aAKM,U,aAYT,I,CA7D3B,sBAAAO,GACE/B,KAAKmB,oB,CAUP,kBAAAa,GACEhC,KAAKiC,UAAY,UAAYjC,KAAKE,gB,CAwCpC,cAAAgC,GACE,GAAIlC,KAAKiC,UAAY,SAAU,CAC7BjC,KAAKE,gB,EAUT,cAAAiC,GACEnC,KAAKmB,oB,CAGP,iBAAAiB,G,MACEpC,KAAKiC,UAAY,UAAYjC,KAAKE,iBAElC,MAAMD,GAAYoC,EAAArC,KAAKU,GAAGW,iBAAa,MAAAgB,SAAA,SAAAA,EAAEpC,UACzC,GAAIA,EAAWD,KAAK0B,gBAAkBzB,EACtCD,KAAKmB,oB,CAGP,gBAAAmB,GACEtC,KAAKuC,OAAS,QACZC,EACE,CAAC,CAAEC,KAAMzC,KAAKkB,MAAOwB,SAAU,UAC/B,Q,CAkDN,MAAAC,GACE,MAAM1C,UACJA,EAASS,GACTA,EAAEG,iBACFA,EAAgBE,SAChBA,EAAQ6B,SACRA,EAAQC,KACRA,EAAI3B,MACJA,EAAKqB,KACLA,EAAIN,QACJA,EAAOL,QACPA,EAAOkB,MACPA,GACE9C,KAEJ,OACE+C,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,YAAYL,KAAa,KAC1B,CAAC,YAAYC,KAAS,KACtB,CAAC,YAAYZ,KAAY,KACzB,CAAC,YAAYM,KAAS,KACtB,CAAC,uBAAuB1B,KACtBA,IAAqB,MAAQoB,IAAY,SAC3C,CAAC,GAAGL,EAAU,gBAAkB,mBAAoB,KACpD,CAAC,YAAYkB,KAAUA,IAAU,WAEnCI,GAAIxC,EAAGwC,IAAM,KAAI,aACLjD,EACZkD,KAAK,UAEJZ,IAAS,QAAUQ,EAAA,QAAMK,KAAK,eAC9Bb,IAAS,QAAUrB,GAClB6B,EAAA,iBAAed,QAASY,IAAS,QAAU,cAAgB,SACxD9B,KAGJwB,IAAS,OAASQ,EAAA,QAAME,MAAM,WAAS,S"}

package/dist/core/p-85be0268.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icCardVerticalCss","CardVertical","this","hostMutationObserver","parentFocussed","isFocussed","parentBlurred","toggleExpanded","areaExpanded","hostMutationCallback","mutationList","some","type","addedNodes","removedNodes","checkSlotInChildMutations","forceUpdate","disconnectedCallback","parentIsAnchorTag","parentEl","removeEventListener","_a","disconnect","componentWillLoad","el","parentElement","tagName","clickable","classList","add","addEventListener","removeDisabledFalse","disabled","componentDidLoad","isSlotUsed","onComponentRequiredPropUndefined","prop","heading","propName","updateTheme","MutationObserver","observe","childList","handleHostClick","event","stopImmediatePropagation","themeChangeHandler","ev","detail","mode","setFocus","shadowRoot","querySelector","focus","newTheme","foregroundColor","getThemeFromContext","IcThemeForegroundEnum","Default","monochrome","theme","render","expandable","fullWidth","message","href","hreflang","referrerpolicy","rel","subheading","target","Component","undefined","attrs","hrefLang","referrerPolicy","h","Host","class","Object","assign","card","fullwidth","focussed","tabindex","name","variant","id","label","silent","onClick","innerHTML","chevronIcon"],"sources":["src/components/ic-card-vertical/ic-card-vertical.css?tag=ic-card-vertical&encapsulation=shadow","src/components/ic-card-vertical/ic-card-vertical.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n}\n\na {\n  text-decoration: none !important;\n  color: var(--ic-card-text-primary) !important;\n}\n\na:visited {\n  color: var(--ic-card-link-action-dark) !important;\n}\n\nbutton {\n  border: none;\n  background-color: transparent;\n  outline: var(--ic-hc-focus-outline);\n}\n\n.card {\n  display: flex;\n  flex-direction: column;\n  border: var(--ic-space-1px) solid var(--ic-card-border-primary);\n  border-radius: var(--ic-border-radius);\n  box-sizing: border-box;\n  padding: var(--ic-space-md);\n  text-align: left;\n  color: var(--ic-card-text-primary);\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n  width: inherit;\n  min-width: fit-content;\n  height: fit-content;\n  min-height: 100%;\n\n  ::slotted(svg) {\n    fill: var(--ic-card-icon);\n  }\n  &.monochrome {\n    border: var(--ic-border-width) solid var(--ic-card-border-monochrome);\n  }\n  &.fullwidth {\n    width: 100%;\n  }\n  &.clickable {\n    &:hover {\n      background-color: var(--ic-card-background-hover);\n      border: var(--ic-space-1px) solid var(--ic-card-hover-border-color);\n      cursor: pointer;\n    }\n    &.focussed,\n    &:focus {\n      background-color: var(--ic-card-background-hover);\n      box-shadow: var(--ic-border-focus);\n      outline: var(--ic-hc-focus-outline);\n      border: var(--ic-space-1px) solid var(--ic-card-pressed-border-color);\n    }\n    &:active {\n      background-color: var(--ic-card-background-pressed);\n      box-shadow: var(--ic-border-focus);\n\n      .card-title {\n        text-decoration: none;\n      }\n    }\n    .card-title {\n      --ic-typography-color: var(--ic-card-clickable-text);\n\n      color: var(--ic-card-clickable-text);\n      text-decoration: underline;\n      text-decoration-thickness: var(--ic-space-1px);\n    }\n  }\n  &.disabled {\n    border: var(--ic-space-1px) dashed var(--ic-card-disabled-border-color);\n\n    .card-message,\n    .subheading,\n    .card-title {\n      --ic-typography-color: var(--ic-card-disabled-text);\n    }\n    .card-title {\n      text-decoration: underline;\n      text-decoration-thickness: var(--ic-space-1px);\n      text-decoration-color: var(--ic-card-disabled-text);\n      color: var(--ic-card-disabled-text);\n    }\n    ::slotted(svg) {\n      fill: var(--ic-card-disabled-text);\n    }\n  }\n}\n\n.card-header {\n  display: flex;\n  align-items: center;\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  padding-right: var(--ic-space-xs);\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n  display: inline-block;\n  border-bottom: 0.25rem solid !important;\n  margin-bottom: -0.25rem !important;\n  text-decoration: none;\n}\n\n@supports (text-underline-offset: 25%) {\n  .card.clickable:hover .card-title,\n  .card.clickable:focus .card-title,\n  .card.clickable.focussed .card-title {\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\n.subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n  margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n  margin-top: var(--ic-space-md);\n  align-items: left;\n}\n\n.interaction-button {\n  margin-left: auto;\n}\n\n.image-top {\n  margin-bottom: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.image-mid {\n  margin-top: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.interaction-area {\n  display: flex;\n  flex-grow: 1;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-md);\n  align-items: flex-end;\n}\n\n.interaction-controls {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--ic-space-sm);\n}\n\n.toggle-button {\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: var(--ic-space-xs);\n  margin: var(--ic-space-1px) 0;\n  min-width: 0;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n  border-radius: var(--ic-border-radius);\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  vertical-align: middle;\n\n  &:hover {\n    background-color: var(--ic-card-background-hover);\n  }\n  &:focus {\n    box-shadow: var(--ic-border-focus);\n  }\n  &:active:not(:focus) {\n    background-color: var(--ic-card-background-pressed);\n  }\n\n  svg {\n    pointer-events: none;\n    width: 100% !important;\n    height: 100% !important;\n    fill: currentcolor !important;\n  }\n}\n\n#ic-tooltip-expand-button {\n  margin-left: auto;\n  position: relative;\n}\n\n.toggle-button-closed svg {\n  transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n  transform: rotate(-90deg);\n}\n\n.expanded-content {\n  margin-top: var(--ic-space-md);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .card {\n    ::slotted(svg) {\n      fill: currentcolor;\n    }\n    &.disabled {\n      border-color: GrayText !important;\n\n      ::slotted(svg) {\n        fill: GrayText !important;\n      }\n      .card-message,\n      .subheading,\n      .card-title {\n        color: GrayText;\n\n        --ic-typography-color: GrayText;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Listen,\n  Prop,\n  State,\n  h,\n  Method,\n  forceUpdate,\n  Host,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getThemeFromContext,\n  removeDisabledFalse,\n  checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n * @slot badge - Badge component overlaying the top right of the card.\n */\n@Component({\n  tag: \"ic-card-vertical\",\n  styleUrl: \"ic-card-vertical.css\",\n  shadow: true,\n})\nexport class CardVertical {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcCardVerticalElement;\n\n  @State() areaExpanded: boolean = false;\n  @State() isFocussed: boolean = false;\n  @State() monochrome: boolean = false;\n  @State() parentEl: HTMLElement | null = null;\n  @State() parentIsAnchorTag: boolean = false;\n\n  /**\n   * If `true`, the card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n\n  /**\n   * If `true`, the card will be disabled if it is clickable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   *  If `true`, the card will have an expandable area and expansion toggle button.\n   */\n  @Prop() expandable?: boolean = false;\n\n  /**\n   *  If `true`, the card will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The heading for the card. This is required, unless a slotted heading is used.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n\n  /**\n   * The main body message of the card.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme?: IcThemeMode = \"inherit\";\n\n  disconnectedCallback(): void {\n    if (this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Card\"\n      );\n    this.updateTheme();\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent<IcTheme>): void {\n    this.updateTheme(ev.detail.mode);\n  }\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"a\")) {\n      this.el.shadowRoot.querySelector(\"a\").focus();\n    } else if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.monochrome = true;\n      this.theme = foregroundColor;\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.areaExpanded = !this.areaExpanded;\n  };\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(({ type, addedNodes, removedNodes }) =>\n        type === \"childList\"\n          ? checkSlotInChildMutations(addedNodes, removedNodes, [\n              \"message\",\n              \"adornment\",\n              \"expanded-content\",\n              \"image-top\",\n              \"image-mid\",\n              \"icon\",\n              \"interaction-button\",\n              \"badge\",\n              \"interaction-controls\",\n            ])\n          : false\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      clickable,\n      disabled,\n      expandable,\n      fullWidth,\n      heading,\n      isFocussed,\n      message,\n      monochrome,\n      href,\n      hreflang,\n      parentIsAnchorTag,\n      referrerpolicy,\n      rel,\n      subheading,\n      target,\n      theme,\n    } = this;\n\n    const Component =\n      parentIsAnchorTag || !clickable\n        ? \"div\"\n        : href === undefined\n        ? \"button\"\n        : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <Component\n          class={{\n            card: true,\n            clickable: clickable && !disabled,\n            disabled,\n            fullwidth: fullWidth,\n            focussed: isFocussed,\n            monochrome: monochrome,\n          }}\n          tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n          aria-disabled={disabled ? \"true\" : null}\n          disabled={disabled ? true : null}\n          {...attrs}\n        >\n          {isSlotUsed(this.el, \"image-top\") && (\n            <div class=\"image-top\">\n              <slot name=\"image-top\"></slot>\n            </div>\n          )}\n          <div class=\"card-header\">\n            {isSlotUsed(this.el, \"icon\") && (\n              <div class=\"icon\">\n                <slot name=\"icon\" />\n              </div>\n            )}\n            <div class=\"card-title\">\n              <slot name=\"heading\">\n                <ic-typography variant=\"h4\">\n                  <p>{heading}</p>\n                </ic-typography>\n              </slot>\n            </div>\n            {isSlotUsed(this.el, \"interaction-button\") && (\n              <div class=\"interaction-button\">\n                <slot name=\"interaction-button\"></slot>\n              </div>\n            )}\n          </div>\n          {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"subtitle-small\">\n                  {subheading}\n                </ic-typography>\n              </slot>\n            </div>\n          )}\n          {isSlotUsed(this.el, \"adornment\") && (\n            <div class=\"adornment\">\n              <slot name=\"adornment\"></slot>\n            </div>\n          )}\n          {isSlotUsed(this.el, \"image-mid\") && (\n            <div class=\"image-mid\">\n              <slot name=\"image-mid\"></slot>\n            </div>\n          )}\n          {(message || isSlotUsed(this.el, \"message\")) && (\n            <div class=\"card-message\">\n              {message && (\n                <ic-typography variant=\"body\">{message}</ic-typography>\n              )}\n              {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n            </div>\n          )}\n          {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n            <div class=\"interaction-area\">\n              <div class=\"interaction-controls\">\n                <slot name=\"interaction-controls\"></slot>\n              </div>\n              {expandable && (\n                <ic-tooltip\n                  id=\"ic-tooltip-expand-button\"\n                  label=\"Toggle expandable area\"\n                  silent\n                >\n                  <button\n                    class={{\n                      \"toggle-button\": true,\n                      [`toggle-button-${\n                        this.areaExpanded ? \"expanded\" : \"closed\"\n                      }`]: true,\n                    }}\n                    aria-label=\"Toggle expandable area\"\n                    aria-expanded={`${this.areaExpanded}`}\n                    aria-controls={\n                      this.areaExpanded ? \"expanded-content-area\" : null\n                    }\n                    onClick={this.toggleExpanded}\n                    innerHTML={chevronIcon}\n                  ></button>\n                </ic-tooltip>\n              )}\n            </div>\n          )}\n          {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n            <div class=\"expanded-content\" id=\"expanded-content-area\">\n              <slot name=\"expanded-content\"></slot>\n            </div>\n          )}\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </Component>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-85d33e38.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icNavigationButtonCss","MUTABLE_ATTRIBUTES","IC_INHERITED_ARIA","NavigationButton","this","inheritedAttributes","hostMutationObserver","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","includes","el","getAttribute","forceUpdate","getThemeForegroundColor","componentWillLoad","inheritAttributes","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","MutationObserver","observe","attributes","componentWillRender","iconEl","querySelector","setAttribute","disconnectedCallback","_a","disconnect","navBarMenuOpenHandler","mode","navBarMenuCloseHandler","themeChangeHandler","ev","theme","detail","initialAppearance","setFocus","buttonEl","focus","render","href","target","rel","download","referrerpolicy","className","variant","appearance","size","fullWidth","disableTooltip","IcThemeForegroundEnum","Default","buttonProps","h","Host","class","Object","assign","ref","monochrome","slot","name","isSlotUsed"],"sources":["src/components/ic-navigation-button/ic-navigation-button.css?tag=ic-navigation-button&encapsulation=shadow","src/components/ic-navigation-button/ic-navigation-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  margin-right: var(--ic-space-xs);\n  list-style: none;\n}\n\n:host(.in-side-menu) {\n  margin-right: 0;\n}\n\n:host::part(button) {\n  height: 100%;\n  min-height: 2.5rem;\n}\n\n:host(.in-side-menu) ::part(button) {\n  color: var(--ic-top-navigation-icon-active);\n}\n\n:host(.in-side-menu) ::part(button):hover {\n  color: var(--ic-top-navigation-icon-hover);\n  background-color: var(--ic-top-navigation-icon-hover-background);\n}\n\n:host(.in-side-menu) ::part(button):active {\n  color: var(--ic-top-navigation-icon-pressed);\n  background-color: var(--ic-top-navigation-icon-pressed-background);\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: string } = {};\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  @State() initialAppearance: IcThemeForegroundNoDefault | IcThemeForeground =\n    getThemeForegroundColor();\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = theme.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"medium\" | \"large\" = \"large\";\n    let fullWidth = false;\n    let disableTooltip = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"medium\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n      disableTooltip = true;\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n      disableTooltip,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"in-side-menu\"]: this.mode === \"menu\",\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        <ic-button\n          class={className}\n          aria-label={variant == \"icon\" ? this.label : null}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n          monochrome={this.mode !== \"menu\"}\n          theme={getThemeForegroundColor() == \"light\" ? \"light\" : \"dark\"}\n        >\n          {label}\n          <slot slot=\"left-icon\" name=\"icon\"></slot>\n          {isSlotUsed(this.el, \"badge\") && variant === \"icon\" && (\n            <slot name=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uIAAA,MAAMA,EAAwB,03FC4B9B,MAAMC,EAAqB,IAAIC,EAAmB,S,MAcrCC,EAAgB,M,yBAEnBC,KAAAC,oBAA+C,GAC/CD,KAAAE,qBAAyC,KAuGzCF,KAAAG,qBAAwBC,IAC9B,IAAIC,EAAuB,MAC3BD,EAAaE,SAAQ,EAAGC,oBACtB,GAAIV,EAAmBW,SAASD,GAAgB,CAC9CP,KAAKC,oBAAoBM,GACvBP,KAAKS,GAAGC,aAAaH,GACvBF,EAAuB,I,KAG3B,GAAIA,EAAsB,CACxBM,EAAYX,K,0BA5GdY,I,UAIgC,S,cAKI,M,mJAmCR,S,CAE9B,iBAAAC,GACEb,KAAKC,oBAAsBa,EAAkBd,KAAKS,GAAIZ,E,CAGxD,gBAAAkB,GACEC,EACE,CAAC,CAAEC,KAAMjB,KAAKkB,MAAOC,SAAU,UAC/B,qBAGFnB,KAAKE,qBAAuB,IAAIkB,iBAAiBpB,KAAKG,sBACtDH,KAAKE,qBAAqBmB,QAAQrB,KAAKS,GAAI,CACzCa,WAAY,M,CAIhB,mBAAAC,GACE,MAAMC,EAASxB,KAAKS,GAAGgB,cAAc,iBACrCD,IAAW,MAAQA,EAAOE,aAAa,UAAW,Y,CAGpD,oBAAAC,G,OACEC,EAAA5B,KAAKE,wBAAoB,MAAA0B,SAAA,SAAAA,EAAEC,Y,CAI7B,qBAAAC,GACE9B,KAAK+B,KAAO,M,CAId,sBAAAC,GACEhC,KAAK+B,KAAO,Q,CAId,kBAAAE,CAAmBC,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BpC,KAAKqC,kBAAoBF,EAAMJ,I,CAOjC,cAAMO,GACJ,GAAItC,KAAKuC,SAAU,CACjBvC,KAAKuC,SAASC,O,EAmBlB,MAAAC,GACE,MAAMC,KAAEA,EAAIC,OAAEA,EAAMC,IAAEA,EAAGC,SAAEA,EAAQC,eAAEA,GAAmB9C,KAExD,IAAIkB,EAAQ,GACZ,IAAI6B,EAAY,GAChB,IAAIC,EAA+B,OACnC,IAAIC,EACFjD,KAAKqC,kBACP,IAAIa,EAA2B,QAC/B,IAAIC,EAAY,MAChB,IAAIC,EAAiB,MAErB,GAAIpD,KAAK+B,OAAS,OAAQ,CACxBb,EAAQlB,KAAKkB,MACb8B,EAAU,WACVC,EAAaI,EAAsBC,QACnCJ,EAAO,SACPC,EAAY,KACZJ,EAAY,qBACZK,EAAiB,I,CAGnB,MAAMG,EAAc,CAClBP,UACAC,aACAC,OACAR,OACAC,SACAC,MACAC,WACAC,iBACAK,YACAC,kBAGF,OACEI,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,gBAAiB1D,KAAK+B,OAAS,OAChC,CAAC,YAAY/B,KAAKmC,SAAUnC,KAAKmC,QAAU,YAG7CqB,EAAA,YAAAG,OAAAC,OAAA,CACEF,MAAOX,EAAS,aACJC,GAAW,OAAShD,KAAKkB,MAAQ,KAC7C2C,IAAMpD,GAAQT,KAAKuC,SAAW9B,GAC1B8C,EACAvD,KAAKC,oBAAmB,CAC5B6D,WAAY9D,KAAK+B,OAAS,OAC1BI,MAAOvB,KAA6B,QAAU,QAAU,SAEvDM,EACDsC,EAAA,QAAMO,KAAK,YAAYC,KAAK,SAC3BC,EAAWjE,KAAKS,GAAI,UAAYuC,IAAY,QAC3CQ,EAAA,QAAMQ,KAAK,W"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["icMenuItemCss","MenuItem","this","handleClick","e","isPropDefined","submenuTriggerFor","triggerPopoverMenuInstance","emit","variant","preventDefault","checked","icToggleChecked","handleMenuItemClick","el","getMenuItemAriaLabel","ariaLabel","label","description","keyboardShortcutLabel","classList","contains","parentEl","parentElement","tagName","componentWillLoad","removeDisabledFalse","disabled","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","handleHostClick","stopImmediatePropagation","render","MenuItemInformation","h","class","Host","role","undefined","fullWidth","onClick","href","hreflang","target","rel","referrerpolicy","isSlotUsed","name","innerHTML","Check","Chevron"],"sources":["src/components/ic-menu-item/ic-menu-item.css?tag=ic-menu-item&encapsulation=shadow","src/components/ic-menu-item/ic-menu-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nli {\n  list-style: none;\n  padding: 0;\n}\n\n:host ::part(button) {\n  color: var(--ic-popover-menu-item-check);\n  padding: calc(var(--ic-space-xxxs) / 2);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--ic-space-xs);\n  border-radius: 0;\n  min-height: 2.5rem;\n  height: auto;\n}\n\n.focus-border {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--ic-space-xs);\n  border-radius: var(--ic-border-radius);\n  margin: calc(var(--ic-space-xxxs) / 2);\n  padding: var(--ic-space-xxs);\n  border: var(--ic-space-xxxs) dashed transparent;\n\n  --icon-height: auto;\n}\n\n:host(.ic-menu-item-disabled) ::part(button) {\n  color: var(--ic-popover-menu-item-check-disabled) !important;\n\n  --ic-typography-color: var(--ic-popover-menu-item-check-disabled) !important;\n\n  pointer-events: none;\n}\n\n:host(.ic-menu-item-disabled) .menu-item-label,\n:host(.ic-menu-item-disabled) .shortcut,\n:host(.ic-menu-item-disabled) .menu-item-description {\n  --ic-typography-color: var(--ic-popover-menu-item-label-disabled) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button) {\n  color: var(--ic-popover-menu-destructive-item-icon);\n\n  --ic-typography-color: var(--ic-popover-menu-destructive-item-label);\n}\n\n:host ::part(button):hover {\n  background-color: var(--ic-popover-background-hover);\n}\n\n:host ::part(button):focus-visible,\n:host ::part(button):focus {\n  color: var(--ic-popover-menu-item-icon-focused);\n\n  --ic-typography-color: purple;\n\n  background-color: var(--ic-popover-background-focus);\n  box-shadow: none;\n}\n\n:host(.ic-menu-item-disabled) ::part(button):focus-visible,\n:host(.ic-menu-item-disabled) ::part(button):focus {\n  color: var(--ic-popover-menu-item-icon-disabled) !important;\n\n  --ic-typography-color: orange !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):focus-visible,\n:host([variant=\"destructive\"]) ::part(button):focus {\n  background-color: var(--ic-popover-destructive-background-focus);\n}\n\nic-button:focus-within .menu-item-label,\nic-button:focus-within .shortcut,\nic-button:focus-within .menu-item-description {\n  --ic-typography-color: var(--ic-popover-menu-item-label-focused);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n  border-color: var(--ic-popover-menu-border);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n  --ic-typography-color: var(--ic-popover-menu-item-label-disabled) !important;\n}\n\n:host ::part(button):active {\n  background-color: var(--ic-popover-background-pressed);\n  color: var(--ic-popover-menu-item-label) !important;\n\n  --ic-typography-color: var(--ic-popover-menu-item-label) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):active {\n  background-color: var(--ic-popover-background-pressed);\n  color: var(--ic-popover-menu-destructive-item-label) !important;\n\n  --ic-typography-color: var(\n    --ic-popover-menu-destructive-item-label\n  ) !important;\n}\n\n.menu-item-info {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  align-items: baseline;\n  white-space: pre-line;\n  text-align: left;\n}\n\n.menu-labels {\n  display: flex;\n  align-items: baseline;\n  gap: var(--ic-space-xs);\n}\n\n.menu-item-description {\n  --ic-typography-color: var(--ic-popover-menu-item-description);\n}\n\n.shortcut {\n  --ic-typography-color: var(--ic-popover-menu-item-shortcut);\n\n  display: flex;\n  flex: min-content;\n}\n\n:host([variant=\"destructive\"]) .menu-item-label {\n  text-transform: uppercase;\n  font-weight: 600;\n  letter-spacing: 0.025em;\n}\n\nic-button:active .menu-item-label {\n  --ic-typography-color: var(--ic-popover-menu-item-label);\n}\n\nic-button:active .menu-item-description {\n  --ic-typography-color: var(--ic-popover-menu-item-description);\n}\n\nic-button:active .shortcut {\n  --ic-typography-color: var(--ic-popover-menu-item-shortcut);\n}\n\n:host([variant=\"destructive\"]) ic-button:active .menu-item-label {\n  --ic-typography-color: var(\n    --ic-popover-menu-destructive-item-label\n  ) !important;\n}\n\n.icon,\n.check-icon,\n.submenu-icon,\n.icon ::slotted(svg),\n.check-icon svg,\n.submenu-icon svg {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n.check-icon.hide {\n  visibility: hidden;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  :host ::part(button) {\n    border: canvas;\n  }\n\n  :host ::part(button):focus-visible {\n    outline: var(--ic-space-xxxs) solid transparent;\n  }\n\n  .focus-border {\n    border-color: canvas;\n  }\n\n  :host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n    border-color: GrayText;\n  }\n\n  :host(.ic-menu-item-disabled) .menu-item-info,\n  :host(.ic-menu-item-disabled) .menu-item-label,\n  :host(.ic-menu-item-disabled) .shortcut,\n  :host(.ic-menu-item-disabled) .menu-item-description,\n  :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,\n  :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n  :host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n  :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n    --ic-typography-color: GrayText !important;\n  }\n\n  :host(.ic-menu-item-disabled) ::part(button):focus-visible,\n  :host(.ic-menu-item-disabled) ::part(button):focus {\n    outline-color: GrayText !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot icon - Content will be placed to the left of the menu item label.\n */\n\n@Component({\n  tag: \"ic-menu-item\",\n  styleUrl: \"ic-menu-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class MenuItem {\n  @Element() el: HTMLIcMenuItemElement;\n\n  /**\n   * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * The description displayed in the menu item, below the label.\n   */\n  @Prop() description?: string;\n\n  /**\n   * If `true`, the menu item will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the menu item as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label describing the keyboard shortcut for a menu item's action.\n   */\n  @Prop() keyboardShortcutLabel?: string;\n\n  /**\n   * The label to display in the menu item.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n   */\n  @Prop() submenuTriggerFor?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * The variant of the menu item.\n   */\n  @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n    \"default\";\n\n  /**\n   * @internal Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item.\n   */\n  @Event() handleMenuItemClick: EventEmitter<HTMLIcMenuItemElement>;\n\n  /**\n   * Emitted when the user clicks a menu item that is set to the toggle variant.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n   */\n  @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    // This ensures that trigger menu items are always set to the default variant\n    if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n      this.variant = \"default\";\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Menu Item\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    }\n  }\n\n  private handleClick = (e: Event): void => {\n    if (isPropDefined(this.submenuTriggerFor)) {\n      this.triggerPopoverMenuInstance.emit();\n    } else if (this.variant === \"toggle\") {\n      e.preventDefault();\n      this.checked = !this.checked;\n      this.icToggleChecked.emit({\n        checked: this.checked,\n      });\n    }\n    this.handleMenuItemClick.emit(this.el);\n  };\n\n  private getMenuItemAriaLabel = (): string => {\n    let ariaLabel = this.label;\n\n    if (isPropDefined(this.description)) {\n      ariaLabel = `${ariaLabel}, ${this.description}`;\n    }\n\n    if (isPropDefined(this.keyboardShortcutLabel)) {\n      ariaLabel = `${ariaLabel}, ${this.keyboardShortcutLabel}`;\n    }\n\n    if (this.variant === \"destructive\") {\n      ariaLabel = `${ariaLabel}, destructive`;\n    }\n\n    if (isPropDefined(this.submenuTriggerFor)) {\n      ariaLabel = `${ariaLabel}, triggers submenu`;\n    }\n\n    if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n      ariaLabel = \"Go back to parent menu\";\n    }\n    const parentEl = this.el.parentElement;\n\n    if (\n      parentEl.tagName === \"IC-MENU-GROUP\" &&\n      (parentEl as HTMLIcMenuGroupElement).label\n    ) {\n      return `${ariaLabel}, ${\n        (parentEl as HTMLIcMenuGroupElement).label\n      } menu group`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  render() {\n    // A sub-component to layout the menu information correctly in ic-button\n    const MenuItemInformation = () => {\n      return (\n        <div class=\"menu-item-info\">\n          <div class=\"menu-labels\">\n            <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n            {this.keyboardShortcutLabel && (\n              <ic-typography variant=\"caption\" class=\"shortcut\">\n                {this.keyboardShortcutLabel}\n              </ic-typography>\n            )}\n          </div>\n          {this.description && (\n            <ic-typography class=\"menu-item-description\" variant=\"caption\">\n              {this.description}\n            </ic-typography>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"ic-menu-item-disabled\"]: this.disabled,\n        }}\n      >\n        <li\n          role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n          aria-disabled={`${this.disabled}`}\n          aria-checked={\n            this.variant === \"toggle\"\n              ? this.checked\n                ? \"true\"\n                : \"false\"\n              : undefined\n          }\n        >\n          <ic-button\n            fullWidth\n            variant=\"tertiary\"\n            onClick={this.handleClick}\n            href={isPropDefined(this.href)}\n            hreflang={isPropDefined(this.hreflang)}\n            target={isPropDefined(this.target)}\n            rel={isPropDefined(this.rel)}\n            referrerpolicy={\n              this.referrerpolicy !== undefined ? this.referrerpolicy : null\n            }\n            aria-disabled={`${this.disabled}`}\n            aria-label={this.getMenuItemAriaLabel()}\n            aria-haspopup={\n              isPropDefined(this.submenuTriggerFor) ||\n              this.el.classList.contains(\"ic-popover-submenu-back-button\")\n                ? \"menu\"\n                : false\n            }\n          >\n            <div class=\"focus-border\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <span class=\"icon\">\n                  <slot name=\"icon\"></slot>\n                </span>\n              )}\n              <MenuItemInformation />\n              {this.variant === \"toggle\" && (\n                <span\n                  class={{\n                    [\"check-icon\"]: true,\n                    [\"hide\"]: !this.checked,\n                  }}\n                  aria-hidden=\"true\"\n                  innerHTML={Check}\n                />\n              )}\n              {isPropDefined(this.submenuTriggerFor) && (\n                <span\n                  class={{ [\"submenu-icon\"]: true }}\n                  aria-hidden=\"true\"\n                  innerHTML={Chevron}\n                />\n              )}\n            </div>\n          </ic-button>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,H as o,g as n}from"./p-6b5e91e2.js";import{i as a}from"./p-f99576e0.js";import{C as s}from"./p-3b185c32.js";const r='/*! 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;border-bottom:var(--ic-space-1px) solid var(--ic-accordion-divider)}:host .expand-chevron{color:var(--ic-accordion-chevron)}:host(.ic-accordion-disabled) .expand-chevron{color:var(--ic-accordion-chevron-disabled)}.section-button.small{padding:var(--ic-space-xxs) var(--ic-space-xs)}.section-button.large{padding:var(--ic-space-sm) var(--ic-space-xs)}:host(:first-of-type){border-top:var(--ic-space-1px) solid var(--ic-accordion-divider)}:focus{outline:none}.section-button{background-color:transparent;display:flex;align-items:center;width:100%;padding:var(--ic-space-xs);font-weight:var(--ic-font-weight-bold);border:none}.section-header{--ic-typography-color:var(--ic-accordion-heading-text);color:var(--ic-accordion-heading-text);text-align:left;flex:1 0}:host(.ic-accordion-disabled) .section-header{--ic-typography-color:var(--ic-accordion-heading-text-disabled);color:var(--ic-accordion-heading-text-disabled)}button:hover{background-color:var(--ic-accordion-background-hover);cursor:pointer}button:active{background-color:var(--ic-accordion-background-pressed)}button:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast)}button:disabled{pointer-events:none}.icon-container{margin:0 var(--ic-space-xs) 0 0;display:flex;align-items:center;width:var(--ic-space-lg);height:var(--ic-space-lg);color:var(--ic-accordion-icon)}:host(.ic-accordion-disabled) .icon-container{color:var(--ic-accordion-icon-disabled)}::slotted(svg){width:var(--ic-space-md);height:var(--ic-space-md)}.expand-chevron{width:var(--ic-space-lg);height:var(--ic-space-lg);margin-left:calc(var(--ic-space-xl) + var(--ic-space-xs));transform:rotate(90deg);justify-self:end}.content-expanded-chevron{transform:rotate(-90deg)}.expanded-content{--ic-typography-color:var(--ic-accordion-body-text);color:var(--ic-accordion-body-text);height:0;overflow:hidden;display:flex;flex-direction:column;visibility:var(--ic-expanded-content-visibility, hidden)}.expanded-content-inner{padding:var(--ic-space-xs)}.expanded-content-opened{overflow:visible}@media (forced-colors: active){button:focus{border:var(--ic-border-hc) !important}}';let c=0;const d=class{constructor(i){e(this,i);this.accordionClicked=t(this,"accordionClicked",7);this.accordionId=`ic-accordion-${c++}`;this.CONTENT_VISIBILITY_PROPERTY="--ic-expanded-content-visibility";this.toggleExpanded=()=>{this.expanded=!this.expanded;this.accordionClicked.emit({id:this.accordionId})};this.setAccordionAnimation=(e,t,i,o)=>{e.style.transitionDuration=`${t}ms`;e.style.transitionProperty=i;e.style.transitionDelay=o};this.setExpandedContentStyle=(e,t)=>{if(e.propertyName==="height"&&t.clientHeight>0){t.classList.add("expanded-content-opened");t.style.height="auto"}};this.hideExpandedContent=(e,t)=>{if(e.propertyName==="height"&&t.clientHeight===0){t.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY,"hidden")}};this.animateExpandedContent=()=>{const e=this.expandedContentEl.scrollHeight;if(e>0&&this.expanded){this.expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY,"visible");this.expandedContentEl.style.height=`${e}px`;this.setAccordionAnimation(this.expandedContentEl,"300","height","ease-out");this.expandedContentEl.addEventListener("transitionend",(e=>{this.setExpandedContentStyle(e,this.expandedContentEl)}))}else if(!this.expanded){this.expandedContentEl.style.height=`${this.expandedContentEl.scrollHeight}px`;if(this.expandedContentEl.scrollHeight>0&&!this.expanded){this.expandedContentEl.style.height="0";this.setAccordionAnimation(this.expandedContentEl,"300","height","ease-in");this.expandedContentEl.classList.remove("expanded-content-opened")}this.expandedContentEl.addEventListener("transitionend",(e=>{this.hideExpandedContent(e,this.expandedContentEl)}))}};this.disabled=false;this.expanded=false;this.heading="";this.message="";this.size="medium";this.theme="inherit"}handleExpandedWatch(){this.animateExpandedContent()}async setFocus(){if(this.accordionBtnHeading){this.accordionBtnHeading.focus()}}disconnectedCallback(){if(this.expandedContentEl){this.expandedContentEl.removeEventListener("transitionend",(e=>this.setExpandedContentStyle(e,this.expandedContentEl)),true);this.expandedContentEl.removeEventListener("transitionend",(e=>this.hideExpandedContent(e,this.expandedContentEl)),true)}}componentDidLoad(){if(this.expanded){this.expandedContentEl.style.height="auto";this.expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY,"visible")}}render(){const{size:e,disabled:t,expanded:n,theme:r}=this;return i(o,{id:this.accordionId,class:{["ic-accordion-disabled"]:t,[`ic-theme-${r}`]:r!=="inherit"},"aria-disabled":t?"true":"false"},i("button",{ref:e=>this.accordionBtnHeading=e,id:`${this.accordionId}-button`,disabled:t,tabindex:t?-1:0,class:{[`${e}`]:true,["section-button"]:true,["section-button-open"]:n&&!t},"aria-expanded":`${n}`,"aria-controls":"expanded-content-area",onClick:this.toggleExpanded},a(this.el,"icon")&&i("div",{class:"icon-container"},i("slot",{name:"icon"})),i("ic-typography",{variant:"subtitle-large",class:"section-header"},a(this.el,"heading")?i("slot",{name:"heading"}):this.heading),i("span",{class:{["expand-chevron"]:true,["content-expanded-chevron"]:n&&!t},"aria-hidden":"true",innerHTML:s})),i("div",{class:{["expanded-content"]:true},"aria-labelledby":`${this.accordionId}-button`,role:"region","aria-hidden":`${!n}`,id:"expanded-content-area",ref:e=>this.expandedContentEl=e},i("div",{class:"expanded-content-inner"},this.message?i("ic-typography",{variant:"body"},this.message):i("slot",null))))}get el(){return n(this)}static get watchers(){return{expanded:["handleExpandedWatch"]}}};d.style=r;export{d as ic_accordion};
-//# sourceMappingURL=p-a01841e2.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["icAccordionCss","accordionIds","Accordion","this","accordionId","CONTENT_VISIBILITY_PROPERTY","toggleExpanded","expanded","accordionClicked","emit","id","setAccordionAnimation","el","duration","property","delay","style","transitionDuration","transitionProperty","transitionDelay","setExpandedContentStyle","ev","expandedContent","propertyName","clientHeight","classList","add","height","hideExpandedContent","setProperty","animateExpandedContent","elementHeight","expandedContentEl","scrollHeight","addEventListener","e","remove","handleExpandedWatch","setFocus","accordionBtnHeading","focus","disconnectedCallback","removeEventListener","componentDidLoad","render","size","disabled","theme","h","Host","class","ref","tabindex","onClick","isSlotUsed","name","variant","innerHTML","chevronIcon","role","message"],"sources":["src/components/ic-accordion/ic-accordion.css?tag=ic-accordion&encapsulation=shadow","src/components/ic-accordion/ic-accordion.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  border-bottom: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:host .expand-chevron {\n  color: var(--ic-accordion-chevron);\n}\n\n:host(.ic-accordion-disabled) .expand-chevron {\n  color: var(--ic-accordion-chevron-disabled);\n}\n\n.section-button.small {\n  padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n.section-button.large {\n  padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(:first-of-type) {\n  border-top: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:focus {\n  outline: none;\n}\n\n.section-button {\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: var(--ic-space-xs);\n  font-weight: var(--ic-font-weight-bold);\n  border: none;\n}\n\n.section-header {\n  --ic-typography-color: var(--ic-accordion-heading-text);\n  color: var(--ic-accordion-heading-text);\n  text-align: left;\n  flex: 1 0;\n}\n\n:host(.ic-accordion-disabled) .section-header {\n  --ic-typography-color: var(--ic-accordion-heading-text-disabled);\n  color: var(--ic-accordion-heading-text-disabled);\n}\n\nbutton:hover {\n  background-color: var(--ic-accordion-background-hover);\n  cursor: pointer;\n}\n\nbutton:active {\n  background-color: var(--ic-accordion-background-pressed);\n}\n\nbutton:focus {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-transition-duration-fast);\n}\n\nbutton:disabled {\n  pointer-events: none;\n}\n\n.icon-container {\n  margin: 0 var(--ic-space-xs) 0 0;\n  display: flex;\n  align-items: center;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  color: var(--ic-accordion-icon);\n}\n\n:host(.ic-accordion-disabled) .icon-container {\n  color: var(--ic-accordion-icon-disabled);\n}\n\n::slotted(svg) {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n.expand-chevron {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  margin-left: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  transform: rotate(90deg);\n  justify-self: end;\n}\n\n.content-expanded-chevron {\n  transform: rotate(-90deg);\n}\n\n.expanded-content {\n  --ic-typography-color: var(--ic-accordion-body-text);\n  color: var(--ic-accordion-body-text);\n  height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  visibility: var(--ic-expanded-content-visibility, hidden);\n}\n\n.expanded-content-inner {\n  padding: var(--ic-space-xs);\n}\n\n.expanded-content-opened {\n  overflow: visible;\n}\n\n@media (forced-colors: active) {\n  button:focus {\n    border: var(--ic-border-hc) !important;\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/**\n * @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n */\n\n@Component({\n  tag: \"ic-accordion\",\n  styleUrl: \"ic-accordion.css\",\n  shadow: true,\n})\nexport class Accordion {\n  private accordionId = `ic-accordion-${accordionIds++}`;\n  private expandedContentEl: HTMLDivElement;\n  private accordionBtnHeading: HTMLButtonElement;\n  private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n  @Element() el: HTMLIcAccordionElement;\n\n  /**\n   * If `true`, the accordion will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the accordion appears expanded.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * The section header outlining section content.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the accordion.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * @internal Emitted when accordion is clicked.\n   */\n  @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n  // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n  @Watch(\"expanded\")\n  handleExpandedWatch(): void {\n    this.animateExpandedContent();\n  }\n\n  /**\n   * Sets focus on accordion heading.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.accordionBtnHeading) {\n      this.accordionBtnHeading.focus();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.expandedContentEl) {\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n        true\n      );\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.hideExpandedContent(e, this.expandedContentEl),\n        true\n      );\n    }\n  }\n\n  componentDidLoad(): void {\n    // So accordion opens by default if expanded set to true\n    if (this.expanded) {\n      this.expandedContentEl.style.height = \"auto\";\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n    this.accordionClicked.emit({ id: this.accordionId });\n  };\n\n  // Set accordion animation\n  private setAccordionAnimation = (\n    el: HTMLElement,\n    duration: string,\n    property: string,\n    delay: string\n  ) => {\n    el.style.transitionDuration = `${duration}ms`;\n    el.style.transitionProperty = property;\n    el.style.transitionDelay = delay;\n  };\n\n  private setExpandedContentStyle = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n      expandedContent.classList.add(\"expanded-content-opened\");\n      expandedContent.style.height = \"auto\";\n    }\n  };\n\n  private hideExpandedContent = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n      expandedContent.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"hidden\"\n      );\n    }\n  };\n\n  private animateExpandedContent = () => {\n    const elementHeight = this.expandedContentEl.scrollHeight;\n    if (elementHeight > 0 && this.expanded) {\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n      this.expandedContentEl.style.height = `${elementHeight}px`;\n      this.setAccordionAnimation(\n        this.expandedContentEl,\n        \"300\",\n        \"height\",\n        \"ease-out\"\n      );\n\n      this.expandedContentEl.addEventListener(\n        \"transitionend\",\n        (e: TransitionEvent) => {\n          this.setExpandedContentStyle(e, this.expandedContentEl);\n        }\n      );\n    } else if (!this.expanded) {\n      this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n      if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n        this.expandedContentEl.style.height = \"0\";\n        this.setAccordionAnimation(\n          this.expandedContentEl,\n          \"300\",\n          \"height\",\n          \"ease-in\"\n        );\n        this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n      }\n      this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n        this.hideExpandedContent(e, this.expandedContentEl);\n      });\n    }\n  };\n\n  render() {\n    const { size, disabled, expanded, theme } = this;\n    return (\n      <Host\n        id={this.accordionId}\n        class={{\n          [\"ic-accordion-disabled\"]: disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n      >\n        <button\n          ref={(el) => (this.accordionBtnHeading = el)}\n          id={`${this.accordionId}-button`}\n          disabled={disabled}\n          tabindex={disabled ? -1 : 0}\n          class={{\n            [`${size}`]: true,\n            [\"section-button\"]: true,\n            [\"section-button-open\"]: expanded && !disabled,\n          }}\n          aria-expanded={`${expanded}`}\n          aria-controls=\"expanded-content-area\"\n          onClick={this.toggleExpanded}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n            {isSlotUsed(this.el, \"heading\") ? (\n              <slot name=\"heading\" />\n            ) : (\n              this.heading\n            )}\n          </ic-typography>\n          <span\n            class={{\n              [\"expand-chevron\"]: true,\n              [\"content-expanded-chevron\"]: expanded && !disabled,\n            }}\n            aria-hidden=\"true\"\n            innerHTML={chevronIcon}\n          />\n        </button>\n        <div\n          class={{\n            [\"expanded-content\"]: true,\n          }}\n          aria-labelledby={`${this.accordionId}-button`}\n          role=\"region\"\n          aria-hidden={`${!expanded}`}\n          id=\"expanded-content-area\"\n          ref={(el) => (this.expandedContentEl = el)}\n        >\n          <div class=\"expanded-content-inner\">\n            {this.message ? (\n              <ic-typography variant=\"body\">{this.message}</ic-typography>\n            ) : (\n              <slot />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,f as i,h as s,H as a,g as r}from"./p-6b5e91e2.js";import{c as o,P as n,k as l,v as c,j as d,r as h,a as u,G as p,n as b,l as f,i as m,H as x,w as v}from"./p-f99576e0.js";const g='/*! 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;--ic-input-label-helpertext-padding:var(--ic-space-xxs);--border-color:var(--ic-text-field-border-neutral);--border-color-hover:var(--ic-text-field-border-neutral-hover);--border-color-pressed:var(--ic-text-field-border-neutral-pressed);--border-color-disabled:var(--ic-text-field-border-disabled);--border-color-error:var(--ic-text-field-border-error);--border-color-error-hover:var(--ic-text-field-border-error-hover);--border-color-error-pressed:var(--ic-text-field-border-error-pressed);--border-color-success:var(--ic-text-field-border-success);--border-color-success-hover:var(--ic-text-field-border-success-hover);--border-color-success-pressed:var(--ic-text-field-border-success-pressed);--border-color-warning:var(--ic-text-field-border-warning);--border-color-warning-hover:var(--ic-text-field-border-warning-hover);--border-color-warning-pressed:var(--ic-text-field-border-warning-pressed);--ic-input-label-text-color:var(--ic-text-field-label);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle);--ic-input-validation-status-text-color:var(--ic-text-field-state-text);--ic-input-validation-error:var(--ic-text-field-state-icon-error);--ic-input-validation-warning-icon-color:var(\n    --ic-text-field-state-icon-warning\n  );--ic-input-validation-success-icon-color:var(\n    --ic-text-field-state-icon-success\n  );--ic-input-component-container-success-icon-inline-color:var(\n    --ic-text-field-state-icon-success\n  )}:host(.ic-text-field-disabled){--ic-input-label-text-color:var(--ic-text-field-label-disabled);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle-disabled);--text-field-placeholder-color:var(\n    --ic-text-field-text-area-placeholder-text-disabled\n  )}:host(.ic-text-field-full-width){width:100%}::-moz-placeholder{color:var(\n    --text-field-placeholder-color,\n    var(--ic-text-field-placeholder-text)\n  );opacity:1}::placeholder{color:var(\n    --text-field-placeholder-color,\n    var(--ic-text-field-placeholder-text)\n  );opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);color:var(--text-field-text-color, var(--ic-text-field-text));background-color:var(--input-bg-color, var(--ic-text-field-background));line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs);caret-color:var(\n    --text-field-typing-cursor,\n    var(--ic-text-field-typing-cursor)\n  )}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:0.375rem}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(\n    --text-field-disabled-text-color,\n    var(--ic-text-field-text-disabled)\n  )}input.readonly,textarea.readonly{color:var(--ic-text-field-read-only-input-text-internal)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type="number"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.char-count-text{--ic-typography-color:var(--ic-text-field-character-limit);padding-right:var(--ic-space-xxxs)}:host(.ic-text-field-disabled) .char-count-text{--ic-typography-color:var(--ic-text-field-character-limit-disabled)}.no-left-pad{padding-left:0}::slotted([slot="icon"]){fill:var(--ic-text-field-text-disabled)}.has-value ::slotted([slot="icon"]){fill:var(--ic-text-field-input-internal-icon)}.char-count{margin-right:calc(-1 * var(--ic-space-xxxs))}.remaining-char-count-desc{position:absolute;left:-9999px}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}input[type="search"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot="icon"]){fill:currentcolor}}';let y=0;const w=[...v,"title"];const k=class{constructor(s){e(this,s);this.getValidationText=t(this,"getValidationText",7);this.icBlur=t(this,"icBlur",7);this.icChange=t(this,"icChange",7);this.icFocus=t(this,"icFocus",7);this.icInput=t(this,"icInput",7);this.icKeydown=t(this,"icKeydown",7);this.inheritedAttributes={};this.hostMutationObserver=null;this.getMaxValueExceeded=e=>{if(this.type==="number"){this.minValueUnattained=e&&Number(e)<Number(this.min);this.maxValueExceeded=Number(e)>Number(this.max)}};this.getMaxCharactersReached=e=>{this.numChars=e.length;this.maxCharactersReached=this.maxCharacters>0?this.numChars>=this.maxCharacters:false;if(this.maxCharactersWarning&&!this.maxCharactersReached){this.maxCharactersWarning=false}};this.onInput=e=>{this.value=e.target.value;this.icInput.emit({value:this.value})};this.onBlur=e=>{const t=e.target.value;this.numChars=t.length;this.minCharactersUnattained=this.minCharacters>0?this.numChars<this.minCharacters:false;this.icBlur.emit({value:t})};this.onFocus=e=>{this.icFocus.emit({value:e.target.value})};this.hasStatus=e=>e!==""&&!this.disabled;this.handleFormReset=()=>{this.value=this.initialValue};this.hostMutationCallback=e=>{let t=false;e.forEach((({attributeName:e,type:i,addedNodes:s,removedNodes:a})=>{if(w.includes(e)){this.inheritedAttributes[e]=this.el.getAttribute(e);t=true}else if(i==="childList"){t=o(s,a,"icon")}}));if(t){i(this)}};this.numChars=0;this.maxCharactersReached=false;this.maxCharactersWarning=false;this.minCharactersUnattained=false;this.maxValueExceeded=false;this.minValueUnattained=false;this.ariaActiveDescendant=undefined;this.ariaAutocomplete=undefined;this.ariaExpanded=undefined;this.ariaOwns=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autoFocus=false;this.disabled=false;this.fullWidth=false;this.helperText="";this.hideCharCount=false;this.hideLabel=false;this.hiddenInput=true;this.inputId=`ic-text-field-input-${y++}`;this.inputmode="text";this.label=undefined;this.max=undefined;this.maxCharacters=0;this.min=undefined;this.minCharacters=0;this.name=this.inputId;this.placeholder="";this.readonly=false;this.required=false;this.resize=false;this.role=undefined;this.rows=1;this.size="medium";this.spellcheck=false;this.theme="inherit";this.truncateValue=undefined;this.type="text";this.validationInline=false;this.validationInlineInternal=false;this.validationStatus="";this.validationText="";this.debounce=0;this.value="";this.initialValue=this.value}debounceChanged(){this.icChange=n(this.icChange,this.debounce)}watchValueHandler(e){let t;if(this.maxCharacters>0){t=e.substring(0,this.maxCharacters);this.value=t}else{t=e}if(this.inputEl&&this.inputEl.value!==t){this.inputEl.value=t}this.getMaxValueExceeded(t);this.getMaxCharactersReached(t);this.icChange.emit({value:t})}connectedCallback(){this.debounceChanged()}disconnectedCallback(){var e;l(this.el,this.handleFormReset);(e=this.hostMutationObserver)===null||e===void 0?void 0:e.disconnect()}componentWillLoad(){if(this.value!==this.initialValue){this.watchValueHandler(this.value)}else if(this.maxCharacters>0){this.value=this.value.substring(0,this.maxCharacters)}this.getMaxValueExceeded(this.value);this.getMaxCharactersReached(this.value);this.inheritedAttributes=c(this.el,w);if(this.readonly){this.maxValueExceeded=false;this.minValueUnattained=false}d(this.el,this.handleFormReset);h(this.disabled,this.el)}componentDidLoad(){u([{prop:this.label,propName:"label"}],"Text Field");if(this.validationInlineInternal){this.getValidationText.emit({value:this.validationText})}this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{attributes:true,childList:true})}handleKeyDown(e){this.icKeydown.emit({event:e});this.maxCharactersWarning=this.maxCharactersReached}async setFocus(){var e;(e=this.inputEl)===null||e===void 0?void 0:e.focus()}render(){const{inputId:e,name:t,label:i,required:r,size:o,placeholder:n,helperText:l,hideCharCount:c,rows:d,resize:h,disabled:u,value:v,min:g,max:y,numChars:w,readonly:k,maxCharacters:z,maxCharactersWarning:C,maxCharactersReached:$,minCharacters:I,minCharactersUnattained:F,minValueUnattained:N,maxValueExceeded:j,validationStatus:L,validationText:M,validationInline:T,validationInlineInternal:q,spellcheck:V,inputmode:W,fullWidth:B,truncateValue:H,hiddenInput:O,theme:D}=this;const K=k||u;const S=j||N||F||C?C?p.Warning:p.Error:L;const U=C?`Maximum input is ${z} characters`:j?`Maximum value of ${y} exceeded`:N?`Minimum value of ${g} not met`:F?`Minimum input is ${I} characters`:M;const _=k?0:z;const E=C||j||N||S===p.Error?"assertive":"polite";const G=this.hasStatus(S)&&!(S==p.Success&&T)&&!q;const P=d>1;const R=_-w;const A=`${R} character${R===1?"":"s"} remaining.`;const J=z>0?`${e}-char-count-desc`:"";const Q=`${J} ${b(e,l!=="",G)}`.trim();const X=K&&!k;const Y=!!this.el.querySelector(`[slot="icon"]`)&&!X;const Z=`${S===p.Error}`;if(O){f(true,this.el,t,v,K)}return s(a,{class:{"ic-text-field-full-width":B,[`ic-theme-${D}`]:D!=="inherit","ic-text-field-disabled":K}},s("ic-input-container",{readonly:k,disabled:K},!this.hideLabel&&s("ic-input-label",{for:e,label:i,helperText:l,required:r,disabled:X,readonly:k}),s("ic-input-component-container",{size:o,validationStatus:S,multiLine:P,disabled:K,readonly:k,validationInline:T,fullWidth:B},Y&&s("span",{class:{readonly:k,"has-value":v.length>0},slot:"left-icon"},s("slot",{name:"icon"})),!P?s("input",Object.assign({id:e,name:t,ref:e=>this.inputEl=e,type:this.type,min:g,max:y,value:v,class:{"no-left-pad":!Y&&k,readonly:k,"truncate-value":H},placeholder:n?n:"",required:r,disabled:K,readonly:k,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":i,"aria-describedby":Q,"aria-invalid":Z,"aria-activedescendant":this.ariaActiveDescendant,"aria-expanded":this.ariaExpanded,"aria-owns":this.ariaOwns,autocomplete:this.autocomplete,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:V,inputmode:W,role:this.role,maxlength:$?z:null,minlength:F?I:null},this.inheritedAttributes)):s("textarea",Object.assign({id:e,class:{"no-resize":h===false||k,"no-left-pad":!Y&&k,readonly:k},name:t,ref:e=>this.inputEl=e,value:v,rows:d,required:r,disabled:K,placeholder:n?n:"",readonly:k,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":i,"aria-describedby":Q,"aria-invalid":Z,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:V,inputmode:W,maxlength:$?z:null,minlength:F?I:null},this.inheritedAttributes)),m(this.el,"clear-button")&&s("slot",{name:"clear-button"}),m(this.el,"search-submit-button")&&s("slot",{name:"search-submit-button"})),m(this.el,"menu")&&s("slot",{name:"menu"}),(!x(L)||!x(M)||_>0||j||C||F||N)&&!q&&s("ic-input-validation",{status:this.hasStatus(S)===false||S===p.Success&&T||q?"":S,message:G?U:"",ariaLiveMode:E,for:e,fullWidth:B},!k&&_>0&&s("div",{slot:"validation-message-adornment"},!c&&s("ic-typography",{variant:"caption",class:"char-count-text"},s("span",{class:"char-count"},w,"/",_)),s("span",{class:"remaining-char-count-desc","aria-live":"polite"},A),s("span",{hidden:true,id:J},"Field can contain a maximum of ",_," characters.")))))}get el(){return r(this)}static get watchers(){return{debounce:["debounceChanged"],value:["watchValueHandler"]}}};k.style=g;export{k as ic_text_field};
-//# sourceMappingURL=p-a6be333f.entry.js.map