graycoreio/daffodil

<daff-container size="md">
  <div class="demo-newsletter__grid">
    <div class="demo-newsletter__left">
      <h3 class="demo-newsletter__title">
        Gets news and offers from Daffodil!
      </h3>
      <div class="demo-newsletter__body">
        Be the first to know about the latest products, exclusives, and offers!
      </div>
    </div>
    <div>
      <div class="demo-newsletter__right" *ngIf="(success$ | async) === false && (hasError$ | async) === false && (loading$ | async) === false">
        <ng-container *ngIf="email.invalid && email.dirty">Please enter a valid email</ng-container>
        <input daff-input type="text" class="demo-newsletter__input" placeholder="Email" name="email" [formControl]="email"
          required email />
        <button type="submit" daff-button color="secondary" class="demo-newsletter__button"
          (click)='onNewsletterSubmit()'>Sign Up</button>
      </div>
      <div class="demo-newsletter__retry" *ngIf="(hasError$ | async) && (loading$| async) === false && (success$ | async) === false">
        Error
        <button type="submit" daff-button color="secondary" class="demo-newsletter__button"
          (click)='onNewsletterRetry()'>Retry</button>
      </div>
      <div class="demo-newsletter__loading" *ngIf="(loading$| async)"> Loading
        <button type="cancel" daff-button color="secondary" class="demo-newsletter__button"
          (click)='onNewsletterCancel()'>Cancel</button>
      </div>
      <div class="demo-newsletter__success" *ngIf="success$ | async"> Success </div>
    </div>
  </div>
</daff-container>