infra-sk/modules/multi-input-sk/multi-input-sk.ts

/**
 * @module modules/multi-input-sk
 * @description <h2><code>multi-input-sk</code></h2>
 *
 * multi-input-sk behaves similarly to <input type="text"> but its value is a
 * string[].
 */
import { define } from 'elements-sk/define';
import { html } from 'lit-html';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import { $$ } from 'common-sk/modules/dom';
import 'elements-sk/icon/close-icon-sk';

export class MultiInputSk extends ElementSk {
  private static template = (ele: MultiInputSk) => html`
    <div class="input-container">
      ${ele._values.map(
        (value: string, index: number) => html`
          <div class="input-item">
            ${value}
            <a
              @click=${() => {
                ele._values.splice(index, 1);
                ele._render();
                ele.dispatchEvent(new Event('change', { bubbles: true }));
              }}
            >
              <close-icon-sk></close-icon-sk>
            </a>
          </div>
        `
      )}
      <input type="text" @change=${(ev: Event) => {
        ev.stopPropagation();
        const inp = $$<HTMLInputElement>('input', ele)!;
        ele._values.push(inp.value);
        inp.value = '';
        ele._render();
        ele.dispatchEvent(new Event('change', { bubbles: true }));
      }}></input>
    </div>
  `;

  private _values: string[] = [];

  get values(): string[] {
    return this._values.slice();
  }
  set values(values: string[]) {
    this._values = values.slice();
    this._render();
  }

  constructor() {
    super(MultiInputSk.template);
  }

  connectedCallback() {
    super.connectedCallback();
    this._render();
  }
}

define('multi-input-sk', MultiInputSk);