@watermarkinsights/ripple 0.0.0 → 3.0.1-1

package/dist/collection/components/wm-tag-input/wm-tag-input.js

@@ -1,707 +0,0 @@
-import { h, Component, Host, Element, Prop, Listen, State, Event, Watch } from "@stencil/core";
-import { generateId, shouldOpenUp, intl } from "../../global/functions";
-export class TagInput {
-  constructor() {
-    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.",
-    });
-  }
-  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 });
-  }
-  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.consolidateSelectedTags();
-  }
-  componentDidLoad() {
-    // prevent highlighting of pre-selected tags
-    this.tagEls.forEach((el) => el.classList.remove("highlight"));
-  }
-  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",
-    });
-    const searchPlaceholder = intl.formatMessage({
-      id: "tagInput.placeholderSearch",
-      defaultMessage: "Search and select a tag",
-    });
-    const addPlaceholder = intl.formatMessage({
-      id: "tagInput.placeholderAdd",
-      defaultMessage: "Add a new tag",
-    });
-    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();
-    }
-  }
-  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) {
-    if (canAddNew && value) {
-      this.tagsList = this.addTag(value);
-      this.optionsList = this.addOption(value);
-      this.resetInput();
-    }
-  }
-  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;
-      this.inputEl.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() {
-    this.openUp = shouldOpenUp(this.el, this.dropdownEl, this.el.clientHeight);
-    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: "tagInput.charactersEntered",
-      defaultMessage: "{x, number} of {y, number} characters entered.",
-    }, { x: charCount, y: charLimit });
-    const characterLimitReachedMessage = intl.formatMessage({
-      id: "tagInput.characterLimitReached",
-      defaultMessage: "No additional characters will be entered.",
-    });
-    this.announce(`${charactersEnteredMessage}${charCount >= charLimit ? " " + characterLimitReachedMessage : ""}`);
-  }
-  /// 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() {
-    if (this.inputEl.value.length > 0 &&
-      this.addNew &&
-      !this.includesCaseInsensitive(this.optionsList, this.inputEl.value)) {
-      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}"`));
-    }
-    else
-      return "";
-  }
-  renderHelpText() {
-    const helpTextHasOptions = intl.formatMessage({
-      id: "tagInput.helpTextCanSelect",
-      defaultMessage: "Search and select a tag.",
-    });
-    const helpTextEditable = intl.formatMessage({
-      id: "tagInput.helpTextEditable",
-      defaultMessage: "Press the Enter or Comma key to add a new tag.",
-    });
-    let helpText = "";
-    if (this.optionsList.length > 0) {
-      helpText += helpTextHasOptions;
-    }
-    if (this.addNew) {
-      helpText += " " + helpTextEditable;
-    }
-    return helpText;
-  }
-  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: "inner-wrapper" },
-            h("ul", { ref: (el) => (this.tagAreaEl = el), class: "tag-area", role: "listbox", "aria-horizontal": "true", "aria-label": this.tagsList.length > 0 && `${this.label} ${this.tagAreaInstructions}`, tabindex: this.tagsList.length > 0 ? 0 : -1, "aria-describedby": "info", onFocus: () => this.handleTagAreaFocus(), onBlur: (ev) => {
-                this.clearTagFocus();
-                this.handleBlur(ev, this.el);
-              }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) },
-              this.renderTags(),
-              h("div", { class: "input-wrapper", role: "none" },
-                h("input", { id: `input${this.uid}`, role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-controls": "dropdown", "aria-describedby": "help-text", "aria-label": this.label, 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),
-          h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}` },
-            h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()),
-            h("ul", { class: "dropdown", ref: (el) => (this.dropdownEl = el), 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))));
-  }
-  static get is() { return "wm-tag-input"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-tag-input.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-tag-input.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "labelPosition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"top\" | \"left\" | \"none\"",
-        "resolved": "\"left\" | \"none\" | \"top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label-position",
-      "reflect": false,
-      "defaultValue": "\"top\""
-    },
-    "options": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "options",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "selectedTags": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "selected-tags",
-      "reflect": true,
-      "defaultValue": "\"\""
-    },
-    "info": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "info",
-      "reflect": false
-    },
-    "addNew": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "add-new",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "characterLimit": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "character-limit",
-      "reflect": false,
-      "defaultValue": "50"
-    }
-  }; }
-  static get states() { return {
-    "focusedListItem": {},
-    "focusedTag": {},
-    "isExpanded": {},
-    "tagsList": {},
-    "optionsList": {},
-    "charCount": {},
-    "liveRegionMessage": {}
-  }; }
-  static get events() { return [{
-      "method": "wmTagInputChanged",
-      "name": "wmTagInputChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{ value: string[] }",
-        "resolved": "{ value: string[]; }",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "tagsList",
-      "methodName": "reflectSelectedTags"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "closeIfNotElOrChild",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }]; }
-}