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

Stencil Component Starter

import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$5 } from './lab-ds-avatar2.js';
import { d as defineCustomElement$4 } from './lab-ds-chip2.js';
import { d as defineCustomElement$3 } from './lab-ds-icon-not-selectable2.js';
import { d as defineCustomElement$2 } from './lab-ds-icon-selectable2.js';

const labDsTextFieldWithTagCss = "input{border:none;outline:none;background-color:rgba(0, 0, 0, 0);color:var(--lab-ds-semantic-color-fg-default);width:100%}.v4-input{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s);color:var(--lab-ds-semantic-color-fg-default)}.v4-input .title-text{text-align:left;font:var(--lab-ds-semantic-typography-heading-h7)}.v4-input .input-helper{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.v4-input .helper-text{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-xs);font:var(--lab-ds-semantic-typography-body-none-decoration-p3-regular)}.input-field{width:100%;min-width:30%}.chips{display:flex;width:100%;gap:var(--lab-ds-semantic-selectable-space-gap-xs)}.chip{width:100%}.chip-group{margin-top:-0.5rem;margin-bottom:-0.5rem;max-width:70%;overflow-x:auto;overflow-y:hidden}.chip-group::-webkit-scrollbar{display:none}.input-icon{display:flex;align-items:center;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-xs)}.input-icon .input-field{color:var(--lab-ds-semantic-color-fg-enabled);font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular)}.input-icon .icon.right{display:none}.input-icon:focus-within{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.input-icon:hover{box-shadow:var(--lab-ds-semantic-selectable-shadow-s);border-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.input-icon:active{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.icon{display:flex}.v4-input.error .input-icon{border-color:var(--lab-ds-semantic-selectable-color-border-dark-error);color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.error .input-icon .icon.right{display:flex}.v4-input.error .input-field{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.v4-input.error .icon{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.v4-input.error .input-helper{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.v4-input.success .input-icon{border-color:var(--lab-ds-semantic-selectable-color-border-dark-success);color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.success .input-icon .icon.right{display:flex}.v4-input.success .input-field{color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.success .icon{color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.success .input-helper{color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.disabled .input-icon{background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);border-color:var(--lab-ds-semantic-selectable-color-border-disabled);color:var(--lab-ds-semantic-selectable-color-bg-dark-success);box-shadow:none}.v4-input.disabled .title-text{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-field{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .icon{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-helper{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .chip-group{display:none}";

const LabDsTextFieldWithTag$1 = /*@__PURE__*/ proxyCustomElement(class LabDsTextFieldWithTag extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.changeInput = createEvent(this, "changeInput", 7);
    this.changeInputOption = createEvent(this, "changeInputOption", 7);
    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 style() { return labDsTextFieldWithTagCss; }
}, [1, "lab-ds-text-field-with-tag", {
    "optionsSelected": [16],
    "value": [1],
    "titleInput": [1, "title-input"],
    "label": [1],
    "avatar": [4],
    "labelIcon": [1, "label-icon"],
    "disabled": [4],
    "helperText": [1, "helper-text"],
    "state": [1]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-text-field-with-tag", "lab-ds-avatar", "lab-ds-chip", "lab-ds-icon-not-selectable", "lab-ds-icon-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-text-field-with-tag":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsTextFieldWithTag$1);
      }
      break;
    case "lab-ds-avatar":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "lab-ds-chip":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "lab-ds-icon-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const LabDsTextFieldWithTag = LabDsTextFieldWithTag$1;
const defineCustomElement = defineCustomElement$1;

export { LabDsTextFieldWithTag, defineCustomElement };

//# sourceMappingURL=lab-ds-text-field-with-tag.js.map