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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukic/web-components",
-  "version": "2.1.0-beta.1",
+  "version": "2.1.0-beta.2",
   "description": "A web component UI library compiled with StencilJS",
   "main": "dist/index.cjs.js",
   "module": "./dist/index.js",
@@ -40,7 +40,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.2",
     "@stencil/core": "^2.16.1",
-    "@ukic/fonts": "^2.1.0-beta.1"
+    "@ukic/fonts": "^2.1.0-beta.2"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
@@ -74,5 +74,5 @@
     "webpack": "^5.75.0"
   },
   "license": "MIT",
-  "gitHead": "ef35f916b6b0982ee137941de6f5d50e64205db0"
+  "gitHead": "5e0df20dde95a24afed14480113caa794c72126f"
 }

package/dist/core/p-1337db5e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-back-to-top/ic-back-to-top.css?tag=ic-back-to-top&encapsulation=shadow","src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":["icBackToTopCss","backToTopLabel","BackToTop","this","topObserver","setTargetElVisible","visible","targetElVisible","setFooterVisible","footerVisible","targetElObserverCallback","entries","isIntersecting","footerObserverCallback","findTargetEl","target","targetElement","undefined","console","log","document","querySelector","indexOf","createTopObserver","targetEl","objParent","observedEl","unobserve","remove","body","firstElementChild","isTargetElNull","parentNode","objBackToTopTargetEl","createElement","setAttribute","insertBefore","marginTop","getComputedStyle","IntersectionObserver","threshold","rootMargin","observe","handleClick","window","scrollTo","scrollIntoView","[object Object]","newValue","oldValue","onComponentPropUndefinedChange","banners","querySelectorAll","length","bannerOffset","footers","footerEl","footerObserver","onComponentRequiredPropUndefined","prop","propName","h","class","aria-label","onClick","innerHTML","ArrowUpward","variant"],"mappings":"uTAAA,MAAMA,EAAiB,wkICOvB,MAAMC,EAAiB,oBAOVC,EAAS,+BAqBZC,KAAAC,YAAoC,KAIpCD,KAAAE,mBAAsBC,IAC5BH,KAAKI,gBAAkBD,GAGjBH,KAAAK,iBAAoBF,IAC1BH,KAAKM,cAAgBH,GAGfH,KAAAO,yBAA4BC,IAClCR,KAAKE,mBAAmBM,EAAQ,GAAGC,iBAG7BT,KAAAU,uBAA0BF,IAChCR,KAAKK,iBAAiBG,EAAQ,GAAGC,iBAG3BT,KAAAW,aAAgBC,IACtB,IAAIC,EAAyB,KAC7B,GAAID,IAAW,MAAQA,IAAWE,UAAW,CAC3CC,QAAQC,IACN,2FAEG,CACLH,EAAgBI,SAASC,cACvBN,EAAOO,QAAQ,OAAS,EAAIP,EAAS,IAAMA,GAE7C,GAAIC,IAAkB,KAAM,CAC1BE,QAAQC,IACN,sCAAsCJ,6CAI5C,OAAOC,GAGDb,KAAAoB,kBAAqBR,IAC3BZ,KAAKqB,SAAWrB,KAAKW,aAAaC,GAClC,IAAIU,EAGJ,GAAItB,KAAKC,cAAgB,KAAM,CAC7B,MAAMsB,EAAaN,SAASC,cAAc,0BAC1C,GAAIK,IAAe,KAAM,CACvBvB,KAAKC,YAAYuB,UAAUD,GAC3BA,EAAWE,UAIf,GAAIzB,KAAKqB,WAAa,KAAM,CAC1BC,EAAYL,SAASS,KACrB1B,KAAKqB,SAAWC,EAAUK,kBAC1B3B,KAAK4B,eAAiB,SACjB,CACLN,EAAYtB,KAAKqB,SAASQ,WAC1B7B,KAAK4B,eAAiB,MAIxB,MAAME,EAAuBb,SAASc,cAAc,OACpDD,EAAqBE,aAAa,KAAM,yBACxCV,EAAUW,aAAaH,EAAsB9B,KAAKqB,UAGlD,MAAMa,EAAYC,iBAAiBnC,KAAKqB,UAAUa,UAClDlC,KAAKC,YAAc,IAAImC,qBAAqBpC,KAAKO,yBAA0B,CACzE8B,UAAW,CAAC,GACZC,WAAY,GAAGJ,kBAEjBlC,KAAKC,YAAYsC,QAAQT,IAGnB9B,KAAAwC,YAAc,KACpB,GAAIxC,KAAK4B,eAAgB,CACvBa,OAAOC,SAAS,EAAG,OACd,CACL1C,KAAKqB,SAASsB,2DA5Fe,2BAEG,wBAEF,MAGlCC,iBAAiBC,EAAkBC,GAEjCC,EAA+BD,EAAUD,GAAU,KACjD7C,KAAKoB,kBAAkByB,MAsF3BD,oBACE5C,KAAKoB,kBAAkBpB,KAAKY,QAG5B,MAAMoC,EAAU/B,SAASgC,iBACvB,iDAEF,GAAID,EAAQE,OAAQ,CAClBlD,KAAKmD,aAAe,KAItB,MAAMC,EAAUnC,SAASgC,iBAAiB,UAC1C,GAAIG,EAAQF,OAAQ,CAClB,MAAMG,EAAWD,EAAQA,EAAQF,OAAS,GAC1C,MAAMb,EAAYrC,KAAKmD,aAAe,IAAO,EAC7C,MAAMG,EAAiB,IAAIlB,qBACzBpC,KAAKU,uBACL,CAAE2B,UAAW,CAACA,KAEhBiB,EAAef,QAAQc,IAI3BT,mBACEW,EACE,CAAC,CAAEC,KAAMxD,KAAKY,OAAQ6C,SAAU,WAChC,eAIJb,SACE,MAAMO,aAAEA,EAAY/C,gBAAEA,EAAeE,cAAEA,GAAkBN,KACzD,OACE0D,EAAA,SAAA,CACEC,MAAO,CACLf,CAAC,uBAAwB,KACzBA,CAAC,iBAAkBO,EACnBP,CAAC,SAAUxC,EACXwC,CAAC,aAActC,GAChBsD,aACW9D,EACZ+D,QAAS7D,KAAKwC,aAEdkB,EAAA,OAAA,CAAMC,MAAM,sBAAsBG,UAAWC,IAE7CL,EAAA,gBAAA,CAAeM,QAAQ,kBACrBN,EAAA,OAAA,KAAO5D","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n  position: absolute;\n  right: 0;\n}\n\nbutton {\n  position: fixed;\n  right: var(--ic-space-md);\n  bottom: var(--ic-space-md);\n  height: 40px;\n  align-items: center;\n  padding: var(--ic-space-xs) var(--ic-space-md) var(--ic-space-xs)\n    var(--ic-space-sm);\n  margin: 0;\n  gap: var(--ic-space-xs);\n  display: flex;\n  background-color: var(--ic-architectural-white);\n  border: 1px solid var(--ic-action-default);\n  outline-width: inherit;\n  box-sizing: border-box;\n  box-shadow: var(--ic-elevation-overlay);\n  border-radius: 80px;\n  text-decoration: none;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s linear var(--ic-transition-duration-slow),\n    opacity var(--ic-transition-duration-slow);\n  cursor: pointer;\n  z-index: var(--ic-z-index-overlay);\n}\n\nbutton:hover {\n  text-decoration: none;\n  background-color: var(--ic-action-default-bg-hover-no-alpha);\n  border: 1px solid var(--ic-action-default-hover);\n}\n\nbutton:active {\n  text-decoration: none;\n  background-color: var(--ic-action-default-bg-active-no-alpha);\n  border: 1px solid var(--ic-action-default-active);\n}\n\nbutton:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.ic-back-to-top-link.show {\n  visibility: visible;\n  opacity: 1;\n  transition: visibility 0s linear 0s,\n    opacity var(--ic-transition-duration-slow),\n    box-shadow var(--ic-easing-transition-fast);\n}\n\n.ic-back-to-top-link.by-footer {\n  position: relative;\n  right: var(--ic-space-md);\n  bottom: 56px;\n}\n\n.ic-back-to-top-link.offset-banner {\n  margin-bottom: var(--ic-space-lg);\n}\n\n.ic-back-to-top-icon {\n  fill: var(--ic-action-default);\n  padding-left: var(--ic-space-xxs);\n  padding-top: var(--ic-space-xxxs);\n}\n\n.ic-back-to-top-link span {\n  color: var(--ic-action-default);\n}\n\n.ic-back-to-top-link:hover .ic-back-to-top-icon {\n  fill: var(--ic-action-default-hover);\n}\n\n.ic-back-to-top-link:hover span {\n  color: var(--ic-action-default-hover);\n}\n\n@media (forced-colors: active) {\n  .ic-back-to-top-icon {\n    fill: currentColor;\n  }\n}\n","import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n  tag: \"ic-back-to-top\",\n  styleUrl: \"ic-back-to-top.css\",\n  shadow: true,\n})\nexport class BackToTop {\n  @Element() el: HTMLIcBackToTopElement;\n\n  /**\n   * The ID of the element to jump back to when the link is clicked.\n   */\n  @Prop() target!: string;\n\n  @State() bannerOffset: boolean = false;\n\n  @State() targetElVisible: boolean = true;\n\n  @State() footerVisible: boolean = false;\n\n  @Watch(\"target\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    onComponentPropUndefinedChange(oldValue, newValue, () => {\n      this.createTopObserver(newValue);\n    });\n  }\n  private topObserver: IntersectionObserver = null;\n  private targetEl: Element;\n  private isTargetElNull: boolean;\n\n  private setTargetElVisible = (visible: boolean) => {\n    this.targetElVisible = visible;\n  };\n\n  private setFooterVisible = (visible: boolean) => {\n    this.footerVisible = visible;\n  };\n\n  private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setTargetElVisible(entries[0].isIntersecting);\n  };\n\n  private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setFooterVisible(entries[0].isIntersecting);\n  };\n\n  private findTargetEl = (target: string): Element => {\n    let targetElement: Element = null;\n    if (target === null || target === undefined) {\n      console.log(\n        \"Error: No target ID specified for back to top component - defaulting to top of page\"\n      );\n    } else {\n      targetElement = document.querySelector(\n        target.indexOf(\"#\") === 0 ? target : \"#\" + target\n      );\n      if (targetElement === null) {\n        console.log(\n          `Error: Back to top target element '${target}' not found - defaulting to top of page`\n        );\n      }\n    }\n    return targetElement;\n  };\n\n  private createTopObserver = (target: string) => {\n    this.targetEl = this.findTargetEl(target);\n    let objParent: HTMLElement;\n\n    //remove old element & observer\n    if (this.topObserver !== null) {\n      const observedEl = document.querySelector(\"#ic-back-to-top-target\");\n      if (observedEl !== null) {\n        this.topObserver.unobserve(observedEl);\n        observedEl.remove();\n      }\n    }\n\n    if (this.targetEl === null) {\n      objParent = document.body;\n      this.targetEl = objParent.firstElementChild;\n      this.isTargetElNull = true;\n    } else {\n      objParent = this.targetEl.parentNode as HTMLElement;\n      this.isTargetElNull = false;\n    }\n\n    //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n    const objBackToTopTargetEl = document.createElement(\"div\");\n    objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n    objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n    // resize observer needs to factor in any top margin on the target el\n    const marginTop = getComputedStyle(this.targetEl).marginTop;\n    this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n      threshold: [0],\n      rootMargin: `${marginTop} 0px 0px 0px`,\n    });\n    this.topObserver.observe(objBackToTopTargetEl);\n  };\n\n  private handleClick = () => {\n    if (this.isTargetElNull) {\n      window.scrollTo(0, 0);\n    } else {\n      this.targetEl.scrollIntoView();\n    }\n  };\n\n  componentWillLoad(): void {\n    this.createTopObserver(this.target);\n\n    //adjust position for classification banner at bottom\n    const banners = document.querySelectorAll(\n      \"ic-classification-banner:not([inline='true'])\"\n    );\n    if (banners.length) {\n      this.bannerOffset = true;\n    }\n\n    //observer for when footer scrolls into view\n    const footers = document.querySelectorAll(\"footer\");\n    if (footers.length) {\n      const footerEl = footers[footers.length - 1];\n      const threshold = this.bannerOffset ? 0.15 : 0;\n      const footerObserver = new IntersectionObserver(\n        this.footerObserverCallback,\n        { threshold: [threshold] }\n      );\n      footerObserver.observe(footerEl);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.target, propName: \"target\" }],\n      \"Back to Top\"\n    );\n  }\n\n  render() {\n    const { bannerOffset, targetElVisible, footerVisible } = this;\n    return (\n      <button\n        class={{\n          [\"ic-back-to-top-link\"]: true,\n          [\"offset-banner\"]: bannerOffset,\n          [\"show\"]: !targetElVisible,\n          [\"by-footer\"]: footerVisible,\n        }}\n        aria-label={backToTopLabel}\n        onClick={this.handleClick}\n      >\n        <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n        <ic-typography variant=\"subtitle-small\">\n          <span>{backToTopLabel}</span>\n        </ic-typography>\n      </button>\n    );\n  }\n}\n"]}

package/dist/core/p-1721bcf3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","src/components/ic-button/ic-button.tsx","src/components/ic-loading-indicator/ic-loading-indicator.css?tag=ic-loading-indicator&encapsulation=shadow","src/components/ic-loading-indicator/ic-loading-indicator.tsx","src/components/ic-tooltip/ic-tooltip.css?tag=ic-tooltip&encapsulation=shadow","src/components/ic-tooltip/ic-tooltip.tsx"],"names":["icButtonCss","buttonIds","Button","this","calculatedWidth","inheritedAttributes","hasTooltip","buttonIdNum","handleClick","el","type","closest","handleHiddenFormButtonClick","onFocus","icFocus","emit","onBlur","icBlur","[object Object]","offsetWidth","offsetLeft","event","disabled","loading","stopImmediatePropagation","ev","theme","detail","updateTheme","mode","buttonEl","focus","newValue","tooltipEl","label","setAttribute","width","toString","iconEl","querySelector","form","hiddenFormButton","document","createElement","style","display","appendChild","click","remove","newTheme","foregroundColor","getThemeFromContext","IcThemeForegroundEnum","Default","appearance","inheritAttributes","IC_INHERITED_ARIA","id","undefined","variant","calculateWidth","TagType","href","_a","title","aria-label","ariaLabel","restInheritedAttributes","__rest","buttonAttrs","download","rel","target","referrerpolicy","hreflang","newTitle","titleAttr","tooltipText","describedBy","buttonId","ButtonContent","h","Object","assign","class","aria-disabled","ref","aria-describedby","hasIconSlot","name","getLoadingBarWidth","Dark","Light","Host","size","fullWidth","onClick","disableTooltip","placement","tooltipPlacement","icLoadingIndicatorCss","LoadingIndicator","updateCircularProgressMeter","indeterminate","circularMeter","setProperty","String","progress","getLabel","labelIndex","setLabel","Promise","setInterval","labelList","length","labelDuration","getLabelVariant","outerElement","setCircleLineWidth","circularLineWidth","circularDiameter","setLinearDeterminateWidth","innerElement","Math","min","max","proportion","showSecond","classList","add","calcOuterClass","cls","updateLabel","split","indicatorLabel","setCircleXY","r","x","y","nextRadius","setDashSteps","radius","dashArray","PI","host","shadowRoot","Number","description","role","aria-labelledby","aria-valuenow","aria-valuemin","aria-valuemax","viewBox","cx","cy","icTooltipCss","Tooltip","mouseOverTool","showEvents","instantHideEvents","delayedHideEvents","show","popper","toolTip","setOptions","options","modifiers","enabled","update","hide","removeAttribute","checkCloseTooltip","setTimeout","mouseEnterTooltip","mouseLeaveTooltip","handleKeyDown","key","popperInstance","manageEventListeners","action","method","forEach","screenReaderOnlyStyles","position","left","top","height","overflow","describedBySpan","previousElementSibling","innerText","createPopper","offset","element","arrow","onComponentRequiredPropUndefined","prop","propName","ariaDescribedBy","insertAdjacentElement","ic-tooltip","data-popper-arrow"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: inline-block;\n\n  --button-default: var(--ic-action-default);\n  --button-default-hover: var(--ic-action-default-hover);\n  --button-default-active: var(--ic-action-default-active);\n  --button-default-background-hover: var(--ic-action-default-bg-hover);\n  --button-default-background-active: var(--ic-action-default-bg-active);\n  --icon-width: 100%;\n  --icon-height: 100%;\n}\n\n.button {\n  font-family: var(--ic-font-body-family);\n  text-decoration: none;\n  font-weight: 600;\n  font-size: 14px;\n  transition: var(--ic-easing-transition-fast);\n  border-radius: var(--ic-border-radius);\n  min-width: 100px;\n  display: inline-flex;\n  gap: var(--ic-space-xs);\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\n.button:hover {\n  cursor: pointer;\n}\n\n.button:focus,\n:host .button:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n:host(.light) .button:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.dark) .button {\n  --button-default: var(--ic-action-dark);\n  --button-default-hover: var(--ic-action-dark);\n  --button-default-active: var(--ic-action-dark);\n  --button-default-background-hover: var(--ic-action-dark-bg-hover);\n  --button-default-background-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.light) .button {\n  --button-default: var(--ic-action-light);\n  --button-default-hover: var(--ic-action-light);\n  --button-default-active: var(--ic-action-light);\n  --button-default-background-hover: var(--ic-action-light-bg-hover);\n  --button-default-background-active: var(--ic-action-light-bg-active);\n}\n\n:host(.button-variant-primary.light) .button {\n  color: var(--ic-color-primary-text);\n\n  --button-default-hover: var(--ic-action-light-hover);\n  --button-default-active: var(--ic-action-light-active);\n}\n\n:host(.button-variant-primary.dark) .button {\n  --button-default-hover: var(--ic-action-dark-hover);\n  --button-default-active: var(--ic-action-dark-active);\n}\n\n:host(.disabled),\n:host(.disabled) .button,\n:host(.loading),\n:host(.loading) .button {\n  pointer-events: none;\n}\n\n/* Variants */\n\n/* Primary */\n\n:host(.button-variant-primary) .button {\n  color: var(--ic-architectural-white);\n  background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover:not(:focus) {\n  background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary) .button:active:not(:focus),\n:host(.button-variant-primary.loading) .button {\n  background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary.disabled) .button {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button {\n  background: var(--ic-architectural-600);\n  color: var(--ic-architectural-500);\n}\n\n/* Secondary */\n\n:host(.button-variant-secondary) .button {\n  border: 1px solid var(--button-default);\n  color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  border-color: var(--button-default-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-secondary) .button:active:not(:focus) {\n  border-color: var(--button-default-active);\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.loading) .button {\n  border-color: var(--button-default-active);\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) .button:hover,\n:host(.button-variant-secondary.disabled) .button:active {\n  border-color: var(--ic-architectural-300);\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) .button:hover,\n:host(.button-variant-secondary.light.disabled) .button:active {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n  background: none;\n}\n\n/* Tertiary */\n\n:host(.button-variant-tertiary) .button {\n  color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active:not(:focus),\n:host(.button-variant-tertiary.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) .button:hover,\n:host(.button-variant-tertiary.disabled) .button:active {\n  border-color: var(--ic-architectural-300);\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) .button:hover,\n:host(.button-variant-tertiary.light.disabled) .button:active {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n  background: none;\n}\n\n/* Icon */\n\n:host(.button-variant-icon) .button {\n  color: var(--button-default);\n  min-width: 0;\n}\n\n:host(.button-variant-icon) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) .button:hover,\n:host(.button-variant-icon.disabled) .button:active {\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n/* Destructive */\n\n:host(.button-variant-destructive) .button {\n  color: var(--ic-architectural-white);\n  background-color: var(--ic-action-destructive);\n  text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover:not(:focus) {\n  background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active:not(:focus),\n:host(.button-variant-destructive.loading) .button {\n  background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-destructive.disabled) .button {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n/* Sizing */\n\n:host(.button-size-default) .button {\n  height: 40px;\n  padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-small) .button {\n  height: var(--ic-space-xl);\n  padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.button-size-large) .button {\n  height: var(--ic-space-xxl);\n  padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.button-size-default.button-variant-icon) .button {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n  padding: 6px;\n}\n\n:host(.button-size-small.button-variant-icon) .button {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  padding: var(--ic-space-xxs);\n}\n\n:host(.button-size-large.button-variant-icon) .button {\n  height: 40px;\n  width: 40px;\n  padding: var(--ic-space-xs);\n}\n\n/* Width */\n:host(.full-width),\n:host(.full-width) .button {\n  width: 100%;\n}\n\n/* Loading */\n\ndiv.loading-container {\n  position: relative;\n  align-items: center;\n}\n\nic-loading-indicator {\n  --outer-color: transparent;\n}\n\n@keyframes loading-animation {\n  0% {\n    width: 0%;\n    left: 0%;\n  }\n\n  25% {\n    width: 0%;\n    left: 0%;\n    opacity: 0;\n  }\n\n  50% {\n    width: 100%;\n    left: 0%;\n    opacity: 1;\n  }\n\n  75% {\n    width: 0%;\n    left: 100%;\n  }\n\n  100% {\n    width: 0%;\n    left: 100%;\n    opacity: 0;\n  }\n}\n\n/* Icons */\n\ndiv.icon-container {\n  box-sizing: border-box;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n::slotted(svg) {\n  width: var(--icon-width) !important;\n  height: var(--icon-height) !important;\n  fill: currentcolor !important;\n  pointer-events: none;\n}\n\n:host(.button-variant-icon) .button .icon-container {\n  margin: 0;\n  pointer-events: none;\n}\n\n/** SEARCH **/\n\n:host(.search-submit-button) ::slotted(svg) {\n  --icon-height: 20px;\n  --icon-width: 20px;\n}\n\n:host(.search-submit-button-small) ::slotted(svg) {\n  --icon-height: 16px;\n  --icon-width: 16px;\n}\n\n:host(.clear-button) {\n  margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus {\n  box-shadow: none;\n}\n\n:host(.search-submit-button) .button:focus {\n  box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n  box-shadow: none;\n  background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) {\n  display: flex;\n  align-items: center;\n  margin: 0 var(--ic-space-xxs);\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n  --icon-height: 14px;\n  --icon-width: 14px;\n}\n\n:host(.popout-menu-button) .button {\n  justify-content: left;\n  border-radius: 0;\n  white-space: pre-line;\n  text-align: start;\n}\n\n:host(.popout-menu-button) div.icon-container {\n  flex: none;\n}\n\n:host(.popout-menu-button) .button:focus {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n  display: none;\n}\n\n:host .ic-tooltip {\n  display: block;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .button {\n    border: 2px solid transparent;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from \"@stencil/core\";\n\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcButtonSizes,\n  IcButtonTypes,\n  IcButtonVariants,\n  IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n@Component({\n  tag: \"ic-button\",\n  styleUrl: \"ic-button.css\",\n  shadow: true,\n})\nexport class Button {\n  @Element() el: HTMLIcButtonElement;\n  /**\n   * Determines whether the button should be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Determines whether the button should be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: IcButtonTypes = \"button\";\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   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n  /**\n   * Hints at the human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The button variant to be displayed.\n   */\n  @Prop() variant?: IcButtonVariants = \"primary\";\n  /**\n   * The size of the button to be displayed.\n   */\n  @Prop() size?: IcButtonSizes = \"default\";\n  /**\n   * Fill the width of the container if true.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   * Disable ic-tooltip which is shown for icon variant. Title or aria-label must be set if this prop is not applied.\n   */\n  @Prop() disableTooltip?: boolean = false;\n  /**\n   * The position of the tooltip in relation to the button.\n   */\n  @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n  /**\n   * Determines the whether the appearance of the button is dark, light, or the default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n  /**\n   * Emitted when button has focus\n   */\n  @Event() icFocus!: EventEmitter<void>;\n  /**\n   * Emitted when button has blur\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  // CalculatedWidth must have a default value, since width is only calculated once button is rendered (with text).\n  private calculatedWidth: number = 68;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private buttonEl: HTMLElement;\n  private hasTooltip: boolean = false;\n  private buttonIdNum = buttonIds++;\n  private tooltipEl: HTMLIcTooltipElement;\n  private id: string;\n\n  @Watch(\"loading\")\n  calculateWidth(): void {\n    // Assume even padding on left and right\n    this.calculatedWidth = this.el.offsetWidth - 2 * this.el.offsetLeft;\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(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  /**\n   * @internal Updates tooltip/aria-label text - needed as can't watch an aria attribute change.\n   */\n  @Method()\n  async updateAriaLabel(newValue: string): Promise<void> {\n    if (this.hasTooltip) {\n      this.tooltipEl.label = newValue;\n      this.buttonEl.setAttribute(\"aria-label\", newValue);\n    }\n  }\n\n  private getLoadingBarWidth(): { [key: string]: string } {\n    return { width: `${this.calculatedWidth.toString()}px` };\n  }\n\n  private hasIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    if (iconEl != null) {\n      return true;\n    }\n    return false;\n  }\n\n  private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n    const hiddenFormButton = document.createElement(\"button\");\n\n    hiddenFormButton.setAttribute(\"type\", this.el.type);\n    hiddenFormButton.style.display = \"none\";\n\n    form.appendChild(hiddenFormButton);\n\n    hiddenFormButton.click();\n    hiddenFormButton.remove();\n  }\n\n  private handleClick = (): void => {\n    if (\n      (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n      !!this.el.closest(\"FORM\")\n    ) {\n      this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n    }\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n      \"title\",\n    ]);\n\n    const id = this.el.id;\n    this.id = id !== undefined ? id : null;\n    this.hasTooltip = this.variant === \"icon\";\n  }\n\n  componentDidLoad(): void {\n    this.calculateWidth();\n    this.updateTheme();\n  }\n\n  render() {\n    const TagType = (this.href && \"a\") || \"button\";\n    const {\n      title,\n      \"aria-label\": ariaLabel,\n      ...restInheritedAttributes\n    } = this.inheritedAttributes;\n    const buttonAttrs =\n      TagType === \"button\"\n        ? { type: this.type, disabled: this.disabled }\n        : {\n            download: this.download !== false ? this.download : null,\n            href: this.href,\n            rel: this.rel,\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            hreflang: this.hreflang,\n          };\n    const newTitle = title && (title as string);\n    const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n    let tooltipText = \"\";\n    if (this.hasTooltip) {\n      if (newTitle !== undefined) {\n        tooltipText = newTitle;\n      } else if (ariaLabel !== null) {\n        tooltipText = ariaLabel as string;\n      }\n    }\n\n    let describedBy: string = null;\n    let buttonId: string = null;\n    if (this.hasTooltip) {\n      buttonId =\n        this.id !== null\n          ? `ic-button-with-tooltip-${this.id}`\n          : `ic-button-with-tooltip-${this.buttonIdNum}`;\n      describedBy = `ic-tooltip-${buttonId}`;\n    }\n\n    const ButtonContent = () => {\n      return (\n        <TagType\n          class=\"button\"\n          aria-disabled={this.loading || this.disabled ? \"true\" : null}\n          aria-label={this.loading ? \"Loading\" : ariaLabel}\n          {...buttonAttrs}\n          {...restInheritedAttributes}\n          {...titleAttr}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n          ref={(el) => (this.buttonEl = el)}\n          id={buttonId}\n          aria-describedby={describedBy}\n        >\n          {this.hasIconSlot() && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          {this.loading ? (\n            <div class=\"loading-container\" style={this.getLoadingBarWidth()}>\n              <ic-loading-indicator\n                type=\"linear\"\n                appearance={\n                  this.variant === \"primary\" ||\n                  this.variant === \"destructive\" ||\n                  this.appearance === IcThemeForegroundEnum.Dark ||\n                  this.appearance === IcThemeForegroundEnum.Light\n                    ? \"light\"\n                    : \"dark\"\n                }\n              ></ic-loading-indicator>\n            </div>\n          ) : (\n            <slot />\n          )}\n        </TagType>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled && !this.loading,\n          [`button-variant-${this.variant}`]: true,\n          [`button-size-${this.size}`]: true,\n          [\"loading\"]: this.loading,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n          [\"full-width\"]: this.fullWidth,\n        }}\n        onClick={this.handleClick}\n      >\n        {this.hasTooltip && (\n          <ic-tooltip\n            class={{ [\"tooltip-disabled-button\"]: this.disableTooltip }}\n            ref={(el) => (this.tooltipEl = el)}\n            label={tooltipText}\n            target={buttonId}\n            placement={this.tooltipPlacement}\n          >\n            <ButtonContent />\n          </ic-tooltip>\n        )}\n\n        {!this.hasTooltip && <ButtonContent />}\n      </Host>\n    );\n  }\n}\n","@import \"../../global/normalise.css\";\n\n:host {\n  /**\n   * @prop --circular-diameter: Diameter of the circular-indicator\n   */\n\n  display: block;\n\n  --linear-border-radius: 4px;\n  --inner-color: var(--ic-action-default);\n  --outer-color: var(--ic-architectural-100);\n  --label-color: var(--ic-color-primary-text);\n  --margin: none;\n  --linear-line-height: var(--ic-space-xs);\n}\n\n:host(.light) {\n  --inner-color: var(--ic-architectural-white);\n  --outer-color: var(--ic-architectural-800);\n  --label-color: var(--ic-architectural-white);\n}\n\n.ic-loading-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n:host([size=\"small\"]) {\n  --circular-diameter: 40px;\n  --linear-line-height: var(--ic-space-xxs);\n}\n\n:host([size=\"default\"]) {\n  --circular-diameter: 80px;\n}\n\n:host([size=\"large\"]) {\n  --circular-diameter: 120px;\n}\n\n:host([size=\"icon\"]) {\n  display: inline-block;\n\n  --margin: var(--ic-space-xxxs);\n  --circular-diameter: 20px;\n}\n\n:host([label]) {\n  --margin: 0 0 var(--ic-space-xs) 0;\n}\n\n.ic-loading-label {\n  white-space: nowrap;\n  color: var(--label-color);\n  margin-left: var(--label-margin-left);\n}\n\n.ic-loading-circular-outer {\n  height: var(--circular-diameter);\n  width: var(--circular-diameter);\n\n}\n\n.ic-loading-circular-outer.indeterminate {\n  animation: circular-animation 1s linear;\n  animation-iteration-count: infinite;\n}\n\n@keyframes circular-animation {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ic-loading-circular-outer,\n.ic-loading-linear-outer {\n  margin: var(--margin);\n}\n\n.ic-loading-linear-outer {\n  background-color: var(--outer-color);\n  height: var(--linear-line-height);\n  width: 100%;\n  border-radius: var(--linear-border-radius);\n  overflow: hidden;\n}\n\n.ic-loading-linear-inner {\n  position: relative;\n  height: 100%;\n  background-color: var(--inner-color);\n  border-radius: var(--linear-border-radius);\n}\n\n.indeterminate > .ic-loading-linear-inner {\n  animation: linear-animation 2s infinite;\n}\n\n.determinate > .ic-loading-linear-inner {\n  transition: width 0.5s;\n  width: var(--linear-width);\n}\n\n:host([full-width]) {\n  --linear-border-radius: none;\n}\n\n@keyframes linear-animation {\n  0% {\n    width: 0%;\n    left: -1%;\n  }\n\n  25% {\n    width: 0%;\n    left: -1%;\n  }\n\n  50% {\n    width: 101%;\n    left: -1%;\n  }\n\n  75% {\n    width: 0%;\n    left: 101%;\n  }\n\n  100% {\n    width: 0%;\n    left: 101%;\n  }\n}\n\n.ic-loading-circular-svg {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transform: rotate(-90deg);\n}\n\n.ic-loading-circular-svg circle {\n  width: 100%;\n  height: 100%;\n  fill: none;\n  stroke: var(--outer-color);\n  stroke-width: var(--circular-line-width);\n  stroke-linecap: round;\n}\n\n/* --stroke-dash-array calculated via dashArray method */\n.ic-loading-circular-svg circle:nth-child(2) {\n  --circular-indeterminate: calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );\n\n  stroke-dasharray: var(--stroke-dasharray), var(--stroke-dasharray);\n  stroke-dashoffset: var(--stroke-dashoffset, var(--circular-indeterminate));\n  stroke: var(--inner-color);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .indeterminate > .ic-loading-circular-inner {\n    forced-color-adjust: none;\n  }\n\n  .ic-loading-linear-outer {\n    border: var(--ic-hc-border);\n  }\n\n  .ic-loading-linear-inner {\n    background-color: canvastext;\n  }\n\n  .ic-loading-circular-svg circle {\n    stroke: Background;\n  }\n\n  .ic-loading-circular-svg circle:nth-child(2) {\n    stroke: canvastext;\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  IcLoadingCircleXYR,\n  IcLoadingSizes,\n  IcLoadingTypes,\n} from \"./ic-loading-indicator.types\";\nimport {\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-loading-indicator\",\n  styleUrl: \"ic-loading-indicator.css\",\n  shadow: true,\n})\nexport class LoadingIndicator {\n  @Element() host: HTMLIcLoadingIndicatorElement;\n\n  /**\n   * The current amount of progress made.\n   * If not provided, component acts as an indeterminate loading indicator.\n   */\n  @Prop() progress?: number;\n\n  /**\n   * The minimum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() min?: number = 0;\n\n  /**\n   * The maximum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() max?: number = 100;\n\n  /**\n   * The label to be displayed beneath the loading indicator.\n   * Display a changing label by separating multiple messages with forward slashes.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Provide a description to be set as the aria-label of the loading indicator when not using a visible label.\n   */\n  @Prop() description?: string = \"Loading\";\n\n  /**\n   * The time in milliseconds before the label changes.\n   */\n  @Prop() labelDuration?: number = 8000;\n\n  /**\n   * The size of the loading indicator.\n   */\n  @Prop({ reflect: true }) size?: IcLoadingSizes = \"default\";\n\n  /**\n   * The type of indicator, either linear or circular.\n   */\n  @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\n\n  /**\n   * When linear, determines whether the full-width version (i.e. without a border radius) should be displayed.\n   */\n  @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n  /**\n   * Determines whether the dark or light loading indicator should be displayed.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  @State() indicatorLabel: string;\n  @State() indeterminate: boolean;\n  @State() showSecond: boolean = false;\n  @State() circularLineWidth: number;\n  @State() circularDiameter: number;\n\n  @Watch(\"label\")\n  watchPropHandler(): void {\n    this.updateLabel();\n  }\n\n  @Watch(\"progress\")\n  watchProgressHandler(): void {\n    this.updateCircularProgressMeter();\n  }\n\n  private outerElement?: HTMLDivElement;\n  private innerElement?: HTMLDivElement;\n  private labelList: string[];\n  private circularMeter: SVGCircleElement;\n\n  private updateCircularProgressMeter = () => {\n    if (!this.indeterminate) {\n      this.circularMeter.style.setProperty(\n        \"--progress-value\",\n        String(this.progress)\n      );\n    }\n  };\n\n  private getLabel = (\n    labelIndex: number,\n    setLabel: (label: string) => void\n  ) => {\n    return new Promise(() => {\n      setInterval(() => {\n        if (labelIndex < this.labelList.length - 1) {\n          labelIndex++;\n        } else {\n          labelIndex = 0;\n        }\n        setLabel(this.labelList[labelIndex]);\n      }, this.labelDuration);\n    });\n  };\n\n  private getLabelVariant = () => {\n    let variant: \"label\" | \"h4\" | \"h2\" = \"h4\";\n    const width = this.outerElement?.offsetWidth;\n    if (this.size === \"small\" || (this.type === \"circular\" && width < 60)) {\n      variant = \"label\";\n    } else if (\n      this.size === \"large\" ||\n      (this.type === \"circular\" && width >= 120)\n    ) {\n      variant = \"h2\";\n    }\n    return variant;\n  };\n\n  // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n  private setCircleLineWidth = () => {\n    const { offsetWidth: width } = this.outerElement;\n    if (width) {\n      this.circularLineWidth = width * 0.1;\n      this.circularDiameter = width;\n      this.outerElement.style.setProperty(\n        \"--circular-line-width\",\n        `${this.circularLineWidth}px`\n      );\n    }\n  };\n\n  private setLinearDeterminateWidth = () => {\n    if (!this.innerElement) return;\n    // Ensure progress cannot be out of bounds\n\n    const progress = Math.min(this.max, Math.max(this.min, this.progress));\n    const proportion = (progress - this.min) / (this.max - this.min);\n    this.showSecond = proportion > 0.5;\n    if (this.showSecond) {\n      this.innerElement.classList.remove(\"clip\");\n    } else {\n      this.innerElement.classList.add(\"clip\");\n    }\n    this.innerElement.style.setProperty(\n      \"--linear-width\",\n      `${proportion * 100}%`\n    );\n  };\n\n  private calcOuterClass = (): string => {\n    let cls = `ic-loading-${this.type}-outer`;\n    cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n    return cls;\n  };\n\n  private updateLabel = (): void => {\n    if (this.label !== undefined) {\n      this.labelList = this.label.split(\"/\");\n      const labelIndex = 0;\n      this.indicatorLabel = this.labelList[labelIndex];\n      if (this.labelList.length > 1) {\n        this.getLabel(labelIndex, (label) => {\n          this.indicatorLabel = label;\n        });\n      }\n    }\n  };\n\n  private setCircleXY = (): IcLoadingCircleXYR => {\n    if (this.circularDiameter) {\n      const r = this.circularDiameter / 2;\n      const x = r;\n      const y = r;\n      const nextRadius = r - this.circularLineWidth / 2;\n      this.setDashSteps(nextRadius);\n\n      return { x, y, r: nextRadius };\n    }\n    return { x: 0, y: 0, r: 0 };\n  };\n\n  private setDashSteps = (radius: number) => {\n    const dashArray = 2 * Math.PI * radius;\n    const progress = Math.min(Math.max(this.progress, this.min), this.max);\n    const proportion = -1 - (progress - this.min) / (this.max - this.min);\n\n    this.circularMeter.style.setProperty(\n      \"--stroke-dasharray\",\n      `${dashArray}px`\n    );\n\n    if (!this.indeterminate) {\n      this.circularMeter.style.setProperty(\n        \"--circular-steps-max\",\n        String(this.max)\n      );\n      this.circularMeter.style.setProperty(\n        \"--stroke-dashoffset\",\n        `${proportion * dashArray}px`\n      );\n    }\n  };\n\n  componentWillLoad(): void {\n    this.indeterminate = this.progress === undefined;\n    this.updateLabel();\n  }\n\n  componentDidLoad(): void {\n    if (this.type === \"circular\") {\n      this.setCircleLineWidth();\n      this.circularMeter = this.host.shadowRoot.querySelector(\n        \".ic-loading-circular-svg circle:nth-child(2)\"\n      );\n      this.updateCircularProgressMeter();\n    }\n\n    if (Number(this.progress) >= 0 && this.type === \"linear\") {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  componentWillUpdate(): void {\n    this.indeterminate = this.progress === undefined;\n  }\n\n  componentDidUpdate(): void {\n    if (Number(this.progress) >= 0 && this.type === \"linear\") {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  render() {\n    const { appearance, label, description, size } = this;\n    const { x, y, r } = this.setCircleXY();\n\n    return (\n      <Host class={{ [\"light\"]: appearance === IcThemeForegroundEnum.Light }}>\n        <div class=\"ic-loading-container\">\n          <div\n            ref={(el) => (this.outerElement = el as HTMLDivElement)}\n            class={this.calcOuterClass()}\n            role=\"progressbar\"\n            aria-labelledby={\n              this.label && this.size !== \"icon\" && \"ic-loading-label\"\n            }\n            aria-label={description}\n            aria-valuenow={this.progress}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n          >\n            <div\n              ref={(el) => (this.innerElement = el as HTMLDivElement)}\n              class={`ic-loading-${this.type}-inner`}\n            >\n              {this.type === \"circular\" && (\n                <svg\n                  class=\"ic-loading-circular-svg\"\n                  viewBox={`0 0 ${this.circularDiameter || 0} ${\n                    this.circularDiameter || 0\n                  }`}\n                >\n                  <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n                  <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n                </svg>\n              )}\n            </div>\n          </div>\n          {label && size !== \"icon\" && (\n            <ic-typography\n              id=\"ic-loading-label\"\n              class=\"ic-loading-label\"\n              role=\"status\"\n              variant={this.getLabelVariant()}\n            >\n              <p>{this.indicatorLabel}</p>\n            </ic-typography>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import \"../../global/normalise.css\";\n\n:host(.ic-tooltip) .ic-tooltip-container {\n  background-color: var(--ic-architectural-800);\n  color: #ffff;\n  text-align: center;\n  padding: var(--ic-space-xxxs) 10px;\n  border-radius: var(--ic-border-radius);\n  position: absolute;\n  max-width: 320px;\n  display: none;\n  z-index: calc(var(--ic-z-index-overlay) / 2);\n  box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed))\n  .ic-tooltip-container,\n:host(.tooltip-disabled-button) .ic-tooltip-container {\n  display: none !important;\n}\n\n:host(.tooltip-long-label-navigation-item-side-nav-expanded)\n  .ic-tooltip-container[data-show] {\n  display: block !important;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow,\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n  position: absolute;\n  background: inherit;\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow {\n  visibility: hidden;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n  visibility: visible;\n  content: \"\";\n}\n\n:host(.ic-tooltip) .ic-tooltip-container[data-show] {\n  display: block;\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"top\"]\n  > .ic-tooltip-arrow {\n  bottom: calc(-1 * var(--ic-space-md));\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"top\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: 0 0 var(--ic-border-radius) var(--ic-border-radius);\n  left: 0;\n  height: var(--ic-space-xxs);\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n  > .ic-tooltip-arrow {\n  top: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: var(--ic-border-radius) var(--ic-border-radius) 0 0;\n  left: 0;\n  height: var(--ic-space-xxs);\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"left\"]\n  > .ic-tooltip-arrow {\n  right: var(--ic-space-xxxs);\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"left\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: 0 var(--ic-border-radius) var(--ic-border-radius) 0;\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"right\"]\n  > .ic-tooltip-arrow {\n  left: -14px;\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"right\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: var(--ic-border-radius) 0 0 var(--ic-border-radius);\n}\n\n:host([target=\"ic-button-with-tooltip-search-submit-button\"])\n  .ic-tooltip-container,\n:host([target=\"ic-button-with-tooltip-clear-button\"]) .ic-tooltip-container {\n  z-index: calc(var(--ic-z-index-popup-menu) + 1);\n}\n\n@media (forced-colors: active) {\n  :host(.ic-tooltip) .ic-tooltip-container {\n    border: var(--ic-hc-border);\n  }\n}\n","import { Component, Element, Host, Prop, h, Watch } from \"@stencil/core\";\nimport { Instance, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * The position of the tool-tip in relation to the parent element.\n   */\n  @Prop() placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  @Watch(\"label\")\n  updateLabel(newValue: string): void {\n    const describedBySpan = this.el.previousElementSibling as HTMLElement;\n    if (describedBySpan !== null) {\n      describedBySpan.innerText = newValue;\n    }\n  }\n\n  private toolTip: HTMLDivElement;\n  private arrow: HTMLDivElement;\n  private mouseOverTool: boolean = false;\n  private showEvents = [\"mouseenter\", \"focusin\"];\n  private instantHideEvents = [\"focusout\"];\n  private delayedHideEvents = [\"mouseleave\"];\n  private popperInstance: Instance;\n\n  private show = (popper: Instance) => {\n    this.toolTip.setAttribute(\"data-show\", \"\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: true },\n      ],\n    }));\n    popper.update();\n  };\n\n  private hide = (popper: Instance) => {\n    this.toolTip.removeAttribute(\"data-show\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: false },\n      ],\n    }));\n  };\n\n  private checkCloseTooltip = (popper: Instance) => {\n    setTimeout(() => {\n      if (!this.mouseOverTool) {\n        this.hide(popper);\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = (popper: Instance) => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip(popper);\n  };\n\n  private handleKeyDown = (key: string) => {\n    if (key === \"Escape\") {\n      this.hide(this.popperInstance);\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, () => this.show(this.popperInstance));\n      this.toolTip[method](event, () => this.mouseEnterTooltip());\n    });\n\n    this.instantHideEvents.forEach((event) => {\n      this.el[method](event, () => this.hide(this.popperInstance));\n    });\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, () => this.checkCloseTooltip(this.popperInstance));\n      this.toolTip[method](event, () =>\n        this.mouseLeaveTooltip(this.popperInstance)\n      );\n    });\n\n    document[method](\"keydown\", (event: KeyboardEvent) =>\n      this.handleKeyDown(event.key)\n    );\n  };\n\n  private screenReaderOnlyStyles = {\n    position: \"absolute\",\n    left: \"-10000px\",\n    top: \"auto\",\n    width: \"1px\",\n    height: \"1px\",\n    overflow: \"hidden\",\n  };\n\n  componentDidLoad(): void {\n    this.popperInstance = createPopper(this.el, this.toolTip, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 10],\n          },\n        },\n        {\n          name: \"arrow\",\n          options: {\n            element: this.arrow,\n          },\n        },\n      ],\n    });\n\n    this.manageEventListeners(\"add\");\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n\n    if (this.target !== undefined) {\n      const ariaDescribedBy = document.createElement(\"span\");\n      ariaDescribedBy.id = `ic-tooltip-${this.target}`;\n      ariaDescribedBy.innerText = this.label;\n      ariaDescribedBy.classList.add(\"ic-tooltip-label\");\n      Object.assign(ariaDescribedBy.style, this.screenReaderOnlyStyles);\n\n      this.el.insertAdjacentElement(\"beforebegin\", ariaDescribedBy);\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n  }\n\n  render() {\n    const { label } = this;\n    return (\n      <Host class={{ \"ic-tooltip\": true }}>\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n        >\n          <ic-typography variant=\"caption\">{label}</ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n            data-popper-arrow\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-33a45ace.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-select/ic-select.css?tag=ic-select&encapsulation=shadow","src/components/ic-select/ic-select.tsx"],"names":["icSelectCss","inputIds","Select","this","inputId","menuId","inheritedAttributes","isMenuEnabled","searchableSelectInputValue","charactersUntilSuggestions","length","setOptionsValuesFromLabels","options","map","option","value","label","setTextColor","nativeSelectElement","selectedIndex","className","setMenuChange","open","getLabelFromValue","getValueFromLabel","_a","find","getFilteredChildMenuOptions","children","getFilteredMenuOptions","includeDescriptionsInSearch","searchMatchPosition","newOption","Object","assign","handleNativeSelectChange","icChange","emit","handleCustomSelectChange","event","searchable","detail","emptyOptionListText","searchableSelectElement","focus","ariaActiveDescendant","optionId","handleMenuChange","handleFocusIndicatorDisplay","focusIndicator","host","shadowRoot","querySelector","classList","add","remove","handleMouseDown","preventDefault","handleClick","noOptions","menu","handleClickOpen","handleExpandIconMouseDown","disabled","handleClear","stopPropagation","customSelectElement","handleKeyDown","cancelBubble","key","handleKeyboardOpen","handleClearButtonFocus","clearButtonFocused","handleClearButtonBlur","handleSearchableSelectInput","target","undefined","isGrouped","newFilteredOptions","menuOptionsFiltered","includeGroupTitlesInSearch","indexOf","push","noChildOptionsWhenFiltered","filteredOptions","debounceAriaLiveUpdate","updateSearchableSelectResultAriaLive","searchableSelectResultsStatusEl","innerText","onFocus","icFocus","onBlur","relatedTarget","clearButton","icBlur","handleFormReset","initialValue","[object Object]","clearTimeout","debounce","window","setTimeout","inheritAttributes","IC_INHERITED_ARIA","addFormResetListener","onComponentRequiredPropUndefined","prop","propName","removeFormResetListener","small","fullWidth","helperText","hideLabel","name","placeholder","readonly","required","showClearButton","validationStatus","validationText","renderHiddenInput","invalid","IcInformationStatus","Error","describedBy","getInputDescribedByText","hasValidationStatus","trim","h","Host","for","ref","el","anchorEl","class","menu-open","isMobileOrTablet","onChange","id","aria-label","aria-describedby","aria-invalid","selected","role","aria-activedescendant","aria-autocomplete","aria-expanded","aria-required","aria-controls","onInput","onClick","onKeyDown","innerHTML","Clear","size","variant","appearance","IcThemeForegroundEnum","Light","Dark","onMouseDown","expand-icon","expand-icon-open","expand-icon-filled","expand-icon-disabled","Expand","aria-hidden","aria-live","aria-haspopup","aria-owns","value-text","no-results","inputEl","inputLabel","onMenuChange","onOptionSelect","parentEl","ariaLiveMode","status","message"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n/**\n   * @prop --input-width: Width of the input field\n*/\n\nic-input-component-container:hover {\n  --border-color: var(--ic-action-dark-hover);\n}\n\nic-input-component-container:active {\n  --border-color: var(--ic-action-dark-active);\n\n  color: var(--ic-action-dark-active);\n}\n\nic-input-component-container.menu-open {\n  --border-color: var(--ic-architectural-400);\n\n  color: var(--ic-action-dark);\n}\n\nic-input-validation .status-icon,\nic-input-validation .statustext {\n  visibility: visible;\n}\n\nic-input-validation.menu-open .status-icon,\nic-input-validation.menu-open .statustext {\n  visibility: hidden;\n  transition: visibility 0s;\n}\n\nic-input-label {\n  margin-bottom: var(--ic-space-xs) !important;\n}\n\nselect {\n  border: 0;\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-architectural-white);\n  color: var(--ic-color-primary-text);\n  line-height: 1.5rem;\n  letter-spacing: 0.005rem;\n  width: 100%;\n  height: 100%;\n  padding-left: 6px;\n  appearance: none;\n  background-repeat: no-repeat;\n  background-position: right 6px center;\n  background-image: url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect option,\n.select-option-selected {\n  color: var(--ic-color-primary-text);\n}\n\nselect:disabled {\n  color: var(--ic-architectural-200);\n  background-image: url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect:focus {\n  border: 0;\n  outline: 0;\n}\n\nselect:not([disabled]) {\n  cursor: pointer;\n}\n\n.select-container {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.select-input {\n  width: 100%;\n  height: 100%;\n  padding: 0 6px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  justify-content: space-between;\n  background: none;\n  border: none;\n}\n\n.select-input:focus {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(:not([disabled])) ic-input-component-container:hover .select-input {\n  background-color: var(--ic-architectural-white);\n}\n\n:host([disabled]) .select-input {\n  pointer-events: none;\n}\n\n:host([searchable]) .select-input {\n  cursor: auto;\n}\n\n.searchable-select-container {\n  align-items: center;\n  display: flex;\n  width: 100%;\n}\n\n.expand-icon {\n  height: var(--ic-space-lg);\n  padding-left: var(--ic-space-xs);\n  color: var(--expand-icon-hover, var(--ic-architectural-400));\n}\n\n:host([disabled]) .expand-icon,\n:host([disabled]) .expand-icon > svg > path {\n  color: var(--ic-architectural-200);\n}\n\n:host([searchable]) .expand-icon {\n  padding-left: var(--ic-space-xxs);\n  height: 36px;\n}\n\n:host([searchable]) .expand-icon > svg {\n  height: 36px;\n  padding: 0 6px;\n}\n\n:host([searchable]:not([disabled])) .expand-icon > svg {\n  cursor: pointer;\n}\n\n.expand-icon-open {\n  color: var(--ic-action-dark);\n}\n\n.expand-icon-filled {\n  color: var(--ic-action-dark);\n}\n\n.expand-icon-open,\n:host([searchable]) .expand-icon-open {\n  transform: rotateX(180deg);\n}\n\n:host([disabled]) .value-text,\n.placeholder {\n  color: var(--ic-color-tertiary-text);\n}\n\n.select-input-end {\n  display: flex;\n  align-items: center;\n}\n\n.clear-button-container {\n  display: flex;\n  gap: var(--ic-space-xxs);\n  padding-left: 38px;\n}\n\n:host([small]) .clear-button-container {\n  padding-left: 30px;\n}\n\n.divider {\n  width: 1px;\n  background-color: var(--ic-architectural-400);\n  margin: var(--ic-space-xxs) 0;\n  border-radius: 1px;\n  height: var(--ic-space-lg);\n}\n\n:host([small]) .divider {\n  height: var(--ic-space-md);\n}\n\n.clear-button {\n  position: absolute;\n  right: 44px;\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  background-color: var(--ic-focus-blue);\n  box-shadow: inset 0 0 0 2px var(--ic-focus-glow);\n  border-radius: 4px;\n}\n\n.clear-button:focus * {\n  fill: white;\n}\n\n.searchable-select-results-status {\n  border: 0;\n  clip: rect(0, 0, 0, 0, 0);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  h,\n  State,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  getInputDescribedByText,\n  getLabelFromValue,\n  hasValidationStatus,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  isMobileOrTablet,\n  getFilteredMenuOptions,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n  IcThemeForegroundEnum,\n  IcMenuOption,\n  IcSearchMatchPositions,\n} from \"../../utils/types\";\nimport Expand from \"./assets/Expand.svg\";\nimport Clear from \"./assets/Clear.svg\";\nimport { IcValueEventDetail } from \"../../interface\";\n\nlet inputIds = 0;\n\n@Component({\n  tag: \"ic-select\",\n  styleUrl: \"ic-select.css\",\n  shadow: true,\n})\nexport class Select {\n  private nativeSelectElement: HTMLSelectElement;\n  private customSelectElement: HTMLButtonElement;\n  private searchableSelectElement: HTMLInputElement;\n  private menu: HTMLIcMenuElement;\n  private anchorEl: HTMLElement;\n  private clearButton: HTMLIcButtonElement;\n\n  private inputId = `ic-select-input-${inputIds++}`;\n  private menuId = `${this.inputId}-menu`;\n\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  private debounce: number;\n\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Provide the possible selection options.\n   */\n  @Prop() options?: IcMenuOption[] = [];\n\n  /**\n   * Specify if the input requires a value.\n   */\n  @Prop() required?: boolean = false;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Specify whether the input is disabled.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * Specify whether the input is read only.\n   */\n  @Prop() readonly?: boolean = false;\n\n  /**\n   * Provide a placeholder value to display.\n   */\n  @Prop() placeholder?: string = \"Select an option\";\n\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n\n  /**\n   * Specify whether small styling is to be applied to the element.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * If true, then fill width of container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Provide a validation status.\n   */\n  @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * Provide the text to display as the validation message.\n   */\n  @Prop() validationText?: string = \"\";\n\n  /**\n   * The value of the currently selected option.\n   */\n  @Prop({ mutable: true }) value?: string;\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   * Display a button which clears the input when clicked. The button will always appear on the searchable select.\n   */\n  @Prop() showClearButton?: boolean = false;\n\n  /**\n   * If true, the select can be typed in to filter options.\n   */\n  @Prop() searchable?: boolean = false;\n\n  /**\n   * If true, descriptions of options are included when filtering options in a searchable select.\n   */\n  @Prop() includeDescriptionsInSearch?: boolean = false;\n\n  /**\n   * If true, group titles of grouped options are included when filtering options in a searchable select.\n   */\n  @Prop() includeGroupTitlesInSearch?: boolean = false;\n\n  /**\n   * Whether the search string of the searchable select should match the start of or anywhere in the options.\n   */\n  @Prop() searchMatchPosition?: IcSearchMatchPositions = \"anywhere\";\n\n  /**\n   * Number of characters until suggestions appear for a searchable select.\n   */\n  @Prop() charactersUntilSuggestions?: number = 0;\n\n  /**\n   * Provide text for empty results list\n   */\n  @Prop() emptyOptionListText = \"No results found\";\n\n  @State() open: boolean = false;\n\n  @State() clearButtonFocused: boolean = false;\n\n  @State() searchableSelectInputValue: string = null;\n\n  @State() filteredOptions: IcMenuOption[] = this.options;\n\n  @State() ariaActiveDescendant: string;\n\n  @State() noOptions: IcMenuOption[] = null;\n\n  @State() initialValue = this.value;\n\n  @Watch(\"options\")\n  watchOptionsHandler(): void {\n    this.setOptionsValuesFromLabels();\n    this.filteredOptions = this.options;\n  }\n\n  /**\n   * Emitted when a value is selected.\n   */\n  @Event() icChange!: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when select has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when select has blur.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  @Element() host!: HTMLIcSelectElement;\n\n  /**\n   * Sets focus on the input box.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.nativeSelectElement) {\n      this.nativeSelectElement.focus();\n    } else if (this.customSelectElement) {\n      this.customSelectElement.focus();\n    } else if (this.searchableSelectElement) {\n      this.searchableSelectElement.focus();\n    }\n  }\n\n  private isMenuEnabled = () => {\n    return (\n      ((this.searchableSelectInputValue === null ||\n        this.searchableSelectInputValue === \"\") &&\n        this.charactersUntilSuggestions === 0) ||\n      (this.searchableSelectInputValue &&\n        this.searchableSelectInputValue.length >=\n          this.charactersUntilSuggestions)\n    );\n  };\n\n  private setOptionsValuesFromLabels = (): void => {\n    if (this.options.length > 0) {\n      this.options.map((option) => {\n        if (!option.value) {\n          option.value = option.label;\n        }\n      });\n    }\n  };\n\n  private setTextColor = (): void => {\n    if (this.nativeSelectElement.selectedIndex === 0) {\n      this.nativeSelectElement.className = \"placeholder\";\n    } else {\n      this.nativeSelectElement.className = \"select-option-selected\";\n    }\n  };\n\n  private setMenuChange = (open: boolean) => {\n    if (this.open !== open) {\n      this.open = open;\n    }\n  };\n\n  private getLabelFromValue = (value: string): string | undefined => {\n    return getLabelFromValue(value, this.options);\n  };\n\n  private getValueFromLabel = (label: string): string | undefined => {\n    const value = this.options.find((option) => option.label === label)?.value;\n    return value;\n  };\n\n  private getFilteredChildMenuOptions = (option: IcMenuOption) => {\n    let children = option.children;\n\n    children = getFilteredMenuOptions(\n      option.children,\n      this.includeDescriptionsInSearch,\n      this.searchableSelectInputValue,\n      this.searchMatchPosition\n    );\n\n    const newOption = { ...option };\n    newOption.children = children;\n    return newOption;\n  };\n\n  private handleNativeSelectChange = (): void => {\n    this.icChange.emit({ value: this.nativeSelectElement.value });\n    this.setTextColor();\n  };\n\n  private handleCustomSelectChange = (event: CustomEvent): void => {\n    if (this.searchable && event.detail.label === this.emptyOptionListText) {\n      this.searchableSelectElement.focus();\n      return;\n    }\n\n    if (this.searchable) {\n      this.searchableSelectInputValue = this.getLabelFromValue(\n        event.detail.value\n      );\n    }\n\n    this.ariaActiveDescendant = event.detail.optionId;\n    this.icChange.emit({ value: event.detail.value });\n  };\n\n  private handleMenuChange = (event: CustomEvent): void => {\n    this.open = event.detail.open;\n\n    this.searchable && this.handleFocusIndicatorDisplay();\n  };\n\n  private handleFocusIndicatorDisplay = () => {\n    const focusIndicator =\n      this.host.shadowRoot.querySelector(\".focus-indicator\");\n\n    if (this.open) {\n      focusIndicator.classList.add(\"focus-indicator-enabled\");\n    } else {\n      focusIndicator.classList.remove(\"focus-indicator-enabled\");\n    }\n  };\n\n  private handleMouseDown = (event: Event): void => {\n    if (!this.open) {\n      event.preventDefault();\n    }\n  };\n\n  private handleClick = (event: MouseEvent): void => {\n    this.noOptions = null;\n    this.menu.options = this.options;\n\n    if (event.detail !== 0 && this.isMenuEnabled()) {\n      this.menu.handleClickOpen();\n    }\n  };\n\n  private handleExpandIconMouseDown = (event: MouseEvent) => {\n    if (!this.disabled) {\n      event.preventDefault();\n      this.searchableSelectElement.focus();\n      this.handleClick(event);\n    }\n  };\n\n  private handleClear = (event: Event): void => {\n    event.stopPropagation();\n    this.noOptions = null;\n    this.icChange.emit({ value: null });\n\n    if (this.searchable) {\n      this.searchableSelectElement.value = null;\n      this.searchableSelectInputValue = null;\n      this.menu.options = this.options;\n      this.searchableSelectElement.focus();\n\n      if (!this.isMenuEnabled()) {\n        this.setMenuChange(false);\n      }\n    } else {\n      this.customSelectElement.focus();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    event.cancelBubble = true;\n\n    if (!this.open) {\n      this.noOptions = null;\n      this.menu.options = this.options;\n    }\n\n    if (this.open && event.key === \"Enter\") {\n      this.setMenuChange(false);\n    } else {\n      if (\n        !(\n          (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") &&\n          this.noOptions !== null\n        ) &&\n        this.isMenuEnabled()\n      ) {\n        this.menu.handleKeyboardOpen(event);\n      }\n    }\n  };\n\n  private handleClearButtonFocus = (): void => {\n    this.clearButtonFocused = true;\n  };\n\n  private handleClearButtonBlur = (): void => {\n    this.clearButtonFocused = false;\n  };\n\n  private handleSearchableSelectInput = (event: Event): void => {\n    this.searchableSelectInputValue = (event.target as HTMLInputElement).value;\n\n    if (this.getValueFromLabel(this.searchableSelectInputValue) === undefined) {\n      this.icChange.emit({ value: null });\n    }\n\n    if (this.isMenuEnabled()) {\n      this.setMenuChange(true);\n    } else {\n      this.setMenuChange(false);\n    }\n\n    const options = [...this.options];\n\n    let isGrouped = false;\n    let newFilteredOptions: IcMenuOption[] = [];\n\n    options.map((option) => {\n      if (option.children) isGrouped = true;\n    });\n\n    const menuOptionsFiltered = getFilteredMenuOptions(\n      options,\n      this.includeDescriptionsInSearch,\n      this.searchableSelectInputValue,\n      this.searchMatchPosition\n    );\n\n    if (!isGrouped) {\n      newFilteredOptions = menuOptionsFiltered;\n    } else {\n      options.map((option) => {\n        if (this.includeGroupTitlesInSearch) {\n          if (menuOptionsFiltered.indexOf(option) !== -1) {\n            newFilteredOptions.push(option);\n          } else {\n            newFilteredOptions.push(this.getFilteredChildMenuOptions(option));\n          }\n        } else {\n          newFilteredOptions.push(this.getFilteredChildMenuOptions(option));\n        }\n      });\n    }\n\n    let noChildOptionsWhenFiltered = false;\n\n    if (isGrouped) {\n      noChildOptionsWhenFiltered = true;\n      newFilteredOptions.map((option) => {\n        if (option.children.length > 0) {\n          noChildOptionsWhenFiltered = false;\n        }\n      });\n    }\n\n    const noOptions = [{ label: this.emptyOptionListText, value: \"\" }];\n\n    if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {\n      this.noOptions = null;\n      this.filteredOptions = newFilteredOptions;\n    } else {\n      this.noOptions = noOptions;\n      this.filteredOptions = this.noOptions;\n    }\n\n    this.debounceAriaLiveUpdate();\n  };\n\n  private updateSearchableSelectResultAriaLive = (): void => {\n    const searchableSelectResultsStatusEl = this.host.shadowRoot.querySelector(\n      \".searchable-select-results-status\"\n    ) as HTMLDivElement;\n\n    if (this.noOptions !== null) {\n      searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;\n    } else {\n      searchableSelectResultsStatusEl.innerText = \"\";\n    }\n  };\n\n  private debounceAriaLiveUpdate() {\n    clearTimeout(this.debounce);\n\n    window.setTimeout(() => {\n      this.updateSearchableSelectResultAriaLive();\n    }, 800);\n  }\n\n  private onFocus = (): void => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = (event: FocusEvent): void => {\n    if (\n      this.searchable &&\n      event.relatedTarget !== this.menu &&\n      !(this.clearButton && event.relatedTarget === this.clearButton)\n    ) {\n      this.setMenuChange(false);\n      this.handleFocusIndicatorDisplay();\n    }\n\n    this.icBlur.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.value = this.initialValue;\n    if (this.searchable) {\n      this.searchableSelectInputValue = null;\n    }\n  };\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.host, [\n      ...IC_INHERITED_ARIA,\n      \"tabindex\",\n      \"title\",\n    ]);\n\n    this.setOptionsValuesFromLabels();\n\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  componentDidRender(): void {\n    if (this.nativeSelectElement && !this.disabled) {\n      this.setTextColor();\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Select\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    const {\n      small,\n      disabled,\n      fullWidth,\n      helperText,\n      hideLabel,\n      label,\n      menuId,\n      name,\n      options,\n      placeholder,\n      readonly,\n      required,\n      searchable,\n      showClearButton,\n      validationStatus,\n      validationText,\n      value,\n    } = this;\n\n    renderHiddenInput(true, this.host, name, value, disabled);\n\n    const invalid =\n      validationStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n\n    const describedBy = getInputDescribedByText(\n      this.inputId,\n      helperText !== \"\",\n      hasValidationStatus(this.validationStatus, this.disabled)\n    ).trim();\n\n    return (\n      <Host>\n        <ic-input-container readonly={readonly}>\n          {!hideLabel && (\n            <ic-input-label\n              for={this.inputId}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabled}\n              readonly={readonly}\n            ></ic-input-label>\n          )}\n          <ic-input-component-container\n            ref={(el) => (this.anchorEl = el)}\n            class={{ \"menu-open\": this.open }}\n            small={small}\n            fullWidth={fullWidth}\n            disabled={disabled}\n            readonly={readonly}\n            validationStatus={validationStatus}\n          >\n            {readonly ? (\n              <ic-typography>\n                <p>{this.getLabelFromValue(value)}</p>\n              </ic-typography>\n            ) : isMobileOrTablet() ? (\n              <select\n                ref={(el) => (this.nativeSelectElement = el)}\n                disabled={disabled}\n                onChange={this.handleNativeSelectChange}\n                required={required}\n                id={this.inputId}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                {...this.inheritedAttributes}\n              >\n                <option value=\"\" selected disabled={!showClearButton}>\n                  {placeholder}\n                </option>\n                {options.map((option) => {\n                  if (option.children) {\n                    return (\n                      <optgroup label={option.label}>\n                        {option.children.map((option) => (\n                          <option\n                            value={option.value}\n                            disabled={option.disabled}\n                            selected={option.value === value}\n                          >\n                            {option.label}\n                          </option>\n                        ))}\n                      </optgroup>\n                    );\n                  } else {\n                    return (\n                      <option\n                        value={option.value}\n                        disabled={option.disabled}\n                        selected={option.value === value}\n                      >\n                        {option.label}\n                      </option>\n                    );\n                  }\n                })}\n              </select>\n            ) : searchable ? (\n              <div class=\"searchable-select-container\">\n                <input\n                  class=\"select-input\"\n                  role=\"combobox\"\n                  aria-label={label}\n                  aria-describedby={describedBy}\n                  aria-activedescendant={this.ariaActiveDescendant}\n                  aria-autocomplete=\"list\"\n                  aria-expanded={this.open ? \"true\" : \"false\"}\n                  aria-invalid={invalid}\n                  aria-required={required ? \"true\" : \"false\"}\n                  aria-controls={menuId}\n                  ref={(el) => (this.searchableSelectElement = el)}\n                  id={this.inputId}\n                  value={this.searchableSelectInputValue}\n                  placeholder={placeholder}\n                  disabled={disabled}\n                  onInput={this.handleSearchableSelectInput}\n                  onClick={this.handleClick}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.onFocus}\n                  onBlur={this.onBlur}\n                ></input>\n                {this.searchableSelectInputValue &&\n                  (showClearButton || searchable) && (\n                    <div class=\"clear-button-container\">\n                      <ic-button\n                        id=\"clear-button\"\n                        ref={(el) => (this.clearButton = el)}\n                        aria-label={\n                          this.searchableSelectInputValue && value === null\n                            ? \"Clear input\"\n                            : \"Clear selection\"\n                        }\n                        class=\"clear-button\"\n                        innerHTML={Clear}\n                        onClick={this.handleClear}\n                        onFocus={this.handleClearButtonFocus}\n                        onBlur={this.handleClearButtonBlur}\n                        size={small ? \"small\" : \"default\"}\n                        variant=\"icon\"\n                        appearance={\n                          this.clearButtonFocused\n                            ? IcThemeForegroundEnum.Light\n                            : IcThemeForegroundEnum.Dark\n                        }\n                      ></ic-button>\n                      <div class=\"divider\"></div>\n                    </div>\n                  )}\n                <span\n                  onMouseDown={this.handleExpandIconMouseDown}\n                  class={{\n                    \"expand-icon\": true,\n                    \"expand-icon-open\": this.open,\n                    \"expand-icon-filled\": !(value == null || value === \"\"),\n                    \"expand-icon-disabled\": !this.isMenuEnabled(),\n                  }}\n                  innerHTML={Expand}\n                  aria-hidden=\"true\"\n                />\n                <div\n                  aria-live=\"polite\"\n                  role=\"status\"\n                  class=\"searchable-select-results-status\"\n                ></div>\n              </div>\n            ) : (\n              <div class=\"select-container\">\n                <button\n                  class=\"select-input\"\n                  ref={(el) => (this.customSelectElement = el)}\n                  id={this.inputId}\n                  aria-label={`${label}, ${\n                    this.getLabelFromValue(value) || placeholder\n                  }${required ? \", required\" : \"\"}`}\n                  aria-describedby={describedBy}\n                  aria-invalid={invalid}\n                  aria-haspopup=\"listbox\"\n                  aria-expanded={this.open ? \"true\" : \"false\"}\n                  aria-owns={menuId}\n                  aria-controls={menuId}\n                  disabled={disabled}\n                  onBlur={this.onBlur}\n                  onFocus={this.onFocus}\n                  onClick={this.handleClick}\n                  onMouseDown={this.handleMouseDown}\n                  onKeyDown={this.handleKeyDown}\n                >\n                  <ic-typography\n                    variant=\"body\"\n                    class={{\n                      \"value-text\": true,\n                      placeholder: this.getLabelFromValue(value) === undefined,\n                    }}\n                  >\n                    <p>{this.getLabelFromValue(value) || placeholder}</p>\n                  </ic-typography>\n                  <div class=\"select-input-end\">\n                    {value && showClearButton && <div class=\"divider\"></div>}\n                    <span\n                      class={{\n                        \"expand-icon\": true,\n                        \"expand-icon-open\": this.open,\n                        \"expand-icon-filled\": !(value == null || value === \"\"),\n                      }}\n                      innerHTML={Expand}\n                      aria-hidden=\"true\"\n                    />\n                  </div>\n                </button>\n                {value && showClearButton && (\n                  <ic-button\n                    id=\"clear-button\"\n                    aria-label=\"Clear selection\"\n                    class=\"clear-button\"\n                    innerHTML={Clear}\n                    onClick={this.handleClear}\n                    onFocus={this.handleClearButtonFocus}\n                    onBlur={this.handleClearButtonBlur}\n                    size={small ? \"small\" : \"default\"}\n                    variant=\"icon\"\n                    appearance={\n                      this.clearButtonFocused\n                        ? IcThemeForegroundEnum.Light\n                        : IcThemeForegroundEnum.Dark\n                    }\n                  ></ic-button>\n                )}\n              </div>\n            )}\n          </ic-input-component-container>\n          {!isMobileOrTablet() && (\n            <ic-menu\n              class={{\n                \"no-results\": this.noOptions !== null,\n              }}\n              ref={(el) => (this.menu = el)}\n              inputEl={\n                searchable\n                  ? this.searchableSelectElement\n                  : this.customSelectElement\n              }\n              inputLabel={label}\n              anchorEl={this.anchorEl}\n              small={small}\n              menuId={menuId}\n              open={this.open}\n              options={searchable ? this.filteredOptions : options}\n              value={value}\n              fullWidth={fullWidth}\n              onMenuChange={this.handleMenuChange}\n              onOptionSelect={this.handleCustomSelectChange}\n              parentEl={this.host}\n            ></ic-menu>\n          )}\n          <ic-input-validation\n            class={{ \"menu-open\": this.open }}\n            ariaLiveMode=\"polite\"\n            status={\n              hasValidationStatus(this.validationStatus, this.disabled) ===\n              false\n                ? \"\"\n                : validationStatus\n            }\n            message={\n              hasValidationStatus(this.validationStatus, this.disabled)\n                ? validationText\n                : \"\"\n            }\n            for={this.inputId}\n          ></ic-input-validation>\n        </ic-input-container>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-7b11e1dc.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,H as e,g as a}from"./p-f9370be6.js";import{I as h}from"./p-6f57b13c.js";import{u as n,v as o,w as r,x as l,a as c,h as u,e as d}from"./p-23831891.js";const p=`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n    <path d="M15.8327 5.34199L14.6577 4.16699L9.99935 8.82533L5.34102 4.16699L4.16602 5.34199L8.82435 10.0003L4.16602 14.6587L5.34102 15.8337L9.99935 11.1753L14.6577 15.8337L15.8327 14.6587L11.1743 10.0003L15.8327 5.34199Z" fill="currentColor"/>\n</svg>\n`;const b=`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">\n    <path d="M13.1292 11.8792H12.4708L12.2375 11.6542C13.0542 10.7042 13.5458 9.47083 13.5458 8.12916C13.5458 5.13749 11.1208 2.71249 8.12916 2.71249C5.13749 2.71249 2.71249 5.13749 2.71249 8.12916C2.71249 11.1208 5.13749 13.5458 8.12916 13.5458C9.47083 13.5458 10.7042 13.0542 11.6542 12.2375L11.8792 12.4708V13.1292L16.0458 17.2875L17.2875 16.0458L13.1292 11.8792ZM8.12916 11.8792C6.05416 11.8792 4.37916 10.2042 4.37916 8.12916C4.37916 6.05416 6.05416 4.37916 8.12916 4.37916C10.2042 4.37916 11.8792 6.05416 11.8792 8.12916C11.8792 10.2042 10.2042 11.8792 8.12916 11.8792Z" fill="currentColor"/>\n</svg>`;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(.search){--divider-height:24px}:host(.search.small){--divider-height:16px}:host(.fullwidth){width:100%}:host(.search) .disabled:hover{border-color:var(--ic-architectural-200)}:host(.search.disabled) .disabled svg{color:var(--ic-architectural-200)}:host(.search) .disabled svg{color:var(--ic-architectural-400)}.clear-button-container{align-items:center;margin-right:1px;display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 2px var(--ic-focus-glow);border-radius:4px}.clear-button:focus *{fill:white}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus{background-color:var(--ic-focus-blue) !important;box-shadow:inset 0 0 0 2px var(--ic-focus-glow) !important;border-radius:var(--ic-space-xxs);height:var(--ic-space-xl);margin-top:var(--ic-space-xxxs)}.search-submit-button:focus *{fill:white}.divider{width:1px;background-color:var(--ic-action-dark-active);height:var(--divider-height)}:host(.dark) .divider{background-color:var(--ic-architectural-200)}.menu-container{width:var(--input-width, 320px);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}ic-menu{transition:var(--ic-easing-transition-slow)}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:1px;margin-bottom:-1px;margin-right:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}';let m=0;const v=class{constructor(s){t(this,s);this.icInput=i(this,"icInput",7);this.icInputBlur=i(this,"icInputBlur",7);this.icInputFocus=i(this,"icInputFocus",7);this.icChange=i(this,"icChange",7);this.icClear=i(this,"icClear",7);this.icSubmitSearch=i(this,"icSubmitSearch",7);this.icOptionSelect=i(this,"icOptionSelect",7);this.icMenuChange=i(this,"icMenuChange",7);this.icClearBlur=i(this,"icClearBlur",7);this.icSubmitSearchBlur=i(this,"icSubmitSearchBlur",7);this.icSearchBarBlur=i(this,"icSearchBarBlur",7);this.icSearchBarFocus=i(this,"icSearchBarFocus",7);this.inputId=`ic-search-bar-input-${m++}`;this.menuId=`${this.inputId}-menu`;this.menuCloseFromMenuChangeEvent=false;this.truncateValue=false;this.assistiveHintEl=null;this.preventSubmit=false;this.handleSubmitSearch=()=>{this.icSubmitSearch.emit({value:this.value});const t=this.el.closest("FORM");if(this.searchSubmitButton&&!!t&&!this.preventSubmit){n(t,this.searchSubmitButton)}};this.onInput=t=>{this.value=t.target.value;const i=[{label:this.emptyOptionListText,value:""}];if(this.options.length>0){this.setMenuChange(true);if(this.disableFilter===false){const t=o(this.options,false,this.value,"anywhere");this.filteredOptions=t.length>0?t:i}}else if(this.disableFilter){this.setMenuChange(true);this.filteredOptions=i}if(!this.showClearButton){this.handleShowClearButton(true)}this.debounceAriaLiveUpdate();this.icInput.emit({value:this.value})};this.onInputBlur=t=>{const i=t.target.value;const s=t.relatedTarget;this.icInputBlur.emit({value:i,relatedTarget:s})};this.onInputFocus=t=>{const i=t.target.value;this.icInputFocus.emit({value:i});this.handleShowClearButton(true)};this.handleClear=t=>{const i=t;const s=t;if(s.type==="click"||i.code==="Enter"||i.code==="Space"){this.value="";this.inputEl.value="";this.el.setFocus();this.icClear.emit();t.preventDefault();this.preventSubmit=true}};this.handleClearBlur=t=>{const i=t.relatedTarget;this.icClearBlur.emit({relatedTarget:i});this.clearButtonFocused=false};this.handleSubmitSearchBlur=t=>{const i=t.relatedTarget;this.icSubmitSearchBlur.emit({relatedTarget:i});this.searchSubmitFocused=false};this.handleSubmitSearchFocus=()=>{this.handleMenuCloseFromMenuChange(true);this.searchSubmitFocused=true};this.handleOptionSelect=t=>{if(t.detail.label===this.emptyOptionListText){this.el.setFocus();return}this.value=t.detail.value;this.icOptionSelect.emit({value:this.value})};this.handleMenuChange=t=>{this.setMenuChange(t.detail.open)};this.setMenuChange=t=>{if(this.open!==t){this.open=t;this.icMenuChange.emit({open:t})}};this.handleHostFocus=()=>{if(this.options&&this.value&&!this.menuCloseFromMenuChangeEvent){this.setMenuChange(true)}this.handleTruncateValue(false);this.icSearchBarFocus.emit()};this.handleHostBlur=t=>{const i=t.relatedTarget;if(this.open&&this.options&&i!==this.menu){this.setMenuChange(false)}this.handleShowClearButton(false);this.handleMenuCloseFromMenuChange(false);this.handleTruncateValue(true);this.icSearchBarBlur.emit({relatedTarget:i,value:this.value})};this.handleShowClearButton=t=>{this.showClearButton=t};this.handleFocusClearButton=()=>{this.clearButtonFocused=true};this.handleMenuCloseFromMenuChange=t=>{this.menuCloseFromMenuChangeEvent=t};this.handleTruncateValue=t=>{this.truncateValue=t};this.renderAssistiveHintEl=()=>{var t,i;const s=(i=(t=this.el.shadowRoot.querySelector("ic-text-field"))===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(`#${this.inputId}`);if(s&&Object.keys(s).length>0&&this.hasOptionsOrFilterDisabled()){this.assistiveHintEl=document.createElement("span");this.assistiveHintEl.innerText=this.hintText;this.assistiveHintEl.id=`${this.inputId}-assistive-hint`;this.assistiveHintEl.style.display="none";if(s.after!==undefined){s.after(this.assistiveHintEl)}}};this.updateSearchResultAriaLive=()=>{const t=this.el.shadowRoot.querySelector(".search-results-status");if(!this.open||this.value===""||this.value.length<this.charactersUntilSuggestion){t.innerText=""}else if(this.hasOptionsOrFilterDisabled()&&this.filteredOptions.length>0&&this.open&&t){if(this.hadNoOptions()){t.innerText=this.emptyOptionListText}else{t.innerText=`${this.filteredOptions.length} result${this.filteredOptions.length>1?"s":""} available`}}};this.hasOptionsOrFilterDisabled=()=>this.options.length>0||this.disableFilter;this.hadNoOptions=()=>this.filteredOptions.length===1&&this.filteredOptions[0].label===this.emptyOptionListText;this.isSubmitDisabled=()=>{const t=this.value===undefined||this.value===null||this.value==="";return t||this.disabled||this.hadNoOptions()};this.highlightFirstOptionAfterNoResults=()=>{if(this.prevNoOption&&this.menu){this.menu.handleSetFirstOption();this.prevNoOption=false}const t=this.filteredOptions.find((t=>t.label===this.emptyOptionListText));if(t){this.prevNoOption=true}};this.label=undefined;this.required=false;this.disabled=false;this.readonly=false;this.placeholder="Search";this.fullWidth=false;this.disableFilter=false;this.hideLabel=false;this.helperText="";this.small=false;this.value="";this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.debounce=0;this.name=this.inputId;this.spellcheck=false;this.options=[];this.focusOnLoad=false;this.hintText="When autocomplete results are available use the up and down arrows to choose and press enter to select";this.emptyOptionListText="No results found";this.charactersUntilSuggestion=2;this.open=false;this.filteredOptions=[];this.ariaActiveDescendant=undefined;this.showClearButton=false;this.clearButtonFocused=false;this.searchSubmitFocused=false;this.prevNoOption=false}debounceChanged(){this.icChange=r(this.icChange,this.debounce)}watchOptionsHandler(t){if(this.disableFilter){this.filteredOptions=t}}watchValueHandler(t){if(this.inputEl&&this.options&&!!l(t,this.options)){this.inputEl.value=l(t,this.options)}else if(this.inputEl&&this.inputEl.value!==t){this.inputEl.value=t}this.icChange.emit({value:t})}async setFocus(){if(this.inputEl){this.inputEl.setFocus()}}handleKeyDown(t){const i=t.detail.event;if(this.menu&&this.open){this.menu.handleKeyboardOpen(i)}}handleKeyUp(t){if(t.key==="Enter"){if(this.preventSubmit||this.isSubmitDisabled()){return}this.handleSubmitSearch();this.setMenuChange(false)}if(t.key==="Escape"){this.setMenuChange(false)}if(this.preventSubmit){this.preventSubmit=false}}debounceAriaLiveUpdate(){clearTimeout(this.debounce);this.debounce=window.setTimeout((()=>{this.updateSearchResultAriaLive()}),500)}onMenuClose(t){if(!t.detail.open){this.handleMenuCloseFromMenuChange(true);if(t.detail.focusInput===undefined||t.detail.focusInput){this.el.setFocus()}}}onMenuOptionHighlighted(t){if(t.detail.optionId){this.ariaActiveDescendant=t.detail.optionId}else{this.ariaActiveDescendant=undefined}}connectedCallback(){this.debounceChanged()}componentWillRender(){this.highlightFirstOptionAfterNoResults()}componentWillLoad(){this.watchValueHandler(this.value)}componentDidLoad(){if(this.focusOnLoad){this.el.setFocus()}if(this.hasOptionsOrFilterDisabled()){this.renderAssistiveHintEl();if(this.disableFilter){this.filteredOptions=this.options}}c([{prop:this.label,propName:"label"}],"Search Bar");this.anchorEl=this.inputEl.shadowRoot.querySelector("ic-input-component-container")}disconnectedCallback(){if(this.assistiveHintEl){this.assistiveHintEl.remove()}}render(){const{inputId:t,name:i,label:a,required:n,small:o,placeholder:r,helperText:c,disabled:f,value:m,readonly:v,spellcheck:g,fullWidth:w,options:x,open:y,hideLabel:k,menuId:L,ariaActiveDescendant:z,truncateValue:C,autofocus:B,autocapitalize:S,autocomplete:T,filteredOptions:M}=this;const F=v||f?true:false;const I=u(t,c!=="",false).trim();let H;if(I!==""&&this.hasOptionsOrFilterDisabled()){H=`${I} ${this.inputId}-assistive-hint`}else if(this.hasOptionsOrFilterDisabled()){H=`${this.inputId}-assistive-hint`}else if(I!==""){H=I}else{H=undefined}const O=F&&!v;const $=m&&this.hasOptionsOrFilterDisabled();const E=$&&y&&M.length>0;let j;if(x.length>0){if(E){j="true"}else{j="false"}}else{j=undefined}d(true,this.el,i,m,F);return s(e,{class:{["search"]:true,["fullwidth"]:w,["disabled"]:f,["small"]:o},onFocus:this.handleHostFocus,onBlur:this.handleHostBlur},s("ic-text-field",{ref:t=>this.inputEl=t,inputId:t,label:a,helperText:c,required:n,disabled:O,readonly:v,small:o,hideLabel:k,fullWidth:w,name:i,truncateValue:C,value:x&&!!l(m,x)?l(m,x):m,placeholder:r,onInput:this.onInput,onBlur:this.onInputBlur,onFocus:this.onInputFocus,"aria-label":k?a:"","aria-describedby":H,"aria-owns":$?L:undefined,"aria-haspopup":x.length>0?"listbox":undefined,ariaExpanded:j,ariaActiveDescendant:z,"aria-autocomplete":$?"list":undefined,role:$?"combobox":undefined,autocomplete:T,autocapitalize:S,autoFocus:B,spellcheck:g,inputmode:"search"},s("div",{class:{"clear-button-container":true,"clear-button-visible":m&&!F&&this.showClearButton},slot:"clear-button"},s("ic-button",{id:"clear-button",class:"clear-button","aria-label":"Clear",innerHTML:p,onClick:this.handleClear,size:o?"small":"default",onFocus:this.handleFocusClearButton,onBlur:this.handleClearBlur,onKeyDown:this.handleClear,type:"submit",variant:"icon",appearance:this.clearButtonFocused?h.Light:h.Dark}),s("div",{class:"divider"})),s("div",{class:{"search-submit-button-container":true,"search-submit-button-disabled":this.isSubmitDisabled()},slot:"search-submit-button"},s("ic-button",{id:"search-submit-button","aria-label":"Search",ref:t=>this.searchSubmitButton=t,class:{["search-submit-button"]:true,["search-submit-button-small"]:!!o},disabled:this.isSubmitDisabled(),innerHTML:b,size:o?"small":"default",onClick:this.handleSubmitSearch,onBlur:this.handleSubmitSearchBlur,onFocus:this.handleSubmitSearchFocus,type:"submit",variant:"icon",appearance:this.searchSubmitFocused?h.Light:h.Default})),s("div",{class:{"menu-container":true,fullwidth:w},slot:"menu"},E&&m.length>=this.charactersUntilSuggestion&&s("ic-menu",{class:{"no-results":this.hadNoOptions()},activationType:"manual",anchorEl:this.anchorEl,autoFocusOnSelected:false,inputEl:this.inputEl,inputLabel:a,ref:t=>this.menu=t,small:o,fullWidth:w,menuId:L,open:true,options:M,onOptionSelect:this.handleOptionSelect,onMenuChange:this.handleMenuChange,parentEl:this.el,value:m}))),s("div",{"aria-live":"polite",role:"status",class:"search-results-status"}))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],options:["watchOptionsHandler"],value:["watchValueHandler"]}}};v.style=f;export{v as ic_search_bar};
-//# sourceMappingURL=p-7b11e1dc.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"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"],"names":["icSearchBarCss","inputIds","SearchBar","this","inputId","menuId","menuCloseFromMenuChangeEvent","truncateValue","assistiveHintEl","preventSubmit","handleSubmitSearch","icSubmitSearch","emit","value","form","el","closest","searchSubmitButton","handleHiddenFormButtonClick","onInput","ev","target","noOptions","label","emptyOptionListText","options","length","setMenuChange","disableFilter","rawFilteredOptions","getFilteredMenuOptions","filteredOptions","showClearButton","handleShowClearButton","debounceAriaLiveUpdate","icInput","onInputBlur","nextFocus","relatedTarget","icInputBlur","onInputFocus","icInputFocus","handleClear","keyboardEvent","mouseEvent","type","code","inputEl","setFocus","icClear","preventDefault","handleClearBlur","icClearBlur","clearButtonFocused","handleSubmitSearchBlur","icSubmitSearchBlur","searchSubmitFocused","handleSubmitSearchFocus","handleMenuCloseFromMenuChange","handleOptionSelect","detail","icOptionSelect","handleMenuChange","open","icMenuChange","handleHostFocus","handleTruncateValue","icSearchBarFocus","handleHostBlur","menu","icSearchBarBlur","visible","handleFocusClearButton","fromEvent","truncate","renderAssistiveHintEl","input","_b","_a","shadowRoot","querySelector","Object","keys","hasOptionsOrFilterDisabled","document","createElement","innerText","hintText","id","style","display","after","undefined","updateSearchResultAriaLive","searchResultsStatusEl","charactersUntilSuggestion","hadNoOptions","isSubmitDisabled","valueNotSet","disabled","highlightFirstOptionAfterNoResults","prevNoOption","handleSetFirstOption","prevNoOptionsList","find","filteredOption","[object Object]","icChange","debounceEvent","debounce","newOptions","newValue","getLabelFromValue","keyEv","event","handleKeyboardOpen","key","clearTimeout","window","setTimeout","focusInput","optionId","ariaActiveDescendant","debounceChanged","watchValueHandler","focusOnLoad","onComponentRequiredPropUndefined","prop","propName","anchorEl","remove","name","required","small","placeholder","helperText","readonly","spellcheck","fullWidth","hideLabel","autofocus","autocapitalize","autocomplete","disabledMode","describedBy","getInputDescribedByText","trim","describedById","disabledText","hasSuggestedSearch","menuOpen","expanded","renderHiddenInput","h","Host","class","onFocus","onBlur","ref","aria-label","aria-describedby","aria-owns","aria-haspopup","ariaExpanded","aria-autocomplete","role","autoFocus","inputmode","clear-button-container","clear-button-visible","slot","innerHTML","clearIcon","onClick","size","onKeyDown","variant","appearance","IcThemeForegroundEnum","Light","Dark","search-submit-button-container","search-submit-button-disabled","searchIcon","Default","menu-container","fullwidth","no-results","activationType","autoFocusOnSelected","inputLabel","onOptionSelect","onMenuChange","parentEl","aria-live"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host(.search) {\n  --divider-height: 24px;\n}\n\n:host(.search.small) {\n  --divider-height: 16px;\n}\n\n:host(.fullwidth) {\n  width: 100%;\n}\n\n:host(.search) .disabled:hover {\n  border-color: var(--ic-architectural-200);\n}\n\n:host(.search.disabled) .disabled svg {\n  color: var(--ic-architectural-200);\n}\n\n:host(.search) .disabled svg {\n  color: var(--ic-architectural-400);\n}\n\n/* CLEAR */\n\n.clear-button-container {\n  align-items: center;\n  margin-right: 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  background-color: var(--ic-focus-blue);\n  box-shadow: inset 0 0 0 2px var(--ic-focus-glow);\n  border-radius: 4px;\n}\n\n.clear-button:focus * {\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-disabled .ic-tooltip-container {\n  display: none !important;\n}\n\n.search-submit-button:focus {\n  background-color: var(--ic-focus-blue) !important;\n  box-shadow: inset 0 0 0 2px var(--ic-focus-glow) !important;\n  border-radius: var(--ic-space-xxs);\n  height: var(--ic-space-xl);\n  margin-top: var(--ic-space-xxxs);\n}\n\n.search-submit-button:focus * {\n  fill: white;\n}\n\n.divider {\n  width: 1px;\n  background-color: var(--ic-action-dark-active);\n  height: var(--divider-height);\n}\n\n:host(.dark) .divider {\n  background-color: var(--ic-architectural-200);\n}\n\n.menu-container {\n  width: var(--input-width, 320px);\n  position: relative;\n  top: var(--ic-space-xxxs);\n}\n\n.menu-container.fullwidth {\n  width: 100%;\n}\n\nic-menu {\n  transition: var(--ic-easing-transition-slow);\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: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  IcThemeForegroundEnum,\n  IcMenuOption,\n} from \"../../utils/types\";\nimport {\n  debounceEvent,\n  getInputDescribedByText,\n  renderHiddenInput,\n  handleHiddenFormButtonClick,\n  getLabelFromValue,\n  onComponentRequiredPropUndefined,\n  getFilteredMenuOptions,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"./ic-search-bar.types\";\nimport { IcValueEventDetail, IcBlurEventDetail } from \"../../interface\";\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: true,\n})\nexport class SearchBar {\n  @Element() el: HTMLIcSearchBarElement;\n\n  private inputId = `ic-search-bar-input-${inputIds++}`;\n  private inputEl: HTMLIcTextFieldElement;\n\n  private menuId = `${this.inputId}-menu`;\n  private searchSubmitButton: HTMLIcButtonElement;\n  private menu: HTMLIcMenuElement;\n  private menuCloseFromMenuChangeEvent: boolean = false;\n\n  private anchorEl: HTMLElement;\n  private truncateValue = false;\n\n  private assistiveHintEl: HTMLSpanElement = null;\n  private preventSubmit: boolean = false;\n\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Specify if the input requires a value.\n   */\n  @Prop() required?: boolean = false;\n  /**\n   * Specify whether the input is disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Specify whether the input is read only.\n   */\n  @Prop() readonly?: boolean = false;\n\n  /**\n   * Provide a placeholder value to display.\n   */\n  @Prop() placeholder?: string = \"Search\";\n\n  /**\n   * Specify whether the component fills the full width of the container.\n   * If true, this overrides the --input-width css prop.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * 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() disableFilter?: boolean = false;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n\n  /**\n   * Specify whether small styling is to be applied to the element.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * Value of Search input.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n   */\n  @Prop() autocapitalize = \"off\";\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete?: IcAutocompleteTypes = \"off\";\n\n  /**\n   * Whether auto correction should be enabled when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect?: IcAutocorrectStates = \"off\";\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n   */\n  @Prop({ mutable: true }) debounce?: number = 0;\n\n  @Watch(\"debounce\")\n  private debounceChanged() {\n    this.icChange = debounceEvent(this.icChange, this.debounce);\n  }\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n  /**\n   * Provide the suggested search options\n   */\n  @Prop() options?: IcMenuOption[] = [];\n\n  @Watch(\"options\")\n  watchOptionsHandler(newOptions: IcMenuOption[]): void {\n    if (this.disableFilter) {\n      this.filteredOptions = newOptions;\n    }\n  }\n\n  /**\n   * Specify whether the input should be focussed when component loaded.\n   */\n  @Prop() focusOnLoad?: boolean = false;\n\n  /**\n   * Provide hint text for hidden assistive description element.\n   */\n  @Prop() hintText?: string =\n    \"When autocomplete results are available use the up and down arrows to choose and press enter to select\";\n\n  /**\n   * Provide text for empty results list\n   */\n  @Prop() emptyOptionListText = \"No results found\";\n\n  /**\n   * Number of characters until suggestions appear\n   */\n  @Prop() charactersUntilSuggestion: number = 2;\n\n  @Watch(\"value\")\n  watchValueHandler(newValue: string): void {\n    if (\n      this.inputEl &&\n      this.options &&\n      !!getLabelFromValue(newValue, this.options)\n    ) {\n      this.inputEl.value = getLabelFromValue(newValue, this.options);\n    } else if (this.inputEl && this.inputEl.value !== newValue) {\n      this.inputEl.value = newValue;\n    }\n\n    this.icChange.emit({ value: newValue });\n  }\n\n  /**\n   * Sets focus on the native `input`\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.inputEl) {\n      this.inputEl.setFocus();\n    }\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  private handleSubmitSearch = () => {\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  /**\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 = [{ label: this.emptyOptionListText, value: \"\" }];\n\n    if (this.options.length > 0) {\n      this.setMenuChange(true);\n\n      if (this.disableFilter === false) {\n        const rawFilteredOptions = getFilteredMenuOptions(\n          this.options,\n          false,\n          this.value,\n          \"anywhere\"\n        );\n\n        this.filteredOptions =\n          rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;\n      }\n    } else if (this.disableFilter) {\n      this.setMenuChange(true);\n      this.filteredOptions = noOptions;\n    }\n\n    if (!this.showClearButton) {\n      this.handleShowClearButton(true);\n    }\n\n    this.debounceAriaLiveUpdate();\n\n    this.icInput.emit({ value: this.value });\n  };\n\n  private debounceAriaLiveUpdate() {\n    clearTimeout(this.debounce);\n\n    this.debounce = window.setTimeout(() => {\n      this.updateSearchResultAriaLive();\n    }, 500);\n  }\n\n  /**\n   * Emitted when input loses focus.\n   */\n  @Event() icInputBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n  private onInputBlur = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    const nextFocus = (ev as FocusEvent).relatedTarget;\n\n    this.icInputBlur.emit({ value: value, relatedTarget: nextFocus });\n  };\n\n  /**\n   * Emitted when input gains focus.\n   */\n  @Event() icInputFocus: EventEmitter<IcValueEventDetail>;\n  private onInputFocus = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icInputFocus.emit({ value: value });\n\n    this.handleShowClearButton(true);\n  };\n\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.el.setFocus();\n\n      this.icClear.emit();\n      ev.preventDefault();\n\n      this.preventSubmit = true;\n    }\n  };\n\n  /**\n   * Emitted when the search value has been submitted\n   */\n  @Event() icSubmitSearch: EventEmitter<IcValueEventDetail>;\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   * @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  private handleSubmitSearchFocus = () => {\n    this.handleMenuCloseFromMenuChange(true);\n    this.searchSubmitFocused = true;\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<void>;\n\n  @State() open: boolean = false;\n  @State() filteredOptions: IcMenuOption[] = [];\n  @State() ariaActiveDescendant: string;\n  @State() showClearButton: boolean = false;\n  @State() clearButtonFocused: boolean = false;\n  @State() searchSubmitFocused: boolean = false;\n  @State() prevNoOption: boolean = false;\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 handleMenuChange = (ev: CustomEvent) => {\n    this.setMenuChange(ev.detail.open);\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 (this.open && this.options && nextFocus !== this.menu) {\n      this.setMenuChange(false);\n    }\n\n    this.handleShowClearButton(false);\n    this.handleMenuCloseFromMenuChange(false);\n    this.handleTruncateValue(true);\n    this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });\n  };\n\n  @Listen(\"menuChange\", {})\n  onMenuClose(ev: CustomEvent): void {\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  @Listen(\"menuOptionId\")\n  onMenuOptionHighlighted(ev: CustomEvent): void {\n    if (ev.detail.optionId) {\n      this.ariaActiveDescendant = ev.detail.optionId;\n    } else {\n      this.ariaActiveDescendant = undefined;\n    }\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.hintText;\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 (\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      searchResultsStatusEl\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  private hasOptionsOrFilterDisabled = (): boolean =>\n    this.options.length > 0 || this.disableFilter;\n\n  private hadNoOptions = (): boolean =>\n    this.filteredOptions.length === 1 &&\n    this.filteredOptions[0].label === this.emptyOptionListText;\n\n  private isSubmitDisabled = (): boolean => {\n    const valueNotSet =\n      this.value === undefined || this.value === null || this.value === \"\";\n    return valueNotSet || this.disabled || this.hadNoOptions();\n  };\n\n  private highlightFirstOptionAfterNoResults = () => {\n    if (this.prevNoOption && this.menu) {\n      this.menu.handleSetFirstOption();\n      this.prevNoOption = false;\n    }\n    const prevNoOptionsList = this.filteredOptions.find(\n      (filteredOption) => filteredOption.label === this.emptyOptionListText\n    );\n    if (prevNoOptionsList) {\n      this.prevNoOption = true;\n    }\n  };\n\n  connectedCallback(): void {\n    this.debounceChanged();\n  }\n\n  componentWillRender(): void {\n    this.highlightFirstOptionAfterNoResults();\n  }\n\n  componentWillLoad(): void {\n    this.watchValueHandler(this.value);\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.disableFilter) {\n        this.filteredOptions = this.options;\n      }\n    }\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Search Bar\"\n    );\n\n    this.anchorEl = this.inputEl.shadowRoot.querySelector(\n      \"ic-input-component-container\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.assistiveHintEl) {\n      this.assistiveHintEl.remove();\n    }\n  }\n\n  render() {\n    const {\n      inputId,\n      name,\n      label,\n      required,\n      small,\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    } = this;\n\n    const disabledMode = readonly || disabled ? true : false;\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 disabledText = disabledMode && !readonly;\n    const hasSuggestedSearch = value && this.hasOptionsOrFilterDisabled();\n    const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;\n\n    let expanded;\n\n    if (options.length > 0) {\n      if (menuOpen) {\n        expanded = \"true\";\n      } else {\n        expanded = \"false\";\n      }\n    } else {\n      expanded = undefined;\n    }\n\n    renderHiddenInput(true, this.el, name, value, disabledMode);\n\n    return (\n      <Host\n        class={{\n          [\"search\"]: true,\n          [\"fullwidth\"]: fullWidth,\n          [\"disabled\"]: disabled,\n          [\"small\"]: small,\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={disabledText}\n          readonly={readonly}\n          small={small}\n          hideLabel={hideLabel}\n          fullWidth={fullWidth}\n          name={name}\n          truncateValue={truncateValue}\n          value={\n            options && !!getLabelFromValue(value, options)\n              ? getLabelFromValue(value, options)\n              : value\n          }\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={hasSuggestedSearch ? menuId : undefined}\n          aria-haspopup={options.length > 0 ? \"listbox\" : undefined}\n          ariaExpanded={expanded}\n          ariaActiveDescendant={ariaActiveDescendant}\n          aria-autocomplete={hasSuggestedSearch ? \"list\" : undefined}\n          role={hasSuggestedSearch ? \"combobox\" : undefined}\n          autocomplete={autocomplete}\n          autocapitalize={autocapitalize}\n          autoFocus={autofocus}\n          spellcheck={spellcheck}\n          inputmode=\"search\"\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=\"clear-button\"\n              aria-label=\"Clear\"\n              innerHTML={clearIcon}\n              onClick={this.handleClear}\n              size={small ? \"small\" : \"default\"}\n              onFocus={this.handleFocusClearButton}\n              onBlur={this.handleClearBlur}\n              onKeyDown={this.handleClear}\n              type=\"submit\"\n              variant=\"icon\"\n              appearance={\n                this.clearButtonFocused\n                  ? IcThemeForegroundEnum.Light\n                  : IcThemeForegroundEnum.Dark\n              }\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\"]: !!small,\n              }}\n              disabled={this.isSubmitDisabled()}\n              innerHTML={searchIcon}\n              size={small ? \"small\" : \"default\"}\n              onClick={this.handleSubmitSearch}\n              onBlur={this.handleSubmitSearchBlur}\n              onFocus={this.handleSubmitSearchFocus}\n              type=\"submit\"\n              variant=\"icon\"\n              appearance={\n                this.searchSubmitFocused\n                  ? IcThemeForegroundEnum.Light\n                  : IcThemeForegroundEnum.Default\n              }\n            ></ic-button>\n          </div>\n          <div\n            class={{\n              \"menu-container\": true,\n              fullwidth: fullWidth,\n            }}\n            slot=\"menu\"\n          >\n            {menuOpen && value.length >= this.charactersUntilSuggestion && (\n              <ic-menu\n                class={{\n                  \"no-results\": this.hadNoOptions(),\n                }}\n                activationType=\"manual\"\n                anchorEl={this.anchorEl}\n                autoFocusOnSelected={false}\n                inputEl={this.inputEl}\n                inputLabel={label}\n                ref={(el) => (this.menu = el)}\n                small={small}\n                fullWidth={fullWidth}\n                menuId={menuId}\n                open={true}\n                options={filteredOptions}\n                onOptionSelect={this.handleOptionSelect}\n                onMenuChange={this.handleMenuChange}\n                parentEl={this.el}\n                value={value}\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"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-footer-link/ic-footer-link.css?tag=ic-footer-link&encapsulation=shadow","src/components/ic-footer-link/ic-footer-link.tsx"],"names":["icFooterLinkCss","FooterLink","small","grouped","DEVICE_SIZES","XL","getThemeForegroundColor","[object Object]","e","parentElement","classList","contains","this","inferConfig","footerConfig","el","ev","theme","detail","foregroundColor","mode","href","h","Host","class","footer-link"],"mappings":"4HAAA,MAAMA,EAAkB,yvKCmBXC,EAAU,yCAMG,uBAEc,CAAEC,MAAO,MAAOC,QAAS,uBAEjCC,EAAaC,wBAEGC,IAEtCC,YAAYC,GAClB,GAAIA,EAAEC,gBAAkB,KAAM,CAC5B,GAAID,EAAEC,cAAcC,UAAUC,SAAS,UAAW,CAChD,MAAO,CACLT,MAAOM,EAAEC,cAAcC,UAAUC,SAAS,gBAC1CR,QAASK,EAAEC,cAAcC,UAAUC,SAAS,uBAEzC,CACL,OAAOC,KAAKC,YAAYL,EAAEC,oBAEvB,CACL,MAAO,CAAEP,MAAO,MAAOC,QAAS,QAKpCI,sBACEK,KAAKE,aAAeF,KAAKC,YAAYD,KAAKG,IAI5CR,yBAAyBS,GACvB,MAAMC,EAAiBD,EAAGE,OAC1BN,KAAKO,gBAAkBF,EAAMG,KAG/Bb,oBACEK,KAAKE,aAAeF,KAAKC,YAAYD,KAAKG,IAG5CR,SACE,MAAMO,aAAEA,EAAYO,KAAEA,GAAST,KAC/B,MAAMV,MAAEA,EAAKC,QAAEA,GAAYW,EAE3B,OACEQ,EAACC,EAAI,CACHC,MAAO,CACLC,cAAe,KACflB,CAAC,eAAeJ,EAAU,UAAY,eACpCD,EAAQ,QAAU,YACf,KACLK,CAAC,eAAeK,KAAKO,mBAAoB,OAG3CG,EAAA,IAAA,CAAGD,KAAMA,GACPC,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host(.footer-link-ungrouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 40px;\n  --footer-link-margin-bottom: 0;\n}\n\n:host(.footer-link-ungrouped-small) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-small) {\n  --footer-link-margin-left: var(--ic-space-md);\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link) {\n  margin-left: var(--footer-link-margin-left);\n  margin-right: var(--footer-link-margin-right);\n  margin-bottom: var(--footer-link-margin-bottom);\n}\n\n/* Link styling */\n\n:host(.footer-link) a,\n:host(.footer-link) a ::slotted(a) {\n  display: block;\n  font-weight: var(--ic-font-weight-bold);\n  color: inherit;\n  width: fit-content;\n  font-size: var(--ic-font-size-regular);\n}\n\n:host(.footer-link) a:link,\n:host(.footer-link) a ::slotted(a:link) {\n  color: inherit;\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n}\n\n:host(.footer-link) a:link > ::slotted(svg),\n:host(.footer-link) a:link > ::slotted(img),\n:host(.footer-link) a ::slotted(a:link > ::slotted(svg)),\n:host(.footer-link) a ::slotted(a:link > ::slotted(img)) {\n  padding: var(--ic-space-xxxs);\n  pointer-events: none;\n  transition: var(--ic-easing-transition-fast);\n}\n\n/*\nThere's an apparent defect in Chrome that means this isn't always re-rendered if changed. \nNot an issue in Safari. Line 73-79 implement the same function but less clean.\n\na:link > ::slotted(svg) ,\na:link:visited > ::slotted(svg) {\n  fill: var(--ic-theme-text);\n}\n*/\n\n:host(.footer-link-light) ::slotted(svg) {\n  fill: var(--ic-architectural-white);\n}\n\n:host(.footer-link-dark) ::slotted(svg) {\n  fill: var(--ic-architectural-black);\n}\n\n:host(.footer-link) a:link:hover,\n:host(.footer-link) a:link:focus,\n:host(.footer-link) a ::slotted(a:link:hover),\n:host(.footer-link) a ::slotted(a:link:focus) {\n  text-decoration-line: underline;\n  text-decoration-thickness: 25%;\n  text-underline-offset: 25%;\n}\n\n:host(.footer-link) a:link:hover,\n:host(.footer-link) a ::slotted(a:link:hover) {\n  outline: none;\n}\n\n:host(.footer-link) a:link:focus,\n:host(.footer-link) a ::slotted(a:link:focus) {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.footer-link) a:link:focus > ::slotted(svg),\n:host(.footer-link) a:link:focus > ::slotted(img),\n:host(.footer-link) a ::slotted(a:link:focus > ::slotted(svg)),\n:host(.footer-link) a ::slotted(a:link:focus > ::slotted(img)) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n}\n\n:host(.footer-link) a:focus,\n:host(.footer-link) a ::slotted(a:focus) {\n  border-radius: var(--ic-border-radius);\n  outline: var(--ic-hc-focus-outline);\n  transition: var(--ic-transition-duration-fast);\n}\n\n:host(.footer-link) a:link:active,\n:host(.footer-link) a:link:focus:active,\n:host(.footer-link) a:link:visited:active,\n:host(.footer-link) a ::slotted(a:link:active),\n:host(.footer-link) a ::slotted(a:link:focus:active),\n:host(.footer-link) a ::slotted(a:link:visited:active) {\n  color: inherit;\n  text-decoration: none;\n}\n\n:host(.footer-link) a:hover,\n:host(.footer-link) a ::slotted(a:hover) {\n  text-decoration: none;\n}\n\n@media (forced-colors: active) {\n  :host(.footer-link-light) ::slotted(svg),\n  :host(.footer-link-dark) ::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport { DEVICE_SIZES, getThemeForegroundColor } from \"../../utils/helpers\";\nimport { IcTheme, IcThemeForeground } from \"../../utils/types\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n  tag: \"ic-footer-link\",\n  styleUrl: \"ic-footer-link.css\",\n  shadow: true,\n})\nexport class FooterLink {\n  @Element() el: HTMLIcFooterLinkElement;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  @State() footerConfig: FooterConfig = { small: false, grouped: false };\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  private inferConfig(e: HTMLElement): FooterConfig {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"footer-small\"),\n          grouped: e.parentElement.classList.contains(\"footer-grouped\"),\n        };\n      } else {\n        return this.inferConfig(e.parentElement);\n      }\n    } else {\n      return { small: false, grouped: false };\n    }\n  }\n\n  @Listen(\"icFooterResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  componentWillLoad(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  render() {\n    const { footerConfig, href } = this;\n    const { small, grouped } = footerConfig;\n\n    return (\n      <Host\n        class={{\n          \"footer-link\": true,\n          [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n            small ? \"small\" : \"sparse\"\n          }`]: true,\n          [`footer-link-${this.foregroundColor}`]: true,\n        }}\n      >\n        <a href={href}>\n          <slot />\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","src/components/ic-input-component-container/ic-input-component-container.tsx","src/components/ic-input-container/ic-input-container.css?tag=ic-input-container","src/components/ic-input-container/ic-input-container.tsx","src/components/ic-menu/ic-menu.css?tag=ic-menu&encapsulation=shadow","src/components/ic-menu/ic-menu.tsx"],"names":["icInputComponentContainerCss","InputComponentContainer","[object Object]","small","validationStatus","disabled","readonly","multiLine","fullWidth","dark","validationInline","this","hasValidationStatus","h","Host","class","focus-indicator","isSlotUsed","host","name","IcInformationStatus","Success","innerHTML","successIcon","icInputContainerCss","InputContainer","icMenuCss","Menu","ungroupedOptions","preventClickOpen","handleMenuChange","open","focusInput","popperInstance","destroy","menuChange","emit","inputEl","focus","setNextOptionValue","selectedOptionIndex","optionSelect","value","optionId","getOptionId","setPreviousOptionValue","length","arrowBehaviour","event","preventDefault","setHighlightedOption","highlightedIndex","optionHighlighted","options","undefined","autoSetInputValueKeyboardOpen","findIndex","option","isSearchableSelect","_a","tagName","key","keyboardNav","target","id","manSetInputValueKeyboardOpen","highlightedOptionIndex","menuOptionId","index","Array","from","shadowRoot","querySelectorAll","isSearchBar","parentEl","preventIncorrectTabOrder","focusFromSearchKeypress","setInputValue","setFocus","handleOptionClick","label","dataset","handleBlur","relatedTarget","menu","contains","handleMenuKeyDown","activationType","autoSetValueOnMenuKeyDown","cancelBubble","handleMenuKeyUp","shiftKey","menuId","getOptionAriaLabel","parentOption","ariaLabel","description","getSortedOptions","sort","optionA","optionB","recommended","isManualMode","scrollToSelected","selectedOption","querySelector","elTop","offsetTop","offsetHeight","scrollTop","loadUngroupedOptions","map","children","push","displayOption","focused-option","initialOptionsListRender","last-recommended-option","disabled-option","role","tabindex","aria-label","aria-selected","aria-disabled","onClick","onBlur","onMouseDown","data-value","data-label","variant","aria-hidden","Check","optionsHeight","forEach","clientHeight","classList","add","onComponentRequiredPropUndefined","prop","propName","inputLabel","createPopper","anchorEl","placement","modifiers","offset","fallbackPlacements","rootBoundary","inputValueInOptions","some","optionHighlightedIsSet","autoFocusOnSelected","highlightedEl","full-width","no-focus","aria-activedescendant","_b","ref","el","onKeyDown","onKeyUp","childOption"],"mappings":"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","sourcesContent":["ic-input-component-container {\n  /**\n   * @prop --border-color: Border colour of the input component container\n   */\n\n  display: flex;\n  border: 1px solid var(--border-color, var(--ic-architectural-400));\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-easing-transition-slow);\n  height: 40px;\n  width: var(--input-width, 320px);\n  padding: 1px;\n  background-color: var(--ic-architectural-white);\n  box-sizing: border-box;\n  position: relative;\n  fill: var(--ic-architectural-400);\n  outline: none;\n}\n\nic-input-component-container.fullwidth {\n  width: 100%;\n}\n\nic-input-component-container.disabled,\nic-input-component-container.disabled:hover {\n  border: 1px dashed var(--ic-architectural-200);\n}\n\nic-input-component-container.readonly,\nic-input-component-container.readonly:hover {\n  border: none;\n  padding: 0;\n}\n\nic-input-component-container.error {\n  border: var(--ic-space-xxxs) solid var(--ic-status-error);\n  padding: 0;\n}\n\nic-input-component-container.warning {\n  border: var(--ic-space-xxxs) solid var(--ic-status-warning-mid);\n  padding: 0;\n}\n\nic-input-component-container.success {\n  border: var(--ic-space-xxxs) solid var(--ic-status-success);\n  padding: 0;\n}\n\nic-input-component-container.small {\n  height: var(--ic-space-xl);\n}\n\nic-input-component-container.multiline {\n  height: auto;\n}\n\nic-input-component-container .icon-container {\n  margin-top: var(--ic-space-xxs);\n  margin-left: 7px;\n  display: flex;\n  align-items: center;\n}\n\nic-input-component-container.multiline .icon-container,\nic-input-component-container.multiline.small .icon-container {\n  margin-top: 6px;\n  display: block;\n}\n\nic-input-component-container.readonly .icon-container {\n  margin-left: -5px;\n}\n\nic-input-component-container.disabled ::placeholder {\n  display: none;\n}\n\nic-input-component-container .inline-success {\n  margin: var(--ic-space-xs) 6px;\n  display: flex;\n  align-items: center;\n}\n\nic-input-component-container.dark:hover {\n  --border-color: var(--ic-architectural-400);\n}\n\nic-input-component-container .inline-success > svg {\n  fill: var(--ic-status-success);\n}\n\nic-input-component-container:hover {\n  border-color: var(--ic-action-dark-hover);\n  color: var(--ic-action-dark-hover);\n\n  --expand-icon-hover: var(--ic-action-dark-hover);\n}\n\n.focus-indicator {\n  display: flex;\n  width: 100%;\n  margin: -2px;\n  padding: 2px;\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n  box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.dark:focus-within {\n  box-shadow: var(--ic-border-focus);\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n  ic-input-component-container,\n  .focus-indicator {\n    transition: none;\n  }\n\n  ic-input-component-container:focus-within {\n    border: 1px solid Highlight;\n    outline: 2px solid Highlight;\n  }\n\n  ic-input-component-container.disabled,\n  ic-input-component-container.disabled:hover {\n    border: 1px dashed GrayText;\n  }\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot left-icon - Content will be placed to the left of the input.\n */\n@Component({\n  tag: \"ic-input-component-container\",\n  styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n  /**\n   * disabled\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * readonly\n   */\n  @Prop() readonly: boolean = false;\n  /**\n   * validationStatus\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * small\n   */\n  @Prop() small: boolean = false;\n  /**\n   * multiLine\n   */\n  @Prop() multiLine: boolean = false;\n  /**\n   * validationInline\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   * Determines whether the dark variant of the input-component-container focus indicator should be displayed.\n   */\n  @Prop() dark?: boolean = false;\n\n  /**\n   *  If true then fill width of container\n   */\n  @Prop() fullWidth: boolean = false;\n\n  @Element() host: HTMLIcInputComponentContainerElement;\n\n  render() {\n    const {\n      small,\n      validationStatus,\n      disabled,\n      readonly,\n      multiLine,\n      fullWidth,\n      dark,\n      validationInline,\n    } = this;\n    const hasValidationStatus =\n      this.validationStatus !== \"\" && !this.disabled && !this.readonly\n        ? true\n        : false;\n    return (\n      <Host\n        class={{\n          [\"small\"]: small,\n          [validationStatus]: hasValidationStatus,\n          [\"disabled\"]: disabled,\n          [\"readonly\"]: readonly,\n          [\"multiline\"]: multiLine,\n          [\"fullwidth\"]: fullWidth,\n          [\"dark\"]: dark,\n        }}\n      >\n        <div\n          class={{\n            \"focus-indicator\": true,\n            dark: dark,\n          }}\n        >\n          {isSlotUsed(this.host, \"left-icon\") && (\n            <div\n              class={{\n                [\"icon-container\"]: true,\n              }}\n            >\n              <slot name=\"left-icon\" />\n            </div>\n          )}\n          <slot></slot>\n\n          {validationInline &&\n            validationStatus === IcInformationStatus.Success && (\n              <span\n                class={{\n                  [\"inline-success\"]: true,\n                }}\n                innerHTML={successIcon}\n              />\n            )}\n        </div>\n      </Host>\n    );\n  }\n}\n","ic-input-container .component-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-input-container\",\n  styleUrl: \"ic-input-container.css\",\n})\nexport class InputContainer {\n  /**\n   * disabled\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * readonly\n   */\n  @Prop() readonly?: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            [\"component-container\"]: true,\n            [\"disabled\"]: this.disabled,\n            [\"readonly\"]: this.readonly,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import \"../../global/normalise.css\";\n\n@media (prefers-reduced-motion: no-preference) {\n  :host([open]) .menu {\n    transition: max-height var(--ic-transition-duration-slow);\n  }\n}\n\n:host {\n  border-radius: var(--ic-border-radius);\n  max-height: 0;\n  width: var(--input-width, 320px);\n  color: var(--ic-color-primary-text);\n  background-color: var(--ic-architectural-white);\n  position: relative;\n  z-index: var(--ic-z-index-popup-menu);\n  box-sizing: border-box;\n  box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(:not(.no-focus):focus-within) {\n  box-shadow: var(--ic-border-focus);\n}\n\n.menu {\n  text-decoration: none;\n  list-style-type: none;\n  border: 1px solid var(--ic-architectural-400);\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-architectural-white);\n  visibility: hidden;\n  max-height: 0;\n  overflow-y: hidden;\n}\n\n.menu-scroll {\n  overflow-y: auto;\n}\n\n.menu:focus-visible {\n  outline: none;\n}\n\n:host([open]) {\n  max-height: none;\n  display: block;\n}\n\n:host([open]) .menu {\n  visibility: visible;\n  max-height: 322px;\n}\n\n:host(.full-width) {\n  width: 100%;\n}\n\n.option {\n  padding: 8px 7px;\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n:host([small]) .option {\n  padding: 4px 7px;\n}\n\n.option:last-child {\n  border-radius: 0 0 1px 1px;\n}\n\n.option:first-child {\n  border-radius: 1px 1px 0 0;\n}\n\n.option:not(.disabled-option):hover {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n.option:not(.disabled-option):active {\n  background-color: var(--ic-action-dark-bg-active);\n}\n\n.option:focus-visible {\n  outline: var(--ic-hc-focus-outline);\n}\n\n.option:not(.disabled-option) .option-description {\n  color: var(--ic-color-secondary-text);\n}\n\n.option-text-container {\n  pointer-events: none;\n}\n\n.check-icon {\n  height: 24px;\n  margin-left: 8px;\n  pointer-events: none;\n}\n\n.focused-option .check-icon * {\n  fill: currentColor;\n}\n\n.option-group-title {\n  padding: 24px 7px 8px;\n  color: var(--ic-color-tertiary-text);\n}\n\n:host([small]) .option-group-title {\n  padding: 12px 7px 4px;\n}\n\n.last-recommended-option {\n  border-bottom: 1px solid var(--ic-architectural-400);\n}\n\n.disabled-option {\n  color: var(--ic-architectural-200);\n  cursor: default;\n  pointer-events: none;\n}\n\n.focused-option,\n.focused-option .option-description {\n  background-color: var(--ic-focus-blue) !important;\n  color: var(--ic-color-white-text) !important;\n}\n\n:host(.no-results) li {\n  cursor: no-drop;\n}\n\n:host(.no-results) li:hover {\n  background-color: transparent;\n}\n\n@media (forced-colors: active) {\n  .focused-option:focus {\n    outline: none;\n    border: 2px solid transparent;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Method,\n  Listen,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\nimport { IcActivationTypes, IcMenuOption } from \"../../utils/types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n  IcOptionSelectEventDetail,\n  IcMenuChangeEventDetail,\n  IcMenuOptionIdEventDetail,\n} from \"./ic-menu.types\";\n\n@Component({\n  tag: \"ic-menu\",\n  styleUrl: \"ic-menu.css\",\n  shadow: true,\n})\nexport class Menu {\n  @Element() host: HTMLIcMenuElement;\n\n  /**\n   * Specify whether the menu is open.\n   */\n  @Prop({ reflect: true }) open!: boolean;\n\n  /**\n   * Provide the possible selection options.\n   */\n  @Prop() options!: IcMenuOption[];\n\n  /**\n   * Specify whether small styling is to be applied to the element.\n   */\n  @Prop({ reflect: true }) small?: boolean = false;\n\n  /**\n   * Id of the menu.\n   */\n  @Prop() menuId!: string;\n\n  /**\n   * The value of the currently selected option.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.\n   */\n  @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n  /**\n   * Reference to the input element.\n   */\n  @Prop() inputEl!: HTMLElement;\n\n  /**\n   * @internal - set if ic-menu is nested inside another component\n   */\n  @Prop() parentEl?: HTMLElement;\n\n  /**\n   * Label for the input element.\n   */\n  @Prop() inputLabel!: string;\n\n  /**\n   * Reference to an anchor element the menu will position itself from when rendered.\n   */\n  @Prop() anchorEl!: HTMLElement;\n\n  /**\n   *  If true then fill width of container\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * @internal If true, autofocus on selected item when menu is open\n   */\n  @Prop() autoFocusOnSelected: boolean = true;\n\n  @State() keyboardNav: boolean = false;\n  @State() optionHighlighted: string;\n  @State() focusFromSearchKeypress: boolean = false;\n  @State() initialOptionsListRender: boolean = false;\n  @State() preventIncorrectTabOrder: boolean = false;\n\n  @Watch(\"options\")\n  watchOptionsHandler(): void {\n    this.ungroupedOptions = [];\n    this.loadUngroupedOptions();\n  }\n\n  /**\n   * Emitted when an option is selected.\n   */\n  @Event() optionSelect!: EventEmitter<IcOptionSelectEventDetail>;\n\n  /**\n   * Emitted when state of menu changes (i.e. open or close).\n   */\n  @Event() menuChange!: EventEmitter<IcMenuChangeEventDetail>;\n\n  /**\n   * Emitted when an option has been highlighted\n   */\n  @Event() menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;\n\n  @Listen(\"icClear\", { target: \"document\" })\n  handleClearListener(): void {\n    this.optionHighlighted = \"\";\n  }\n\n  @Listen(\"icSubmitSearch\", { target: \"document\" })\n  handleSubmitSearch(): void {\n    const highlightedOptionIndex = this.options.findIndex(\n      (option) => option.value === this.optionHighlighted\n    );\n\n    this.setInputValue(highlightedOptionIndex);\n  }\n\n  private menu: HTMLUListElement;\n  private ungroupedOptions: IcMenuOption[] = [];\n  private popperInstance: PopperInstance;\n\n  // Prevents menu re-opening immediately after it is closed on blur when clicking input\n  private preventClickOpen: boolean = false;\n\n  private handleMenuChange = (open: boolean, focusInput?: boolean): void => {\n    if (!open) this.popperInstance.destroy();\n    this.menuChange.emit({ open, focusInput });\n\n    if (!open && focusInput !== false) {\n      this.inputEl.focus();\n      this.preventClickOpen = false;\n    }\n  };\n\n  private setNextOptionValue = (selectedOptionIndex: number): void => {\n    if (this.ungroupedOptions[selectedOptionIndex + 1]) {\n      this.optionSelect.emit({\n        value: this.ungroupedOptions[selectedOptionIndex + 1].value,\n        optionId: this.getOptionId(\n          this.ungroupedOptions[selectedOptionIndex + 1].value\n        ),\n      });\n    } else {\n      this.optionSelect.emit({\n        value: this.ungroupedOptions[0].value,\n        optionId: this.getOptionId(this.ungroupedOptions[0].value),\n      });\n    }\n  };\n\n  private setPreviousOptionValue = (selectedOptionIndex: number): void => {\n    if (this.ungroupedOptions[selectedOptionIndex - 1]) {\n      this.optionSelect.emit({\n        value: this.ungroupedOptions[selectedOptionIndex - 1].value,\n        optionId: this.getOptionId(\n          this.ungroupedOptions[selectedOptionIndex - 1].value\n        ),\n      });\n    } else {\n      this.optionSelect.emit({\n        value: this.ungroupedOptions[this.ungroupedOptions.length - 1].value,\n        optionId: this.getOptionId(\n          this.ungroupedOptions[this.ungroupedOptions.length - 1].value\n        ),\n      });\n    }\n  };\n\n  /**\n   * If menu is opened with the mouse, emit menuChange custom event.\n   */\n  @Method()\n  async handleClickOpen(): Promise<void> {\n    if (!this.preventClickOpen) {\n      this.menuChange.emit({ open: !this.open });\n      this.keyboardNav = false;\n    }\n    this.preventClickOpen = false;\n  }\n\n  /**\n   * Used alongside activationType\n   * If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.\n   * @param {KeyboardEvent} event - keyboard event\n   */\n  @Method()\n  async handleKeyboardOpen(event: KeyboardEvent): Promise<void> {\n    this.keyboardNav = false;\n\n    if (this.activationType === \"automatic\") {\n      this.autoSetInputValueKeyboardOpen(event);\n    } else {\n      this.keyboardNav = true;\n      this.manSetInputValueKeyboardOpen(event);\n    }\n  }\n\n  /**\n   * @internal Used to highlight the first option in the menu.\n   */\n  @Method()\n  async handleSetFirstOption(): Promise<void> {\n    this.setHighlightedOption(0);\n  }\n\n  private arrowBehaviour = (event: KeyboardEvent): void => {\n    event.preventDefault();\n    this.handleMenuChange(true);\n  };\n\n  private setHighlightedOption = (highlightedIndex: number): void => {\n    this.optionHighlighted = this.options[highlightedIndex].value || undefined;\n  };\n\n  private autoSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n    const selectedOptionIndex = this.ungroupedOptions.findIndex(\n      (option) => option.value === this.value\n    );\n\n    const isSearchableSelect = this.inputEl?.tagName === \"INPUT\";\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        this.keyboardNav = true;\n        this.arrowBehaviour(event);\n        this.setNextOptionValue(selectedOptionIndex);\n        break;\n      case \"ArrowUp\":\n        this.keyboardNav = true;\n        this.arrowBehaviour(event);\n        this.setPreviousOptionValue(selectedOptionIndex);\n        break;\n      case \" \":\n      case \"Enter\":\n        if ((event.target as HTMLElement).id !== \"clear-button\") {\n          this.handleMenuChange(true);\n        }\n        break;\n      case \"Backspace\":\n        if (isSearchableSelect) {\n          this.inputEl.focus();\n        }\n        break;\n      default:\n        if (isSearchableSelect && event.key !== \"Tab\") {\n          this.inputEl.focus();\n        }\n        break;\n    }\n  };\n\n  private manSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n    const highlightedOptionIndex = this.options.findIndex(\n      (option) => option.value === this.optionHighlighted\n    );\n\n    this.menuOptionId.emit({ optionId: undefined });\n\n    const getOptionId = (index: number): string =>\n      Array.from(this.host.shadowRoot.querySelectorAll(\"li\"))[index].id;\n\n    const isSearchBar = this.parentEl.tagName === \"IC-SEARCH-BAR\";\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        this.arrowBehaviour(event);\n        if (highlightedOptionIndex < this.options.length - 1) {\n          this.setHighlightedOption(highlightedOptionIndex + 1);\n          this.menuOptionId.emit({\n            optionId: getOptionId(highlightedOptionIndex + 1),\n          });\n        } else {\n          this.setHighlightedOption(0);\n        }\n        this.preventIncorrectTabOrder = false;\n        this.focusFromSearchKeypress = false;\n        break;\n      case \"ArrowUp\":\n        this.arrowBehaviour(event);\n        if (\n          highlightedOptionIndex <= 0 ||\n          highlightedOptionIndex > this.options.length + 1\n        ) {\n          this.setHighlightedOption(this.options.length - 1);\n          this.menuOptionId.emit({\n            optionId: getOptionId(this.options.length - 1),\n          });\n        } else {\n          this.setHighlightedOption(highlightedOptionIndex - 1);\n          this.menuOptionId.emit({\n            optionId: getOptionId(highlightedOptionIndex - 1),\n          });\n        }\n        this.preventIncorrectTabOrder = false;\n        this.focusFromSearchKeypress = false;\n        break;\n      case \" \":\n      case \"Enter\":\n        event.preventDefault();\n        this.setInputValue(highlightedOptionIndex);\n        break;\n      case \"Escape\":\n        this.handleMenuChange(false);\n        this.menuOptionId.emit({ optionId: undefined });\n        break;\n      case \"Shift\":\n      case \"Tab\":\n        this.preventIncorrectTabOrder = true;\n        break;\n      case \"Backspace\":\n        if (isSearchBar) {\n          (this.parentEl as HTMLIcSearchBarElement).setFocus();\n          this.focusFromSearchKeypress = true;\n          this.setHighlightedOption(0);\n        }\n        break;\n      default:\n        if (isSearchBar && event.key !== \"Tab\") {\n          (this.parentEl as HTMLIcSearchBarElement).setFocus();\n          this.focusFromSearchKeypress = true;\n          this.setHighlightedOption(0);\n        }\n        break;\n    }\n  };\n\n  private setInputValue = (highlightedOptionIndex: number) => {\n    if (this.options[highlightedOptionIndex]) {\n      this.optionSelect.emit({\n        value: this.options[highlightedOptionIndex]?.value,\n      });\n      this.optionHighlighted = undefined;\n      this.menuOptionId.emit({ optionId: undefined });\n    }\n    this.handleMenuChange(false);\n  };\n\n  private handleOptionClick = (event: Event): void => {\n    const { value, label } = (event.target as HTMLLIElement).dataset;\n    this.optionSelect.emit({ value, label });\n    this.handleMenuChange(false);\n  };\n\n  private handleBlur = (event: FocusEvent): void => {\n    if (event.relatedTarget !== this.inputEl) {\n      if (!this.menu.contains(event.relatedTarget as HTMLElement)) {\n        this.handleMenuChange(false, false);\n      }\n    } else {\n      this.handleMenuChange(false);\n      this.preventClickOpen = true;\n    }\n  };\n\n  private handleMenuKeyDown = (event: KeyboardEvent) => {\n    if (this.activationType === \"automatic\") {\n      this.autoSetValueOnMenuKeyDown(event);\n    }\n  };\n\n  private autoSetValueOnMenuKeyDown = (event: KeyboardEvent): void => {\n    event.cancelBubble = true;\n    const selectedOptionIndex = this.ungroupedOptions.findIndex(\n      (option) => option.value === this.value\n    );\n\n    const isSearchableSelect = this.inputEl.tagName === \"INPUT\";\n\n    switch (event.key) {\n      case \"ArrowUp\":\n        event.preventDefault();\n        this.setPreviousOptionValue(selectedOptionIndex);\n        this.keyboardNav = true;\n        break;\n      case \"ArrowDown\":\n        event.preventDefault();\n        this.setNextOptionValue(selectedOptionIndex);\n        this.keyboardNav = true;\n        break;\n      case \"Home\":\n        this.optionSelect.emit({\n          value: this.ungroupedOptions[0].value,\n        });\n        this.keyboardNav = true;\n        break;\n      case \"End\":\n        this.optionSelect.emit({\n          value: this.ungroupedOptions[this.ungroupedOptions.length - 1].value,\n        });\n        this.keyboardNav = true;\n        break;\n      case \" \":\n      case \"Enter\":\n      case \"Escape\":\n        this.handleMenuChange(false);\n        break;\n      case \"Backspace\":\n        if (isSearchableSelect) {\n          this.inputEl.focus();\n        }\n        break;\n      case \"Shift\":\n        break;\n      default:\n        if (isSearchableSelect && event.key !== \"Tab\") {\n          this.inputEl.focus();\n        }\n        break;\n    }\n  };\n\n  private handleMenuKeyUp = (event: KeyboardEvent): void => {\n    if (event.key === \"Tab\" && event.shiftKey) {\n      this.preventClickOpen = false;\n    }\n  };\n\n  private getOptionId = (value: string): string => {\n    return `${this.menuId}-${value}`;\n  };\n\n  private getOptionAriaLabel = (\n    option: IcMenuOption,\n    parentOption: IcMenuOption\n  ): string => {\n    let ariaLabel = option.label;\n\n    if (option.description) {\n      ariaLabel = `${ariaLabel}, ${option.description}`;\n    }\n\n    if (parentOption) {\n      return `${ariaLabel}, ${parentOption.label} group`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  private getSortedOptions = (options: IcMenuOption[]): IcMenuOption[] => {\n    return options.sort((optionA, optionB) =>\n      optionA.recommended && !optionB.recommended ? -1 : 0\n    );\n  };\n\n  private isManualMode = this.activationType === \"manual\";\n\n  private scrollToSelected = (menu: HTMLUListElement) => {\n    const selectedOption = menu.querySelector(\n      \".option[aria-selected]\"\n    ) as HTMLElement;\n\n    if (selectedOption) {\n      const elTop = selectedOption.offsetTop + selectedOption.offsetHeight;\n      if (\n        elTop > menu.scrollTop + menu.offsetHeight ||\n        elTop < menu.scrollTop + menu.offsetHeight\n      ) {\n        menu.scrollTop = selectedOption.offsetTop;\n      }\n      selectedOption.focus();\n    }\n  };\n\n  private loadUngroupedOptions = () => {\n    if (this.options.length > 0) {\n      this.options.map((option) => {\n        if (option.children) {\n          option.children.map(\n            (option) => !option.disabled && this.ungroupedOptions.push(option)\n          );\n        } else if (!option.disabled) {\n          this.ungroupedOptions.push(option);\n        }\n      });\n    }\n    this.ungroupedOptions = this.getSortedOptions(this.ungroupedOptions);\n  };\n\n  connectedCallback(): void {\n    if (this.parentEl?.tagName === \"IC-SEARCH-BAR\") {\n      this.setHighlightedOption(0);\n      this.initialOptionsListRender = true;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.loadUngroupedOptions();\n  }\n\n  componentDidLoad(): void {\n    let optionsHeight = 0;\n    this.host.shadowRoot\n      .querySelectorAll(\".option\")\n      .forEach((option) => (optionsHeight += option.clientHeight));\n    if (optionsHeight > 320) {\n      this.menu.classList.add(\"menu-scroll\");\n    }\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.open, propName: \"open\" },\n        { prop: this.options, propName: \"options\" },\n        { prop: this.menuId, propName: \"menu-id\" },\n        { prop: this.inputLabel, propName: \"input-label\" },\n        //NOTE: no check for value, input-el or anchor-el as otherwise get console errors on first load of select component\n      ],\n      \"Menu\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.open) {\n      this.popperInstance = createPopper(this.anchorEl, this.host, {\n        placement: \"bottom\",\n        modifiers: [\n          {\n            name: \"offset\",\n            options: {\n              offset: [0, 7],\n            },\n          },\n          {\n            name: \"flip\",\n            options: {\n              fallbackPlacements: [\"top\"],\n              rootBoundary: \"viewport\",\n            },\n          },\n        ],\n      });\n    }\n  }\n\n  componentDidUpdate(): void {\n    const inputValueInOptions: boolean = this.options.some(\n      (option) => option.value === this.value\n    );\n\n    const optionHighlightedIsSet =\n      this.optionHighlighted !== null &&\n      this.optionHighlighted !== undefined &&\n      this.optionHighlighted !== \"\";\n\n    if (this.open && this.options.length !== 0) {\n      if (\n        this.value &&\n        this.keyboardNav &&\n        inputValueInOptions &&\n        this.autoFocusOnSelected\n      ) {\n        this.scrollToSelected(this.menu);\n      } else if (\n        this.inputEl.tagName !== \"IC-TEXT-FIELD\" &&\n        this.inputEl.tagName !== \"INPUT\"\n      ) {\n        this.menu.focus();\n      } else if (\n        optionHighlightedIsSet &&\n        !this.focusFromSearchKeypress &&\n        !this.preventIncorrectTabOrder\n      ) {\n        const highlightedEl = this.host.shadowRoot.querySelector(\n          `li[data-value=\"${this.optionHighlighted}\"]`\n        ) as HTMLElement;\n\n        if (highlightedEl) {\n          highlightedEl.focus();\n        }\n      }\n    }\n  }\n\n  private displayOption = (\n    option: IcMenuOption,\n    index?: number,\n    parentOption?: IcMenuOption\n  ): HTMLLIElement => {\n    const { open, value } = this;\n\n    return (\n      <li\n        id={this.getOptionId(option.value)}\n        class={{\n          option: true,\n          \"focused-option\": this.isManualMode\n            ? (this.keyboardNav || this.initialOptionsListRender) &&\n              option.value === this.optionHighlighted\n            : this.keyboardNav && option.value === value,\n          \"last-recommended-option\":\n            option.recommended &&\n            this.options[index + 1] &&\n            !this.options[index + 1].recommended,\n          \"disabled-option\": option.disabled,\n        }}\n        role=\"option\"\n        tabindex={\n          open &&\n          (option.value === value || option.value === this.optionHighlighted) &&\n          this.keyboardNav\n            ? \"0\"\n            : \"-1\"\n        }\n        aria-label={this.getOptionAriaLabel(option, parentOption)}\n        aria-selected={option.value === value}\n        aria-disabled={option.disabled ? \"true\" : \"false\"}\n        onClick={this.handleOptionClick}\n        onBlur={this.handleBlur}\n        onMouseDown={(event) => event.preventDefault()}\n        data-value={option.value}\n        data-label={option.label}\n      >\n        <div class=\"option-text-container\">\n          <ic-typography variant=\"body\" aria-hidden=\"true\">\n            <p>{option.label}</p>\n          </ic-typography>\n          {option.description && (\n            <ic-typography\n              id={`${this.getOptionId(option.value)}-description`}\n              class=\"option-description\"\n              variant=\"caption\"\n              aria-hidden=\"true\"\n            >\n              <p>{option.description}</p>\n            </ic-typography>\n          )}\n        </div>\n        {option.value === value &&\n          this.parentEl.tagName !== \"IC-SEARCH-BAR\" && (\n            <span class=\"check-icon\" innerHTML={Check} />\n          )}\n      </li>\n    );\n  };\n\n  render() {\n    const { inputLabel, options, menuId, value, fullWidth } = this;\n\n    return (\n      <Host\n        class={{\n          \"full-width\": fullWidth,\n          \"no-focus\": this.inputEl?.tagName === \"INPUT\",\n        }}\n      >\n        {options.length !== 0 && (\n          <ul\n            id={menuId}\n            class=\"menu\"\n            role=\"listbox\"\n            aria-label={inputLabel}\n            aria-activedescendant={\n              value != null && value !== \"\" ? this.getOptionId(value) : \"\"\n            }\n            tabindex={\n              open && !this.keyboardNav && this.inputEl?.tagName !== \"INPUT\"\n                ? \"0\"\n                : \"-1\"\n            }\n            ref={(el) => (this.menu = el)}\n            onKeyDown={this.handleMenuKeyDown}\n            onKeyUp={this.handleMenuKeyUp}\n            onBlur={this.handleBlur}\n          >\n            {this.getSortedOptions(options).map((option, index) => {\n              if (option.children) {\n                if (option.children.length > 0) {\n                  return (\n                    <div>\n                      <ic-typography\n                        class=\"option-group-title\"\n                        role=\"presentation\"\n                        variant=\"subtitle-small\"\n                      >\n                        <p>{option.label}</p>\n                      </ic-typography>\n                      {option.children.map((childOption) =>\n                        this.displayOption(childOption, index, option)\n                      )}\n                    </div>\n                  );\n                } else {\n                  return null;\n                }\n              } else {\n                return this.displayOption(option, index);\n              }\n            })}\n          </ul>\n        )}\n      </Host>\n    );\n  }\n}\n"]}