Drawer

<ins-button label="Open Inner" solid color="blue" id="openDrawerEl"></ins-button>
<ins-button label="Open Outer" solid color="blue" id="openOuterDrawerEl"></ins-button>

<!-- Drawer inside iframe -->
<ins-drawer label="Inner Drawer" custom-width="550px" position="left" icon="icon-star" id="drawerEl">
  <h4>Hello World</h4>
  <p>You can add any HTML element here. Use <code>custom-width</code> attribute to set your custom width.</p>
  <ins-input label="Name"></ins-input>
  <ins-input label="Email"></ins-input>
  <div style="text-align: right;">
    <ins-button solid color="blue" label="Save"></ins-button>
  </div>
</ins-drawer>

<script>
  // this button opens the <ins-drawer> inside of the iframe
  document.getElementById('openDrawerEl').addEventListener('onClickInsButton', function() {
    document.getElementById('drawerEl').setDrawerState(true);
  });
  // this button opens the <ins-drawer> outside of the iframe
  document.getElementById('openOuterDrawerEl').addEventListener('onClickInsButton', function () {
    parent.document.getElementById('drawerOutsideEl').setDrawerState(true);
  });
</script>

<ins-button label="Open" solid color="blue" id="openEventDrawer"></ins-button>
<ins-drawer label="Sample" show-header="false" id="eventDrawerEl">
  <h4>Hello World</h4>
  <p>This drawer sample has no heading.</p>
  <p>See console log for event data.</p>
  <hr>
  <p>This is a sample content. </p>
</ins-drawer>

<script>
  // button event to open drawer
  document.getElementById('openEventDrawer').addEventListener('onClickInsButton', function () {
    document.getElementById('eventDrawerEl').setDrawerState(true);
  });
  // Drawer event listener
  document.getElementById('eventDrawerEl').addEventListener('toggleDrawer', function (event) {
    console.log("Toggle Drawer", event.detail)
  });
</script>