Feedback Form

<sl-button  id="success-button">open feedback form</sl-button>
<sl-feedback-form id="feedback-success"
  userName="Linda Cole" team-name="Guardian Investments" product-name="myhub">
</sl-feedback-form>

<script>
  const triggerButton = document.getElementById('success-button');
  const form = document.getElementById('feedback-success');

triggerButton.addEventListener('click', () => {
  form.show()});
form.addEventListener('sl-feedback-submit', e => {
  console.log('sl-feedback-submit fired, detail =', e.detail);
     // simulate async request
    setTimeout(() => {
      console.log('fake success request complete');
      form.succeed();
    }, 1500);
});
</script>

<sl-button  id="fail-button">open feedback form</sl-button>

<sl-feedback-form id="feedback-fail"
  userName="Linda Cole" product-name="myhub">
</sl-feedback-form>

<script>
    const triggerButton = document.getElementById('fail-button');

  const form = document.getElementById('feedback-fail');

triggerButton.addEventListener('click', () => {
  form.show()});
form.addEventListener('sl-feedback-submit', e => {
  console.log('sl-feedback-submit fired, detail =', e.detail);
     // simulate async request
    setTimeout(() => {
      console.log('fake failed request complete');
      form.fail();
    }, 1500);
});
</script>

<sl-app-header-hds>
  <span slot="app-name">App Name</span>
  <div slot="header-middle">
    <sl-input type="search" placeholder="Search…" clearable enterkeyhint="search"></sl-input>
  </div>
   <sl-icon-button slot="action" name="bell"></sl-icon-button>
   <sl-icon-button
    slot="action"
    id="feedback-form-trigger-button"
    name="message-lines"
  ></sl-icon-button>
  <sl-icon-button slot="action" name="circle-question"></sl-icon-button>
  <div slot="header-right">
    <sl-dropdown>
      <sl-button slot="trigger" variant="on-dark" caret>Dropdown</sl-button>
      <sl-menu>
        <sl-menu-item>Item 1</sl-menu-item>
        <sl-menu-item>Item 2</sl-menu-item>
        <sl-menu-item>Item 3</sl-menu-item>
      </sl-menu>
    </sl-dropdown>
  </div>
  <sl-avatar-button slot="avatar" name="First Last">
    <sl-menu >
  <sl-menu-item >
    <div style="display: flex; align-items: center; ">
      <img src="https://randomuser.me/api/portraits/men/75.jpg" style="width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin-right: 1rem; border: 2px solid #eee;" alt="Firstname LastName" />
      <div style="display: flex; flex-direction: column;">
        <span style="font-weight: 600;">Firstname LastName</span>
        <span style="color: #888; font-size: 0.95em;">daniel@example.com</span>
      </div>
    </div>
  </sl-menu-item>
  <sl-menu-item value="profile">Profile</sl-menu-item>
  <sl-menu-item value="settings">Settings</sl-menu-item>
  <sl-menu-item value="notifications">Notifications</sl-menu-item>
  <sl-menu-item value="logout">Logout</sl-menu-item>
</sl-menu>
  </sl-avatar-button>
  <div slot="subheader-left" style="display: flex; gap: 2px;">
    <sl-button size="small" variant="on-dark">Item 1 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 2 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 3 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 4 label name</sl-button>
  </div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

<sl-feedback-form id="feedback-form-app-header" userName="Linda Cole" product-name="myhub"></sl-feedback-form>



<script>
const triggerButton = document.getElementById('feedback-form-trigger-button');
const form = document.getElementById('feedback-form-app-header');

triggerButton.addEventListener('click', () => {
  form.show()});
form.addEventListener('sl-feedback-submit', e => {
  console.log('sl-feedback-submit fired, detail =', e.detail);
  setTimeout(() => form.succeed(), 1500);
});
</script>