import { MelHtml } from './js/MelHtml.js';
      import { MelIconPrevisualiser } from './js/icon_previsualiser.js';

      const DEFAULT_ICON = $('#item-to-modify').text();
      let previsualiser = new MelIconPrevisualiser({
        add_default_action_default_buttons: true,
        add_defaults_actions: true,
        generate_defaults_icons: true,
      });

      previsualiser.addCustomIcon('price_change');

      previsualiser.on_create_default_items.push(() => {
        return MelHtml.start
          .li({ class: 'mel-button no-button-margin no-margin-button' })
            .button({class: `${$('#item-to-modify').text() === DEFAULT_ICON ? 'selected-item' : ''} mel-button no-button-margin no-margin-button`})
            .css({
              'border-radius': '5px',
              'margin-right': '5px',
              'margin-bottom': '5px',
              'line-height': 'initial',
              padding: '5px 10px',
            })
            .attr(
              'onmouseenter',
              previsualiser._on_default_hover.bind(previsualiser),
            )
            .attr(
              'onmouseleave',
              previsualiser._on_default_leave.bind(previsualiser),
            )
            .attr('onclick', previsualiser._on_default_click.bind(previsualiser))
              .icon(DEFAULT_ICON).end()
            .end()
          .end();
      });

      previsualiser.on_save.push((popup, $dialog) => {
        $('#item-to-modify').text(popup.get_selected_icon());
        $dialog.dialog('close');
      });

      previsualiser.on_create_set_selected.push((html, icon, popup) => {
        if (icon === $('#item-to-modify').text())
          html = popup.select_item(html);
        else html = popup.unselect_item(html);
        return html;
      });

      previsualiser.on_create_show_selected.push(() => {
        return $('#item-to-modify').text();
      });

      $('#button-item').click(() => {
        previsualiser.create_popup('Ma popup');
      });
    

      <h3>Test :</h3>
      <button id="button-item" class="btn btn-primary">
        <span class="material-symbols-outlined" id="item-to-modify">ads_click</span>
      </button>