v4web-components/dist/collection/components/input/lab-ds-text-field-with-tag/lab-ds-text-field-with-tag.js

Stencil Component Starter

import { h } from '@stencil/core';
export class LabDsTextFieldWithTag {
  constructor() {
    this.optionsSelected = undefined;
    this.value = undefined;
    this.titleInput = '';
    this.label = '';
    this.avatar = true;
    this.labelIcon = '';
    this.disabled = false;
    this.helperText = '';
    this.state = 'default';
  }
  handleChange(event) {
    this.changeInput.emit(event.target.value);
    this.value = event.target.value;
  }
  handleRemoveOption(event) {
    this.optionsSelected = this.optionsSelected.filter(option => option.label !== event);
    this.changeInputOption.emit(this.optionsSelected);
  }
  handleSubmitInput(event) {
    var _a;
    event.preventDefault();
    const option = {
      label: this.value,
      key: 'string',
    };
    ((_a = this.optionsSelected) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (this.optionsSelected = [...this.optionsSelected, option]) : (this.optionsSelected = [option]);
    this.changeInput.emit('');
    this.changeInputOption.emit(this.optionsSelected);
    this.value = '';
  }
  render() {
    var _a, _b;
    const iconHelper = {
      error: { icon: 'error' },
      success: { icon: 'check_circle' },
      default: { icon: '' },
    };
    const slider = document.querySelector('lab-ds-text-field-with-tag').shadowRoot.querySelector('.chip-group');
    let isDown = false;
    let startX;
    let scrollLeft;
    if (slider) {
      slider.addEventListener('mousedown', (e) => {
        isDown = true;
        slider.classList.add('active');
        startX = e.pageX - slider.offsetLeft;
        scrollLeft = slider.scrollLeft;
      });
      slider.addEventListener('mouseleave', () => {
        isDown = false;
        slider.classList.remove('active');
      });
      slider.addEventListener('mouseup', () => {
        isDown = false;
        slider.classList.remove('active');
      });
      slider.addEventListener('mousemove', (e) => {
        if (!isDown)
          return;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - startX) * 3; //scroll-fast
        slider.scrollLeft = scrollLeft - walk;
      });
    }
    return (h("div", { class: `v4-input ${this.state} ${this.disabled && 'disabled'}` }, h("span", { class: "title-text" }, this.titleInput), h("div", { class: "input-helper" }, h("div", { class: "input-icon" }, this.labelIcon && h("lab-ds-icon-not-selectable", { class: "icon left", size: "small", icon: this.labelIcon }), ((_a = this.optionsSelected) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { class: "chip-group" }, h("div", { class: "chips" }, (_b = this.optionsSelected) === null || _b === void 0 ? void 0 : _b.map(option => (h("lab-ds-chip", { size: "small", class: "chip", avatar: this.avatar, label: option.label, nameAvatar: option.nameAvatar, imageSRCAvatar: option.imgSRCAvatar, onHandleCloseChip: () => this.handleRemoveOption(option.label) })))))), h("form", { class: "input-field", onSubmit: event => {
        this.handleSubmitInput(event);
      } }, h("input", { disabled: this.disabled, placeholder: this.label, type: "text", value: this.value, onInput: event => {
        this.handleChange(event);
      } })), h("lab-ds-icon-not-selectable", { class: "icon right", size: "small", icon: iconHelper[this.state].icon })), this.helperText && (h("span", { class: "helper-text" }, iconHelper[this.state].icon && h("lab-ds-icon-not-selectable", { class: "icon", size: "x-small", icon: iconHelper[this.state].icon }), this.helperText)))));
  }
  static get is() { return "lab-ds-text-field-with-tag"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["lab-ds-text-field-with-tag.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["lab-ds-text-field-with-tag.css"]
    };
  }
  static get properties() {
    return {
      "optionsSelected": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "Array<{ label: string; key: string; nameAvatar?: string; imgSRCAvatar?: string }>",
          "resolved": "{ label: string; key: string; nameAvatar?: string; imgSRCAvatar?: string; }[]",
          "references": {
            "Array": {
              "location": "global"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        }
      },
      "value": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "value",
        "reflect": false
      },
      "titleInput": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "title-input",
        "reflect": false,
        "defaultValue": "''"
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "label",
        "reflect": false,
        "defaultValue": "''"
      },
      "avatar": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "avatar",
        "reflect": false,
        "defaultValue": "true"
      },
      "labelIcon": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "label-icon",
        "reflect": false,
        "defaultValue": "''"
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "disabled",
        "reflect": false,
        "defaultValue": "false"
      },
      "helperText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "helper-text",
        "reflect": false,
        "defaultValue": "''"
      },
      "state": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'error' | 'success' | 'default'",
          "resolved": "\"default\" | \"error\" | \"success\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "state",
        "reflect": false,
        "defaultValue": "'default'"
      }
    };
  }
  static get events() {
    return [{
        "method": "changeInput",
        "name": "changeInput",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }, {
        "method": "changeInputOption",
        "name": "changeInputOption",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "Array<{ label: string; key: string; nameAvatar?: string; imgSRCAvatar?: string }>",
          "resolved": "{ label: string; key: string; nameAvatar?: string; imgSRCAvatar?: string; }[]",
          "references": {
            "Array": {
              "location": "global"
            }
          }
        }
      }];
  }
}
//# sourceMappingURL=lab-ds-text-field-with-tag.js.map