UI: rule chain search improvements

ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.html

@@ -22,13 +22,14 @@
          (focusin)="onFocus()"
          [matAutocomplete]="ruleChainAutocomplete">
   <mat-icon matSuffix>search</mat-icon>
-  <mat-autocomplete class="tb-autocomplete"
+  <mat-autocomplete class="tb-autocomplete tb-rule-chain-search"
                     #ruleChainAutocomplete="matAutocomplete"
                     (optionSelected)="selected($event)">
     <mat-option *ngFor="let ruleChain of filteredRuleChains | async"
-                [fxHide]="ruleChainId === ruleChain.id.id"
+                [class.tb-selected-option]="ruleChainId === ruleChain.id.id"
                 [value]="ruleChain">
-      <span [innerHTML]="ruleChain.name | highlight:searchText"></span>
+      <mat-icon *ngIf="ruleChainId === ruleChain.id.id">check</mat-icon>
+      <span [innerHTML]="ruleChain.name | highlight:searchText:true"></span>
     </mat-option>
     <mat-option *ngIf="!(filteredRuleChains | async)?.length" [value]="null" class="tb-not-found">
       <div class="tb-not-found-content" (click)="$event.stopPropagation()">

ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.scss

@@ -13,6 +13,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import "../../../../scss/constants";
+
 :host {
   width: 100%;
 }
+
+::ng-deep {
+  .tb-autocomplete.tb-rule-chain-search {
+    .mat-mdc-option.tb-selected-option {
+      display: flex;
+      flex-direction: row-reverse;
+      background-color: rgba(0, 0, 0, .04);
+
+      mat-icon {
+        margin-right: 0;
+        margin-left: 16px;
+        color: $tb-primary-color;
+      }
+
+      .mdc-list-item__primary-text {
+        color: $tb-primary-color;
+      }
+    }
+  }
+}

ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html

@@ -16,12 +16,11 @@
 
 -->
 <mat-form-field class="tb-rule-select" subscriptSizing="dynamic" appearance="fill"
-                [ngClass]="{'cursor-pointer': !disabled}"
+                [class.cursor-pointer]="!disabled"
                 (click)="openRuleChainSelectPanel($event)">
   <mat-icon matPrefix>settings_ethernet</mat-icon>
-  <input matInput readonly
+  <input matInput readonly disabled
          [required]="required"
-         [disabled]="disabled"
          [value]="ruleChain?.name">
-  <mat-icon [ngClass]="{'disabled': disabled || panelOpened}" matSuffix>arrow_drop_down</mat-icon>
+  <mat-icon [class.disabled]="disabled || panelOpened" matSuffix>arrow_drop_down</mat-icon>
 </mat-form-field>

ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss

@@ -23,6 +23,8 @@
     input {
       color: #fff;
       cursor: pointer;
+      text-overflow: ellipsis;
+      pointer-events: none;
 
       &:disabled {
         cursor: unset;