@watermarkinsights/ripple 3.25.0-2 → 3.25.0

package/dist/ripple/p-47d223f1.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmToggletipCss","Toggletip","exports","this","tooltipMessage","intl","formatMessage","id","defaultMessage","Object","defineProperty","class_1","prototype","tooltip","tooltipText","componentWillLoad","validTooltipPlacement","label","console","error","tempTooltip","includes","tooltipPosition","concat","warn","handleKeydown","ev","key","preventDefault","isOpen","stopPropagation","close","toggleTabbingOn","isTabbing","toggleTabbingOff","handleClick","target","el","contains","announceToggletip","open","hideTooltip","handleBlur","liveRegionEl","innerHTML","showTooltip","setToggletipPosition","tooltipEl","classList","add","remove","_this","setTimeout","shouldOpenUp","toggletipEl","replace","shouldOpenDown","shouldShiftRight","shouldShiftLeft","render","h","Host","class","type","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","ref","role"],"sources":["src/components/wm-toggletip/wm-toggletip.scss?tag=wm-toggletip&encapsulation=shadow","src/components/wm-toggletip/wm-toggletip.tsx"],"sourcesContent":["@mixin toggletipTriangleBase() {\r\n  content: \"\";\r\n  position: absolute;\r\n  border: solid transparent;\r\n  height: 0;\r\n  width: 0;\r\n  pointer-events: none;\r\n}\r\n@mixin toggletipTriangleTop() {\r\n  @include toggletipTriangleBase();\r\n  bottom: 100%;\r\n  border-bottom-color: $charcoal;\r\n  border-bottom-width: rem-calc(4);\r\n  border-left-width: rem-calc(6);\r\n  border-right-width: rem-calc(6);\r\n  margin-left: rem-calc(-6);\r\n  left: 50%;\r\n}\r\n@mixin toggletipTriangleBottom() {\r\n  @include toggletipTriangleBase();\r\n  top: 100%;\r\n  border-top-color: $charcoal;\r\n  border-top-width: rem-calc(4);\r\n  border-left-width: rem-calc(6);\r\n  border-right-width: rem-calc(6);\r\n  margin-left: rem-calc(-6);\r\n  left: 50%;\r\n}\r\n@mixin toggletipTriangleLeft() {\r\n  @include toggletipTriangleBase();\r\n  bottom: 100%;\r\n  border-right-color: $charcoal;\r\n  border-right-width: rem-calc(4);\r\n  border-top-width: rem-calc(6);\r\n  border-bottom-width: rem-calc(6);\r\n  border-left-width: 0px;\r\n  top: calc(50% - 6px);\r\n  left: rem-calc(-3);\r\n}\r\n@mixin toggletipTriangleRight() {\r\n  @include toggletipTriangleBase();\r\n  bottom: 100%;\r\n  border-left-color: $charcoal;\r\n  border-left-width: rem-calc(4);\r\n  border-top-width: rem-calc(6);\r\n  border-bottom-width: rem-calc(6);\r\n  border-right-width: 0px;\r\n  top: calc(50% - 6px);\r\n  right: rem-calc(-3);\r\n}\r\n@mixin toggletipTriangleTopLeft() {\r\n  @include toggletipTriangleTop();\r\n  margin-left: unset;\r\n  left: rem-calc(14);\r\n}\r\n@mixin toggletipTriangleTopRight() {\r\n  @include toggletipTriangleTop();\r\n  left: unset;\r\n  margin-left: unset;\r\n  right: rem-calc(14);\r\n}\r\n@mixin toggletipTriangleBottomLeft() {\r\n  @include toggletipTriangleBottom();\r\n  margin-left: unset;\r\n  left: rem-calc(14);\r\n}\r\n@mixin toggletipTriangleBottomRight() {\r\n  @include toggletipTriangleBottom();\r\n  left: unset;\r\n  margin-left: unset;\r\n  right: rem-calc(14);\r\n}\r\n\r\n:host,\r\nwm-toggletip {\r\n  display: inline-block;\r\n  position: relative;\r\n  height: 40px;\r\n  width: 40px;\r\n\r\n  .button {\r\n    display: flex;\r\n    background: none;\r\n    border: none;\r\n    padding: 0;\r\n    width: inherit;\r\n    height: inherit;\r\n    border-radius: 50%;\r\n    justify-content: center;\r\n    align-items: center;\r\n    position: relative;\r\n    cursor: pointer;\r\n    &:before {\r\n      @include mdi-icon;\r\n      content: \"\\f2fc\";\r\n      font-size: 16px;\r\n      color: $charcoal;\r\n      background: radial-gradient(white 40%, transparent 0%); // adds white \"font-color\" to icon\r\n    }\r\n    &:focus {\r\n      outline: none;\r\n      &.user-is-tabbing {\r\n        @include focus-style;\r\n      }\r\n    }\r\n  }\r\n\r\n  .tooltip {\r\n    position: absolute;\r\n    opacity: 0;\r\n    width: 1px;\r\n    height: 1px;\r\n    overflow: hidden;\r\n    clip: rect(0, 0, 0, 0);\r\n    pointer-events: none;\r\n\r\n    font-family: inherit;\r\n    font-size: rem-calc(14);\r\n    text-transform: none;\r\n    font-weight: normal;\r\n    background: black;\r\n    color: #fff;\r\n    padding: rem-calc(6);\r\n    line-height: normal;\r\n    z-index: 30;\r\n    white-space: nowrap;\r\n\r\n    &.hover {\r\n      clip: auto;\r\n      width: auto;\r\n      height: auto;\r\n      opacity: 1;\r\n      transition: opacity 500ms 500ms;\r\n      padding: rem-calc(6);\r\n      white-space: nowrap;\r\n    }\r\n  }\r\n\r\n  .toggletip {\r\n    position: absolute;\r\n    max-width: rem-calc(220);\r\n    width: max-content;\r\n    padding: rem-calc(8) rem-calc(12);\r\n    border-radius: rem-calc(3);\r\n    background: $charcoal;\r\n    color: white;\r\n    font-size: 14px;\r\n    z-index: 30;\r\n\r\n    &.top {\r\n      &:before {\r\n        @include toggletipTriangleBottom();\r\n      }\r\n    }\r\n\r\n    &.bottom {\r\n      &:before {\r\n        @include toggletipTriangleTop();\r\n      }\r\n    }\r\n\r\n    &.right {\r\n      &:before {\r\n        @include toggletipTriangleLeft();\r\n      }\r\n    }\r\n\r\n    &.left {\r\n      &:before {\r\n        @include toggletipTriangleRight();\r\n      }\r\n    }\r\n\r\n    &.bottom-right {\r\n      &:before {\r\n        @include toggletipTriangleTopLeft();\r\n      }\r\n    }\r\n\r\n    &.bottom-left {\r\n      &:before {\r\n        @include toggletipTriangleTopRight();\r\n      }\r\n    }\r\n\r\n    &.top-right {\r\n      &:before {\r\n        @include toggletipTriangleBottomLeft();\r\n      }\r\n    }\r\n\r\n    &.top-left {\r\n      &:before {\r\n        @include toggletipTriangleBottomRight();\r\n      }\r\n    }\r\n\r\n    &.hidden {\r\n      transform: scale(0, 0) !important; // ensure el doesn't take space on screen when hidden\r\n      visibility: hidden;\r\n    }\r\n  }\r\n\r\n  .toggletip,\r\n  .tooltip {\r\n    &.top {\r\n      transform: translate(-50%, 0%);\r\n      bottom: 40px;\r\n      left: 20px;\r\n    }\r\n\r\n    &.bottom {\r\n      transform: translate(-50%, 0%);\r\n      top: 40px;\r\n      left: 20px;\r\n    }\r\n\r\n    &.right {\r\n      transform: translate(100%, calc(-50% - 20px));\r\n      right: 0px;\r\n    }\r\n\r\n    &.left {\r\n      transform: translate(-100%, calc(-50% - 20px));\r\n      left: 0px;\r\n    }\r\n\r\n    &.bottom-right {\r\n      top: 40px;\r\n      left: 0px;\r\n    }\r\n\r\n    &.bottom-left {\r\n      top: 40px;\r\n      right: 0px;\r\n    }\r\n\r\n    &.top-right {\r\n      bottom: 40px;\r\n      left: 0px;\r\n    }\r\n\r\n    &.top-left {\r\n      bottom: 40px;\r\n      right: 0px;\r\n    }\r\n  }\r\n\r\n  .sr-only {\r\n    @include srOnly;\r\n  }\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Listen } from \"@stencil/core\";\r\n\r\nimport { shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl } from \"../../global/functions\";\r\nimport { TooltipPlacement } from \"../../global/interfaces\";\r\n@Component({\r\n  tag: \"wm-toggletip\",\r\n  styleUrl: \"wm-toggletip.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Toggletip {\r\n  @Element() el!: HTMLWmToggletipElement;\r\n\r\n  @Prop() label?: string;\r\n  @Prop({ mutable: true }) tooltip?: string; // mutable for deprecation transition\r\n  @Prop() tooltipText?: string; // DEPRECATED\r\n  get tempTooltip() {\r\n    // instances of this.tempTooltip should be replaced with this.tooltip once tooltipText is fully phased out\r\n    return this.tooltip || this.tooltipText;\r\n  }\r\n  @Prop({ mutable: true, reflect: true }) tooltipPosition: TooltipPlacement = \"bottom-right\";\r\n  @State() isOpen: boolean = false;\r\n  @State() isTabbing: boolean = false;\r\n\r\n  private toggletipEl!: HTMLDivElement;\r\n  private tooltipEl!: HTMLDivElement;\r\n  private liveRegionEl!: HTMLDivElement;\r\n  private tooltipMessage = intl.formatMessage({\r\n    id: \"toggletip.moreInformation\",\r\n    defaultMessage: \"More information\",\r\n  });\r\n\r\n  componentWillLoad() {\r\n    const validTooltipPlacement = [\r\n      \"top\",\r\n      \"right\",\r\n      \"bottom\",\r\n      \"left\",\r\n      \"top-right\",\r\n      \"top-left\",\r\n      \"bottom-right\",\r\n      \"bottom-left\",\r\n    ];\r\n\r\n    if (!this.label) {\r\n      console.error(\"wm-toggletip must have a label property\");\r\n    }\r\n    if (!this.tempTooltip) {\r\n      console.error(\"wm-toggletip must have a tooltip property\");\r\n    }\r\n    if (!validTooltipPlacement.includes(this.tooltipPosition)) {\r\n      console.error(\r\n        `wm-toggletip: tooltip-position has an invalid value of \"${this.tooltipPosition}\", make sure to use one of the following values: ${validTooltipPlacement}`\r\n      );\r\n    }\r\n    if (this.tooltipText) {\r\n      console.warn(\"wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.\");\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    switch (ev.key) {\r\n      case \"Escape\":\r\n        ev.preventDefault();\r\n        if (this.isOpen) {\r\n          ev.stopPropagation(); // prevent closing modal if within one\r\n          this.close();\r\n        }\r\n        break;\r\n      case \"Tab\":\r\n        if (this.isOpen) {\r\n          this.close();\r\n        }\r\n    }\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"document\" })\r\n  handleClick(ev: MouseEvent) {\r\n    if (this.isOpen) {\r\n      if (ev.target === this.el || this.el.contains(ev.target as HTMLElement)) {\r\n        // Re-announce if clicking any part of the component while open\r\n        this.announceToggletip();\r\n      } else {\r\n        this.close();\r\n      }\r\n    }\r\n  }\r\n\r\n  open() {\r\n    this.isOpen = true;\r\n    this.announceToggletip();\r\n  }\r\n\r\n  close() {\r\n    this.isOpen = false;\r\n    this.hideTooltip();\r\n  }\r\n\r\n  handleBlur() {\r\n    this.hideTooltip();\r\n    // clear liveregion on blur to prevent old announcement text from being picked up by screen readers\r\n    this.liveRegionEl.innerHTML = \"\";\r\n  }\r\n\r\n  showTooltip() {\r\n    // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class\r\n    // Otherwise, the tooltip will flash on-screen and possibly create scrollbars\r\n    this.setToggletipPosition();\r\n    this.tooltipEl.classList.add(\"hover\");\r\n  }\r\n\r\n  hideTooltip() {\r\n    this.tooltipEl.classList.remove(\"hover\");\r\n  }\r\n\r\n  announceToggletip() {\r\n    this.liveRegionEl.innerHTML = \"\";\r\n    setTimeout(() => {\r\n      this.liveRegionEl.innerHTML = this.tempTooltip!;\r\n    }, 10);\r\n  }\r\n\r\n  setToggletipPosition() {\r\n    // Vertical\r\n    if (this.tooltipPosition.includes(\"bottom\") && shouldOpenUp(this.el, this.toggletipEl)) {\r\n      this.tooltipPosition = this.tooltipPosition.replace(\"bottom\", \"top\") as TooltipPlacement;\r\n    } else if (this.tooltipPosition.includes(\"top\") && shouldOpenDown(this.el, this.toggletipEl)) {\r\n      this.tooltipPosition = this.tooltipPosition.replace(\"top\", \"bottom\") as TooltipPlacement;\r\n    }\r\n\r\n    // Horizontal\r\n    if (this.tooltipPosition.includes(\"left\") && shouldShiftRight(this.el, this.toggletipEl)) {\r\n      this.tooltipPosition = this.tooltipPosition.replace(\"left\", \"right\") as TooltipPlacement;\r\n    } else if (this.tooltipPosition.includes(\"right\") && shouldShiftLeft(this.el, this.toggletipEl)) {\r\n      this.tooltipPosition = this.tooltipPosition.replace(\"right\", \"left\") as TooltipPlacement;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          class={`button ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\r\n          type=\"button\"\r\n          aria-label={this.label}\r\n          onClick={() => {\r\n            this.setToggletipPosition();\r\n            this.open();\r\n          }}\r\n          // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events\r\n          onMouseEnter={() => this.showTooltip()}\r\n          onMouseLeave={() => this.hideTooltip()}\r\n          onFocus={() => this.showTooltip()}\r\n          onBlur={() => this.handleBlur()}\r\n        ></button>\r\n        <div\r\n          ref={(el) => (this.tooltipEl = el as HTMLDivElement)}\r\n          class={`tooltip ${this.tooltipPosition} ${this.isOpen ? \"hidden\" : \"\"}`}\r\n          aria-hidden=\"true\"\r\n        >\r\n          {this.tooltipMessage}\r\n        </div>\r\n        <div\r\n          ref={(el) => (this.toggletipEl = el as HTMLDivElement)}\r\n          class={`toggletip ${this.isOpen ? \"\" : \"hidden\"} ${this.tooltipPosition}`}\r\n        >\r\n          {this.tempTooltip}\r\n        </div>\r\n        <div\r\n          ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\r\n          class=\"live-region sr-only\"\r\n          role=\"status\"\r\n          // Aria-live is implicit with role=\"status\", however this is not registered by Apple VoiceOver\r\n          aria-live=\"polite\"\r\n          aria-atomic=\"true\"\r\n        ></div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/p-4d30004f.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as e,H as i,g as r}from"./p-1c23de4a.js";import{i as o}from"./p-05e0f901.js";const n=':host,wm-search{width:100%;font-size:0.875rem}:host *,wm-search *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wm-search-wrapper,wm-search .wm-search-wrapper{border-radius:3px;position:relative;border:1px solid rgba(35, 35, 35, 0.6);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}:host .wm-search-wrapper .search-icon,wm-search .wm-search-wrapper .search-icon{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:1.0625rem;position:absolute;left:0.4375rem}:host .wm-search-wrapper input,wm-search .wm-search-wrapper input{border:none;height:40px;padding:0 1.75rem;background:transparent;overflow:visible;width:100%;-ms-flex:1;flex:1;font-family:inherit}:host .wm-search-wrapper input:focus,wm-search .wm-search-wrapper input:focus{outline:none}:host .wm-search-wrapper.focus,wm-search .wm-search-wrapper.focus{-webkit-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;border-color:#20cbd4;border-radius:3px}:host .find,wm-search .find{min-height:3rem}:host .find input,wm-search .find input{padding:16px 8px 16px 28px}:host .find .wm-find-elements,wm-search .find .wm-find-elements{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;padding-right:16px}:host .find .wm-find-elements wm-button+wm-button,wm-search .find .wm-find-elements wm-button+wm-button{margin-left:0.25rem}:host .find .wm-find-elements .results,wm-search .find .wm-find-elements .results{margin-right:0.5rem;font-style:italic}:host .sr-only,wm-search .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .show-for-tabbers,wm-search .show-for-tabbers{all:unset;color:#575195;text-decoration:none;font-weight:500;font-size:0.875rem;margin:10px 0}:host .show-for-tabbers:hover,wm-search .show-for-tabbers:hover{background:-webkit-gradient(linear, left top, left bottom, from(#575195), to(#575195)) no-repeat;background:linear-gradient(#575195, #575195) no-repeat;background-size:100% 1px;background-position:0 1.2em;padding-bottom:0.2em}:host .show-for-tabbers:focus,wm-search .show-for-tabbers:focus{outline:none;background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1.2em;padding-bottom:0.2em}';const a=class{constructor(e){t(this,e);this.wmSearchBrowseResults=s(this,"wmSearchBrowseResults",7);this.wmBrowseSearchResults=s(this,"wmBrowseSearchResults",7);this.wmSearchValueChanged=s(this,"wmSearchValueChanged",7);this.wrapperEl=null;this.linkEl=null;this.searchType="basic";this.disabled=false;this.placeholder="";this.label="";this.numResults=0;this.value="";this.isTabbing=false;this.highlightedId="";this.highlightedName=null;this.highlightedNum=0;this.previousBlurredValue="";this.parentModal=undefined;this.announcement=""}get resultCount(){let t="";const s=o.formatMessage({id:"search.resultsFound",defaultMessage:"{numResults, plural, =0 {No results} one {1 result} other {# results}} found"},{numResults:this.numResults});const e=o.formatMessage({id:"search.xOfYResults",defaultMessage:"{numResults, plural, =0 {No results found} other {{current} of {numResults} results}}"},{numResults:this.numResults,current:this.highlightedNum});if(this.searchType==="basic"){t=s}else if(this.searchType==="find"){t=e}return t}toggleTabbingOn(){this.isTabbing=true;this.linkEl&&this.linkEl.classList.remove("sr-only");this.linkEl&&this.linkEl.classList.add("show-for-tabbers")}toggleTabbingOff(){this.isTabbing=false;this.linkEl&&this.linkEl.classList.add("sr-only");this.linkEl&&this.linkEl.classList.remove("show-for-tabbers")}componentWillLoad(){if(this.placeholder===""){console.error("You must set the placeholder property for the wm-search component.")}if(this.label===""){console.error("You must set the label property for the wm-search component.")}this.hookToModal()}hookToModal(){let t=this.el;while(!!t){if(t.tagName==="WM-MODAL"){this.parentModal=t}t=t.parentElement}if(this.parentModal){const t=["wmCloseTriggered","wmPrimaryTriggered","wmSecondaryTriggered"];t.map((t=>{this.parentModal.addEventListener(t,(()=>{this.updateValue("")}))}))}}async updateValue(t){this.value=t;this.resetHighlightCountToStart();if(this.value){this.announceChanges()}}resetHighlightCountToStart(){if(this.searchType==="find"){this.highlightedNum=this.numResults?1:0}}announce(t){if(this.resultsLiveRegion.textContent===t){t+=" "}this.announcement=t}announceChanges(){window.requestAnimationFrame((()=>{let t=this.resultCount;if(this.searchType==="find"&&this.highlightedName){t+=`, ${this.highlightedName}`}this.announce(t)}))}changeHighlightedNum(t){if(this.numResults){if(t<1){this.highlightedNum=this.numResults}else if(t>this.numResults){this.highlightedNum=1}else{this.highlightedNum=t}this.wmSearchBrowseResults.emit({position:this.highlightedNum});this.wmBrowseSearchResults.emit({position:this.highlightedNum});this.announceChanges()}}addFocusStyle(){if(this.wrapperEl){this.wrapperEl.classList.add("focus")}}removeFocusStyle(){if(this.wrapperEl){this.wrapperEl.classList.remove("focus")}}handleBlur(){this.removeFocusStyle();if(this.previousBlurredValue!==this.value){this.wmSearchValueChanged.emit({value:this.value})}this.previousBlurredValue=this.value}renderResultsAndBrowseButtons(){return e("div",{class:"wm-find-elements"},e("div",{id:"results-display",class:"results"},this.resultCount),e("div",{class:"wm-button-collection"},e("wm-button",{"button-type":"icononly",icon:"f05d",tooltip:o.formatMessage({id:"global.previous",description:"button text",defaultMessage:"previous"}),"tooltip-position":"bottom",onClick:()=>this.changeHighlightedNum(this.highlightedNum-1),disabled:this.disabled||this.numResults<2,"label-for-identical-buttons":o.formatMessage({id:"search.previousResult",defaultMessage:"Press to hear previous matching result"})}),e("wm-button",{"button-type":"icononly",icon:"f045",tooltip:o.formatMessage({id:"global.next",description:"button text",defaultMessage:"next"}),"tooltip-position":"bottom",onClick:()=>this.changeHighlightedNum(this.highlightedNum+1),disabled:this.disabled||this.numResults<2,"label-for-identical-buttons":o.formatMessage({id:"search.nextResult",defaultMessage:"Press to hear next matching result"})})))}renderJumpToLink(){if(this.numResults&&this.highlightedId){return e("a",{ref:t=>this.linkEl=t,href:`#${this.highlightedId}`,class:"sr-only"},o.formatMessage({id:"search.jumpToResult",defaultMessage:"Jump to search result in list"}))}else{return null}}render(){return e(i,null,e("div",{id:"wm-search-wrapper",class:`wm-search-wrapper ${this.searchType}`,ref:t=>this.wrapperEl=t},e("input",{disabled:this.disabled,id:"wm-search-input",placeholder:this.placeholder,"aria-label":`${this.label?this.label+". ":""}${o.formatMessage({id:"search.typeToFilterResults",defaultMessage:"Type to filter the results"})}`,onInput:t=>this.updateValue(t.target.value),onFocus:()=>this.addFocusStyle(),onBlur:()=>this.handleBlur(),"aria-autocomplete":"none",autocomplete:"off",value:this.value}),e("span",{class:"mdi search-icon"},String.fromCodePoint(parseInt(`0xf349`))),this.searchType==="find"&&this.renderResultsAndBrowseButtons(),e("div",{id:"wm-search-live",class:"sr-only","aria-live":"polite","aria-atomic":"true",ref:t=>this.resultsLiveRegion=t},this.announcement)),this.searchType==="find"&&this.renderJumpToLink())}static get delegatesFocus(){return true}get el(){return r(this)}static get watchers(){return{numResults:["resetHighlightCountToStart"]}}};a.style=n;export{a as wm_search};
-//# sourceMappingURL=p-4d30004f.entry.js.map

package/dist/ripple/p-4d30004f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmSearchCss","Search","this","wrapperEl","linkEl","resultCount","message","basicMessage","intl","formatMessage","id","defaultMessage","numResults","findMessage","current","highlightedNum","searchType","toggleTabbingOn","isTabbing","classList","remove","add","toggleTabbingOff","componentWillLoad","placeholder","console","error","label","hookToModal","el","tagName","parentModal","parentElement","events","map","event","addEventListener","updateValue","async","value","resetHighlightCountToStart","announceChanges","announce","resultsLiveRegion","textContent","announcement","window","requestAnimationFrame","messageToAnnounce","highlightedName","changeHighlightedNum","newNum","wmSearchBrowseResults","emit","position","wmBrowseSearchResults","addFocusStyle","removeFocusStyle","handleBlur","previousBlurredValue","wmSearchValueChanged","renderResultsAndBrowseButtons","h","class","icon","tooltip","description","onClick","disabled","renderJumpToLink","highlightedId","ref","href","render","Host","onInput","ev","target","onFocus","onBlur","autocomplete","String","fromCodePoint","parseInt"],"sources":["./src/components/wm-search/wm-search.scss?tag=wm-search&encapsulation=shadow","./src/components/wm-search/wm-search.tsx"],"sourcesContent":[":host,\r\nwm-search {\r\n  * {\r\n    box-sizing: border-box;\r\n  }\r\n  width: 100%;\r\n  font-size: rem-calc(14);\r\n\r\n  .wm-search-wrapper {\r\n    border-radius: 3px;\r\n    position: relative;\r\n    border: 1px solid rgba(35, 35, 35, 0.6);\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n\r\n    .search-icon {\r\n      @include mdi-icon;\r\n      font-size: rem-calc(17);\r\n      position: absolute;\r\n      left: rem-calc(7);\r\n    }\r\n\r\n    input {\r\n      border: none;\r\n      height: 40px;\r\n      padding: rem-calc(0 28);\r\n      background: transparent;\r\n      overflow: visible;\r\n      width: 100%;\r\n      flex: 1;\r\n      font-family: inherit;\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n    }\r\n\r\n    &.focus {\r\n      box-shadow: 0 0 0 1px #20cbd4;\r\n      border-color: $border-focus-color;\r\n      border-radius: 3px;\r\n    }\r\n  }\r\n\r\n  .find {\r\n    min-height: 3rem;\r\n\r\n    input {\r\n      padding: 16px 8px 16px 28px;\r\n    }\r\n\r\n    .wm-find-elements {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: flex-start;\r\n      padding-right: 16px;\r\n      wm-button + wm-button {\r\n        margin-left: rem-calc(4);\r\n      }\r\n\r\n      .results {\r\n        margin-right: rem-calc(8);\r\n        font-style: italic;\r\n      }\r\n    }\r\n  }\r\n\r\n  .sr-only {\r\n    @include srOnly;\r\n  }\r\n\r\n  .show-for-tabbers {\r\n    all: unset;\r\n    color: #575195;\r\n    text-decoration: none;\r\n    font-weight: 500;\r\n    font-size: rem-calc(14);\r\n    margin: 10px 0;\r\n\r\n    &:hover {\r\n      background: linear-gradient(#575195, #575195) no-repeat;\r\n      background-size: 100% 1px;\r\n      background-position: 0 1.2em;\r\n      padding-bottom: 0.2em;\r\n    }\r\n\r\n    &:focus {\r\n      outline: none;\r\n      background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\r\n      background-size: 6px 3px;\r\n      background-position: 0 1.2em;\r\n      padding-bottom: 0.2em;\r\n    }\r\n  }\r\n}\r\n","import { h, Component, Element, Prop, Watch, Host, Method, Listen, State, Event, EventEmitter } from \"@stencil/core\";\r\nimport { intl } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-search\",\r\n  styleUrl: \"wm-search.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Search {\r\n  @Element() el!: HTMLWmSearchElement;\r\n  @Prop({ mutable: true }) searchType: \"basic\" | \"find\" = \"basic\";\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Props required for both variants.\r\n   */\r\n  @Prop() placeholder: string = \"\";\r\n  @Prop() label: string = \"\";\r\n  @Prop({ mutable: true }) numResults: number = 0;\r\n\r\n  /**\r\n   * This exposes the input's value on the host component so that the app can access it.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) value: string = \"\";\r\n\r\n  /**\r\n   * If the user is tabbing, the search and find variant will display a link to jump to a search result.\r\n   */\r\n  @State() isTabbing: boolean = false;\r\n\r\n  /**\r\n   * Prop specifically for the search and find variant. The id points to the id of the option currently highlighted,\r\n   * so that tabbing and screen reader users can jump to this option rather than tab through the list to find it.\r\n   */\r\n  @Prop() highlightedId: string = \"\";\r\n  @Prop() highlightedName: string | null = null;\r\n\r\n  /**\r\n   * Indicates which of the search results is currently highlighted. It will be displayed as \"[highlightedNum] of [numResults]\" next to the input in the search and find variant.\r\n   * This number updates as the user browses using the buttons.\r\n   */\r\n  @State() highlightedNum: number = 0;\r\n\r\n  @State() previousBlurredValue: string = \"\";\r\n  @State() parentModal?: HTMLWmModalElement;\r\n\r\n  /**\r\n   * Live region announcement\r\n   */\r\n  @State() announcement: string = \"\";\r\n\r\n  get resultCount(): string {\r\n    let message = \"\";\r\n    const basicMessage = intl.formatMessage(\r\n      {\r\n        id: \"search.resultsFound\",\r\n        defaultMessage: \"{numResults, plural, =0 {No results} one {1 result} other {# results}} found\",\r\n      },\r\n      { numResults: this.numResults }\r\n    );\r\n    const findMessage = intl.formatMessage(\r\n      {\r\n        id: \"search.xOfYResults\",\r\n        defaultMessage: \"{numResults, plural, =0 {No results found} other {{current} of {numResults} results}}\",\r\n      },\r\n      { numResults: this.numResults, current: this.highlightedNum }\r\n    );\r\n\r\n    if (this.searchType === \"basic\") {\r\n      message = basicMessage;\r\n    } else if (this.searchType === \"find\") {\r\n      message = findMessage;\r\n    }\r\n\r\n    return message;\r\n  }\r\n\r\n  /**\r\n   * Emitted when the buttons in the search-and-find variant are pressed.\r\n   */\r\n  @Event() wmSearchBrowseResults!: EventEmitter<{ position: number }>;\r\n  @Event() wmBrowseSearchResults!: EventEmitter<{ position: number }>; // deprecated in favor of wmSearchBrowseResults\r\n  @Event() wmSearchValueChanged!: EventEmitter<{ value: string }>;\r\n\r\n  /**\r\n   * Element refs\r\n   */\r\n  private resultsLiveRegion!: HTMLElement;\r\n  private wrapperEl: HTMLElement | null = null;\r\n  private linkEl: HTMLElement | null = null;\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n    this.linkEl && this.linkEl.classList.remove(\"sr-only\");\r\n    this.linkEl && this.linkEl.classList.add(\"show-for-tabbers\");\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n    this.linkEl && this.linkEl.classList.add(\"sr-only\");\r\n    this.linkEl && this.linkEl.classList.remove(\"show-for-tabbers\");\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.placeholder === \"\") {\r\n      console.error(\"You must set the placeholder property for the wm-search component.\");\r\n    }\r\n\r\n    if (this.label === \"\") {\r\n      console.error(\"You must set the label property for the wm-search component.\");\r\n    }\r\n    this.hookToModal();\r\n  }\r\n\r\n  hookToModal() {\r\n    // if the search is in a modal we want to clear the input when the modal closes\r\n    let el = this.el as any;\r\n    while (!!el) {\r\n      if (el.tagName === \"WM-MODAL\") {\r\n        this.parentModal = el as HTMLWmModalElement;\r\n      }\r\n      el = el.parentElement as HTMLElement;\r\n    }\r\n\r\n    if (this.parentModal) {\r\n      const events = [\"wmCloseTriggered\", \"wmPrimaryTriggered\", \"wmSecondaryTriggered\"];\r\n      events.map((event) => {\r\n        this.parentModal!.addEventListener(event, () => {\r\n          this.updateValue(\"\");\r\n        });\r\n      });\r\n    }\r\n  }\r\n\r\n  // this undocumented method is needed in hookToModal (needs to be exposed so we can set the callback func)\r\n  @Method()\r\n  async updateValue(value: string) {\r\n    this.value = value;\r\n\r\n    //For search-and-find, the results should always restart at \"[1 or 0] of ...\" after any new input.\r\n    //Reset the highlight count here just in case the new value doesn't end up changing the number of results.\r\n    this.resetHighlightCountToStart();\r\n\r\n    if (this.value) {\r\n      this.announceChanges();\r\n    }\r\n  }\r\n\r\n  @Watch(\"numResults\")\r\n  resetHighlightCountToStart(): void {\r\n    if (this.searchType === \"find\") {\r\n      this.highlightedNum = this.numResults ? 1 : 0;\r\n    }\r\n  }\r\n\r\n  announce(message: string) {\r\n    if (this.resultsLiveRegion!.textContent === message) {\r\n      message += \"\\u00A0\";\r\n    }\r\n    this.announcement = message;\r\n  }\r\n\r\n  announceChanges() {\r\n    window.requestAnimationFrame(() => {\r\n      // requestAnimationFrame to allow all changes to occur before announcing results\r\n      let messageToAnnounce = this.resultCount;\r\n\r\n      // if a result is found, also include it after the liveregion message\r\n      if (this.searchType === \"find\" && this.highlightedName) {\r\n        messageToAnnounce += `, ${this.highlightedName}`;\r\n      }\r\n\r\n      this.announce(messageToAnnounce);\r\n    });\r\n  }\r\n\r\n  changeHighlightedNum(newNum: number): void {\r\n    if (this.numResults) {\r\n      if (newNum < 1) {\r\n        // we were on the first item, going down: go to last item\r\n        this.highlightedNum = this.numResults;\r\n      } else if (newNum > this.numResults) {\r\n        // we were on the last item, going up: go to first item\r\n        this.highlightedNum = 1;\r\n      } else {\r\n        this.highlightedNum = newNum;\r\n      }\r\n\r\n      this.wmSearchBrowseResults.emit({ position: this.highlightedNum });\r\n      this.wmBrowseSearchResults.emit({ position: this.highlightedNum });\r\n      this.announceChanges();\r\n    }\r\n  }\r\n\r\n  addFocusStyle() {\r\n    if (this.wrapperEl) {\r\n      this.wrapperEl.classList.add(\"focus\");\r\n    }\r\n  }\r\n\r\n  removeFocusStyle() {\r\n    if (this.wrapperEl) {\r\n      this.wrapperEl.classList.remove(\"focus\");\r\n    }\r\n  }\r\n\r\n  handleBlur() {\r\n    this.removeFocusStyle();\r\n    if (this.previousBlurredValue !== this.value) {\r\n      this.wmSearchValueChanged.emit({ value: this.value });\r\n    }\r\n    this.previousBlurredValue = this.value;\r\n  }\r\n\r\n  /**\r\n   * Functions that return elements specifically for search-and-find.\r\n   */\r\n  renderResultsAndBrowseButtons(): HTMLDivElement {\r\n    return (\r\n      <div class=\"wm-find-elements\">\r\n        <div id=\"results-display\" class=\"results\">\r\n          {this.resultCount}\r\n        </div>\r\n        <div class=\"wm-button-collection\">\r\n          <wm-button\r\n            button-type=\"icononly\"\r\n            icon=\"f05d\"\r\n            tooltip={intl.formatMessage({\r\n              id: \"global.previous\",\r\n              description: \"button text\",\r\n              defaultMessage: \"previous\",\r\n            })}\r\n            tooltip-position=\"bottom\"\r\n            onClick={() => this.changeHighlightedNum(this.highlightedNum - 1)}\r\n            disabled={this.disabled || this.numResults < 2}\r\n            label-for-identical-buttons={intl.formatMessage({\r\n              id: \"search.previousResult\",\r\n              defaultMessage: \"Press to hear previous matching result\",\r\n            })}\r\n          />\r\n          <wm-button\r\n            button-type=\"icononly\"\r\n            icon=\"f045\"\r\n            tooltip={intl.formatMessage({\r\n              id: \"global.next\",\r\n              description: \"button text\",\r\n              defaultMessage: \"next\",\r\n            })}\r\n            tooltip-position=\"bottom\"\r\n            onClick={() => this.changeHighlightedNum(this.highlightedNum + 1)}\r\n            disabled={this.disabled || this.numResults < 2}\r\n            label-for-identical-buttons={intl.formatMessage({\r\n              id: \"search.nextResult\",\r\n              defaultMessage: \"Press to hear next matching result\",\r\n            })}\r\n          />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderJumpToLink(): HTMLAnchorElement | null {\r\n    if (this.numResults && this.highlightedId) {\r\n      return (\r\n        <a ref={(el) => (this.linkEl = el as HTMLAnchorElement)} href={`#${this.highlightedId}`} class=\"sr-only\">\r\n          {intl.formatMessage({\r\n            id: \"search.jumpToResult\",\r\n            defaultMessage: \"Jump to search result in list\",\r\n          })}\r\n        </a>\r\n      );\r\n    } else {\r\n      return null;\r\n    }\r\n  }\r\n  /**\r\n   * End search and find render helpers\r\n   */\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          id=\"wm-search-wrapper\"\r\n          class={`wm-search-wrapper ${this.searchType}`}\r\n          ref={(el) => (this.wrapperEl = el as HTMLDivElement)}\r\n        >\r\n          <input\r\n            disabled={this.disabled}\r\n            id=\"wm-search-input\"\r\n            placeholder={this.placeholder}\r\n            aria-label={`${this.label ? this.label + \". \" : \"\"}${intl.formatMessage({\r\n              id: \"search.typeToFilterResults\",\r\n              defaultMessage: \"Type to filter the results\",\r\n            })}`}\r\n            onInput={(ev: Event) => this.updateValue((ev.target as HTMLInputElement).value)}\r\n            onFocus={() => this.addFocusStyle()}\r\n            onBlur={() => this.handleBlur()}\r\n            aria-autocomplete=\"none\"\r\n            autocomplete=\"off\"\r\n            value={this.value}\r\n          />\r\n          <span class=\"mdi search-icon\">{String.fromCodePoint(parseInt(`0xf349`))}</span>\r\n          {this.searchType === \"find\" && this.renderResultsAndBrowseButtons()}\r\n          <div\r\n            id=\"wm-search-live\"\r\n            class=\"sr-only\"\r\n            aria-live=\"polite\"\r\n            aria-atomic=\"true\"\r\n            ref={(el) => (this.resultsLiveRegion = el as HTMLElement)}\r\n          >\r\n            {this.announcement}\r\n          </div>\r\n        </div>\r\n        {this.searchType === \"find\" && this.renderJumpToLink()}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/p-58b1415e.system.js

@@ -1,2 +0,0 @@
-System.register(["./p-bc28c815.system.js"],(function(e){"use strict";var t;return{setters:[function(e){t=e.i}],execute:function(){var s=e("c",t.formatMessage({id:"global.closeVerb",defaultMessage:"Close",description:"For a button, to close a user interface element"}))}}}));
-//# sourceMappingURL=p-58b1415e.system.js.map

package/dist/ripple/p-58b1415e.system.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["closeVerb","exports","intl","formatMessage","id","defaultMessage","description"],"sources":["src/global/intl.ts"],"sourcesContent":["import { intl } from \"./functions\";\r\n\r\nexport const closeVerb: string = intl.formatMessage({\r\n  id: \"global.closeVerb\",\r\n  defaultMessage: \"Close\",\r\n  description: \"For a button, to close a user interface element\",\r\n});\r\n"],"mappings":"sIAEaA,EAASC,EAAA,IAAWC,EAAKC,cAAc,CAClDC,GAAI,mBACJC,eAAgB,QAChBC,YAAa,oD"}

package/dist/ripple/p-5cda4e9c.system.entry.js

@@ -1,2 +0,0 @@
-var __spreadArray=this&&this.__spreadArray||function(t,e,i){if(i||arguments.length===2)for(var o=0,r=e.length,a;o<r;o++){if(a||!(o in e)){if(!a)a=Array.prototype.slice.call(e,0,o);a[o]=e[o]}}return t.concat(a||Array.prototype.slice.call(e))};System.register(["./p-7b2fc615.system.js","./p-bc28c815.system.js"],(function(t){"use strict";var e,i,o,r,a,n,s,l,p,d,c,h,u,g,f;return{setters:[function(t){e=t.r;i=t.c;o=t.f;r=t.h;a=t.H;n=t.g},function(t){s=t.g;l=t.d;p=t.q;d=t.i;c=t.r;h=t.u;u=t.j;g=t.s;f=t.m}],execute:function(){var m=':host,wm-tag-input{font-family:inherit;width:100%;display:block}:host *,wm-tag-input *{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:14px}:host .wrapper,wm-tag-input .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-tag-input .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-tag-input .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-tag-input .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-tag-input .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-tag-input .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label,wm-tag-input .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-tag-input .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-tag-input .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f026";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-tag-input .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-tag-input .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper,wm-tag-input .wrapper{width:100%;height:100%;position:relative}:host .field-wrapper,wm-tag-input .field-wrapper{position:relative;width:100%;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px}:host .field-wrapper.focused,wm-tag-input .field-wrapper.focused{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}:host .field-wrapper.invalid,wm-tag-input .field-wrapper.invalid{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}:host .character-count,wm-tag-input .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:rgba(74, 74, 74, 0.05);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .tags-and-input-wrapper,wm-tag-input .tags-and-input-wrapper{position:relative;width:100%;padding:0.5rem 0.25rem 0.5rem 0;margin-bottom:-0.5rem}:host .upper-row,wm-tag-input .upper-row{width:100%;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:justify;justify-content:space-between}:host .upper-row:before,wm-tag-input .upper-row:before{-ms-flex-item-align:start;align-self:flex-start;display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f349";color:#b5b5b5;padding:0.75rem 0.5rem 0.75rem 0.75rem}:host .lower-row,wm-tag-input .lower-row{width:100%;min-height:1.875rem}:host #max-tags,wm-tag-input #max-tags{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:1.875rem;background-color:#e6e6e6;padding:0.5rem 1rem;color:#4a4a4a;font-size:0.875rem;border-top:1px solid rgba(35, 35, 35, 0.6);border-radius:0 0 3px 3px}:host .tag-area,wm-tag-input .tag-area{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0;padding:0}:host .tag-area:focus,wm-tag-input .tag-area:focus{outline:none}:host .tag-area [role=option],wm-tag-input .tag-area [role=option]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;height:1.75rem;list-style:none;color:#4a4a4a;background-color:rgba(3, 0, 0, 0.1);padding:0.5rem 0.625rem;margin-bottom:0.5rem;margin-right:0.25rem;margin-left:0.25rem;-webkit-transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);white-space:pre}:host .tag-area [role=option].highlight,wm-tag-input .tag-area [role=option].highlight{-webkit-animation:fadeIn 1s;animation:fadeIn 1s}@-webkit-keyframes fadeIn{0%{background-color:rgba(3, 0, 0, 0.1)}50%{background-color:#c8dfcc}100%{background-color:rgba(3, 0, 0, 0.1)}}@keyframes fadeIn{0%{background-color:rgba(3, 0, 0, 0.1)}50%{background-color:#c8dfcc}100%{background-color:rgba(3, 0, 0, 0.1)}}:host .tag-area [role=option].focused,wm-tag-input .tag-area [role=option].focused{background-color:#d1d1d1}:host .tag-area [role=option].locked,wm-tag-input .tag-area [role=option].locked{background-color:#6b6b6b;color:white}:host .tag-area [role=option] .icon,wm-tag-input .tag-area [role=option] .icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:1.25rem;width:1.25rem;padding:0;margin-left:0.5rem}:host .tag-area [role=option] .icon.remove-btn,wm-tag-input .tag-area [role=option] .icon.remove-btn{border:1px solid #575195;color:#575195;border-radius:50%;cursor:pointer;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1)}:host .tag-area [role=option] .icon.remove-btn:hover,wm-tag-input .tag-area [role=option] .icon.remove-btn:hover{color:white;background-color:#575195}:host .tag-area [role=option] .icon.remove-btn:before,wm-tag-input .tag-area [role=option] .icon.remove-btn:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f156"}:host .tag-area [role=option] .icon.lock,wm-tag-input .tag-area [role=option] .icon.lock{color:white}:host .tag-area [role=option] .icon.lock:before,wm-tag-input .tag-area [role=option] .icon.lock:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f341"}:host input,wm-tag-input input{font-family:inherit;border:none;height:1.75rem;padding:0;margin-bottom:0.5rem;margin-right:0.25rem;padding-left:0.5rem;right:0px}:host input.hidden,wm-tag-input input.hidden{display:none}:host input:focus,wm-tag-input input:focus{outline:none}:host .dropdown-wrapper,wm-tag-input .dropdown-wrapper{margin:0;padding:0;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:calc(100% + 2px);right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}:host .dropdown-wrapper .dropdown,wm-tag-input .dropdown-wrapper .dropdown{-webkit-overflow-scrolling:touch;overflow:auto;max-height:12.5rem;margin:0;padding:0}:host .dropdown-wrapper.open,wm-tag-input .dropdown-wrapper.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .dropdown-wrapper.upwards,wm-tag-input .dropdown-wrapper.upwards{top:unset;bottom:calc(100% + 2px);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .dropdown-wrapper li,:host .dropdown-wrapper div,wm-tag-input .dropdown-wrapper li,wm-tag-input .dropdown-wrapper div{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 1rem;background:#fff;list-style:none;height:2.6875rem;white-space:pre}:host .dropdown-wrapper li[role=option],:host .dropdown-wrapper li.add-new-btn,:host .dropdown-wrapper div[role=option],:host .dropdown-wrapper div.add-new-btn,wm-tag-input .dropdown-wrapper li[role=option],wm-tag-input .dropdown-wrapper li.add-new-btn,wm-tag-input .dropdown-wrapper div[role=option],wm-tag-input .dropdown-wrapper div.add-new-btn{cursor:pointer;color:#575195;font-weight:bold;width:100%;border:none}:host .dropdown-wrapper li[role=option][aria-selected=true],:host .dropdown-wrapper li.add-new-btn[aria-selected=true],:host .dropdown-wrapper div[role=option][aria-selected=true],:host .dropdown-wrapper div.add-new-btn[aria-selected=true],wm-tag-input .dropdown-wrapper li[role=option][aria-selected=true],wm-tag-input .dropdown-wrapper li.add-new-btn[aria-selected=true],wm-tag-input .dropdown-wrapper div[role=option][aria-selected=true],wm-tag-input .dropdown-wrapper div.add-new-btn[aria-selected=true]{color:#6b6b6b;font-style:italic;font-weight:normal;cursor:unset}:host .dropdown-wrapper li[role=option]:hover:not([aria-selected=true]),:host .dropdown-wrapper li[role=option].focused,:host .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper li.add-new-btn.focused,:host .dropdown-wrapper div[role=option]:hover:not([aria-selected=true]),:host .dropdown-wrapper div[role=option].focused,:host .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper div.add-new-btn.focused,wm-tag-input .dropdown-wrapper li[role=option]:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper li[role=option].focused,wm-tag-input .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper li.add-new-btn.focused,wm-tag-input .dropdown-wrapper div[role=option]:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper div[role=option].focused,wm-tag-input .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper div.add-new-btn.focused{outline:none;background:#f4f4f4}:host .dropdown-wrapper li.help-text,:host .dropdown-wrapper div.help-text,wm-tag-input .dropdown-wrapper li.help-text,wm-tag-input .dropdown-wrapper div.help-text{color:#4a4a4a;height:auto;min-height:2.6875rem;padding-top:0.25rem;padding-bottom:0.25rem;white-space:normal}:host .dropdown-wrapper li:not(:last-child),:host .dropdown-wrapper div:not(:last-child),wm-tag-input .dropdown-wrapper li:not(:last-child),wm-tag-input .dropdown-wrapper div:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host .info-text,wm-tag-input .info-text{font-style:italic;margin-top:0.25rem}:host .table-wrapper,wm-tag-input .table-wrapper{min-height:10rem;overflow:auto;margin-top:1.5rem}:host .table-wrapper #table,wm-tag-input .table-wrapper #table{width:100%;border-spacing:0px}:host .table-wrapper #table.fixed-widths,wm-tag-input .table-wrapper #table.fixed-widths{table-layout:fixed}:host .table-wrapper #table .headers,wm-tag-input .table-wrapper #table .headers{height:2.5rem;background-color:#eeedf4}:host .table-wrapper #table .headers th,wm-tag-input .table-wrapper #table .headers th{text-align:left;font-size:0.75rem;font-weight:700;text-transform:uppercase;padding:0 1.5rem}:host .table-wrapper tr:nth-child(even),wm-tag-input .table-wrapper tr:nth-child(even){background-color:#fafafa}:host .table-wrapper tr.selected,wm-tag-input .table-wrapper tr.selected{background-color:rgba(25, 161, 169, 0.2);-webkit-box-shadow:inset 0 0 0 1px #19a1a9;box-shadow:inset 0 0 0 1px #19a1a9;font-weight:500}:host .table-wrapper tr.focused:not(.locked),:host .table-wrapper tr:hover:not(.locked),wm-tag-input .table-wrapper tr.focused:not(.locked),wm-tag-input .table-wrapper tr:hover:not(.locked){background-color:#e9e7ec;-webkit-box-shadow:none;box-shadow:none}:host .table-wrapper tr.locked td,wm-tag-input .table-wrapper tr.locked td{cursor:auto}:host .table-wrapper tr.locked td:first-child .cell-content-wrapper:before,wm-tag-input .table-wrapper tr.locked td:first-child .cell-content-wrapper:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f33e";margin-right:0.5rem;color:#4a4a4a}:host .table-wrapper td,wm-tag-input .table-wrapper td{height:3.75rem;vertical-align:middle;padding:0 1.5rem;cursor:pointer}:host .table-wrapper td.focused,wm-tag-input .table-wrapper td.focused{-webkit-box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e;box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e}:host .table-wrapper td .cell-content-wrapper.trunc,wm-tag-input .table-wrapper td .cell-content-wrapper.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .table-wrapper td .description,wm-tag-input .table-wrapper td .description{display:none}:host .no-results,wm-tag-input .no-results{padding:1.25rem 1.5rem}:host .sr-only,wm-tag-input .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host #error,wm-tag-input #error{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem}';var w=t("wm_tag_input",function(){function t(t){var r=this;e(this,t);this.wmTagInputChanged=i(this,"wmTagInputChanged",7);this.uid=this.el.id?this.el.id:s();this.openUp=false;this.tooltipVisible=false;this.debouncedUpdate=l((function(){return o(r.el)}),30);this.label=undefined;this.labelPosition="top";this.options="";this.selectedTags="";this.info=undefined;this.errorMessage=undefined;this.addNew=true;this.placeholder=undefined;this.requiredField=false;this.characterLimit=50;this.maxTags=undefined;this.tagInputType="dropdown";this.colHeaders=undefined;this.colWidths=undefined;this.colWrap=undefined;this.messageConfig="";this.focusedListItem=undefined;this.focusedTag=null;this.tablePosition={row:0,column:1};this.isExpanded=false;this.tagsList=p(this.selectedTags);this.optionsList=p(this.options);this.charCount=0;this.liveRegionMessage=""}Object.defineProperty(t.prototype,"focusedElement",{get:function(){return this.el.shadowRoot.activeElement},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"listItemEls",{get:function(){return Array.from(this.dropdownEl.querySelectorAll("li"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"tagEls",{get:function(){return this.tagAreaEl?Array.from(this.tagAreaEl.querySelectorAll(".tag")):[]},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"nonLockedTagEls",{get:function(){return this.tagEls.filter((function(t){return!t.classList.contains("locked")}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"optionEls",{get:function(){return Array.from(this.dropdownEl.querySelectorAll(".option"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"wmRowEls",{get:function(){return Array.from(this.el.querySelectorAll("wm-tag-input-row"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"localRowEls",{get:function(){return Array.from(this.el.shadowRoot.querySelectorAll("tr"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"filteredRows",{get:function(){var t=this;return this.wmRowEls.filter((function(e){var i=[e.col1,e.col2,e.col3,e.col4].join("").toLowerCase();return t.inputEl&&t.inputEl.value?i.includes(t.inputEl.value.toLowerCase()):true}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"nonLockedTagsList",{get:function(){var t=this;var e=[];if(this.tagInputType==="table"){this.tagsList.forEach((function(i){var o=t.wmRowEls.filter((function(t){return i===t.id}))[0];if(!o.locked){e.push(i)}}))}else if(this.tagInputType==="dropdown"){e=this.tagsList}return e},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"tagLimitReached",{get:function(){return!!(this.maxTags&&this.tagsList.length>=this.maxTags)},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"noResultsMessage",{get:function(){return d.formatMessage({id:"tagInput.noResults",defaultMessage:"No results match your search.",description:"Message displayed when a user's search returns empty."})},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"componentMessages",{get:function(){var t=d.formatMessage({id:"tagInput.addNewHelpText",defaultMessage:"Press the Enter or Comma key to add a new tag.",description:"Help text appearing in a dropdown. Use imperative"});var e=d.formatMessage({id:"tagInput.selectionHelpText",defaultMessage:"Search and select a tag.",description:"Help text appearing in a dropdown. Use imperative"});var i=d.formatMessage({id:"tagInput.maxTagsReached",defaultMessage:"No more tags can be added because the limit has been reached."});var o=d.formatMessage({id:"tagInput.tagAreaInstructions",defaultMessage:"tag selection. Press Backspace or Delete to remove a tag."});var r=d.formatMessage({id:"tagInput.tagsAdded",defaultMessage:"Tags added",description:"For the user to understand how close they are to the tag limit, followed by x/y count"});var a={addNewHelpText:t,selectionHelpText:e,maxTagsReached:i,tagAreaInstructions:o,tagsAdded:r};var n=c(this.messageConfig);return n?Object.assign(Object.assign({},a),n):a},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"inputMinimumWidth",{get:function(){var t=getComputedStyle(this.inputEl);var e=getComputedStyle(this.tagEls[this.tagEls.length-1]);var i=[t.paddingLeft,t.paddingRight,t.marginLeft,t.marginRight,e.marginRight].reduce((function(t,e){return t+parseInt(e.replace("px",""))}),0);var o=Math.max(150,h(this.inputEl,this.placeholder).width+i);return o},enumerable:false,configurable:true});t.prototype.generateTagAddedMessage=function(t){return d.formatMessage({id:"tagInput.tagAdded",defaultMessage:"{tagName} added.",description:"A confirmation for adding a tag."},{tagName:t})};t.prototype.generateTagAlreadyAddedMessage=function(t){return d.formatMessage({id:"tagInput.tagAlreadyAdded",defaultMessage:"{tagName} has already been added.",description:"An alert for adding a tag that is already present."},{tagName:t})};t.prototype.generateCharacterLimitLabel=function(t){return d.formatMessage({id:"global.characterLimit",defaultMessage:"{limit, number} characters allowed.",description:"for screen readers"},{limit:t})};t.prototype.componentWillLoad=function(){var t=this;if(!this.placeholder){this.placeholder=this.createPlaceholderDefault(this.addNew,!!this.options)}if(!this.label){console.error("wm-tag-input must have a label property")}this.consolidateSelectedTags();this.el.focus=function(){var e=t.nonLockedTagEls[0];if(e){t.tagAreaEl.focus();t.focusTag(e)}else{t.inputEl.focus()}};var e=new ResizeObserver((function(){return t.debouncedUpdate()}));e.observe(this.el)};t.prototype.componentDidLoad=function(){this.tagEls.forEach((function(t){return t.classList.remove("highlight")}))};t.prototype.componentDidRender=function(){this.positionInput()};t.prototype.consolidateSelectedTags=function(){var t=this;this.tagsList.forEach((function(e){if(!t.includesCaseInsensitive(t.optionsList,e)){t.options+="".concat(t.options.length>0?",":"").concat(e)}}));this.optionsList=p(this.options)};t.prototype.createPlaceholderDefault=function(t,e){var i=d.formatMessage({id:"tagInput.placeholderAddAndSearch",defaultMessage:"Add or search for a tag",description:"Placeholder text. Use imperative"});var o=d.formatMessage({id:"tagInput.placeholderSearch",defaultMessage:"Search and select a tag",description:"Placeholder text. Use imperative"});var r=d.formatMessage({id:"tagInput.placeholderAdd",defaultMessage:"Add a new tag",description:"Placeholder text. Use imperative"});var a="";if(t&&e){a=i}else if(!t&&e){a=o}else if(t){a=r}return a};t.prototype.reflectSelectedTags=function(t,e){var i=this;var o=t.length>e.length;var r="";var a=this.tagsList;if(o){r=t.filter((function(t){return!e.includes(t)}))[0]}else{r=e.filter((function(e){return!t.includes(e)}))[0]}if(this.tagInputType==="table"){r=this.wmRowEls.filter((function(t){return t.id===r}))[0];a=this.tagsList.map((function(t){return i.el.querySelector("#".concat(t))}))}this.selectedTags=this.listToCSV(this.tagsList);var n={value:a,tagChanged:r};this.wmTagInputChanged.emit(n)};t.prototype.handleErrorMessageChange=function(){if(this.errorMessage){this.announce(this.errorMessage)}};t.prototype.handleRowUpdate=function(){o(this.el)};t.prototype.closeIfNotElOrChild=function(t){var e=t.target!==this.el&&!this.el.shadowRoot.contains(t.target);if(this.tagInputType==="dropdown"&&e&&this.isExpanded){this.closeDropdown()}};t.prototype.dismissTooltip=function(){if(this.tooltipVisible){u();this.tooltipVisible=false}};t.prototype.handleInputKeyDown=function(t){if(/^.$/.test(t.key)&&this.inputEl.value.length>=this.characterLimit){this.announceCharacterLimitWarning(this.inputEl.value.length,this.characterLimit)}t.stopPropagation();switch(t.key){case"Enter":case",":t.preventDefault();this.handleInputEnter();break;case"ArrowDown":t.preventDefault();this.handleInputArrowDown();break;case"ArrowUp":t.preventDefault();this.handleInputArrowUp();break;case"ArrowLeft":t.preventDefault();if(this.tagInputType==="table"&&this.tablePosition.row){this.moveLeftCell()}break;case"ArrowRight":t.preventDefault();if(this.tagInputType==="table"&&this.tablePosition.row){this.moveRightCell()}break;case"Escape":if(this.tagInputType==="dropdown"&&this.isExpanded){this.closeDropdown()}break;case"ArrowLeft":case"Backspace":this.handleInputBackspace();break}};t.prototype.handleInputFocus=function(){if(this.tagInputType==="dropdown"){this.openDropdown();this.clearListItemFocus()}o(this.el)};t.prototype.handleInputChanged=function(t){this.charCount=t.length;if(this.tagInputType==="dropdown"){this.clearListItemFocus();if(this.charCount>=this.characterLimit-5){this.announceCharacterLimitWarning(this.charCount,this.characterLimit)}if(!this.isExpanded){this.openDropdown()}}else if(this.tagInputType==="table"){this.clearCellFocus()}this.announceExistingOptions()};t.prototype.handleInputEnter=function(){if(this.tagInputType==="dropdown"){if(this.focusedListItem){this.handleListItemClick(this.focusedListItem)}else{this.submitInput(this.addNew,this.inputEl.value.trim())}}else if(this.tagInputType==="table"&&this.tablePosition.row>0){this.handleTableRowClick(this.localRowEls[this.tablePosition.row].id)}};t.prototype.submitInput=function(t,e){var i=e.match(/\S/);if(t&&i){this.addTag(e);this.optionsList=this.addOption(e);this.resetInput()}};t.prototype.handleInputArrowDown=function(){if(this.tagInputType==="table"){this.moveDownRow()}else if(this.tagInputType==="dropdown"&&this.isExpanded){this.moveDownListItem()}else if(this.tagInputType==="dropdown"){this.openDropdown()}};t.prototype.handleInputArrowUp=function(){if(this.tagInputType==="table"){this.moveUpRow()}else if(this.tagInputType==="dropdown"&&this.isExpanded){this.moveUpListItem()}else if(this.tagInputType==="dropdown"){this.openDropdown()}};t.prototype.handleInputBackspace=function(){var t=this;if(this.inputEl.value===""&&this.tagsList.length>0){window.requestAnimationFrame((function(){if(t.nonLockedTagsList.length>0){t.tagAreaEl.focus();t.focusTag(t.tagEls[t.tagEls.length-1])}}))}};t.prototype.handleListItemKeyDown=function(t){var e=t.target;switch(t.key){case"Enter":case" ":t.preventDefault();e.click();break;case"ArrowDown":t.preventDefault();this.moveDownListItem();break;case"ArrowUp":t.preventDefault();this.moveUpListItem();break;case"Escape":if(this.focusedElement!==this.inputEl){this.inputEl.focus()}else if(this.tagInputType==="dropdown"){this.closeDropdown()}break}};t.prototype.handleListItemClick=function(t){var e=t.dataset.option.trim()||"";if(this.includesCaseInsensitive(this.tagsList,e)){this.announce(this.generateTagAlreadyAddedMessage(e))}else{this.resetInput();this.addTag(e);this.optionsList=this.addOption(e);this.focusedListItem=null}};t.prototype.handleTableRowClick=function(t){var e=this.el.querySelector("#".concat(t));var i=e.locked;if(!i){if(this.includesCaseInsensitive(this.tagsList,t)){this.removeTag(t)}else if(!this.tagLimitReached){this.addTag(t);this.resetInput()}}};t.prototype.handleTagAreaKeyDown=function(t){switch(t.key){case"ArrowLeft":case"ArrowUp":t.preventDefault();this.moveLeftTag();break;case"ArrowRight":case"ArrowDown":t.preventDefault();this.moveRightTag();break;case"Backspace":case"Delete":this.handleTagAreaDelete();break}};t.prototype.handleTagAreaDelete=function(){var t=this.focusedTag&&this.focusedTag.classList.contains("locked");if(this.focusedTag&&this.focusedTag.dataset.tag&&!t){this.removeTag(this.focusedTag.dataset.tag);if(this.nonLockedTagsList.length===0){this.inputEl.focus()}else if(this.focusedTag===this.tagEls[this.tagEls.length-1]){this.focusedTag=this.tagEls[this.tagEls.length-2];this.focusTag(this.focusedTag)}}};t.prototype.handleBlur=function(t,e){var i=t.relatedTarget!==e&&!this.el.shadowRoot.contains(t.relatedTarget);this.dismissTooltip();this.clearCellFocus();if(i){this.fieldWrapperEl.classList.remove("focused");if(this.tagInputType==="dropdown"){this.closeDropdown()}}};t.prototype.handleCellMouseEnter=function(t){var e=t.target;var i=e.querySelector(".cell-content-wrapper");var o=i.scrollWidth>i.clientWidth;if(o){g("bottom",e,e.innerText);this.tooltipVisible=true}};t.prototype.handleTagAreaFocus=function(){if(this.tagInputType==="dropdown"){this.closeDropdown()}var t=this.nonLockedTagEls[0];t&&this.focusTag(t)};t.prototype.handleRemoveButtonClick=function(t){this.moveLeftTag();this.removeTag(t)};t.prototype.moveDownListItem=function(){if(this.listItemEls.length>0){var t=this.listItemEls[0];if(!this.focusedListItem){this.focusListItem(t)}else if(this.focusedListItem.nextElementSibling){this.focusListItem(this.focusedListItem.nextElementSibling)}else{this.focusListItem(t)}}};t.prototype.moveUpListItem=function(){if(this.listItemEls.length>0){var t=this.listItemEls[this.listItemEls.length-1];if(!this.focusedListItem){this.focusListItem(t)}else if(this.focusedListItem.previousElementSibling){this.focusListItem(this.focusedListItem.previousElementSibling)}else{this.clearListItemFocus()}}};t.prototype.moveDownRow=function(){if(this.filteredRows.length>0){if(this.tablePosition.row===0){this.tablePosition.row=1}else if(this.tablePosition.row===this.filteredRows.length){this.tablePosition.row=1}else{this.tablePosition.row++}var t=this.wmRowEls[this.tablePosition.row-1];if(t.locked){this.moveDownRow()}else{this.focusCell(this.tablePosition)}}};t.prototype.moveUpRow=function(){if(this.filteredRows.length>0){if(this.tablePosition.row===0){this.tablePosition.row=this.filteredRows.length}else if(this.tablePosition.row===1){this.tablePosition.row=0}else{this.tablePosition.row--}var t=this.wmRowEls[this.tablePosition.row-1];if(t&&t.locked){this.moveUpRow()}else if(t){this.focusCell(this.tablePosition)}else{this.clearCellFocus()}}};t.prototype.moveLeftCell=function(){if(this.tablePosition.column!=1){this.tablePosition.column--;this.focusCell(this.tablePosition)}};t.prototype.moveRightCell=function(){var t=p(this.colHeaders).length;if(this.tablePosition.column<t){this.tablePosition.column++;this.focusCell(this.tablePosition)}};t.prototype.moveLeftTag=function(){var t=this.tagEls[this.tagEls.length-1];if(this.focusedTag&&this.tagEls.includes(this.focusedTag.previousElementSibling)){this.focusedTag=this.focusedTag.previousElementSibling}else{this.focusedTag=t}if(this.focusedTag.classList.contains("locked")&&this.nonLockedTagEls.length>0){this.moveLeftTag()}else{this.focusTag(this.focusedTag)}};t.prototype.moveRightTag=function(){var t=this.tagEls[0];if(this.focusedTag&&this.tagEls.includes(this.focusedTag.nextElementSibling)){this.focusedTag=this.focusedTag.nextElementSibling}else{this.focusedTag=t}if(this.focusedTag.classList.contains("locked")){this.moveRightTag()}else{this.focusTag(this.focusedTag)}};t.prototype.addOption=function(t){var e=this.optionsList;var i=this.includesCaseInsensitive(this.optionsList,t);if(!i){e=e.concat(t)}return e};t.prototype.removeOption=function(t){this.optionsList=this.filterCaseInsensitive(this.optionsList,t)};t.prototype.addTag=function(t){var e=this.tagsList;var i=this.includesCaseInsensitive(this.tagsList,t);var o=this.optionsList.filter((function(e){return e.toLowerCase()===t.toLowerCase()}))[0];if(!i){var r=t;if(this.tagInputType==="table"){var a=this.el.querySelector("#".concat(t));r=a.col1}this.announce(this.generateTagAddedMessage(r));this.tagsList=e.concat(o||t);if(this.tagLimitReached){this.tagAreaEl.focus()}}};t.prototype.removeTag=function(t){var e=t;if(this.tagInputType==="table"){var i=this.el.querySelector("#".concat(t));e=i.col1}var o=d.formatMessage({id:"tagInput.tagRemoved",defaultMessage:"{tag} removed"},{tag:e});this.announce(o);this.tagsList=this.filterCaseInsensitive(this.tagsList,t);if(this.tagInputType==="dropdown"){var r=p(this.options);if(this.includesCaseInsensitive(this.optionsList,t)&&!this.includesCaseInsensitive(r,t)){this.removeOption(t)}}};t.prototype.focusListItem=function(t){this.focusedListItem=t;this.inputEl.setAttribute("aria-activedescendant",this.focusedListItem.id);t.scrollIntoView({block:"nearest"})};t.prototype.focusTag=function(t){if(t.classList.contains("locked")){this.focusedTag=null;this.tagAreaEl.setAttribute("aria-activedescendant","")}else{this.focusedTag=t;this.tagAreaEl.setAttribute("aria-activedescendant",this.focusedTag.id)}};t.prototype.focusCell=function(t){this.clearCellFocus(false);if(t.row){var e=this.localRowEls[t.row];var i=e.querySelectorAll("td");var o=i[t.column-1];var r=o.querySelector(".cell-content-wrapper");var a=r.scrollWidth>r.clientWidth;e.classList.add("focused");o.classList.add("focused");o.scrollIntoView({block:"nearest"});this.inputEl.setAttribute("aria-activedescendant",o.id);this.dismissTooltip();if(a){g("bottom",o,o.innerText);this.tooltipVisible=true}}};t.prototype.clearTagFocus=function(){this.tagAreaEl.setAttribute("aria-activedescendant","");this.focusedTag=null};t.prototype.clearCellFocus=function(t){if(t===void 0){t=true}this.inputEl.setAttribute("aria-activedescendant","");if(t){this.tablePosition={row:0,column:1}}this.localRowEls.forEach((function(t){t.classList.remove("focused");t.querySelectorAll("td").forEach((function(t){t.classList.remove("focused")}))}))};t.prototype.openDropdown=function(){this.openUp=f(this.el,this.dropdownEl,this.el.clientHeight,-2);this.isExpanded=true};t.prototype.closeDropdown=function(){this.clearListItemFocus();this.isExpanded=false};t.prototype.clearListItemFocus=function(){this.focusedListItem=null;this.inputEl.setAttribute("aria-activedescendant","");this.listItemEls.forEach((function(t){t.classList.remove("focused")}))};t.prototype.resetInput=function(){this.charCount=0;this.inputEl.value=""};t.prototype.announce=function(t){if(this.liveRegionEl.textContent===t){t+=" "}this.liveRegionMessage=t};t.prototype.announceExistingOptions=function(){var t=this;window.requestAnimationFrame((function(){var e=0;if(t.tagInputType==="dropdown"){e=t.optionEls.length}else if(t.tagInputType==="table"){e=t.filteredRows.length}var i=d.formatMessage({id:"tagInput.existingOptions",defaultMessage:"{num, plural, one {1 existing option.} other {# existing options.}}"},{num:e});t.announce(i)}))};t.prototype.announceCharacterLimitWarning=function(t,e){var i=d.formatMessage({id:"global.charactersEntered",defaultMessage:"{x, number} of {y, number} characters entered.",description:"for screen readers"},{x:t,y:e});var o=d.formatMessage({id:"global.characterLimitReached",defaultMessage:"No additional characters will be entered.",description:"for screen readers"});this.announce("".concat(i).concat(t>=e?" "+o:""))};t.prototype.positionInput=function(){var t=this.tagEls[this.tagEls.length-1];this.inputEl.style.position="static";this.inputEl.style.width="100%";if(t){var e=this.tagAreaEl.getBoundingClientRect().right-t.getBoundingClientRect().right;if(e>=this.inputMinimumWidth){this.inputEl.style.position="absolute";this.inputEl.style.top=t.offsetTop.toString()+"px";this.inputEl.style.width=(this.tagAreaEl.getBoundingClientRect().right-t.getBoundingClientRect().right-8).toString()+"px"}}};t.prototype.listToCSV=function(t){return t.join(",")};t.prototype.includesCaseInsensitive=function(t,e){var i=t.map((function(t){return t.toLowerCase()}));return i.includes(e.toLowerCase())};t.prototype.filterCaseInsensitive=function(t,e){return t.filter((function(t){return t.toLowerCase()!==e.toLowerCase()}))};t.prototype.sortCaseInsensitive=function(t){return t.sort((function(t,e){t=t.toLowerCase();e=e.toLowerCase();return t>e?1:t<e?-1:0}))};t.prototype.renderTags=function(){var t=this;var e=[];var i=[];this.tagsList.forEach((function(o,a){var n="tag".concat(a+1);var s="";var l=false;if(t.tagInputType==="dropdown"){s=o}else if(t.tagInputType==="table"){var p=t.el.querySelector("#".concat(o));s=p?p.col1:"";l=p?p.locked:false}var d=l?e:i;d.push(r("li",{id:n,class:"tag highlight ".concat(t.focusedTag&&t.focusedTag.id===n?"focused":""," ").concat(l?"locked":""),"data-tag":o,role:"option"},s,l?r("div",{class:"icon lock"}):r("button",{class:"icon remove-btn",tabIndex:-1,onClick:function(){return t.handleRemoveButtonClick(o)}})))}));return __spreadArray(__spreadArray([],e,true),i,true)};t.prototype.renderDropdown=function(){var t=this;return r("div",{class:"dropdown-wrapper ".concat(this.isExpanded?"open":""," ").concat(this.openUp?"upwards":""),ref:function(e){return t.dropdownEl=e}},r("div",{id:"help-text",class:"help-text"},this.renderHelpText()),r("ul",{class:"dropdown",id:"dropdown",role:"listbox","aria-multiselectable":"true","aria-expanded":this.isExpanded?"true":false,"aria-label":this.label,tabindex:-1},this.inputEl&&this.renderAddNewButton(),this.renderListItems(this.optionsList)))};t.prototype.renderListItems=function(t){var e=this;t=this.sortCaseInsensitive(t);if(this.inputEl&&this.inputEl.value){t=this.optionsList.filter((function(t){return t.toLowerCase().includes(e.inputEl.value.toLowerCase())}))}return t.map((function(t,i){var o="option".concat(i+1);var a=e.focusedListItem&&e.focusedListItem.id===o;var n=e.includesCaseInsensitive(e.tagsList,t);return r("li",{class:"option ".concat(a?"focused":""),role:"option",id:o,"data-option":t,"aria-selected":n?"true":"false","aria-disabled":n?"true":"false",onKeyDown:function(t){return e.handleListItemKeyDown(t)},onBlur:function(t){return e.handleBlur(t,e.el)},onClick:function(t){return e.handleListItemClick(t.target)}},t)}))};t.prototype.renderAddNewButton=function(){var t=this;var e=this.inputEl.value.match(/\S/);var i=this.includesCaseInsensitive(this.optionsList,this.inputEl.value.trim());if(this.addNew&&e&&!i){var o="add-new-btn";var a=this.focusedListItem&&this.focusedListItem.id===o;return r("li",{role:"option",class:"add-new-btn ".concat(a?"focused":""),id:o,"data-option":this.inputEl.value,onKeyDown:function(e){return t.handleListItemKeyDown(e)},onBlur:function(e){return t.handleBlur(e,t.el)},onClick:function(e){return t.handleListItemClick(e.target)},tabIndex:a?0:-1},'Add "'.concat(this.inputEl.value.trim(),'"'))}else return""};t.prototype.renderHelpText=function(){var t="";if(this.optionsList.length>0){t+=this.componentMessages.selectionHelpText}if(this.addNew){t+=" "+this.componentMessages.addNewHelpText}return t};t.prototype.renderTagCounter=function(){if(this.maxTags){return r("div",{class:"lower-row"},r("div",{id:"max-tags"},"".concat(this.componentMessages.tagsAdded,": ").concat(this.tagsList.length,"/").concat(this.maxTags),this.tagLimitReached&&" - ".concat(this.componentMessages.maxTagsReached)))}};t.prototype.renderTable=function(){var t=this;return r("div",{class:"table-wrapper",onScroll:function(){return t.dismissTooltip()}},r("table",{id:"table",role:"grid",class:"".concat(this.colWidths?"fixed-widths":""),"aria-label":this.label,"aria-multiselectable":"true"},this.renderTableHeaders(),this.filteredRows.length?this.renderTableRows():r("div",{class:"no-results"},this.noResultsMessage)))};t.prototype.renderTableHeaders=function(){var t=this;return r("tr",{class:"headers",role:"row"},p(this.colHeaders).map((function(e,i){var o="wrap";if(t.colWrap&&p(t.colWrap)[i]){o=p(t.colWrap)[i]}return r("th",{class:"header-cell ".concat(o),role:"columnheader",width:t.colWidths?p(t.colWidths)[i]:""},e)})))};t.prototype.renderTableRows=function(){var t=this;return this.filteredRows.map((function(e){var i=t.includesCaseInsensitive(t.tagsList,e.id);return r("tr",{id:e.id,class:"".concat(e.locked?"locked":""," ").concat(i?"selected":""),role:"row",onClick:function(){return t.handleTableRowClick(e.id)}},t.renderTableCells(e))}))};t.prototype.renderTableCells=function(t){var e=this;var i=[t.col1,t.col2,t.col3,t.col4].filter((function(t){return!!t}));var o=this.includesCaseInsensitive(this.tagsList,t.id);return i.map((function(i,a){var n="".concat(t.id,"-col").concat(a+1);var s="wrap";if(e.colWrap&&p(e.colWrap)[a]){s=p(e.colWrap)[a]}return r("td",{id:n,role:"gridcell","aria-describedby":"".concat(n,"-description"),"aria-selected":o.toString(),onMouseEnter:function(t){return e.handleCellMouseEnter(t)},onMouseLeave:function(){return e.dismissTooltip()}},r("div",{class:"cell-content-wrapper ".concat(s)},i),r("div",{class:"description",id:"".concat(n,"-description")},t.locked?"locked":""))}))};t.prototype.render=function(){var t=this;return r(a,{id:this.uid},r("div",{class:"wrapper label-".concat(this.labelPosition," ").concat(this.errorMessage?"invalid":"")},r("div",{class:"label-wrapper"},r("label",{class:"label",htmlFor:"input".concat(this.uid)},this.label,this.requiredField&&r("span",{class:"required","aria-hidden":"true"},"*"))),r("div",{class:"field-wrapper ".concat(this.focusedElement?"focused":""," ").concat(this.errorMessage?"invalid":""),ref:function(e){return t.fieldWrapperEl=e}},r("div",{class:"upper-row"},r("div",{class:"tags-and-input-wrapper"},this.tagsList.length>0&&r("ul",{ref:function(e){return t.tagAreaEl=e},class:"tag-area",role:"listbox","aria-activedescendant":"","aria-orientation":"horizontal","aria-label":"".concat(this.label," ").concat(this.tagsList.length>0?this.componentMessages.tagAreaInstructions:""),tabindex:this.nonLockedTagsList.length>0?0:-1,"aria-describedby":"info max-tags",onFocus:function(){return t.handleTagAreaFocus()},onBlur:function(e){t.clearTagFocus();t.handleBlur(e,t.el)},onKeyDown:function(e){return t.handleTagAreaKeyDown(e)}},this.renderTags()),r("input",{id:"input".concat(this.uid),class:this.tagLimitReached?"hidden":"",role:"combobox",ref:function(e){return t.inputEl=e},autocomplete:"off","aria-required":this.requiredField?"true":null,"aria-controls":this.tagInputType,"aria-describedby":"help-text".concat(this.errorMessage?" error ":""),"aria-label":"".concat(this.label," ").concat(this.tagInputType==="dropdown"?this.generateCharacterLimitLabel(this.characterLimit):""),"aria-expanded":this.tagInputType==="dropdown"?this.isExpanded.toString():null,placeholder:this.placeholder,maxLength:this.tagInputType==="dropdown"?this.characterLimit:undefined,onInput:function(){return t.handleInputChanged(t.inputEl.value)},onBlur:function(e){t.handleBlur(e,t.el)},onFocus:function(){return t.handleInputFocus()},onKeyDown:function(e){return t.handleInputKeyDown(e)}})),this.tagInputType==="dropdown"&&r("div",{class:"character-count"},this.charCount,"/",this.characterLimit)),this.renderTagCounter(),this.tagInputType==="dropdown"&&this.renderDropdown()),this.info&&r("div",{id:"info",class:"info-text"},this.info),this.errorMessage&&r("div",{id:"error"},this.errorMessage),r("div",{class:"sr-only","aria-live":"assertive",ref:function(e){return t.liveRegionEl=e},"aria-atomic":"true"},this.liveRegionMessage),this.tagInputType==="table"&&this.renderTable()))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{tagsList:["reflectSelectedTags"],errorMessage:["handleErrorMessageChange"]}},enumerable:false,configurable:true});return t}());w.style=m}}}));
-//# sourceMappingURL=p-5cda4e9c.system.entry.js.map

package/dist/ripple/p-5cda4e9c.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmTagInputCss","TagInput","exports","this","uid","el","id","generateId","openUp","tooltipVisible","debouncedUpdate","debounce","forceUpdate","_this","row","column","csvToArray","selectedTags","options","Object","defineProperty","class_1","prototype","shadowRoot","activeElement","Array","from","dropdownEl","querySelectorAll","tagAreaEl","tagEls","filter","tag","classList","contains","wmRowEls","colValues","col1","col2","col3","col4","join","toLowerCase","inputEl","value","includes","list","tagInputType","tagsList","forEach","correspondingRowEl","locked","push","maxTags","length","intl","formatMessage","defaultMessage","description","addNewHelpText","selectionHelpText","maxTagsReachedMessage","tagAreaInstructions","tagsAddedMessage","defaultConfig","maxTagsReached","tagsAdded","userProvidedConfig","safeParseJSON","messageConfig","assign","inputElStyles","getComputedStyle","tagElStyles","inputElBuffer","paddingLeft","paddingRight","marginLeft","marginRight","reduce","prev","curr","parseInt","replace","minimumWidth","Math","max","measureText","placeholder","width","generateTagAddedMessage","tagName","generateTagAlreadyAddedMessage","generateCharacterLimitLabel","characterLimit","limit","componentWillLoad","createPlaceholderDefault","addNew","label","console","error","consolidateSelectedTags","focus","firstFocusableTag","nonLockedTagEls","focusTag","resizeObserver","ResizeObserver","observe","componentDidLoad","remove","componentDidRender","positionInput","includesCaseInsensitive","optionsList","concat","hasOptions","addAndSearchPlaceholder","searchPlaceholder","addPlaceholder","reflectSelectedTags","newValue","oldValue","isAddition","changedTag","val","map","querySelector","listToCSV","detail","tagChanged","wmTagInputChanged","emit","handleErrorMessageChange","errorMessage","announce","handleRowUpdate","closeIfNotElOrChild","ev","isntElOrChild","target","isExpanded","closeDropdown","dismissTooltip","hideTooltip","handleInputKeyDown","test","key","announceCharacterLimitWarning","stopPropagation","preventDefault","handleInputEnter","handleInputArrowDown","handleInputArrowUp","tablePosition","moveLeftCell","moveRightCell","handleInputBackspace","handleInputFocus","openDropdown","clearListItemFocus","handleInputChanged","charCount","clearCellFocus","announceExistingOptions","focusedListItem","handleListItemClick","submitInput","trim","handleTableRowClick","localRowEls","canAddNew","hasNonWhiteSpaceCharacters","match","addTag","addOption","resetInput","moveDownRow","moveDownListItem","moveUpRow","moveUpListItem","window","requestAnimationFrame","nonLockedTagsList","handleListItemKeyDown","typedEvTarget","click","focusedElement","item","dataset","option","rowId","referencedRow","isLocked","removeTag","tagLimitReached","handleTagAreaKeyDown","moveLeftTag","moveRightTag","handleTagAreaDelete","focusedTag","handleBlur","component","relatedTarget","fieldWrapperEl","handleCellMouseEnter","cell","contentWrapper","isTruncated","scrollWidth","clientWidth","showTooltip","innerText","handleTagAreaFocus","handleRemoveButtonClick","listItemEls","firstListItem","focusListItem","nextElementSibling","lastListItem","previousElementSibling","filteredRows","rowToFocus","focusCell","numCols","colHeaders","lastTag","firstTag","newOptionsList","optionAlreadyExists","removeOption","filterCaseInsensitive","newTagsList","tagAlreadyAdded","tagExistsAsOption","x","textToAnnounce","tagRemovedMessage","devOptionsList","setAttribute","scrollIntoView","block","element","position","rowCells","cellToFocus","add","clearTagFocus","resetPosition","shouldOpenUp","clientHeight","message","liveRegionEl","textContent","liveRegionMessage","numResults","optionEls","existingOptionsMessage","num","charLimit","charactersEnteredMessage","y","characterLimitReachedMessage","style","spaceAvailable","getBoundingClientRect","right","inputMinimumWidth","top","offsetTop","toString","lowercaseList","str","sortCaseInsensitive","sort","a","b","renderTags","lockedTags","unlockedTags","idx","tagText","targetList","h","class","role","tabIndex","onClick","__spreadArray","renderDropdown","ref","renderHelpText","tabindex","renderAddNewButton","renderListItems","isFocused","isSelected","onKeyDown","onBlur","helpText","componentMessages","renderTagCounter","renderTable","onScroll","colWidths","renderTableHeaders","renderTableRows","noResultsMessage","header","overflowRule","colWrap","renderTableCells","localId","onMouseEnter","onMouseLeave","render","Host","labelPosition","htmlFor","requiredField","onFocus","autocomplete","maxLength","undefined","onInput","info"],"sources":["src/components/wm-tag-input/wm-tag-input.scss?tag=wm-tag-input&encapsulation=shadow","src/components/wm-tag-input/wm-tag-input.tsx"],"sourcesContent":[":host,\r\nwm-tag-input {\r\n  font-family: inherit;\r\n  width: 100%;\r\n  display: block;\r\n\r\n  * {\r\n    box-sizing: border-box;\r\n    font-size: 14px;\r\n  }\r\n\r\n  @include label;\r\n\r\n  .wrapper {\r\n    width: 100%;\r\n    height: 100%;\r\n    position: relative;\r\n  }\r\n\r\n  .field-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    border: 1px solid $input-border-color;\r\n    @include border-radius(3px);\r\n\r\n    &.focused {\r\n      @include field-focus;\r\n    }\r\n\r\n    &.invalid {\r\n      @include invalidBorder;\r\n    }\r\n  }\r\n\r\n  .character-count {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-width: rem-calc(80);\r\n    background-color: rgba(74, 74, 74, 0.05);\r\n    font-size: rem-calc(14);\r\n    font-weight: 500;\r\n    align-self: stretch;\r\n  }\r\n\r\n  .tags-and-input-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    padding: rem-calc(8) rem-calc(4) rem-calc(8) 0;\r\n    margin-bottom: rem-calc(-8);\r\n  }\r\n\r\n  .upper-row {\r\n    width: 100%;\r\n    display: flex;\r\n    flex: 1;\r\n    justify-content: space-between;\r\n    &:before {\r\n      align-self: flex-start;\r\n      @include mdi-icon;\r\n      content: \"\\f349\"; // magnifying glass\r\n      color: $tag-input-search-icon-color;\r\n      padding: rem-calc(12) rem-calc(8) rem-calc(12) rem-calc(12);\r\n    }\r\n  }\r\n\r\n  .lower-row {\r\n    width: 100%;\r\n    min-height: rem-calc(30);\r\n  }\r\n\r\n  #max-tags {\r\n    display: flex;\r\n    align-items: center;\r\n    min-height: rem-calc(30);\r\n    background-color: $tag-input-max-tags-bg;\r\n    padding: rem-calc(8) rem-calc(16);\r\n    color: $tag-input-max-tags-color;\r\n    font-size: rem-calc(14);\r\n    border-top: 1px solid $tag-input-max-tags-border;\r\n    border-radius: 0 0 3px 3px;\r\n  }\r\n\r\n  .tag-area {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    &:focus {\r\n      outline: none;\r\n    }\r\n\r\n    [role=\"option\"] {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      height: rem-calc(28);\r\n      list-style: none;\r\n      color: $charcoal;\r\n      background-color: rgba(3, 0, 0, 0.1);\r\n      padding: rem-calc(8) rem-calc(10);\r\n      margin-bottom: rem-calc(8);\r\n      margin-right: rem-calc(4);\r\n      margin-left: rem-calc(4);\r\n      transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n      white-space: pre;\r\n\r\n      &.highlight {\r\n        animation: fadeIn 1s;\r\n        @keyframes fadeIn {\r\n          0% {\r\n            background-color: rgba(3, 0, 0, 0.1);\r\n          }\r\n          50% {\r\n            background-color: #c8dfcc;\r\n          }\r\n\r\n          100% {\r\n            background-color: rgba(3, 0, 0, 0.1);\r\n          }\r\n        }\r\n      }\r\n\r\n      &.focused {\r\n        background-color: #d1d1d1;\r\n      }\r\n\r\n      &.locked {\r\n        background-color: $tag-input-locked-tag-bg;\r\n        color: white;\r\n      }\r\n\r\n      .icon {\r\n        display: inline-flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        height: rem-calc(20);\r\n        width: rem-calc(20);\r\n        padding: 0;\r\n        margin-left: rem-calc(8);\r\n        &.remove-btn {\r\n          border: 1px solid $periwinkle;\r\n          color: $periwinkle;\r\n          border-radius: 50%;\r\n          cursor: pointer;\r\n          transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n          &:hover {\r\n            color: white;\r\n            background-color: $periwinkle;\r\n          }\r\n\r\n          &:before {\r\n            @include mdi-icon;\r\n            content: \"\\f156\";\r\n          }\r\n        }\r\n\r\n        &.lock {\r\n          color: white;\r\n          &:before {\r\n            @include mdi-icon;\r\n            content: \"\\f341\";\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  input {\r\n    font-family: inherit;\r\n    border: none;\r\n    height: rem-calc(28);\r\n    padding: 0;\r\n    margin-bottom: rem-calc(8);\r\n    margin-right: rem-calc(4);\r\n    padding-left: rem-calc(8);\r\n    right: 0px;\r\n\r\n    &.hidden {\r\n      display: none;\r\n    }\r\n    &:focus {\r\n      outline: none;\r\n    }\r\n  }\r\n\r\n  .dropdown-wrapper {\r\n    margin: 0;\r\n    padding: 0;\r\n    @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\r\n    @include transition(transform 0.25s ease);\r\n    @include scale($xVal: 1, $yVal: 0);\r\n    @include transformOrigin(center top);\r\n    @include border-radius(3px);\r\n    position: absolute;\r\n    top: calc(100% + 2px);\r\n    right: 0;\r\n    background: #fff;\r\n    z-index: 100;\r\n    width: 100%;\r\n    font-size: rem-calc(14);\r\n\r\n    .dropdown {\r\n      -webkit-overflow-scrolling: touch;\r\n      overflow: auto;\r\n      max-height: rem-calc(200);\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    &.open {\r\n      @include scale($xVal: 1, $yVal: 1);\r\n    }\r\n\r\n    &.upwards {\r\n      top: unset;\r\n      bottom: calc(100% + 2px);\r\n      @include transformOrigin(center bottom);\r\n    }\r\n\r\n    li,\r\n    div {\r\n      display: flex;\r\n      align-items: center;\r\n      padding: 0 rem-calc(16);\r\n      background: #fff;\r\n      list-style: none;\r\n      height: rem-calc(43);\r\n      white-space: pre;\r\n\r\n      &[role=\"option\"],\r\n      &.add-new-btn {\r\n        cursor: pointer;\r\n        color: $periwinkle;\r\n        font-weight: bold;\r\n        width: 100%;\r\n        border: none;\r\n\r\n        &[aria-selected=\"true\"] {\r\n          color: $gray;\r\n          font-style: italic;\r\n          font-weight: normal;\r\n          cursor: unset;\r\n        }\r\n        &:hover:not([aria-selected=\"true\"]),\r\n        &.focused {\r\n          outline: none;\r\n          background: $background;\r\n        }\r\n      }\r\n\r\n      &.help-text {\r\n        color: $charcoal;\r\n        height: auto;\r\n        min-height: rem-calc(43);\r\n        padding-top: rem-calc(4);\r\n        padding-bottom: rem-calc(4);\r\n        white-space: normal;\r\n      }\r\n\r\n      &:not(:last-child) {\r\n        border-bottom: 2px solid rgba(#2e1b46, 0.05);\r\n      }\r\n    }\r\n  }\r\n\r\n  .info-text {\r\n    font-style: italic;\r\n    margin-top: rem-calc(4);\r\n  }\r\n\r\n  .table-wrapper {\r\n    min-height: rem-calc(160);\r\n    overflow: auto;\r\n    margin-top: rem-calc(24);\r\n\r\n    #table {\r\n      width: 100%;\r\n      border-spacing: 0px;\r\n      &.fixed-widths {\r\n        table-layout: fixed;\r\n      }\r\n\r\n      .headers {\r\n        height: rem-calc(40);\r\n        background-color: #eeedf4;\r\n        th {\r\n          text-align: left;\r\n          font-size: rem-calc(12);\r\n          font-weight: 700;\r\n          text-transform: uppercase;\r\n          padding: 0 rem-calc(24);\r\n        }\r\n      }\r\n    }\r\n\r\n    tr {\r\n      // the following colors are in a css-specificity order, do not move\r\n      &:nth-child(even) {\r\n        background-color: $tag-input-row-zebra-bg;\r\n      }\r\n\r\n      &.selected {\r\n        background-color: $tag-input-row-selected-bg;\r\n        // box-shadow to add border without affecting surrounding cell borders\r\n        box-shadow: inset 0 0 0 1px $tag-input-row-selected-border;\r\n        font-weight: 500;\r\n      }\r\n\r\n      &.focused:not(.locked),\r\n      &:hover:not(.locked) {\r\n        background-color: $tag-input-row-focused;\r\n        box-shadow: none;\r\n      }\r\n\r\n      &.locked {\r\n        td {\r\n          cursor: auto;\r\n        }\r\n\r\n        td:first-child {\r\n          .cell-content-wrapper:before {\r\n            @include mdi-icon;\r\n            content: \"\\f33e\";\r\n            margin-right: rem-calc(8);\r\n            color: $tag-input-row-lock-color;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    td {\r\n      height: rem-calc(60);\r\n      vertical-align: middle;\r\n      padding: 0 rem-calc(24);\r\n      cursor: pointer;\r\n      &.focused {\r\n        // from wm-navigation\r\n        box-shadow: inset 0 2px 2px 0 rgb(244 243 246 / 20%), inset 0 2px 2px 0 rgb(0 0 0 / 10%),\r\n          inset 0 0 4px 3px #61279e;\r\n      }\r\n      .cell-content-wrapper.trunc {\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n      }\r\n\r\n      .description {\r\n        display: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  .no-results {\r\n    padding: rem-calc(20) rem-calc(24);\r\n  }\r\n\r\n  .sr-only {\r\n    @include srOnly;\r\n  }\r\n\r\n  #error {\r\n    @include errorMessage;\r\n  }\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  Host,\r\n  Element,\r\n  Prop,\r\n  Listen,\r\n  State,\r\n  Event,\r\n  EventEmitter,\r\n  Watch,\r\n  forceUpdate,\r\n} from \"@stencil/core\";\r\nimport {\r\n  csvToArray,\r\n  debounce,\r\n  generateId,\r\n  hideTooltip,\r\n  intl,\r\n  measureText,\r\n  safeParseJSON,\r\n  shouldOpenUp,\r\n  showTooltip,\r\n} from \"../../global/functions\";\r\n\r\ninterface TablePosition {\r\n  row: number;\r\n  column: number;\r\n}\r\n\r\ninterface MessageConfig {\r\n  addNewHelpText: string;\r\n  selectionHelpText: string;\r\n  tagAreaInstructions: string;\r\n  maxTagsReached: string;\r\n  tagsAdded: string;\r\n}\r\n\r\n@Component({\r\n  tag: \"wm-tag-input\",\r\n  styleUrl: \"wm-tag-input.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class TagInput {\r\n  @Element() el!: HTMLWmTagInputElement;\r\n  private inputEl!: HTMLInputElement;\r\n  private dropdownEl!: HTMLDivElement;\r\n  private tagAreaEl!: HTMLUListElement;\r\n  private liveRegionEl!: HTMLDivElement;\r\n  private fieldWrapperEl!: HTMLDivElement;\r\n\r\n  @Prop() label!: string;\r\n  @Prop() labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\r\n  @Prop({ mutable: true }) options: string = \"\"; // csv\r\n  @Prop({ reflect: true, mutable: true }) selectedTags: string = \"\"; // csv\r\n  @Prop() info?: string;\r\n  @Prop() errorMessage?: string;\r\n  @Prop() addNew: boolean = true;\r\n  @Prop({ mutable: true }) placeholder?: string;\r\n  @Prop() requiredField: boolean = false;\r\n  @Prop() characterLimit: number = 50;\r\n  @Prop() maxTags?: number;\r\n  @Prop() tagInputType: \"dropdown\" | \"table\" = \"dropdown\";\r\n  @Prop() colHeaders!: string;\r\n  @Prop() colWidths?: string;\r\n  @Prop() colWrap?: string;\r\n  @Prop() messageConfig: string = \"\"; // JSON\r\n  @Event() wmTagInputChanged!: EventEmitter<{\r\n    value: string[] | HTMLWmTagInputRowElement[];\r\n    tagChanged: string | HTMLWmTagInputRowElement;\r\n  }>;\r\n\r\n  private uid: string = this.el.id ? this.el.id : generateId();\r\n  private openUp: boolean = false;\r\n  private tooltipVisible: boolean = false;\r\n  @State() focusedListItem!: HTMLLIElement | null;\r\n  @State() focusedTag: HTMLLIElement | null = null;\r\n  @State() tablePosition: TablePosition = { row: 0, column: 1 };\r\n  @State() isExpanded: boolean = false;\r\n  @State() tagsList: string[] = csvToArray(this.selectedTags);\r\n  @State() optionsList: string[] = csvToArray(this.options);\r\n  @State() charCount: number = 0;\r\n  @State() liveRegionMessage = \"\";\r\n\r\n  get focusedElement(): Element | null {\r\n    return this.el.shadowRoot!.activeElement;\r\n  }\r\n  get listItemEls(): HTMLLIElement[] {\r\n    return Array.from(this.dropdownEl.querySelectorAll(\"li\"));\r\n  }\r\n  get tagEls(): HTMLLIElement[] {\r\n    return this.tagAreaEl ? Array.from(this.tagAreaEl.querySelectorAll(\".tag\")) : [];\r\n  }\r\n  get nonLockedTagEls(): HTMLLIElement[] {\r\n    return this.tagEls.filter((tag) => !tag.classList.contains(\"locked\"));\r\n  }\r\n  get optionEls(): HTMLLIElement[] {\r\n    return Array.from(this.dropdownEl.querySelectorAll(\".option\"));\r\n  }\r\n  get wmRowEls(): HTMLWmTagInputRowElement[] {\r\n    return Array.from(this.el.querySelectorAll(\"wm-tag-input-row\"));\r\n  }\r\n  get localRowEls(): HTMLElement[] {\r\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\"tr\"));\r\n  }\r\n  get filteredRows(): HTMLWmTagInputRowElement[] {\r\n    return this.wmRowEls.filter((row) => {\r\n      const colValues = [row.col1, row.col2, row.col3, row.col4].join(\"\").toLowerCase();\r\n      return this.inputEl && this.inputEl.value ? colValues.includes(this.inputEl.value.toLowerCase()) : true;\r\n    });\r\n  }\r\n  get nonLockedTagsList() {\r\n    let list: string[] = [];\r\n\r\n    if (this.tagInputType === \"table\") {\r\n      this.tagsList.forEach((id) => {\r\n        const correspondingRowEl = this.wmRowEls.filter((row) => id === row.id)[0];\r\n        if (!correspondingRowEl.locked) {\r\n          list.push(id);\r\n        }\r\n      });\r\n    } else if (this.tagInputType === \"dropdown\") {\r\n      list = this.tagsList;\r\n    }\r\n\r\n    return list;\r\n  }\r\n  get tagLimitReached(): boolean {\r\n    return !!(this.maxTags && this.tagsList.length >= this.maxTags);\r\n  }\r\n\r\n  get noResultsMessage() {\r\n    return intl.formatMessage({\r\n      id: \"tagInput.noResults\",\r\n      defaultMessage: \"No results match your search.\",\r\n      description: \"Message displayed when a user's search returns empty.\",\r\n    });\r\n  }\r\n\r\n  get componentMessages(): MessageConfig {\r\n    const addNewHelpText = intl.formatMessage({\r\n      id: \"tagInput.addNewHelpText\",\r\n      defaultMessage: \"Press the Enter or Comma key to add a new tag.\",\r\n      description: \"Help text appearing in a dropdown. Use imperative\",\r\n    });\r\n    const selectionHelpText = intl.formatMessage({\r\n      id: \"tagInput.selectionHelpText\",\r\n      defaultMessage: \"Search and select a tag.\",\r\n      description: \"Help text appearing in a dropdown. Use imperative\",\r\n    });\r\n    const maxTagsReachedMessage = intl.formatMessage({\r\n      id: \"tagInput.maxTagsReached\",\r\n      defaultMessage: \"No more tags can be added because the limit has been reached.\",\r\n    });\r\n    const tagAreaInstructions = intl.formatMessage({\r\n      id: \"tagInput.tagAreaInstructions\",\r\n      defaultMessage: \"tag selection. Press Backspace or Delete to remove a tag.\",\r\n    });\r\n    const tagsAddedMessage = intl.formatMessage({\r\n      id: \"tagInput.tagsAdded\",\r\n      defaultMessage: \"Tags added\",\r\n      description: \"For the user to understand how close they are to the tag limit, followed by x/y count\",\r\n    });\r\n\r\n    const defaultConfig: MessageConfig = {\r\n      addNewHelpText: addNewHelpText,\r\n      selectionHelpText: selectionHelpText,\r\n      maxTagsReached: maxTagsReachedMessage,\r\n      tagAreaInstructions: tagAreaInstructions,\r\n      tagsAdded: tagsAddedMessage,\r\n    };\r\n\r\n    const userProvidedConfig = safeParseJSON(this.messageConfig);\r\n\r\n    return userProvidedConfig ? { ...defaultConfig, ...userProvidedConfig } : defaultConfig;\r\n  }\r\n\r\n  get inputMinimumWidth(): number {\r\n    // 150px is the minimum width of the input field, or the length of the placeholder text\r\n    const inputElStyles = getComputedStyle(this.inputEl);\r\n    const tagElStyles = getComputedStyle(this.tagEls[this.tagEls.length - 1]);\r\n    const inputElBuffer = [\r\n      inputElStyles.paddingLeft,\r\n      inputElStyles.paddingRight,\r\n      inputElStyles.marginLeft,\r\n      inputElStyles.marginRight,\r\n      tagElStyles.marginRight,\r\n    ].reduce((prev, curr) => prev + parseInt(curr.replace(\"px\", \"\")), 0);\r\n\r\n    const minimumWidth = Math.max(150, measureText(this.inputEl, this.placeholder!).width + inputElBuffer);\r\n    return minimumWidth;\r\n  }\r\n\r\n  generateTagAddedMessage(tag: string): string {\r\n    return intl.formatMessage(\r\n      {\r\n        id: \"tagInput.tagAdded\",\r\n        defaultMessage: \"{tagName} added.\",\r\n        description: \"A confirmation for adding a tag.\",\r\n      },\r\n      { tagName: tag }\r\n    );\r\n  }\r\n\r\n  generateTagAlreadyAddedMessage(tag: string): string {\r\n    return intl.formatMessage(\r\n      {\r\n        id: \"tagInput.tagAlreadyAdded\",\r\n        defaultMessage: \"{tagName} has already been added.\",\r\n        description: \"An alert for adding a tag that is already present.\",\r\n      },\r\n      { tagName: tag }\r\n    );\r\n  }\r\n\r\n  generateCharacterLimitLabel(characterLimit: number): string {\r\n    return intl.formatMessage(\r\n      {\r\n        id: \"global.characterLimit\",\r\n        defaultMessage: \"{limit, number} characters allowed.\",\r\n        description: \"for screen readers\",\r\n      },\r\n      { limit: characterLimit }\r\n    );\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.placeholder) {\r\n      this.placeholder = this.createPlaceholderDefault(this.addNew, !!this.options);\r\n    }\r\n    if (!this.label) {\r\n      console.error(\"wm-tag-input must have a label property\");\r\n    }\r\n\r\n    this.consolidateSelectedTags();\r\n\r\n    this.el.focus = () => {\r\n      const firstFocusableTag = this.nonLockedTagEls[0];\r\n      if (firstFocusableTag) {\r\n        this.tagAreaEl.focus();\r\n        this.focusTag(firstFocusableTag);\r\n      } else {\r\n        this.inputEl.focus();\r\n      }\r\n    };\r\n\r\n    // on resize of component, trigger componentDidRender -> positionInput\r\n    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());\r\n    resizeObserver.observe(this.el);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // prevent highlighting of pre-selected tags\r\n    this.tagEls.forEach((el) => el.classList.remove(\"highlight\"));\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.positionInput();\r\n  }\r\n\r\n  consolidateSelectedTags() {\r\n    this.tagsList.forEach((tag) => {\r\n      if (!this.includesCaseInsensitive(this.optionsList, tag)) {\r\n        this.options += `${this.options.length > 0 ? \",\" : \"\"}${tag}`;\r\n      }\r\n    });\r\n\r\n    this.optionsList = csvToArray(this.options);\r\n  }\r\n\r\n  createPlaceholderDefault(addNew: boolean, hasOptions: boolean): string {\r\n    const addAndSearchPlaceholder = intl.formatMessage({\r\n      id: \"tagInput.placeholderAddAndSearch\",\r\n      defaultMessage: \"Add or search for a tag\",\r\n      description: \"Placeholder text. Use imperative\",\r\n    });\r\n    const searchPlaceholder = intl.formatMessage({\r\n      id: \"tagInput.placeholderSearch\",\r\n      defaultMessage: \"Search and select a tag\",\r\n      description: \"Placeholder text. Use imperative\",\r\n    });\r\n    const addPlaceholder = intl.formatMessage({\r\n      id: \"tagInput.placeholderAdd\",\r\n      defaultMessage: \"Add a new tag\",\r\n      description: \"Placeholder text. Use imperative\",\r\n    });\r\n\r\n    let placeholder = \"\";\r\n    if (addNew && hasOptions) {\r\n      placeholder = addAndSearchPlaceholder;\r\n    } else if (!addNew && hasOptions) {\r\n      placeholder = searchPlaceholder;\r\n    } else if (addNew) {\r\n      placeholder = addPlaceholder;\r\n    }\r\n    return placeholder;\r\n  }\r\n\r\n  @Watch(\"tagsList\")\r\n  reflectSelectedTags(newValue: string[], oldValue: string[]) {\r\n    const isAddition = newValue.length > oldValue.length;\r\n    let changedTag: string | HTMLWmTagInputRowElement = \"\";\r\n    let selectedTags: string[] | HTMLWmTagInputRowElement[] = this.tagsList;\r\n\r\n    if (isAddition) {\r\n      changedTag = newValue.filter((val) => !oldValue.includes(val))[0];\r\n    } else {\r\n      changedTag = oldValue.filter((val) => !newValue.includes(val))[0];\r\n    }\r\n\r\n    // event emitted by type table uses element references instead of strings\r\n    if (this.tagInputType === \"table\") {\r\n      changedTag = this.wmRowEls.filter((row) => row.id === changedTag)[0];\r\n      selectedTags = this.tagsList.map((id) => this.el.querySelector(`#${id}`) as HTMLWmTagInputRowElement);\r\n    }\r\n\r\n    this.selectedTags = this.listToCSV(this.tagsList);\r\n    let detail = { value: selectedTags, tagChanged: changedTag };\r\n    this.wmTagInputChanged.emit(detail);\r\n  }\r\n\r\n  @Watch(\"errorMessage\")\r\n  handleErrorMessageChange() {\r\n    if (this.errorMessage) {\r\n      this.announce(this.errorMessage);\r\n    }\r\n  }\r\n\r\n  @Listen(\"wmTagInputRowUpdated\")\r\n  handleRowUpdate() {\r\n    forceUpdate(this.el);\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"document\" })\r\n  closeIfNotElOrChild(ev: MouseEvent): void {\r\n    const isntElOrChild = ev.target !== this.el && !this.el.shadowRoot!.contains(ev.target as HTMLElement);\r\n\r\n    if (this.tagInputType === \"dropdown\" && isntElOrChild && this.isExpanded) {\r\n      this.closeDropdown();\r\n    }\r\n  }\r\n\r\n  // From wm-button\r\n  // we need to listen for scroll events during the capture phase because they do not bubble up\r\n  // there can be layouts where the main content has 100vh and overflows\r\n  // in these cases window will register no scroll events unless we catch on they way down\r\n  @Listen(\"scroll\", { target: \"window\", capture: true })\r\n  dismissTooltip() {\r\n    if (this.tooltipVisible) {\r\n      hideTooltip();\r\n      this.tooltipVisible = false;\r\n    }\r\n  }\r\n\r\n  debouncedUpdate = debounce(() => forceUpdate(this.el), 30);\r\n\r\n  handleInputKeyDown(ev: KeyboardEvent) {\r\n    if (/^.$/.test(ev.key) && this.inputEl.value.length >= this.characterLimit) {\r\n      this.announceCharacterLimitWarning(this.inputEl.value.length, this.characterLimit);\r\n    }\r\n\r\n    // prevent keydown triggering on tag area\r\n    ev.stopPropagation();\r\n    switch (ev.key) {\r\n      case \"Enter\":\r\n      case \",\":\r\n        ev.preventDefault();\r\n        this.handleInputEnter();\r\n        break;\r\n      case \"ArrowDown\":\r\n        ev.preventDefault();\r\n        this.handleInputArrowDown();\r\n        break;\r\n      case \"ArrowUp\":\r\n        ev.preventDefault();\r\n        this.handleInputArrowUp();\r\n        break;\r\n      case \"ArrowLeft\":\r\n        ev.preventDefault();\r\n        if (this.tagInputType === \"table\" && this.tablePosition.row) {\r\n          this.moveLeftCell();\r\n        }\r\n        break;\r\n      case \"ArrowRight\":\r\n        ev.preventDefault();\r\n        if (this.tagInputType === \"table\" && this.tablePosition.row) {\r\n          this.moveRightCell();\r\n        }\r\n        break;\r\n      case \"Escape\":\r\n        if (this.tagInputType === \"dropdown\" && this.isExpanded) {\r\n          this.closeDropdown();\r\n        }\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"Backspace\":\r\n        this.handleInputBackspace();\r\n        break;\r\n    }\r\n  }\r\n\r\n  handleInputFocus() {\r\n    if (this.tagInputType === \"dropdown\") {\r\n      this.openDropdown();\r\n      this.clearListItemFocus();\r\n    }\r\n    // force update needed to apply styled state of field-wrapper el\r\n    forceUpdate(this.el);\r\n  }\r\n\r\n  handleInputChanged(value: string) {\r\n    this.charCount = value.length;\r\n\r\n    if (this.tagInputType === \"dropdown\") {\r\n      this.clearListItemFocus();\r\n      if (this.charCount >= this.characterLimit - 5) {\r\n        this.announceCharacterLimitWarning(this.charCount, this.characterLimit);\r\n      }\r\n      if (!this.isExpanded) {\r\n        this.openDropdown();\r\n      }\r\n    } else if (this.tagInputType === \"table\") {\r\n      this.clearCellFocus();\r\n    }\r\n    this.announceExistingOptions();\r\n  }\r\n\r\n  handleInputEnter() {\r\n    if (this.tagInputType === \"dropdown\") {\r\n      if (this.focusedListItem) {\r\n        this.handleListItemClick(this.focusedListItem);\r\n      } else {\r\n        this.submitInput(this.addNew, this.inputEl.value.trim());\r\n      }\r\n    } else if (this.tagInputType === \"table\" && this.tablePosition.row > 0) {\r\n      this.handleTableRowClick(this.localRowEls[this.tablePosition.row].id);\r\n    }\r\n  }\r\n\r\n  submitInput(canAddNew: boolean, value: string) {\r\n    const hasNonWhiteSpaceCharacters = value.match(/\\S/);\r\n    if (canAddNew && hasNonWhiteSpaceCharacters) {\r\n      this.addTag(value);\r\n      this.optionsList = this.addOption(value);\r\n      this.resetInput();\r\n    }\r\n  }\r\n\r\n  handleInputArrowDown() {\r\n    if (this.tagInputType === \"table\") {\r\n      this.moveDownRow();\r\n    } else if (this.tagInputType === \"dropdown\" && this.isExpanded) {\r\n      this.moveDownListItem();\r\n    } else if (this.tagInputType === \"dropdown\") {\r\n      this.openDropdown();\r\n    }\r\n  }\r\n\r\n  handleInputArrowUp() {\r\n    if (this.tagInputType === \"table\") {\r\n      this.moveUpRow();\r\n    } else if (this.tagInputType === \"dropdown\" && this.isExpanded) {\r\n      this.moveUpListItem();\r\n    } else if (this.tagInputType === \"dropdown\") {\r\n      this.openDropdown();\r\n    }\r\n  }\r\n\r\n  handleInputBackspace() {\r\n    if (this.inputEl.value === \"\" && this.tagsList.length > 0) {\r\n      // wait for events to finish firing before redirecting focus\r\n      // prevents double input in input area and tag area\r\n      window.requestAnimationFrame(() => {\r\n        if (this.nonLockedTagsList.length > 0) {\r\n          this.tagAreaEl.focus();\r\n          this.focusTag(this.tagEls[this.tagEls.length - 1]);\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  handleListItemKeyDown(ev: KeyboardEvent) {\r\n    const typedEvTarget = ev.target as HTMLElement;\r\n\r\n    switch (ev.key) {\r\n      case \"Enter\":\r\n      case \" \":\r\n        ev.preventDefault();\r\n        typedEvTarget.click();\r\n        break;\r\n      case \"ArrowDown\":\r\n        ev.preventDefault();\r\n        this.moveDownListItem();\r\n        break;\r\n      case \"ArrowUp\":\r\n        ev.preventDefault();\r\n        this.moveUpListItem();\r\n        break;\r\n      case \"Escape\":\r\n        if (this.focusedElement !== this.inputEl) {\r\n          this.inputEl.focus();\r\n        } else if (this.tagInputType === \"dropdown\") {\r\n          this.closeDropdown();\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  handleListItemClick(item: HTMLElement) {\r\n    const tag = item.dataset.option!.trim() || \"\";\r\n\r\n    if (this.includesCaseInsensitive(this.tagsList, tag)) {\r\n      this.announce(this.generateTagAlreadyAddedMessage(tag));\r\n    } else {\r\n      this.resetInput();\r\n      this.addTag(tag);\r\n      this.optionsList = this.addOption(tag);\r\n      this.focusedListItem = null;\r\n    }\r\n  }\r\n\r\n  handleTableRowClick(rowId: string) {\r\n    const referencedRow = this.el.querySelector(`#${rowId}`) as HTMLWmTagInputRowElement;\r\n    const isLocked = referencedRow.locked;\r\n\r\n    if (!isLocked) {\r\n      if (this.includesCaseInsensitive(this.tagsList, rowId)) {\r\n        this.removeTag(rowId);\r\n      } else if (!this.tagLimitReached) {\r\n        this.addTag(rowId);\r\n        this.resetInput();\r\n      }\r\n    }\r\n  }\r\n\r\n  handleTagAreaKeyDown(ev: KeyboardEvent) {\r\n    switch (ev.key) {\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        ev.preventDefault();\r\n        this.moveLeftTag();\r\n        break;\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        ev.preventDefault();\r\n        this.moveRightTag();\r\n        break;\r\n      case \"Backspace\":\r\n      case \"Delete\":\r\n        this.handleTagAreaDelete();\r\n        break;\r\n    }\r\n  }\r\n\r\n  handleTagAreaDelete() {\r\n    const isLocked = this.focusedTag && this.focusedTag.classList.contains(\"locked\");\r\n\r\n    if (this.focusedTag && this.focusedTag.dataset.tag && !isLocked) {\r\n      this.removeTag(this.focusedTag.dataset.tag);\r\n\r\n      if (this.nonLockedTagsList.length === 0) {\r\n        // focus input if no tags are left\r\n        this.inputEl.focus();\r\n      } else if (this.focusedTag === this.tagEls[this.tagEls.length - 1]) {\r\n        // reassign focus if removing the last tag but there are still tags remaining\r\n        this.focusedTag = this.tagEls[this.tagEls.length - 2];\r\n        this.focusTag(this.focusedTag);\r\n      }\r\n    }\r\n  }\r\n\r\n  handleBlur(ev: FocusEvent, component: HTMLElement) {\r\n    const isntElOrChild =\r\n      ev.relatedTarget !== component && !this.el.shadowRoot!.contains(ev.relatedTarget as HTMLElement);\r\n\r\n    this.dismissTooltip();\r\n    this.clearCellFocus();\r\n\r\n    if (isntElOrChild) {\r\n      this.fieldWrapperEl.classList.remove(\"focused\");\r\n      if (this.tagInputType === \"dropdown\") {\r\n        this.closeDropdown();\r\n      }\r\n    }\r\n  }\r\n\r\n  handleCellMouseEnter(ev: MouseEvent) {\r\n    const cell = ev.target as HTMLElement;\r\n    const contentWrapper = cell.querySelector(\".cell-content-wrapper\")!;\r\n    const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;\r\n\r\n    if (isTruncated) {\r\n      // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text\r\n      showTooltip(\"bottom\", cell, cell.innerText!);\r\n      this.tooltipVisible = true;\r\n    }\r\n  }\r\n\r\n  handleTagAreaFocus() {\r\n    if (this.tagInputType === \"dropdown\") {\r\n      this.closeDropdown();\r\n    }\r\n\r\n    const firstFocusableTag = this.nonLockedTagEls[0];\r\n    firstFocusableTag && this.focusTag(firstFocusableTag);\r\n  }\r\n\r\n  handleRemoveButtonClick(tag: string) {\r\n    this.moveLeftTag();\r\n    this.removeTag(tag);\r\n  }\r\n\r\n  moveDownListItem() {\r\n    if (this.listItemEls.length > 0) {\r\n      const firstListItem = this.listItemEls[0];\r\n\r\n      if (!this.focusedListItem) {\r\n        this.focusListItem(firstListItem);\r\n      } else if (this.focusedListItem.nextElementSibling) {\r\n        this.focusListItem(this.focusedListItem.nextElementSibling as HTMLLIElement);\r\n      } else {\r\n        this.focusListItem(firstListItem);\r\n      }\r\n    }\r\n  }\r\n\r\n  moveUpListItem() {\r\n    if (this.listItemEls.length > 0) {\r\n      const lastListItem = this.listItemEls[this.listItemEls.length - 1];\r\n\r\n      if (!this.focusedListItem) {\r\n        this.focusListItem(lastListItem);\r\n      } else if (this.focusedListItem.previousElementSibling) {\r\n        this.focusListItem(this.focusedListItem.previousElementSibling as HTMLLIElement);\r\n      } else {\r\n        this.clearListItemFocus();\r\n      }\r\n    }\r\n  }\r\n\r\n  moveDownRow() {\r\n    if (this.filteredRows.length > 0) {\r\n      if (this.tablePosition.row === 0) {\r\n        this.tablePosition.row = 1;\r\n      } else if (this.tablePosition.row === this.filteredRows.length) {\r\n        this.tablePosition.row = 1;\r\n      } else {\r\n        this.tablePosition.row++;\r\n      }\r\n\r\n      // skip locked rows\r\n      const rowToFocus = this.wmRowEls[this.tablePosition.row - 1] as HTMLWmTagInputRowElement;\r\n      if (rowToFocus.locked) {\r\n        this.moveDownRow();\r\n      } else {\r\n        this.focusCell(this.tablePosition);\r\n      }\r\n    }\r\n  }\r\n\r\n  moveUpRow() {\r\n    if (this.filteredRows.length > 0) {\r\n      if (this.tablePosition.row === 0) {\r\n        this.tablePosition.row = this.filteredRows.length;\r\n      } else if (this.tablePosition.row === 1) {\r\n        this.tablePosition.row = 0;\r\n      } else {\r\n        this.tablePosition.row--;\r\n      }\r\n\r\n      // skip locked rows\r\n      const rowToFocus = this.wmRowEls[this.tablePosition.row - 1] as HTMLWmTagInputRowElement;\r\n      if (rowToFocus && rowToFocus.locked) {\r\n        this.moveUpRow();\r\n      } else if (rowToFocus) {\r\n        this.focusCell(this.tablePosition);\r\n      } else {\r\n        this.clearCellFocus();\r\n      }\r\n    }\r\n  }\r\n\r\n  moveLeftCell() {\r\n    if (this.tablePosition.column != 1) {\r\n      this.tablePosition.column--;\r\n      this.focusCell(this.tablePosition);\r\n    }\r\n  }\r\n\r\n  moveRightCell() {\r\n    const numCols = csvToArray(this.colHeaders).length;\r\n\r\n    if (this.tablePosition.column < numCols) {\r\n      this.tablePosition.column++;\r\n      this.focusCell(this.tablePosition);\r\n    }\r\n  }\r\n\r\n  moveLeftTag() {\r\n    const lastTag = this.tagEls[this.tagEls.length - 1];\r\n    if (this.focusedTag && this.tagEls.includes(this.focusedTag.previousElementSibling as HTMLLIElement)) {\r\n      this.focusedTag = this.focusedTag.previousElementSibling as HTMLLIElement;\r\n    } else {\r\n      this.focusedTag = lastTag;\r\n    }\r\n    // skip locked tags\r\n    if (this.focusedTag.classList.contains(\"locked\") && this.nonLockedTagEls.length > 0) {\r\n      this.moveLeftTag();\r\n    } else {\r\n      this.focusTag(this.focusedTag);\r\n    }\r\n  }\r\n\r\n  moveRightTag() {\r\n    const firstTag = this.tagEls[0];\r\n    if (this.focusedTag && this.tagEls.includes(this.focusedTag.nextElementSibling as HTMLLIElement)) {\r\n      this.focusedTag = this.focusedTag.nextElementSibling as HTMLLIElement;\r\n    } else {\r\n      this.focusedTag = firstTag;\r\n    }\r\n    // skip locked tags\r\n    if (this.focusedTag.classList.contains(\"locked\")) {\r\n      this.moveRightTag();\r\n    } else {\r\n      this.focusTag(this.focusedTag);\r\n    }\r\n  }\r\n\r\n  addOption(option: string): string[] {\r\n    let newOptionsList = this.optionsList;\r\n    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, option);\r\n    if (!optionAlreadyExists) {\r\n      newOptionsList = newOptionsList.concat(option);\r\n    }\r\n    return newOptionsList;\r\n  }\r\n\r\n  removeOption(option: string) {\r\n    this.optionsList = this.filterCaseInsensitive(this.optionsList, option);\r\n  }\r\n\r\n  addTag(tag: string): void {\r\n    let newTagsList = this.tagsList;\r\n    const tagAlreadyAdded = this.includesCaseInsensitive(this.tagsList, tag);\r\n    const tagExistsAsOption = this.optionsList.filter((x) => x.toLowerCase() === tag.toLowerCase())[0];\r\n\r\n    if (!tagAlreadyAdded) {\r\n      let textToAnnounce = tag;\r\n      if (this.tagInputType === \"table\") {\r\n        const referencedRow = this.el.querySelector(`#${tag}`) as HTMLWmTagInputRowElement;\r\n        textToAnnounce = referencedRow.col1!;\r\n      }\r\n      this.announce(this.generateTagAddedMessage(textToAnnounce));\r\n      this.tagsList = newTagsList.concat(tagExistsAsOption || tag);\r\n      // if maxTags has been reached, focus should go to the tagArea\r\n      if (this.tagLimitReached) {\r\n        this.tagAreaEl.focus();\r\n      }\r\n    }\r\n  }\r\n\r\n  removeTag(tag: string) {\r\n    let textToAnnounce = tag;\r\n    if (this.tagInputType === \"table\") {\r\n      const referencedRow = this.el.querySelector(`#${tag}`) as HTMLWmTagInputRowElement;\r\n      textToAnnounce = referencedRow.col1!;\r\n    }\r\n    const tagRemovedMessage = intl.formatMessage(\r\n      { id: \"tagInput.tagRemoved\", defaultMessage: \"{tag} removed\" },\r\n      { tag: textToAnnounce }\r\n    );\r\n    this.announce(tagRemovedMessage);\r\n    this.tagsList = this.filterCaseInsensitive(this.tagsList, tag);\r\n\r\n    if (this.tagInputType === \"dropdown\") {\r\n      // if a tag was introduced by the user, also remove it from the dropdown options\r\n      const devOptionsList = csvToArray(this.options);\r\n      if (this.includesCaseInsensitive(this.optionsList, tag) && !this.includesCaseInsensitive(devOptionsList, tag)) {\r\n        this.removeOption(tag);\r\n      }\r\n    }\r\n  }\r\n\r\n  focusListItem(item: HTMLLIElement): void {\r\n    this.focusedListItem = item;\r\n    this.inputEl.setAttribute(\"aria-activedescendant\", this.focusedListItem.id);\r\n    item.scrollIntoView({ block: \"nearest\" });\r\n  }\r\n\r\n  focusTag(element: HTMLLIElement): void {\r\n    if (element.classList.contains(\"locked\")) {\r\n      this.focusedTag = null;\r\n      this.tagAreaEl.setAttribute(\"aria-activedescendant\", \"\");\r\n    } else {\r\n      this.focusedTag = element;\r\n      this.tagAreaEl.setAttribute(\"aria-activedescendant\", this.focusedTag.id);\r\n    }\r\n  }\r\n\r\n  focusCell(position: TablePosition) {\r\n    this.clearCellFocus(false);\r\n\r\n    if (position.row) {\r\n      const rowToFocus = this.localRowEls[position.row];\r\n      const rowCells = rowToFocus.querySelectorAll(\"td\");\r\n      const cellToFocus = rowCells[position.column - 1];\r\n      const contentWrapper = cellToFocus.querySelector(\".cell-content-wrapper\")!;\r\n      const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;\r\n\r\n      rowToFocus.classList.add(\"focused\");\r\n      cellToFocus.classList.add(\"focused\");\r\n      cellToFocus.scrollIntoView({ block: \"nearest\" });\r\n      this.inputEl.setAttribute(\"aria-activedescendant\", cellToFocus.id);\r\n\r\n      this.dismissTooltip();\r\n      if (isTruncated) {\r\n        // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text\r\n        showTooltip(\"bottom\", cellToFocus, cellToFocus.innerText!);\r\n        this.tooltipVisible = true;\r\n      }\r\n    }\r\n  }\r\n\r\n  clearTagFocus() {\r\n    this.tagAreaEl.setAttribute(\"aria-activedescendant\", \"\");\r\n    this.focusedTag = null;\r\n  }\r\n\r\n  clearCellFocus(resetPosition: boolean = true) {\r\n    this.inputEl.setAttribute(\"aria-activedescendant\", \"\");\r\n    if (resetPosition) {\r\n      this.tablePosition = { row: 0, column: 1 };\r\n    }\r\n\r\n    this.localRowEls.forEach((row) => {\r\n      row.classList.remove(\"focused\");\r\n      row.querySelectorAll(\"td\").forEach((cell) => {\r\n        cell.classList.remove(\"focused\");\r\n      });\r\n    });\r\n  }\r\n\r\n  openDropdown() {\r\n    // given an offset of -2px because the dropdown is transformed downwards to avoid overlapping the focus border\r\n    this.openUp = shouldOpenUp(this.el, this.dropdownEl, this.el.clientHeight, -2);\r\n    this.isExpanded = true;\r\n  }\r\n\r\n  closeDropdown() {\r\n    this.clearListItemFocus();\r\n    this.isExpanded = false;\r\n  }\r\n\r\n  clearListItemFocus() {\r\n    this.focusedListItem = null;\r\n    this.inputEl.setAttribute(\"aria-activedescendant\", \"\");\r\n\r\n    this.listItemEls.forEach((el) => {\r\n      el.classList.remove(\"focused\");\r\n    });\r\n  }\r\n\r\n  resetInput() {\r\n    this.charCount = 0;\r\n    this.inputEl.value = \"\";\r\n  }\r\n\r\n  announce(message: string) {\r\n    // \\u00A0 is a non-breaking space character, which causes the message to be read as a new one\r\n    if (this.liveRegionEl.textContent === message) {\r\n      message += \"\\u00A0\";\r\n    }\r\n    this.liveRegionMessage = message;\r\n  }\r\n\r\n  announceExistingOptions() {\r\n    // request animation frame to wait for re-rendering of filtered options\r\n    window.requestAnimationFrame(() => {\r\n      let numResults = 0;\r\n\r\n      if (this.tagInputType === \"dropdown\") {\r\n        numResults = this.optionEls.length;\r\n      } else if (this.tagInputType === \"table\") {\r\n        numResults = this.filteredRows.length;\r\n      }\r\n\r\n      const existingOptionsMessage = intl.formatMessage(\r\n        {\r\n          id: \"tagInput.existingOptions\",\r\n          defaultMessage: \"{num, plural, one {1 existing option.} other {# existing options.}}\",\r\n        },\r\n        { num: numResults }\r\n      );\r\n\r\n      this.announce(existingOptionsMessage);\r\n    });\r\n  }\r\n\r\n  announceCharacterLimitWarning(charCount: number, charLimit: number) {\r\n    const charactersEnteredMessage = intl.formatMessage(\r\n      {\r\n        id: \"global.charactersEntered\",\r\n        defaultMessage: \"{x, number} of {y, number} characters entered.\",\r\n        description: \"for screen readers\",\r\n      },\r\n      { x: charCount, y: charLimit }\r\n    );\r\n\r\n    const characterLimitReachedMessage = intl.formatMessage({\r\n      id: \"global.characterLimitReached\",\r\n      defaultMessage: \"No additional characters will be entered.\",\r\n      description: \"for screen readers\",\r\n    });\r\n\r\n    this.announce(`${charactersEnteredMessage}${charCount >= charLimit ? \" \" + characterLimitReachedMessage : \"\"}`);\r\n  }\r\n\r\n  positionInput() {\r\n    const lastTag = this.tagEls[this.tagEls.length - 1];\r\n    // default placement to fall back to when no tags are present, or not enough space is available\r\n    this.inputEl.style.position = \"static\";\r\n    this.inputEl.style.width = \"100%\";\r\n\r\n    if (lastTag) {\r\n      const spaceAvailable = this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right;\r\n      if (spaceAvailable >= this.inputMinimumWidth) {\r\n        // because the input has right: 0px\r\n        // all thats needed to properly place it is setting position: absolute, top, and width\r\n        this.inputEl.style.position = \"absolute\";\r\n        this.inputEl.style.top = lastTag.offsetTop.toString() + \"px\";\r\n        this.inputEl.style.width =\r\n          (this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right - 8).toString() + \"px\";\r\n      }\r\n    }\r\n  }\r\n\r\n  /// Helpers\r\n\r\n  listToCSV(list: string[]): string {\r\n    return list.join(\",\");\r\n  }\r\n\r\n  includesCaseInsensitive(list: string[], element: string): boolean {\r\n    const lowercaseList = list.map((str) => str.toLowerCase());\r\n    return lowercaseList.includes(element.toLowerCase());\r\n  }\r\n\r\n  filterCaseInsensitive(list: string[], element: string): string[] {\r\n    return list.filter((x) => x.toLowerCase() !== element.toLowerCase());\r\n  }\r\n\r\n  sortCaseInsensitive(list: string[]) {\r\n    // The vanilla .sort method places words that start with capital letters above others (ASCII order)\r\n    // so we need to pass in our own compare function to sort case-insensitive\r\n    return list.sort((a, b) => {\r\n      a = a.toLowerCase();\r\n      b = b.toLowerCase();\r\n      return a > b ? 1 : a < b ? -1 : 0;\r\n    });\r\n  }\r\n\r\n  /// Renders\r\n\r\n  renderTags() {\r\n    let lockedTags: HTMLLIElement[] = [];\r\n    let unlockedTags: HTMLLIElement[] = [];\r\n\r\n    this.tagsList.forEach((tag, idx) => {\r\n      const id = `tag${idx + 1}`;\r\n      let tagText = \"\";\r\n      let isLocked = false;\r\n\r\n      if (this.tagInputType === \"dropdown\") {\r\n        tagText = tag;\r\n      } else if (this.tagInputType === \"table\") {\r\n        // display table tags using col1 of the row with the same id\r\n        // if one can't be found, display as empty\r\n        const referencedRow = this.el.querySelector(`#${tag}`) as HTMLWmTagInputRowElement;\r\n        tagText = referencedRow ? referencedRow.col1! : \"\";\r\n        isLocked = referencedRow ? referencedRow.locked : false;\r\n      }\r\n\r\n      // make sure locked tags always appear in front of list\r\n      const targetList = isLocked ? lockedTags : unlockedTags;\r\n      targetList.push(\r\n        <li\r\n          id={id}\r\n          class={`tag highlight ${this.focusedTag && this.focusedTag.id === id ? \"focused\" : \"\"} ${\r\n            isLocked ? \"locked\" : \"\"\r\n          }`}\r\n          data-tag={tag}\r\n          role=\"option\"\r\n        >\r\n          {tagText}\r\n          {isLocked ? (\r\n            <div class=\"icon lock\"></div>\r\n          ) : (\r\n            <button class=\"icon remove-btn\" tabIndex={-1} onClick={() => this.handleRemoveButtonClick(tag)}></button>\r\n          )}\r\n        </li>\r\n      );\r\n    });\r\n\r\n    return [...lockedTags, ...unlockedTags];\r\n  }\r\n\r\n  renderDropdown() {\r\n    return (\r\n      <div\r\n        class={`dropdown-wrapper ${this.isExpanded ? \"open\" : \"\"} ${this.openUp ? \"upwards\" : \"\"}`}\r\n        ref={(el) => (this.dropdownEl = el as HTMLDivElement)}\r\n      >\r\n        <div id=\"help-text\" class=\"help-text\">\r\n          {this.renderHelpText()}\r\n        </div>\r\n        <ul\r\n          class=\"dropdown\"\r\n          id=\"dropdown\"\r\n          role=\"listbox\"\r\n          aria-multiselectable=\"true\"\r\n          aria-expanded={this.isExpanded ? \"true\" : false}\r\n          aria-label={this.label}\r\n          tabindex={-1}\r\n        >\r\n          {this.inputEl && this.renderAddNewButton()}\r\n          {this.renderListItems(this.optionsList)}\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderListItems(optionsList: string[]) {\r\n    optionsList = this.sortCaseInsensitive(optionsList);\r\n\r\n    // filter by input\r\n    if (this.inputEl && this.inputEl.value) {\r\n      optionsList = this.optionsList.filter((option) =>\r\n        option.toLowerCase().includes(this.inputEl.value.toLowerCase())\r\n      );\r\n    }\r\n\r\n    return optionsList.map((option, idx) => {\r\n      const id = `option${idx + 1}`;\r\n      const isFocused = this.focusedListItem && this.focusedListItem.id === id;\r\n      const isSelected = this.includesCaseInsensitive(this.tagsList, option);\r\n\r\n      return (\r\n        <li\r\n          class={`option ${isFocused ? \"focused\" : \"\"}`}\r\n          role=\"option\"\r\n          id={id}\r\n          data-option={option}\r\n          aria-selected={isSelected ? \"true\" : \"false\"}\r\n          aria-disabled={isSelected ? \"true\" : \"false\"}\r\n          onKeyDown={(ev) => this.handleListItemKeyDown(ev)}\r\n          onBlur={(ev) => this.handleBlur(ev, this.el)}\r\n          onClick={(ev) => this.handleListItemClick(ev.target as HTMLElement)}\r\n        >\r\n          {option}\r\n        </li>\r\n      );\r\n    });\r\n  }\r\n\r\n  renderAddNewButton() {\r\n    const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\\S/);\r\n    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, this.inputEl.value.trim());\r\n    if (this.addNew && hasNonWhiteSpaceCharacters && !optionAlreadyExists) {\r\n      const id = `add-new-btn`;\r\n      const isFocused = this.focusedListItem && this.focusedListItem.id === id;\r\n      return (\r\n        <li\r\n          role=\"option\"\r\n          class={`add-new-btn ${isFocused ? \"focused\" : \"\"}`}\r\n          id={id}\r\n          data-option={this.inputEl.value}\r\n          onKeyDown={(ev) => this.handleListItemKeyDown(ev)}\r\n          onBlur={(ev) => this.handleBlur(ev, this.el)}\r\n          onClick={(ev) => this.handleListItemClick(ev.target as HTMLElement)}\r\n          tabIndex={isFocused ? 0 : -1}\r\n        >\r\n          {`Add \"${this.inputEl.value.trim()}\"`}\r\n        </li>\r\n      );\r\n    } else return \"\";\r\n  }\r\n\r\n  renderHelpText() {\r\n    let helpText = \"\";\r\n\r\n    if (this.optionsList.length > 0) {\r\n      helpText += this.componentMessages.selectionHelpText;\r\n    }\r\n    if (this.addNew) {\r\n      helpText += \" \" + this.componentMessages.addNewHelpText;\r\n    }\r\n\r\n    return helpText;\r\n  }\r\n\r\n  renderTagCounter() {\r\n    if (this.maxTags) {\r\n      return (\r\n        <div class=\"lower-row\">\r\n          <div id=\"max-tags\">\r\n            {`${this.componentMessages.tagsAdded}: ${this.tagsList.length}/${this.maxTags}`}\r\n            {this.tagLimitReached && ` - ${this.componentMessages.maxTagsReached}`}\r\n          </div>\r\n        </div>\r\n      );\r\n    }\r\n  }\r\n\r\n  renderTable() {\r\n    return (\r\n      <div class=\"table-wrapper\" onScroll={() => this.dismissTooltip()}>\r\n        <table\r\n          id=\"table\"\r\n          role=\"grid\"\r\n          class={`${this.colWidths ? \"fixed-widths\" : \"\"}`}\r\n          aria-label={this.label}\r\n          aria-multiselectable=\"true\"\r\n        >\r\n          {this.renderTableHeaders()}\r\n          {this.filteredRows.length ? this.renderTableRows() : <div class=\"no-results\">{this.noResultsMessage}</div>}\r\n        </table>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderTableHeaders() {\r\n    return (\r\n      <tr class=\"headers\" role=\"row\">\r\n        {csvToArray(this.colHeaders).map((header, idx) => {\r\n          let overflowRule = \"wrap\";\r\n          if (this.colWrap && csvToArray(this.colWrap)[idx]) {\r\n            overflowRule = csvToArray(this.colWrap)[idx];\r\n          }\r\n          return (\r\n            <th\r\n              class={`header-cell ${overflowRule}`}\r\n              role=\"columnheader\"\r\n              // @ts-ignore\r\n              width={this.colWidths ? csvToArray(this.colWidths)[idx] : \"\"}\r\n            >\r\n              {header}\r\n            </th>\r\n          );\r\n        })}\r\n      </tr>\r\n    );\r\n  }\r\n\r\n  renderTableRows() {\r\n    return this.filteredRows.map((row) => {\r\n      const isSelected: boolean = this.includesCaseInsensitive(this.tagsList, row.id);\r\n\r\n      return (\r\n        <tr\r\n          id={row.id}\r\n          class={`${row.locked ? \"locked\" : \"\"} ${isSelected ? \"selected\" : \"\"}`}\r\n          role=\"row\"\r\n          onClick={() => this.handleTableRowClick(row.id)}\r\n        >\r\n          {this.renderTableCells(row)}\r\n        </tr>\r\n      );\r\n    });\r\n  }\r\n\r\n  renderTableCells(row: HTMLWmTagInputRowElement) {\r\n    const colValues = [row.col1, row.col2, row.col3, row.col4].filter((val) => !!val);\r\n    const isSelected: boolean = this.includesCaseInsensitive(this.tagsList, row.id);\r\n\r\n    return colValues.map((val, idx) => {\r\n      const localId = `${row.id}-col${idx + 1}`;\r\n      let overflowRule = \"wrap\";\r\n      if (this.colWrap && csvToArray(this.colWrap)[idx]) {\r\n        overflowRule = csvToArray(this.colWrap)[idx];\r\n      }\r\n\r\n      return (\r\n        <td\r\n          id={localId}\r\n          role=\"gridcell\"\r\n          aria-describedby={`${localId}-description`}\r\n          aria-selected={isSelected.toString()}\r\n          onMouseEnter={(ev) => this.handleCellMouseEnter(ev)}\r\n          onMouseLeave={() => this.dismissTooltip()}\r\n        >\r\n          <div class={`cell-content-wrapper ${overflowRule}`}>{val}</div>\r\n          <div class=\"description\" id={`${localId}-description`}>\r\n            {row.locked ? \"locked\" : \"\"}\r\n          </div>\r\n        </td>\r\n      );\r\n    });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host id={this.uid}>\r\n        <div class={`wrapper label-${this.labelPosition} ${this.errorMessage ? \"invalid\" : \"\"}`}>\r\n          <div class=\"label-wrapper\">\r\n            <label class=\"label\" htmlFor={`input${this.uid}`}>\r\n              {this.label}\r\n              {this.requiredField && (\r\n                <span class=\"required\" aria-hidden=\"true\">\r\n                  *\r\n                </span>\r\n              )}\r\n            </label>\r\n          </div>\r\n          <div\r\n            class={`field-wrapper ${this.focusedElement ? \"focused\" : \"\"} ${this.errorMessage ? \"invalid\" : \"\"}`}\r\n            ref={(el) => (this.fieldWrapperEl = el as HTMLDivElement)}\r\n          >\r\n            <div class=\"upper-row\">\r\n              <div class=\"tags-and-input-wrapper\">\r\n                {this.tagsList.length > 0 && (\r\n                  <ul\r\n                    ref={(el) => (this.tagAreaEl = el as HTMLUListElement)}\r\n                    class=\"tag-area\"\r\n                    role=\"listbox\"\r\n                    aria-activedescendant=\"\"\r\n                    aria-orientation=\"horizontal\"\r\n                    aria-label={`${this.label} ${\r\n                      this.tagsList.length > 0 ? this.componentMessages.tagAreaInstructions : \"\"\r\n                    }`}\r\n                    tabindex={this.nonLockedTagsList.length > 0 ? 0 : -1}\r\n                    aria-describedby={`info max-tags`}\r\n                    onFocus={() => this.handleTagAreaFocus()}\r\n                    onBlur={(ev) => {\r\n                      this.clearTagFocus();\r\n                      this.handleBlur(ev, this.el);\r\n                    }}\r\n                    onKeyDown={(ev) => this.handleTagAreaKeyDown(ev)}\r\n                  >\r\n                    {this.renderTags()}\r\n                  </ul>\r\n                )}\r\n                <input\r\n                  id={`input${this.uid}`}\r\n                  class={this.tagLimitReached ? \"hidden\" : \"\"}\r\n                  role=\"combobox\"\r\n                  ref={(el) => (this.inputEl = el as HTMLInputElement)}\r\n                  autocomplete=\"off\"\r\n                  aria-required={this.requiredField ? \"true\" : null}\r\n                  aria-controls={this.tagInputType}\r\n                  aria-describedby={`help-text${this.errorMessage ? \" error \" : \"\"}`}\r\n                  aria-label={`${this.label} ${\r\n                    this.tagInputType === \"dropdown\" ? this.generateCharacterLimitLabel(this.characterLimit) : \"\"\r\n                  }`}\r\n                  aria-expanded={this.tagInputType === \"dropdown\" ? this.isExpanded.toString() : null}\r\n                  placeholder={this.placeholder}\r\n                  maxLength={this.tagInputType === \"dropdown\" ? this.characterLimit : undefined}\r\n                  onInput={() => this.handleInputChanged(this.inputEl.value)}\r\n                  onBlur={(ev) => {\r\n                    this.handleBlur(ev, this.el);\r\n                  }}\r\n                  onFocus={() => this.handleInputFocus()}\r\n                  onKeyDown={(ev) => this.handleInputKeyDown(ev)}\r\n                ></input>\r\n              </div>\r\n              {this.tagInputType === \"dropdown\" && (\r\n                <div class=\"character-count\">\r\n                  {this.charCount}/{this.characterLimit}\r\n                </div>\r\n              )}\r\n            </div>\r\n            {this.renderTagCounter()}\r\n            {this.tagInputType === \"dropdown\" && this.renderDropdown()}\r\n          </div>\r\n          {this.info && (\r\n            <div id=\"info\" class=\"info-text\">\r\n              {this.info}\r\n            </div>\r\n          )}\r\n          {this.errorMessage && <div id=\"error\">{this.errorMessage}</div>}\r\n          <div\r\n            class=\"sr-only\"\r\n            aria-live=\"assertive\"\r\n            ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\r\n            aria-atomic=\"true\"\r\n          >\r\n            {this.liveRegionMessage}\r\n          </div>\r\n          {this.tagInputType === \"table\" && this.renderTable()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/p-64f15a9e.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-7b2fc615.system.js","./p-bc28c815.system.js"],(function(e){"use strict";var t,r,i,a,n,o,s,l;return{setters:[function(e){t=e.r;r=e.c;i=e.h;a=e.H;n=e.g},function(e){o=e.i;s=e.g;l=e.e}],execute:function(){var p=':host,wm-input{font-family:inherit;width:100%}:host *,wm-input *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper,wm-input .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-input .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-input .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-input .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-input .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-input .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label,wm-input .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-input .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-input .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f026";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-input .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-input .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper,wm-input .wrapper .inner-wrapper{width:100%}:host .wrapper .inputfield-wrapper,wm-input .wrapper .inputfield-wrapper{height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:-ms-flexbox;display:flex}:host .wrapper .character-count,wm-input .wrapper .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:rgba(74, 74, 74, 0.05);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .wrapper input,wm-input .wrapper input{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:none;font-family:inherit;font-size:0.875rem;height:100%;-ms-flex:1;flex:1;padding:0.75rem 1rem;width:100%}:host .wrapper input:disabled,wm-input .wrapper input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper input:focus,wm-input .wrapper input:focus{outline:none}:host .wrapper .info,wm-input .wrapper .info{font-style:italic;line-height:100%;margin:4px 0}:host .wrapper.invalid .inputfield-wrapper,wm-input .wrapper.invalid .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}:host .wrapper.invalid .error-message,wm-input .wrapper.invalid .error-message{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;line-height:100%}:host .wrapper:focus .inputfield-wrapper,:host .wrapper.focus .inputfield-wrapper,wm-input .wrapper:focus .inputfield-wrapper,wm-input .wrapper.focus .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}:host .sr-only,wm-input .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}';var u=e("wm_input",function(){function e(e){t(this,e);this.wmInputValueChanged=r(this,"wmInputValueChanged",7);this.uid="";this.previousBlurredValue="";this.numberErrorMessage=o.formatMessage({id:"input.numberError",defaultMessage:"Please enter a valid number."});this.label=undefined;this.labelPosition="top";this.value="";this.disabled=false;this.info=undefined;this.placeholder="";this.requiredField=false;this.requiredFieldMessage=undefined;this.errorMessage=undefined;this.characterLimit=undefined;this.preventValidation=undefined;this.type="text";this.step=1;this.min=undefined;this.max=undefined;this.announcement="";this.displayedErrorMessage=""}Object.defineProperty(e.prototype,"charCount",{get:function(){return this.value.length},enumerable:false,configurable:true});e.prototype.componentWillLoad=function(){this.uid=this.el.id?this.el.id:s();if(!this.label){console.error("wm-input requires the label property")}};e.prototype.componentDidLoad=function(){if(this.value){this.inputEl.value=this.value;this.previousBlurredValue=this.inputEl.value}};e.prototype.handleErrorMessage=function(e){this.displayedErrorMessage=e};e.prototype.handleKeyDown=function(e){var t=e.ctrlKey||e.metaKey||e.altKey;var r=/^.$/.test(e.key)&&!t;var i=r&&this.characterLimit&&this.inputEl.value.length>=this.characterLimit;if(i){this.announce(this.generateCharacterLimitWarning(this.charCount,this.characterLimit))}};e.prototype.handleBlur=function(e){if(this.value!==this.previousBlurredValue){this.wmInputValueChanged.emit({value:this.value})}this.previousBlurredValue=this.value;var t=this.preventValidation&&l(e,this.preventValidation);if(!t){this.displayedErrorMessage=this.validate()}this.inputWrapperEl.classList.remove("focus")};e.prototype.handleInput=function(e){this.value=e.target.value;if(this.characterLimit&&this.charCount>=this.characterLimit-5){this.announce(this.generateCharacterLimitWarning(this.charCount,this.characterLimit))}};e.prototype.handleFocus=function(){this.inputWrapperEl.classList.add("focus")};e.prototype.validate=function(){var e=[this.validateNumber.bind(this),this.validateRequired.bind(this)];if(this.errorMessage){return this.errorMessage}else{return e.reduce((function(e,t){return e?e:t()}),"")}};e.prototype.validateRequired=function(){var e=this.requiredFieldMessage||o.formatMessage({id:"global.requiredError",defaultMessage:"This field is required."});return this.requiredField&&this.value===""?e:""};e.prototype.validateNumber=function(){return this.type==="number"&&this.inputEl.validity.badInput?this.numberErrorMessage:""};e.prototype.announce=function(e){if(this.liveRegionEl.textContent===e){e+=" "}this.announcement=e};e.prototype.generateCharacterLimitWarning=function(e,t){var r=o.formatMessage({id:"global.charactersEntered",defaultMessage:"{x, number} of {y, number} characters entered.",description:"for screen readers"},{x:e,y:t});var i=o.formatMessage({id:"global.characterLimitReached",defaultMessage:"No additional characters will be entered.",description:"for screen readers"});return"".concat(r).concat(e>=t?" "+i:"")};e.prototype.generateCharacterLimitLabel=function(e){return o.formatMessage({id:"global.characterLimit",defaultMessage:"{limit, number} characters allowed.",description:"for screen readers"},{limit:e})};e.prototype.renderErrorMessage=function(){return this.errorMessage||this.displayedErrorMessage};e.prototype.render=function(){var e=this;return i(a,{id:this.uid},i("div",{class:"wrapper label-".concat(this.labelPosition," ").concat(this.errorMessage||this.displayedErrorMessage?"invalid":""),ref:function(t){return e.inputWrapperEl=t}},i("div",{class:"label-wrapper"},this.labelPosition!=="none"&&i("label",{htmlFor:"inputfield-".concat(this.uid),class:"label"},this.label,this.requiredField&&i("span",{class:"required","aria-hidden":"true"},"*"))),i("div",{class:"inner-wrapper"},i("div",{class:"inputfield-wrapper"},i("input",{ref:function(t){return e.inputEl=t},id:"inputfield-".concat(this.uid),disabled:this.disabled,"aria-label":"".concat(this.label).concat(this.characterLimit?" "+this.generateCharacterLimitLabel(this.characterLimit):""),"aria-describedby":"info-".concat(this.uid," error-").concat(this.uid),onInput:function(t){return e.handleInput(t)},onKeyDown:function(t){return e.handleKeyDown(t)},onBlur:function(t){return e.handleBlur(t)},onFocus:this.handleFocus.bind(this),placeholder:this.placeholder,autocomplete:"off","aria-required":this.requiredField?"true":null,maxLength:this.characterLimit||undefined,type:this.type,step:this.step,max:this.max,min:this.min}),this.characterLimit&&typeof this.characterLimit==="number"?i("div",{class:"character-count"},this.charCount,"/",this.characterLimit):""),this.info&&i("div",{id:"info-".concat(this.uid),class:"info"},this.info),i("div",{id:"error-".concat(this.uid),"aria-live":"assertive",class:"error-message","aria-atomic":"true"},this.renderErrorMessage()),i("div",{class:"sr-only","aria-live":"polite","aria-atomic":"true",ref:function(t){return e.liveRegionEl=t}},this.announcement))))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{errorMessage:["handleErrorMessage"]}},enumerable:false,configurable:true});return e}());u.style=p}}}));
-//# sourceMappingURL=p-64f15a9e.system.entry.js.map

package/dist/ripple/p-64f15a9e.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmInputCss","Input","exports","this","uid","previousBlurredValue","numberErrorMessage","intl","formatMessage","id","defaultMessage","Object","defineProperty","class_1","prototype","value","length","componentWillLoad","el","generateId","label","console","error","componentDidLoad","inputEl","handleErrorMessage","newValue","displayedErrorMessage","handleKeyDown","ev","isModifierKey","ctrlKey","metaKey","altKey","isCharacter","test","key","hasReachedCharacterLimit","characterLimit","announce","generateCharacterLimitWarning","charCount","handleBlur","wmInputValueChanged","emit","shouldPreventValidation","preventValidation","isRelatedTarget","validate","inputWrapperEl","classList","remove","handleInput","target","handleFocus","add","validationRules","validateNumber","bind","validateRequired","errorMessage","reduce","prev","current","reqMsg","requiredFieldMessage","requiredField","type","validity","badInput","message","liveRegionEl","textContent","announcement","charLimit","charactersEnteredMessage","description","x","y","characterLimitReachedMessage","concat","generateCharacterLimitLabel","limit","renderErrorMessage","render","_this","h","Host","class","labelPosition","ref","htmlFor","disabled","onInput","onKeyDown","onBlur","onFocus","placeholder","autocomplete","maxLength","undefined","step","max","min","info"],"sources":["src/components/wm-input/wm-input.scss?tag=wm-input&encapsulation=shadow","src/components/wm-input/wm-input.tsx"],"sourcesContent":[":host,\r\nwm-input {\r\n  font-family: inherit;\r\n  width: 100%;\r\n\r\n  * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  @include label;\r\n\r\n  .wrapper {\r\n    .inner-wrapper {\r\n      width: 100%;\r\n    }\r\n\r\n    .inputfield-wrapper {\r\n      height: rem-calc(40);\r\n      border: 1px solid $input-border-color;\r\n      @include border-radius(3px);\r\n      display: flex;\r\n    }\r\n\r\n    .character-count {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: rem-calc(80);\r\n      background-color: rgba($charcoal, 0.05);\r\n      font-size: rem-calc(14);\r\n      font-weight: 500;\r\n      align-self: stretch;\r\n    }\r\n\r\n    input {\r\n      @include border-radius(3px);\r\n      border: none;\r\n      font-family: inherit;\r\n      font-size: rem-calc(14);\r\n      height: 100%;\r\n      flex: 1;\r\n      padding: rem-calc(12 16);\r\n      width: 100%;\r\n\r\n      &:disabled {\r\n        background-color: $input-disabled-bg;\r\n        color: $input-disabled-color;\r\n      }\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n    }\r\n\r\n    .info {\r\n      font-style: italic;\r\n      line-height: 100%;\r\n      margin: 4px 0;\r\n    }\r\n\r\n    &.invalid {\r\n      & .inputfield-wrapper {\r\n        @include invalidBorder;\r\n      }\r\n\r\n      .error-message {\r\n        @include errorMessage;\r\n        line-height: 100%;\r\n      }\r\n    }\r\n\r\n    &:focus,\r\n    &.focus {\r\n      .inputfield-wrapper {\r\n        @include field-focus;\r\n      }\r\n    }\r\n  }\r\n\r\n  .sr-only {\r\n    @include srOnly;\r\n  }\r\n}\r\n","import { h, Component, Element, Event, EventEmitter, Host, Prop, State, Watch } from \"@stencil/core\";\r\nimport { intl, generateId, isRelatedTarget } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-input\",\r\n  styleUrl: \"wm-input.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Input {\r\n  @Element() el!: HTMLWmInputElement;\r\n  private inputEl!: HTMLInputElement;\r\n  private inputWrapperEl!: HTMLDivElement;\r\n  private liveRegionEl!: HTMLDivElement;\r\n\r\n  @Prop() label!: string;\r\n  @Prop() labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\r\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop() info?: string;\r\n  @Prop() placeholder: string = \"\";\r\n  @Prop() requiredField: boolean = false;\r\n  @Prop() requiredFieldMessage?: string;\r\n  @Prop() errorMessage?: string;\r\n  @Prop() characterLimit?: number;\r\n  @Prop() preventValidation?: string; // id or series of ids, validation will not occur when clicking an element with this id\r\n  @Prop() type: \"number\" | \"text\" = \"text\";\r\n  @Prop() step?: number = 1;\r\n  @Prop() min?: number;\r\n  @Prop() max?: number;\r\n\r\n  get charCount(): number {\r\n    return this.value.length;\r\n  }\r\n\r\n  @State() announcement: string = \"\";\r\n\r\n  @Event() wmInputValueChanged!: EventEmitter<{ value: string }>;\r\n  @State() displayedErrorMessage: string = \"\";\r\n\r\n  private uid: string = \"\";\r\n  private previousBlurredValue: string = \"\";\r\n  private numberErrorMessage = intl.formatMessage({\r\n    id: \"input.numberError\",\r\n    defaultMessage: \"Please enter a valid number.\",\r\n  });\r\n\r\n  componentWillLoad() {\r\n    this.uid = this.el.id ? this.el.id : generateId();\r\n\r\n    if (!this.label) {\r\n      console.error(\"wm-input requires the label property\");\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.value) {\r\n      this.inputEl.value = this.value;\r\n      this.previousBlurredValue = this.inputEl.value;\r\n    }\r\n  }\r\n\r\n  @Watch(\"errorMessage\")\r\n  handleErrorMessage(newValue: string) {\r\n    this.displayedErrorMessage = newValue;\r\n  }\r\n\r\n  handleKeyDown(ev: KeyboardEvent) {\r\n    // in most browsers, onInput doesn't fire if the input's maxLength is reached\r\n    // to handle the case where a user continues to type after reaching the character limit, the keyDown event must be used\r\n    const isModifierKey = ev.ctrlKey || ev.metaKey || ev.altKey;\r\n    const isCharacter = /^.$/.test(ev.key) && !isModifierKey;\r\n    const hasReachedCharacterLimit =\r\n      isCharacter && this.characterLimit && this.inputEl.value.length >= this.characterLimit;\r\n\r\n    if (hasReachedCharacterLimit) {\r\n      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit!));\r\n    }\r\n  }\r\n\r\n  handleBlur(ev: FocusEvent) {\r\n    if (this.value !== this.previousBlurredValue) {\r\n      this.wmInputValueChanged.emit({ value: this.value });\r\n    }\r\n    this.previousBlurredValue = this.value;\r\n    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)\r\n    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);\r\n    if (!shouldPreventValidation) {\r\n      this.displayedErrorMessage = this.validate();\r\n    }\r\n    this.inputWrapperEl.classList.remove(\"focus\");\r\n  }\r\n\r\n  handleInput(ev: Event) {\r\n    this.value = (ev.target as HTMLInputElement).value;\r\n    if (this.characterLimit && this.charCount >= this.characterLimit - 5) {\r\n      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));\r\n    }\r\n  }\r\n\r\n  handleFocus() {\r\n    this.inputWrapperEl.classList.add(\"focus\");\r\n  }\r\n\r\n  validate() {\r\n    // These rules are in priority order\r\n    // i.e. an input that is triggering both required and number errors will only show the number one but it's first\r\n    const validationRules = [this.validateNumber.bind(this), this.validateRequired.bind(this)];\r\n\r\n    if (this.errorMessage) {\r\n      return this.errorMessage;\r\n    } else {\r\n      // sets newError to first rule that returns an error\r\n      return validationRules.reduce((prev, current) => (prev ? prev : current()), \"\");\r\n    }\r\n  }\r\n\r\n  validateRequired(): string {\r\n    const reqMsg =\r\n      this.requiredFieldMessage ||\r\n      intl.formatMessage({\r\n        id: \"global.requiredError\",\r\n        defaultMessage: \"This field is required.\",\r\n      });\r\n    return this.requiredField && this.value === \"\" ? reqMsg : \"\";\r\n  }\r\n\r\n  validateNumber(): string {\r\n    return this.type === \"number\" && this.inputEl.validity.badInput ? this.numberErrorMessage : \"\";\r\n  }\r\n\r\n  announce(message: string) {\r\n    if (this.liveRegionEl.textContent === message) {\r\n      message += \"\\u00A0\";\r\n    }\r\n    this.announcement = message;\r\n  }\r\n\r\n  generateCharacterLimitWarning(charCount: number, charLimit: number): string {\r\n    const charactersEnteredMessage = intl.formatMessage(\r\n      {\r\n        id: \"global.charactersEntered\",\r\n        defaultMessage: \"{x, number} of {y, number} characters entered.\",\r\n        description: \"for screen readers\",\r\n      },\r\n      { x: charCount, y: charLimit }\r\n    );\r\n\r\n    const characterLimitReachedMessage = intl.formatMessage({\r\n      id: \"global.characterLimitReached\",\r\n      defaultMessage: \"No additional characters will be entered.\",\r\n      description: \"for screen readers\",\r\n    });\r\n\r\n    return `${charactersEnteredMessage}${charCount >= charLimit ? \" \" + characterLimitReachedMessage : \"\"}`;\r\n  }\r\n\r\n  generateCharacterLimitLabel(characterLimit: number): string {\r\n    return intl.formatMessage(\r\n      {\r\n        id: \"global.characterLimit\",\r\n        defaultMessage: \"{limit, number} characters allowed.\",\r\n        description: \"for screen readers\",\r\n      },\r\n      { limit: characterLimit }\r\n    );\r\n  }\r\n\r\n  renderErrorMessage() {\r\n    return this.errorMessage || this.displayedErrorMessage;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host id={this.uid}>\r\n        <div\r\n          class={`wrapper label-${this.labelPosition} ${\r\n            this.errorMessage || this.displayedErrorMessage ? \"invalid\" : \"\"\r\n          }`}\r\n          ref={(el) => (this.inputWrapperEl = el as HTMLDivElement)}\r\n        >\r\n          <div class=\"label-wrapper\">\r\n            {this.labelPosition !== \"none\" && (\r\n              <label htmlFor={`inputfield-${this.uid}`} class=\"label\">\r\n                {this.label}\r\n                {this.requiredField && (\r\n                  <span class=\"required\" aria-hidden=\"true\">\r\n                    *\r\n                  </span>\r\n                )}\r\n              </label>\r\n            )}\r\n          </div>\r\n          <div class=\"inner-wrapper\">\r\n            <div class=\"inputfield-wrapper\">\r\n              <input\r\n                ref={(el) => (this.inputEl = el as HTMLInputElement)}\r\n                id={`inputfield-${this.uid}`}\r\n                disabled={this.disabled}\r\n                aria-label={`${this.label}${\r\n                  this.characterLimit ? \" \" + this.generateCharacterLimitLabel(this.characterLimit) : \"\"\r\n                }`}\r\n                aria-describedby={`info-${this.uid} error-${this.uid}`}\r\n                onInput={(ev) => this.handleInput(ev)}\r\n                onKeyDown={(ev) => this.handleKeyDown(ev)}\r\n                onBlur={(ev) => this.handleBlur(ev)}\r\n                onFocus={this.handleFocus.bind(this)}\r\n                placeholder={this.placeholder}\r\n                autocomplete=\"off\"\r\n                aria-required={this.requiredField ? \"true\" : null}\r\n                maxLength={this.characterLimit || undefined}\r\n                type={this.type}\r\n                step={this.step}\r\n                max={this.max}\r\n                min={this.min}\r\n              />\r\n              {this.characterLimit && typeof this.characterLimit === \"number\" ? (\r\n                <div class=\"character-count\">\r\n                  {this.charCount}/{this.characterLimit}\r\n                </div>\r\n              ) : (\r\n                \"\"\r\n              )}\r\n            </div>\r\n            {this.info && (\r\n              <div id={`info-${this.uid}`} class=\"info\">\r\n                {this.info}\r\n              </div>\r\n            )}\r\n            <div id={`error-${this.uid}`} aria-live=\"assertive\" class=\"error-message\" aria-atomic=\"true\">\r\n              {this.renderErrorMessage()}\r\n            </div>\r\n            <div\r\n              class=\"sr-only\"\r\n              aria-live=\"polite\"\r\n              aria-atomic=\"true\"\r\n              ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\r\n            >\r\n              {this.announcement}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}