Oops, it should be dark

* fix: prevent intermediate change event when CustomFieldQueryAtom operator changes type

* Add regression test

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html

@@ -86,7 +86,7 @@
         <div class="selected-icon">
           @if (addedRelativeDate) {
             <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedRelativeDate()">
-              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused text-dark"></i-bs>
               <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
             </a>
           }

src-ui/src/app/utils/custom-field-query-element.spec.ts

@@ -142,6 +142,21 @@ describe('CustomFieldQueryAtom', () => {
     atom.value = [1, 3]
     expect(changeSpy).toHaveBeenCalledTimes(1)
   })
+
+  it('should emit one changed event when operator change coerces value', () => {
+    const atom = new CustomFieldQueryAtom([
+      1,
+      CustomFieldQueryOperator.In,
+      [1, 2],
+    ])
+    const changeSpy = jest.fn()
+    atom.changed.subscribe(changeSpy)
+
+    atom.operator = CustomFieldQueryOperator.Exact
+
+    expect(changeSpy).toHaveBeenCalledTimes(1)
+    expect(atom.serialize()).toEqual([1, CustomFieldQueryOperator.Exact, ''])
+  })
 })
 
 describe('CustomFieldQueryExpression', () => {

src-ui/src/app/utils/custom-field-query-element.ts

@@ -70,29 +70,29 @@ export class CustomFieldQueryAtom extends CustomFieldQueryElement {
     const newTypes: string[] =
       CUSTOM_FIELD_QUERY_VALUE_TYPES_BY_OPERATOR[operator]?.split('|')
     if (!newTypes) {
-      this.value = null
+      this._value = null
     } else {
       if (!newTypes.includes(typeof this.value)) {
         switch (newTypes[0]) {
           case 'string':
-            this.value = ''
+            this._value = ''
             break
           case 'boolean':
-            this.value = 'true'
+            this._value = 'true'
             break
           case 'array':
-            this.value = []
+            this._value = []
             break
           case 'number':
             const num = parseFloat(this.value as string)
-            this.value = isNaN(num) ? null : num.toString()
+            this._value = isNaN(num) ? null : num.toString()
             break
         }
       } else if (
         ['true', 'false'].includes(this.value as string) &&
         newTypes.includes('string')
       ) {
-        this.value = ''
+        this._value = ''
       }
     }
     super.operator = operator