<div class="inputgroup form-group">

  <label>
    {{fieldlabel}}
  </label>

  <br/>

  <div *ngIf="!inlineColorPicker" class="input-container" style="display: inline-flex;
    align-items: center;" (click)="openColorPicker()">
    <input type="text" class="input-control" name="value" [(ngModel)]="value" />
    <span *ngIf="value" style="display: inline-block; width:32px; height:32px;" [style.background]="value"></span>
    &nbsp;
    <em class="fa fa-paint-brush" style="cursor: pointer;"></em>
  </div>

  <div  *ngIf="showColorPicker || inlineColorPicker " [@changeState]="showColorPicker "
       [ngClass]="{'card-container': (!inlineColorPicker)}" 
       [ngStyle]="{'position': (inlineColorPicker) ? 'relative':'absolute',
                     'height': (showColorPicker) ? '270px': 'auto','margin-top': (showColorPicker) ? '15px': '0px' }"
       style="align-items: center;z-index:70">
    <div class="color-wrapper {{roundedgeclass}}"  style="justify-content: center;">
      <color-palette [hue]="hue" [position]="position" (color)="selectedPaletteColor($event)"></color-palette>
      <color-slider [offsetY]="offsetY" [selected-hue]="hue" (color)="selectedHue($event)" style="margin-left:0px">
      </color-slider>
    </div>
    <span>
    <amexio-button *ngIf="!inlineColorPicker" [size]="'small'" (onClick)="closeColorPicker()" [label]="'Close'" [type]="'theme-color'" [tooltip]="'Close'">
    </amexio-button>
  </span>
  </div>
</div>
