fix(select-setting): reset select class on light theme

package.json

@@ -65,7 +65,7 @@
     "node": ">=14.17.0"
   },
   "dependencies": {
-    "@exadel/esl": "^4.0.0-beta.9",
+    "@exadel/esl": "^4.0.0-beta.10",
     "@types/js-beautify": "^1.13.3",
     "ace-builds": "^1.6.1",
     "js-beautify": "^1.14.4"

src/settings/select-setting/select-setting.ts

@@ -1,4 +1,4 @@
-import {attr, boolAttr} from '@exadel/esl/modules/esl-base-element/core';
+import {attr, boolAttr, listen} from '@exadel/esl/modules/esl-base-element/core';
 import type {ESLSelect} from '@exadel/esl/modules/esl-forms/esl-select/core';
 import {randUID} from '@exadel/esl/modules/esl-utils/misc/uid';
 import {bind} from '@exadel/esl/modules/esl-utils/decorators/bind';
@@ -80,21 +80,6 @@ export class UIPSelectSetting extends UIPSetting {
     this.bindEvents();
   }
 
-  protected disconnectedCallback(): void {
-    this.unbindEvents();
-    super.disconnectedCallback();
-  }
-
-  protected bindEvents(): void {
-    this.select.addEventListener('change', this.clearInconsistency);
-    this.root.addEventListener('uip:configchange', this.onRootThemeChange);
-  }
-
-  protected unbindEvents(): void {
-    this.select.removeEventListener('change', this.clearInconsistency);
-    this.root.removeEventListener('uip:configchange', this.onRootThemeChange);
-  }
-
   applyTo(model: UIPStateModel) {
     if (this.mode === 'replace') return super.applyTo(model);
 
@@ -177,17 +162,17 @@ export class UIPSelectSetting extends UIPSetting {
     this.$field.update();
   }
 
-  @bind
+  @listen('change')
   protected clearInconsistency(): void {
     this.select.remove(this.settingOptions.indexOf(UIPSelectSetting.inconsistentValue));
   }
 
-  @bind
+  @listen({event: 'change', target: '.uip-root'})
   protected onRootThemeChange(e: CustomEvent): void {
     if (e.detail.attribute !== 'dark-theme') return;
-    this.$field.removeAttribute('dropdown-class');
-    this.$field.dropdownClass = UIPSelectSetting.dropdownClass;
-    if (e.detail.value !== null) this.$field.dropdownClass += ' uip-dark-dropdown';
+    let dropdownClass = UIPSelectSetting.dropdownClass
+    if (e.detail.value !== null) dropdownClass += ' uip-dark-dropdown';
+    this.$field.setAttribute('dropdown-class', dropdownClass);
   }
 
   /** Reset [select]{@link $field} value. */