my-test123/app/components/label-selector/label-selector.component.html

A planner front-end for Fabric8.

<f8-select-dropdown
  #dropdown
  [toggleButtonRef]="toggleButtonRef"
  [dropdownItem]="dropdownItem"
  [dropdownFooter]="dropdownFooter"
  [headerText]="'Add label'"
  [menuItems]="labels"
  [showSearch]="backup.length > 8"
  (onSelect)="onSelect($event)"
  (onSearch)="onSearch($event)"
  (onOpen)="onOpen($event)"
  (onClose)="onClose($event)">
  <ng-template #toggleButtonRef>
    <span class="clickable add-label" (click)="closeAddLabel()">
      <i class="pficon pficon-add-circle-o"></i>
      Add label
    </span>
  </ng-template>
  <ng-template #dropdownItem let-color="color" let-border="border" let-name="name">
    <div [ngStyle]="{'background-color': color, 'border-color': border}" class="palet"></div>
    <span [innerHTML]="name | almSearchHighlight: searchValue"></span>
  </ng-template>
  <ng-template #dropdownFooter>
    <div *ngIf="!activeAddLabel"
      (click)="clickOnAddLabel()"
      class="create-label-button">
      <span class="pficon pficon-add-circle-o"></span>
      Create new label
    </div>
    <div [class.hide]="!activeAddLabel || colorPickerActive"
      class="create-label">
      <div [ngStyle]="{'background-color': newSelectedColor.color, 'border-color': newSelectedColor.border}"
        (click)="toggleColorPicker()" class="palet">
      </div>
      <input class="create-label-input" #labelname autofocus/>
      <button class="action-btn btn btn-primary fa fa-check"
        [class.disabled]="createDisabled"
        (click)="createLabel(labelname.value)">
      </button>
      <button class="action-btn btn pficon pficon-close"
        (click)="closeAddLabel()">
      </button>
    </div>
    <div class="color-picker"
      [class.hide]="activeAddLabel && !colorPickerActive">
      <span
        *ngFor="let color of colors" class="palet clickable margin-4"
        [ngStyle]="{'background-color': color.color, 'border-color':color.border}"
        (click)="selectColor(color); toggleColorPicker();">
      </span>
    </div>
  </ng-template>
</f8-select-dropdown>