Input Ready

<style>
  .button-text {
    padding: 0 1rem;
  }

  duet-button {
    /*this forces the laoder to white*/
    color: #fff;
  }
</style>
<duet-layout center>
  <div slot="main">
    <duet-card heading="input-button variation demonstrator">
      <form action="" id="duet-upload-form" method="post" name="duet-upload-form-name">
        <duet-paragraph>click for loading state</duet-paragraph>
        <duet-input variation="button" required label="Input icon only" placeholder="example@example.com">

          <div slot="button">
            <duet-button fixed icon-only id="icon" icon="form-search" margin="none" variation="input-button-primary">
            </duet-button>
          </div>
        </duet-input>

        <duet-input variation="button" required label="Input text" placeholder="example@example.com">

          <div slot="button">
            <duet-button fixed id="cancel" margin="none" variation="input-button-secondary">
              <div class="button-text">cancel
                <style>
                  .button-text {
                    padding: 0 1rem !important;
                  }
                </style>
              </div>
            </duet-button>

          </div>
        </duet-input>


        <duet-input clear="true" variation="button" required label="Input icon with clear button" placeholder="example@example.com">

          <div slot="button">
            <duet-button fixed icon-only id="icon" icon="form-search" margin="none" variation="input-button-primary">
            </duet-button>
          </div>
        </duet-input>

        <duet-input label="Normal"></duet-input>

      </form>
    </duet-card>

  </div>
</duet-layout>
<script>
  // Select the above duet-upload component
  var element = document.querySelectorAll("duet-input");
  var button = document.querySelectorAll("duet-button");


  element.forEach(function(elm) {
    elm.addEventListener("duetChange", function(e) {
      console.log("duetChange", e);
    });
  })

  button.forEach(function(bn) {
    bn.addEventListener("duetFocus", function(e) {
      console.log("duet-button-focus", e);
    });

    bn.addEventListener("duetBlur", function(e) {
      console.log("duet-button-blur", e);
    });

    bn.addEventListener("click", function(event) {
      console.log("button clicked")
      event.target.toggleAttribute("loading")
    })

  })


</script>