style 🎯 : selected value in tooltip

NsdHSO · Oct 21, 2023 · 4da5af9 · 4da5af9
1 parent 731834d
commit 4da5af9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/ftx-sivan-shared/src/lib/components/input/sivan-input.component.html b/ftx-sivan-shared/src/lib/components/input/sivan-input.component.html
@@ -67,8 +67,13 @@
     <p>Options are available:</p>
     <ul>
       <li
-        (click)="onBlur(option)"
-        *ngFor="let option of optionis; trackBy: generative.trackBy"
+        (click)="onBlur(option, index)"
+        *ngFor="
+          let option of optionis;
+          let index = index;
+          trackBy: generative.trackBy
+        "
+        [ngClass]="{ 'dark:bg-gray-700': index === selectedOption }"
       >
         {{ option }}
       </li>
@@ -83,6 +88,7 @@
       class="currency-flag"
       *ngFor="let option of optionis; trackBy: generative.trackBy"
       (click)="selectCountry(option)"
+      [ngClass]="{ 'dark:bg-gray-700': selectedOption?.icon === option.icon }"
     >
       <mat-icon class="!w-full" [svgIcon]="option.icon" />
     </div>

diff --git a/ftx-sivan-shared/src/lib/components/input/sivan-input.component.ts b/ftx-sivan-shared/src/lib/components/input/sivan-input.component.ts
@@ -1,4 +1,10 @@
-import { ChangeDetectorRef, Component, inject, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  Input,
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { OutlineDirective, ScrollHintDirective } from '../../directive';
@@ -76,13 +82,16 @@ import { GenerativeService } from '../../service';
       transition('up <=> down', animate('300ms ease-out')),
     ]),
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SivanInputComponent {
   @Input({ required: true }) hintTop!: string;
   @Input() mainControl?: NgControl | any | unknown; //eslint-disable-line
   @Input() currencyControl?: NgControl | any | unknown; //eslint-disable-line
   @Input({ required: true }) placeholder!: string;
   @Input() colorMatIcon!: string;
+  //eslint-disable-next-line
+  selectedOption: { icon: string; placeholder: string } | any;
   optionis: any = []; //eslint-disable-line
   isInputClick = false;
   isInputCurrencyClick = false;
@@ -101,8 +110,10 @@ export class SivanInputComponent {
     }
   }
 
-  onBlur<T>(choice: T) {
+  onBlur<T>(choice: T, index: number) {
     this.isInputClick = false;
+    //eslint-disable-next-line
+    this.selectedOption = index;
     this.mainControl.setValue(choice);
   }
 
@@ -114,6 +125,7 @@ export class SivanInputComponent {
   >(option: T) {
     this.isInputCurrencyClick = false;
     this.currencyControl.setValue(option);
+    this.selectedOption = option;
   }
 
   currencyControll() {