<div flex layout="row" ng-init="isShown=false">
  <md-icon md-font-icon="fa fa-search" class="search-icon" ng-click="isShown=true"
           ng-class="{'che-toolbar-control-button' : !isShown}"></md-icon>
  <div flex layout="row" ng-class="{'move-out': isShown, 'move-in': !isShown}"
       class="search-component">
    <input class="search-input" type="text" name="{{inputName}}" ng-trim="false"
           data-ng-model="valueModel" placeholder="{{placeholder}}">
    <md-icon md-font-icon="fa fa-close" ng-click="isShown=false" ng-show="isShown"></md-icon>
  </div>
</div>
