Line item properties in Dawn theme for Bundles app

global.js

// in class VariantSelects
// in onVariantChange() method add the call the following method
this.updateBundleVariant();

// right after onVariantChange() define the method
updateBundleVariant() {
  // remove old line item properties from DOM
  [ ...document.querySelectorAll( '.bundles_lineItemProperty' ) ].forEach( lineItemProperty => {
    lineItemProperty.parentNode.removeChild( lineItemProperty );
  } );

  // get correct bundle
  const bundleElement = document.querySelector(`#bundle_${this.currentVariant.id}`);
  if ( bundleElement ) {
    const bundle = JSON.parse( bundleElement.dataset.products );
    const bundleDiv = document.querySelector( '#bundles_child_products' );

    bundle.forEach( ( product, index ) => {
      const { itemNo, title, quantity, sku } = { itemNo: index + 1, ...product };

      // add line item property to DOM
      const lineItemProperty = document.createElement( 'input' );
      lineItemProperty.setAttribute( 'class', 'bundles_lineItemProperty' );
      lineItemProperty.setAttribute( 'type', 'hidden' );
      lineItemProperty.setAttribute( 'name', `properties[_${itemNo}]` );
      lineItemProperty.setAttribute( 'value', `${quantity}x ${title} ${!!sku ? `(${sku})` : ''}` );
      lineItemProperty.setAttribute( 'form', `product-form-${this.dataset.section}` );

      bundleDiv.appendChild( lineItemProperty );
    } );
  }
}

main-product.liquid

<div id="bundles_child_products">
  {{ product | json }}
  {% if product.variants.size > 1 %}
    {% assign lines = product.selected_or_first_available_variant.metafields.bundles_app.content.value %}
    {% for line in lines %}
      {% if line.sku != null %}
        <input class="bundles_lineItemProperty"
               type="hidden"
               name="properties[_{{ forloop.index }}]"
               value="{{ line.quantity }}x {{ line.title }} ({{ line.sku }})"
               form="{{ product_form_id }}"
        >
      {% else %}
        <input class="bundles_lineItemProperty"
               type="hidden"
               name="properties[_{{ forloop.index }}]"
               value="{{ line.quantity }}x {{ line.title }}"
               form="{{ product_form_id }}"
        >
      {% endif %}
    {% endfor %}
    {% for variant in product.variants %}
      <span id="bundle_{{ variant.id }}" data-products='{{ variant.metafields.bundles_app.content.value | json }}'></span>
    {% endfor %}
  {% else %}
    {% for variant in product.variants %}
      {% assign lines = variant.metafields.bundles_app.content.value %}
      {% for line in lines %}
      {% for i in (1..line.quantity) %}
      
        {% if line.sku != null %}
          <input id="bundle-child-product-{{ forloop.index }}"
                 type="hidden"
                 name="properties[_{{ forloop.index }}]"
                 value="{{ line.quantity }}x {{ line.title }} ({{ line.sku }})"
                 form="{{ product_form_id }}"
          >
        {% else %}
          <input id="bundle-child-product-{{ forloop.index }}"
                 type="hidden"
                 name="properties[_{{ forloop.index }}]"
                 value="{{ line.quantity }}x {{ line.title }}"
                 form="{{ product_form_id }}"
          >
        {% endif %}
      {% endfor %}
      {% endfor %}
    {% endfor %}
  {% endif %}
</div>