feat(select-setting): add dark-theme styling

package.json

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

src/plugins/header/options/option/theme.less

@@ -48,6 +48,12 @@
           filter: invert(1);
         }
       }
+
+      &.uip-settings {
+        .uip-select-setting .esl-select .esl-select-renderer::after {
+          color: @light-text;
+        }
+      }
     }
   }
 }

src/plugins/header/options/options.ts

@@ -46,12 +46,12 @@ export class UIPOptions extends UIPPlugin {
   }
 
   protected bindEvents() {
-    this.addEventListener('esl:uip:option:changed', this._onOptionClick);
+    this.addEventListener('uip:option:changed', this._onOptionClick);
     this.root?.addEventListener('uip:configchange', this._onRootConfigChange);
   }
 
   protected unbindEvents() {
-    this.removeEventListener('esl:uip:option:changed', this._onOptionClick);
+    this.removeEventListener('uip:option:changed', this._onOptionClick);
     this.root?.removeEventListener('uip:configchange', this._onRootConfigChange);
   }
 

src/settings/select-setting/select-setting.less

@@ -8,5 +8,31 @@
   .esl-select-renderer {
     padding: 0 2px;
     border: 1px solid #ced4da;
+
+    &::after {
+      color: @dark-text;
+    }
+  }
+}
+
+.uip-select-dropdown {
+  .esl-select-item::before {
+    border-color: @dark-text;
+  }
+
+  .esl-select-item[selected]::before {
+    background-color: @dark-theme;
+  }
+
+  &.uip-dark-dropdown {
+    .esl-select-list {
+      background-color: @dark-theme;
+      color: @light-text;
+    }
+
+    .esl-select-item::before {
+      background-color: @dark-theme;
+      border-color: @light-text;
+    }
   }
 }

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

@@ -1,11 +1,15 @@
 import {attr, boolAttr} 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';
+import {memoize} from '@exadel/esl/modules/esl-utils/decorators/memoize';
 
 import {UIPSetting} from '../../plugins/settings/setting';
 import {ChangeAttrConfig, UIPStateModel} from '../../core/base/model';
 import TokenListUtils from '../../utils/token-list-utils';
 import {WARNING_MSG} from '../../utils/warning-msg';
+import {UIPRoot} from '../../registration';
+
 
 /**
  * Custom setting for selecting attribute's value.
@@ -15,6 +19,7 @@ export class UIPSelectSetting extends UIPSetting {
   public static is = 'uip-select-setting';
   /** Option displayed when setting has inconsistent state. */
   public static inconsistentValue = 'inconsistent';
+  private static dropdownClass = 'uip-select-dropdown';
 
   /** Setting's visible name. */
   @attr({defaultValue: ''}) public label: string;
@@ -27,44 +32,67 @@ export class UIPSelectSetting extends UIPSetting {
   /** Indicates whether setting supports multiple values selected or not. */
   @boolAttr() public multiple: boolean;
   /** Select field to change setting's value. */
-  protected $field: ESLSelect;
+  @memoize()
+  protected get $field(): ESLSelect {
+    const $field = document.createElement('esl-select');
+    $field.name = this.label;
+    $field.dropdownClass = UIPSelectSetting.dropdownClass;
+    $field.$select = this.select;
+    $field.append(this.select);
+    return $field;
+  }
+
+  @memoize()
+  protected get $label(): HTMLLabelElement {
+    const $label = document.createElement('label');
+    $label.innerText = this.label;
+    return $label;
+  }
 
+  @memoize()
   protected get settingOptions(): string[] {
     return this.$field.options.map(opt => opt.value);
   }
 
-  protected connectedCallback() {
-    super.connectedCallback();
-    if (this.$field) return;
+  /** Initialization of {@link ESLSelect}. */
+  @memoize()
+  protected get select(): HTMLSelectElement {
+    const select = document.createElement('select');
+    select.setAttribute('esl-select-target', '');
+    select.multiple = this.multiple;
+    select.id = `${UIPSelectSetting.is}-${randUID()}`;
+    this.querySelectorAll('option').forEach(option => select.add(option));
+    return select;
+  }
 
-    this.$field = document.createElement('esl-select');
-    this.$field.name = this.label;
-    this.initSelect();
+  @memoize()
+  protected get root(): UIPRoot {
+    return this.closest(UIPRoot.is) as UIPRoot;
+  }
 
-    const label = document.createElement('label');
-    label.innerText = this.label;
-    label.htmlFor = this.$field.$select.id;
-    this.appendChild(label);
+  protected connectedCallback() {
+    super.connectedCallback();
+    this.$label.htmlFor = this.$field.$select.id;
 
     this.innerHTML = '';
+    this.appendChild(this.$label);
     this.appendChild(this.$field);
+    this.bindEvents();
   }
 
-  /** Initialization of {@link ESLSelect}. */
-  protected initSelect(): void {
-    const select = document.createElement('select');
-    select.setAttribute('esl-select-target', '');
-    select.multiple = this.multiple;
-    select.id = `${UIPSelectSetting.is}-${randUID()}`;
-
-    this.querySelectorAll('option').forEach(option => select.add(option));
+  protected disconnectedCallback(): void {
+    this.unbindEvents();
+    super.disconnectedCallback();
+  }
 
-    select.addEventListener('change', () => {
-      select.remove(this.settingOptions.indexOf(UIPSelectSetting.inconsistentValue));
-    });
+  protected bindEvents(): void {
+    this.select.addEventListener('change', this.clearInconsistency);
+    this.root.addEventListener('uip:configchange', this.onRootThemeChange);
+  }
 
-    this.$field.$select = select;
-    this.$field.appendChild(select);
+  protected unbindEvents(): void {
+    this.select.removeEventListener('change', this.clearInconsistency);
+    this.root.removeEventListener('uip:configchange', this.onRootThemeChange);
   }
 
   applyTo(model: UIPStateModel) {
@@ -149,6 +177,19 @@ export class UIPSelectSetting extends UIPSetting {
     this.$field.update();
   }
 
+  @bind
+  protected clearInconsistency(): void {
+    this.select.remove(this.settingOptions.indexOf(UIPSelectSetting.inconsistentValue));
+  }
+
+  @bind
+  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';
+  }
+
   /** Reset [select]{@link $field} value. */
   protected reset(): void {
     this.$field.options.forEach(opt => opt.selected = false);