@watermarkinsights/ripple 3.27.0 → 3.27.1

package/dist/ripple/p-d2037549.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,f as i,h as r,H as a,g as s}from"./p-b5dee715.js";import{g as o,d as n,q as h,i as l,r as d,u as p,j as c,h as w,s as g,m}from"./p-cfa80f5b.js";import{g as u}from"./p-19689aac.js";const b=class{constructor(r){t(this,r),this.wmTagInputChanged=e(this,"wmTagInputChanged",7),this.uid=this.el.id?this.el.id:o(),this.openUp=!1,this.debouncedUpdate=n((()=>i(this.el)),30),this.label=void 0,this.labelPosition="top",this.options="",this.selectedTags="",this.info=void 0,this.errorMessage=void 0,this.addNew=!0,this.placeholder=void 0,this.requiredField=!1,this.characterLimit=50,this.maxTags=void 0,this.tagInputType="dropdown",this.colHeaders=void 0,this.colWidths=void 0,this.colWrap=void 0,this.messageConfig="",this.focusedListItem=void 0,this.focusedTag=null,this.tablePosition={row:0,column:1},this.isExpanded=!1,this.tagsList=h(this.selectedTags),this.optionsList=h(this.options),this.charCount=0,this.liveRegionMessage=""}get tooltipVisible(){return document.getElementById("wm-tooltip").classList.contains("open")}get focusedElement(){return this.el.shadowRoot.activeElement}get listItemEls(){return Array.from(this.dropdownEl.querySelectorAll("li"))}get tagEls(){return this.tagAreaEl?Array.from(this.tagAreaEl.querySelectorAll(".tag")):[]}get nonLockedTagEls(){return this.tagEls.filter((t=>!t.classList.contains("locked")))}get optionEls(){return Array.from(this.dropdownEl.querySelectorAll(".option"))}get wmRowEls(){return Array.from(this.el.querySelectorAll("wm-tag-input-row"))}get localRowEls(){return Array.from(this.el.shadowRoot.querySelectorAll("tr"))}get filteredRows(){return this.wmRowEls.filter((t=>{const e=this.inputEl?this.inputEl.value.toLowerCase():"";return[t.col1,t.col2,t.col3,t.col4].join("").toLowerCase().includes(e)}))}get nonLockedTagsList(){let t=[];return"table"===this.tagInputType?this.tagsList.forEach((e=>{this.wmRowEls.filter((t=>e===t.id))[0].locked||t.push(e)})):"dropdown"===this.tagInputType&&(t=this.tagsList),t}get tagLimitReached(){return!!(this.maxTags&&this.tagsList.length>=this.maxTags)}get noResultsMessage(){return l.formatMessage({id:"tagInput.noResults",defaultMessage:"No results match your search.",description:"Message displayed when a user's search returns empty."})}get componentMessages(){const t={addNewHelpText:l.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"}),selectionHelpText:l.formatMessage({id:"tagInput.selectionHelpText",defaultMessage:"Search and select a tag.",description:"Help text appearing in a dropdown. Use imperative"}),maxTagsReached:l.formatMessage({id:"tagInput.maxTagsReached",defaultMessage:"No more tags can be added because the limit has been reached."}),tagAreaInstructions:l.formatMessage({id:"tagInput.tagAreaInstructions",defaultMessage:"tag selection. Press Backspace or Delete to remove a tag."}),tagsAdded:l.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"})},e=d(this.messageConfig);return e?Object.assign(Object.assign({},t),e):t}get inputMinimumWidth(){const t=getComputedStyle(this.inputEl),e=getComputedStyle(this.tagEls[this.tagEls.length-1]),i=[t.paddingLeft,t.paddingRight,t.marginLeft,t.marginRight,e.marginRight].reduce(((t,e)=>t+parseInt(e.replace("px",""))),0);return Math.max(150,p(this.inputEl,this.placeholder).width+i)}generateTagAddedMessage(t){return l.formatMessage({id:"tagInput.tagAdded",defaultMessage:"{tagName} added.",description:"A confirmation for adding a tag."},{tagName:t})}generateTagAlreadyAddedMessage(t){return l.formatMessage({id:"tagInput.tagAlreadyAdded",defaultMessage:"{tagName} has already been added.",description:"An alert for adding a tag that is already present."},{tagName:t})}componentWillLoad(){this.placeholder||(this.placeholder=this.createPlaceholderDefault(this.addNew,!!this.options)),this.label||console.error("wm-tag-input must have a label property"),this.consolidateSelectedTags(),this.el.focus=()=>{const t=this.nonLockedTagEls[0];t?(this.tagAreaEl.focus(),this.focusTag(t)):this.inputEl.focus()},new ResizeObserver((()=>this.debouncedUpdate())).observe(this.el)}componentDidLoad(){this.tagEls.forEach((t=>t.classList.remove("highlight")))}componentDidRender(){this.positionInput(),this.tagEls.forEach((t=>{const e=t.querySelector(".tag-text"),i=this.el.shadowRoot.querySelector(".tags-and-input-wrapper"),r=e.getBoundingClientRect().left,a=i.getBoundingClientRect().right-10-8-28;let s=t.dataset.tag;if("table"===this.tagInputType){const t=this.el.querySelector(`#${s}`);s=t?t.col1:""}e.textContent=c(e,s,a-r,5)}))}consolidateSelectedTags(){this.tagsList.forEach((t=>{this.includesCaseInsensitive(this.optionsList,t)||(this.options+=`${this.options.length>0?",":""}${t}`)})),this.optionsList=h(this.options)}createPlaceholderDefault(t,e){const i=l.formatMessage({id:"tagInput.placeholderAddAndSearch",defaultMessage:"Add or search for a tag",description:"Placeholder text. Use imperative"}),r=l.formatMessage({id:"tagInput.placeholderSearch",defaultMessage:"Search and select a tag",description:"Placeholder text. Use imperative"}),a=l.formatMessage({id:"tagInput.placeholderAdd",defaultMessage:"Add a new tag",description:"Placeholder text. Use imperative"});let s="";return t&&e?s=i:!t&&e?s=r:t&&(s=a),s}reflectSelectedTags(t,e){let i="",r=this.tagsList;i=t.length>e.length?t.filter((t=>!e.includes(t)))[0]:e.filter((e=>!t.includes(e)))[0],"table"===this.tagInputType&&(i=this.wmRowEls.filter((t=>t.id===i))[0],r=this.tagsList.map((t=>this.el.querySelector(`#${t}`)))),this.selectedTags=this.listToCSV(this.tagsList),this.wmTagInputChanged.emit({value:r,tagChanged:i})}handleErrorMessageChange(){this.errorMessage&&this.announce(this.errorMessage)}handleRowUpdate(){i(this.el)}closeIfNotElOrChild(t){const e=t.target!==this.el&&!this.el.shadowRoot.contains(t.target);"dropdown"===this.tagInputType&&e&&this.isExpanded&&this.closeDropdown()}dismissTooltip(){this.tooltipVisible&&w()}handleInputKeyDown(t){switch(/^.$/.test(t.key)&&this.inputEl.value.length>=this.characterLimit&&this.announce(this.generateCharacterLimitWarning(this.inputEl.value.length,this.characterLimit)),t.stopPropagation(),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":"table"===this.tagInputType&&this.tablePosition.row&&(t.preventDefault(),this.moveLeftCell());break;case"ArrowRight":"table"===this.tagInputType&&this.tablePosition.row&&(t.preventDefault(),this.moveRightCell());break;case"Escape":"dropdown"===this.tagInputType&&this.isExpanded&&this.closeDropdown();break;case"ArrowLeft":case"Backspace":this.handleInputBackspace()}}handleInputFocus(){"dropdown"===this.tagInputType&&(this.openDropdown(),this.clearListItemFocus()),i(this.el)}handleInputChanged(t){this.charCount=t.length,"dropdown"===this.tagInputType?(this.clearListItemFocus(),this.charCount>=this.characterLimit-5&&this.announce(this.generateCharacterLimitWarning(this.charCount,this.characterLimit)),this.isExpanded||this.openDropdown()):"table"===this.tagInputType&&this.clearCellFocus(),this.announceExistingOptions()}handleInputEnter(){"dropdown"===this.tagInputType?this.focusedListItem?this.handleListItemClick(this.focusedListItem):this.submitInput(this.addNew,this.inputEl.value.trim()):"table"===this.tagInputType&&this.tablePosition.row>0&&this.handleTableRowClick(this.localRowEls[this.tablePosition.row].id)}submitInput(t,e){const i=e.match(/\S/);t&&i&&(this.addTag(e),this.optionsList=this.addOption(e),this.resetInput())}handleInputArrowDown(){"table"===this.tagInputType?this.moveDownRow():"dropdown"===this.tagInputType&&this.isExpanded?this.moveDownListItem():"dropdown"===this.tagInputType&&this.openDropdown()}handleInputArrowUp(){"table"===this.tagInputType?this.moveUpRow():"dropdown"===this.tagInputType&&this.isExpanded?this.moveUpListItem():"dropdown"===this.tagInputType&&this.openDropdown()}handleInputBackspace(){""===this.inputEl.value&&this.tagsList.length>0&&window.requestAnimationFrame((()=>{this.nonLockedTagsList.length>0&&(this.tagAreaEl.focus(),this.focusTag(this.tagEls[this.tagEls.length-1]))}))}handleListItemKeyDown(t){const 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":this.focusedElement!==this.inputEl?this.inputEl.focus():"dropdown"===this.tagInputType&&this.closeDropdown()}}handleListItemClick(t){const e=t.dataset.option.trim()||"";this.includesCaseInsensitive(this.tagsList,e)?this.announce(this.generateTagAlreadyAddedMessage(e)):(this.resetInput(),this.addTag(e),this.optionsList=this.addOption(e),this.focusedListItem=null)}handleTableRowClick(t){this.el.querySelector(`#${t}`).locked||(this.includesCaseInsensitive(this.tagsList,t)?this.removeTag(t):this.tagLimitReached||(this.addTag(t),this.resetInput()))}handleTagAreaKeyDown(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()}}handleTagAreaDelete(){const t=this.focusedTag&&this.focusedTag.classList.contains("locked");this.focusedTag&&!t&&(this.removeTag(this.focusedTag.dataset.tag),0===this.nonLockedTagsList.length?this.inputEl.focus():(this.focusedTag=this.focusedTag===this.tagEls[this.tagEls.length-1]?this.tagEls[this.tagEls.length-2]:this.focusedTag,this.focusTag(this.focusedTag)))}handleBlur(t,e){const i=t.relatedTarget!==e&&!this.el.shadowRoot.contains(t.relatedTarget);this.dismissTooltip(),this.clearCellFocus(),i&&(this.fieldWrapperEl.classList.remove("focused"),"dropdown"===this.tagInputType&&this.closeDropdown())}handleCellMouseEnter(t){const e=t.target,i=e.querySelector(".cell-content-wrapper");i.scrollWidth>i.clientWidth&&g("bottom",e,e.innerText)}handleTagAreaFocus(){"dropdown"===this.tagInputType&&this.closeDropdown();const t=this.nonLockedTagEls[0];t&&this.focusTag(t)}handleRemoveButtonClick(t){this.moveLeftTag(),this.removeTag(t)}moveDownListItem(){if(this.listItemEls.length>0){this.focusListItem(this.focusedListItem&&this.focusedListItem.nextElementSibling?this.focusedListItem.nextElementSibling:this.listItemEls[0])}}moveUpListItem(){if(this.listItemEls.length>0){const t=this.listItemEls[this.listItemEls.length-1];this.focusedListItem?this.focusedListItem.previousElementSibling?this.focusListItem(this.focusedListItem.previousElementSibling):this.clearListItemFocus():this.focusListItem(t)}}moveDownRow(){this.filteredRows.length>0&&(0===this.tablePosition.row||this.tablePosition.row===this.filteredRows.length?this.tablePosition.row=1:this.tablePosition.row++,this.filteredRows[this.tablePosition.row-1].locked?this.moveDownRow():this.focusCell(this.tablePosition))}moveUpRow(){if(this.filteredRows.length>0){0===this.tablePosition.row?this.tablePosition.row=this.filteredRows.length:1===this.tablePosition.row?this.tablePosition.row=0:this.tablePosition.row--;const t=this.filteredRows[this.tablePosition.row-1];t&&t.locked?this.moveUpRow():t?this.focusCell(this.tablePosition):this.clearCellFocus()}}moveLeftCell(){1!=this.tablePosition.column&&(this.tablePosition.column--,this.focusCell(this.tablePosition))}moveRightCell(){const t=h(this.colHeaders).length;this.tablePosition.column<t&&(this.tablePosition.column++,this.focusCell(this.tablePosition))}moveLeftTag(){const t=this.tagEls[this.tagEls.length-1];this.focusedTag=this.focusedTag&&this.tagEls.includes(this.focusedTag.previousElementSibling)?this.focusedTag.previousElementSibling:t,this.focusedTag.classList.contains("locked")&&this.nonLockedTagEls.length>0?this.moveLeftTag():this.focusTag(this.focusedTag)}moveRightTag(){const t=this.tagEls[0];this.focusedTag=this.focusedTag&&this.tagEls.includes(this.focusedTag.nextElementSibling)?this.focusedTag.nextElementSibling:t,this.focusedTag.classList.contains("locked")?this.moveRightTag():this.focusTag(this.focusedTag)}addOption(t){let e=this.optionsList;return this.includesCaseInsensitive(this.optionsList,t)||(e=e.concat(t)),e}removeOption(t){this.optionsList=this.filterCaseInsensitive(this.optionsList,t)}addTag(t){let e=this.tagsList;const i=this.includesCaseInsensitive(this.tagsList,t),r=this.optionsList.filter((e=>e.toLowerCase()===t.toLowerCase()))[0];if(!i){let i=t;"table"===this.tagInputType&&(i=this.el.querySelector(`#${t}`).col1),this.announce(this.generateTagAddedMessage(i)),this.tagsList=e.concat(r||t),this.tagLimitReached&&this.tagAreaEl.focus()}}removeTag(t){let e=t;"table"===this.tagInputType&&(e=this.el.querySelector(`#${t}`).col1);const i=l.formatMessage({id:"tagInput.tagRemoved",defaultMessage:"{tag} removed"},{tag:e});if(this.announce(i),this.tagsList=this.filterCaseInsensitive(this.tagsList,t),"dropdown"===this.tagInputType){const e=h(this.options);this.includesCaseInsensitive(this.optionsList,t)&&!this.includesCaseInsensitive(e,t)&&this.removeOption(t)}}focusListItem(t){this.focusedListItem=t,this.inputEl.setAttribute("aria-activedescendant",this.focusedListItem.id),t.scrollIntoView({block:"nearest"})}focusTag(t){t.classList.contains("locked")?(this.focusedTag=null,this.tagAreaEl.setAttribute("aria-activedescendant","")):(this.focusedTag=t,this.tagAreaEl.setAttribute("aria-activedescendant",this.focusedTag.id)),window.requestAnimationFrame((()=>{w();const e=t.querySelector(".tag-text"),i=t.dataset.tag;i!==e.textContent&&e.textContent.includes("...")&&g("bottom",t,i)}))}focusCell(t){if(this.clearCellFocus(!1),t.row){const e=this.localRowEls[t.row],i=e.querySelectorAll("td")[t.column-1],r=i.querySelector(".cell-content-wrapper"),a=r.scrollWidth>r.clientWidth;e.classList.add("focused"),i.classList.add("focused"),i.scrollIntoView({block:"nearest"}),this.inputEl.setAttribute("aria-activedescendant",i.id),this.dismissTooltip(),a&&g("bottom",i,i.innerText)}}clearTagFocus(){this.tagAreaEl.setAttribute("aria-activedescendant",""),this.focusedTag=null}clearCellFocus(t=!0){this.inputEl.setAttribute("aria-activedescendant",""),t&&(this.tablePosition={row:0,column:1}),this.localRowEls.forEach((t=>{t.classList.remove("focused"),t.querySelectorAll("td").forEach((t=>{t.classList.remove("focused")}))}))}openDropdown(){this.openUp=m(this.el,this.dropdownEl.clientHeight,this.el.clientHeight,-2),this.isExpanded=!0}closeDropdown(){this.clearListItemFocus(),this.isExpanded=!1}clearListItemFocus(){this.focusedListItem=null,this.inputEl.setAttribute("aria-activedescendant",""),this.listItemEls.forEach((t=>{t.classList.remove("focused")}))}resetInput(){this.charCount=0,this.inputEl.value=""}announce(t){this.liveRegionEl.textContent===t&&(t+=" "),this.liveRegionMessage=t}announceExistingOptions(){window.requestAnimationFrame((()=>{let t=0;"dropdown"===this.tagInputType?t=this.optionEls.length:"table"===this.tagInputType&&(t=this.filteredRows.length);const e=l.formatMessage({id:"tagInput.existingOptions",defaultMessage:"{num, plural, one {1 existing option.} other {# existing options.}}"},{num:t});this.announce(e)}))}generateCharacterLimitWarning(t,e){let i=u.getCharactersEntered(t,e);return t>=e&&(i+=` ${u.characterLimitReached}`),i}positionInput(){const t=this.tagEls[this.tagEls.length-1];this.inputEl.style.position="static",this.inputEl.style.width="100%",t&&this.tagAreaEl.getBoundingClientRect().right-t.getBoundingClientRect().right>=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")}handleTagMouseEnter(t){const e=t.target.querySelector(".tag-text").textContent,i=t.target.dataset.tag;e!==i&&e.includes("...")&&g("bottom",t.target,i)}listToCSV(t){return t.join(",")}includesCaseInsensitive(t,e){return t.map((t=>t.toLowerCase())).includes(e.toLowerCase())}filterCaseInsensitive(t,e){return t.filter((t=>t.toLowerCase()!==e.toLowerCase()))}sortCaseInsensitive(t){return t.sort(((t,e)=>(t=t.toLowerCase())>(e=e.toLowerCase())?1:t<e?-1:0))}renderTags(){let t=[],e=[];return this.tagsList.forEach(((i,a)=>{const s=`tag${a+1}`;let o="",n=!1;if("dropdown"===this.tagInputType)o=i;else if("table"===this.tagInputType){const t=this.el.querySelector(`#${i}`);o=t?t.col1:"",n=!!t&&t.locked}(n?t:e).push(r("li",{id:s,class:`tag highlight ${this.focusedTag&&this.focusedTag.id===s?"focused":""} ${n?"locked":""}`,"data-tag":i,role:"option",onMouseEnter:t=>this.handleTagMouseEnter(t),onMouseLeave:w},r("span",{class:"sr-only"},i),r("span",{class:"tag-text","aria-hidden":"true"},o),n?r("div",{class:"icon lock"}):r("button",{class:"icon remove-btn",tabIndex:-1,onClick:()=>this.handleRemoveButtonClick(i)})))})),[...t,...e]}renderDropdown(){return r("div",{class:`dropdown-wrapper ${this.isExpanded?"open":""} ${this.openUp?"upwards":""}`,ref:t=>this.dropdownEl=t},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","aria-label":this.label,tabindex:-1},this.inputEl&&this.renderAddNewButton(),this.renderListItems(this.optionsList)))}renderListItems(t){return t=this.sortCaseInsensitive(t),this.inputEl&&this.inputEl.value&&(t=this.optionsList.filter((t=>t.toLowerCase().includes(this.inputEl.value.toLowerCase())))),t.map(((t,e)=>{const i=`option${e+1}`,a=this.focusedListItem&&this.focusedListItem.id===i,s=this.includesCaseInsensitive(this.tagsList,t);return r("li",{class:"option "+(a?"focused":""),role:"option",id:i,"data-option":t,"aria-selected":s?"true":"false","aria-disabled":s?"true":"false",onKeyDown:t=>this.handleListItemKeyDown(t),onBlur:t=>this.handleBlur(t,this.el),onClick:t=>this.handleListItemClick(t.target)},t)}))}renderAddNewButton(){const t=this.inputEl.value.match(/\S/),e=this.includesCaseInsensitive(this.optionsList,this.inputEl.value.trim());if(this.addNew&&t&&!e){const t="add-new-btn",e=this.focusedListItem&&this.focusedListItem.id===t;return r("li",{role:"option",class:"add-new-btn "+(e?"focused":""),id:t,"data-option":this.inputEl.value,onKeyDown:t=>this.handleListItemKeyDown(t),onBlur:t=>this.handleBlur(t,this.el),onClick:t=>this.handleListItemClick(t.target),tabIndex:e?0:-1},`Add "${this.inputEl.value.trim()}"`)}return""}renderHelpText(){let t="";return this.optionsList.length>0&&(t+=this.componentMessages.selectionHelpText),this.addNew&&(t+=" "+this.componentMessages.addNewHelpText),t}renderTagCounter(){if(this.maxTags)return r("div",{class:"lower-row"},r("div",{id:"max-tags"},`${this.componentMessages.tagsAdded}: ${this.tagsList.length}/${this.maxTags}`,this.tagLimitReached&&` - ${this.componentMessages.maxTagsReached}`))}renderTable(){return r("div",{class:"table-wrapper",onScroll:()=>this.dismissTooltip()},r("table",{id:"table",role:"grid",class: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)))}renderTableHeaders(){return r("tr",{class:"headers",role:"row"},h(this.colHeaders).map(((t,e)=>{let i="wrap";return this.colWrap&&h(this.colWrap)[e]&&(i=h(this.colWrap)[e]),r("th",{class:`header-cell ${i}`,role:"columnheader",width:this.colWidths?h(this.colWidths)[e]:""},t)})))}renderTableRows(){return this.filteredRows.map((t=>{const e=this.includesCaseInsensitive(this.tagsList,t.id);return r("tr",{id:t.id,class:`${t.locked?"locked":""} ${e?"selected":""}`,role:"row",onClick:()=>this.handleTableRowClick(t.id)},this.renderTableCells(t))}))}renderTableCells(t){const e=[t.col1,t.col2,t.col3,t.col4].filter((t=>!!t)),i=this.includesCaseInsensitive(this.tagsList,t.id);return e.map(((e,a)=>{const s=`${t.id}-col${a+1}`;let o="wrap";return this.colWrap&&h(this.colWrap)[a]&&(o=h(this.colWrap)[a]),r("td",{id:s,role:"gridcell","aria-describedby":`${s}-description`,"aria-selected":i.toString(),onMouseEnter:t=>this.handleCellMouseEnter(t),onMouseLeave:()=>this.dismissTooltip()},r("div",{class:`cell-content-wrapper ${o}`},e),r("div",{class:"description",id:`${s}-description`},t.locked?"locked":""))}))}render(){return r(a,{id:this.uid},r("div",{class:`wrapper label-${this.labelPosition} ${this.errorMessage?"invalid":""}`},r("div",{class:"label-wrapper"},r("label",{class:"label",htmlFor:`input${this.uid}`},this.label,this.requiredField&&r("span",{class:"required","aria-hidden":"true"},"*"))),r("div",{class:`field-wrapper ${this.focusedElement?"focused":""} ${this.errorMessage?"invalid":""}`,ref:t=>this.fieldWrapperEl=t},r("div",{class:"upper-row"},r("div",{class:"tags-and-input-wrapper"},this.tagsList.length>0&&r("ul",{ref:t=>this.tagAreaEl=t,class:"tag-area",role:"listbox","aria-activedescendant":"","aria-orientation":"horizontal","aria-label":`${this.label} ${this.tagsList.length>0?this.componentMessages.tagAreaInstructions:""}`,tabindex:this.nonLockedTagsList.length>0?0:-1,"aria-describedby":"info max-tags",onFocus:()=>this.handleTagAreaFocus(),onBlur:t=>{this.clearTagFocus(),this.handleBlur(t,this.el)},onKeyDown:t=>this.handleTagAreaKeyDown(t)},this.renderTags()),r("input",{id:`input${this.uid}`,class:this.tagLimitReached?"hidden":"",role:"combobox",ref:t=>this.inputEl=t,autocomplete:"off","aria-required":this.requiredField?"true":null,"aria-controls":this.tagInputType,"aria-describedby":"help-text"+(this.errorMessage?" error ":""),"aria-label":`${this.label} ${"dropdown"===this.tagInputType?u.getCharacterLimit(this.characterLimit):""}`,"aria-expanded":"dropdown"===this.tagInputType?this.isExpanded.toString():null,placeholder:this.placeholder,maxLength:"dropdown"===this.tagInputType?this.characterLimit:void 0,onInput:()=>this.handleInputChanged(this.inputEl.value),onBlur:t=>{this.handleBlur(t,this.el)},onFocus:()=>this.handleInputFocus(),onKeyDown:t=>this.handleInputKeyDown(t)})),"dropdown"===this.tagInputType&&r("div",{class:"character-count"},this.charCount,"/",this.characterLimit)),this.renderTagCounter(),"dropdown"===this.tagInputType&&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:t=>this.liveRegionEl=t,"aria-atomic":"true"},this.liveRegionMessage),"table"===this.tagInputType&&this.renderTable()))}static get delegatesFocus(){return!0}get el(){return s(this)}static get watchers(){return{tagsList:["reflectSelectedTags"],errorMessage:["handleErrorMessageChange"]}}};b.style=':host,wm-tag-input{font-family:inherit;width:100%;display:block;max-height:80vh}: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%;max-height:inherit;min-height:inherit;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 #19a1a9;-moz-box-shadow:0 0 0 1px #19a1a9;box-shadow:0 0 0 1px #19a1a9;outline:none;border-color:#19a1a9}: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;overflow:hidden}: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;line-height:normal;font-size:1.12rem}: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;min-height:2.6875rem;white-space:pre-wrap;overflow-wrap:anywhere}: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{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}';export{b as wm_tag_input}