import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  styles: [
    `
            kendo-dropdownlist {
                width: 170px;
            }

            .k-list-item.k-selected, 
            .k-selected.k-list-optionlabel, 
            .k-list-item.k-selected, 
            .k-selected.k-list-optionlabel,
            .k-list-item.k-selected:hover, 
            .k-selected.k-list-optionlabel:hover, 
            .k-list-item.k-selected:hover, 
            .k-selected.k-list-optionlabel:hover {
                color: #007bff;
                font-weight: bold;
            }
        `,
  ],
  template: `
      <div class="example-wrapper">
          <kendo-dropdownlist #dropdownlist1
              [data]="listItems"
              textField="text"
              valueField="value"
              [value]="selectedValue"
              [valuePrimitive]="true"
              [filterable]="true"
              (filterChange)="handleFilter($event, dropdownlist1, 1)"
              (opened)="openedDropdown($event)"
          >
              <ng-template kendoDropDownListItemTemplate let-dataItem>
                  <span style="text-align: center" [style.background]="dataItem.color" class="dropdownItem">{{ dataItem.text }}</span>
              </ng-template>
              <ng-template kendoDropDownListValueTemplate let-dataItem>
              <span style="text-align: center" [style.background]="dataItem.color" class="dropdownItem">{{ dataItem.text }}</span>
          </ng-template>
          </kendo-dropdownlist>
      </div>
    `,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  public listItems: Array<{ text: string; value: number; color: string }> = [
    { text: 'Small', value: 1, color: 'rgb(241, 175, 200)' },
    { text: 'Medium', value: 2, color: 'rgb(238, 240, 175)' },
    { text: 'Large', value: 3, color: 'rgb(175, 240, 176)' },
  ];

  public selectedValue = 2;

  public openedDropdown(e) {
    var items = document.querySelectorAll('.dropdownItem');
    items.forEach((item) => {
      item.parentElement['style'].backgroundColor =
        item['style'].backgroundColor;
    });
  }

  handleFilter(value,dropdl,i) {
        dropdl.data = this.listItems.filter(
          (s) => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1
        );
        this.openedDropdown(dropdl)
}
}