Select

<ins-input-select 
  label="Operating System"
  tooltip="This is a sample tooltip content. It also support html content."></ins-input-select>

<ins-input-select></ins-input-select>

<ins-input-select id="insInputSelectEl" label-key="name" value-key="id">
    <ins-input-select-option 
    label="Static 2" 
    value="Static 2">
  </ins-input-select-option>
 
  <ins-input-select-option 
    label="Static 1" 
    value="Static 2">
  </ins-input-select-option>

</ins-input-select>
<script>
  const insInputSelectEl = document.getElementById('insInputSelectEl');
  insInputSelectEl.optionsData = [
    { name: "John Doe", id: 1 },
    { name: "Jane Doe", id: 2 },
    { name: "James Smith", id: 3 },
    { name: "Julia Smith", id: 4 },
  ]
</script>

<ins-input-select 
  label="Select*" 
  has-error error-message="This is a required field">
</ins-input-select>

<ins-input-select 
  id="dsv">
</ins-input-select>

<script>
  var dsv = document.getElementById('dsv')
  dsv.addEventListener('didLoad', function(e){
    dsv.label = 'Direct Set Value';
  });
</script>

<ins-input-select 
  label="Select" searchable>
</ins-input-select>

<ins-input-select 
  placeholder="Value Change">
</ins-input-select>

<ins-input-select disabled></ins-input-select>

<ins-input-select readonly></ins-input-select>

<ins-button-select 
  label="Sample" 
  placeholder=" Select ">

  <ins-button-select-option 
    label="macOS" 
    value="macOS">
  </ins-button-select-option>

  <ins-button-select-option 
    label="Windows" 
    value="Windows">
  </ins-button-select-option>

</ins-button-select>

<ins-button-select 
  small 
  label="Operating System" 
  placeholder=" Select ">

  <ins-button-select-option 
    label="macOS" 
    value="macOS">
  </ins-button-select-option>
 
  <ins-button-select-option 
    label="Windows" 
    value="Windows">
  </ins-button-select-option>

</ins-button-select>

<ins-input-select 
  label="With Dynamic Option" 
  dynamic-option
  id="dynamicSelectEl">

  <div id="dynamicOptionsWrap">

    <ins-input-select-option 
      label="macOS" 
      value="macOS">
    </ins-input-select-option>

    <ins-input-select-option 
      label="Windows" 
      value="Windows">
    </ins-input-select-option>

    <ins-input-select-option 
      label="Linux" 
      value="Linux">
    </ins-input-select-option>

  </div>

</ins-input-select>

<script>
  let dynamicSelectEl = document.getElementById('dynamicSelectEl');
  let dynamicOptionsWrap = document.getElementById('dynamicOptionsWrap');

  let addSelectOption = value => {
    let insSelectOpion = document.createElement('ins-input-select-option');
    insSelectOpion.setAttribute('label', value);
    insSelectOpion.setAttribute('value', value);

    dynamicOptionsWrap.appendChild(insSelectOpion);
    dynamicSelectEl.dynamicCloseOptions();
  }

  dynamicSelectEl.addEventListener('insDynamicSubmit', e => {
    if (!e.detail){
      dynamicSelectEl.dynamicHasError = true;
      dynamicSelectEl.dynamicErrorMessage = "Please enter a value.";
    } else addSelectOption(e.detail);
  });
</script>

<ins-input-select 
  label="Lookup Options"
  lookup
  id="lookupSelectEl">

  <div id="lookupOptionsWrap">

  </div>

</ins-input-select>

<script type="text/javascript">
  var lookupSelectEl = document.getElementById('lookupSelectEl');
  var lookupOptionsWrap = document.getElementById('lookupOptionsWrap');
  var lookupOptions = [];
  var optionsCount = 0;
  
  for (counter = 0; counter < 300; counter++) {
     lookupOptions.push("Option " + (counter + 1));
  }
  
  var addLookupSelectOption = function(value) {
    var insSelectOption = document.createElement('ins-input-select-option');
    insSelectOption.setAttribute('label', value);
    insSelectOption.setAttribute('value', value);

    lookupOptionsWrap.appendChild(insSelectOption);
  }
  
  var lookupSelectLoading = function() {
    lookupSelectEl.lookupLoading = true;
    
    setTimeout(function() {
      lookupSelectEl.lookupLoading = false;
      lookupSelectEl.setLoadingState(false);
    }, 3000);
  };
  
  for (counter = 0; counter < 50; counter++) {
    addLookupSelectOption(lookupOptions[optionsCount]);
    optionsCount++;
  }
  lookupSelectEl.lookupScrolling = true;
  
  lookupSelectEl.addEventListener("insLoadMore", function() {
    setTimeout(function() {
      if (optionsCount < lookupOptions.length - 1) {
        for (counter = 0; counter < 50; counter++) {
          addLookupSelectOption(lookupOptions[optionsCount]);
          optionsCount++;
        }
      }
      lookupSelectEl.setLoadingState(false);
    }, 1000);
    
    if (optionsCount === lookupOptions.length) lookupSelectEl.setLoadingState(false);
  });
  
  lookupSelectLoading();
</script>

<ins-input-select 
  label="insSearch Options"
  lookup
  searchable
  id="insSearchEl">

  <div id="insSearchWrap">

  </div>

</ins-input-select>

<!--
  This code just automatically adds an option based on your search input.
  It will still depend on how you want to handle the search results in your API.
-->

<script type="text/javascript">
    var insSearchEl = document.getElementById('insSearchEl');
    var insSearchWrap = document.getElementById('insSearchWrap');
  
    var addInsSearchOption = function(value) {
      var insSelectOption = document.createElement('ins-input-select-option');
      insSelectOption.setAttribute('label', value);
      insSelectOption.setAttribute('value', value);

      insSearchWrap.innerHTML = "";
      insSearchWrap.appendChild(insSelectOption);
      insSearchEl.getElementsByClassName('no-more-options')[0]?.remove();
      
      setTimeout(function() {
        insSearchEl.setSearchingState(false);
        insSearchEl.setLoadingState(false);
      }, 750);
    }
    
    insSearchEl.addEventListener("insSearch", function(event) {
      addInsSearchOption(event.detail);
    });
</script>