@watermarkinsights/ripple 3.12.0 → 3.13.0-0

package/dist/esm/wm-tag-input.entry.js

@@ -1,586 +1,586 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7603f98e.js';
-import { g as generateId, i as intl, d as debounce, l as shouldOpenUp } from './functions-61c7bb1f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-17c79cc6.js';
+import { g as generateId, i as intl, d as debounce, l as shouldOpenUp } from './functions-78aea827.js';
 
 const wmTagInputCss = ":host,wm-tag-input{font-family:inherit;width:100%}: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%;position:relative}:host .field-wrapper,wm-tag-input .field-wrapper{position:relative;width:100%;min-height:2.5rem;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 .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;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;-ms-flex-align:center;align-items:center}:host .lower-row,wm-tag-input .lower-row{width:100%;border-radius:0 0 3px 3px}:host #max-tags,wm-tag-input #max-tags{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:1.875rem;background-color:#6b6b6b;padding:0.5rem 1rem;color:white;font-size:0.875rem}: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] .remove-btn,wm-tag-input .tag-area [role=option] .remove-btn{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;border:1px solid #575195;color:#575195;border-radius:50%;padding:0;margin-left:0.5rem;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] .remove-btn:hover,wm-tag-input .tag-area [role=option] .remove-btn:hover{color:white;background-color:#575195}:host .tag-area [role=option] .remove-btn:before,wm-tag-input .tag-area [role=option] .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 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;min-height:2.6875rem;padding-top:0.25rem;padding-bottom:0.25rem}: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 .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}";
 
-let TagInput = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmTagInputChanged = createEvent(this, "wmTagInputChanged", 7);
-    this.labelPosition = "top";
-    this.options = ""; // csv
-    this.selectedTags = ""; // csv
-    this.addNew = true;
-    this.characterLimit = 50;
-    this.uid = this.el.id ? this.el.id : generateId();
-    this.openUp = false;
-    this.isExpanded = false;
-    this.tagsList = this.csvToArray(this.selectedTags);
-    this.optionsList = this.csvToArray(this.options);
-    this.charCount = 0;
-    this.liveRegionMessage = "";
-    this.tagAreaInstructions = intl.formatMessage({
-      id: "tagInput.tagAreaInstructions",
-      defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
-    });
-    this.maxTagsReachedMessage = intl.formatMessage({
-      id: "tagInput.maxTagsReached",
-      defaultMessage: "The maximum amount of tags has been reached, no additional tags can be added.",
-    });
-    this.debouncedResize = debounce(() => {
-      this.positionInput();
-    }, 30);
-  }
-  get focusedElement() {
-    return this.el.shadowRoot.activeElement;
-  }
-  get listItemEls() {
-    return Array.from(this.dropdownEl.querySelectorAll("li"));
-  }
-  get tagEls() {
-    return Array.from(this.tagAreaEl.querySelectorAll(".tag"));
-  }
-  get optionEls() {
-    return Array.from(this.dropdownEl.querySelectorAll(".option"));
-  }
-  generateTagAddedMessage(tag) {
-    return intl.formatMessage({
-      id: "tagInput.tagAdded",
-      defaultMessage: "{tagName} added.",
-      description: "A confirmation for adding a tag.",
-    }, { tagName: tag });
-  }
-  generateTagAlreadyAddedMessage(tag) {
-    return intl.formatMessage({
-      id: "tagInput.tagAlreadyAdded",
-      defaultMessage: "{tagName} has already been added.",
-      description: "An alert for adding a tag that is already present.",
-    }, { tagName: tag });
-  }
-  generateTagCounterMessage(x, y) {
-    return intl.formatMessage({
-      id: "tagInput.tagsAddedCounter",
-      defaultMessage: "Tags added: {x, number}/{y, number}",
-      description: "For the user to understand how close they are to the tag limit.",
-    }, {
-      x: x,
-      y: y,
-    });
-  }
-  generateCharacterLimitLabel(characterLimit) {
-    return intl.formatMessage({
-      id: "global.characterLimit",
-      defaultMessage: "{limit, number} characters allowed.",
-      description: "for screen readers",
-    }, { limit: characterLimit });
-  }
-  componentWillLoad() {
-    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.el.focus = function () {
-      // if present, send focus to the selected tags list
-      if (this.selectedTags) {
-        this.shadowRoot.querySelector("ul.tag-area").focus();
-      }
-      else {
-        this.shadowRoot.querySelector("input").focus();
-      }
-    };
-    this.consolidateSelectedTags();
-  }
-  componentDidLoad() {
-    // prevent highlighting of pre-selected tags
-    this.tagEls.forEach((el) => el.classList.remove("highlight"));
-  }
-  componentDidRender() {
-    this.positionInput();
-  }
-  consolidateSelectedTags() {
-    this.tagsList.forEach((tag) => {
-      if (!this.includesCaseInsensitive(this.optionsList, tag)) {
-        this.options += `${this.options.length > 0 ? "," : ""}${tag}`;
-      }
-    });
-    this.optionsList = this.csvToArray(this.options);
-  }
-  createPlaceholderDefault(addNew, hasOptions) {
-    const addAndSearchPlaceholder = intl.formatMessage({
-      id: "tagInput.placeholderAddAndSearch",
-      defaultMessage: "Add or search for a tag",
-      description: "Placeholder text. Use imperative",
-    });
-    const searchPlaceholder = intl.formatMessage({
-      id: "tagInput.placeholderSearch",
-      defaultMessage: "Search and select a tag",
-      description: "Placeholder text. Use imperative",
-    });
-    const addPlaceholder = intl.formatMessage({
-      id: "tagInput.placeholderAdd",
-      defaultMessage: "Add a new tag",
-      description: "Placeholder text. Use imperative",
-    });
-    let placeholder = "";
-    if (addNew && hasOptions) {
-      placeholder = addAndSearchPlaceholder;
-    }
-    else if (!addNew && hasOptions) {
-      placeholder = searchPlaceholder;
-    }
-    else if (addNew) {
-      placeholder = addPlaceholder;
-    }
-    return placeholder;
-  }
-  reflectSelectedTags() {
-    this.selectedTags = this.listToCSV(this.tagsList);
-    this.wmTagInputChanged.emit({ value: this.tagsList });
-  }
-  closeIfNotElOrChild(ev) {
-    const isntElOrChild = ev.target !== this.el && !this.el.shadowRoot.contains(ev.target);
-    if (isntElOrChild && this.isExpanded) {
-      this.closeDropdown();
-    }
-  }
-  handleResize() {
-    this.debouncedResize();
-  }
-  handleInputKeyDown(ev) {
-    if (/^.$/.test(ev.key) && this.inputEl.value.length >= this.characterLimit) {
-      this.announceCharacterLimitWarning(this.inputEl.value.length, this.characterLimit);
-    }
-    // prevent keydown triggering on tag area
-    ev.stopPropagation();
-    switch (ev.key) {
-      case "Enter":
-      case ",":
-        ev.preventDefault();
-        this.submitInput(this.addNew, this.inputEl.value.trim());
-        break;
-      case "ArrowDown":
-        ev.preventDefault();
-        this.handleInputArrowDown();
-        break;
-      case "ArrowUp":
-        ev.preventDefault();
-        this.handleInputArrowUp();
-        break;
-      case "Escape":
-        if (this.isExpanded) {
-          this.closeDropdown();
-        }
-        break;
-      case "ArrowLeft":
-      case "Backspace":
-        this.handleInputBackspace();
-        break;
-    }
-  }
-  handleInputChanged(value) {
-    this.charCount = value.length;
-    if (this.charCount >= this.characterLimit - 5) {
-      this.announceCharacterLimitWarning(this.charCount, this.characterLimit);
-    }
-    this.announceExistingOptions();
-    if (!this.isExpanded) {
-      this.openDropdown();
-    }
-  }
-  submitInput(canAddNew, value) {
-    const hasNonWhiteSpaceCharacters = value.match(/\S/);
-    if (canAddNew && hasNonWhiteSpaceCharacters) {
-      this.tagsList = this.addTag(value);
-      this.optionsList = this.addOption(value);
-      this.resetInput();
-      // if maxTags has been reached, focus should go to the tagArea instead of the input
-      if (this.maxTags && this.tagsList.length >= this.maxTags) {
-        this.tagAreaEl.focus();
-      }
-    }
-  }
-  handleInputArrowDown() {
-    if (this.isExpanded) {
-      this.moveDownListItem();
-    }
-    else {
-      this.openDropdown();
-    }
-  }
-  handleInputArrowUp() {
-    if (this.isExpanded) {
-      this.moveUpListItem();
-    }
-    else {
-      this.openDropdown();
-    }
-  }
-  handleInputBackspace() {
-    if (this.inputEl.value === "" && this.tagsList.length > 0) {
-      // wait for events to finish firing before redirecting focus
-      // prevents double input in input area and tag area
-      window.requestAnimationFrame(() => {
-        this.tagAreaEl.focus();
-        this.focusTag(this.tagEls[this.tagEls.length - 1]);
-      });
-    }
-  }
-  handleListItemKeyDown(ev) {
-    const typedEvTarget = ev.target;
-    switch (ev.key) {
-      case "Enter":
-      case " ":
-        ev.preventDefault();
-        typedEvTarget.click();
-        break;
-      case "ArrowDown":
-        ev.preventDefault();
-        this.moveDownListItem();
-        break;
-      case "ArrowUp":
-        ev.preventDefault();
-        this.moveUpListItem();
-        break;
-      case "Escape":
-        if (this.focusedElement !== this.inputEl) {
-          this.inputEl.focus();
-        }
-        else {
-          this.closeDropdown();
-        }
-        break;
-    }
-  }
-  handleListItemClick(ev) {
-    const typedEvTarget = ev.target;
-    const tag = typedEvTarget.dataset.option.trim() || "";
-    if (this.includesCaseInsensitive(this.tagsList, tag)) {
-      this.announce(this.generateTagAlreadyAddedMessage(tag));
-    }
-    else {
-      this.announce(this.generateTagAddedMessage(tag));
-      this.resetInput();
-      this.tagsList = this.addTag(tag);
-      this.optionsList = this.addOption(tag);
-      this.focusedListItem = null;
-      // if maxTags has been reached, focus should go to the tagArea instead of the input
-      const elementToFocus = this.maxTags && this.tagsList.length >= this.maxTags ? this.tagAreaEl : this.inputEl;
-      elementToFocus.focus();
-    }
-  }
-  handleTagAreaKeyDown(ev) {
-    switch (ev.key) {
-      case "ArrowLeft":
-      case "ArrowUp":
-        ev.preventDefault();
-        this.moveLeftTag();
-        break;
-      case "ArrowRight":
-      case "ArrowDown":
-        ev.preventDefault();
-        this.moveRightTag();
-        break;
-      case "Backspace":
-      case "Delete":
-        this.handleTagAreaDelete();
-        break;
-    }
-  }
-  handleTagAreaDelete() {
-    if (this.focusedTag && this.focusedTag.dataset.tag) {
-      this.removeTag(this.focusedTag.dataset.tag);
-      if (this.tagsList.length === 0) {
-        // focus input if no tags are left
-        this.inputEl.focus();
-      }
-      else if (this.focusedTag === this.tagEls[this.tagEls.length - 1]) {
-        // reassign focus if removing the last tag but there are still tags remaining
-        this.focusedTag = this.tagEls[this.tagEls.length - 2];
-        this.focusTag(this.focusedTag);
-      }
-    }
-  }
-  handleBlur(ev, component) {
-    const isntElOrChild = ev.relatedTarget !== component && !this.el.shadowRoot.contains(ev.relatedTarget);
-    if (isntElOrChild) {
-      this.closeDropdown();
-      this.fieldWrapperEl.classList.remove("focused");
-    }
-  }
-  handleTagAreaFocus() {
-    this.closeDropdown();
-    if (!this.focusedTag) {
-      this.focusedTag = this.tagEls[0];
-    }
-    this.focusTag(this.focusedTag);
-  }
-  handleRemoveButtonClick(tag) {
-    this.moveLeftTag();
-    this.removeTag(tag);
-  }
-  moveDownListItem() {
-    if (this.listItemEls.length > 0) {
-      const firstListItem = this.listItemEls[0];
-      if (!this.focusedListItem) {
-        this.focusListItem(firstListItem);
-      }
-      else if (this.focusedListItem.nextElementSibling) {
-        this.focusListItem(this.focusedListItem.nextElementSibling);
-      }
-      else {
-        this.focusListItem(firstListItem);
-      }
-    }
-  }
-  moveUpListItem() {
-    if (this.listItemEls.length > 0) {
-      const lastListItem = this.listItemEls[this.listItemEls.length - 1];
-      if (!this.focusedListItem) {
-        this.focusListItem(lastListItem);
-      }
-      else if (this.focusedListItem.previousElementSibling) {
-        this.focusListItem(this.focusedListItem.previousElementSibling);
-      }
-      else {
-        this.focusedListItem = null;
-        this.inputEl.focus();
-      }
-    }
-  }
-  moveLeftTag() {
-    const lastTag = this.tagEls[this.tagEls.length - 1];
-    if (this.focusedTag && this.tagEls.includes(this.focusedTag.previousElementSibling)) {
-      this.focusedTag = this.focusedTag.previousElementSibling;
-    }
-    else {
-      this.focusedTag = lastTag;
-    }
-    this.focusTag(this.focusedTag);
-  }
-  moveRightTag() {
-    const firstTag = this.tagEls[0];
-    if (this.focusedTag && this.tagEls.includes(this.focusedTag.nextElementSibling)) {
-      this.focusedTag = this.focusedTag.nextElementSibling;
-    }
-    else {
-      this.focusedTag = firstTag;
-    }
-    this.focusTag(this.focusedTag);
-  }
-  addOption(option) {
-    let newOptionsList = this.optionsList;
-    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, option);
-    if (!optionAlreadyExists) {
-      newOptionsList = newOptionsList.concat(option);
-    }
-    return newOptionsList;
-  }
-  removeOption(option) {
-    this.optionsList = this.filterCaseInsensitive(this.optionsList, option);
-  }
-  addTag(tag) {
-    let newTagsList = this.tagsList;
-    const tagAlreadyAdded = this.includesCaseInsensitive(this.tagsList, tag);
-    const tagExistsAsOption = this.optionsList.filter((x) => x.toLowerCase() === tag.toLowerCase())[0];
-    if (!tagAlreadyAdded) {
-      this.announce(this.generateTagAddedMessage(tag));
-      newTagsList = newTagsList.concat(tagExistsAsOption || tag);
-    }
-    return newTagsList;
-  }
-  removeTag(tag) {
-    const tagRemovedMessage = intl.formatMessage({ id: "tagInput.tagRemoved", defaultMessage: "{tag} removed" }, { tag: tag });
-    this.announce(tagRemovedMessage);
-    this.tagsList = this.filterCaseInsensitive(this.tagsList, tag);
-    const devOptionsList = this.csvToArray(this.options);
-    if (this.includesCaseInsensitive(this.optionsList, tag) && !this.includesCaseInsensitive(devOptionsList, tag)) {
-      this.removeOption(tag);
-    }
-  }
-  focusListItem(item) {
-    this.focusedListItem = item;
-    item.focus();
-  }
-  focusTag(element) {
-    this.focusedTag = element;
-    this.tagAreaEl.setAttribute("aria-activedescendant", this.focusedTag.id);
-  }
-  clearTagFocus() {
-    this.tagAreaEl.removeAttribute("aria-activedescendant");
-    this.focusedTag = null;
-  }
-  openDropdown() {
-    // given an offset of -2px because the dropdown is transformed downwards to avoid overlapping the focus border
-    this.openUp = shouldOpenUp(this.el, this.dropdownEl, this.el.clientHeight, -2);
-    this.isExpanded = true;
-  }
-  closeDropdown() {
-    this.focusedListItem = null;
-    this.isExpanded = false;
-  }
-  clearListItemFocus() {
-    this.focusedListItem = null;
-    this.listItemEls.forEach((el) => {
-      el.tabIndex = -1;
-      el.classList.remove("focused");
-    });
-  }
-  resetInput() {
-    this.charCount = 0;
-    this.inputEl.value = "";
-  }
-  announce(message) {
-    // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
-    if (this.liveRegionEl.textContent === message) {
-      message += "\u00A0";
-    }
-    this.liveRegionMessage = message;
-  }
-  announceExistingOptions() {
-    // request animation frame to wait for re-rendering of filtered options
-    window.requestAnimationFrame(() => {
-      const existingOptionsMessage = intl.formatMessage({
-        id: "tagInput.existingOptions",
-        defaultMessage: "{num, plural, one {1 existing option.} other {# existing options.}}",
-      }, { num: this.optionEls.length });
-      if (this.optionEls.length > 0) {
-        this.announce(existingOptionsMessage);
-      }
-    });
-  }
-  announceCharacterLimitWarning(charCount, charLimit) {
-    const charactersEnteredMessage = intl.formatMessage({
-      id: "global.charactersEntered",
-      defaultMessage: "{x, number} of {y, number} characters entered.",
-      description: "for screen readers",
-    }, { x: charCount, y: charLimit });
-    const characterLimitReachedMessage = intl.formatMessage({
-      id: "global.characterLimitReached",
-      defaultMessage: "No additional characters will be entered.",
-      description: "for screen readers",
-    });
-    this.announce(`${charactersEnteredMessage}${charCount >= charLimit ? " " + characterLimitReachedMessage : ""}`);
-  }
-  positionInput() {
-    const lastTag = this.tagEls[this.tagEls.length - 1];
-    // default placement to fall back to when no tags are present, or not enough space is available
-    this.inputEl.style.position = "static";
-    this.inputEl.style.width = "100%";
-    if (lastTag) {
-      const spaceAvailable = this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right;
-      // 150px is the minimum width of the input field
-      if (spaceAvailable >= 150) {
-        // because the input has right: 0px
-        // all thats needed to properly place it is setting position: absolute, top, and width
-        this.inputEl.style.position = "absolute";
-        this.inputEl.style.top = lastTag.offsetTop.toString() + "px";
-        this.inputEl.style.width =
-          (this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right - 8).toString() + "px";
-      }
-    }
-  }
-  /// Helpers
-  listToCSV(list) {
-    return list.join(",");
-  }
-  csvToArray(csv) {
-    return csv ? csv.split(/, ?/) : [];
-  }
-  includesCaseInsensitive(list, element) {
-    const lowercaseList = list.map((str) => str.toLowerCase());
-    return lowercaseList.includes(element.toLowerCase());
-  }
-  filterCaseInsensitive(list, element) {
-    return list.filter((x) => x.toLowerCase() !== element.toLowerCase());
-  }
-  sortCaseInsensitive(list) {
-    // The vanilla .sort method places words that start with capital letters above others (ASCII order)
-    // so we need to pass in our own compare function to sort case-insensitive
-    return list.sort((a, b) => {
-      a = a.toLowerCase();
-      b = b.toLowerCase();
-      return a > b ? 1 : a < b ? -1 : 0;
-    });
-  }
-  /// Renders
-  renderTags() {
-    return this.tagsList.map((tag, idx) => {
-      const id = `tag${idx + 1}`;
-      return (h("li", { id: id, class: `tag highlight ${this.focusedTag && this.focusedTag.id === id ? "focused" : ""}`, "data-tag": tag, role: "option" }, tag, h("button", { class: "remove-btn", tabIndex: -1, onClick: () => this.handleRemoveButtonClick(tag) })));
-    });
-  }
-  renderListItems(optionsList) {
-    optionsList = this.sortCaseInsensitive(optionsList);
-    // filter by input
-    if (this.inputEl && this.inputEl.value) {
-      optionsList = this.optionsList.filter((option) => option.toLowerCase().includes(this.inputEl.value.toLowerCase()));
-    }
-    return optionsList.map((option, idx) => {
-      const id = `option${idx + 1}`;
-      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
-      const isSelected = this.includesCaseInsensitive(this.tagsList, option);
-      return (h("li", { class: `option ${isFocused ? "focused" : ""}`, role: "option", id: id, "data-option": option, tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected ? "true" : "false", "aria-disabled": isSelected ? "true" : "false", onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev) }, option));
-    });
-  }
-  renderAddNewButton() {
-    const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\S/);
-    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, this.inputEl.value.trim());
-    if (this.addNew && hasNonWhiteSpaceCharacters && !optionAlreadyExists) {
-      const id = `add-new-btn`;
-      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
-      return (h("li", { role: "option", class: `add-new-btn ${isFocused ? "focused" : ""}`, id: id, "data-option": this.inputEl.value, onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev), tabIndex: isFocused ? 0 : -1 }, `Add "${this.inputEl.value.trim()}"`));
-    }
-    else
-      return "";
-  }
-  renderHelpText() {
-    const helpTextHasOptions = intl.formatMessage({
-      id: "tagInput.helpTextCanSelect",
-      defaultMessage: "Search and select a tag.",
-      description: "Placeholder text. Use imperative",
-    });
-    const helpTextEditable = intl.formatMessage({
-      id: "tagInput.helpTextEditable",
-      defaultMessage: "Press the Enter or Comma key to add a new tag.",
-      description: "Placeholder text. Use imperative",
-    });
-    let helpText = "";
-    if (this.optionsList.length > 0) {
-      helpText += helpTextHasOptions;
-    }
-    if (this.addNew) {
-      helpText += " " + helpTextEditable;
-    }
-    return helpText;
-  }
-  renderTagCounter() {
-    if (this.maxTags) {
-      return (h("div", { class: "lower-row" }, h("div", { id: "max-tags" }, this.generateTagCounterMessage(this.tagsList.length, this.maxTags), this.tagsList.length >= this.maxTags && h("span", { class: "sr-only" }, this.maxTagsReachedMessage))));
-    }
-  }
-  render() {
-    const isFocused = this.focusedElement &&
-      (this.focusedElement === this.inputEl ||
-        this.focusedElement === this.tagAreaEl ||
-        this.focusedElement.classList.contains("add-new-btn") ||
-        (this.optionsList.length > 0 && this.listItemEls.includes(this.focusedElement)));
-    return (h(Host, { id: this.uid }, h("div", { class: `wrapper label-${this.labelPosition}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: `input${this.uid}` }, this.label)), h("div", { class: `field-wrapper ${isFocused ? "focused" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: "tags-and-input-wrapper" }, h("ul", { ref: (el) => (this.tagAreaEl = el), class: "tag-area", role: "listbox", "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagsList.length > 0 ? this.tagAreaInstructions : ""}`, tabindex: this.tagsList.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: () => this.handleTagAreaFocus(), onBlur: (ev) => {
-        this.clearTagFocus();
-        this.handleBlur(ev, this.el);
-      }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { id: `input${this.uid}`, class: this.maxTags && this.tagsList.length >= this.maxTags ? "hidden" : "", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-controls": "dropdown", "aria-describedby": "help-text", "aria-label": `${this.label} ${this.generateCharacterLimitLabel(this.characterLimit)}`, "aria-expanded": this.isExpanded ? "true" : "false", placeholder: this.placeholder, maxLength: this.characterLimit, onInput: () => this.handleInputChanged(this.inputEl.value), onBlur: (ev) => {
-        this.handleBlur(ev, this.el);
-      }, onFocus: () => {
-        this.openDropdown();
-        this.clearListItemFocus();
-      }, onKeyDown: (ev) => this.handleInputKeyDown(ev) })), h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)), this.renderTagCounter(), h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("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)))), this.info ? (h("div", { id: "info", class: "info-text" }, this.info)) : (""), h("div", { class: "sr-only", "aria-live": "assertive", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "tagsList": ["reflectSelectedTags"]
-  }; }
-};
+const TagInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmTagInputChanged = createEvent(this, "wmTagInputChanged", 7);
+    this.labelPosition = "top";
+    this.options = ""; // csv
+    this.selectedTags = ""; // csv
+    this.addNew = true;
+    this.characterLimit = 50;
+    this.uid = this.el.id ? this.el.id : generateId();
+    this.openUp = false;
+    this.isExpanded = false;
+    this.tagsList = this.csvToArray(this.selectedTags);
+    this.optionsList = this.csvToArray(this.options);
+    this.charCount = 0;
+    this.liveRegionMessage = "";
+    this.tagAreaInstructions = intl.formatMessage({
+      id: "tagInput.tagAreaInstructions",
+      defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
+    });
+    this.maxTagsReachedMessage = intl.formatMessage({
+      id: "tagInput.maxTagsReached",
+      defaultMessage: "The maximum amount of tags has been reached, no additional tags can be added.",
+    });
+    this.debouncedResize = debounce(() => {
+      this.positionInput();
+    }, 30);
+  }
+  get focusedElement() {
+    return this.el.shadowRoot.activeElement;
+  }
+  get listItemEls() {
+    return Array.from(this.dropdownEl.querySelectorAll("li"));
+  }
+  get tagEls() {
+    return Array.from(this.tagAreaEl.querySelectorAll(".tag"));
+  }
+  get optionEls() {
+    return Array.from(this.dropdownEl.querySelectorAll(".option"));
+  }
+  generateTagAddedMessage(tag) {
+    return intl.formatMessage({
+      id: "tagInput.tagAdded",
+      defaultMessage: "{tagName} added.",
+      description: "A confirmation for adding a tag.",
+    }, { tagName: tag });
+  }
+  generateTagAlreadyAddedMessage(tag) {
+    return intl.formatMessage({
+      id: "tagInput.tagAlreadyAdded",
+      defaultMessage: "{tagName} has already been added.",
+      description: "An alert for adding a tag that is already present.",
+    }, { tagName: tag });
+  }
+  generateTagCounterMessage(x, y) {
+    return intl.formatMessage({
+      id: "tagInput.tagsAddedCounter",
+      defaultMessage: "Tags added: {x, number}/{y, number}",
+      description: "For the user to understand how close they are to the tag limit.",
+    }, {
+      x: x,
+      y: y,
+    });
+  }
+  generateCharacterLimitLabel(characterLimit) {
+    return intl.formatMessage({
+      id: "global.characterLimit",
+      defaultMessage: "{limit, number} characters allowed.",
+      description: "for screen readers",
+    }, { limit: characterLimit });
+  }
+  componentWillLoad() {
+    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.el.focus = function () {
+      // if present, send focus to the selected tags list
+      if (this.selectedTags) {
+        this.shadowRoot.querySelector("ul.tag-area").focus();
+      }
+      else {
+        this.shadowRoot.querySelector("input").focus();
+      }
+    };
+    this.consolidateSelectedTags();
+  }
+  componentDidLoad() {
+    // prevent highlighting of pre-selected tags
+    this.tagEls.forEach((el) => el.classList.remove("highlight"));
+  }
+  componentDidRender() {
+    this.positionInput();
+  }
+  consolidateSelectedTags() {
+    this.tagsList.forEach((tag) => {
+      if (!this.includesCaseInsensitive(this.optionsList, tag)) {
+        this.options += `${this.options.length > 0 ? "," : ""}${tag}`;
+      }
+    });
+    this.optionsList = this.csvToArray(this.options);
+  }
+  createPlaceholderDefault(addNew, hasOptions) {
+    const addAndSearchPlaceholder = intl.formatMessage({
+      id: "tagInput.placeholderAddAndSearch",
+      defaultMessage: "Add or search for a tag",
+      description: "Placeholder text. Use imperative",
+    });
+    const searchPlaceholder = intl.formatMessage({
+      id: "tagInput.placeholderSearch",
+      defaultMessage: "Search and select a tag",
+      description: "Placeholder text. Use imperative",
+    });
+    const addPlaceholder = intl.formatMessage({
+      id: "tagInput.placeholderAdd",
+      defaultMessage: "Add a new tag",
+      description: "Placeholder text. Use imperative",
+    });
+    let placeholder = "";
+    if (addNew && hasOptions) {
+      placeholder = addAndSearchPlaceholder;
+    }
+    else if (!addNew && hasOptions) {
+      placeholder = searchPlaceholder;
+    }
+    else if (addNew) {
+      placeholder = addPlaceholder;
+    }
+    return placeholder;
+  }
+  reflectSelectedTags() {
+    this.selectedTags = this.listToCSV(this.tagsList);
+    this.wmTagInputChanged.emit({ value: this.tagsList });
+  }
+  closeIfNotElOrChild(ev) {
+    const isntElOrChild = ev.target !== this.el && !this.el.shadowRoot.contains(ev.target);
+    if (isntElOrChild && this.isExpanded) {
+      this.closeDropdown();
+    }
+  }
+  handleResize() {
+    this.debouncedResize();
+  }
+  handleInputKeyDown(ev) {
+    if (/^.$/.test(ev.key) && this.inputEl.value.length >= this.characterLimit) {
+      this.announceCharacterLimitWarning(this.inputEl.value.length, this.characterLimit);
+    }
+    // prevent keydown triggering on tag area
+    ev.stopPropagation();
+    switch (ev.key) {
+      case "Enter":
+      case ",":
+        ev.preventDefault();
+        this.submitInput(this.addNew, this.inputEl.value.trim());
+        break;
+      case "ArrowDown":
+        ev.preventDefault();
+        this.handleInputArrowDown();
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        this.handleInputArrowUp();
+        break;
+      case "Escape":
+        if (this.isExpanded) {
+          this.closeDropdown();
+        }
+        break;
+      case "ArrowLeft":
+      case "Backspace":
+        this.handleInputBackspace();
+        break;
+    }
+  }
+  handleInputChanged(value) {
+    this.charCount = value.length;
+    if (this.charCount >= this.characterLimit - 5) {
+      this.announceCharacterLimitWarning(this.charCount, this.characterLimit);
+    }
+    this.announceExistingOptions();
+    if (!this.isExpanded) {
+      this.openDropdown();
+    }
+  }
+  submitInput(canAddNew, value) {
+    const hasNonWhiteSpaceCharacters = value.match(/\S/);
+    if (canAddNew && hasNonWhiteSpaceCharacters) {
+      this.tagsList = this.addTag(value);
+      this.optionsList = this.addOption(value);
+      this.resetInput();
+      // if maxTags has been reached, focus should go to the tagArea instead of the input
+      if (this.maxTags && this.tagsList.length >= this.maxTags) {
+        this.tagAreaEl.focus();
+      }
+    }
+  }
+  handleInputArrowDown() {
+    if (this.isExpanded) {
+      this.moveDownListItem();
+    }
+    else {
+      this.openDropdown();
+    }
+  }
+  handleInputArrowUp() {
+    if (this.isExpanded) {
+      this.moveUpListItem();
+    }
+    else {
+      this.openDropdown();
+    }
+  }
+  handleInputBackspace() {
+    if (this.inputEl.value === "" && this.tagsList.length > 0) {
+      // wait for events to finish firing before redirecting focus
+      // prevents double input in input area and tag area
+      window.requestAnimationFrame(() => {
+        this.tagAreaEl.focus();
+        this.focusTag(this.tagEls[this.tagEls.length - 1]);
+      });
+    }
+  }
+  handleListItemKeyDown(ev) {
+    const typedEvTarget = ev.target;
+    switch (ev.key) {
+      case "Enter":
+      case " ":
+        ev.preventDefault();
+        typedEvTarget.click();
+        break;
+      case "ArrowDown":
+        ev.preventDefault();
+        this.moveDownListItem();
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        this.moveUpListItem();
+        break;
+      case "Escape":
+        if (this.focusedElement !== this.inputEl) {
+          this.inputEl.focus();
+        }
+        else {
+          this.closeDropdown();
+        }
+        break;
+    }
+  }
+  handleListItemClick(ev) {
+    const typedEvTarget = ev.target;
+    const tag = typedEvTarget.dataset.option.trim() || "";
+    if (this.includesCaseInsensitive(this.tagsList, tag)) {
+      this.announce(this.generateTagAlreadyAddedMessage(tag));
+    }
+    else {
+      this.announce(this.generateTagAddedMessage(tag));
+      this.resetInput();
+      this.tagsList = this.addTag(tag);
+      this.optionsList = this.addOption(tag);
+      this.focusedListItem = null;
+      // if maxTags has been reached, focus should go to the tagArea instead of the input
+      const elementToFocus = this.maxTags && this.tagsList.length >= this.maxTags ? this.tagAreaEl : this.inputEl;
+      elementToFocus.focus();
+    }
+  }
+  handleTagAreaKeyDown(ev) {
+    switch (ev.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        ev.preventDefault();
+        this.moveLeftTag();
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        ev.preventDefault();
+        this.moveRightTag();
+        break;
+      case "Backspace":
+      case "Delete":
+        this.handleTagAreaDelete();
+        break;
+    }
+  }
+  handleTagAreaDelete() {
+    if (this.focusedTag && this.focusedTag.dataset.tag) {
+      this.removeTag(this.focusedTag.dataset.tag);
+      if (this.tagsList.length === 0) {
+        // focus input if no tags are left
+        this.inputEl.focus();
+      }
+      else if (this.focusedTag === this.tagEls[this.tagEls.length - 1]) {
+        // reassign focus if removing the last tag but there are still tags remaining
+        this.focusedTag = this.tagEls[this.tagEls.length - 2];
+        this.focusTag(this.focusedTag);
+      }
+    }
+  }
+  handleBlur(ev, component) {
+    const isntElOrChild = ev.relatedTarget !== component && !this.el.shadowRoot.contains(ev.relatedTarget);
+    if (isntElOrChild) {
+      this.closeDropdown();
+      this.fieldWrapperEl.classList.remove("focused");
+    }
+  }
+  handleTagAreaFocus() {
+    this.closeDropdown();
+    if (!this.focusedTag) {
+      this.focusedTag = this.tagEls[0];
+    }
+    this.focusTag(this.focusedTag);
+  }
+  handleRemoveButtonClick(tag) {
+    this.moveLeftTag();
+    this.removeTag(tag);
+  }
+  moveDownListItem() {
+    if (this.listItemEls.length > 0) {
+      const firstListItem = this.listItemEls[0];
+      if (!this.focusedListItem) {
+        this.focusListItem(firstListItem);
+      }
+      else if (this.focusedListItem.nextElementSibling) {
+        this.focusListItem(this.focusedListItem.nextElementSibling);
+      }
+      else {
+        this.focusListItem(firstListItem);
+      }
+    }
+  }
+  moveUpListItem() {
+    if (this.listItemEls.length > 0) {
+      const lastListItem = this.listItemEls[this.listItemEls.length - 1];
+      if (!this.focusedListItem) {
+        this.focusListItem(lastListItem);
+      }
+      else if (this.focusedListItem.previousElementSibling) {
+        this.focusListItem(this.focusedListItem.previousElementSibling);
+      }
+      else {
+        this.focusedListItem = null;
+        this.inputEl.focus();
+      }
+    }
+  }
+  moveLeftTag() {
+    const lastTag = this.tagEls[this.tagEls.length - 1];
+    if (this.focusedTag && this.tagEls.includes(this.focusedTag.previousElementSibling)) {
+      this.focusedTag = this.focusedTag.previousElementSibling;
+    }
+    else {
+      this.focusedTag = lastTag;
+    }
+    this.focusTag(this.focusedTag);
+  }
+  moveRightTag() {
+    const firstTag = this.tagEls[0];
+    if (this.focusedTag && this.tagEls.includes(this.focusedTag.nextElementSibling)) {
+      this.focusedTag = this.focusedTag.nextElementSibling;
+    }
+    else {
+      this.focusedTag = firstTag;
+    }
+    this.focusTag(this.focusedTag);
+  }
+  addOption(option) {
+    let newOptionsList = this.optionsList;
+    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, option);
+    if (!optionAlreadyExists) {
+      newOptionsList = newOptionsList.concat(option);
+    }
+    return newOptionsList;
+  }
+  removeOption(option) {
+    this.optionsList = this.filterCaseInsensitive(this.optionsList, option);
+  }
+  addTag(tag) {
+    let newTagsList = this.tagsList;
+    const tagAlreadyAdded = this.includesCaseInsensitive(this.tagsList, tag);
+    const tagExistsAsOption = this.optionsList.filter((x) => x.toLowerCase() === tag.toLowerCase())[0];
+    if (!tagAlreadyAdded) {
+      this.announce(this.generateTagAddedMessage(tag));
+      newTagsList = newTagsList.concat(tagExistsAsOption || tag);
+    }
+    return newTagsList;
+  }
+  removeTag(tag) {
+    const tagRemovedMessage = intl.formatMessage({ id: "tagInput.tagRemoved", defaultMessage: "{tag} removed" }, { tag: tag });
+    this.announce(tagRemovedMessage);
+    this.tagsList = this.filterCaseInsensitive(this.tagsList, tag);
+    const devOptionsList = this.csvToArray(this.options);
+    if (this.includesCaseInsensitive(this.optionsList, tag) && !this.includesCaseInsensitive(devOptionsList, tag)) {
+      this.removeOption(tag);
+    }
+  }
+  focusListItem(item) {
+    this.focusedListItem = item;
+    item.focus();
+  }
+  focusTag(element) {
+    this.focusedTag = element;
+    this.tagAreaEl.setAttribute("aria-activedescendant", this.focusedTag.id);
+  }
+  clearTagFocus() {
+    this.tagAreaEl.removeAttribute("aria-activedescendant");
+    this.focusedTag = null;
+  }
+  openDropdown() {
+    // given an offset of -2px because the dropdown is transformed downwards to avoid overlapping the focus border
+    this.openUp = shouldOpenUp(this.el, this.dropdownEl, this.el.clientHeight, -2);
+    this.isExpanded = true;
+  }
+  closeDropdown() {
+    this.focusedListItem = null;
+    this.isExpanded = false;
+  }
+  clearListItemFocus() {
+    this.focusedListItem = null;
+    this.listItemEls.forEach((el) => {
+      el.tabIndex = -1;
+      el.classList.remove("focused");
+    });
+  }
+  resetInput() {
+    this.charCount = 0;
+    this.inputEl.value = "";
+  }
+  announce(message) {
+    // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+    if (this.liveRegionEl.textContent === message) {
+      message += "\u00A0";
+    }
+    this.liveRegionMessage = message;
+  }
+  announceExistingOptions() {
+    // request animation frame to wait for re-rendering of filtered options
+    window.requestAnimationFrame(() => {
+      const existingOptionsMessage = intl.formatMessage({
+        id: "tagInput.existingOptions",
+        defaultMessage: "{num, plural, one {1 existing option.} other {# existing options.}}",
+      }, { num: this.optionEls.length });
+      if (this.optionEls.length > 0) {
+        this.announce(existingOptionsMessage);
+      }
+    });
+  }
+  announceCharacterLimitWarning(charCount, charLimit) {
+    const charactersEnteredMessage = intl.formatMessage({
+      id: "global.charactersEntered",
+      defaultMessage: "{x, number} of {y, number} characters entered.",
+      description: "for screen readers",
+    }, { x: charCount, y: charLimit });
+    const characterLimitReachedMessage = intl.formatMessage({
+      id: "global.characterLimitReached",
+      defaultMessage: "No additional characters will be entered.",
+      description: "for screen readers",
+    });
+    this.announce(`${charactersEnteredMessage}${charCount >= charLimit ? " " + characterLimitReachedMessage : ""}`);
+  }
+  positionInput() {
+    const lastTag = this.tagEls[this.tagEls.length - 1];
+    // default placement to fall back to when no tags are present, or not enough space is available
+    this.inputEl.style.position = "static";
+    this.inputEl.style.width = "100%";
+    if (lastTag) {
+      const spaceAvailable = this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right;
+      // 150px is the minimum width of the input field
+      if (spaceAvailable >= 150) {
+        // because the input has right: 0px
+        // all thats needed to properly place it is setting position: absolute, top, and width
+        this.inputEl.style.position = "absolute";
+        this.inputEl.style.top = lastTag.offsetTop.toString() + "px";
+        this.inputEl.style.width =
+          (this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right - 8).toString() + "px";
+      }
+    }
+  }
+  /// Helpers
+  listToCSV(list) {
+    return list.join(",");
+  }
+  csvToArray(csv) {
+    return csv ? csv.split(/, ?/) : [];
+  }
+  includesCaseInsensitive(list, element) {
+    const lowercaseList = list.map((str) => str.toLowerCase());
+    return lowercaseList.includes(element.toLowerCase());
+  }
+  filterCaseInsensitive(list, element) {
+    return list.filter((x) => x.toLowerCase() !== element.toLowerCase());
+  }
+  sortCaseInsensitive(list) {
+    // The vanilla .sort method places words that start with capital letters above others (ASCII order)
+    // so we need to pass in our own compare function to sort case-insensitive
+    return list.sort((a, b) => {
+      a = a.toLowerCase();
+      b = b.toLowerCase();
+      return a > b ? 1 : a < b ? -1 : 0;
+    });
+  }
+  /// Renders
+  renderTags() {
+    return this.tagsList.map((tag, idx) => {
+      const id = `tag${idx + 1}`;
+      return (h("li", { id: id, class: `tag highlight ${this.focusedTag && this.focusedTag.id === id ? "focused" : ""}`, "data-tag": tag, role: "option" }, tag, h("button", { class: "remove-btn", tabIndex: -1, onClick: () => this.handleRemoveButtonClick(tag) })));
+    });
+  }
+  renderListItems(optionsList) {
+    optionsList = this.sortCaseInsensitive(optionsList);
+    // filter by input
+    if (this.inputEl && this.inputEl.value) {
+      optionsList = this.optionsList.filter((option) => option.toLowerCase().includes(this.inputEl.value.toLowerCase()));
+    }
+    return optionsList.map((option, idx) => {
+      const id = `option${idx + 1}`;
+      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
+      const isSelected = this.includesCaseInsensitive(this.tagsList, option);
+      return (h("li", { class: `option ${isFocused ? "focused" : ""}`, role: "option", id: id, "data-option": option, tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected ? "true" : "false", "aria-disabled": isSelected ? "true" : "false", onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev) }, option));
+    });
+  }
+  renderAddNewButton() {
+    const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\S/);
+    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, this.inputEl.value.trim());
+    if (this.addNew && hasNonWhiteSpaceCharacters && !optionAlreadyExists) {
+      const id = `add-new-btn`;
+      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
+      return (h("li", { role: "option", class: `add-new-btn ${isFocused ? "focused" : ""}`, id: id, "data-option": this.inputEl.value, onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev), tabIndex: isFocused ? 0 : -1 }, `Add "${this.inputEl.value.trim()}"`));
+    }
+    else
+      return "";
+  }
+  renderHelpText() {
+    const helpTextHasOptions = intl.formatMessage({
+      id: "tagInput.helpTextCanSelect",
+      defaultMessage: "Search and select a tag.",
+      description: "Placeholder text. Use imperative",
+    });
+    const helpTextEditable = intl.formatMessage({
+      id: "tagInput.helpTextEditable",
+      defaultMessage: "Press the Enter or Comma key to add a new tag.",
+      description: "Placeholder text. Use imperative",
+    });
+    let helpText = "";
+    if (this.optionsList.length > 0) {
+      helpText += helpTextHasOptions;
+    }
+    if (this.addNew) {
+      helpText += " " + helpTextEditable;
+    }
+    return helpText;
+  }
+  renderTagCounter() {
+    if (this.maxTags) {
+      return (h("div", { class: "lower-row" }, h("div", { id: "max-tags" }, this.generateTagCounterMessage(this.tagsList.length, this.maxTags), this.tagsList.length >= this.maxTags && h("span", { class: "sr-only" }, this.maxTagsReachedMessage))));
+    }
+  }
+  render() {
+    const isFocused = this.focusedElement &&
+      (this.focusedElement === this.inputEl ||
+        this.focusedElement === this.tagAreaEl ||
+        this.focusedElement.classList.contains("add-new-btn") ||
+        (this.optionsList.length > 0 && this.listItemEls.includes(this.focusedElement)));
+    return (h(Host, { id: this.uid }, h("div", { class: `wrapper label-${this.labelPosition}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: `input${this.uid}` }, this.label)), h("div", { class: `field-wrapper ${isFocused ? "focused" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: "tags-and-input-wrapper" }, h("ul", { ref: (el) => (this.tagAreaEl = el), class: "tag-area", role: "listbox", "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagsList.length > 0 ? this.tagAreaInstructions : ""}`, tabindex: this.tagsList.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: () => this.handleTagAreaFocus(), onBlur: (ev) => {
+        this.clearTagFocus();
+        this.handleBlur(ev, this.el);
+      }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { id: `input${this.uid}`, class: this.maxTags && this.tagsList.length >= this.maxTags ? "hidden" : "", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-controls": "dropdown", "aria-describedby": "help-text", "aria-label": `${this.label} ${this.generateCharacterLimitLabel(this.characterLimit)}`, "aria-expanded": this.isExpanded ? "true" : "false", placeholder: this.placeholder, maxLength: this.characterLimit, onInput: () => this.handleInputChanged(this.inputEl.value), onBlur: (ev) => {
+        this.handleBlur(ev, this.el);
+      }, onFocus: () => {
+        this.openDropdown();
+        this.clearListItemFocus();
+      }, onKeyDown: (ev) => this.handleInputKeyDown(ev) })), h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)), this.renderTagCounter(), h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("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)))), this.info ? (h("div", { id: "info", class: "info-text" }, this.info)) : (""), h("div", { class: "sr-only", "aria-live": "assertive", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "tagsList": ["reflectSelectedTags"]
+  }; }
+};
 TagInput.style = wmTagInputCss;
 
 export { TagInput as wm_tag_input };