import { css , html } from 'lit' ; import { customElement , property , query } from 'lit/decorators.js' ; import { HandDrawnBase } from './base/hand-drawn-base' ; @ customElement ( 'hand-drawn-textarea' ) export class HandDrawnTextarea extends HandDrawnBase { @ property ( { type : Boolean , reflect : true } ) disabled = false ; @ property ( { type : String } ) value : string | null = '' ; @ property ( { type : Boolean } ) autofocus = false ; @ property ( { type : Boolean } ) autoHeight = false ; @ property ( { type : String } ) placeholder = '' ; @ property ( { type : Number } ) maxlength ? : number ; @ property ( { type : String } ) name ? : string ; @ property ( { type : Boolean } ) required = false ; @ property ( { type : Boolean } ) readonly = false ; @ property ( { type : String } ) resize : string = 'both' ; @ property ( { type : Number } ) row = 3 ; @ query ( 'textarea' ) private textareaEl ? : HTMLTextAreaElement ; private isMouseDowningInThis = false ; private textareaResizeHandler = this . textareaResizeHandlerTmp . bind ( this ) ; protected updateAnimationState ( ) { if ( ! this . disabled ) { super . updateAnimationState ( ) ; } } protected render ( ) { return html `
        <div class="rough textarea-wrapper" ?disabled="${ this . disabled }">
            <textarea class="textarea"
                      style="resize:${ ( this . disabled || this . autoHeight ) ? "none !important" : this . resize }"
                      ?autofocus="${ this . autofocus }"
                      ?disabled="${ this . disabled }"
                      maxlength="${ this . maxlength }"
                      name="${ this . name }"
                      placeholder="${ this . placeholder }"
                      ?readonly="${ this . readonly }"
                      ?required="${ this . required }"
                      row="${ this . row }"
                      .value="${ this . value }"
                      @input="${ this . inputHandler }"
                      @change="${ this . changeHandler }"
            />
        </div>
    ` ; } connectedCallback ( ) { super . connectedCallback ( ) ; window . addEventListener ( 'mouseup' , this . textareaResizeHandler ) ; this . addEventListener ( 'mousedown' , this . mouseDownHandler ) ; window . addEventListener ( 'touchend' , this . textareaResizeHandler ) ; this . addEventListener ( 'touchstart' , this . mouseDownHandler ) ; } disconnectedCallback ( ) { super . disconnectedCallback ( ) ; window . removeEventListener ( 'mouseup' , this . textareaResizeHandler ) ; this . removeEventListener ( 'mousedown' , this . mouseDownHandler ) ; window . removeEventListener ( 'touchend' , this . textareaResizeHandler ) ; this . removeEventListener ( 'touchstart' , this . mouseDownHandler ) ; } private mouseDownHandler ( ) { this . isMouseDowningInThis = true ; } private textareaResizeHandlerTmp ( ) { if ( ! this . disabled ) { if ( this . isMouseDowningInThis ) { this . roughRender ( true ) ; } } this . isMouseDowningInThis = false ; } private inputHandler ( e ) { this . value = this . textareaEl ?. value || null ; this . setAutoHeight ( ) ; this . emitEvent ( e ) ; } private changeHandler ( e ) { this . value = this . textareaEl ?. value || null ; this . emitEvent ( e ) ; } private setAutoHeight ( ) { if ( this . autoHeight ) { if ( this . textareaEl ) { this . textareaEl . style . height = 'auto' ; this . textareaEl . scrollTop = 0 ; this . textareaEl . style . height = this . textareaEl . scrollHeight + 'px' ; this . roughRender ( ) ; } } } emitEvent ( event ) { this . dispatchEvent ( new CustomEvent ( event . type , { composed : true , bubbles : true , detail : event } ) ) ; } static get styles ( ) { return [ super . styles , css `
        .textarea-wrapper {
          overflow: hidden;
          padding: 10px;
        }

        .textarea-wrapper[disabled] {
          opacity: 0.5;
          background: rgba(0, 0, 0, 0.08);
          cursor: not-allowed;
        }

        .textarea {
          font: inherit;
          word-break: break-all;
          word-wrap: break-word;
          border: none;
          background: none;
          outline: none;
          width: 100%;
          height: 100%;
        }

        .textarea[disabled] {
          cursor: not-allowed;
        }
      ` ] ; } }