<!-- 
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.   See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership. 
  ~ The ASF licenses this file to You 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. 
  ~
  -->
<mat-form-field style="width: 100%; margin-top: 3px" appearance="none">
    <mat-label>label selection</mat-label>
    <mat-select [(value)]="_selectedCategory" placeholder="selected category">
        <mat-option *ngFor="let category of _categories" [value]="category">
            {{category}}
        </mat-option>
    </mat-select>
</mat-form-field>
<mat-chip-list style="margin-bottom: 20px">
    <mat-chip *ngFor="let label of _labels[_selectedCategory]" [selectable]="selectable"
              [removable]="removable" [style.color]="colorService.getColor(label)" (click)="selectLabel({category: _selectedCategory, name: label})">
        <! --<mat-icon matListIcon [style.color]="getColor(label)" style="margin-top: 7px; margin-right: 0px; font-size: 16px">speaker_notes</mat-icon>-->
        <span style="margin-left: 0px; position: relative">{{label}}</span>
    </mat-chip>
</mat-chip-list>
