isomtrik-quickchat/dist/collection/stories/Components/Inputbox/Input.js

isomtrik-quickchat is a lightweight, real-time chat component built with Stencil JS. It is designed to be seamlessly integrated into web applications, offering customizable and responsive chat functionalities. The module supports both CommonJS and ES modu

import { html, css, LitElement } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';

class Input extends LitElement {
  static properties = {
    value: { type: String },
    placeholder: { type: String },
    width: { type: String },
    height: { type: String },
    borderColor: { type: String },
    borderRadius: { type: String },
    backgroundColor: { type: String },
    fontSize: { type: String },
    padding: { type: String },
    color: { type: String },
    placeholderColor: { type: String },
    borderWidth: { type: String },
    inputHeight: { type: String },
    minHeight: { type: String },
    maxHeight: { type: String },
  };

  static styles = css`
    :host {
      display: block;
    }

    textarea {
      width: var(--input-width, 100%);
      max-height: var(--input-max-height, 100px);
      min-height: var(--input-min-height, 45px);
      height: var(--input-height, 45px);
      border: var(--input-border-width, 1px) solid var(--input-border-color, gray);
      border-radius: var(--input-border-radius, 4px);
      background-color: var(--input-background-color, white);
      font-size: var(--input-font-size, 16px);
      padding: var(--input-padding, 12px);
      color: var(--input-color);
      box-sizing: border-box;
      resize: none;
      overflow-y: auto;
      outline: none;
      border-width: none;
      font-family: 'Roboto';
      transition: height 0.2s ease;
    }

    textarea::-webkit-scrollbar {
      width: 5px;
    }

    textarea::-webkit-scrollbar-track {
      background: #eff1fa;
    }

    textarea::-webkit-scrollbar-thumb {
      background-color: gray;
      border-radius: 10px;
    }

    textarea::-webkit-scrollbar-thumb:hover {
      background-color: #555;
    }
    textarea::placeholder {
      color: var(--input-placeholder-color, #aaa);
      font-family: sans-serif;
    }

    textarea:focus {
      border-color: transparent;
      outline: none;
    }
  `;

  constructor() {
    super();
    this.value = '';
    this.placeholder = 'Enter your text here...';
    this.width = '100%';
    this.minHeight = '45px';
    this.maxHeight = '105px';
    this.inputHeight = '45px';
    this.borderColor = 'gray';
    this.borderRadius = '4px';
    this.backgroundColor = 'white';
    this.fontSize = '16px';
    this.padding = '12px';
    this.placeholderColor = '#aaa';
    this.borderWidth = '1px';
  }

  render() {
    return html`
      <textarea
        .value=${this.value}
        placeholder=${this.placeholder}
        style=${styleMap({
          '--input-width': this.width,
          '--input-min-height': this.minHeight,
          '--input-max-height': this.maxHeight,
          '--input-height': this.inputHeight,
          '--input-border-color': this.borderColor,
          '--input-border-radius': this.borderRadius,
          '--input-background-color': this.backgroundColor,
          '--input-font-size': this.fontSize,
          '--input-padding': this.padding,
          '--input-color': this.color || '#202020',
          '--input-placeholder-color': this.placeholderColor,
          '--input-border-width': this.borderWidth,
        })}
        @input=${this.handleInputChange}
      ></textarea>
    `;
  }

  handleInputChange(event) {
    this.value = event.target.value;
    this.adjustTextareaHeight(event.target);
    this.dispatchEvent(
      new CustomEvent('input', {
        detail: { value: this.value },
        bubbles: true,
        composed: true,
      }),
    );
  }
  //
  adjustTextareaHeight(textarea) {
    if (textarea.value.length === 0) {
      this.inputHeight = '45px';
    } else {
      textarea.style.height = '45px';
      const scrollHeight = textarea.scrollHeight;
      
      if (scrollHeight <= 45) {
        this.inputHeight = '45px';
      } else if (scrollHeight > 45 && scrollHeight <= 105) {
        this.inputHeight = `${scrollHeight}px`;
      } else {
        this.inputHeight = '105px';
      }
    }
    
    textarea.style.height = this.inputHeight;
  }

  resetHeight() {
    const textarea = this.shadowRoot.querySelector('textarea');
    if (textarea) {
      this.inputHeight = '45px';
      textarea.style.height = this.inputHeight;
    }
  }
  //
}

customElements.define('my-input', Input);