systelab-components/html/autocomplete-combobox.component.html

systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.

<div #combobox
  class="dropdown slab-combobox d-flex w-100"
  [ngClass]="{'disabled': isDisabled}">
  <div #dropdowntoogle class="slab-flex-1 d-flex dropdown-toggle slab-dropdown-toogle" id="{{comboId}}" data-toggle="dropdown">
    <input #input type="text" class="slab-flex-1 d-flex slab-combo-input" keyup-debounce
      [disabled]="isDisabled"
      [(ngModel)]="fieldToShow"
      [keyupDebounceTime]="debounceTime" (keyupDebounced)="doSearch($event)"
      (search)="doSearch($event)"
      [ngStyle]="getInputHeight()"
      [style.font-family]="fontFamily"
      [style.font-size.px]="fontSize"
      [style.font-weight]="fontWeight"
      [style.font-style]="fontStyle"
      [tabindex]="tabindex"
      (keydown.Tab)="closeDropDown()"
      (keydown.arrowDown)="onInputNavigate($event)"
      (keydown.arrowUp)="onInputNavigate($event)"
      (keydown.enter)="onEnterDoSelect($event)"
      (click)="onInputClicked($event)"/>
      @if (withClearOption && !inputIsEmpty()) {
        <button type="button" #clearButton [hidden]="isDisabled"
          class="slab-combo-button border-right-0 rounded-0 {{deleteIconClass}}" (click)="clearText($event)"
        tabindex="-1"></button>
      }
      @if (withFavourites && id) {
        <button type="button" #favouriteButton class="slab-combo-button slab-combo-star border-right-0 rounded-0 text-primary"
        [ngClass]="{'icon-star': isFavourite, 'icon-star-o': !isFavourite}" (click)="doToggleFavourite($event)" tabindex="-1"></button>
      }
      <button #combobutton type="button" class="slab-combo-button slab-combo-button-icon" [disabled]="isDisabled"
      (click)="onComboClicked($event)" tabindex="-1"></button>
    </div>
    <div #dropdownmenu class="dropdown-menu slab-combo-dropdown" (click)="clickDropDownMenu($event)" [ngClass]="{'disabled': isDisabled}">
      <div #dropdown id="slab-combo-dropdown-box" class="slab-combo-dropdown-box">
        <div #hidden class="height-hidden"></div>
        @if (isDropdownOpened) {
          <ag-grid-angular #grid id="agGrid" #agGrid
            style="width: 100%; height: 100%;"
            class="ag-theme-alpine"
            [style.font-family]="fontFamily"
            [style.font-size.px]="fontSize"
            [style.font-weight]="fontWeight"
            [style.font-style]="fontStyle"
            [gridOptions]="gridOptions"
            (selectionChanged)="onSelectionChanged($event)"
            (rowSelected)="onRowSelected($event)"
            (modelUpdated)="onModelUpdated()"
            (cellKeyDown)="onCellKeyDown($event)"
            (gridReady)="doGridReady($event)">
          </ag-grid-angular>
        }
      </div>

    </div>
  </div>