systelab-components/html/abstract-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" (click)="onComboClicked($event)" (keydown.arrowDown)="onComboKeyArrowDown($event)"
    (keydown.arrowUp)="onComboKeyArrowUp($event)">
    @if (iconSide === 'left') {
      @if (withIcon && id) {
        <button class="slab-combo-button border-right-0 rounded-0 {{iconClass}}"
        [style.color]="iconColor" tabindex="-1"></button>
      }
    }
    @if (!customInputRenderer) {
      <input #input [readonly]="!allowEditInput" type="text"
        class="slab-flex-1 slab-combo-label slab-combo-input"
        [tabindex]="tabindex"
        [ngStyle]="getInputHeight()" [style.font-family]="fontFamily" [style.font-size.px]="fontSize"
        [style.font-weight]="fontWeight" [style.font-style]="fontStyle"
        [(ngModel)]="description" [disabled]="isDisabled" [style.color]="inputColor"/>
    }
    @if (customInputRenderer) {
      <div #input readonly type="text"
        class="slab-flex-1 slab-combo-input combobox-input-renderer" [ngStyle]="getInputHeight()"
        [style.font-family]="fontFamily" [style.font-size.px]="fontSize" [style.font-weight]="fontWeight"
        [style.font-style]="fontStyle" [style.color]="inputColor"
        [tabindex]="tabindex">
        <combobox-input-renderer [componentType]="customInputRenderer" [id]="id" [description]="description"
          [initialParams]="initialParams"
        [selectedData]="currentSelected"></combobox-input-renderer>
      </div>
    }
    @if (withDeleteOption && id && (id !== defaultIdValue)) {
      <button type="button" #deleteButton
        class="slab-combo-button border-right-0 rounded-0 {{deleteIconClass}}" (click)="deleteValueSelected($event)"
      tabindex="-1"></button>
    }
    @if (iconSide === 'right') {
      @if (withIcon && id) {
        <button class="slab-combo-button border-right-0 rounded-0 {{iconClass}}"
        [style.color]="iconColor" tabindex="-1"></button>
      }
    }
    @if (withFavourites && id!==null && (!isTree || (isTree && level))) {
      <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 type="button" #combobutton class="slab-combo-button slab-combo-button-icon" [disabled]="isDisabled"
    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 d-flex flex-column">
      @if (filter) {
        <div class="slab-filter-container" [style.font-family]="fontFamily"
          [style.font-size.px]="fontSize" [style.font-weight]="fontWeight" [tabindex]="tabindex"
          [style.font-style]="fontStyle">
          <input class="w-100 border rounded" [value]="filterValue" #filterInput (keyup)="doSearch($event)">
        </div>
      }
      @if (selectDeselectAll) {
        <div class="slab-filter-container mb-2">
          <div class="w-100 text-center btn-group" role="group">
            <button type="button" class="btn btn-sm w-50"
            (click)="doSelectAll()">{{'COMMON_SELECT_ALL' | translate | async }}</button>
            <button type="button" class="btn btn-sm w-50"
            (click)="doDeselectAll()">{{'COMMON_DESELECT_ALL' | translate | async }}</button>
          </div>
        </div>
      }
      <div #hidden class="height-hidden"></div>
      <div class="slab-flex-1 position-relative">
        @if (isDropdownOpened) {
          <ag-grid-angular #grid id="agGrid" #agGrid style="width: 100%; height: 100%;"
            [rowData]="rowData"
            [style.font-family]="fontFamily"
            [style.font-size.px]="fontSize" [style.font-weight]="fontWeight"
            [style.font-style]="fontStyle" class="ag-theme-alpine"
            [gridOptions]="gridOptions" (selectionChanged)="onSelectionChanged($event)"
            (modelUpdated)="onModelUpdated()"
            (rowSelected)="onRowSelected($event)" (gridReady)="doGridReady($event)"
            (cellKeyDown)="onCellKeyDown($event)">
          </ag-grid-angular>
        }
      </div>
    </div>
  </div>
</div>

@if (listSelectedValues && multipleSelection) {
  <div>
    @if (multipleSelectedItemList.length < 8) {
      <ul class="ml-1 mt-2 mb-0 pl-0">
        @for (item of multipleSelectedItemList; track item) {
          <li class="slab-combo-badge badge badge-primary mr-1 p-2" role="badge"
            ><span
          class="float-left mr-2">{{item.description}}</span>
          <button data-dismiss="badge" type="button" class="close" (click)="removeItem(item)" aria-label="Close"
            tabindex="-1">
            <span aria-hidden="true">&times;</span>
          </button>
        </li>
      }
    </ul>
  }
  @if (multipleSelectedItemList.length > 7) {
    <ul class="ml-1 mt-2 pl-0">
      <li class="slab-combo-badge badge badge-primary mr-1 p-2"
        role="badge">{{'COMMON_SELECTED_ITEMS' | translate | async }}
        <span class="badge badge-light">{{multipleSelectedItemList.length}}</span>
      </li>
    </ul>
  }
</div>
}