<!--/*
* ============LICENSE_START=======================================================
* ONAP : CDS
* ================================================================================
* Copyright (C) 2020 TechMahindra
*=================================================================================
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============LICENSE_END=========================================================
*/-->
<div class="col-11">
   <div class= "row ">
       <div class="card creat-card source1">
           <h5 class="label-name"> Sources Options</h5>
           <div class="searchBox row"><i class="searchButton1 col-1" aria-hidden="true"></i>
            <input class="searchText col-8" [(ngModel)]="searchText" type="input" placeholder="filter sources">
          </div>
           
       <div class="example-container">
        <div
          cdkDropList
          #todoList="cdkDropList"
          [cdkDropListData]="option"
          [cdkDropListConnectedTo]="[doneList]"
          class="example-list"
          (cdkDropListDropped)="drop($event)">
          <div class="example-box card creat-card" *ngFor="let item of option| search :searchText" cdkDrag>
            <input type="checkbox" class="checkbox" [(ngModel)]="checked" (change)="onChange(item, $event.target.checked)">
            {{item.name}}
          </div>
          
        </div>
       
      </div>
      <div class="footer row">
        <a class="select-button col-sm-05">Select all</a>
        <button  class="action-button1 col-sm-04" >Add to list</button>
      </div>
   </div>
    
      <div class="card creat-card source">
        <h5 class="label-name">Sources List</h5>
        <div class="example-container2 card creat-card"> 
            <div
              cdkDropList
              #doneList="cdkDropList"
              [cdkDropListData]="sourcesOptions"
              [cdkDropListConnectedTo]="[todoList]"
              class="example-list1"
              (cdkDropListDropped)="drop($event)">
              
              <div class="example-box1" *ngFor="let item of sourcesOptions" cdkDrag