perf/modules/query-summary-sk/query-summary-sk.js

/**
 * @module modules/query-summary-sk
 * @description <h2><code>query-summary-sk</code></h2>
 *
 * Displays a summary of a selection made using query-sk.
 *
 * @attr {string} url - If supplied, the displayed summary will be a link to the given URL.
 *
 * @attr {string} selection - A query-sk selection formatted as query parameters to be displayed.
 *
 */
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { toParamSet } from 'common-sk/modules/query'

const template = (ele) => {
  if (ele.url) {
    return html`<a href=${ele.url}><pre>${ele._display()}</pre></a>`;
  } else {
    return html`<pre>${ele._display()}</pre>`;
  }
}

define('query-summary-sk', class extends ElementSk {
  constructor() {
    super(template);
  }

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

  _display() {
    if (!this.selection) {
      return '[No filters applied]';
    }
    const params = toParamSet(this.selection);
    const keys = Object.keys(params);
    keys.sort();
    const ret = [];
    keys.forEach((key) => {
      params[key].forEach((value) => {
        ret.push(`${key}=${value}`);
      });
    });
    return ret.join('\n');
  }

  static get observedAttributes() {
    return ['url', 'selection'];
  }

  /** @prop url {string} Mirrors the 'url' attribute. */
  get url() { return this.getAttribute('url'); }
  set url(val) { this.setAttribute('url', val); }

  /** @prop selection {string} Mirrors the 'selection' attribute. */
  get selection() { return this.getAttribute('selection'); }
  set selection(val) { this.setAttribute('selection', val); }

  attributeChangedCallback(name, oldValue, newValue) {
    this._render();
  }

});