hubl/src/components/hubl-status.js

import {
  widgetFactory,
  Helpers
} from 'https://cdn.skypack.dev/@startinblox/core@0.15';
import SlimSelect from 'https://cdn.skypack.dev/slim-select@1.23';

const HublStatus = widgetFactory(
  'hubl-status',
  `<label>\${label}</label>
    <select
      data-holder
      name="\${name}">
      <option
        value="Public"
        \${value=="Public" ? 'selected' : ''} data-trans="hublStatus.public">Public</option>
      <option
        value="Private"
        \${value=="Private" ? 'selected' : ''} data-trans="hublStatus.private">Privé</option>
    </select>`,
  '',
  formWidget => {
    let select = formWidget.querySelector('select');
    if (!select) return;
    const slimSelect = new SlimSelect({
      select: select
    });
    Helpers.importCSS('https://dev.jspm.io/slim-select/dist/slimselect.min.css');
    select.addEventListener('change', () => slimSelect.render());
  },
);

export {
  HublStatus
}