title: vite build html parser throws error on html in javascript string
body: <p>I am using framework7 v7 and capacitor which uses vite as bundler. I can run the page in dev mode but when i want to compile it for android i get a parse error. I just can't figure out why. i have tried using &quot; instead of ' in the js string and also tried separate lines instead of a concated string. the only change was that the error is at a different position '&lt;span</p>
  <p>i have just updated from the old framework7 that uses webpack v4.x and it compiled there without trouble.</p>
  <p>it has to be something with html in javascript variables. maybe a setting that disables the html validation is js?</p>
  <p>error:</p>
  <pre><code>[vite:build-html] Unable to parse HTML; 15
   at {&quot;file&quot;:&quot;/home/aow/workspace/dentaLink/src/pages/app/noCon.f7.html&quot;,&quot;line&quot;:160,&quot;column&quot;:36}
  158|                tmp += '&lt;br/&gt;&lt;span&gt;';
  159|              } else {
  160|                tmp += '&lt;span class=&quot;' + (f.pos == 'anam' ? 'answer' : '') + '&quot;&gt;';
     |                                     ^
  161|              } //add text field
  162|  
  </code></pre>
  <p>here is the html file:</p>
  <pre><code>    &lt;template&gt;
    &lt;div class=&quot;page&quot; data-name=&quot;home&quot; id=&quot;noCon&quot;&gt;
      &lt;div class=&quot;page-content app-content&quot;&gt;
    ${registration &amp;&amp; $h`
        &lt;div class=&quot;tabs tabs-sub&quot;&gt;
          &lt;div class=&quot;sub-nav editBlock&quot;&gt;
            &lt;a href=&quot;#tab-reg-allAgb&quot; class=&quot;tab-link tab-link-active&quot;&gt;${app.f7.mod.helper.lng('allAgb')}&lt;/a&gt;
            &lt;a href=&quot;#tab-reg-user&quot; class=&quot;tab-link&quot;&gt;${app.f7.mod.helper.lng('user')}&lt;/a&gt;
            &lt;a href=&quot;#tab-reg-anam&quot; class=&quot;tab-link&quot;&gt;${app.f7.mod.helper.lng('anamnese')}&lt;/a&gt;
            &lt;a href=&quot;#tab-reg-clientAgb&quot; class=&quot;tab-link&quot;&gt;${app.f7.mod.helper.lng('clAgb')}&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tab tab-active list&quot; id=&quot;tab-reg-allAgb&quot;&gt;
            &lt;ul&gt;&lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tab list&quot; id=&quot;tab-reg-user&quot;&gt;
          &lt;ul&gt;
          &lt;li&gt;
            &lt;div class=&quot;item-content item-input item-input-outline item-input-outline&quot;&gt;
              &lt;div class=&quot;item-inner&quot;&gt;
                &lt;div class=&quot;item-title item-floating-label&quot; id=&quot;lbl-firstname&quot;&gt;${app.f7.mod.helper.lng('firstname')}&lt;/div&gt;
                &lt;div class=&quot;item-input-wrap&quot;&gt;
                  &lt;input type=&quot;text&quot; name=&quot;firstname&quot; id=&quot;firstname&quot; tabindex=&quot;1&quot; class=&quot;field&quot; placeholder=&quot;${app.f7.mod.helper.lng('firstname')}&quot; required ${isProfile &amp;&amp; $h`disabled`}/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class=&quot;item-content item-input item-input-outline&quot;&gt;
              &lt;div class=&quot;item-inner&quot;&gt;
                &lt;div class=&quot;item-title item-floating-label&quot; id=&quot;lbl-surname&quot;&gt;${app.f7.mod.helper.lng('surname')}&lt;/div&gt;
                &lt;div class=&quot;item-input-wrap&quot;&gt;
                  &lt;input type=&quot;text&quot; name=&quot;surname&quot; id=&quot;surname&quot; tabindex=&quot;2&quot; class=&quot;field&quot; placeholder=&quot;${app.f7.mod.helper.lng('surname')}&quot; required ${isProfile &amp;&amp; $h`disabled`}/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class=&quot;item-content item-input item-input-outline&quot;&gt;
              &lt;div class=&quot;item-inner&quot;&gt;
                &lt;div class=&quot;item-title item-floating-label&quot; id=&quot;lbl-street&quot;&gt;${app.f7.mod.helper.lng('street')}&lt;/div&gt;
                &lt;div class=&quot;item-input-wrap&quot;&gt;
                  &lt;input type=&quot;text&quot; name=&quot;street&quot; id=&quot;street&quot; tabindex=&quot;3&quot; class=&quot;field&quot; placeholder=&quot;${app.f7.mod.helper.lng('street')}&quot; required/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class=&quot;item-content item-input item-input-outline&quot;&gt;
              &lt;div class=&quot;item-inner&quot;&gt;
                &lt;div class=&quot;item-title item-floating-label&quot; id=&quot;lbl-zip&quot;&gt;${app.f7.mod.helper.lng('zip')}&lt;/div&gt;
                &lt;div class=&quot;item-input-wrap&quot;&gt;
                  &lt;input type=&quot;text&quot; name=&quot;zip&quot; id=&quot;zip&quot; tabindex=&quot;4&quot; class=&quot;field&quot; placeholder=&quot;${app.f7.mod.helper.lng('zip')}&quot; required/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class=&quot;item-content item-input item-input-outline&quot;&gt;
              &lt;div class=&quot;item-inner&quot;&gt;
                &lt;div class=&quot;item-title item-floating-label&quot; id=&quot;lbl-city&quot;&gt;${app.f7.mod.helper.lng('city')}&lt;/div&gt;
                &lt;div class=&quot;item-input-wrap&quot;&gt;
                  &lt;input type=&quot;text&quot; name=&quot;city&quot; id=&quot;city&quot; tabindex=&quot;5&quot; class=&quot;field&quot; placeholder=&quot;${app.f7.mod.helper.lng('city')}&quot; required/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class=&quot;item-content item-input item-input-outline&quot;&gt;
              &lt;div class=&quot;item-inner&quot;&gt;
                &lt;div class=&quot;item-title item-floating-label&quot; id=&quot;lbl-country&quot;&gt;${app.f7.mod.helper.lng('country')}&lt;/div&gt;
                &lt;div class=&quot;item-input-wrap&quot;&gt;
                  &lt;input type=&quot;text&quot; name=&quot;country&quot; id=&quot;country&quot; tabindex=&quot;6&quot; class=&quot;field&quot; placeholder=&quot;${app.f7.mod.helper.lng('country')}&quot; required/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class=&quot;item-content item-input item-input-outline&quot;&gt;
              &lt;div class=&quot;item-inner&quot;&gt;
                &lt;div class=&quot;item-title item-floating-label&quot; id=&quot;lbl-email&quot;&gt;${app.f7.mod.helper.lng('email')}&lt;/div&gt;
                &lt;div class=&quot;item-input-wrap&quot;&gt;
                  &lt;input type=&quot;email&quot; name=&quot;email&quot; id=&quot;email&quot; tabindex=&quot;9&quot; class=&quot;field&quot; placeholder=&quot;${app.f7.mod.helper.lng('email')}&quot; ${!app.f7.mod.user.isServicedesk() &amp;&amp; $h`required`}/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class=&quot;item-content item-input item-input-outline&quot;&gt;
              &lt;div class=&quot;item-inner&quot;&gt;
                &lt;div class=&quot;item-title item-floating-label&quot; id=&quot;lbl-phone&quot;&gt;${app.f7.mod.helper.lng('phone')}&lt;/div&gt;
                &lt;div class=&quot;item-input-wrap&quot;&gt;
                  &lt;input type=&quot;tel&quot; name=&quot;phone&quot; id=&quot;phone&quot; tabindex=&quot;10&quot; class=&quot;field&quot; placeholder=&quot;${app.f7.mod.helper.lng('telNr')}&quot;/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class=&quot;item-content item-input item-input-outline&quot;&gt;
              &lt;div class=&quot;item-inner&quot;&gt;
                &lt;div class=&quot;item-title item-floating-label&quot; id=&quot;lbl-gender&quot;&gt;${app.f7.mod.helper.lng('gender')}&lt;/div&gt;
                &lt;div class=&quot;item-input-wrap input-dropdown-wrap&quot;&gt;
                  &lt;select name=&quot;gender&quot; id=&quot;gender&quot; tabindex=&quot;11&quot; class=&quot;field&quot; required ${isProfile &amp;&amp; $h`disabled`}&gt;
                    &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
                    &lt;option value=&quot;m&quot;&gt;${app.f7.mod.helper.lng('male')}&lt;/option&gt;
                    &lt;option value=&quot;f&quot;&gt;${app.f7.mod.helper.lng('female')}&lt;/option&gt;
                  &lt;/select&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class=&quot;lastStatic&quot;&gt;
            &lt;div class=&quot;item-content item-input item-input-outline&quot;&gt;
              &lt;div class=&quot;item-inner&quot;&gt;
                &lt;div class=&quot;item-title item-floating-label&quot;&gt;${app.f7.mod.helper.lng('birthday')}&lt;/div&gt;
                &lt;div class=&quot;item-input-wrap&quot;&gt;
                  &lt;input type=&quot;text&quot; readonly=&quot;readonly&quot; name=&quot;birthday&quot; id=&quot;birthday&quot; tabindex=&quot;12&quot; class=&quot;field&quot; placeholder=&quot;${app.f7.mod.helper.lng('birthday')}&quot; required ${isProfile &amp;&amp; $h`disabled`}/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tab list&quot; id=&quot;tab-reg-anam&quot;&gt;
            &lt;ul&gt;&lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tab list&quot; id=&quot;tab-reg-clientAgb&quot;&gt;
            &lt;ul&gt;&lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class=&quot;btn-anamnese&quot;&gt;
            &lt;button @click=&quot;${() =&gt; back()}&quot; accesskey=&quot;r&quot; tabindex=&quot;55&quot; class=&quot;button button-raised button-fill&quot;&gt;${app.f7.mod.helper.lng('back')}&lt;/button&gt;
            &lt;button @click=&quot;${() =&gt; next()}&quot; accesskey=&quot;s&quot; tabindex=&quot;54&quot; class=&quot;btn-submit button button-raised button-fill&quot;&gt;${app.f7.mod.helper.lng('next')}&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      `}
  
      ${!registration &amp;&amp; $h`
        &lt;div class=&quot;error&quot;&gt;&lt;/div&gt;
        ${!app.f7.store.state.user || app.f7.store.state.user.noCon ? $h`
          &lt;div class=&quot;scan&quot;&gt;
            &lt;button @click=&quot;${() =&gt; scanQr()}&quot; class=&quot;button button-raised button-fill&quot;&gt;${app.f7.mod.helper.lng('qrScan')}&lt;/button&gt;
          &lt;/div&gt;
        ` : ''}
  
        ${app.f7.mod.user.isServicedesk() ? $h
          `&lt;div class=&quot;scan flex-direction-column&quot;&gt;
            ${msg ? $h`
              &lt;p class=&quot;info&quot; innerHTML=&quot;${msg}&quot;&gt;&lt;/p&gt;
            ` : ''}
          &lt;/div&gt;
          &lt;div class=&quot;scan&quot;&gt;
            ${cookie &amp;&amp; app.f7.mod.user.isServicedesk() &amp;&amp;
              $h `&lt;span&gt;&lt;b&gt;${doc &amp;&amp; doc.firstname + ' ' + doc.surname}...&lt;/b&gt;&lt;/span&gt;
                &lt;button @click=&quot;${() =&gt; register(app.f7.store.state.clientId, app.f7.store.state.settings.title)}&quot; class=&quot;button button-raised button-fill&quot;&gt;${app.f7.mod.helper.lng(app.f7.mod.user.isServicedesk() ? 'edit' : 'register')}&lt;/button&gt;`
            }
            &lt;br/&gt;&lt;br/&gt;&lt;button @click=&quot;${() =&gt; reset()}&quot; class=&quot;button button-raised button-fill&quot;&gt;${app.f7.mod.helper.lng('new')}&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class=&quot;scan flex-direction-row margin-top&quot;&gt;
            &lt;span&gt;${app.f7.mod.helper.lng('lang')}:&lt;/span&gt;
            &lt;span class=&quot;link&quot; @click=&quot;${() =&gt; changeLang('de')}&quot;&gt;de&lt;/span&gt;
            &lt;span class=&quot;link&quot; @click=&quot;${() =&gt; changeLang('en')}&quot;&gt;en&lt;/span&gt;
          &lt;/div&gt;`
  
        : $h`
          ${app.f7.store.state.user &amp;&amp; !app.f7.store.state.user.noCon ? $h`
            &lt;div class=&quot;scan&quot;&gt;
              &lt;button @click=&quot;${() =&gt; app.f7.store.dispatch('replicate')}&quot; class=&quot;button button-raised button-fill&quot;&gt;${app.f7.mod.helper.lng('reload')}&lt;/button&gt;&lt;br/&gt;
              &lt;button @click=&quot;${() =&gt; app.f7.store.dispatch('logout')}&quot; class=&quot;button button-raised button-fill&quot;&gt;${app.f7.mod.helper.lng('logout')}&lt;/button&gt;
            &lt;/div&gt;
          ` : ''}
          &lt;div class=&quot;scan flex-direction-column&quot;&gt;
          ${msg ? $h`
            &lt;p class=&quot;info&quot; innerHTML=&quot;${msg}&quot;&gt;&lt;/p&gt;
          ` : ''}
          &lt;/div&gt;
  
          &lt;h2&gt;${app.f7.mod.helper.lng('clients')}&lt;/h2&gt;
          ${list ? $h`
            ${list.map((item) =&gt; $h`
              &lt;div class=&quot;card client&quot;&gt;
                &lt;div class=&quot;card-header&quot;&gt;${item.doc.title}&lt;/div&gt;
                &lt;div class=&quot;card-content&quot; id=&quot;c${item.doc.clientId}&quot;&gt;
                  &lt;i class=&quot;f7-icons float-left&quot;&gt;photo&lt;/i&gt;
                  &lt;span&gt;${item.doc.city}, ${item.doc.offering}&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-footer&quot;&gt;
                  &lt;a href=&quot;${app.f7.mod.helper.getMaps()}${item.doc.street},${item.doc.zip} ${item.doc.city}&quot; target=&quot;_blank&quot; id=&quot;lnkMap&quot; class=&quot;external f7-icons&quot;&gt;map_pin_ellipse&lt;/a&gt;
                  &lt;i @click=&quot;${() =&gt; register(item.doc.clientId, item.doc.title)}&quot; class=&quot;f7-icons link right&quot; title=&quot;${app.f7.mod.helper.lng('register')}&quot;&gt;person_crop_circle_badge_plus&lt;/i&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            `)}
          ` : ''}
          ${!list ? $h`
              &lt;p&gt;${app.f7.mod.helper.lng('noEntries')}&lt;/p&gt;
          ` : ''}`
        }
      `}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default (props, { $f7, $on, $update }) =&gt; {
      let noCon = true;
      let cId = null;
      let cName = null; //'Zehm Dental Suisse',
      let registration, msg, list, isProfile, doc, isDirty, dynFields, cookie;
      let storage = window.localStorage;
  
      
      const renderProfile = function () {
          const posAllAgb = $f7.$('#tab-reg-allAgb ul');
          const posClientAgb = $f7.$('#tab-reg-clientAgb ul');
          const posUser = $f7.$('#tab-reg-user .lastStatic');
          const posAnam = $f7.$('#tab-reg-anam ul');
  
          const tpl = '&lt;li&gt;&lt;div class=&quot;item-content item-input item-input-outline&quot;&gt;&lt;div class=&quot;item-inner&quot;&gt;&lt;div class=&quot;item-title item-floating-label&quot; $label$&gt;&lt;/div&gt;&lt;div class=&quot;item-input-wrap&quot;&gt;$field$&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;';
          const tplAgb = '&lt;li&gt;&lt;div class=&quot;item-content item-input item-input-outline&quot;&gt;&lt;div class=&quot;item-inner&quot;&gt;&lt;div class=&quot;item-input-wrap&quot;&gt;$field$&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;';
          const tplCheckbox = '&lt;li&gt;&lt;div class=&quot;item-content item-input item-input-outline&quot;&gt;&lt;div class=&quot;item-inner&quot;&gt;&lt;div class=&quot;item-title item-label&quot;&gt;&lt;/div&gt;&lt;div class=&quot;item-input-wrap&quot;&gt;$label$ $field$&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;';
          const inp = '&lt;input class=&quot;field&quot; tabindex=&quot;';
  
          $f7.mod.user.getFields(cId ? cId : $f7.store.state.clientId)
              .then(rs =&gt; {
                  //if not found?
                  if (!rs.fields) {
                      $f7.dialorg.alert('notFound');
                      return false;
                  }
  
                  dynFields = rs.fields;
  
                  let i = 20;
  
                  dynFields.forEach(f =&gt; {
                      let tmp = '';
  
                      switch (f.type) {
                          case 'radio':
                              if (f.id === 'frequency') {
                                  tmp += '&lt;br/&gt;&lt;span&gt;';
  
                              } else {
                                  tmp += '&lt;span class=&quot;' + (f.pos == 'anam' ? 'answer' : '' ) + '&quot;&gt;';
                              }
  
                              //add text field
                              tmp += '&lt;span class=&quot;medAnswer&quot;&gt;' + (f.answer ? '&lt;input class=&quot;hide width-100&quot; placeholder=&quot;' + f.answer + '&quot; name=&quot;ans_' + f.id + '&quot; id=&quot;ans_' + f.id + '&quot;/&gt;' : '') + '&lt;/span&gt;';
  
                              f.values.forEach(v =&gt; {
                                  let checked = doc[f.id] == v.key || (doc['fields'] &amp;&amp; doc['fields'][f.id]) == v.key ? ' checked' : '';
  
                                  tmp +=
                                      //wrap med radio-btns
                                      (f.id.startsWith('med') ? '&lt;span class=&quot;medical ' + v.key + checked + '&quot;&gt;' : '') +
  
                                      inp + i + '&quot; type=&quot;radio&quot; name=&quot;' + f.id + '&quot; id=&quot;' + f.id + '-' + v.key + '&quot; value=&quot;' + v.key + '&quot;' +
  
                                      checked +
  
                                      (!f.optional ? ' required' : '') +
  
                                      '/&gt;&lt;label for=&quot;' + f.id + '-' + v.key + '&quot;' +
  
                                      //anam and yes (only once) show red
                                      //(v.key === 'yes' &amp;&amp; f.pos === 'anam' ? ' class=&quot;mandatory&quot;' : '') + //&amp;&amp; field == v.key
  
                                      '&gt;' + v.value + '&lt;/label&gt;' +
  
                                      //wrap med radio-btns
                                      (f.id.startsWith('med') ? '&lt;/span&gt;' : (f.id === 'frequency' ? '&lt;br/&gt;' : ''));
  
                                  i++;
                              });
  
                              tmp += '&lt;/span&gt;';
  
                              tmp = tplCheckbox.replace(/\$label\$/, '&lt;span class=&quot;label&quot; id=&quot;lbl-' + f.id + '&quot;&gt;' + f.title + '&lt;/span&gt;')
                                  .replace(/\$field\$/, tmp);
  
                              break;
  
                          case 'agb':
                              f.points.forEach(p =&gt; {
                                  tmp += '&lt;p&gt;' + p + '&lt;/p&gt;';
                              });
  
  
                              tmp = tplAgb.replace(/\$field\$/, tmp);
  
                              break;
  
                          default:
                              tmp = inp + i + '&quot; type=&quot;text&quot; name=&quot;' + f.id + '&quot; id=&quot;' + f.id + '&quot; value=&quot;';
  
                              if (doc[f.id]) {
                                  tmp += doc[f.id];
  
                              } else if (doc['fields'] &amp;&amp; doc['fields'][f.id]) {
                                  tmp += doc['fields'][f.id];
                              }
  
                              tmp += '&quot; ' + (!f.optional ? ' required' : '') + '/&gt;';
  
  
                              tmp = tpl.replace(/\$label\$&gt;/, ' id=&quot;lbl-' + f.id + '&quot;&gt;' + f.title)
                                  .replace(/\$field\$/, tmp);
                      }
  
                      switch (f.pos) {
                          case 'allAgb':
                              posAllAgb.append(tmp);
                              break;
  
                          case 'anam':
                              //for css horizontal line
                              posAnam.append(tmp.replace(/&lt;li&gt;/, '&lt;li class=&quot;med&quot;&gt;'));
                              break;
  
                          case 'clientAgb':
                              posClientAgb.append(tmp);
                              break;
  
                          default:
                              posUser.append(tmp);
                      }
  
                      $f7.input.checkEmptyState('input[name=' + f.id + ']');
  
                      i++;
                  });
  
                  //click radio
                  $f7.$('#tab-reg-user .field').keyup((e) =&gt; {
                      if (e.key === &quot;Enter&quot;) {
                          let tmp = $f7.$(e.currentTarget).parent().parent().parent().parent().next();
  
                          if(tmp.length &gt; 0) {
                              let tmp2 = tmp.find('.field');
                              if(tmp2.length &gt; 0) {
                                  if(tmp2[0].type == 'select-one') {
                                      openDrop(tmp2[0]);
  
                                  } else {
                                      tmp2[0].focus();
                                  }
                              }
                          } else {
                              next();
                          }
                      }
                  });
  
                  //click radio
                  posAnam.find('.medical').click((e) =&gt; {
                      e.currentTarget.children[0].click();
                      let tmp = $f7.$(e.currentTarget);
                      tmp.parent().find('.checked').removeClass('checked');
                      tmp.addClass('checked');
  
                      //show input
                      if(tmp.hasClass('yes')) {
                          $f7.$(tmp.parent().children()[0]).find('input').show();
  
                      } else {
                          $f7.$(tmp.parent().children()[0]).find('input').hide();
                      }
  
                      //todo scroll
  //                                let p = $f7.$('.page-content');
  //                                p.scrollTo(0, p.height() + p.scrollTo() + 45, 100);
                  });
  
                  //add agb checkboxes
                  let allAgb = '&lt;input type=&quot;checkbox&quot; class=&quot;confirmAgbs field&quot; name=&quot;allAgb&quot; id=&quot;allAgb&quot; value=&quot;' + new Date().toISOString() + '&quot;' + (doc.allAgb ? ' checked=&quot;ckecked&quot;' : '') + '/&gt;' +
                      '&lt;label class=&quot;action&quot; for=&quot;allAgb&quot;&gt;' + $f7.mod.helper.lng('confirmAllAgb') + '&lt;/label&gt;';
  
                  posAllAgb.append(allAgb);
  
                  let clAgb = '&lt;input type=&quot;checkbox&quot; class=&quot;confirmAgbs field&quot; name=&quot;clAgb&quot; id=&quot;clAgb&quot; value=&quot;' + new Date().toISOString() + '&quot;' + (doc.clAgb ? ' checked=&quot;ckecked&quot;' : '') + '/&gt;' +
                      '&lt;label class=&quot;action&quot; for=&quot;clAgb&quot;&gt;' + $f7.mod.helper.lng('confirmClientAgb').replace('$client$', cName) + '&lt;/label&gt;';
  
                  posClientAgb.append(clAgb);
  
                  //set input values
                  for (let x in doc) {
                      let obj = $f7.$('input[name=' + x + '], select[name=' + x + ']');
  
                      if(obj &amp;&amp; obj.length == 0) continue;
  
                      if(obj[0].type == 'radio') {
                          $f7.$('input[name=&quot;' + x + '&quot;][value=&quot;' + doc[x] + '&quot;]').prop('checked', true);
  
                          //show answer input if yes
                          if(doc[x + '_answer']) {
                              let tmp = $f7.$('input[name=&quot;ans_' + x + '&quot;]');
                              tmp.val(doc[x + '_answer']);
                              tmp.show();
                          }
  
                      } else {
                          obj.val(doc[x]);
                      }
  
                      $f7.input.checkEmptyState('input[name=' + x + ']');
                      $f7.input.checkEmptyState('select[name=' + x + ']');
  
                      //block basic inputs if prefilled in anamnese
                      if (doc[x] &amp;&amp; !isProfile &amp;&amp; !$f7.mod.user.isServicedesk()) {
                          switch (x) {
                              case 'firstname':
                              case 'surname':
                              case 'birthday':
                              case 'gender':
                                  obj.prop('disabled', true);
                                  break;
                          }
                          //user profile
                      } else if (doc[x]) {
                          switch (x) {
                              case 'firstname':
                              case 'surname':
                              case 'birthday':
                              case 'gender':
                                  obj.prop('disabled', true);
                                  break;
                          }
                      }
                  }
  
                  //if prefilled from user scroll down
                  if (doc['gender']) {
                      $f7.$('.page-content').scrollTo(0, $f7.mod.helper.getOffset('input[name=&quot;gender&quot;]').top - 200, 200);
                  }
  
                  var now = new Date();
                  var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
                  var weekLater = new Date().setDate(today.getDate() + 7);
                  let cal = $f7.calendar.create({
                      inputEl: '#birthday',
                      openIn: 'customModal',
                      header: false,
                      footer: true,
                      value: doc.birthday ? [doc.birthday] : null,
                      events: [
                          {
                              from: today,
                              to: weekLater
                          },
                          //- more events this day
                          {
                              date: today,
                              color: '#ff0000'
                          }
                      ],
                      on: {
                          change: (e, v) =&gt; {
                              e.$inputEl.val(v);
                              e.close();
                              e.$inputEl.parent().parent().parent().find('input').focus();
                          },
  
                      }
                  });
  
                  //scroll on medical click
                  posAnam.find('input[type=&quot;radio&quot;]').change((e) =&gt; {
                      $f7.$('.page-content').scrollTo(0, $f7.mod.helper.getOffset(e.target).top - 200, 200);
  
                      $f7.$('.page-content').find('.item-inner-active').removeClass('item-inner-active');
                      $f7.$(e.currentTarget).parent().parent().parent().parent().parent().parent().next().find('.item-inner').addClass('item-inner-active');
                  });
  
  //                    $f7.$('.field').change(function () {
  //                        isDirty = true;
  //                        $f7.store.dispatch('markDirty', isDirty);
  //                    });
  
                  //if registered user registers with a new client
                  if ($f7.store.state.user &amp;&amp; $f7.view.current.router.currentRoute.params.action != 'edit' &amp;&amp; !$f7.mod.user.isServicedesk()) {
                      next();
                  }
              });
      };
  &lt;/script&gt;
  </code></pre>