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)">
        <input *ngIf="!customInputRenderer" #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"/>
        <div *ngIf="customInputRenderer" #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>
        <button *ngIf="withDeleteOption && id && (id !== defaultIdValue)" type="button" #deleteButton
                class="slab-combo-button border-right-0 rounded-0 {{deleteIconClass}}" (click)="deleteValueSelected($event)"
                tabindex="-1"></button>
        <button *ngIf="withIcon && id" class="slab-combo-button border-right-0 rounded-0 {{iconClass}}"
                [style.color]="iconColor" tabindex="-1"></button>
        <button type="button" *ngIf="withFavourites && id!==null && (!isTree || (isTree && level))" #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">
            <div *ngIf="filter" 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>
            <div *ngIf="selectDeselectAll" 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">
                <ag-grid-angular *ngIf="isDropdownOpened" #grid id="agGrid" #agGrid style="width: 100%; height: 100%;"
                                 [style.font-family]="fontFamily"
                                 [style.font-size.px]="fontSize" [style.font-weight]="fontWeight"
                                 [style.font-style]="fontStyle" class="ag-theme-fresh"
                                 [gridOptions]="gridOptions" (selectionChanged)="onSelectionChanged($event)"
                                 (modelUpdated)="onModelUpdated()"
                                 (rowSelected)="onRowSelected($event)" (gridReady)="doGridReady()"
                                 (cellKeyDown)="onCellKeyDown($event)">
                </ag-grid-angular>
            </div>
        </div>
    </div>
</div>

<div *ngIf="listSelectedValues && multipleSelection">
    <ul class="ml-1 mt-2 mb-0 pl-0" *ngIf="multipleSelectedItemList.length < 8">
        <li class="slab-combo-badge badge badge-primary mr-1 p-2" role="badge"
            *ngFor="let item of multipleSelectedItemList"><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>
    <ul class="ml-1 mt-2 pl-0" *ngIf="multipleSelectedItemList.length > 7">
        <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>