@limetech/lime-elements 33.12.1-next.5 → 33.13.0-next.2

package/dist/collection/components/input-field/input-field.js

@@ -81,6 +81,145 @@ export class InputField {
     this.isModified = false;
     this.showCompletions = false;
     this.completionsList = [];
+    this.initialize = () => {
+      const element = this.limelInputField.shadowRoot.querySelector('.mdc-text-field');
+      if (!element) {
+        return;
+      }
+      this.mdcTextField = new MDCTextField(element);
+      this.completionsList = [...this.completions].map((item) => {
+        return { text: item };
+      });
+      window.addEventListener('resize', this.layout, { passive: true });
+      this.limelInputField.addEventListener('focus', this.setFocus);
+    };
+    this.setFocus = () => {
+      this.mdcTextField.focus();
+    };
+    this.getContainerClassList = () => {
+      const classList = {
+        'mdc-text-field': true,
+        'mdc-text-field--outlined': true,
+        'mdc-text-field--invalid': this.isInvalid(),
+        'mdc-text-field--disabled': this.disabled || this.readonly,
+        'lime-text-field--readonly': this.readonly,
+        'mdc-text-field--required': this.required,
+        'mdc-text-field--with-trailing-icon': !!this.getTrailingIcon(),
+      };
+      if (this.type === 'textarea') {
+        classList['mdc-text-field--textarea'] = true;
+        classList['has-helper-line'] =
+          !!this.helperText || !!this.maxlength;
+      }
+      else {
+        classList['mdc-text-field--with-leading-icon'] = !!this.leadingIcon;
+      }
+      return classList;
+    };
+    this.renderInput = (properties) => {
+      if (this.type === 'textarea') {
+        return;
+      }
+      const type = this.type === 'urlAsText' ? 'text' : this.type;
+      return (h("input", Object.assign({}, properties, { type: type, pattern: this.pattern, onWheel: this.handleWheel, onKeyDown: this.onKeyDown, value: this.value })));
+    };
+    this.renderTextarea = (properties) => {
+      if (this.type !== 'textarea') {
+        return;
+      }
+      return (h("span", { class: "mdc-text-field__resizer" },
+        h("textarea", Object.assign({}, properties), this.value)));
+    };
+    this.layout = () => {
+      var _a;
+      (_a = this.mdcTextField) === null || _a === void 0 ? void 0 : _a.layout();
+    };
+    this.getAdditionalProps = () => {
+      const props = {};
+      if (this.type === 'number') {
+        props.step = this.step;
+      }
+      if (this.type === 'number' && Number.isInteger(this.min)) {
+        props.min = this.min;
+      }
+      if (this.type === 'number' && Number.isInteger(this.max)) {
+        props.max = this.max;
+      }
+      if (this.minlength) {
+        props.minlength = this.minlength;
+      }
+      if (this.maxlength) {
+        props.maxlength = this.maxlength;
+      }
+      return props;
+    };
+    this.onFocus = () => {
+      this.isFocused = true;
+      this.showCompletions = true;
+    };
+    this.onBlur = () => {
+      this.isFocused = false;
+      this.isModified = true;
+    };
+    this.renderHelperLine = () => {
+      if (!this.maxlength && !this.hasHelperText()) {
+        return;
+      }
+      return (h("div", { tabIndex: -1, class: "mdc-text-field-helper-line" },
+        this.renderHelperText(),
+        this.renderCharacterCounter()));
+    };
+    this.renderEmptyValueForReadonly = () => {
+      if (this.readonly && !this.value) {
+        return (h("span", { class: "lime-empty-value-for-readonly lime-looks-like-input-value" }, "\u2013"));
+      }
+    };
+    this.renderHelperText = () => {
+      if (!this.hasHelperText()) {
+        return;
+      }
+      const classList = {
+        'mdc-text-field-helper-text': true,
+        'mdc-text-field-helper-text--validation-msg': this.isInvalid(),
+      };
+      return (h("p", { class: classList, id: helperTextId }, this.helperText));
+    };
+    this.hasHelperText = () => {
+      return this.helperText !== null && this.helperText !== undefined;
+    };
+    this.renderCharacterCounter = () => {
+      if (!this.maxlength || this.type === 'number') {
+        return;
+      }
+      const text = this.value || '';
+      const label = `${text.length} / ${this.maxlength}`;
+      return h("div", { class: "mdc-text-field-character-counter" }, label);
+    };
+    this.isInvalid = () => {
+      if (this.readonly) {
+        // A readonly field can never be invalid.
+        return false;
+      }
+      if (this.invalid) {
+        // `this.invalid` is set by the consumer. If the consumer explicitly
+        // told us to consider the field invalid, we consider it invalid
+        // regardless of what our internal validation thinks, and regardless
+        // of whether the field has been modified.
+        return true;
+      }
+      if (!this.isModified) {
+        return false;
+      }
+      const element = this.getInputElement();
+      return !(element && element.checkValidity());
+    };
+    this.getInputElement = () => {
+      let elementName = 'input';
+      if (this.type === 'textarea') {
+        elementName = 'textarea';
+      }
+      return this.limelInputField.shadowRoot.querySelector(elementName);
+    };
     this.renderLeadingIcon = () => {
       if (this.type === 'textarea') {
         return;
@@ -104,25 +243,210 @@ export class InputField {
       }
       return html;
     };
+    this.hasLink = () => {
+      return (this.showLink &&
+        ['email', 'tel', 'url', 'urlAsText'].includes(this.type));
+    };
+    this.getLink = () => {
+      const props = { href: '' };
+      switch (this.type) {
+        case 'email':
+          props.href = `mailto:${this.value}`;
+          break;
+        case 'tel':
+          props.href = `tel:${this.value}`;
+          break;
+        default:
+          props.href = getHref(this.value);
+          props.target = getTarget(this.value);
+      }
+      return props;
+    };
+    this.renderLinkIcon = (linkProps, icon) => {
+      // If the trailing icon uses the class `mdc-text-field__icon--trailing`,
+      // MDC attaches a click handler to it, which apparently runs
+      // `preventDefault()` on the event. For links, we don't want that,
+      // so instead of `mdc-text-field__icon--trailing`, we use our own class
+      // `lime-trailing-icon-for-link`, which uses all the same styling. /Ads
+      return (h("a", Object.assign({}, linkProps, { class: "material-icons mdc-text-field__icon lime-trailing-icon-for-link", tabindex: this.disabled ? '-1' : '0', role: "button" }),
+        h("limel-icon", { name: icon })));
+    };
+    this.renderTrailingIcon = (icon) => {
+      const props = {
+        tabIndex: this.isInvalid() ? '-1' : '0',
+      };
+      if (!this.isInvalid()) {
+        props.onKeyPress = this.handleIconKeyPress;
+        props.onClick = this.handleIconClick;
+        props.role = 'button';
+      }
+      return (h("i", Object.assign({ class: "material-icons mdc-text-field__icon mdc-text-field__icon--trailing" }, props),
+        h("limel-icon", { name: icon })));
+    };
+    this.getTrailingIcon = () => {
+      if (this.isInvalid()) {
+        return 'high_importance';
+      }
+      if (this.trailingIcon) {
+        return this.trailingIcon;
+      }
+      if (this.showLink && this.type === 'email') {
+        return 'filled_message';
+      }
+      if (this.showLink && this.type === 'tel') {
+        return 'phone';
+      }
+      if (this.showLink &&
+        (this.type === 'url' || this.type === 'urlAsText')) {
+        return 'external_link';
+      }
+    };
+    this.renderFormattedNumber = () => {
+      if (this.type !== 'number') {
+        return;
+      }
+      let renderValue = this.value;
+      if (this.formatNumber && this.value) {
+        renderValue = new Intl.NumberFormat(navigator.language).format(Number(this.value));
+      }
+      return (h("span", { class: "lime-formatted-input lime-looks-like-input-value" }, renderValue));
+    };
+    /**
+     * Key handler for the input field
+     * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
+     *
+     * @param {KeyboardEvent} event event
+     * @returns {void}
+     */
+    this.onKeyDown = (event) => {
+      this.showCompletions = true;
+      const isForwardTab = (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&
+        !event.altKey &&
+        !event.metaKey &&
+        !event.shiftKey;
+      const isUp = event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;
+      const isDown = event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;
+      if (event.keyCode === TAB_KEY_CODE && event.shiftKey) {
+        this.showCompletions = false;
+      }
+      if (!isForwardTab && !isUp && !isDown) {
+        return;
+      }
+      const list = document.querySelector(` #${this.portalId} limel-list`);
+      if (!list) {
+        return;
+      }
+      event.preventDefault();
+      if (isForwardTab || isDown) {
+        const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item:first-child');
+        listElement.focus();
+        return;
+      }
+      if (isUp) {
+        const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item:last-child');
+        listElement.focus();
+      }
+    };
+    this.handleCompletionChange = (event) => {
+      event.stopPropagation();
+      if (!event.detail) {
+        return;
+      }
+      this.showCompletions = false;
+      /*
+       This change event doesn't need to be debounced in itself, but we want
+       to make absolutely sure that an earlier change event that *has* been
+       debounced doesn't emit after this one. Therefore, we run this through
+       the same debounced emitter function. /Ads
+       */
+      this.changeEmitter(event.detail.text);
+    };
+    this.renderAutocompleteList = () => {
+      if (this.type === 'textarea' || !this.completions.length) {
+        return;
+      }
+      return this.renderDropdown();
+    };
+    this.renderPortal = (content = null) => {
+      const dropdownZIndex = getComputedStyle(this.limelInputField).getPropertyValue('--dropdown-z-index');
+      return (h("limel-portal", { visible: this.showCompletions, containerId: this.portalId, inheritParentWidth: true, containerStyle: { 'z-index': dropdownZIndex } },
+        h("limel-menu-surface", { open: this.showCompletions, allowClicksElement: this.limelInputField, style: {
+            '--menu-surface-width': '100%',
+            'max-height': 'inherit',
+            display: 'flex',
+          }, onDismiss: this.handleCloseMenu }, content)));
+    };
+    this.renderDropdown = () => {
+      const content = this.renderListResult();
+      return this.renderPortal(content);
+    };
+    this.renderListResult = () => {
+      const filteredCompletions = this.filterCompletions(this.value);
+      if (!filteredCompletions || filteredCompletions.length === 0) {
+        return null;
+      }
+      return (h("limel-list", { onChange: this.handleCompletionChange, onKeyDown: this.handleKeyDownInDropdown, type: "selectable", items: filteredCompletions }));
+    };
+    this.handleKeyDownInDropdown = (event) => {
+      const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);
+      const keyCodeFound = [
+        TAB_KEY_CODE,
+        ESCAPE_KEY_CODE,
+        ENTER_KEY_CODE,
+      ].includes(event.keyCode);
+      if (keyFound || keyCodeFound) {
+        this.setFocus();
+      }
+    };
+    this.handleCloseMenu = () => {
+      this.showCompletions = false;
+    };
     this.filterCompletions = (filter) => {
       if (!filter) {
         return this.completionsList;
       }
       return this.completionsList.filter((completion) => completion.text.toLowerCase().indexOf(filter.toLowerCase()) > -1);
     };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleIconKeyPress = this.handleIconKeyPress.bind(this);
-    this.handleIconClick = this.handleIconClick.bind(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-    this.handleCompletionChange = this.handleCompletionChange.bind(this);
-    this.layout = this.layout.bind(this);
-    this.changeEmitter = this.changeEmitter.bind(this);
-    this.getContainerClassList = this.getContainerClassList.bind(this);
-    this.handleCloseMenu = this.handleCloseMenu.bind(this);
-    this.setFocus = this.setFocus.bind(this);
-    this.handleKeyDownInDropdown = this.handleKeyDownInDropdown.bind(this);
+    this.handleChange = (event) => {
+      event.stopPropagation();
+      let value = event.target.value;
+      if (this.type === 'number') {
+        if (!value && event.data) {
+          event.stopPropagation();
+          return;
+        }
+        if (value) {
+          value = Number(value);
+        }
+      }
+      this.changeEmitter(value);
+    };
+    this.changeEmitter = (value) => {
+      this.change.emit(value);
+    };
+    this.handleIconClick = () => {
+      if (!this.isInvalid()) {
+        this.action.emit();
+      }
+    };
+    this.handleIconKeyPress = (event) => {
+      const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;
+      const isSpace = event.key === SPACE || event.keyCode === SPACE_KEY_CODE;
+      if ((isSpace || isEnter) && !this.isInvalid()) {
+        this.action.emit();
+      }
+    };
+    this.handleWheel = () => {
+      // This empty event handler is here to circumvent a bug.
+      // In some browsers (Chrome for example), hovering the input with
+      // the input focused, and scrolling, will both change the value
+      // AND scroll the page. We would prefer to never change the value
+      // on scroll, instead always scrolling the page, but since we
+      // haven't found a way to do that, this is the next best thing, as
+      // it prevents the page from being scrolled, but only in the
+      // circumstances when the value is changed by the scrolling.
+      // Please test THOROUGHLY if you remove this event handler 😄
+    };
     const debounceTimeout = 300;
     this.changeEmitter = debounce(this.changeEmitter, debounceTimeout);
     this.portalId = createRandomString();
@@ -133,18 +457,6 @@ export class InputField {
   componentDidLoad() {
     this.initialize();
   }
-  initialize() {
-    const element = this.limelInputField.shadowRoot.querySelector('.mdc-text-field');
-    if (!element) {
-      return;
-    }
-    this.mdcTextField = new MDCTextField(element);
-    this.completionsList = [...this.completions].map((item) => {
-      return { text: item };
-    });
-    window.addEventListener('resize', this.layout, { passive: true });
-    this.limelInputField.addEventListener('focus', this.setFocus);
-  }
   disconnectedCallback() {
     if (this.mdcTextField) {
       this.mdcTextField.destroy();
@@ -184,18 +496,15 @@ export class InputField {
             h("span", { class: labelClassList, id: labelId }, this.label)),
           h("span", { class: "mdc-notched-outline__trailing" })),
         this.renderLeadingIcon(),
-        this.renderFormattedNumber(),
         this.renderEmptyValueForReadonly(),
         this.renderInput(properties),
         this.renderTextarea(properties),
+        this.renderFormattedNumber(),
         this.renderTrailingLinkOrButton()),
       this.renderHelperLine(),
       this.renderAutocompleteList(),
     ];
   }
-  setFocus() {
-    this.mdcTextField.focus();
-  }
   valueWatcher(newValue) {
     if (!this.mdcTextField) {
       return;
@@ -204,328 +513,6 @@ export class InputField {
       this.mdcTextField.value = newValue || '';
     }
   }
-  getContainerClassList() {
-    const classList = {
-      'mdc-text-field': true,
-      'mdc-text-field--outlined': true,
-      'mdc-text-field--invalid': this.isInvalid(),
-      'mdc-text-field--disabled': this.disabled || this.readonly,
-      'lime-text-field--readonly': this.readonly,
-      'mdc-text-field--required': this.required,
-      'mdc-text-field--with-trailing-icon': !!this.getTrailingIcon(),
-    };
-    if (this.type === 'textarea') {
-      classList['mdc-text-field--textarea'] = true;
-      classList['has-helper-line'] =
-        !!this.helperText || !!this.maxlength;
-    }
-    else {
-      classList['mdc-text-field--with-leading-icon'] = !!this.leadingIcon;
-    }
-    return classList;
-  }
-  renderInput(properties) {
-    if (this.type === 'textarea') {
-      return;
-    }
-    const type = this.type === 'urlAsText' ? 'text' : this.type;
-    return (h("input", Object.assign({}, properties, { type: type, pattern: this.pattern, onWheel: this.handleWheel, onKeyDown: this.onKeyDown, value: this.value })));
-  }
-  renderTextarea(properties) {
-    if (this.type !== 'textarea') {
-      return;
-    }
-    return (h("span", { class: "mdc-text-field__resizer" },
-      h("textarea", Object.assign({}, properties), this.value)));
-  }
-  layout() {
-    var _a;
-    (_a = this.mdcTextField) === null || _a === void 0 ? void 0 : _a.layout();
-  }
-  getAdditionalProps() {
-    const props = {};
-    if (this.type === 'number') {
-      props.step = this.step;
-    }
-    if (this.type === 'number' && Number.isInteger(this.min)) {
-      props.min = this.min;
-    }
-    if (this.type === 'number' && Number.isInteger(this.max)) {
-      props.max = this.max;
-    }
-    if (this.minlength) {
-      props.minlength = this.minlength;
-    }
-    if (this.maxlength) {
-      props.maxlength = this.maxlength;
-    }
-    return props;
-  }
-  onFocus() {
-    this.isFocused = true;
-    this.showCompletions = true;
-  }
-  onBlur() {
-    this.isFocused = false;
-    this.isModified = true;
-  }
-  renderHelperLine() {
-    if (!this.maxlength && !this.hasHelperText()) {
-      return;
-    }
-    return (h("div", { tabIndex: -1, class: "mdc-text-field-helper-line" },
-      this.renderHelperText(),
-      this.renderCharacterCounter()));
-  }
-  renderEmptyValueForReadonly() {
-    if (this.readonly && !this.value) {
-      return (h("span", { class: "lime-empty-value-for-readonly lime-looks-like-input-value" }, "\u2013"));
-    }
-  }
-  renderHelperText() {
-    if (!this.hasHelperText()) {
-      return;
-    }
-    const classList = {
-      'mdc-text-field-helper-text': true,
-      'mdc-text-field-helper-text--validation-msg': this.isInvalid(),
-    };
-    return (h("p", { class: classList, id: helperTextId }, this.helperText));
-  }
-  hasHelperText() {
-    return this.helperText !== null && this.helperText !== undefined;
-  }
-  renderCharacterCounter() {
-    if (!this.maxlength || this.type === 'number') {
-      return;
-    }
-    const text = this.value || '';
-    const label = `${text.length} / ${this.maxlength}`;
-    return h("div", { class: "mdc-text-field-character-counter" }, label);
-  }
-  isInvalid() {
-    if (this.readonly) {
-      // A readonly field can never be invalid.
-      return false;
-    }
-    if (this.invalid) {
-      // `this.invalid` is set by the consumer. If the consumer explicitly
-      // told us to consider the field invalid, we consider it invalid
-      // regardless of what our internal validation thinks, and regardless
-      // of whether the field has been modified.
-      return true;
-    }
-    if (!this.isModified) {
-      return false;
-    }
-    const element = this.getInputElement();
-    return !(element && element.checkValidity());
-  }
-  getInputElement() {
-    let elementName = 'input';
-    if (this.type === 'textarea') {
-      elementName = 'textarea';
-    }
-    return this.limelInputField.shadowRoot.querySelector(elementName);
-  }
-  hasLink() {
-    return (this.showLink &&
-      ['email', 'tel', 'url', 'urlAsText'].includes(this.type));
-  }
-  getLink() {
-    const props = { href: '' };
-    switch (this.type) {
-      case 'email':
-        props.href = `mailto:${this.value}`;
-        break;
-      case 'tel':
-        props.href = `tel:${this.value}`;
-        break;
-      default:
-        props.href = getHref(this.value);
-        props.target = getTarget(this.value);
-    }
-    return props;
-  }
-  renderLinkIcon(linkProps, icon) {
-    // If the trailing icon uses the class `mdc-text-field__icon--trailing`,
-    // MDC attaches a click handler to it, which apparently runs
-    // `preventDefault()` on the event. For links, we don't want that,
-    // so instead of `mdc-text-field__icon--trailing`, we use our own class
-    // `lime-trailing-icon-for-link`, which uses all the same styling. /Ads
-    return (h("a", Object.assign({}, linkProps, { class: "material-icons mdc-text-field__icon lime-trailing-icon-for-link", tabindex: this.disabled ? '-1' : '0', role: "button" }),
-      h("limel-icon", { name: icon })));
-  }
-  renderTrailingIcon(icon) {
-    const props = {
-      tabIndex: this.isInvalid() ? '-1' : '0',
-    };
-    if (!this.isInvalid()) {
-      props.onKeyPress = this.handleIconKeyPress;
-      props.onClick = this.handleIconClick;
-      props.role = 'button';
-    }
-    return (h("i", Object.assign({ class: "material-icons mdc-text-field__icon mdc-text-field__icon--trailing" }, props),
-      h("limel-icon", { name: icon })));
-  }
-  getTrailingIcon() {
-    if (this.isInvalid()) {
-      return 'high_importance';
-    }
-    if (this.trailingIcon) {
-      return this.trailingIcon;
-    }
-    if (this.showLink && this.type === 'email') {
-      return 'filled_message';
-    }
-    if (this.showLink && this.type === 'tel') {
-      return 'phone';
-    }
-    if (this.showLink &&
-      (this.type === 'url' || this.type === 'urlAsText')) {
-      return 'external_link';
-    }
-  }
-  renderFormattedNumber() {
-    if (this.type !== 'number' || !this.value) {
-      return;
-    }
-    let renderValue = this.value;
-    if (this.formatNumber) {
-      renderValue = new Intl.NumberFormat(navigator.language).format(Number(this.value));
-    }
-    return (h("span", { class: "lime-formatted-input lime-looks-like-input-value" }, renderValue));
-  }
-  /**
-   * Key handler for the input field
-   * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
-   *
-   * @param {KeyboardEvent} event event
-   * @returns {void}
-   */
-  onKeyDown(event) {
-    this.showCompletions = true;
-    const isForwardTab = (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&
-      !event.altKey &&
-      !event.metaKey &&
-      !event.shiftKey;
-    const isUp = event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;
-    const isDown = event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;
-    if (event.keyCode === TAB_KEY_CODE && event.shiftKey) {
-      this.showCompletions = false;
-    }
-    if (!isForwardTab && !isUp && !isDown) {
-      return;
-    }
-    const list = document.querySelector(` #${this.portalId} limel-list`);
-    if (!list) {
-      return;
-    }
-    event.preventDefault();
-    if (isForwardTab || isDown) {
-      const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item:first-child');
-      listElement.focus();
-      return;
-    }
-    if (isUp) {
-      const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item:last-child');
-      listElement.focus();
-    }
-  }
-  handleCompletionChange(event) {
-    event.stopPropagation();
-    if (!event.detail) {
-      return;
-    }
-    this.showCompletions = false;
-    /*
-     This change event doesn't need to be debounced in itself, but we want
-     to make absolutely sure that an earlier change event that *has* been
-     debounced doesn't emit after this one. Therefore, we run this through
-     the same debounced emitter function. /Ads
-     */
-    this.changeEmitter(event.detail.text);
-  }
-  renderAutocompleteList() {
-    if (this.type === 'textarea' || !this.completions.length) {
-      return;
-    }
-    return this.renderDropdown();
-  }
-  renderPortal(content = null) {
-    const dropdownZIndex = getComputedStyle(this.limelInputField).getPropertyValue('--dropdown-z-index');
-    return (h("limel-portal", { visible: this.showCompletions, containerId: this.portalId, inheritParentWidth: true, containerStyle: { 'z-index': dropdownZIndex } },
-      h("limel-menu-surface", { open: this.showCompletions, allowClicksElement: this.limelInputField, style: {
-          '--menu-surface-width': '100%',
-          'max-height': 'inherit',
-          display: 'flex',
-        }, onDismiss: this.handleCloseMenu }, content)));
-  }
-  renderDropdown() {
-    const content = this.renderListResult();
-    return this.renderPortal(content);
-  }
-  renderListResult() {
-    const filteredCompletions = this.filterCompletions(this.value);
-    if (!filteredCompletions || filteredCompletions.length === 0) {
-      return null;
-    }
-    return (h("limel-list", { onChange: this.handleCompletionChange, onKeyDown: this.handleKeyDownInDropdown, type: "selectable", items: filteredCompletions }));
-  }
-  handleKeyDownInDropdown(event) {
-    const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);
-    const keyCodeFound = [
-      TAB_KEY_CODE,
-      ESCAPE_KEY_CODE,
-      ENTER_KEY_CODE,
-    ].includes(event.keyCode);
-    if (keyFound || keyCodeFound) {
-      this.setFocus();
-    }
-  }
-  handleCloseMenu() {
-    this.showCompletions = false;
-  }
-  handleChange(event) {
-    event.stopPropagation();
-    let value = event.target.value;
-    if (this.type === 'number') {
-      if (!value && event.data) {
-        event.stopPropagation();
-        return;
-      }
-      if (value) {
-        value = Number(value);
-      }
-    }
-    this.changeEmitter(value);
-  }
-  changeEmitter(value) {
-    this.change.emit(value);
-  }
-  handleIconClick() {
-    if (!this.isInvalid()) {
-      this.action.emit();
-    }
-  }
-  handleIconKeyPress(event) {
-    const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;
-    const isSpace = event.key === SPACE || event.keyCode === SPACE_KEY_CODE;
-    if ((isSpace || isEnter) && !this.isInvalid()) {
-      this.action.emit();
-    }
-  }
-  handleWheel() {
-    // This empty event handler is here to circumvent a bug.
-    // In some browsers (Chrome for example), hovering the input with
-    // the input focused, and scrolling, will both change the value
-    // AND scroll the page. We would prefer to never change the value
-    // on scroll, instead always scrolling the page, but since we
-    // haven't found a way to do that, this is the next best thing, as
-    // it prevents the page from being scrolled, but only in the
-    // circumstances when the value is changed by the scrolling.
-    // Please test THOROUGHLY if you remove this event handler 😄
-  }
   static get is() { return "limel-input-field"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {