popover-sinonimos.component.html 2.26 KB
<div class="card-body fade-left">

  <div class="row m-0">
    <div class="col text-left">
      <p class="h4 card-title">
        Personalice su pedido
      </p>
    </div>
  </div>

  <div class="row m-0 overflow-scroll popover-size pr-2 my-2">
    <div class="col">
      <div class="row mb-2" *ngFor="let sinonimo of popoverContent">
        <div class="col">

          <div class="row m-0">
            <div class="col text-left">
              <p class="h5 card-title">
                Elija una opción
              </p>
            </div>
          </div>

          <div class="row my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos">
            <div class="col-8 pl-4 h6 m-0">
              <div class="custom-control custom-radio">
                <input
                  type="radio"
                  [id]="producto.id"
                  [checked]="producto.esPadre"
                  name="sinonimoOpciones"
                  class="custom-control-input"
                  (click)="setSinonimo(sinonimo)">
                <label class="font-weight-normal custom-control-label" [for]="producto.id">
                  {{producto.DetArt}}
                </label>
              </div>
            </div>
            <div class="col-auto">
              <div class="btn-group-sm btn-group float-left my-auto" role="group">
                <button type="button" class="btn btn-light btn-sm my-auto border">
                  <i class="fa fa-plus" aria-hidden="true"></i>
                </button>
                <div class="bg-white border border-white px-3 my-auto text-dark h5">
                  <small>{{producto.cantidad}}</small>
                </div>
                <button type="button" class="btn btn-light btn-sm my-auto border">
                  <i class="fa fa-minus" aria-hidden="true"></i>
                </button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <div class="row mt-3 justify-content-end">
    <div class="col-auto">
      <button type="button" class="btn btn-sm btn-light shadow" (click)="hidePopover()">
        <span class="font-weight-bold pr-2">Continuar</span>
        <i class="fa fa-check text-success" aria-hidden="true"></i>
      </button>
    </div>
  </div>

</div>