key: bs-alert
name: $string.bsalert_name
category: bootstrap
icon: fa fa-exclamation-triangle
template: |
  <div class="m-2 alert alert-{{severity}}{{#closable}} alert-dismissible{{/closable}} fade show" role="alert">
    {{#closable}}
     <button type="button" class="close" data-dismiss="alert" data-bs-dismiss="alert" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
    {{/closable}}
    <div class="alert-content">
      <p>Lorem ipsum.</p>
    </div>
  </div>
  <p><br></p>
selectors: div[role="alert"].alert
insertquery: div[role="alert"].alert .alert-content
unwrap: '*'
parameters:
  - name: severity
    title: $string.bsalert_severity_title
    bind: classRegex('alert-(.*)')
    value: primary    
    options:
      - primary
      - secondary
      - success
      - info
      - warning
      - danger
      - light
      - dark
  - name: closable
    title: $string.bsalert_closable_title
    value: false
    bind:
      getValue: (el) => el.querySelector("button.close") !== null
      setValue: |
        (el, v) => {
            var btnClose = el.querySelector("button.close");
            if (v && btnClose === null) {
              var btn = '<button type="button" class="close" data-dismiss="alert" data-bs-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
              const template = document.createElement('template');
              template.innerHTML = btn;
              el.prepend(template.content.firstChild);
              el.classList.add('alert-dismissible');
            } else if (!v) {
              el.classList.remove('alert-dismissible');
              btnClose && btnClose.remove();
            }
        }
autocomplete: severity
contextmenu:
  - actions: printable | cut
author: Josep Mulet <pep.mulet@gmail.com>
version: 2.2.1
