cosmos-explorer/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.html

<div class="newVertexComponent" data-bind="setTemplateReady: true">
  <div class="newVertexForm">
    <div class="newVertexFormRow">
      <label for="VertexLabel" class="labelCol">Label</label>
      <input
        class="edgeInput"
        type="text"
        data-bind="textInput:$data.newVertexData().label, hasFocus: $data.firstFieldHasFocus"
        aria-label="Enter vertex label"
        role="textbox"
        tabindex="0"
        placeholder="Enter vertex label"
        autocomplete="off"
        id="VertexLabel"
      />
      <div class="actionCol"></div>
    </div>

    <!-- ko foreach:{ data:newVertexData().properties, as: 'property' } -->
    <div class="newVertexFormRow">
      <div class="labelCol">
        <input
          type="text"
          id="propertyKeyNewVertexPane"
          data-bind="textInput: property.key, attr: { 'aria-label': 'Enter key for property '+ ($index() + 1) }"
          placeholder="Key"
          autocomplete="off"
        />
      </div>
      <div class="valueCol">
        <input
          class="edgeInput"
          type="text"
          data-bind="textInput: property.values[0].value, , attr: { 'aria-label': 'Enter value for property '+ ($index() + 1) }"
          placeholder="Value"
          autocomplete="off"
        />
      </div>
      <div>
        <select
          class="typeSelect"
          required
          data-bind="options:$parent.propertyTypes, value:property.values[0].type, attr: { 'aria-label': property.values[0].type + ': for property '+ ($index() + 1) }"
        ></select>
      </div>
      <div class="actionCol">
        <div
          class="rightPaneTrashIcon rightPaneBtns"
          data-bind="click:$parent.removeNewVertexProperty.bind($parent, $index()), event: { keypress: $parent.removeNewVertexPropertyKeyPress.bind($parent, $index()) }, attr: { 'aria-label': 'Remove property '+ ($index() + 1) }"
          tabindex="0"
          role="button"
        >
          <img class="refreshcol rightPaneTrashIconImg" src="/delete.svg" alt="Remove property" />
        </div>
      </div>
    </div>
    <!-- /ko -->

    <div class="newVertexFormRow">
      <span class="rightPaneAddPropertyBtnPadding">
        <span
          class="rightPaneAddPropertyBtn rightPaneBtns"
          id="addProperyNewVertexBtn"
          data-bind="click:onAddNewProperty, event: { keypress: onAddNewPropertyKeyPress }"
          tabindex="0"
          role="button"
        >
          <img class="refreshcol rightPaneAddPropertyImg" src="/Add-property.svg" alt="Add property" /> Add
          Property</span
        >
      </span>
    </div>
  </div>
</div>