infra-sk/modules/expandable-textarea-sk/expandable-textarea-sk.js

/**
 * @module modules/expandable-textarea-sk
 * @description A custom element that expands a textarea when clicked.
 *
 * @attr {boolean} open - Whether the textarea is expanded.
 *
 * @attr {string} displayText - Clickable text to toggle the textarea.
 *
 * @attr {string} placeholder - Placeholder text for the textarea.
 *
 * @attr {number} minRows - Minimum (and initial) rows in the textarea.
 */

import { $$ } from 'common-sk/modules/dom';
import { define } from 'elements-sk/define';
import { html } from 'lit-html';

import '../autogrow-textarea-sk';
import { ElementSk } from '../ElementSk';

import 'elements-sk/collapse-sk';
import 'elements-sk/icon/expand-more-icon-sk';
import 'elements-sk/icon/expand-less-icon-sk';
import 'elements-sk/styles/buttons';

const template = (ele) => html`
<button class=expander @click=${ele._toggle}>
  ${!ele.open
    ? html`<expand-more-icon-sk></expand-more-icon-sk>`
    : html`<expand-less-icon-sk></expand-less-icon-sk>`}${ele.displayText}
</button>
<collapse-sk ?closed=${!ele.open}>
  <autogrow-textarea-sk placeholder=${ele.placeholder}
    minRows=${ele.minRows}></autogrow-textarea-sk>
</collapse-sk>
`;

define('expandable-textarea-sk', class extends ElementSk {
  constructor() {
    super(template);

    this._upgradeProperty('displayText');
    this._upgradeProperty('minRows');
    this._upgradeProperty('open');
    this._upgradeProperty('placeholderText');
  }

  connectedCallback() {
    super.connectedCallback();
    this._render();
    this._collapser = $$('collapse-sk', this);
    this._textarea = $$('autogrow-textarea-sk', this);
  }

  /**
   * @prop {string} value - Content of the textarea element.
   */
  get value() {
    // We back our value with textarea.value directly to avoid issues with the
    // value changing without changing our value property, causing
    // element re-rendering to be skipped.
    return this._textarea.value;
  }

  set value(v) {
    this._textarea.value = v;
  }

  /**
   * @prop {string} placeholder - Placeholder content of the textarea,
   * mirrors the attribute.
   */
  get placeholder() {
    return this.getAttribute('placeholder') || '';
  }

  set placeholder(v) {
    this.setAttribute('placeholder', v);
  }

  /**
   * @prop {number} minRows - Minimum (and initial) number of rows in the
   * textarea, mirrors the attribute.
   */
  get minRows() {
    return +this.getAttribute('minRows');
  }

  set minRows(val) {
    if (val) {
      this.setAttribute('minRows', val);
    } else {
      this.removeAttribute('minRows');
    }
  }

  /**
   * @prop {string} displayText - Clickable text to toggle the textarea, mirrors the attribute.
   */
  get displayText() {
    return this.getAttribute('displayText') || '';
  }

  set displayText(v) {
    this.setAttribute('displayText', v);
  }

  /**
   * @prop {boolean} open - State of the expandable panel, mirrors the attribute.
   */
  get open() {
    return this.hasAttribute('open');
  }

  set open(val) {
    if (val) {
      this.setAttribute('open', '');
    } else {
      this.removeAttribute('open');
    }
  }

  _toggle() {
    this._collapser.closed = !this._collapser.closed;
    this.open = !this._collapser.closed;
    if (this.open) {
      $$('autogrow-textarea-sk', this).computeResize();
      $$('textarea', this._textarea).focus();
    }
    this._render();
  }
});