copyFieldOfJSON

/*
.docFields {
    display: flex !important;
    flex-direction: column !important;
}

      <div class="docFields">
      <div class="selectedTable">
      <reference
          label="Имя таблицы:"
          class="doc-task"
          model="data.myTable"
          tableName="sys_db_table"
          event-change="s_widget_custom.selectedTable();"
      ></reference>
      </div>
      <div class="selectedTask">
      <reference
          label="Задача:"
          class="doc-task"
          model="data.task"
          tableName="${tableName}"
          event-change="s_widget_custom.selectedTask();"
      ></reference>
      </div>
      </div>

*/




async function createFlexContainer(selector) {
  // Select the main item
  const item = document.querySelector(selector);
  if (!item) {
    console.warn(`Element with selector ${selector} not found.`);
    return;
  }

  // Select elements to move before clearing the content
  const nameWrap = item.querySelector('.src-components-dynamicForms-view-fieldWrapper-___styles-module__NameWrap___STsiA');
  const inputWrap = item.querySelector('.src-components-dynamicForms-view-fieldWrapper-___styles-module__Input___bLmkj');

  // Clone necessary elements to preserve them
  let nameClone = null;
  let inputClone = null;

  if (nameWrap) {
    const labelText = nameWrap.querySelector('.src-components-dynamicForms-view-fieldWrapper-___styles-module__Label___tjzWY');
    if (labelText) {
      nameClone = document.createElement('div');
      nameClone.classList.add('nameContainer');
      const labelTextClone = labelText.cloneNode(true); // Clone the label
      labelTextClone.innerHTML += '&nbsp;'; // Add the space inside the label
      nameClone.appendChild(labelTextClone); // Append to nameClone

      // Apply styles to nameContainer clone
      nameClone.style.fontSize = '14px';
      nameClone.style.lineHeight = '20px';
      nameClone.style.fontWeight = '600';
      nameClone.style.color = '#2E3238';
    }
  }

  if (inputWrap) {
    inputClone = inputWrap.cloneNode(true); // Clone the inputWrap element
  }

  // Clear existing content in the selected item
  while (item.firstChild) {
    item.removeChild(item.firstChild);
  }

  // Create a new flex container with the 'newContainer' class
  const newContainer = document.createElement('div');
  newContainer.classList.add('newContainer');
  newContainer.style.display = 'flex';
  newContainer.style.flexDirection = 'row';
  newContainer.style.alignItems = 'center';

  // Append nameClone and inputClone to the main newContainer if they exist
  if (nameClone) {
    newContainer.appendChild(nameClone);
  }

  if (inputClone) {
    const inputContainer = document.createElement('div');
    inputContainer.classList.add('inputContainer');
    inputContainer.appendChild(inputClone);
    newContainer.appendChild(inputContainer);
  }

  // Append the newContainer to the main item
  await new Promise(resolve => setTimeout(resolve, 0)); // Simulate asynchronous behavior
  item.appendChild(newContainer);
}

// Call the function asynchronously for each selector
(async () => {
  await createFlexContainer('.selectedTask');
  await createFlexContainer('.selectedTable');
})();