diff --git a/package.json b/package.json index ceb0399c..7758e07b 100644 --- a/package.json +++ b/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" diff --git a/src/settings/select-setting/select-setting.ts b/src/settings/select-setting/select-setting.ts index 42eefbf3..02027b49 100644 --- a/src/settings/select-setting/select-setting.ts +++ b/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. */